/* ===================================================================
   Mohammadi Bakery Supply — Stylesheet
=================================================================== */
:root{
  --white:#FFFFFF;
  --cream:#FAF6F0;
  --cream-deep:#F3ECDD;
  --ink:#1C1C1C;
  --ink-soft:#767066;
  --gold:#B9A26D;
  --gold-deep:#C9A227;
  --gold-line:#D8CBA6;
  --gold-grad:linear-gradient(135deg, #E8C766, #C9A227);
  --line:#ECE7DD;
  --whatsapp:#25D366;
  --panel-dark:#0e0c0a;
  --panel-dark-2:#1b1712;
  --spice:#B5652B;
  --spice-deep:#8F4E1F;
  --olive:#8CA06B;
  --olive-deep:#5F7645;
  --olive-tint:#EAF0DE;
  --radius:18px;
  --radius-sm:10px;
  --shadow:0 4px 24px rgba(28,28,28,.05);
  --shadow-hover:0 14px 34px rgba(28,28,28,.10);
  --transition:all .25s ease;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--ink);
  font-family:'Estedad', Tahoma, sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none; color:inherit;}
button{font-family:inherit; cursor:pointer;}
img{display:block; max-width:100%;}
h1,h2,h3,p{margin:0;}
/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,246,240,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 20px rgba(28,20,10,.04);
}
.header-inner{
  display:flex; align-items:center; gap:16px;
  padding:13px 20px; max-width:1320px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.header-search{
  display:none; flex:1; max-width:320px; margin:0 auto;
  align-items:center; gap:9px; background:var(--white);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  transition:var(--transition);
}
.header-search:focus-within{border-color:var(--gold-line); box-shadow:0 0 0 3px rgba(201,162,39,.1);}
.header-search svg{width:15px; height:15px; stroke:var(--ink-soft); fill:none; stroke-width:1.7; flex-shrink:0;}
.header-search input{border:none; outline:none; background:transparent; flex:1; font-family:inherit; font-size:.8rem; color:var(--ink);}
.header-search.mobile{display:flex; max-width:none; margin:0 0 14px; background:var(--cream);}
.main-nav{display:none; align-items:center; gap:22px; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-inline-start:auto;}
.main-nav a{position:relative; transition:var(--transition); padding-bottom:3px;}
.main-nav a::after{
  content:""; position:absolute; right:0; left:0; bottom:0; height:2px;
  background:var(--gold-grad); border-radius:2px; transform:scaleX(0); transition:transform .25s ease;
}
.main-nav a:hover{color:var(--ink);}
.main-nav a:hover::after, .main-nav a.active::after{transform:scaleX(1);}
.main-nav a.active{color:var(--ink);}
.hamburger-btn{
  margin-inline-start:auto; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.hamburger-btn span{width:16px; height:1.5px; background:var(--ink); transition:var(--transition);}
.hamburger-btn.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.hamburger-btn.open span:nth-child(2){opacity:0;}
.hamburger-btn.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.mobile-menu{max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 20px;}
.mobile-menu.open{max-height:560px; padding:14px 20px 18px;}
.mobile-menu a{display:flex; align-items:center; justify-content:space-between; padding:12px 2px; font-size:.85rem; font-weight:600; border-bottom:1px solid var(--line);}
/* ================= CATEGORY BAR (all pages, loop auto-scroll) ================= */
.category-bar{
  display:flex; gap:10px; overflow-x:auto; padding:14px 20px;
  border-bottom:1px solid var(--line); scrollbar-width:none;
}
.category-bar::-webkit-scrollbar{display:none;}
.category-pill{
  flex-shrink:0; font-size:.74rem; font-weight:600; color:var(--ink-soft);
  background:var(--cream); border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; transition:var(--transition); white-space:nowrap;
}
.category-pill:hover{border-color:var(--gold);}
.category-pill.active{background:var(--ink); color:#fff; border-color:var(--ink);}
/* ================= FEATURED / BEST-SELLERS (home) ================= */
.section-subtitle{font-size:.78rem; color:var(--ink-soft); margin:-14px 0 22px;}
/* ================= BRAND PARTNERS SLIDER ================= */
.brands-section{background:var(--cream); border-radius:24px;}
.brand-slider{display:flex; align-items:center; gap:26px; overflow-x:auto; scrollbar-width:none; padding:6px 0;}
.brand-slider::-webkit-scrollbar{display:none;}
.brand-logo-item{flex-shrink:0; width:120px; height:60px; display:flex; align-items:center; justify-content:center;}
.brand-logo-item img{
  width:100%; height:100%; object-fit:contain;
  filter:grayscale(1); opacity:.55; transition:var(--transition);
}
.brand-logo-item img:hover{filter:grayscale(0); opacity:1;}
.trust-bar{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px 10px;
  padding:20px; background:var(--white); border-bottom:1px solid var(--line);
}
.trust-item{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.trust-item svg{width:21px; height:21px; stroke:var(--gold-deep); fill:none; stroke-width:1.6; flex-shrink:0;}
.trust-item strong{display:block; font-size:.76rem; font-weight:700;}
.trust-item span{display:block; font-size:.68rem; color:var(--ink-soft);}
@media (min-width:640px){
.trust-bar{grid-template-columns:repeat(4, 1fr); max-width:1320px; margin:0 auto; padding:18px 20px;}
}
/* ================= TRANSFORM YOUR HOME BANNER ================= */
.transform-banner{
  background:linear-gradient(135deg, var(--olive-tint) 0%, #DCE6CB 100%);
  border-radius:22px; padding:32px 26px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:22px;
}
.transform-banner .transform-text{max-width:440px;}
.transform-banner .eyebrow{color:var(--olive-deep);}
.transform-banner h2{font-size:1.25rem; font-weight:800; color:#33421F; margin-bottom:8px;}
.transform-banner p{font-size:.85rem; color:#4E5C3C; line-height:1.8;}
.transform-banner .transform-cta{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  background:var(--spice); color:#fff; font-size:.85rem; font-weight:700;
  padding:14px 26px; border-radius:999px; transition:var(--transition);
  box-shadow:0 10px 24px rgba(181,101,43,.28);
}
.transform-banner .transform-cta:hover{background:var(--spice-deep);}
.transform-banner .transform-cta svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2;}
/* ================= GENERIC SECTIONS ================= */
.section{padding:44px 20px; max-width:1320px; margin:0 auto;}
.section-title{font-size:1.15rem; font-weight:700; margin-bottom:22px;}
.eyebrow{font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:8px;}
/* ================= HIGHLIGHT CAROUSEL (featured / best-sellers / suggested) =================
   A clean, structured dark panel — near-black, a single gold accent
   bar beside the heading, sharp-ish corners — rather than a soft or
   colorful gradient. Cards scroll horizontally inside it.

   Equal card height: grid-auto-flow:column (not flex) is used for the
   scrolling row, because CSS Grid reliably stretches every column to
   the same row height by default. On top of that, the title and
   description inside each card reserve a fixed 2-line height each
   (see .product-body h3/p), so the CTA lands at the exact same pixel
   row on every card regardless of how short or long its text is.
=================================================================== */
.section-highlight{
  position:relative; background:linear-gradient(165deg, #1b1712 0%, #0e0c0a 100%);
  border-radius:16px; padding:30px 0 34px; overflow:hidden;
}
.section-highlight .section-title,
.section-highlight .section-subtitle{padding-inline:20px;}
.section-highlight .section-title{
  position:relative; color:#fff; margin-bottom:6px; padding-inline-start:34px;
}
.section-highlight .section-title::before{
  content:""; position:absolute; inset-inline-start:20px; top:2px; bottom:2px;
  width:4px; background:var(--gold); border-radius:2px;
}
.section-highlight .section-subtitle{color:rgba(255,255,255,.6); margin:0 0 20px;}
.scroll-shell{position:relative;}
.product-grid.product-scroll{
  display:grid; grid-auto-flow:column; grid-auto-columns:186px; grid-template-columns:none;
  align-items:stretch; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:2px 20px 6px; margin:0;
}
.product-grid.product-scroll::-webkit-scrollbar{display:none;}
.product-grid.product-scroll > .product-card{width:186px; scroll-snap-align:start;}
.section-highlight .seo-text{color:rgba(255,255,255,.5); font-size:.72rem; line-height:1.8; margin:16px 20px 0; padding:0;}
/* fade the far edge of the scroller so it visually hints "more content" */
.scroll-shell::before, .scroll-shell::after{
  content:""; position:absolute; top:0; bottom:6px; width:28px; z-index:2; pointer-events:none;
}
.scroll-shell::before{inset-inline-start:0; background:linear-gradient(to left, transparent, var(--panel-dark-2));}
.scroll-shell::after{inset-inline-end:0; background:linear-gradient(to right, transparent, var(--panel-dark-2));}
.scroll-arrow{
  display:none; position:absolute; top:44%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); color:#fff;
  backdrop-filter:blur(4px); transition:var(--transition); cursor:pointer;
}
.scroll-arrow:hover{background:var(--gold-grad); border-color:transparent; color:var(--ink);}
.scroll-arrow svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.scroll-arrow.prev{inset-inline-start:12px;}
.scroll-arrow.next{inset-inline-end:12px;}
.scroll-arrow.is-hidden{opacity:0; pointer-events:none;}
@media (min-width:900px){
.section-highlight{padding:40px 0 44px; border-radius:28px;}
.section-highlight .section-title,
  .section-highlight .section-subtitle{padding-inline:40px;}
.section-highlight .section-title{font-size:1.4rem;}
.section-highlight::before{inset-inline:40px;}
.product-grid.product-scroll{grid-auto-columns:250px; gap:20px; padding:2px 40px 8px;}
.product-grid.product-scroll > .product-card{width:250px;}
.section-highlight .seo-text{margin:20px 40px 0;}
.scroll-shell::before, .scroll-shell::after{width:60px;}
.scroll-arrow{display:flex;}
}
/* ================= CATEGORY SLIDER (index) =================
   A fixed "stage" (big preview, content swapped by JS — never
   resizes/shifts) sits beside a horizontally-scrollable Swiper
   filmstrip of same-size thumbnails. Clicking/auto-rotating promotes
   a thumbnail into the stage. Same visual language as the rest of
   the site (cream/ink/gold), full RTL.
=================================================================== */
.cat-slider-wrap{padding-top:6px;}
.cat-stage-wrap{display:flex; flex-direction:row; align-items:stretch; gap:10px; padding:0 20px;}
.cat-stage{
  position:relative; flex:0 0 58%; max-width:340px; height:220px;
  border-radius:18px; overflow:hidden; box-shadow:0 16px 34px rgba(20,16,10,.22);
}
.cat-stage .stage-bg{position:absolute; inset:0; background-size:cover; background-position:center; transition:opacity .35s ease, transform .5s ease;}
.cat-stage .stage-bg.is-fading{opacity:0; transform:scale(1.06);}
.cat-stage .stage-overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,7,5,.88) 0%, rgba(8,7,5,.35) 55%, rgba(8,7,5,.15) 100%);}
.cat-stage .stage-content{position:absolute; inset-inline:0; bottom:0; z-index:2; padding:16px; display:flex; flex-direction:column; gap:8px;}
.stage-content h3{margin:0; color:#fff; font-size:1.05rem; font-weight:800;}
.stage-content p{margin:0; color:rgba(255,255,255,.78); font-size:.78rem; line-height:1.6;}
.stage-cta{
  margin-top:2px; align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  background:var(--gold-grad); color:var(--ink); font-size:.76rem; font-weight:700;
  padding:9px 16px; border-radius:10px;
  transition:filter .25s ease, transform .25s ease;
}
.stage-cta:hover{filter:brightness(1.08);}
.stage-cta:active{transform:scale(.97);}
.stage-cta svg{width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.cat-filmstrip{flex:1 1 auto; min-width:0; overflow:hidden;}
.film-swiper{height:220px; overflow:hidden;}
.film-swiper .swiper-wrapper{display:flex; height:100%;}
.film-slide{
  width:108px; height:100%; flex-shrink:0; position:relative;
  border-radius:16px; overflow:hidden; cursor:pointer; background:var(--panel-dark);
}
.film-slide .film-bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.62) saturate(.9); transition:filter .3s ease, transform .4s ease;}
.film-slide .film-overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,7,5,.85) 0%, rgba(8,7,5,.15) 60%);}
.film-slide .film-label{position:absolute; inset-inline:8px; bottom:10px; z-index:2; color:#fff; font-size:.74rem; font-weight:700; line-height:1.4;}
.film-slide.is-current{box-shadow:inset 0 0 0 2px var(--gold);}
.film-slide.is-current .film-bg{filter:brightness(.8) saturate(1);}
.film-slide:active .film-bg{transform:scale(1.05);}
.cat-pagination{display:flex; justify-content:center; gap:8px; margin-top:16px;}
.cat-pagination .dot{width:7px; height:7px; border-radius:50%; background:var(--gold-line); border:0; padding:0; cursor:pointer; transition:all .3s ease;}
.cat-pagination .dot.active{background:var(--gold-deep); width:22px; border-radius:4px;}
@media (min-width:700px){
.cat-stage{flex-basis:44%; max-width:480px; height:300px; border-radius:22px;}
.cat-stage .stage-content{padding:26px;}
.stage-content h3{font-size:1.5rem;}
.stage-content p{font-size:.88rem; max-width:38ch;}
.stage-cta{padding:11px 20px; font-size:.82rem;}
.film-swiper{height:300px;}
.film-slide{width:170px; border-radius:18px;}
.film-slide .film-label{font-size:.85rem; inset-inline:14px; bottom:14px;}
}
@media (min-width:1100px){
.cat-stage{height:340px;}
.film-swiper{height:340px;}
.film-slide{width:210px;}
}
/* ================= PAGE INTRO (category pages) ================= */
.page-intro{padding-bottom:6px;}
.page-title{font-size:1.5rem; font-weight:700; margin-bottom:8px;}
.page-desc{font-size:.85rem; color:var(--ink-soft); max-width:56ch; line-height:1.7;}
/* ================= WHY US (index) ================= */
.about-us{background:var(--cream); border-radius:24px;}
.about-grid{display:grid; grid-template-columns:1fr; gap:30px;}
.about-text p{font-size:.85rem; line-height:1.9; color:var(--ink-soft); margin-top:14px;}
.about-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:22px;}
.about-stat{background:var(--white); border-radius:16px; padding:18px 8px; text-align:center; box-shadow:var(--shadow);}
.about-stat strong{display:block; font-size:1.3rem; font-weight:800; color:var(--ink); margin-bottom:4px;}
.about-stat span{font-size:.68rem; color:var(--ink-soft);}
.product-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; align-items:stretch;}
.product-card{
  cursor:pointer; background:var(--white); border-radius:18px; overflow:hidden;
  box-shadow:0 10px 26px rgba(20,16,10,.08);
  display:flex; flex-direction:column; height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
}
.product-card:active{transform:scale(.98);}
@media (hover:hover){
.product-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(20,16,10,.13);}
.product-card:hover .product-media img{transform:scale(1.05);}
}
.product-media{position:relative; aspect-ratio:1/1; background:var(--cream-deep); overflow:hidden; touch-action:pan-y;}
.product-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease, opacity .25s ease;}
/* Per-card image gallery — only present when a product has >1 photo.
   Swipe left/right on the photo to change it, or wait: it auto-
   advances every few seconds (paused while a finger is on it, or
   the pointer hovers it on desktop). */
.card-gallery-dots{
  position:absolute; bottom:9px; inset-inline:0; z-index:1;
  display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.card-gallery-dots .gallery-dot{
  width:5px; height:5px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(0,0,0,.12); cursor:pointer; transition:var(--transition);
  pointer-events:auto;
}
.card-gallery-dots .gallery-dot.active{background:#fff; width:14px; border-radius:3px;}
.product-body{padding:12px 12px 14px; display:flex; flex-direction:column; gap:5px; flex:1;}
/* Every title reserves 2 lines and every description reserves 2 lines,
   whether they need it or not — so a short one-line title never lets
   its card's CTA sit higher than a two-line title's CTA next to it. */
.product-body h3{
  font-size:.83rem; font-weight:700; line-height:1.5; margin:0; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:2.5em;
}
.product-body p{
  font-size:.72rem; color:var(--ink-soft); line-height:1.6; margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:2.6em;
}
.option-chips{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:3px;}
.option-chip{
  font-size:.62rem; font-weight:600; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:2.5px 8px;
}
.option-chip-more{color:var(--gold); border-color:var(--gold-line);}
/* Color options render as a small, delicate swatch, not text */
.color-swatch{
  width:13px; height:13px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(0,0,0,.1); box-shadow:inset 0 0 0 1.5px #fff;
}
/* Footer: nothing but the CTA itself — no separate price label above
   or below it, per feedback that the extra text made it noisy. */
.product-footer{margin-top:auto; padding-top:10px;}
.quick-inquiry-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-family:inherit; font-size:.82rem; font-weight:700;
  color:#fff; background:var(--whatsapp); border:0; border-radius:12px;
  padding:11px 14px; transition:var(--transition);
}
@media (hover:hover){
.quick-inquiry-btn:hover{filter:brightness(1.06);}
}
.quick-inquiry-btn:active{transform:scale(.97);}
.quick-inquiry-btn .wa-icon{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.empty-state{text-align:center; padding:50px 0; color:var(--ink-soft); font-size:.85rem; display:none;}
.empty-state.show{display:block;}
/* ================= MODAL ================= */
.modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(28,28,28,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-box{
  background:#fff; width:100%; max-width:420px; max-height:90vh; overflow-y:auto;
  border-radius:20px; position:relative;
  transform:translateY(20px) scale(.97); opacity:0;
  transition:transform .28s cubic-bezier(.22,.9,.34,1), opacity .28s ease;
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1); opacity:1;}
.modal-close{
  position:absolute; top:12px; inset-inline-end:12px; z-index:5;
  width:32px; height:32px; border-radius:50%; border:none; background:rgba(255,255,255,.92);
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; line-height:1; color:var(--ink);
}
.modal-gallery{position:relative; aspect-ratio:1/1; width:100%; overflow:hidden; touch-action:pan-y;}
.modal-gallery-image{width:100%; height:100%; object-fit:cover; user-select:none;}
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(255,255,255,.85); box-shadow:var(--shadow);
  font-size:1.2rem; line-height:1; color:var(--ink); display:flex; align-items:center; justify-content:center;
}
.gallery-arrow.prev{inset-inline-start:10px;}
.gallery-arrow.next{inset-inline-end:10px;}
.gallery-dots{position:absolute; bottom:12px; right:0; left:0; z-index:5; display:flex; justify-content:center; gap:6px;}
.gallery-dot{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); border:none; padding:0;}
.gallery-dot.active{background:#fff; width:16px; border-radius:4px;}
.modal-body{padding:20px 22px 24px;}
.modal-body h3{font-size:1.1rem; font-weight:700; margin-bottom:10px;}
.modal-body p{font-size:.82rem; color:var(--ink-soft); line-height:1.75; margin-bottom:16px;}
.modal-attr{margin-bottom:14px;}
.modal-attr-label{font-size:.7rem; font-weight:700; color:var(--ink-soft); margin-bottom:7px;}
.modal-options{display:flex; flex-wrap:wrap; gap:7px;}
.modal-option-btn{
  font-family:inherit; font-size:.75rem; font-weight:600; cursor:pointer;
  background:var(--cream); border:1.5px solid var(--line); border-radius:999px; padding:7px 15px;
  color:var(--ink); transition:var(--transition);
}
@media (hover:hover){
.modal-option-btn:hover{border-color:var(--gold);}
}
.modal-option-btn.active{background:var(--ink); border-color:var(--ink); color:#fff;}
/* Color options: a real swatch circle (background set inline via JS),
   with a ring — not a fill — showing which one is selected, so the
   swatch color itself always stays visible. */
.modal-option-btn.is-color{
  width:28px; height:28px; padding:0; border-radius:50%;
  border:1px solid rgba(0,0,0,.1); box-shadow:inset 0 0 0 1.5px #fff;
}
.modal-option-btn.is-color.active{box-shadow:inset 0 0 0 1.5px #fff, 0 0 0 2px var(--ink);}
.wa-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px;
  background:var(--whatsapp); color:#fff; border:none; border-radius:999px;
  padding:14px 18px; font-size:.85rem; font-weight:700; width:100%;
  transition:var(--transition);
}
.wa-btn svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:1.8;}
.wa-btn:hover{filter:brightness(1.05);}
.wa-btn:active{transform:scale(.97);}
/* ================= FLOATING WHATSAPP ================= */
.float-wa{
  position:fixed; bottom:20px; inset-inline-end:20px; z-index:120;
  width:50px; height:50px; border-radius:50%; background:var(--whatsapp);
  box-shadow:0 10px 24px rgba(37,211,102,.35);
  display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.float-wa:hover{transform:scale(1.07);}
.float-wa svg{width:23px; height:23px; stroke:#fff; fill:none; stroke-width:1.8;}
/* ===================================================================
   RESPONSIVE — DESKTOP
=================================================================== */
@media (min-width:900px){
.header-search{display:flex;}
.main-nav{display:flex;}
.hamburger-btn{display:none;}
.mobile-menu{display:none !important;}
.category-grid{grid-template-columns:repeat(4, 1fr);}
.product-grid{grid-template-columns:repeat(4, 1fr); gap:30px;}
.about-grid{grid-template-columns:1.3fr 1fr; align-items:center; gap:50px;}
}





/* ===================================================================
   v12 OVERRIDES
=================================================================== */
:root{--font:'Estedad','Vazirmatn',Tahoma,sans-serif; --tone-bg:#F6EEDC;}
body{font-family:var(--font);}
/* ---- Category bar: static, draggable slider (all pages) ---- */
.category-bar{
  display:block; overflow-x:auto; overflow-y:hidden; padding:12px 20px;
  border-bottom:1px solid var(--line); scrollbar-width:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; cursor:grab;
}
.category-bar.is-dragging{cursor:grabbing; scroll-snap-type:none; user-select:none;}
.category-track{display:flex; gap:10px; width:max-content; margin-inline:auto;}
.category-pill{scroll-snap-align:center; user-select:none; -webkit-user-drag:none;}
.category-pill.active{box-shadow:0 6px 16px rgba(28,28,28,.18);}
/* ---- Category stage: compact card + small arrow-only button ---- */
.cat-stage .stage-content{flex-direction:row; align-items:flex-end; justify-content:space-between; gap:12px;}
.stage-text{display:flex; flex-direction:column; gap:6px; min-width:0;}
.stage-cta{
  flex-shrink:0; align-self:flex-end; margin:0; width:38px; height:38px; padding:0;
  border-radius:50%; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.28);
  transition:transform .25s ease, filter .25s ease;
}
.stage-cta svg{width:18px; height:18px;}
.stage-cta:hover{transform:translateX(-3px);}
.cat-filmstrip{overflow:hidden;}
.film-scroll{
  display:flex; gap:10px; height:220px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab;
}
.film-scroll::-webkit-scrollbar{display:none;}
.film-scroll.is-dragging{cursor:grabbing; scroll-snap-type:none; user-select:none;}
.film-slide{border:0; padding:0; font-family:inherit; text-align:start; scroll-snap-align:center;}
.film-slide .film-bg,.film-slide .film-overlay{display:block;}
@media (min-width:700px){
.film-scroll{height:300px;}
}
@media (min-width:1100px){
.film-scroll{height:340px;}
}
/* ---- Section heads (title + "see all") ---- */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px;}
.section-head .section-title{margin-bottom:4px;}
.section-head .section-subtitle{margin:0;}
.section-more{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-size:.78rem; font-weight:700;
  color:var(--ink); border:1px solid var(--gold-line); border-radius:999px; padding:8px 14px; background:var(--white);
  transition:var(--transition);
}
.section-more svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.section-more:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
/* ---- Featured / best-sellers / suggested: light, warm panels ---- */
.section-highlight{--tone-bg:#F6EEDC; background:var(--tone-bg); border:1px solid rgba(185,162,109,.35); box-shadow:none; padding:26px 0 30px;}
.section-highlight.tone-sage{--tone-bg:#E9EFDD; border-color:rgba(95,118,69,.25);}
.section-highlight.tone-white{--tone-bg:#FBF8F2; border-color:var(--line);}
.section-highlight .section-head{padding-inline:20px;}
.section-highlight .section-title{color:var(--ink); padding-inline-start:16px; margin-bottom:4px;}
.section-highlight .section-title::before{inset-inline-start:0; background:var(--gold-deep);}
.section-highlight .section-subtitle{color:var(--ink-soft); padding:0; margin:0;}
.section-highlight::before{display:none;}
.scroll-shell::before{background:linear-gradient(to left, transparent, var(--tone-bg));}
.scroll-shell::after{background:linear-gradient(to right, transparent, var(--tone-bg));}
.scroll-arrow{background:var(--white); border:1px solid var(--gold-line); color:var(--ink); box-shadow:0 8px 20px rgba(28,20,10,.14); backdrop-filter:none;}
.scroll-arrow:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
.section-highlight .product-card{box-shadow:0 6px 18px rgba(28,20,10,.09);}
@media (min-width:900px){
.section-highlight{padding:36px 0 40px;}
.section-highlight .section-head{padding-inline:40px;}
.section-highlight .section-title{font-size:1.4rem;}
}
/* ---- Hero ---- */
/* ---- Blog ---- */
.blog-grid{display:grid; grid-template-columns:1fr; gap:18px;}
.blog-card{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;}
@media (hover:hover){
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover);}
}
.blog-cover{height:130px; display:flex; align-items:flex-end; padding:14px; background:linear-gradient(135deg,#E8C766,#B5652B);}
.blog-card.tone-1 .blog-cover{background:linear-gradient(135deg,#8CA06B,#3F5230);}
.blog-card.tone-2 .blog-cover{background:linear-gradient(135deg,#8a5a2e,#2A2622);}
.blog-cover span{font-size:.72rem; font-weight:700; color:#fff; background:rgba(0,0,0,.28); border-radius:999px; padding:5px 12px;}
.blog-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.blog-body h3{font-size:.98rem; font-weight:700; line-height:1.7;}
.blog-body p{font-size:.8rem; color:var(--ink-soft); line-height:1.9;}
.blog-more{margin-top:auto; font-size:.78rem; font-weight:700; color:var(--spice);}
.blog-list{display:grid; grid-template-columns:1fr; gap:18px; padding-top:20px;}
.blog-post{background:var(--white); border:1px solid var(--line); border-inline-start:4px solid var(--gold-deep); border-radius:16px; padding:22px 22px 24px; scroll-margin-top:90px;}
.blog-post.tone-1{border-inline-start-color:var(--olive-deep);}
.blog-post.tone-2{border-inline-start-color:var(--spice);}
.blog-post:target{box-shadow:var(--shadow-hover);}
.blog-tag{display:inline-block; font-size:.7rem; font-weight:700; color:var(--spice); background:var(--cream); border-radius:999px; padding:4px 12px; margin-bottom:10px;}
.blog-post h2{font-size:1.1rem; font-weight:800; line-height:1.7; margin-bottom:6px;}
.blog-lead{font-size:.85rem; color:var(--ink-soft); line-height:1.9; margin-bottom:10px;}
.blog-text p{font-size:.85rem; line-height:2; margin-bottom:10px; max-width:70ch;}
@media (min-width:700px){
.blog-grid{grid-template-columns:repeat(3,1fr);}
.blog-list{grid-template-columns:repeat(2,1fr);}
}
/* ---- Brand strip ---- */
.brand-slider{cursor:grab;}
.brand-slider.is-dragging{cursor:grabbing; user-select:none;}
.brand-logo-item img{-webkit-user-drag:none; user-select:none;}
/* ===================================================================
   v13 OVERRIDES
=================================================================== */
/* ---- Category bar: endless slider, moves left -> right ---- */
.category-bar{overflow:hidden; cursor:default; scroll-snap-type:none; padding:12px 0;}
.category-track{
  margin-inline:0; animation:catSlide 30s linear infinite; will-change:transform;
}
@keyframes catSlide{from{transform:translateX(0);} to{transform:translateX(var(--set-w,50%));}}
.category-bar:hover .category-track,
.category-bar:focus-within .category-track,
.category-bar.is-paused .category-track{animation-play-state:paused;}
.category-bar.is-static{overflow-x:auto;}
.category-bar.is-static .category-track{animation:none; margin-inline:auto;}
@media (prefers-reduced-motion:reduce){
.category-track{animation:none;}
}
/* ---- Trust bar: proper icons in soft tiles ---- */
.trust-item{gap:11px;}
.trust-item svg{
  width:42px; height:42px; padding:10px; border-radius:13px; flex-shrink:0;
  background:var(--cream); border:1px solid var(--gold-line);
  stroke:var(--spice); stroke-width:1.7; fill:none;
}
.trust-item strong{font-size:.8rem;}
/* ---- Hero: art on top (mobile), art on the side (desktop) ---- */
/* ---- Category stage + ONE "next" card ---- */
.cat-stage-wrap{gap:12px; padding:0 20px;}
.cat-stage{flex:1 1 0; max-width:none; min-width:0; height:230px; border-radius:20px; box-shadow:0 14px 30px rgba(20,16,10,.18);}
.cat-stage .stage-content{padding:16px; align-items:flex-end;}
.stage-text{flex:1; min-width:0;}
.stage-content h3{font-size:1.1rem;}
.stage-content p{font-size:.76rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.stage-cta{width:40px; height:40px; background:var(--gold-grad);}
.cat-next{
  position:relative; flex:0 0 34%; height:230px; border:0; padding:0; border-radius:20px; overflow:hidden;
  cursor:pointer; font-family:inherit; text-align:start; background:var(--panel-dark);
  box-shadow:0 8px 20px rgba(20,16,10,.12); transition:transform .25s ease;
}
.cat-next:active{transform:scale(.98);}
.cat-next .next-bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.7); transition:transform .5s ease;}
.cat-next .next-overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,7,5,.88) 0%, rgba(8,7,5,.1) 65%);}
.cat-next .next-info{position:absolute; inset-inline:12px; bottom:14px; z-index:2; display:flex; flex-direction:column; gap:3px; color:#fff;}
.next-kicker{font-size:.66rem; font-weight:600; color:var(--gold-line);}
.next-label{font-size:.86rem; font-weight:800; line-height:1.4;}
@media (hover:hover){
.cat-next:hover .next-bg{transform:scale(1.06);}
}
@media (min-width:700px){
.cat-stage,.cat-next{height:320px;}
.cat-stage{border-radius:24px;}
.cat-next{flex-basis:30%; border-radius:24px;}
.cat-stage .stage-content{padding:26px;}
.stage-content h3{font-size:1.6rem;}
.stage-content p{font-size:.9rem; max-width:44ch;}
.stage-cta{width:46px; height:46px;}
.next-label{font-size:1rem;}
}
@media (min-width:1100px){
.cat-stage,.cat-next{height:360px;}
}
/* ---- Product rows: no fade strips over cards, cards never clipped ---- */
.scroll-shell::before,.scroll-shell::after{display:none !important;}
.product-grid.product-scroll{
  grid-auto-columns:196px; gap:14px; padding:4px 20px 14px; scroll-padding-inline:20px;
}
.product-grid.product-scroll > .product-card{width:196px;}
.section-highlight .product-card{border:1px solid rgba(185,162,109,.25);}
.option-chips{max-height:52px; overflow:hidden; row-gap:5px;}
@media (min-width:900px){
.product-grid.product-scroll{grid-auto-columns:250px; gap:20px; padding:4px 40px 16px; scroll-padding-inline:40px;}
.product-grid.product-scroll > .product-card{width:250px;}
}
.quick-inquiry-btn{background:var(--ink); color:#fff; border:1px solid var(--ink);}
.quick-inquiry-btn .wa-icon{stroke:#4ADE80;}
@media (hover:hover){
.quick-inquiry-btn:hover{background:var(--whatsapp); border-color:var(--whatsapp); filter:none;}
.quick-inquiry-btn:hover .wa-icon{stroke:#fff;}
}
.section-more{background:var(--white); border-color:var(--gold-line); color:var(--ink);}
.section-more:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
.scroll-arrow{background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:0 8px 20px rgba(28,20,10,.22);}
.scroll-arrow:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:var(--ink);}
.transform-banner .transform-cta{background:var(--ink); box-shadow:0 10px 24px rgba(28,28,28,.22);}
.transform-banner .transform-cta:hover{background:var(--gold-deep); color:var(--ink);}
.transform-banner .transform-cta:hover svg{stroke:var(--ink);}
.blog-more{color:var(--ink); border-bottom:2px solid var(--gold-deep); align-self:flex-start; padding-bottom:2px;}

/* ===================================================================
   v14 — BRAND SYSTEM, HERO, CTA, FOOTER
   -------------------------------------------------------------------
   Brand purple comes straight from the logo (#622A75). Gold stays as
   the accent. Button rules of thumb:
     .cta            = the one primary action (purple + gold arrow chip)
     .btn-soft       = product-card inquiry (tinted, fills on hover)
     outline pills   = secondary ("all categories", scroll arrows)
     WhatsApp green  = ONLY the floating bubble and the product modal
=================================================================== */
:root{
  --brand:#622A75; --brand-2:#7B3D91; --brand-deep:#43194F;
  --brand-night:#1E0D27; --brand-tint:#F5EDF8; --brand-line:#E4D3EB;
  --gold-soft:#E8C766;
  --hero-h:640px;
}
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
:focus-visible{outline:3px solid var(--gold-soft); outline-offset:3px; border-radius:6px;}

/* ---------- Header: real logo ---------- */
.site-header{background:rgba(250,246,240,.94);}
.header-inner{padding:9px 20px;}
.brand{display:flex;
 align-items:center; gap:14px; flex-shrink:0;}
.brand-mark{height:48px; width:auto; display:block;}
.brand-tag{display:none; padding-inline-start:14px; border-inline-start:1px solid var(--gold-line); line-height:1.5;}
.brand-tag strong{display:block; font-size:.86rem; font-weight:800; color:var(--brand-deep);}
.brand-tag span{display:block; font-size:.68rem; color:var(--ink-soft); letter-spacing:.4px;}
@media (min-width:1100px){.brand-tag{display:block;}}
.main-nav a:hover, .main-nav a.active{color:var(--brand);}
.main-nav a::after{background:var(--gold-deep);}

/* ---------- Primary CTA (used in hero, header, banner, footer) ---------- */
.cta{
  position:relative; display:inline-flex; align-items:center; gap:18px;
  padding:7px 7px 7px 7px; padding-inline-start:28px;
  border-radius:999px; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 45%, var(--brand-deep) 100%);
  color:#fff; font-family:inherit; font-size:1rem; font-weight:700; line-height:1;
  box-shadow:0 16px 30px -12px rgba(98,42,117,.7), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.cta-icon{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #F3DA8B, #C9A227); color:#2A1236;
  box-shadow:0 4px 10px rgba(201,162,39,.45), inset 0 1px 0 rgba(255,255,255,.55);
}
.cta-icon svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease;}
@media (hover:hover){
  .cta:hover{transform:translateY(-2px); box-shadow:0 22px 36px -12px rgba(98,42,117,.8), inset 0 1px 0 rgba(255,255,255,.25); filter:brightness(1.06);}
  .cta:hover .cta-icon svg{transform:translateX(-4px);}
}
.cta:active{transform:translateY(0) scale(.98);}
.cta-sm{gap:12px; padding:5px 5px 5px 5px; padding-inline-start:20px; font-size:.82rem;}
.cta-sm .cta-icon{width:34px; height:34px;}
.cta-sm .cta-icon svg{width:15px; height:15px;}
.cta-gold{background:linear-gradient(135deg,#F3DA8B,#D4AF37); color:#2A1236; box-shadow:0 16px 30px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);}
.cta-gold .cta-icon{background:var(--brand-deep); color:#fff; box-shadow:none;}

.header-cta{display:none; flex-shrink:0;}
.mobile-menu .mobile-cta{margin-top:16px; display:flex; justify-content:space-between; width:100%; border-bottom:0; padding:6px 6px 6px 6px; padding-inline-start:24px; color:#fff;}
.mobile-menu .mobile-cta .cta-icon{margin:0;}
@media (min-width:900px){.header-cta{display:inline-flex;}}

/* ---------- Colour system for the other buttons ---------- */
.category-pill.active{background:var(--brand); border-color:var(--brand); box-shadow:0 8px 18px -6px rgba(98,42,117,.5);}
.category-pill:hover{border-color:var(--brand-2); color:var(--brand);}
.quick-inquiry-btn{background:var(--brand-tint); color:var(--brand); border:1px solid var(--brand-line);}
.quick-inquiry-btn .wa-icon{stroke:var(--brand);}
@media (hover:hover){
  .quick-inquiry-btn:hover{background:var(--brand); border-color:var(--brand); color:#fff; filter:none;}
  .quick-inquiry-btn:hover .wa-icon{stroke:#fff;}
}
.section-more{background:var(--white); border:1px solid var(--brand-line); color:var(--brand);}
.section-more svg{stroke:currentColor;}
.section-more:hover{background:var(--brand); border-color:var(--brand); color:#fff;}
.scroll-arrow{background:var(--white); border:1px solid var(--brand-line); color:var(--brand); box-shadow:0 8px 20px rgba(67,25,79,.16);}
.scroll-arrow:hover{background:var(--brand); border-color:var(--brand); color:#fff;}
.stage-cta{background:linear-gradient(135deg,#F3DA8B,#C9A227); color:#2A1236;}
.stage-cta svg{stroke:#2A1236;}
.blog-more{color:var(--brand); border-bottom-color:var(--gold-deep);}
.modal-option-btn.active{background:var(--brand); border-color:var(--brand);}
.hamburger-btn{border-color:var(--brand-line);}
.header-search:focus-within{border-color:var(--brand-line); box-shadow:0 0 0 3px rgba(98,42,117,.1);}
.eyebrow{color:var(--brand); letter-spacing:.6px; text-transform:none; font-size:.76rem;}

/* Banner block below the products (was olive) */
.transform-banner{background:linear-gradient(135deg, var(--brand-tint) 0%, #EBDDF2 100%); border:1px solid var(--brand-line);}
.transform-banner .eyebrow{color:var(--brand);}
.transform-banner h2{color:var(--brand-deep);}
.transform-banner p{color:#5A4964;}
.transform-banner .transform-cta{
  background:linear-gradient(135deg,var(--brand-2),var(--brand-deep)); box-shadow:0 14px 26px -10px rgba(98,42,117,.65);
}
.transform-banner .transform-cta:hover{background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff;}
.transform-banner .transform-cta:hover svg{stroke:#fff;}
.trust-item svg{stroke:var(--brand); border-color:var(--brand-line); background:var(--brand-tint);}

/* ---------- HERO ---------- */
.hero-pro{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(900px 520px at 88% 12%, rgba(98,42,117,.10), transparent 60%),
    radial-gradient(700px 480px at 6% 92%, rgba(201,162,39,.12), transparent 60%),
    linear-gradient(180deg, #FCF9F4 0%, #F6EFE6 100%);
  border-bottom:1px solid var(--line);
}
.hero-pro .hero-track{position:relative; height:var(--hero-h);}
.hero-pro .hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; z-index:0;
  transition:opacity .7s ease, visibility .7s;
}
.hero-pro .hero-slide.active{opacity:1; visibility:visible; z-index:1;}

/* Banner mode: drop a banner image in /images/banners and it takes over the slide */
.hero-banner{position:absolute; inset:0; display:none; z-index:0;}
.hero-banner picture, .hero-banner img{display:block; width:100%; height:100%;}
.hero-banner img{object-fit:cover; object-position:center;}
.hero-slide.has-banner .hero-banner{display:block;}
.hero-slide.has-banner .hero-inner{display:none;}

.hero-inner{
  position:relative; z-index:1; height:100%; max-width:1320px; margin:0 auto;
  padding:26px 22px 76px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;
}
.hero-visual{order:-1; position:relative; width:min(238px,60vw); aspect-ratio:1; flex-shrink:0; margin-bottom:16px;}
.hero-disc{
  position:absolute; width:88%; aspect-ratio:1; bottom:0; inset-inline:0; margin-inline:auto; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F3E7F7 52%, #E3CFEC 100%);
  box-shadow:0 34px 60px -34px rgba(67,25,79,.55), inset 0 0 0 1px rgba(98,42,117,.10);
}
.hero-disc::before{content:""; position:absolute; inset:-5%; border-radius:50%; border:1px solid rgba(201,162,39,.55);}
.hero-disc::after{content:""; position:absolute; inset:-11%; border-radius:50%; border:1px dashed rgba(98,42,117,.18);}
.hero-art-img{
  position:absolute; bottom:2%; inset-inline:0; margin-inline:auto;
  height:102%; width:auto; max-width:92%; object-fit:contain;
  filter:drop-shadow(0 26px 22px rgba(36,16,46,.30));
}
.hero-art-svg{position:absolute; inset:0; margin:auto; width:46%; height:auto; stroke:var(--brand); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.hero-art-svg .fill{fill:rgba(201,162,39,.35); stroke:none;}
.hero-visual img.hero-art-photo{position:absolute; inset:6% 6% 0; width:88%; height:94%; object-fit:contain; filter:drop-shadow(0 22px 20px rgba(36,16,46,.28));}

.hero-copy{display:flex; flex-direction:column; align-items:center; gap:14px; max-width:560px;}
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 16px 7px 14px;
  background:#fff; border:1px solid var(--brand-line); border-radius:999px;
  font-size:.76rem; font-weight:700; color:var(--brand); box-shadow:0 6px 16px -10px rgba(98,42,117,.5);
}
.hero-badge::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold-deep); box-shadow:0 0 0 4px rgba(201,162,39,.18);}
.hero-title{font-size:clamp(1.85rem,8vw,2.35rem); font-weight:800; line-height:1.45; color:#24102E; margin:0; letter-spacing:-.3px;}
.hero-text{font-size:.95rem; line-height:1.95; color:#5E5266; max-width:36ch; margin:0;}
.hero-actions{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:6px;}
.hero-link{
  font-size:.85rem; font-weight:700; color:var(--brand-deep); padding-bottom:4px;
  border-bottom:2px solid var(--gold-deep); transition:color .25s ease, border-color .25s ease;
}
.hero-link:hover{color:var(--brand); border-color:var(--brand);}

.hero-slide.active .hero-copy{animation:heroIn .8s ease both .05s;}
.hero-slide.active .hero-visual{animation:heroVisualIn 1s ease both;}
@keyframes heroIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@keyframes heroVisualIn{from{opacity:0; transform:scale(.94);} to{opacity:1; transform:none;}}

/* Controls */
.hero-dots{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius:999px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 22px -10px rgba(36,16,46,.35);
}
.hero-dot{position:relative; width:8px; height:8px; padding:0; border:0; border-radius:99px; background:rgba(98,42,117,.25); overflow:hidden; cursor:pointer; transition:width .35s ease, background .35s ease;}
.hero-dot.active{width:34px; background:rgba(98,42,117,.22);}
.hero-dot::after{content:""; position:absolute; inset:0; background:var(--brand); transform-origin:right center; transform:scaleX(0);}
.hero-dot.active::after{animation:heroProgress var(--hero-time,6500ms) linear forwards;}
@keyframes heroProgress{to{transform:scaleX(1);}}
.hero-pro.is-paused .hero-dot.active::after{animation-play-state:paused;}
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:none;
  width:48px; height:48px; border-radius:50%; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--brand-line); color:var(--brand);
  box-shadow:0 10px 24px -10px rgba(36,16,46,.4); transition:background .25s ease, color .25s ease, transform .25s ease;
}
.hero-arrow:hover{background:var(--brand); color:#fff; border-color:var(--brand);}
.hero-arrow svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.hero-arrow-start{inset-inline-start:22px;}
.hero-arrow-end{inset-inline-end:22px;}

@media (min-width:900px){
  :root{--hero-h:600px;}
  .hero-inner{
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:40px;
    text-align:start; padding:36px 96px 60px;
  }
  .hero-visual{order:0; width:min(430px,100%); margin:0 0 0 0; justify-self:center; align-self:center; margin-top:26px;}
  .hero-copy{align-items:flex-start; max-width:600px; gap:20px;}
  .hero-title{font-size:clamp(2.5rem,3.9vw,3.6rem);}
  .hero-text{font-size:1.08rem; max-width:40ch;}
  .hero-actions{flex-direction:row; align-items:center; gap:28px; margin-top:12px;}
  .hero-dots{bottom:28px; left:auto; transform:none; inset-inline-start:max(96px, calc((100% - 1320px) / 2 + 96px));}
  .hero-arrow{display:flex;}
}
@media (max-width:899px){ .hero-arrow{display:none;} }
@media (prefers-reduced-motion:reduce){
  .hero-slide.active .hero-copy, .hero-slide.active .hero-visual{animation:none;}
  .hero-dot.active::after{animation:none; transform:scaleX(1);}
}

/* ---------- FOOTER ---------- */
.site-footer{position:relative; margin-top:90px; background:var(--brand-night); color:#CDBFD6;}
.footer-cta-wrap{max-width:1320px; margin:0 auto; padding:0 20px;}
.footer-cta{
  position:relative; transform:translateY(-52px); margin-bottom:-12px;
  border-radius:26px; padding:34px 26px 34px;
  background:
    radial-gradient(420px 260px at 8% 0%, rgba(232,199,102,.20), transparent 65%),
    linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 42%, var(--brand-deep) 100%);
  box-shadow:0 30px 60px -28px rgba(30,13,39,.75);
  display:flex; flex-direction:column; gap:20px; overflow:visible;
}
.footer-cta h2{font-size:1.3rem; font-weight:800; line-height:1.7; color:#fff; max-width:22ch;}
.footer-cta p{font-size:.86rem; color:rgba(255,255,255,.78); line-height:1.9; margin-top:6px; max-width:44ch;}
.footer-cta-actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;}
.footer-call{display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:.95rem; direction:ltr; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.4);}
.footer-call svg{width:17px; height:17px; stroke:var(--gold-soft); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.footer-call:hover{border-color:var(--gold-soft);}
.footer-mixer{display:none;}

.footer-main{
  max-width:1320px; margin:0 auto; padding:8px 20px 44px;
  display:grid; grid-template-columns:1fr; gap:38px;
}
.footer-logo{display:block; width:190px; height:auto; margin-bottom:18px;}
.footer-about{font-size:.83rem; line-height:2; color:#B7A8C1; max-width:46ch; margin-bottom:22px;}
.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.footer-social a:hover{background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-3px);}
.footer-social svg{width:18px; height:18px; stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.footer-social a:hover svg{stroke:#24102E;}
.footer-title{position:relative; font-size:.95rem; font-weight:800; color:#fff; margin:0 0 20px; padding-bottom:12px;}
.footer-title::after{content:""; position:absolute; bottom:0; inset-inline-start:0; width:34px; height:3px; border-radius:3px; background:var(--gold-deep);}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.footer-links.two-col{grid-template-columns:1fr 1fr; column-gap:18px;}
.footer-links a{font-size:.85rem; color:#B7A8C1; transition:color .2s ease, padding .2s ease;}
.footer-links a:hover{color:var(--gold-soft); padding-inline-start:4px;}
.footer-contact-list{list-style:none; margin:0; padding:0; display:grid; gap:16px;}
.footer-contact-list li{display:flex; gap:12px; align-items:flex-start; font-size:.85rem; line-height:1.8; color:#B7A8C1;}
.footer-contact-list .ico{width:38px; height:38px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; background:rgba(232,199,102,.10); border:1px solid rgba(232,199,102,.22);}
.footer-contact-list .ico svg{width:17px; height:17px; stroke:var(--gold-soft); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.footer-contact-list small{display:block; font-size:.7rem; color:#8E7F9A;}
.footer-contact-list a{color:#fff; font-weight:600;}
.footer-contact-list a:hover{color:var(--gold-soft);}
.footer-contact-list .ltr{direction:ltr; display:inline-block;}

.footer-bottom{border-top:1px solid rgba(255,255,255,.09);}
.footer-bottom-inner{max-width:1320px; margin:0 auto; padding:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; font-size:.75rem; color:#8E7F9A;}
.footer-bottom-inner strong{color:#CDBFD6; font-weight:600;}
.to-top{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:.75rem; font-family:inherit; font-weight:600;
  transition:background .25s ease, color .25s ease;
}
.to-top svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.to-top:hover{background:var(--gold-deep); color:#24102E; border-color:var(--gold-deep);}

@media (min-width:700px){
  .footer-main{grid-template-columns:1.4fr 1fr; gap:44px 40px;}
  .footer-brand{grid-column:1 / -1;}
}
@media (min-width:1000px){
  .footer-cta{flex-direction:row; align-items:center; justify-content:space-between; padding:38px 48px; padding-inline-end:300px;}
  .footer-cta h2{font-size:1.55rem;}
  .footer-mixer{
    display:block; position:absolute; inset-inline-end:48px; bottom:-6px; width:184px; height:auto; z-index:2;
    filter:drop-shadow(0 22px 22px rgba(0,0,0,.4));
  }
  .footer-cta-actions{flex-direction:column; align-items:flex-start;}
  .footer-main{grid-template-columns:1.35fr 1.25fr .8fr 1.15fr; gap:48px;}
  .footer-brand{grid-column:auto;}
}





.seo-text{
  color: #2A1236 !important;
}
/* Floating WhatsApp keeps its own green */
.float-wa{z-index:120;}

/* ---------- Product & blog media, ready for real photos ---------- */
.product-media img{object-fit:cover;}
.blog-cover{position:relative; overflow:hidden;}
.blog-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.blog-cover span{position:relative; z-index:1;}

.hero-visual.has-photo .hero-art-svg{display:none;}

/* About section photo slot */
.about-media{
  position:relative; aspect-ratio:4/3; border-radius:24px; overflow:hidden;
  background:radial-gradient(circle at 30% 25%, #fff 0%, var(--brand-tint) 60%, #E7D6EF 100%);
  border:1px solid var(--brand-line);
  display:flex; align-items:center; justify-content:center;
}
.about-media .about-fallback{height:88%; width:auto; filter:drop-shadow(0 18px 18px rgba(36,16,46,.25));}
.about-media .about-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}