:root{
    /* DEFAULT THEME: light (цагаан) */
    --espresso:#FAF6F0;
    --cacao:#F3EBDF;
    --umber:#D9C6AC;
    --bronze:#A97C42;
    --gold:#A87421;
    --ivory:#241410;
    --blush:#7A5F4C;
  }
  html[data-theme="dark"]{
    --espresso:#241410;
    --cacao:#3A2419;
    --umber:#5C3A28;
    --bronze:#B8875A;
    --gold:#D4AB6E;
    --ivory:#F3E9DC;
    --blush:#C89E88;
  }
  *{scroll-behavior:smooth;}
  body{font-family:'Jost',sans-serif; background-color:var(--espresso); color:var(--ivory);}
  .font-display{font-family:'Cormorant Garamond', serif;}
  .tracking-wide2{letter-spacing:.18em;}
  .hairline{height:1px; background:linear-gradient(90deg, transparent, var(--bronze), transparent);}
  .gold-text{color:var(--gold);}
  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-thumb{background:var(--umber); border-radius:4px;}

  /* slider */
  .slide{transition: transform .7s cubic-bezier(.65,0,.35,1); }
  .dot{width:8px;height:8px;border-radius:999px;background:rgba(243,233,220,.35);transition:all .3s;}
  .dot.active{background:var(--gold); width:22px;}

  .frame-card{
    border:1px solid rgba(184,135,90,.35);
    background: linear-gradient(180deg, rgba(58,36,25,.6), rgba(36,20,16,.9));
  }
  .frame-card:hover{border-color:rgba(212,171,110,.8);}

  .seal{
    background: radial-gradient(circle at 30% 30%, #D4AB6E, #B8875A 70%);
    color:#241410;
  }

  /* Hero always sits on a dark image overlay — pin dark palette regardless of theme */
  #hero{
    --gold:#D4AB6E;
    --bronze:#B8875A;
    --ivory:#F3E9DC;
    --blush:#C89E88;
    color:#F3E9DC;
  }

  .nav-underline{position:relative;}
  .nav-underline::after{
    content:'';position:absolute;left:0;bottom:-6px;width:0%;height:1px;background:var(--gold);
    transition:width .35s ease;
  }
  .nav-underline:hover::after{width:100%;}

  input[type=text]:focus, input[type=email]:focus{outline:none; border-color:var(--gold);}

  @media (prefers-reduced-motion: reduce){
    .slide{transition:none;}
  }

  /* carousels (products / sets) */
  .carousel-track{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .carousel-track::-webkit-scrollbar{ display:none; }
  .carousel-track.dragging{ cursor: grabbing; scroll-snap-type: none; }
  @media (min-width:768px){ .carousel-track{ gap:1.5rem; } }

  .carousel-arrow{
    position:absolute; top:40%; transform:translateY(-50%); z-index:20;
    width:2.5rem; height:2.5rem; border-radius:999px;
    background: rgba(36,20,16,.85);
    border:1px solid rgba(212,171,110,.5);
    display:flex; align-items:center; justify-content:center;
    color:var(--ivory);
    transition: background .3s, color .3s, border-color .3s;
  }
  .carousel-arrow:hover{ background:var(--gold); color:#241410; border-color:var(--gold); }
  @media (min-width:768px){ .carousel-arrow{ width:3rem; height:3rem; } }

  .scrollbar-hide{ scrollbar-width:none; -ms-overflow-style:none; }
  .scrollbar-hide::-webkit-scrollbar{ display:none; }

  /* product stock badges */
  .stock-badge.instock{
    background: rgba(212,171,110,.16);
    border: 1px solid rgba(212,171,110,.7);
    color: var(--gold);
    backdrop-filter: blur(2px);
  }
  .stock-badge.preorder{
    background: rgba(36,20,16,.75);
    border: 1px solid rgba(200,158,136,.55);
    color: var(--blush);
    backdrop-filter: blur(2px);
  }-- added toast + mini cart styles --

/* cart toast notification (assets/js/cart.js) */
.tm-toast{
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;
  background: var(--espresso); border: 1px solid var(--gold);
  color: var(--ivory); padding: .85rem 1.25rem; border-radius: 4px;
  font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transform: translateY(20px); opacity: 0; transition: all .35s ease;
  pointer-events: none;
}
.tm-toast.show{ transform: translateY(0); opacity: 1; }

/* qty stepper used on cart page */
.qty-stepper{ display:flex; align-items:center; border:1px solid rgba(184,135,90,.4); border-radius:999px; overflow:hidden; }
.qty-stepper button{ width:2rem; height:2rem; color: var(--ivory); }
.qty-stepper button:hover{ background: var(--gold); color:#241410; }
.qty-stepper input{ width:2.5rem; text-align:center; background:transparent; color:var(--ivory); border:none; }

/* =========================================================
   WISHLIST (зүрх)
   ========================================================= */
.wish-btn{ color: var(--blush); }
.wish-btn svg{ fill:none; stroke:currentColor; }
.wish-btn:hover{ color: var(--gold); border-color: var(--gold); }
.wish-btn.active{ color: var(--gold); border-color: var(--gold); }
.wish-btn.active svg{ fill: currentColor; }

/* =========================================================
   LIGHT THEME (DEFAULT)  —  html БЕЗ data-theme="dark"
   Доорх override-ууд Tailwind-ийн бараан hex классуудыг
   цагаан theme-д тохируулна. Хар theme = data-theme="dark".
   ========================================================= */

html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb{ background:#D9C6AC; }

/* --- surface / background utility overrides --- */
html:not([data-theme="dark"]) .bg-\[\#241410\]\/95{ background-color:rgba(252,250,246,.95); }
html:not([data-theme="dark"]) .bg-\[\#241410\]{ background-color:#FFFFFF; }
html:not([data-theme="dark"]) .bg-\[\#1a0f0a\]{ background-color:#F2EBE0; }
html:not([data-theme="dark"]) .bg-\[\#1a0f0a\]\/60{ background-color:rgba(242,235,224,.85); }
html:not([data-theme="dark"]) .bg-\[\#2b1810\]{ background-color:#FFFFFF; }
html:not([data-theme="dark"]) .hover\:bg-\[\#3A2419\]\/40:hover{ background-color:rgba(241,233,222,.7); }
html:not([data-theme="dark"]) .hover\:bg-\[\#3A2419\]:hover{ background-color:#F1E9DE; }

/* --- text utility overrides --- */
html:not([data-theme="dark"]) .text-\[\#C89E88\]{ color:#7A5F4C; }
html:not([data-theme="dark"]) .text-\[\#8a6a58\]{ color:#9A8470; }
html:not([data-theme="dark"]) .text-\[\#5C3A28\]{ color:#C9B8A2; }
html:not([data-theme="dark"]) .placeholder\:text-\[\#8a6a58\]::placeholder{ color:#B5A18D; }

/* --- border utility overrides --- */
html:not([data-theme="dark"]) .border-\[\#5C3A28\]{ border-color:#DECDB6; }
html:not([data-theme="dark"]) .border-\[\#5C3A28\]\/50{ border-color:rgba(190,160,120,.5); }
html:not([data-theme="dark"]) .border-\[\#5C3A28\]\/40{ border-color:rgba(190,160,120,.4); }
html:not([data-theme="dark"]) .border-\[\#5C3A28\]\/25{ border-color:rgba(190,160,120,.25); }
html:not([data-theme="dark"]) .border-\[\#5C3A28\]\/20{ border-color:rgba(190,160,120,.2); }

/* --- component overrides --- */
html:not([data-theme="dark"]) .frame-card{
  border:1px solid #E7D8C2;
  background:#FFFFFF;
  box-shadow:0 2px 14px rgba(90,60,30,.06);
}
html:not([data-theme="dark"]) .frame-card:hover{ border-color:rgba(168,116,33,.6); }

html:not([data-theme="dark"]) .carousel-arrow{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(168,116,33,.45);
  color:#241410;
}
html:not([data-theme="dark"]) .carousel-arrow:hover{ background:var(--gold); color:#FFFFFF; border-color:var(--gold); }

html:not([data-theme="dark"]) .tm-toast{
  background:#FFFFFF;
  border:1px solid var(--gold);
  color:#241410;
  box-shadow:0 10px 30px rgba(90,60,30,.18);
}

html:not([data-theme="dark"]) .stock-badge.instock{
  background:rgba(168,116,33,.08);
  border:1px solid rgba(168,116,33,.6);
  color:#8A5F16;
}
html:not([data-theme="dark"]) .stock-badge.preorder{
  background:#F6EFE4;
  border:1px solid #C9AE8D;
  color:#7A5F4C;
}

html:not([data-theme="dark"]) .qty-stepper{ border-color:rgba(168,116,33,.4); }
html:not([data-theme="dark"]) .qty-stepper button:hover{ color:#FFFFFF; }

/* carousel dots on light backgrounds (hero keeps its own dark-overlay styling) */
html:not([data-theme="dark"]) .dot{ background:rgba(36,20,16,.2); }
html:not([data-theme="dark"]) .dot.active{ background:var(--gold); }
html:not([data-theme="dark"]) #hero .dot{ background:rgba(243,233,220,.35); }
html:not([data-theme="dark"]) #hero .dot.active{ background:#D4AB6E; }

/* =========================================================
   THEME TOGGLE BUTTON
   ========================================================= */
.theme-toggle{ color:var(--blush); transition:color .3s; }
.theme-toggle:hover{ color:var(--gold); }
.theme-toggle .icon-sun{ display:block; }
.theme-toggle .icon-moon{ display:none; }
html:not([data-theme="dark"]) .theme-toggle .icon-sun{ display:none; }
html:not([data-theme="dark"]) .theme-toggle .icon-moon{ display:block; }