@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200..700&display=swap');

/* ===================================================================
   تفاريد — Tafareed storefront refinement
   Layered on Theme Raed. Pure CSS, no markup changes.
   Palette: navy #0B2C42 · deep #06192A · paper #F6F7F8 · gold #B98B57
   =================================================================== */

:root{
  --t-navy:#0B2C42;
  --t-navy-deep:#06192A;
  --t-paper:#F6F7F8;
  --t-card:#FFFFFF;
  --t-ink:#10283A;
  --t-ink-soft:#5B7285;
  --t-line:#E3E8EC;
  --t-silver:#EEF2F5;
  --t-gold:#B98B57;
  --t-r:14px;
  --t-shadow:0 1px 2px rgba(11,44,66,.04), 0 8px 24px -12px rgba(11,44,66,.16);
  --t-shadow-lift:0 2px 4px rgba(11,44,66,.05), 0 18px 40px -16px rgba(11,44,66,.26);
}

/* ---------- 1. Typography ------------------------------------------ */
/* Arabic needs more leading than Latin and no letter-spacing. */
body{
  color:var(--t-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.rtl, body.rtl p, body.rtl li{ letter-spacing:0; }
p{ line-height:1.95; }
h1,h2,h3,h4{
  font-weight:700;
  line-height:1.4;
  text-wrap:balance;
}
/* Colour is set only on light grounds. Headings and paragraphs on the dark
   hero and dark footer must keep inheriting white, so never colour them
   at element level. */
.s-block--features h2, .s-block--features p,
.s-block--best-offers .s-slider-block__title h2,
.s-block--special-products .s-slider-block__title h2,
.product-single h1{ color:var(--t-ink); }
.product__description p, .product__description li{ color:var(--t-ink-soft); }

/* ---------- 2. Section rhythm --------------------------------------- */
/* The theme already spaces blocks ~64px apart; adding padding on top of that
   left ~136px of dead space, so only blocks with their own background get
   internal padding. */
.s-block--features{ padding-block:clamp(1.75rem,4vw,2.75rem); }

/* Section headings. The hero is excluded on purpose: its nav arrows live in
   this same .s-slider-block__title element, and the theme positions them
   absolutely over the slides. Making it position:relative turns it into their
   containing block, so the arrows centre on a 40px strip and land above the
   banner instead of on it. */
.s-block:not(.s-block--hero-slider) .s-slider-block__title{
  position:relative;
  margin-block-end:2.25rem;
  padding-block-end:1rem;
}
.s-block:not(.s-block--hero-slider) .s-slider-block__title h2{
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  letter-spacing:0;
}
.s-block:not(.s-block--hero-slider) .s-slider-block__title::after{
  content:"";
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;
  width:44px; height:2px;
  background:var(--t-gold);
  border-radius:2px;
}

/* ---------- 3. Product cards ---------------------------------------- */
.s-product-card-entry{
  background:var(--t-card);
  border:1px solid var(--t-line);
  border-radius:var(--t-r);
  overflow:hidden;
  box-shadow:none;
  transition:box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.s-product-card-entry:hover{
  border-color:#D3DCE3;
  box-shadow:var(--t-shadow-lift);
  transform:translateY(-3px);
}
.s-product-card-image{
  background:#fff;
  border-radius:0;
  overflow:hidden;
}
.s-product-card-image img{
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.s-product-card-entry:hover .s-product-card-image img{ transform:scale(1.045); }

.s-product-card-content{ padding:1rem 1rem 1.15rem; }
.s-product-card-content-title,
.s-product-card-content-title a{
  color:var(--t-ink);
  font-weight:600;
  font-size:.975rem;
  line-height:1.65;
}
.s-product-card-content-subtitle{ color:var(--t-ink-soft); font-size:.8rem; }

.s-product-card-price{
  color:var(--t-navy);
  font-weight:700;
  font-size:1.05rem;
}
.s-product-card-sale-price{
  color:#9AA9B4;
  font-weight:500;
  font-size:.85rem;
  text-decoration-thickness:1px;
}
.s-product-card-promotion-title{
  background:var(--t-gold);
  color:#fff;
  font-weight:600;
  letter-spacing:0;
  border-radius:999px;
}
.s-product-card-entry button.s-button-primary-outline.s-button-outline{
  background:var(--t-navy);
  border-color:var(--t-navy);
  color:#fff;
  font-weight:600;
}
.s-product-card-entry button.s-button-primary-outline.s-button-outline:hover{
  background:var(--t-navy-deep);
  border-color:var(--t-navy-deep);
  color:#fff;
}
.s-product-card-wishlist-btn{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  border:1px solid var(--t-line);
  box-shadow:none;
}

/* ---------- 4. Buttons ---------------------------------------------- */
.btn, .s-button-solid, .s-button-primary{
  border-radius:10px;
  font-weight:600;
  letter-spacing:0;
  transition:background-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.btn--primary, .s-button-primary, .s-button-solid.s-button-primary{
  background:var(--t-navy);
  border-color:var(--t-navy);
  min-height:48px;
}
.btn--primary:hover, .s-button-primary:hover{
  background:var(--t-navy-deep);
  border-color:var(--t-navy-deep);
}
.btn:active, .s-button-primary:active{ transform:translateY(1px); }
a:focus-visible, button:focus-visible, .btn:focus-visible,
[role="button"]:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--t-gold);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- 5. Header ------------------------------------------------ */
.top-navbar{
  background:var(--t-navy-deep);
  font-size:.8rem;
}
.top-navbar a{ opacity:.85; transition:opacity .2s ease; }
.top-navbar a:hover{ opacity:1; }
.store-header .main-menu .menu-item > a{
  font-weight:600;
  color:var(--t-ink);
  transition:color .2s ease;
}
.store-header .main-menu .menu-item > a:hover{ color:var(--t-navy); }
.store-header .sub-menu{
  border:1px solid var(--t-line);
  border-radius:12px;
  box-shadow:var(--t-shadow);
  overflow:hidden;
}
.fixed-header.fixed-pinned{
  box-shadow:0 1px 0 var(--t-line), 0 10px 30px -20px rgba(11,44,66,.5);
  backdrop-filter:blur(10px);
}
.s-search-input{ border-radius:999px; }

/* ---------- 6. Hero --------------------------------------------------- */
/* The slide photo is set inline as background-image, so the `background`
   shorthand must never be used here: it resets size and position, and the
   photo then renders at natural size anchored top-left. Longhands only. */
.s-block--hero-slider .overlay-bg,
.s-block--full-bg .overlay-bg{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* The darkening gets a layer of its own so it cannot touch the photo. */
.s-block--hero-slider .overlay-bg::after,
.s-block--full-bg .overlay-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,25,42,.22) 0%,rgba(6,25,42,.34) 100%);
  pointer-events:none;
}
/* The hero text is a plain h2 plus p.description inside the slide. This theme
   has no .banner__title or .banner__description, so rules on those class names
   match nothing. */
.s-block--hero-slider .swiper-slide h2{
  text-shadow:0 2px 22px rgba(6,25,42,.5);
}
.s-block--hero-slider .swiper-slide p.description{
  text-shadow:0 1px 14px rgba(6,25,42,.55);
  opacity:.95;
}
/* Collection button added to each slide by the custom JS. White on dark
   photography, and distinct from the navy buttons used everywhere else. */
.tf-hero-cta{
  display:inline-block;
  margin-top:1.15rem;
  background:#fff;
  color:var(--t-navy);
  font-weight:700;
  border-radius:999px;
  padding:.78rem 1.9rem;
  line-height:1.7;
  text-decoration:none;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.6);
  transition:background-color .2s ease, transform .12s ease;
}
.tf-hero-cta:hover{ background:#EAF1F6; color:var(--t-navy-deep); }
.tf-hero-cta:active{ transform:translateY(1px); }

/* Mobile hero. The photos are 3:2 landscape with the piece at roughly 78%
   across and the left half empty backdrop, so a centred crop on a phone shows
   mostly fabric. A taller frame renders the piece larger — at this ratio the
   full image height still fits, so only width is cropped — and a focal point
   right of centre keeps the piece in shot on all three slides. */
@media (max-width:1023px){
  /* Show the whole banner. The photos are 1440x720, so the slide takes their
     own 2:1 ratio and the full image fits edge to edge with nothing cropped.
     The theme's min-h-[300px] would force a crop at phone widths, so clear it
     and let the swiper size itself to the slide. */
  /* Swiper sizes the slider in JS and puts an explicit height down the whole
     chain, which beats aspect-ratio — hence !important on these four. */
  .s-block--hero-slider salla-slider,
  .s-block--hero-slider .swiper,
  .s-block--hero-slider .swiper-wrapper{ height:auto !important; }
  .s-block--hero-slider .swiper-slide{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:2/1;
  }
  .s-block--hero-slider .overlay-bg,
  .s-block--hero-slider .bg-cover{ background-position:center; }
  /* Type has to fit inside that 2:1 band without covering the piece. */
  .s-block--hero-slider .swiper-slide h2{
    font-size:clamp(1.05rem,4.6vw,1.5rem);
    margin-bottom:.35rem;
  }
  .s-block--hero-slider .swiper-slide p.description{ font-size:.78rem; }
  .s-block--hero-slider .swiper-slide .text-white{ width:86%; }
  .tf-hero-cta{ padding:.5rem 1.15rem; font-size:.82rem; margin-top:.6rem; }
}

/* ---------- 7. Features / trust band ---------------------------------- */
.s-block--features{
  background:var(--t-paper);
  border-block:1px solid var(--t-line);
  border-radius:0;
}
.s-block--features .feature-icon i{ color:var(--t-navy); }
.s-block--features .feature-icon{
  color:var(--t-navy);
  background:#fff;
  border:1px solid var(--t-line);
  border-radius:50%;
}

/* ---------- 8. Slider controls ---------------------------------------- */
.swiper-button{
  background:#fff;
  border:1px solid var(--t-line);
  color:var(--t-navy);
  box-shadow:var(--t-shadow);
  transition:background-color .2s ease, color .2s ease;
}
.swiper-button:hover{ background:var(--t-navy); color:#fff; }
.swiper-pagination-bullet-active{ background:var(--t-navy); }

/* ---------- 9. Footer -------------------------------------------------- */
/* The theme paints its dark chrome #1D1F1F through body-class selectors, which
   left a charcoal footer sitting on a navy strip. Match the brand navy and use
   the same specificity so these actually win. */
.store-footer{ background:var(--t-navy-deep); }
.footer-is-dark .store-footer__inner{ background:var(--t-navy-deep); }
.topnav-is-dark .top-navbar{ background:var(--t-navy-deep); }
.store-footer__inner{ border-block-start:1px solid rgba(232,238,242,.12); }
.store-footer a{ transition:opacity .2s ease; }
.store-footer a:hover{ opacity:.78; }
.social-link{
  border:1px solid rgba(232,238,242,.2);
  border-radius:50%;
  transition:background-color .2s ease, border-color .2s ease;
}
.social-link:hover{ background:rgba(232,238,242,.12); border-color:rgba(232,238,242,.4); }
.copyright-text{ opacity:.7; font-size:.8rem; }

/* An empty recommendation slider still renders its heading and ~92px of
   nothing. Collapse it only while it has no items, so it returns on its own
   once related products exist. */
salla-products-slider[source="related"]:not(:has(.s-product-card-entry)){ display:none; }

/* ---------- 10. Product page ------------------------------------------- */
.product-single h1{ font-size:clamp(1.35rem,3vw,2rem); line-height:1.5; }
.product__description{ line-height:2.05; }
.product__description p{ margin-block-end:1rem; }
.product__description ul{
  margin-block:1rem;
  padding-inline-start:1.25rem;
  list-style:disc;
}
.product__description li{ margin-block-end:.5rem; line-height:1.9; }
.product__description strong{ color:var(--t-ink); font-weight:700; }
.sticky-product-bar{
  border-block-start:1px solid var(--t-line);
  box-shadow:0 -8px 30px -20px rgba(11,44,66,.5);
}

/* ---------- 11. Motion & small screens ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
@media (max-width:640px){
  .s-product-card-content{ padding:.8rem .8rem 1rem; }
  .s-product-card-content-title{ font-size:.9rem; }
  .s-product-card-price{ font-size:1rem; }
  .s-slider-block__title{ margin-block-end:1.5rem; }
}
/* ============================================================
   Static informational pages (About, Shipping, Returns, …)
   Content is plain semantic HTML from the Salla page editor.
   All design lives here so the owner can keep editing text
   in the editor without touching layout.
   ============================================================ */
.content--single-page .content-entry{
  color:var(--t-ink);
  font-size:clamp(.95rem,.4vw + .88rem,1.05rem);
  line-height:1.95;
}
.content--single-page .content-entry > *{ max-width:68ch; }

.content--single-page .content-entry > h2:first-child{
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.15; font-weight:700; letter-spacing:-.01em;
  color:var(--t-navy); margin:0 0 .6rem;
}
.content--single-page .content-entry > h2:first-child + p{
  position:relative; max-width:56ch;
  font-size:clamp(1.05rem,.6vw + .95rem,1.28rem);
  line-height:1.8; color:var(--t-ink);
  padding-block-end:1.75rem; margin-block-end:2.25rem;
  border-block-end:1px solid var(--t-line);
}
.content--single-page .content-entry > h2:first-child + p::after{
  content:""; position:absolute; inset-block-end:-1px; inset-inline-start:0;
  width:64px; height:2px; background:var(--t-gold);
}

.content--single-page .content-entry h3{
  display:flex; align-items:center; gap:.85rem;
  font-size:clamp(1.05rem,.5vw + .95rem,1.25rem);
  font-weight:700; color:var(--t-navy);
  margin-block:2.6rem .8rem;
}
.content--single-page .content-entry h3::after{
  content:""; flex:1 1 auto; height:1px; background:var(--t-line);
}

.content--single-page .content-entry blockquote{
  max-width:none; margin-block:2.75rem; padding:2rem 1.5rem; border:0;
  background:var(--t-silver); border-radius:var(--t-r); text-align:center;
  font-size:clamp(1.3rem,1.4vw + 1.05rem,1.85rem);
  font-weight:700; line-height:1.4; color:var(--t-navy);
}

.content--single-page .content-entry ul{ list-style:none; padding-inline-start:0; }
.content--single-page .content-entry ul > li{
  position:relative; padding-inline-start:1.1rem; margin-block:.55rem;
}
.content--single-page .content-entry ul > li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.78em;
  width:5px; height:5px; border-radius:50%; background:var(--t-gold);
}

.content--single-page .content-entry ul:has(> li > strong){
  display:grid; gap:.8rem; max-width:none; margin-block:1rem 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
}
.content--single-page .content-entry ul:has(> li > strong) > li{
  margin:0; padding:1.15rem 1.2rem; padding-inline-start:1.2rem;
  background:var(--t-card); border:1px solid var(--t-line);
  border-radius:var(--t-r); line-height:1.7;
}
.content--single-page .content-entry ul:has(> li > strong) > li::before{ display:none; }
.content--single-page .content-entry ul:has(> li > strong) > li > strong{
  display:block; margin-block-end:.3rem; font-weight:700; color:var(--t-navy);
}

.content--single-page .content-entry > p:last-child{
  margin-block-start:2.5rem; padding-block-start:1.5rem;
  border-block-start:1px solid var(--t-line);
  color:var(--t-ink-soft); font-size:.95rem;
}

@media (max-width:640px){
  .content--single-page .content-entry{ line-height:1.85; }
  .content--single-page .content-entry h3{ margin-block:2rem .6rem; }
  .content--single-page .content-entry blockquote{ padding:1.5rem 1.1rem; margin-block:2rem; }
}


/* theme sets list-style on li directly, which beats inheritance from ul */
.content--single-page .content-entry ul > li{ list-style:none !important; }




/* ============================================================
   2. Typography, navigation, hero and category refinement
   ------------------------------------------------------------
   Readex Pro replaces the theme font. The theme asks Google for
   family='Tajawal' WITH literal quotes, which is an invalid
   request, so no webfont ever loaded and the whole store was
   rendering in a fallback serif.
   ============================================================ */

:root{
  --tf-sans:'Readex Pro','Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
}

body,
body input, body select, body textarea, body button,
body h1, body h2, body h3, body h4, body h5, body h6,
body .s-product-card-content-title,
body .s-slider-block__title h2{
  font-family:var(--tf-sans) !important;
  font-optical-sizing:auto;
}

body{ font-size:15.5px; line-height:1.9; letter-spacing:0; }

/* ---------- Top utility bar: make it secondary ---------- */
.topnav-is-dark .top-navbar{ font-size:.78rem; }
.top-navbar a{ color:rgba(255,255,255,.62); transition:color .2s ease; }
.top-navbar a:hover{ color:#fff; }

/* ---------- Main navigation ---------- */
.main-nav-container{
  box-shadow:none !important;
  border-block-end:1px solid var(--t-line);
}
.main-nav-container .inner{ min-height:76px; }

.navbar-brand img{
  height:clamp(44px,4.4vw,60px) !important;
  width:auto !important;
  max-width:none;
}

custom-main-menu li.root-level > a{
  position:relative;
  font-size:.95rem;
  font-weight:500;
  color:var(--t-ink);
  padding-inline:1rem;
  letter-spacing:.005em;
  transition:color .2s ease;
}
/* underline is drawn as a background gradient, NOT ::after --
   the theme uses a::after for the dropdown caret and hijacking it
   knocks the caret onto its own line */
custom-main-menu li.root-level > a{
  background-image:linear-gradient(var(--t-gold),var(--t-gold));
  background-repeat:no-repeat;
  background-position:center bottom 14px;
  background-size:0 1.5px;
}
custom-main-menu li.root-level > a:hover{
  color:var(--t-navy);
  background-size:calc(100% - 2rem) 1.5px;
}

.main-nav-container salla-user-menu button,
.main-nav-container salla-cart-summary button{ transition:opacity .2s ease; }
.main-nav-container salla-user-menu button:hover,
.main-nav-container salla-cart-summary button:hover{ opacity:.7; }

/* ---------- Hero ---------- */
/* The hero photographs put the subject in the right ~27% of the
   frame and leave the rest flat black, with a visible tonal step
   around 1/3 in. A horizontal scrim covers that step and turns the
   dead space into a deliberate bed for the type.
   NOTE: only the first slide carries .overlay-bg -- the others use
   a bare .bg-cover, so both have to be targeted or slide 1 gets a
   scrim and slides 2 and 3 do not. Direction is physical (to right)
   because the photograph does not mirror in RTL. */
.s-block--hero-slider .swiper-slide > .overlay-bg::after,
.s-block--hero-slider .swiper-slide > .bg-cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(6,25,42,.90) 0%,
      rgba(6,25,42,.72) 30%,
      rgba(6,25,42,.42) 55%,
      rgba(6,25,42,.14) 78%,
      rgba(6,25,42,.06) 100%),
    linear-gradient(180deg,rgba(6,25,42,.18) 0%,rgba(6,25,42,0) 38%,rgba(6,25,42,.34) 100%);
}

.s-block--hero-slider .swiper-slide h2{
  font-weight:300 !important;
  font-size:clamp(1.9rem,4.2vw,3.4rem) !important;
  line-height:1.3 !important;
  letter-spacing:-.005em;
  margin-block-end:.75rem !important;
  text-shadow:0 2px 24px rgba(6,25,42,.45);
}
.s-block--hero-slider .swiper-slide p.description{
  font-size:clamp(.88rem,1vw + .6rem,1.05rem) !important;
  font-weight:300;
  line-height:1.8;
  color:rgba(255,255,255,.88) !important;
  max-width:46ch;
  margin-inline:auto;
  text-shadow:0 1px 12px rgba(6,25,42,.4);
}

.tf-hero-cta{
  background:var(--t-gold) !important;
  color:#06192A !important;
  border:0 !important;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.01em;
  padding:.85rem 2rem !important;
  border-radius:999px;
  margin-top:1.6rem !important;
  box-shadow:0 6px 20px rgba(6,25,42,.28);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.tf-hero-cta:hover{
  background:#caa06e !important;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(6,25,42,.34);
}

.s-block--hero-slider .swiper-button-next,
.s-block--hero-slider .swiper-button-prev{
  inline-size:44px; block-size:44px;
  background:rgba(255,255,255,.14) !important;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.26);
  color:#fff !important;
  transition:background .2s ease;
}
.s-block--hero-slider .swiper-button-next:hover,
.s-block--hero-slider .swiper-button-prev:hover{ background:rgba(255,255,255,.26) !important; }

/* ---------- Shop by category ---------- */
.s-block--categories .slide--cat-entry{
  display:flex; flex-direction:column; align-items:stretch;
  gap:.75rem; padding:0; background:transparent; border:0; box-shadow:none;
  block-size:auto;
}
.s-block--categories .slide--cat-entry img{
  inline-size:100% !important;
  block-size:auto !important;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--t-r) !important;
  margin:0 !important;
  border:1px solid var(--t-line);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.s-block--categories .slide--cat-entry:hover img{
  transform:translateY(-3px);
  box-shadow:var(--t-shadow-lift);
}
.s-block--categories .slide--cat-entry h2{
  font-size:.98rem !important;
  font-weight:500 !important;
  color:var(--t-ink) !important;
  text-align:center;
  margin:0 !important;
  transition:color .2s ease;
}
.s-block--categories .slide--cat-entry:hover h2{ color:var(--t-navy) !important; }

@media (max-width:640px){
  body{ font-size:15px; line-height:1.85; }
  .main-nav-container .inner{ min-height:64px; }
  .navbar-brand img{ height:40px !important; }
  .s-block--categories .slide--cat-entry{ gap:.55rem; }
  .tf-hero-cta{ padding:.7rem 1.5rem !important; font-size:.85rem; }
}







/* ============================================================
   3. Proof band (store features)
   ------------------------------------------------------------
   These three items are claims with hard numbers in them, so the
   number is the design. The CMS copy was restructured to put the
   figure in main_title and the explanation in sub_title; this
   renders the figure as display type over a gold tick, with
   hairline rules between the columns. The component's icon field
   is required by Salla but hidden here -- the figures carry it.
   ============================================================ */
.s-block--features{
  background:var(--t-card) !important;
  border:1px solid var(--t-line);
  border-radius:var(--t-r);
  padding:clamp(2rem,3.6vw,3.25rem) clamp(.75rem,2vw,1.5rem) !important;
}
.s-block--features > .grid{ gap:0 !important; }

.s-block--features__item{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start !important;
  text-align:start !important;
  position:relative;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:.25rem clamp(1.25rem,2.6vw,2.75rem) !important;
}

/* the Salla icon field is required but adds nothing beside a figure */
.s-block--features .feature-icon{ display:none !important; }

/* gold tick above each figure */
.s-block--features__item h2::before{
  content:"";
  display:block;
  inline-size:30px;
  block-size:2px;
  background:var(--t-gold);
  margin-block-end:1.15rem;
}

/* the figure */
.s-block--features__item h2{
  color:var(--t-navy) !important;
  font-size:clamp(2rem,3.8vw,2.85rem) !important;
  font-weight:300 !important;
  line-height:1.1 !important;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  margin:0 0 .85rem 0 !important;
  text-align:start !important;
}

.s-block--features__item p{
  color:var(--t-ink-soft) !important;
  font-size:.9rem !important;
  line-height:1.9 !important;
  margin:0 !important;
  max-width:34ch;
  text-align:start !important;
}

/* hairline between columns, faded at both ends */
@media (min-width:768px){
  .s-block--features__item + .s-block--features__item::before{
    content:"";
    position:absolute;
    inset-block:.35rem;
    inset-inline-start:0;
    inline-size:1px;
    background:linear-gradient(180deg,
      rgba(227,232,236,0) 0%,
      var(--t-line) 18%,
      var(--t-line) 82%,
      rgba(227,232,236,0) 100%);
  }
}

/* one column on phones, rule between rather than beside */
@media (max-width:767px){
  .s-block--features > .grid{ grid-template-columns:1fr !important; }
  .s-block--features__item{ padding-inline:.5rem !important; }
  .s-block--features__item + .s-block--features__item{
    margin-block-start:1.6rem;
    padding-block-start:1.6rem !important;
    border-block-start:1px solid var(--t-line);
  }
  .s-block--features__item p{ max-width:none; }
}



/* ============================================================
   4. Product detail page
   ------------------------------------------------------------
   The buy box sat roughly 900px down the column, underneath the
   whole description, specs, care notes and SKU -- add-to-cart was
   below the fold on every product. The column is a plain block
   element, so it is switched to a flex column here and the buying
   decision is ordered above the reading material.
   Scoped with :has(form.product-form) so it only touches product
   pages, never anything else using .main-content.
   ============================================================ */
.main-content:has(> form.product-form){ display:flex; flex-direction:column; }
.main-content:has(> form.product-form) > *{ order:20; }
.main-content:has(> form.product-form) > h1{ order:1; }
.main-content:has(> form.product-form) > div.flex.whitespace-nowrap{ order:2; }
.main-content:has(> form.product-form) > salla-installment{ order:3; }
.main-content:has(> form.product-form) > form.product-form{ order:4; }
.main-content:has(> form.product-form) > div.flex.space-x-3{ order:5; }
.main-content:has(> form.product-form) > .product-sku-wrapper{ order:6; }
.main-content:has(> form.product-form) > .product__description{ order:7; }

/* title */
.main-content > h1{
  font-size:clamp(1.35rem,2.2vw,1.8rem) !important;
  font-weight:600 !important;
  line-height:1.6 !important;
  color:var(--t-navy) !important;
  margin-bottom:.9rem !important;
}

/* price, as the second thing you read */
.main-content > div.flex.whitespace-nowrap{
  font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:600;
  color:var(--t-navy);
  margin-block-end:1.15rem;
}
.main-content > div.flex.whitespace-nowrap p,
.main-content > div.flex.whitespace-nowrap span{ font-size:inherit !important; }

/* the form repeats the price; once it sits right under the real
   one that is just noise */
form.product-form > section.flex.bg-white{ display:none !important; }

salla-installment{ display:block; margin-block-end:1.15rem; }

/* buy box */
form.product-form .sticky-product-bar{
  background:var(--t-paper) !important;
  border:1px solid var(--t-line);
  border-radius:var(--t-r);
  padding:1.3rem !important;
}
.sticky-product-bar__quantity label{ color:var(--t-ink) !important; font-size:.92rem; }
.sticky-product-bar .s-quantity-input-container{
  border:1px solid var(--t-line);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}
form.product-form .s-button-element.s-button-primary{
  background:var(--t-navy) !important;
  border-color:var(--t-navy) !important;
  color:#fff !important;
  border-radius:999px !important;
  min-height:52px;
  font-weight:600;
  font-size:.98rem;
  transition:background .2s ease, transform .2s ease;
}
form.product-form .s-button-element.s-button-primary:hover{
  background:var(--t-navy-deep) !important;
  transform:translateY(-1px);
}

/* wishlist / share */
.main-content > div.flex.space-x-3{ margin-block:.35rem 0; }

/* SKU, quiet */
.product-sku-wrapper > div{
  background:transparent !important;
  border:1px solid var(--t-line);
  border-radius:var(--t-r);
  color:var(--t-ink-soft) !important;
  font-size:.86rem;
}

/* description, now below the fold where it belongs, set as reading matter */
.main-content > .product__description{
  padding:1.75rem 0 0 !important;
  margin-block-start:1.5rem !important;
  border-block-start:1px solid var(--t-line);
  color:var(--t-ink-soft) !important;
  line-height:1.95 !important;
}
.main-content > .product__description strong,
.main-content > .product__description b{ color:var(--t-navy); }
.main-content > .product__description ul{ list-style:none !important; padding-inline-start:0 !important; }
.main-content > .product__description li{
  position:relative;
  padding-inline-start:1.1rem;
  margin-block:.45rem;
  list-style:none !important;
}
.main-content > .product__description li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.82em;
  inline-size:5px; block-size:5px;
  border-radius:50%;
  background:var(--t-gold);
}


/* ---------- product page, second pass ---------- */
/* title and price were colliding -- the price read as a third
   line of the heading */
.main-content:has(> form.product-form) > h1{ margin-bottom:1.3rem !important; }
.main-content:has(> form.product-form) > div.flex.whitespace-nowrap{
  margin-block:.15rem 1.45rem;
  font-weight:500;
}

/* gallery */
.sidebar salla-slider.details-slider .swiper.s-slider-container{
  border:1px solid var(--t-line);
  border-radius:var(--t-r);
  overflow:hidden;
  background:#fff;
}
.sidebar salla-slider.details-slider .swiper-button-next,
.sidebar salla-slider.details-slider .swiper-button-prev{
  inline-size:40px; block-size:40px;
  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--t-line);
  color:var(--t-navy) !important;
  box-shadow:var(--t-shadow);
}
.s-slider-thumbs img{
  border-radius:10px;
  border:1px solid var(--t-line);
  transition:border-color .2s ease, opacity .2s ease;
  opacity:.72;
}
.s-slider-thumbs .swiper-slide-thumb-active img,
.s-slider-thumbs img:hover{ border-color:var(--t-navy); opacity:1; }

/* the closing shipping line in the description reads as a note */
.main-content > .product__description > p:last-child{
  font-size:.86rem;
  color:var(--t-ink-soft);
  margin-block-start:1.35rem;
  padding-block-start:1.1rem;
  border-block-start:1px solid var(--t-line);
}


/* ============================================================
   5. PRODUCT CARDS — frame, alignment, price hierarchy
   ============================================================ */

.s-product-card-entry.s-product-card-vertical{
  display:flex;
  flex-direction:column;
}

/* a consistent square frame. the theme caps this box at 240px, which
   letterboxes a 500x500 source and leaves the piece looking small */
.s-product-card-entry .s-product-card-image{
  flex:0 0 auto !important;
  max-height:none !important;
  height:auto !important;
  aspect-ratio:1/1;
  position:relative;
  border-block-end:1px solid var(--t-line);
}
.s-product-card-entry .s-product-card-image > a{
  display:block;
  block-size:100%;
  aspect-ratio:auto;
  padding:7%;
}
.s-product-card-entry img.s-product-card-image-contain{
  inline-size:100% !important;
  block-size:100% !important;
  object-fit:contain;
}

/* title clamped to two lines, so every price in a row shares one baseline */
.s-product-card-entry .s-product-card-content{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:.55rem;
}
.s-product-card-entry .s-product-card-content-main{ margin:0 !important; }
.s-product-card-entry .s-product-card-content-title{
  font-size:.9rem !important;
  line-height:1.6 !important;
  font-weight:500 !important;
  margin:0 !important;
  min-block-size:3.2em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.s-product-card-entry .s-product-card-content-title a{ transition:color .2s ease; }
.s-product-card-entry .s-product-card-content-title a:hover{ color:var(--t-navy); }

.s-product-card-entry .s-product-card-content-sub{ margin:0 !important; }
.s-product-card-entry .s-product-card-price{
  font-size:1.22rem !important;
  font-weight:600 !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
  margin:0 !important;
  display:inline-flex;
  align-items:baseline;
  gap:.28rem;
}
.s-product-card-entry .s-product-card-price i.sicon-sar{ font-size:.86em; opacity:.7; }

/* the button rests on the floor of every card, whatever the title length */
.s-product-card-entry .s-product-card-content-footer{
  margin-block-start:auto;
  padding-block-start:.35rem;
}
.s-product-card-entry button.s-button-primary-outline.s-button-outline{
  min-block-size:44px;
  font-size:.875rem;
}

/* the heart is available, not shouting */
.s-product-card-wishlist-btn{ opacity:.6; transition:opacity .2s ease; }
.s-product-card-entry:hover .s-product-card-wishlist-btn,
.s-product-card-wishlist-btn:focus-within,
.s-product-card-wishlist-btn.is-added{ opacity:1; }

@media (max-width:640px){
  .s-product-card-entry .s-product-card-content-title{ font-size:.84rem !important; }
  .s-product-card-entry .s-product-card-price{ font-size:1.06rem !important; }
}


/* ============================================================
   6. "HELP ME CHOOSE" BAND — WhatsApp
   the promotion slot: last thing a visitor sees before the
   footer. a stock gemstone photo under a black wash earned
   nothing there, so it carries the one question that stops
   people buying jewellery online.
   ============================================================ */

.s-block--full-banner{ height:auto !important; min-height:0 !important; }
.s-block--full-banner .full-banner-entry{
  background-image:none !important;
  background:linear-gradient(105deg,#06192A 0%,#0B2C42 56%,#12415F 100%) !important;
  height:auto !important;
  min-height:0 !important;
  border-block-start:1px solid rgba(185,139,87,.32);
}
/* the theme's black wash, and its two diagonal wedges, have
   nothing left to sit on once the photo is gone */
.s-block--full-banner .full-banner-entry > .overlay,
.s-block--full-banner .full-banner-entry::before,
.s-block--full-banner .full-banner-entry::after{ display:none !important; }

.s-block--full-banner .full-banner-entry > div{
  height:auto !important;
  padding-block:clamp(2.5rem,4.6vw,3.5rem) !important;
  padding-inline:clamp(1rem,5vw,3rem) !important;
}
.s-block--full-banner .full-banner-entry > div > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1.25rem,3vw,2.75rem);
  inline-size:100%;
  max-inline-size:1080px;
  margin-inline:auto;
  text-align:start;
}
.s-block--full-banner h2{
  font-size:clamp(1.02rem,1.75vw,1.32rem) !important;
  font-weight:500 !important;
  line-height:1.8 !important;
  letter-spacing:0 !important;
  max-inline-size:44ch;
  margin:0 !important;
  color:#E8F0F6 !important;
}

/* the CTA reads as WhatsApp, not as a ghost outline */
.s-block--full-banner .full-banner-entry a{
  flex:0 0 auto;
  display:inline-flex !important;
  align-items:center;
  gap:.6rem;
  background:#25D366 !important;
  border:0 !important;
  border-radius:999px !important;
  color:#05271A !important;
  font-weight:600 !important;
  font-size:.95rem !important;
  padding:.9rem 1.6rem !important;
  box-shadow:0 10px 26px -12px rgba(37,211,102,.7);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.s-block--full-banner .full-banner-entry a:hover{
  background:#1FBE5A !important;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(37,211,102,.85);
}
.s-block--full-banner .full-banner-entry a::before{
  content:"";
  inline-size:20px;
  block-size:20px;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

@media (max-width:820px){
  .s-block--full-banner .full-banner-entry > div > div{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .s-block--full-banner h2{ max-inline-size:none; }
}


/* ============================================================
   7. PRE-PURCHASE FAQ  (second store_features block)
   same block type as the proof band, so it inherits the big
   display numerals. questions are not statistics — retune them.
   ============================================================ */

.s-block--full-banner ~ .s-block--features .s-block--features__item h2{
  font-size:1.06rem !important;
  font-weight:600 !important;
  line-height:1.6 !important;
  letter-spacing:0 !important;
  color:var(--t-navy) !important;
  margin-block:.2rem .55rem !important;
}
.s-block--full-banner ~ .s-block--features .s-block--features__item p{
  font-size:.92rem !important;
  line-height:1.85 !important;
  color:var(--t-ink-soft) !important;
  max-width:38ch;
}
.s-block--full-banner ~ .s-block--features .s-block--features__item{
  padding-block:.25rem !important;
}
.s-block--full-banner ~ .s-block--features > div{ gap:2rem !important; }

/* Salla's personalised-recommendations block renders empty until the
   store has order history, leaving ~128px of white above the footer.
   collapse it only while it has no cards, so it returns on its own. */
.s-block--bundle-personalized-shoppers-who-bought:not(:has(.s-product-card-entry)){
  display:none !important;
}