/* ============================================================
   SOLEIL ABAYA — CONSOLIDATED CUSTOM CSS  (all-in-one)
   Paste ALL of this into: Zid → التصميم → تخصيص → CSS المخصص
   Pairs with soleil-theme.js (Custom JavaScript field).
   Theme: Growth. Verified live on soleilabaya.zid.store.

   Identity palette (LIGHT theme):
     rose      #CC7F9E   (primary / CTAs / selected)
     gold      #F2C785   (accent / highlights / ticks)
     cream     #FFF5EE   (page background — soft, never dark)
     white     #FFFFFF   (cards / panels)
     ink       #2A2024   (text)

   Sections:
     0) Fonts (@font-face + role mapping)
     1) Core repaint — light cream canvas, ink text, rose primary
     2) Announcement marquee (gold)
     3) Header — sticky, centered + large logo, glassy on scroll,
        transparent-over-hero on the homepage
     4) Tall image ratios — banners, cards, product gallery
     5) Scroll-reveal + hover zoom (homepage)
     6) Moving discount badge + product-image zoom
     7) Testimonials — unique Soleil design
     8) Intro splash — glassy cream overlay
     9) Size-guide button + modal (+ interactive picker)
     10) Policy / Care accordions + attractive tick lists
     11) Floating contact widget
   ============================================================ */


/* ############################################################
   0) FONTS
   ############################################################ */
@font-face{
  font-family:'Quinsi';
  src:url('https://cdn.jsdelivr.net/gh/mustafakallaf48-cell/soleil@31e9558/Quinsi.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/mustafakallaf48-cell/soleil@31e9558/Quinsi.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'CARMILA';
  src:url('https://cdn.jsdelivr.net/gh/mustafakallaf48-cell/soleil@31e9558/CARMILA.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/mustafakallaf48-cell/soleil@31e9558/CARMILA.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Bahij TheSansArabic';
  src:url('https://cdn.jsdelivr.net/gh/mustafakallaf48-cell/soleil@31e9558/Bahij-TheSansArabic-Plain.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/mustafakallaf48-cell/soleil@31e9558/Bahij-TheSansArabic-Plain.woff') format('woff');
  font-weight:400 500; font-style:normal; font-display:swap;
}

:root{
  /* Soleil identity */
  --sll-rose:#CC7F9E;
  --sll-rose-deep:#B5637F;
  --sll-gold:#F2C785;
  --sll-gold-deep:#E0A94F;
  --sll-cream:#FFF5EE;
  --sll-cream-2:#FBEADF;
  --sll-ink:#2A2024;
  --sll-white:#FFFFFF;

  /* font roles — Bahij for all text (English + Arabic), per request */
  --sll-font-head:'Bahij TheSansArabic',system-ui,sans-serif;
  --sll-font-label:'Bahij TheSansArabic',system-ui,sans-serif;
  --sll-font-body:'Bahij TheSansArabic',system-ui,sans-serif;
}

/* Apply fonts */
body,input,textarea,select,p,span,li,td,th,a{ font-family:var(--sll-font-body); }
h1,h2,h3,h4,h5,.section-title,[class*="section"] h2,[class*="section"] h3{
  font-family:var(--sll-font-head) !important; letter-spacing:.005em;
}
header nav a,.btn,button,.product-options__item,
.announcement-marquee,.announcement-marquee *{ font-family:var(--sll-font-label); }


/* ############################################################
   1) CORE REPAINT — cream canvas, ink text, rose primary
   The theme is Tailwind + CSS variables. Redefining the tokens
   repaints almost everything. Verified token set on this store.
   ############################################################ */
:root{
  --background:#FFF5EE;          --color-background:#FFF5EE;
  --foreground:#2A2024;          --color-foreground:#2A2024;

  --secondary:#FFFFFF;           /* white cards/panels lift off cream */

  --muted:#9A8B86;
  --muted-foreground:#9A8B86;    --color-muted-foreground:#9A8B86;

  --border:#ECD9C9;
  --border-light:#F3E7DB;
  --input:#E6D3C4;
  --ring:#CC7F9E;
  --accent:#F2C785;

  /* Primary = rose fill, white text (CTAs, selected pills) */
  --primary:#CC7F9E;             --color-primary:#CC7F9E;
  --primary-foreground:#FFFFFF;
}

/* Hardcoded utilities that don't follow the variables above */
.bg-background{ background-color:#FFF5EE !important; }
.bg-white     { background-color:#FFFFFF !important; }
.bg-secondary { background-color:#FFFFFF !important; }
.text-foreground{ color:#2A2024 !important; }

/* Wrappers (safety net) */
body{ background-color:#FFF5EE !important; color:#2A2024 !important; }
header,footer{ background-color:#FFF5EE !important; }

/* Primary buttons / add-to-cart — rose with white text */
.bg-primary,[class*="bg-primary"]{ background-color:#CC7F9E !important; color:#fff !important; }
.text-primary{ color:#CC7F9E !important; }
.border-primary{ border-color:#CC7F9E !important; }

/* Selected product option pill — rose */
.product-options__item.active{
  background:#CC7F9E !important; color:#fff !important; border-color:#CC7F9E !important;
}
.product-options__item{ transition:all .2s ease; }
.product-options__item:not(.active):hover{ border-color:#CC7F9E !important; color:#B5637F !important; }

/* Price + riyal symbol in ink (quick-view price was hardcoded) */
[data-product-price],.riyal-svg{ color:#2A2024 !important; }
.riyal-svg{ fill:currentColor !important; }

/* Footer — blend with identity + centered */
footer{
  background:linear-gradient(180deg,#FFF5EE 0%,#FBEADF 100%) !important;
  border-top:2px solid #F2C785;
  text-align:center;
}
footer h3{ font-weight:700 !important; font-size:15px !important; letter-spacing:.01em; color:#B5637F !important; }
footer [class*="grid"]{ justify-items:center; }
footer a{ color:#2A2024; transition:color .2s ease; }
footer a:hover{ color:#CC7F9E; }
footer img{ margin-inline:auto; }
footer ul{ align-items:center; }

/* Rounded logo corners */
header img,footer img{ overflow:hidden; }


/* ############################################################
   2) ANNOUNCEMENT MARQUEE — gold band, ink text
   ############################################################ */
.announcement-marquee{ background-color:#F2C785 !important; }
.announcement-marquee,
.announcement-marquee *{ color:#3a2630 !important; font-weight:600; letter-spacing:.01em; }


/* ############################################################
   3) HEADER — sticky, centered + large logo, glassy on scroll
   Theme header is position:static; we make it sticky and add
   .sll-scrolled (toggled by soleil-theme.js) for the glass.
   On the homepage it floats transparent over the first banner.
   ############################################################ */
header{
  position:sticky; top:0; z-index:50;
  border-bottom:0 !important;            /* remove the line so the logo blends into the banner */
  transition:background-color .35s ease,backdrop-filter .35s ease,
             box-shadow .35s ease,border-color .35s ease,padding .35s ease;
}

/* Center the logo on desktop too (theme only centers it on mobile) */
@media (min-width:768px){
  header nav{ position:relative; }
  header nav .shrink-0:has(img){
    position:absolute; left:50%; transform:translateX(-50%);
  }
}
/* Larger, clearer logo */
header img{ max-height:60px !important; width:auto !important; }
@media (min-width:768px){ header img{ max-height:76px !important; } }

/* --- Desktop: categories become a SIDE MENU (native drawer) ---
   Hide the inline desktop nav and reveal the hamburger on lg+,
   so the links no longer overlay the banner. The hamburger opens
   the theme's own off-canvas drawer (#mobile-drawer-dialog). */
@media (min-width:1024px){
  /* hide ONLY the inline category links (the <ul>), keep the centered logo */
  header nav > div.flex.items-center.gap-8 > ul{ display:none !important; }
  header [onclick*="mobile-drawer-dialog"]{ display:inline-flex !important; }
}

/* --- Side menu (drawer): category rows, collapse arrow, hover/active --- */
#mobile-drawer-dialog summary{ border-radius:10px; transition:background-color .2s ease; }
#mobile-drawer-dialog a{ border-radius:10px; transition:background-color .2s ease, color .2s ease; }
/* hover: the row you point at highlights (main summary OR a link) */
#mobile-drawer-dialog summary:hover{ background:rgba(204,127,158,.10); }
#mobile-drawer-dialog a:hover{ background:rgba(204,127,158,.10); color:#B5637F; }
#mobile-drawer-dialog a:active,
#mobile-drawer-dialog summary:active{ background:rgba(204,127,158,.20); }
/* an OPEN main category stands out with a soft gold tint */
#mobile-drawer-dialog details[open] > summary{ background:rgba(242,199,133,.14); }

/* collapse arrow — the theme's svg uses Tailwind utilities
   (group-open / rtl:rotate-180) that resolve against the NEAREST open
   ancestor, so a subcategory's arrow follows its parent's state and
   can't be reliably overridden. Hide it and draw our own chevron as a
   pseudo-element that nothing in the theme touches: it rotates purely
   on each <details>' own [open] state — collapsed points down, open up. */
#mobile-drawer-dialog summary > svg{ display:none !important; }
#mobile-drawer-dialog summary::after{
  content:""; flex:0 0 auto; width:26px; height:26px; border-radius:50%; rotate:0deg;
  background:rgba(204,127,158,.12)
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23CC7F9E'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E")
    center/12px no-repeat;
  transition:rotate .25s ease, background-color .2s ease;
}
#mobile-drawer-dialog details[open] > summary::after{ rotate:180deg; }
#mobile-drawer-dialog summary:hover::after{ background-color:rgba(204,127,158,.24); }

/* nested subcategory group — clear nesting shape */
#mobile-drawer-dialog .ps-4{
  border-inline-start:2px solid rgba(204,127,158,.28);
  margin-inline-start:18px; padding-inline-start:10px;
}
#mobile-drawer-dialog .ps-4 a{ font-size:13.5px; color:#6b5a60; }
#mobile-drawer-dialog .ps-4 a:hover{ color:#B5637F; }
/* current category highlight */
.sll-cat-active{ background:rgba(204,127,158,.16) !important; color:#B5637F !important; font-weight:700; }

/* Glassy state (scrolled) — cream frosted bar */
header.sll-scrolled{
  background-color:rgba(255,245,238,.72) !important;
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 6px 24px rgba(178,99,132,.12);
}

/* HOMEPAGE: header floats transparent over the hero, logo enlarged.
   body.sll-home is added by the JS only on the homepage. */
body.sll-home header{
  position:fixed; left:0; right:0; top:0;
  background:linear-gradient(to bottom,rgba(255,245,238,.55),rgba(255,245,238,0)) !important;
  border-bottom-color:transparent;
}
body.sll-home header.sll-scrolled{
  background-color:rgba(255,245,238,.80) !important;  /* solidifies on scroll */
}
/* bigger logo while over the banner, settles when scrolled */
body.sll-home header img{ max-height:84px !important; transition:max-height .35s ease; }
@media (min-width:768px){ body.sll-home header img{ max-height:104px !important; } }
body.sll-home header.sll-scrolled img{ max-height:60px !important; }
@media (min-width:768px){ body.sll-home header.sll-scrolled img{ max-height:72px !important; } }
/* pull the hero up under the floating header so the logo blends in */
body.sll-home main > .section-carousel:first-of-type,
body.sll-home main > h1.hidden + .section-carousel{ margin-top:0; }


/* ############################################################
   4) TALL IMAGE RATIOS — banners, cards, product gallery
   Many abaya photos are vertical; fill tall rectangles, cover,
   no side letterboxing.
   ############################################################ */
/* Hero banners — FULL viewport height, full-bleed, cover (desktop + mobile) */
.section-carousel{ padding-left:0 !important; padding-right:0 !important; }
.section-carousel img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.section-carousel,
.section-carousel .embla__viewport,
.section-carousel .embla__container,
.section-carousel .embla__slide,
.section-carousel .swiper-slide,
.section-carousel [class*="slide"]{ height:100vh !important; min-height:100vh !important; }
@supports (height:100svh){
  .section-carousel,
  .section-carousel .embla__viewport,
  .section-carousel .embla__container,
  .section-carousel .embla__slide,
  .section-carousel .swiper-slide,
  .section-carousel [class*="slide"]{ height:100svh !important; min-height:100svh !important; }
}

/* Center the banner caption (title + CTA) in the middle of the banner */
.section-carousel .embla__slide{ justify-content:center !important; align-items:center !important; }
.section-carousel .embla__slide .theme-container{
  align-items:center !important; margin-inline:auto !important; max-width:960px; text-align:center;
}
.section-carousel .embla__slide .theme-container > div{
  align-items:center !important; text-align:center !important; max-width:100% !important; margin-inline:auto;
}
.section-carousel .embla__slide .flex.gap-4,
.section-carousel .embla__slide .flex.gap-6{ justify-content:center !important; }

/* Product cards — force a uniform 3/4 image box. aspect-ratio reserves the
   height even before the lazy image loads, so every card is the same height
   (fixes the uneven card heights across the grid). */
a[class*="aspect-[3/4]"]{ aspect-ratio:3/4 !important; padding:0 !important; }
a[class*="aspect-[3/4]"] img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center; }
/* Unify the text area: clamp the product name to 2 lines so 1- vs 2-line
   names (and missing rating/price rows) don't shift card height. */
[data-product-card] a[href*="/products/"]:not([class*="aspect"]){
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em;
}
/* Attractive product-card hover — image zoom + rose sheen + gentle card lift */
[data-product-card]{ transition:transform .4s ease; height:100%; }
[data-product-card]:hover{ transform:translateY(-5px); }
a[class*="aspect-[3/4]"] img{ transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .7s ease; }
a[class*="aspect-[3/4]"]:hover img{ transform:scale(1.08); filter:saturate(1.06); }
a[class*="aspect-[3/4]"]::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(to top, rgba(204,127,158,.22), rgba(204,127,158,0) 55%);
  opacity:0; transition:opacity .45s ease;
}
a[class*="aspect-[3/4]"]:hover::after{ opacity:1; }

/* Equalize card heights across AR & EN — reserve the content area so a
   discount badge, a missing rating, or a 1- vs 2-line name can't shift the
   card height (image box is already fixed at aspect-ratio 3/4 above). */
[data-product-card] > div.flex-1{ min-height:7.5rem; }

@media (prefers-reduced-motion:reduce){
  [data-product-card],[data-product-card]:hover,
  a[class*="aspect-[3/4]"] img,a[class*="aspect-[3/4]"]:hover img{ transition:none !important; transform:none !important; }
}

/* Product-page main gallery image — zoom wrapper (JS adds .sll-zoom-wrap
   to .product-gallery). Keep the theme's own sizing; just contain zoom. */
.sll-zoom-wrap{ overflow:hidden; }

/* الطرحة & other custom-field selects — identity styling */
.custom-field__select,.custom-field__input{
  border-color:var(--input,#E6D3C4) !important; border-radius:10px !important;
}
.custom-field__select:focus,.custom-field__input:focus{
  border-color:#CC7F9E !important; outline:none; box-shadow:0 0 0 3px rgba(204,127,158,.15);
}
.custom-field__label{ color:#2A2024; font-weight:600; }
/* spacing when الطرحة is moved under the size guide */
.sll-cf-moved{ margin-top:6px; }

/* Hide the product SKU line (renders after a variant is selected) */
[data-product-sku-wrapper]{ display:none !important; }

/* Tamara recolor (light-DOM fallback; shadow-DOM recolor handled in JS).
   Tabby/Tamara are left fully visible — nothing here hides them. */
.tamara-summary-widget--inline-outlined,.tamara-summary-widget__container{
  border-color:#CC7F9E !important; background:#FFF5EE !important; border-radius:12px !important;
}


/* ############################################################
   5) SCROLL-REVEAL + HOVER (homepage)
   JS adds .sll-reveal to eligible images, .sll-in when visible.
   ############################################################ */
.sll-reveal{
  opacity:0;
  transform:perspective(1000px) rotateX(10deg) translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.sll-reveal.sll-in{ opacity:1; transform:perspective(1000px) rotateX(0) translateY(0); }

/* Gentle hover zoom on homepage content images */
main img,section img{ transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .6s ease; }
main a:hover img,section a:hover img{ transform:scale(1.045); filter:saturate(1.04); }

@media (prefers-reduced-motion:reduce){
  .sll-reveal{ opacity:1 !important; transform:none !important; }
  main img,section img{ transition:none !important; }
}


/* ############################################################
   6) MOVING DISCOUNT BADGE + PRODUCT-IMAGE ZOOM
   ############################################################ */
/* Recolor discount pill to rose/gold + animated sheen.
   JS tags the visible discount pill with .sll-badge. */
.sll-badge{
  position:relative; overflow:hidden;
  background:linear-gradient(90deg,#CC7F9E,#B5637F) !important;
  color:#fff !important; font-weight:700 !important;
  border:none !important; box-shadow:0 2px 8px rgba(178,99,132,.28);
  animation:sllBadgeBob 2.6s ease-in-out infinite;
}
.sll-badge::after{
  content:""; position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
  animation:sllBadgeShine 2.6s ease-in-out infinite;
}
@keyframes sllBadgeBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-2px);} }
@keyframes sllBadgeShine{ 0%{ left:-120%;} 55%,100%{ left:140%;} }

/* Zoom-lens on the product-page main image (JS tags .sll-zoom-wrap). */
.sll-zoom-wrap img{ transition:transform .15s ease; cursor:zoom-in; }
.sll-zoom-wrap.sll-zooming img{ transition:transform .05s linear; }

/* Quick-view ("اختر الخيارات") gallery fix — the native transform slider's
   arrows/thumbs don't work there, so convert its track to native scroll-snap
   (swipe works; JS wires the arrows/thumbs). Scoped to the dialog only, so the
   product page gallery is untouched. */
[role="dialog"] .product-gallery__container,
el-dialog[open] .product-gallery__container,
.kit-container .product-gallery__container{
  overflow-x:auto !important; scroll-snap-type:x mandatory;
  transform:none !important; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
[role="dialog"] .product-gallery__container::-webkit-scrollbar,
el-dialog[open] .product-gallery__container::-webkit-scrollbar,
.kit-container .product-gallery__container::-webkit-scrollbar{ display:none; }
[role="dialog"] .product-gallery__slide,
el-dialog[open] .product-gallery__slide,
.kit-container .product-gallery__slide{ scroll-snap-align:center; }

@media (prefers-reduced-motion:reduce){
  .sll-badge,.sll-badge::after{ animation:none !important; }
}


/* ############################################################
   7) TESTIMONIALS — unique Soleil design
   Theme markup: .section-testimonials article
   (border-accent bg-secondary flex h-full flex-col rounded border p-6)
   Rose/gold, asymmetric, soft lift on hover, sun-ray accent.
   ############################################################ */
.section-testimonials article{
  position:relative;
  background:linear-gradient(160deg,#FFFFFF 0%,#FFF5EE 100%) !important;
  border:1px solid rgba(204,127,158,.28) !important;
  border-radius:22px 22px 22px 6px !important;     /* asymmetric, distinctive */
  box-shadow:0 12px 30px rgba(178,99,132,.10),
             inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
  transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.section-testimonials article:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 50px rgba(178,99,132,.18);
  border-color:rgba(204,127,158,.5) !important;
}
/* Decorative opening quote in the corner */
.section-testimonials article::before{
  content:"\201D";
  position:absolute; top:4px; inset-inline-start:18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:72px; line-height:1;
  color:rgba(242,199,133,.5); pointer-events:none;
}
/* Gold-to-rose accent hairline, top corner */
.section-testimonials article::after{
  content:""; position:absolute; top:0; inset-inline-start:0;
  width:54px; height:3px;
  background:linear-gradient(90deg,#F2C785,#CC7F9E);
  border-radius:0 0 3px 0;
}
/* Star ratings / names tinted to identity */
.section-testimonials article [class*="text-accent"],
.section-testimonials article svg{ color:#E0A94F !important; }


/* ############################################################
   8) INTRO SPLASH — glassy cream overlay (homepage, once/session)
   Markup + logic in soleil-theme.js. Styles only here.
   ############################################################ */
#sll-intro{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,245,238,.55);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  opacity:1; transition:opacity .6s ease;
}
#sll-intro.sll-intro-hide{ opacity:0; pointer-events:none; }
#sll-intro .sll-intro-card{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:42px 56px; border-radius:26px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(204,127,158,.28);
  box-shadow:0 24px 70px rgba(178,99,132,.22);
  animation:sllIntroPop .7s cubic-bezier(.22,.61,.36,1) both;
}
#sll-intro .sll-intro-card img{ width:140px; height:auto; display:block; }
#sll-intro .sll-intro-tag{
  color:#B5637F; font-family:var(--sll-font-label);
  font-size:13px; letter-spacing:.34em; text-transform:uppercase; opacity:.9;
}
@keyframes sllIntroPop{ 0%{ opacity:0; transform:scale(.9) translateY(10px);} 100%{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ #sll-intro .sll-intro-card{ animation:none; } }


/* ############################################################
   9) SIZE-GUIDE button + modal (+ interactive picker)
   ############################################################ */
.sll-sg-open{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px; padding:10px 18px;
  font-size:14px; font-weight:600;
  color:#B5637F; background:transparent;
  border:1px solid #CC7F9E; border-radius:12px; cursor:pointer;
  transition:background-color .25s ease,color .25s ease,transform .2s ease;
}
.sll-sg-open:hover{ background:#CC7F9E; color:#fff; transform:translateY(-1px); }
.sll-sg-open svg{ width:18px; height:18px; }

.sll-sg-overlay{
  position:fixed; inset:0; z-index:10000; display:none;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(42,32,36,.45);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.sll-sg-overlay.is-open{ display:flex; }

.sll-sg-panel{
  position:relative; width:100%; max-width:560px; max-height:88vh;
  overflow:hidden; display:flex; flex-direction:column;
  background:#FFF5EE;
  border:1px solid rgba(204,127,158,.3); border-radius:22px;
  box-shadow:0 30px 80px rgba(42,32,36,.35);
  animation:sllSgPop .4s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes sllSgPop{ from{ opacity:0; transform:translateY(14px) scale(.97);} to{ opacity:1; transform:none;} }

.sll-sg-close{
  position:absolute; top:14px; inset-inline-start:14px;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; color:#B5637F;
  background:rgba(204,127,158,.12); border:none; border-radius:50%; cursor:pointer;
  transition:background-color .2s ease;
}
.sll-sg-close:hover{ background:rgba(204,127,158,.24); }

.sll-sg-head{
  text-align:center; padding:28px 24px 20px;
  background:linear-gradient(160deg,#FFFFFF 0%,#FFF5EE 100%);
  border-bottom:1px solid rgba(204,127,158,.18);
}
.sll-sg-logo{ width:92px; height:auto; margin:0 auto 12px; display:block; }
.sll-sg-eyebrow{
  display:block; font-family:var(--sll-font-label);
  font-size:12px; letter-spacing:.35em; text-transform:uppercase;
  color:#E0A94F; margin-bottom:6px;
}
.sll-sg-title{ margin:0; font-family:var(--sll-font-head); font-size:27px; font-weight:700; color:#2A2024; }
.sll-sg-sub{ margin:8px 0 0; font-size:14px; color:#9A8B86; }
.sll-sg-foot{
  text-align:center; padding:12px; font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:#B5637F;
  border-top:1px solid rgba(204,127,158,.14);
}

.sll-sg-body{ padding:20px 22px 26px; overflow-y:auto; }
.sll-sg-note{ margin:0 0 14px; font-size:13px; color:#9A8B86; line-height:1.7; }
.sll-sg-hint{ margin:12px 0 0; font-size:12.5px; color:#B5637F; text-align:center; }

.sll-sg-table{ width:100%; border-collapse:collapse; font-size:14px; color:#2A2024; }
.sll-sg-table th{
  padding:11px 8px; font-weight:700; color:#2A2024;
  background:#F2C785; text-align:center;
}
.sll-sg-table th:first-child{ border-start-start-radius:10px; }
.sll-sg-table th:last-child{ border-start-end-radius:10px; }
.sll-sg-table td{ padding:4px 8px; text-align:center; border-bottom:1px solid rgba(204,127,158,.14); }
.sll-sg-table tbody tr:nth-child(odd){ background:rgba(242,199,133,.10); }

/* interactive size picker button inside the size cell */
.sll-sg-pick{
  min-width:46px; padding:7px 12px; font-size:14px; font-weight:700;
  color:#B5637F; background:#fff;
  border:1.5px solid #CC7F9E; border-radius:10px; cursor:pointer;
  transition:all .18s ease;
}
.sll-sg-pick:hover{ background:#CC7F9E; color:#fff; transform:translateY(-1px); }
.sll-sg-pick.is-picked{ background:#CC7F9E; color:#fff; box-shadow:0 4px 12px rgba(178,99,132,.3); }

/* flash the chosen option on the page after picking */
@keyframes sllPickFlash{
  0%{ box-shadow:0 0 0 0 rgba(204,127,158,.55);} 100%{ box-shadow:0 0 0 14px rgba(204,127,158,0);} }
.product-options__item.sll-flash{ animation:sllPickFlash .9s ease-out 1; }


/* ############################################################
   10) POLICY / CARE ACCORDIONS + ATTRACTIVE TICK LISTS
   Built from <div>s (Zid sanitizer strips <details>/<summary>).
   ############################################################ */
.sll-acc{ margin:24px 0 8px; border-top:1px solid rgba(204,127,158,.22); }
.sll-acc-item{ border-bottom:1px solid rgba(204,127,158,.22); }
.sll-acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 2px; font-size:15px; font-weight:600; color:#2A2024;
  background:transparent; border:none; cursor:pointer; text-align:start;
}
.sll-acc-car{ position:relative; width:14px; height:14px; flex-shrink:0; }
.sll-acc-car::before,.sll-acc-car::after{
  content:""; position:absolute; top:50%; left:50%;
  width:11px; height:1.8px; background:#CC7F9E;
  transform:translate(-50%,-50%); transition:transform .3s ease;
}
.sll-acc-car::after{ transform:translate(-50%,-50%) rotate(90deg); }
.sll-acc-item.open .sll-acc-car::after{ transform:translate(-50%,-50%) rotate(0); }
.sll-acc-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.sll-acc-in{ padding:2px 2px 18px; font-size:14px; line-height:1.9; color:#4a3f44; }
/* clickable links inside policy/care content (from CSV) */
.sll-acc-in a{ color:#CC7F9E; text-decoration:underline; text-underline-offset:2px; }
.sll-acc-in a:hover{ color:#B5637F; }
/* the product description accordion body */
.sll-acc-desc p{ margin:0 0 8px; }
.sll-acc-desc{ color:#4a3f44; }

/* Attractive ticks — gold disc + white check, for every list item */
.sll-acc-in ul,.sll-care-body ul{ margin:0; padding:0; list-style:none; }
.sll-acc-in li,.sll-care-body li{
  position:relative; padding-inline-start:30px; margin-bottom:11px; line-height:1.85;
}
.sll-acc-in li::before,.sll-care-body li::before{
  content:""; position:absolute; inset-inline-start:0; top:.18em;
  width:19px; height:19px; border-radius:50%;
  background:
    linear-gradient(135deg,#F2C785,#E0A94F) ,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
  box-shadow:0 2px 6px rgba(224,169,79,.35);
}
.sll-acc-in li::after,.sll-care-body li::after{
  content:""; position:absolute; inset-inline-start:6px; top:.42em;
  width:6px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.sll-care-body li{ color:#2A2024; font-size:14px; }


/* ############################################################
   11) FLOATING CONTACT WIDGET  (cream tray + rose/gold)
   Cream tray, rose icons, gold pulse ring. Bottom-right.
   ############################################################ */
.sll-contact{
  position:fixed; left:auto;
  inset-inline-start:auto; inset-inline-end:auto;
  right:clamp(16px,2.4vw,34px);          /* comfortable margin from the edge */
  bottom:clamp(86px,12vh,112px);         /* raised to clear the native chat bubble */
  z-index:950; display:flex; flex-direction:row; align-items:center; gap:0; direction:ltr;
}
.sll-contact-tray{
  display:flex; flex-direction:row-reverse; align-items:center; gap:8px; height:56px;
  margin-right:-28px; background:#FFFFFF;
  border:1px solid rgba(204,127,158,.2); border-radius:40px;
  box-shadow:0 10px 30px rgba(178,99,132,.22);
  max-width:0; padding:0; opacity:0; overflow:hidden;
  transform-origin:right center;
  transition:max-width .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease,padding .45s ease,margin .45s ease;
}
.sll-contact.is-open .sll-contact-tray{
  max-width:440px; padding:0 20px 0 12px; margin-right:8px; opacity:1; overflow:visible;
}
.sll-contact-item{
  position:relative; flex:0 0 auto; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  color:#CC7F9E; background:rgba(204,127,158,.1); text-decoration:none;
  opacity:0; transform:scale(.4) translateX(14px);
  transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1),background-color .25s ease,color .25s ease;
}
.sll-contact-item .sll-contact-ic{ width:22px; height:22px; display:flex; }
.sll-contact-item svg{ width:100%; height:100%; display:block; }
.sll-contact-tip{
  position:absolute; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(6px); white-space:nowrap;
  font-size:12px; font-weight:700; color:#fff; background:#2A2024;
  border:1px solid rgba(204,127,158,.4); padding:5px 11px; border-radius:9px;
  box-shadow:0 6px 16px rgba(42,32,36,.25); opacity:0; pointer-events:none;
  transition:opacity .2s ease,transform .2s ease; z-index:3;
}
.sll-contact-tip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#2A2024;
}
.sll-contact-item:hover .sll-contact-tip{ opacity:1; transform:translateX(-50%) translateY(0); }
.sll-contact.is-open .sll-contact-item{ opacity:1; transform:scale(1) translateX(0); transition-delay:calc(var(--i) * 55ms); }
.sll-contact-item:hover{ background:#CC7F9E; color:#fff; transform:translateY(-3px) scale(1.08); }
.sll-c-whatsapp:hover { background:#25d366; color:#fff; }
.sll-c-instagram:hover{ background:#dd2a7b; color:#fff; }
.sll-c-tiktok:hover   { background:#111; color:#fff; }
.sll-c-phone:hover,.sll-c-mail:hover{ background:#CC7F9E; color:#fff; }

.sll-contact-fab{
  position:relative; flex:0 0 auto; width:60px; height:60px; border-radius:50%;
  border:none; cursor:pointer; background:#CC7F9E; color:#fff;
  box-shadow:0 12px 28px rgba(178,99,132,.4);
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .3s ease;
}
.sll-contact-fab:hover{ transform:scale(1.06); }
.sll-contact.is-open .sll-contact-fab{ background:#B5637F; }
.sll-fab-ring{
  position:absolute; inset:-3px; border-radius:50%;
  border:2px solid #F2C785; animation:sllPulse 2.4s ease-out infinite;
}
.sll-contact.is-open .sll-fab-ring{ animation:none; opacity:0; }
@keyframes sllPulse{ 0%{ transform:scale(1); opacity:.85;} 70%{ transform:scale(1.45); opacity:0;} 100%{ transform:scale(1.45); opacity:0;} }
.sll-fab-ic{ position:absolute; width:26px; height:26px; display:flex;
  transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1); }
.sll-fab-ic svg{ width:100%; height:100%; }
.sll-fab-close{ opacity:0; transform:rotate(-90deg) scale(.5); }
.sll-contact.is-open .sll-fab-chat { opacity:0; transform:rotate(90deg) scale(.5); }
.sll-contact.is-open .sll-fab-close{ opacity:1; transform:rotate(0) scale(1); }

@media (prefers-reduced-motion:reduce){
  .sll-contact-tray{ transition:max-width .2s ease,opacity .2s ease; }
  .sll-contact-item{ transition:opacity .2s ease; transform:none; }
  .sll-contact.is-open .sll-contact-item{ transform:none; transition-delay:0ms; }
  .sll-fab-ring{ animation:none; }
}

/* small screens */
@media (max-width:480px){
  .sll-contact{ bottom:82px; right:14px; }
  .sll-contact-fab{ width:56px; height:56px; }
  .sll-contact-item{ width:42px; height:42px; }
  .sll-contact.is-open .sll-contact-tray{ max-width:calc(100vw - 96px); }
  .sll-sg-title{ font-size:22px; }
  .sll-sg-table{ font-size:13px; }
  .sll-sg-table th,.sll-sg-table td{ padding:8px 5px; }
}


/* ############################################################
   CSV-DRIVEN POP-UP  (offer code / image announcement)
   ############################################################ */
.sll-pop-ov{
  position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(42,32,36,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s ease;
}
.sll-pop-ov.is-open{ opacity:1; }
.sll-pop{
  position:relative; width:100%; max-width:min(420px, calc(100vw - 32px)); box-sizing:border-box;
  background:#FFF5EE; border:1px solid rgba(204,127,158,.3); border-radius:22px;
  box-shadow:0 30px 80px rgba(42,32,36,.35);
  padding:36px 28px 30px; text-align:center; overflow:hidden;
  transform:translateY(16px) scale(.97);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.sll-pop-ov.is-open .sll-pop{ transform:none; }
.sll-pop::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#F2C785,#CC7F9E); }
.sll-pop-x{
  position:absolute; top:12px; inset-inline-start:12px; width:34px; height:34px;
  border:none; border-radius:50%; background:rgba(204,127,158,.12); color:#B5637F;
  font-size:20px; line-height:1; cursor:pointer; transition:background .2s;
}
.sll-pop-x:hover{ background:rgba(204,127,158,.24); }
.sll-pop-emblem{ font-family:var(--sll-font-label); color:#E0A94F; font-size:20px; letter-spacing:.3em; margin-bottom:6px; }
.sll-pop-title{ font-family:var(--sll-font-head); font-size:24px; color:#2A2024; margin:0 0 8px; line-height:1.25; }
.sll-pop-sub{ color:#6b5a60; font-size:15px; margin:0 0 16px; line-height:1.6; }
.sll-pop-code{
  display:flex; align-items:stretch; justify-content:center; margin:0 auto 14px; max-width:300px;
  border:1.5px dashed #CC7F9E; border-radius:12px; overflow:hidden; background:#fff;
}
.sll-pop-codeval{ flex:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--sll-font-label); font-weight:700; letter-spacing:.15em; color:#B5637F; font-size:18px; padding:12px; }
.sll-pop-copy{ border:none; background:#CC7F9E; color:#fff; font-weight:700; padding:12px 16px; cursor:pointer; font-size:14px; transition:background .2s; white-space:nowrap; }
.sll-pop-copy:hover{ background:#B5637F; }
.sll-pop-copy.is-copied{ background:#E0A94F; }
.sll-pop-cd{ font-size:13px; color:#B5637F; margin:0 0 10px; }
.sll-pop-cd b{ font-size:16px; color:#2A2024; }
.sll-pop-desc{ font-size:12.5px; color:#9A8B86; margin:6px 0 0; }
.sll-pop-imgwrap{ display:block; border-radius:14px; overflow:hidden; }
.sll-pop-imgwrap img{ width:100%; height:auto; display:block; }
.sll-pop-btn{ display:inline-block; margin-top:14px; background:#CC7F9E; color:#fff; font-weight:700;
  padding:11px 28px; border-radius:12px; text-decoration:none; transition:background .2s; }
.sll-pop-btn:hover{ background:#B5637F; }
@media (max-width:480px){ .sll-pop{ padding:30px 20px 26px; } .sll-pop-title{ font-size:21px; } }