/* ============================================================
   Orthodox Sanctuary — Shared Animation System
   One consistent motion language for every page: micro-interactions
   on hover/press, scroll-triggered reveals, gentle page transitions,
   and loading states. Luxury-calm as the baseline, with small
   lively accents (wishlist pop, badge pulse) for delight.
   ============================================================ */

:root {
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.35s;
  --dur-slow: 0.6s;
}

/* ── SKIP TO CONTENT (accessibility) ──
   Off-screen until it receives keyboard focus (Tab from a fresh page
   load), so a screen-reader or keyboard-only visitor can jump straight
   past the header/nav instead of tabbing through every link first. */
.skip-to-content {
  position: absolute; top: -100px; left: 12px; z-index: 10000;
  background: #1c1a17; color: #e8dfc8; padding: 12px 20px;
  border-radius: 4px; text-decoration: none; font-size: 0.85rem;
  transition: top 0.2s ease;
}
.skip-to-content:focus { top: 12px; }

/* ---- Page transition: gold thread trace ----
   Every page fades in on load; internal links draw a thin gold line
   across the top of the screen (echoing a knotted prayer-rope thread)
   while the page fades out, then draw it again briefly on arrival — see
   animations.js for the trigger logic. */
html { scroll-behavior: smooth; }

/* Opt every page into the browser's native cross-document View
   Transitions API (Chrome/Edge only — everywhere else this is simply
   ignored, no fallback needed since it's a pure progressive enhancement).
   By itself this changes nothing; only elements that also carry a
   matching view-transition-name on both the outgoing and incoming page
   actually morph — used deliberately in just one spot: a product's
   photo, from the grid card into its own product page. */
@view-transition { navigation: auto; }


/* ---- Page transition ---- */
/* Every page fades in on load; internal links fade the page out
   briefly before navigating (see animations.js), so moving between
   pages feels like one continuous site instead of hard page loads. */
body { animation: pageFadeIn 0.45s var(--ease-smooth); }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.page-leaving { opacity: 0 !important; transition: opacity 0.2s var(--ease-soft); }

/* ---- Scroll reveal (existing site convention, kept identical) ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth); will-change: opacity, transform; }
.reveal.reveal-visible { opacity: 1; transform: translateY(0); }
.reveal-fade { opacity: 0; transition: opacity 0.9s var(--ease-smooth); }
.reveal-fade.reveal-visible { opacity: 1; }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth); }
.reveal-scale.reveal-visible { opacity: 1; transform: scale(1); }

/* ---- Universal button / interactive-element feedback ---- */
/* Targets every button-like class already used across the site, so
   no markup changes are needed on existing pages. */
button, a.btn, .btn, .btn-outline, .btn-dark, .btn-cancel, .btn-add,
.action-btn, .submit-btn, .save-btn, .signout-btn, .add-btn,
.place-order-btn, .write-review-btn, .review-submit-btn, .review-cancel-btn,
.grace-btn, .bundle-add-btn, .oauth-btn, .pstock-btn, .coupon-btn,
.gallery-thumb, .qty-btn {
  transition: transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              opacity var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
button:not(:disabled):active, a.btn:active, .btn:not(.disabled):active,
.action-btn:active, .submit-btn:not(:disabled):active, .save-btn:active,
.add-btn:not(:disabled):active, .place-order-btn:not(:disabled):active,
.bundle-add-btn:active, .oauth-btn:active, .pstock-btn:active {
  transform: scale(0.96);
}
button:disabled, .submit-btn:disabled, .add-btn:disabled, .place-order-btn:disabled {
  transform: none !important;
}

/* Subtle lift on hover for primary call-to-action buttons (desktop only —
   avoids a "stuck hover" look on touch devices) */
@media (hover: hover) and (pointer: fine) {
  .submit-btn:not(:disabled):hover, .place-order-btn:not(:disabled):hover,
  .save-btn:hover, .bundle-add-btn:hover, .write-review-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(28,26,23,0.14);
  }
}

/* ---- Card hover lift ---- */
.product-card, .order-card, .user-order, .acct-section, .bundle-card,
.pstock-card, .message-card, .card, .grace-panel {
  transition: transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
@media (hover: hover) and (pointer: fine) {
  .product-card:not(.out-of-stock-card):hover, .bundle-card:hover, .pstock-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(28,26,23,0.10);
  }
}

/* ---- Links: soft underline sweep (only where a page opts in) ---- */
.link-anim { position: relative; text-decoration: none; }
.link-anim::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: currentColor; transition: width var(--dur-base) var(--ease-smooth);
}
.link-anim:hover::after { width: 100%; }

/* ---- Form fields: focus glow ---- */
input, select, textarea {
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(154,123,47,0.15);
}

/* ---- Wishlist heart: real heartbeat rhythm (lub-dub, twice) on activation ---- */
@keyframes heartBeat {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.3); }
  24%  { transform: scale(1.05); }
  36%  { transform: scale(1.28); }
  50%  { transform: scale(1); }
  100% { transform: scale(1); }
}
.wishlist-btn.active, [data-wishlist-btn].active { animation: heartBeat 1.1s var(--ease-soft); }

/* ---- Badge pulse (cart count, messages count, etc. — see data-badge-watch in JS) ---- */
@keyframes badgePulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.badge-pulse { animation: badgePulse 0.4s var(--ease-bounce); }

/* ---- Star rating hover (product reviews) ---- */
.star-picker span { transition: transform var(--dur-fast) var(--ease-bounce), color var(--dur-fast) var(--ease-soft); display: inline-block; }
.star-picker span:hover { transform: scale(1.25); }

/* ---- Modal / panel open ---- */
@keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal.open .modal-content, .modal-overlay.open .modal-box { animation: modalPop 0.3s var(--ease-smooth); }

/* ---- Toast ---- */
@keyframes toastSlideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.toast.show, #adminToast { animation: toastSlideIn 0.35s var(--ease-smooth); }

/* ---- Skeleton shimmer (loading states while data fetches from Supabase) ---- */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 37%, rgba(0,0,0,0.06) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
  color: transparent !important;
}

/* ---- Table row stagger (admin tables, order lists) ---- */
.stagger-row { opacity: 0; animation: staggerIn 0.45s var(--ease-smooth) forwards; }
@keyframes staggerIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Global overflow safety net ----
   Prevents any single long word/string (emails, order numbers, long links)
   from forcing the whole page wider than the viewport on small screens.
   Scoped to table cells and paragraph text rather than every element, so
   tight UI like buttons and badges keep their intended layout. */
html, body { max-width: 100vw; overflow-x: hidden; }
table { table-layout: auto; }
td, th, p { overflow-wrap: break-word; word-break: break-word; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ---- iOS Safari auto-zoom prevention ----
   iOS Safari (and iOS Chrome, same WebKit engine) automatically zooms the
   whole page in when a user focuses an input/select/textarea with a computed
   font-size under 16px. Across this site, most form fields use ~14-15px for
   visual density — fine on desktop, but on iPhones this causes a jarring,
   uncontrolled zoom every time someone taps into a field. Forcing 16px
   specifically on touch-sized screens fixes this without changing desktop. */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

   min-width:auto, meaning they refuse to shrink below their own content's
   natural width — even inside a "1fr" track. On narrow screens this silently
   forces the whole grid/row (and everything after it) wider than the
   viewport. Every known grid container across the site is listed here so
   its direct children can actually shrink to fit. */
.values-grid > *, .acct-stats > *, .form-row > *, .mini-wish-grid > *,
.stats-grid > *, .detail-grid > *, #products-grid > *, .card-row > *,
.dash-grid > *, .products-grid > *, .bundles-grid > *, .banner-strip > *,
.contact-inner > *, .contact-form-row > *, .footer-grid > *, .co-main > *,
.co-row > *, .co-card-row > *, .product-main > *, .related-grid > *,
.steps-grid > *, .knot-grid > * {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body.page-leaving { opacity: 1 !important; }
}

/* ══════════════════════════════════════════════════════════════
   KNOT DESIGN SYSTEM — a shared visual language across the site,
   inspired by the actual nine-cross knot technique used on every
   prayer rope: notched corners (like a pulled knot) + a thin gold
   "thread" that draws itself around interactive elements on hover,
   finishing with a small knot mark. Shared here so every page that
   loads animations.css gets it automatically.
   ══════════════════════════════════════════════════════════════ */

@property --knot-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Notched corner shape — apply to buttons, cards, badges */
.knot-corner {
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.knot-corner-sm {
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

/* Self-tying thread button — the gold border "draws itself" on hover/focus,
   then a small knot mark pulses in at the top-right corner. */
.knot-thread {
  position: relative;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.knot-thread:hover,
.knot-thread:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(28,26,23,0.35);
}
.knot-thread::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  clip-path: inherit;
  background: conic-gradient(from var(--knot-angle), #c4a052 0deg, #c4a052 0deg, transparent 0deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: knot-thread-idle 0s;
  z-index: 1;
  pointer-events: none;
}
.knot-thread:hover::before,
.knot-thread:focus-visible::before {
  opacity: 1;
  animation: knot-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes knot-draw {
  from { background: conic-gradient(from var(--knot-angle), #c4a052 0deg, #c4a052 0deg, transparent 0deg, transparent 360deg); }
  to   { background: conic-gradient(from var(--knot-angle), #c4a052 0deg, #c4a052 360deg, transparent 360deg, transparent 360deg); }
}
.knot-thread::after {
  content: '◈';
  position: absolute;
  top: -7px; right: -7px;
  width: 14px; height: 14px;
  font-size: 10px; line-height: 14px; text-align: center;
  color: #c4a052;
  opacity: 0;
  transform: scale(0.3) rotate(-30deg);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s;
  z-index: 2;
  pointer-events: none;
}
.knot-thread:hover::after,
.knot-thread:focus-visible::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Notched "pulled ribbon" badge shape (for New / Best Seller tags) */
.knot-badge {
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  padding-inline-end: 16px !important;
}

/* Underline-only input style, with a gold focus tick */
.knot-input-underline {
  background: none !important;
  border: none !important;
  border-bottom: 1.5px solid var(--border, #e2dbd0) !important;
  border-radius: 0 !important;
  transition: border-color 0.3s ease;
}
.knot-input-underline:focus {
  border-bottom-color: #c4a052 !important;
  outline: none !important;
}

/* Simplified geometric knot mark for dividers */
.knot-mark-icon {
  display: inline-block;
  width: 16px; height: 16px;
  position: relative;
}
.knot-mark-icon::before, .knot-mark-icon::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1.3px solid #9a7b2f;
  transform: rotate(45deg);
}
.knot-mark-icon::after {
  inset: 6px;
}

/* ── LANGUAGE PILL DROPDOWN ──
   Simple, elegant dropdown: rounded pill button showing the current
   language, opens a small menu of the other options on click. Replaces the
   old drag-to-select gear lever site-wide — same look and behavior on
   every page, storefront and Owner Panel alike. */
.lang-pill {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 26px auto 8px;
}
.lang-pill-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e2dbd0);
  border-radius: 999px;
  padding: 11px 20px;
  font-family: inherit; font-size: 0.88rem; color: var(--dark, #1c1a17);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}
.lang-pill-trigger:hover { border-color: #c4a052; }
.lang-pill.open .lang-pill-trigger { border-color: #9a7b2f; box-shadow: 0 0 0 3px rgba(154,123,47,0.12); }
.lang-pill-arrow {
  font-size: 0.75rem; color: var(--muted, #7a6f62); line-height: 1;
  transition: transform 0.3s var(--ease-smooth);
}
.lang-pill.open .lang-pill-arrow { transform: rotate(180deg); }
.lang-pill-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e2dbd0);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(28,26,23,0.14);
  padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth), visibility 0.25s;
  z-index: 60;
}
.lang-pill.open .lang-pill-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-pill-opt {
  padding: 10px 14px;
  font-size: 0.85rem; color: var(--dark, #1c1a17);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lang-pill-opt:hover { background: var(--smoke, #f0ece4); }
.lang-pill-opt.active { color: #9a7b2f; font-weight: 600; background: rgba(154,123,47,0.08); }
body.ar-mode .lang-pill-trigger { font-family: 'Cairo', sans-serif; }
body.ar-mode .lang-pill-opt { font-family: 'Cairo', sans-serif; }

/* Refined hairline divider — an ultra-thin gold line that fades at both
   ends, with a small centered mark. Drop-in replacement for thicker
   solid-color dividers wherever a lighter touch is wanted. */
.hairline-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0;
}
.hairline-divider::before,
.hairline-divider::after {
  content: '';
  flex: 1; height: 1px;
}
.hairline-divider::before { background: linear-gradient(90deg, transparent, #c4a052); }
.hairline-divider::after { background: linear-gradient(90deg, #c4a052, transparent); }
.hairline-divider .mark { color: #9a7b2f; font-size: 0.65rem; flex-shrink: 0; }

/* ── SITE-WIDE NAVIGATION DRAWER (hamburger + slide-out side menu) ──
   Shared here so secondary pages (contact, about, faq, policies, etc.)
   can use the exact same drawer as the homepage. ── */
/* ── HAMBURGER MENU BUTTON ── */
.menu-toggle-btn {
  width: 34px; height: 34px; background: none; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; transition: border-color 0.35s var(--ease-smooth);
  flex-shrink: 0;
}
.menu-toggle-btn:hover { border-color: var(--gold); }
.menu-toggle-btn span { width: 16px; height: 2px; background: var(--dark); transition: background 0.35s var(--ease-smooth); }
.menu-toggle-btn:hover span { background: var(--gold); }
/* On dark headers (the secondary pages' .page-header / .checkout-header are
   near-black), a dark hamburger icon on a dark background is invisible —
   render it in the header's light text color there instead. */
.page-header .menu-toggle-btn, .checkout-header .menu-toggle-btn {
  border-color: rgba(154,123,47,0.4);
}
.page-header .menu-toggle-btn span, .checkout-header .menu-toggle-btn span {
  background: #e8dfc8;
}
.page-header .menu-toggle-btn:hover, .checkout-header .menu-toggle-btn:hover {
  border-color: var(--gold-lt);
}
.page-header .menu-toggle-btn:hover span, .checkout-header .menu-toggle-btn:hover span {
  background: var(--gold-lt);
}

/* Hamburger → X morph. Each bar transitions independently (own duration/
   easing) so it reads as a single deliberate fold, not three bars moving
   in lockstep — distinct from the rest of the site's uniform easing on
   purpose, since this is the one control someone touches on every visit. */
.menu-toggle-btn span:nth-child(1) { transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), background 0.35s var(--ease-smooth); }
.menu-toggle-btn span:nth-child(2) { transition: opacity 0.2s ease, transform 0.2s ease; }
.menu-toggle-btn span:nth-child(3) { transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1) 0.03s, background 0.35s var(--ease-smooth); }
.menu-toggle-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle-btn.open span:nth-child(2) { opacity: 0; transform: translateX(-6px); }
.menu-toggle-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── SIDE MENU ── */
.side-menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 400;
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-smooth);
}
.side-menu-overlay.open { opacity: 1; pointer-events: all; }
.side-menu {
  position: fixed; top: 0; bottom: 0; right: 0; width: 300px; max-width: 85vw;
  background: var(--cream); z-index: 401; box-shadow: -6px 0 30px rgba(0,0,0,0.2);
  transform: translateX(100%); transition: transform 0.5s var(--ease-smooth);
  display: flex; flex-direction: column; overflow-y: auto;
}
.side-menu.open { transform: translateX(0); }
body.ar-mode .side-menu { right: auto; left: 0; transform: translateX(-100%); }
body.ar-mode .side-menu.open { transform: translateX(0); }

.side-menu-head {
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--dark);
flex-wrap:wrap;gap:8px;min-width:0;}
.side-menu-logo { font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.15em; color: var(--gold-lt); }
.side-menu-close {
  background: none; border: none; color: #cfc3ac; font-size: 1rem; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; transition: background 0.35s var(--ease-smooth), color 0.35s var(--ease-smooth), transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.side-menu-close:hover { background: var(--gold); color: white; transform: rotate(90deg); }
.side-menu-close:active { transform: rotate(90deg) scale(0.88); }

/* ── CART ADD FEEDBACK ── */
@keyframes cartBadgeBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5) rotate(-8deg); }
  55%  { transform: scale(0.9) rotate(4deg); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.cart-badge.bump { animation: cartBadgeBounce 0.55s cubic-bezier(0.34,1.56,0.64,1); }
#cartIconBtn.bump { animation: cartBadgeBounce 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.cart-fly-dot {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 14px; height: 14px; border-radius: 50%; background: var(--gold, #9a7b2f);
  box-shadow: 0 0 0 2px rgba(154,123,47,0.3);
  transition: transform 0.55s cubic-bezier(0.2,0.8,0.2,1), opacity 0.55s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .cart-badge.bump, #cartIconBtn.bump { animation: none; }
}

.side-menu-section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.side-menu-label {
  font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 10px;
}
body.ar-mode .side-menu-label { font-family: 'Cairo', sans-serif; letter-spacing: 0; text-transform: none; }

.side-menu-lang { width: fit-content; }

.side-menu-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  color: var(--dark); font-size: 0.86rem; text-decoration: none;
  transition: color 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth), padding-left 0.35s var(--ease-smooth);
  opacity: 0;
  border-radius: 5px;
}
.side-menu-link:hover { color: var(--gold); transform: translateX(4px); }
body.ar-mode .side-menu-link:hover { transform: translateX(-4px); }
.side-menu.open .side-menu-link { animation: sideLinkIn 0.9s var(--ease-smooth) both; }
@keyframes sideLinkIn {
  0% { opacity: 0; transform: translateX(90px); box-shadow: -3px 0 8px rgba(0,0,0,0.06); background: var(--smoke); }
  70% { box-shadow: -3px 0 8px rgba(0,0,0,0.06); background: var(--smoke); }
  100% { opacity: 1; transform: translateX(0); box-shadow: none; background: transparent; }
}
body.ar-mode .side-menu.open .side-menu-link { animation-name: sideLinkInRtl; }
@keyframes sideLinkInRtl {
  0% { opacity: 0; transform: translateX(-90px); box-shadow: 3px 0 8px rgba(0,0,0,0.06); background: var(--smoke); }
  70% { box-shadow: 3px 0 8px rgba(0,0,0,0.06); background: var(--smoke); }
  100% { opacity: 1; transform: translateX(0); box-shadow: none; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .side-menu-link { animation: none !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; background: transparent !important; }
}
.side-menu-link-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
body.ar-mode .side-menu-link { font-family: 'Cairo', sans-serif; }

.side-menu-footer {
  margin-top: auto; padding: 16px 20px; font-size: 0.78rem; color: var(--muted);
  border-top: 1px solid var(--border);
}
.side-menu-footer a:hover { color: var(--gold); }
.account-status-dot {
  position: absolute; top: -2px; right: -2px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green); border: 1.5px solid var(--cream);
  display: none;
}
.account-status-dot.show { display: block; }

.wishlist-count-badge {
  position: absolute; top: -6px; right: -10px; min-width: 15px; height: 15px;
  border-radius: 5px; background: var(--red); color: white; font-size: 0.6rem;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}
body.ar-mode .wishlist-count-badge { right: auto; left: -10px; }