/* Site tools: theme switch, language, reading progress. */

/* The header is fixed, so keep focused fields and anchors clear of it. */
html { scroll-padding-top:116px; }

/* Page tops must clear the fixed header, whose height changes when the
   navigation wraps onto a second row. --header-h is measured in site-tools.js.
   The home hero starts below that bar so the photograph is not cropped by it. */
.hero{
  margin-top:var(--header-h,90px);
  height:calc(100vh - var(--header-h,90px));
  height:calc(100svh - var(--header-h,90px));
  padding-top:0!important;
}
.hero .hero-content{padding-top:0}
.shop-hero{padding-top:calc(var(--header-h,90px) + 28px)}

.site-tools{display:flex;align-items:center;gap:6px;margin-left:10px;flex:0 0 auto}
.site-tool{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  width:38px;height:38px;padding:0;margin:0;
  border:1px solid rgba(255,255,255,.22);border-radius:9px;
  background:rgba(255,255,255,.06);color:inherit;
  cursor:pointer;line-height:0;font:inherit;
}
.site-tool:hover{background:rgba(255,255,255,.14)}
.site-tool:focus-visible{outline:2px solid var(--primary-light,#9D4EDD);outline-offset:2px}
.site-tool svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.site-lang{position:relative;margin:0}
.site-lang-btn{
  width:auto;min-width:44px;padding:0 9px;gap:5px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
  list-style:none;cursor:pointer;user-select:none;
}
.site-lang-btn::-webkit-details-marker{display:none}
.site-lang-btn::marker{content:""}
.site-lang-btn svg{width:15px;height:15px;flex:0 0 auto}
.site-lang[open] .site-lang-btn{background:rgba(255,255,255,.16)}
.lang-code{line-height:1;white-space:nowrap}
.lang-panel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:3000;
  width:min(240px,72vw);max-height:min(60vh,420px);overflow:auto;
  padding:6px;border-radius:12px;display:grid;gap:2px;
  background:#12111a;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.lang-panel button{
  display:block;width:100%;padding:8px 10px;text-align:left;
  border:0;border-radius:8px;background:transparent;color:#eee;
  font:inherit;font-size:.86rem;line-height:1.3;cursor:pointer;
}
.lang-panel button:hover{background:rgba(255,255,255,.12)}
.lang-panel button:focus-visible{outline:2px solid var(--primary-light,#9D4EDD);outline-offset:-2px}
.lang-panel button[aria-current="true"]{color:var(--gold,#D4AF37);font-weight:700}
html[data-theme="light"] .lang-panel{
  background:#fff;border-color:rgba(0,0,0,.14);box-shadow:0 18px 44px rgba(0,0,0,.18);
}
html[data-theme="light"] .lang-panel button{color:#171321}
html[data-theme="light"] .lang-panel button:hover{background:rgba(0,0,0,.06)}
html[data-theme="light"] .lang-panel button[aria-current="true"]{color:#8a6d1f}
html[data-theme="light"] .site-lang[open] .site-lang-btn{background:rgba(0,0,0,.06)}
@media (min-width:460px){
  .lang-panel{width:min(420px,80vw);grid-template-columns:1fr 1fr}
}
.site-progress{position:relative}
.site-progress .ring-track{stroke:rgba(255,255,255,.22)}
.site-progress .ring-fill{stroke:var(--gold,#D4AF37);stroke-dasharray:50.27;stroke-dashoffset:50.27;transition:stroke-dashoffset .12s linear}

@media (max-width:768px){
  .site-tools{gap:4px;margin-left:6px}
  .site-tool{width:34px;height:34px;border-radius:8px}
  .site-tool svg{width:17px;height:17px}
  .site-lang-btn{padding:0 7px;min-width:40px;font-size:.68rem}
  .site-lang-btn svg{display:none}
}

/* Google website translator: keep its own chrome out of the layout. */
#google_translate_element,
.goog-te-banner-frame,
iframe.skiptranslate{display:none!important}
body{top:0!important}

/* Reserve room for the fixed bottom dock so page content never hides under it. */
@media (max-width:640px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom, 0px))}
}

/* ================= Light theme ================= */
html[data-theme="light"]{
  --dark:#f4f2f7;
  --dark2:#ffffff;
  --white:#171321;
  --gray:#4c4658;
  --gold:#8a6d1f;
  color-scheme:light;
}
html[data-theme="light"] body{background:#f4f2f7;color:#171321}

/* shell */
/* script.js writes an inline dark background on scroll, so !important is required. */
html[data-theme="light"] header{background:rgba(255,255,255,.94)!important;border-bottom:1px solid rgba(0,0,0,.08)}
html[data-theme="light"] .logo{color:#171321}
html[data-theme="light"] .nav-links{background:#fff}
html[data-theme="light"] .nav-links a{color:#171321}
html[data-theme="light"] footer{background:#ece9f2;color:#3a3448}
html[data-theme="light"] .footer-box h2,
html[data-theme="light"] .footer-box h3,
html[data-theme="light"] .footer-box p,
html[data-theme="light"] .footer-box li,
html[data-theme="light"] .footer-bottom p{color:#3a3448}
html[data-theme="light"] .footer-legal a,
html[data-theme="light"] .footer-note a,
html[data-theme="light"] footer a{color:#3a3448}

/* sections that flip to a light canvas */
html[data-theme="light"] .featured,
html[data-theme="light"] .why-us,
html[data-theme="light"] .newsletter,
html[data-theme="light"] .about,
html[data-theme="light"] .categories,
html[data-theme="light"] .testimonials,
html[data-theme="light"] .contact-section,
html[data-theme="light"] .pro-auth,
html[data-theme="light"] .pro-admin{background:#f4f2f7}

/* text on those canvases */
html[data-theme="light"] .featured :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt,blockquote,figcaption),
html[data-theme="light"] .why-us :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt,blockquote,figcaption),
html[data-theme="light"] .newsletter :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt,blockquote,figcaption),
html[data-theme="light"] .about :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt,blockquote,figcaption),
html[data-theme="light"] .categories :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt,figcaption),
html[data-theme="light"] .testimonials :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt,blockquote,figcaption),
html[data-theme="light"] .contact-section :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt,figcaption),
html[data-theme="light"] .pro-auth :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt),
html[data-theme="light"] .pro-admin :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt),
html[data-theme="light"] .pro-summary :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt),
html[data-theme="light"] .pro-order :is(h1,h2,h3,h4,h5,p,li,label,strong,small,span,dd,dt){color:#171321}

/* accents */
html[data-theme="light"] .about-features,
html[data-theme="light"] .about-features *{color:#171321}
html[data-theme="light"] .section-title span,
html[data-theme="light"] .about-content span,
html[data-theme="light"] .newsletter-content span{color:#8a6d1f}
html[data-theme="light"] .pro-text-link{color:#5b21b6}
html[data-theme="light"] .pro-text-link:hover{color:#7c3aed}

/* cards and panels */
html[data-theme="light"] .product-card,
html[data-theme="light"] .why-card,
html[data-theme="light"] .customer,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .pro-card,
html[data-theme="light"] .pro-summary,
html[data-theme="light"] .pro-order,
html[data-theme="light"] .pro-admin-section,
html[data-theme="light"] .pro-admin-card,
html[data-theme="light"] .newsletter-content,
html[data-theme="light"] .fablux-admin-stat{
  background:#ffffff;
  border-color:rgba(0,0,0,.12);
  box-shadow:0 8px 24px rgba(20,16,28,.06);
}

/* forms */
html[data-theme="light"] .pro-form input,
html[data-theme="light"] .pro-form select,
html[data-theme="light"] .pro-form textarea,
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea,
html[data-theme="light"] .pro-shop-tools input,
html[data-theme="light"] .pro-shop-tools select{background:#ffffff;color:#171321;border-color:rgba(0,0,0,.22)}
html[data-theme="light"] .newsletter-form input{background:#ffffff;color:#171321;border:1px solid rgba(0,0,0,.22)}
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea{border:1px solid rgba(0,0,0,.18)}
html[data-theme="light"] .contact-card a{color:#5b21b6}
html[data-theme="light"] .pro-form input::placeholder,
html[data-theme="light"] .contact-form input::placeholder,
html[data-theme="light"] .contact-form textarea::placeholder{color:#6b6478}
html[data-theme="light"] .pro-form .password-toggle{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.24);color:#171321}
html[data-theme="light"] .pro-form .password-toggle:hover{background:rgba(0,0,0,.09)}

/* small controls */
html[data-theme="light"] .btn-outline{color:#171321;border-color:rgba(0,0,0,.35)}
html[data-theme="light"] .filter-btn{color:#171321;background:#ffffff;border-color:rgba(0,0,0,.2)}
html[data-theme="light"] .filter-btn:hover,
html[data-theme="light"] .filter-btn.active{color:#fff;background:#7B2CBF;border-color:#7B2CBF}
html[data-theme="light"] .site-tool{border-color:rgba(0,0,0,.2);background:rgba(0,0,0,.04);color:#171321}
html[data-theme="light"] .site-tool:hover{background:rgba(0,0,0,.09)}
html[data-theme="light"] .site-progress .ring-track{stroke:rgba(0,0,0,.2)}
html[data-theme="light"] .pro-divider,
html[data-theme="light"] .pro-muted,
html[data-theme="light"] .pro-form small{color:#5b5468;opacity:1}

/* Heroes: a soft lilac wash on the text side only, so the photograph stays
   visible. It runs left-to-right because the copy sits on the left and the
   model is on the right. */
html[data-theme="light"] .overlay{
  background:linear-gradient(96deg,
    rgba(247,243,255,.95) 0%,
    rgba(247,243,255,.90) 30%,
    rgba(245,240,255,.62) 46%,
    rgba(242,235,252,.22) 64%,
    rgba(240,232,252,.05) 100%)!important;
}
html[data-theme="light"] .shop-overlay{
  background:linear-gradient(96deg,
    rgba(247,243,255,.90) 0%,
    rgba(246,241,255,.72) 42%,
    rgba(241,233,252,.28) 72%,
    rgba(240,232,252,.08) 100%)!important;
}
@media (max-width:768px){
  html[data-theme="light"] .overlay{
    background:linear-gradient(180deg,
      rgba(247,243,255,.92) 0%,
      rgba(245,240,255,.78) 55%,
      rgba(240,232,252,.58) 100%)!important;
  }
  html[data-theme="light"] .shop-overlay{
    background:linear-gradient(180deg,
      rgba(247,243,255,.88) 0%,
      rgba(242,235,252,.62) 100%)!important;
  }
}
html[data-theme="light"] .hero :is(h1,h2,h3,p,span),
html[data-theme="light"] .shop-hero :is(h1,h2,h3,p,span),
html[data-theme="light"] .hero .scroll{color:#171321!important}
html[data-theme="light"] .hero .btn,
html[data-theme="light"] .shop-hero .btn{color:#fff!important}
html[data-theme="light"] .hero .hero-secondary,
html[data-theme="light"] .hero .btn-outline,
html[data-theme="light"] .shop-hero .btn-outline{
  color:#171321!important;border-color:rgba(0,0,0,.4)!important;background:transparent!important;
}
html[data-theme="light"] .shop-hero .shop-small-title{color:#8a6d1f!important}

/* Areas that must stay dark: image overlays and the quick-view modal. */
html[data-theme="light"] .category-overlay,
html[data-theme="light"] .category-overlay *,
html[data-theme="light"] .modal,
html[data-theme="light"] .modal *{color:#fff!important}
html[data-theme="light"] .fablux-toast{background:#1f1b2b;color:#fff}