/** Shopify CDN: Minification failed

Line 479:0 Unexpected "}"

**/
/* ============================================================
   SERAFINA — product page
   Left-aligned, generous, quiet. Reference: Zara / H&M / Skims.
   Loaded separately because theme.css.liquid does not compile.
   ============================================================ */

:root{
  --sf-ink:#171411;
  --sf-bronze:#8B5547;
  --sf-sale:#C13024;
  --sf-line:rgba(23,20,17,.14);
  --sf-line-soft:rgba(23,20,17,.09);
  --sf-mute:rgba(23,20,17,.52);
  --sf-bg:#FBFAF8;
  --sf-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. everything left ---------- */
.product-single__meta,
.product-single__meta .product-block,
.product-single__meta .product-block *,
variant-swatch-king,
variant-swatch-king *{
  text-align:left !important;
}
.product-single__meta{ padding-inline:0; }

/* ---------- 2. rhythm ---------- */
.product-single__meta .product-block{ margin:0 0 38px; }
.product-single__meta .product-block--header{ margin-bottom:8px !important; }
.product-single__meta .product-block--price{ margin-bottom:24px; }
variant-swatch-king{ display:block; margin:0 0 36px; }
.variant-wrapper{ margin:0 0 36px; }

/* ---------- 3. title + price ---------- */
.product-single__title{
  font-size:1.5rem; line-height:1.25;
  letter-spacing:.005em; font-weight:500;
  margin:0 0 2px;
}
/* one quiet baseline row: price · compare · savings, tax note beneath */
.product-single__meta .product-block--price{ display:block !important; margin-bottom:44px !important; }
/* the hairline lives on this span, so it is exactly as long as the prices */
.sf-price-line{
  display:inline-flex; flex-wrap:wrap; align-items:baseline;
  column-gap:.65em; row-gap:3px;
  border-top:1px solid var(--sf-line);
  padding-top:11px;
}
.product-single__meta .product__price{
  order:1;
  font-size:1.05rem !important; letter-spacing:.02em;
  color:var(--sf-ink) !important; font-weight:500 !important;
}
.product-single__meta [data-product-price-wrap]{ order:2; }
.product-single__meta .product__price--compare{
  order:2;
  font-size:.86rem !important; color:var(--sf-mute) !important;
  text-decoration:line-through; font-weight:400 !important;
  margin:0 !important;
}
.product__price-savings,
.product__price--save{
  display:none !important;
  order:3;
  background:none !important; border:0 !important;
  color:var(--sf-sale) !important;
  font-size:10px !important; font-weight:500 !important;
  letter-spacing:.1em; text-transform:uppercase;
  padding:0 !important; margin:0 !important;
}
.product-single__meta .product__policies{
  display:none !important;
  font-size:10px !important; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sf-mute) !important; opacity:.85;
  text-align:left !important; margin:1px 0 0 !important;
}
.product-single__meta .product__unit-price{ display:none; }
/* the old separator block is pure phantom margin — remove it entirely */
.product-single__meta .product-block:has(> hr){ display:none !important; }

/* ---------- 4. option labels ---------- */
variant-swatch-king label.swatch-label,
.variant__label{
  display:block !important;
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-weight:500 !important;
  color:var(--sf-ink) !important;
  opacity:.5 !important;
  margin:0 0 12px !important;
}
variant-swatch-king label.swatch-label .swatch-variant-name{
  text-transform:none !important;
  letter-spacing:.01em !important;
  font-weight:500 !important;
  color:var(--sf-ink) !important;
  opacity:1 !important;
}

/* ---------- 5. colour swatches (polaroid: image + name) ---------- */
/* the repeated price is the single biggest source of clutter */
variant-swatch-king div.swatch-button-price,
variant-swatch-king div.swatch-button-price-hidden,
variant-swatch-king .dropdown-swatch-price{ display:none !important; }

variant-swatch-king div.swatches ul.swatch-view{
  display:flex !important; flex-wrap:wrap !important;
  gap:8px !important; margin:0 !important; padding:0 !important;
  justify-content:flex-start !important; list-style:none !important;
}
variant-swatch-king div.swatches ul.swatch-view li{
  margin:0 !important; padding:0 !important; list-style:none !important;
}

/* --- any button that holds a photo = image swatch --- */
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]){
  display:block !important;
  width:84px !important; min-width:0 !important; height:auto !important;
  padding:0 !important; margin:0 !important;
  border:1px solid var(--sf-line) !important;
  border-radius:2px !important;
  background:var(--sf-bg) !important;
  overflow:hidden !important;
  box-shadow:none !important;
  transition:border-color .25s var(--sf-ease);
}
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]):hover{
  border-color:rgba(23,20,17,.45) !important;
}
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]).swatch-selected{
  border-color:var(--sf-ink) !important;
  box-shadow:inset 0 0 0 1px var(--sf-ink) !important;
}
/* the photo fills the top of the rectangle */
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) img{
  display:block !important;
  width:100% !important; height:104px !important;
  object-fit:cover !important;
  border:0 !important; border-radius:0 !important; margin:0 !important;
}
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) .swatch-image,
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) .swatch-custom-image,
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) .swatch-image-wrapper,
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) [class*="swatch-image"]{
  display:block !important;
  width:100% !important; height:104px !important;
  margin:0 !important; padding:0 !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
}
/* if the wrapper holds a real <img>, let the img size the area instead */
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) .swatch-image:has(img),
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) .swatch-image-wrapper:has(img){
  height:auto !important;
}
/* colour name: quiet caption under the photo */
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) div.swatch-button-title-text{
  position:static !important;
  width:auto !important; height:auto !important;
  clip:auto !important; overflow:hidden !important;
  margin:0 !important;
  padding:7px 6px !important;
  border:0 !important;
  border-top:1px solid var(--sf-line-soft) !important;
  background:transparent !important;
  color:var(--sf-mute) !important;
  font-size:10.5px !important; font-weight:400 !important;
  letter-spacing:.01em !important; line-height:1.25 !important;
  text-align:center !important;
  text-transform:none !important; text-decoration:none !important;
  white-space:normal !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]).swatch-selected div.swatch-button-title-text{
  color:var(--sf-ink) !important; font-weight:500 !important;
}
/* sold out */
variant-swatch-king .swatch-item-unavailable:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]){ opacity:.4 !important; }
variant-swatch-king .swatch-item-unavailable:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) img{ filter:grayscale(1); }
variant-swatch-king .swatch-item-unavailable::after{ background:none !important; }
/* the app's own tick overlay */
variant-swatch-king div.star-set-btn.swatch-selected::before,
variant-swatch-king div.star-set-btn.swatch-selected::after{ display:none !important; }

/* ---------- 6. size / text options ---------- */
.variant-input-wrap{
  min-width:0 !important; max-width:100% !important;
  display:flex !important; flex-wrap:wrap !important;
  gap:8px !important; border:0 !important; padding:0 !important; margin:0 !important;
  justify-content:flex-start !important;
}
.variant__button-label{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:52px; height:44px;
  padding:0 14px !important; margin:0 !important;
  border:1px solid var(--sf-line) !important;
  border-radius:2px !important;
  background:transparent !important;
  color:var(--sf-ink) !important;
  font-size:.86rem !important; font-weight:400 !important;
  letter-spacing:.02em !important; line-height:1 !important;
  cursor:pointer;
  transition:border-color .22s var(--sf-ease), background .22s var(--sf-ease), color .22s var(--sf-ease);
}
.variant__button-label:hover{ border-color:rgba(23,20,17,.5) !important; }
.variant-input input:checked + .variant__button-label{
  background:var(--sf-ink) !important;
  border-color:var(--sf-ink) !important;
  color:var(--sf-bg) !important;
}
.variant__button-label.disabled,
.variant-input input:disabled + .variant__button-label{
  opacity:.3 !important; cursor:not-allowed; text-decoration:line-through;
}

/* ---------- 6c. native colour chips (variant photo + name) ---------- */
/* the generated theme.css still carries an older card-style .variant-chip;
   every geometry property here must therefore be explicit */
.variant-input-wrap{ align-items:stretch; }
.variant__button-label.variant-chip{
  flex-direction:row !important;
  width:auto !important; height:44px !important;
  gap:10px !important;
  min-width:0 !important;
  padding:0 14px 0 0 !important;
  border-radius:2px !important;
  overflow:hidden;
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:left !important;
  transform:none !important;
}
.variant-chip:hover{ transform:none !important; }
.variant-chip__media{
  display:block !important;
  width:42px !important; height:42px !important;
  flex:0 0 42px !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  background-size:cover !important; background-position:center !important;
  border-right:1px solid var(--sf-line-soft);
}
.variant-chip__media img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  border-radius:0 !important;
}
.variant-chip__name{
  font-size:.78rem !important; letter-spacing:.04em !important; line-height:1 !important;
  color:var(--sf-ink) !important; white-space:nowrap;
  max-width:none !important; overflow:visible !important;
}
/* selected chip: crisp ink outline, photo stays visible */
.variant-input input:checked + .variant__button-label.variant-chip{
  background:transparent !important;
  border-color:var(--sf-ink) !important;
  box-shadow:inset 0 0 0 1px var(--sf-ink) !important;
  color:var(--sf-ink) !important;
}
.variant-input input:checked + .variant__button-label.variant-chip .variant-chip__name{ font-weight:500; }
/* sold out chip */
.variant__button-label.variant-chip.disabled .variant-chip__media,
.variant-input input:disabled + .variant__button-label.variant-chip .variant-chip__media{ filter:grayscale(1); }
/* hide the theme's "Colore — Nero" echo next to the label; the chips carry the names */
.variant__label-info{ display:none !important; }

/* app-rendered text pills (sizes) — no image inside */
variant-swatch-king div.star-set-btn:not(:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"])){
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:52px !important; height:44px !important;
  padding:0 14px !important; margin:0 !important;
  border:1px solid var(--sf-line) !important;
  border-radius:2px !important;
  background:transparent !important;
  box-shadow:none !important;
  transition:border-color .22s var(--sf-ease), background .22s var(--sf-ease);
}
variant-swatch-king div.star-set-btn:not(:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"])):hover{
  border-color:rgba(23,20,17,.5) !important;
}
variant-swatch-king div.star-set-btn:not(:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"])) div.swatch-button-title-text{
  position:static !important; width:auto !important; height:auto !important;
  clip:auto !important; overflow:visible !important;
  margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important;
  color:var(--sf-ink) !important;
  font-size:.86rem !important; font-weight:400 !important;
  letter-spacing:.02em !important; text-transform:none !important;
  white-space:nowrap !important;
}
variant-swatch-king div.star-set-btn:not(:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"])).swatch-selected{
  background:var(--sf-ink) !important; border-color:var(--sf-ink) !important;
}
variant-swatch-king div.star-set-btn:not(:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"])).swatch-selected div.swatch-button-title-text{
  color:var(--sf-bg) !important;
}

/* ---------- 7. quantity ---------- */
.product__quantity{ margin:0 0 22px; }
.product__quantity > label{
  display:block;
  font-size:12px !important; letter-spacing:.1em !important;
  text-transform:uppercase !important; font-weight:500 !important;
  opacity:.5 !important; margin:0 0 12px !important;
}
.product__quantity .js-qty__wrapper{
  display:inline-flex !important; align-items:stretch;
  width:132px !important; max-width:132px !important; min-width:0 !important;
  height:44px;
  border:1px solid var(--sf-line) !important; border-radius:2px;
  background:transparent !important;
  overflow:hidden;
}
.product__quantity .js-qty__adjust{
  position:static !important; inset:auto !important;
  flex:0 0 40px; width:40px !important;
  display:flex !important; align-items:center; justify-content:center;
  padding:0 !important; margin:0 !important;
  background:none !important; border:0 !important;
  opacity:.55; transition:opacity .18s var(--sf-ease);
}
.product__quantity .js-qty__adjust--minus{ order:-1; }
.product__quantity .js-qty__adjust--plus{ order:1; }
.product__quantity .js-qty__adjust:hover{ opacity:1; background:none !important; }
/* higher specificity + !important: section 1 forces text-align:left on every
   element inside .product-block, which was pulling the number to the left */
.product-single__meta .product__quantity .js-qty__num,
.product__quantity .js-qty__num{
  order:0; flex:1 1 auto; width:auto !important; min-width:0 !important;
  height:100%; padding:0 !important; margin:0 !important;
  text-align:center !important; border:0 !important; background:none !important;
  font-size:.9rem; color:var(--sf-ink);
  -moz-appearance:textfield; appearance:textfield;
}
.product__quantity .js-qty__adjust .icon{ width:9px; height:9px; }

/* ---------- 7b. cart drawer + cart page quantity (same look as PDP) ---------- */
/* sf cart/drawer quantity */
.drawer .js-qty__wrapper,
.cart__item .js-qty__wrapper{
  display:inline-flex !important; align-items:stretch;
  width:100px !important; max-width:100px !important; min-width:0 !important;
  height:36px;
  border:1px solid var(--sf-line) !important; border-radius:2px;
  background:transparent !important;
  overflow:hidden;
}
.drawer .js-qty__adjust,
.cart__item .js-qty__adjust{
  position:static !important; inset:auto !important;
  flex:0 0 32px; width:32px !important;
  display:flex !important; align-items:center; justify-content:center;
  padding:0 !important; margin:0 !important;
  background:none !important; border:0 !important;
  color:var(--sf-ink) !important; fill:var(--sf-ink) !important;
  opacity:.55; transition:opacity .18s var(--sf-ease);
}
.drawer .js-qty__adjust--minus, .cart__item .js-qty__adjust--minus{ order:-1; }
.drawer .js-qty__adjust--plus,  .cart__item .js-qty__adjust--plus{  order:1; }
.drawer .js-qty__adjust:hover,
.cart__item .js-qty__adjust:hover{
  opacity:1; background:none !important;
  color:var(--sf-ink) !important; fill:var(--sf-ink) !important;
}
.drawer .js-qty__num,
.cart__item .js-qty__num{
  order:0; flex:1 1 auto; width:auto !important; min-width:0 !important;
  height:100%; padding:0 !important; margin:0 !important;
  text-align:center !important; border:0 !important; background:none !important;
  font-size:.85rem; color:var(--sf-ink) !important;
  -moz-appearance:textfield; appearance:textfield;
}
.drawer .js-qty__adjust .icon,
.cart__item .js-qty__adjust .icon{ width:9px; height:9px; }
.drawer .js-qty__num:active~.js-qty__adjust,
.drawer .js-qty__num:focus~.js-qty__adjust{ border-color:transparent !important; }

/* ---------- 8. buy buttons ---------- */
.product-single__meta .btn--add-to-cart,
.product-single__meta .add-to-cart{
  display:block; width:100%; height:58px;
  background:var(--sf-ink) !important;
  color:#fff !important;
  border:0 !important; border-radius:0 !important;
  padding:0 !important;
  letter-spacing:.12em !important; font-size:.95rem !important; font-weight:600 !important;
  text-transform:uppercase !important; text-align:center !important;
  transition:background .22s var(--sf-ease), opacity .22s var(--sf-ease);
}
.product-single__meta .btn--add-to-cart:hover,
.product-single__meta .add-to-cart:hover{ background:#000 !important; }
.product-single__meta .add-to-cart[disabled],
.product-single__meta .add-to-cart.disabled{ opacity:.35 !important; }
.shopify-payment-button__button--unbranded{ border-radius:2px !important; }
.shopify-payment-button{ margin-top:8px; }

/* ---------- 9. trust rows ---------- */
/* service info in the page's own label voice: small caps, tracked, one tight block */
.product-block--sales-point{ margin:0 0 14px !important; }
/* the last service line gets a full section gap before COLORE */
.product-block--sales-point:not(:has(+ .product-block--sales-point)){ margin-bottom:54px !important; }
.sales-points{
  display:flex; flex-direction:column; gap:0;
  margin:0 !important; padding:0 !important; list-style:none !important;
}
.sales-point{
  display:flex !important; align-items:center; gap:12px;
  margin:0 !important;
  font-size:12px !important; letter-spacing:.1em !important;
  text-transform:uppercase !important;
  line-height:1.6; font-weight:400 !important;
  color:rgba(23,20,17,.62) !important;
}
.sales-point strong{ font-weight:400 !important; color:inherit !important; letter-spacing:inherit !important; }
/* hairline icon set drawn for SERAFINA — 18px, stroke 1.75 */
.sales-point-badge{ display:flex !important; flex:0 0 auto; align-items:center; }
.sales-point .icon{
  width:16px !important; height:16px !important;
  color:var(--sf-ink); opacity:.72;
}
/* the theme's base .icon rule paints fills on unknown classes — these are stroke-only */
.sales-point .icon,
.sales-point .icon *{ fill:none !important; stroke:currentColor !important; stroke-width:2.5 !important; }
/* ---------- Poste ribbon: the shipping line typeset inside the carrier's own lockup ---------- */
.sales-point:has(.sales-point-logo){
  position:relative;
  display:inline-flex !important; align-items:center;
  align-self:flex-start; width:auto;
  background:#EEDC00 !important;
  height:32px; padding:0 26px 0 14px;
  border-radius:2px;
  font-size:11px !important; letter-spacing:.12em !important;
  font-weight:600 !important;
  color:#0047BB !important;
  margin-right:30px !important;
}
.sales-point:has(.sales-point-logo) *{ color:#0047BB !important; font-weight:600 !important; }
.sales-point:has(.sales-point-logo) .sales-point-badge,
.sales-point:has(.sales-point-logo) .sales-point-logo{ display:none !important; }
.sales-point:has(.sales-point-logo)::after{
  content:"PT";
  position:absolute; right:-22px; top:50%;
  width:44px; height:44px; margin-top:-22px;
  border-radius:50%;
  background:#EEDC00; color:#0047BB;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; letter-spacing:.01em;
  animation:sf-poste-wobble 6s ease-in-out infinite;
  transform-origin:50% 55%;
}
@keyframes sf-poste-wobble{
  0%,86%,100%{ transform:rotate(0); }
  89%{ transform:rotate(-4deg); }
  92%{ transform:rotate(3deg); }
  95%{ transform:rotate(-1.5deg); }
  98%{ transform:rotate(0); }
}

/* official coloured Poste chip, sized to the caps line */
.sales-point-logo{
  height:15px !important; width:auto !important;
  border-radius:2px;
  margin-left:.5em; vertical-align:-3px;
}

}
.product-reassurance{
  margin-top:18px; padding-top:18px;
  border-top:1px solid var(--sf-line-soft);
}
.product-single__meta .product-reassurance__text,
.product-reassurance__text{
  font-size:.88rem; color:var(--sf-ink); margin:0 0 12px;
  text-align:center !important;
}
.product-single__meta .product-reassurance__icons,
.product-reassurance__icons{
  display:flex; flex-wrap:wrap; gap:6px;
  justify-content:center !important; opacity:.9;
}
.product-reassurance__icons .payment-icon{ height:20px !important; width:auto !important; }

/* ---------- 10. mobile ---------- */
@media (max-width:749px){
  .product-single__meta{ padding-top:20px; }
  .product-single__meta .product-block{ margin-bottom:40px; }
  variant-swatch-king,
  .variant-wrapper{ margin-bottom:40px; }
  variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]){ width:74px !important; }
  variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) img,
  variant-swatch-king div.star-set-btn:has(img, .swatch-image, .swatch-custom-image, .swatch-image-wrapper, [class*="swatch-image"]) [class*="swatch-image"]{ height:92px !important; }
  variant-swatch-king div.swatches ul.swatch-view{ gap:8px !important; }
  .variant__button-label{ min-width:48px; height:42px; padding:0 12px !important; }
  .variant__button-label.variant-chip{ height:42px !important; padding:0 12px 0 0 !important; gap:9px !important; }
  .variant-chip__media{ width:40px !important; height:40px !important; flex-basis:40px !important; }
  .product-single__title{ font-size:1.28rem; }
  .product__price{ font-size:1rem !important; }
}

@media (prefers-reduced-motion:reduce){
  variant-swatch-king .swatch-image,
  variant-swatch-king .swatch-custom-image,
  variant-swatch-king .swatch-image-wrapper,
  .variant__button-label{ transition:none !important; }
  .sales-point:has(.sales-point-logo)::after{ animation:none !important; }


}

/* ---------- 11. no Shop Pay, anywhere ---------- */
shop-pay-button,
shop-pay-wallet-button,
shopify-payment-terms,
.shopify-payment-terms,
.shopify-cleanslate,
[data-shopify="payment-button"],
.shopify-payment-button,
.shopify-payment-button__button--branded,
.shopify-payment-button__more-options,
.payment-buttons .shopify-payment-button,
.additional-checkout-buttons,
.dynamic-checkout__content,
[data-testid="Checkout-button-shop_pay"]{
  display:none !important;
}
/* the add-to-cart button is now the only CTA — make it primary */
.payment-buttons{ display:block !important; }
.product-single__meta .add-to-cart.btn--secondary{
  background:var(--sf-ink) !important;
  border-color:var(--sf-ink) !important;
  color:var(--sf-bg) !important;
}

/* ---------- 12. order journey + FAQ ---------- */
.sf-journey-faq{
  max-width:620px; margin:0 auto;
  padding:26px 0 64px;
}
.sf-sect-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--sf-ink); opacity:.5;
  margin:0 0 22px;
}
.sf-journey{ margin-bottom:56px; }
.sf-steps{ list-style:none; margin:0; padding:0; }
.sf-step{
  position:relative; display:flex; align-items:flex-start; gap:16px;
  padding:0 0 30px 0; margin:0;
}
.sf-step:last-child{ padding-bottom:0; }
/* the rail */
.sf-step:not(:last-child)::before{
  content:""; position:absolute; left:15px; top:32px; bottom:2px;
  width:1px; background:var(--sf-line);
}
.sf-step__dot{
  flex:0 0 31px; width:31px; height:31px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--sf-ink); border-radius:50%;
  background:var(--sf-bg);
  font-size:10px; font-weight:600; letter-spacing:.06em;
  color:var(--sf-ink);
  position:relative; z-index:1;
}
.sf-step--carrier .sf-step__dot{
  background:#EEDC00; border-color:#EEDC00; color:#0047BB;
}
.sf-step__body{ display:block; padding-top:2px; }
.sf-step__title{
  display:block;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--sf-ink);
  margin:0 0 4px;
}
.sf-step__text{
  display:block;
  font-size:13.5px; line-height:1.55; color:var(--sf-mute);
}
/* FAQ — rounded card, editorial header, filter pills */
.sf-faq-eyebrow{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:500; color:var(--sf-bronze);
  text-align:center; margin:0 0 10px;
}
.sf-faq-heading{
  text-align:center; font-weight:400;
  font-size:1.7rem; line-height:1.2; color:var(--sf-ink);
  margin:0 0 30px;
}
.sf-faq-card{
  background:#fff;
  border:1px solid var(--sf-line-soft);
  border-radius:18px;
  padding:22px 26px 10px;
  box-shadow:0 18px 44px rgba(23,20,17,.05);
}
.sf-faq-pills{
  display:flex; gap:8px; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px 2px 18px; margin:0;
  border-bottom:1px solid var(--sf-line-soft);
}
.sf-faq-pills::-webkit-scrollbar{ display:none; }
.sf-pill{
  flex:0 0 auto;
  padding:9px 17px;
  border:1px solid var(--sf-line);
  border-radius:999px;
  background:transparent;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  color:var(--sf-ink); cursor:pointer;
  transition:background .2s var(--sf-ease), color .2s var(--sf-ease), border-color .2s var(--sf-ease);
}
.sf-pill:hover{ border-color:var(--sf-ink); }
.sf-pill.is-active{ background:var(--sf-ink); border-color:var(--sf-ink); color:var(--sf-bg); }
.sf-faq__item{ border-top:1px solid var(--sf-line-soft); }
.sf-faq__item:first-of-type{ border-top:0; }
.sf-faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 2px;
  font-size:14.5px; font-weight:500; color:var(--sf-ink);
  letter-spacing:.01em;
}
.sf-faq__item summary::-webkit-details-marker{ display:none; }
.sf-faq__item summary::after{
  content:"+"; flex:0 0 auto;
  font-size:18px; font-weight:300; line-height:1;
  color:var(--sf-ink); opacity:.5;
  transition:transform .25s var(--sf-ease);
}
.sf-faq__item[open] summary::after{ transform:rotate(45deg); }
.sf-faq__a{
  padding:0 26px 20px 2px;
  font-size:13.5px; line-height:1.6; color:var(--sf-mute);
}
@media (max-width:749px){
  .sf-journey-faq{ padding:10px 0 52px; }
  .sf-faq-card{ padding:16px 16px 6px; border-radius:14px; }
  .sf-faq-heading{ font-size:1.4rem; }
}

/* ---------- 13. live order forecast ---------- */
.clothing-story__step .sf-step-date{
  display:block; margin-top:7px;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--sf-bronze);
}
.sf-eta-line{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:0 0 34px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; color:var(--sf-ink); opacity:.75;
}
.sf-eta-dot{
  flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--sf-bronze);
  animation:sf-eta-pulse 2.4s ease-in-out infinite;
}
@keyframes sf-eta-pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .sf-eta-dot{ animation:none; } }

/* ---------- 14. story connector: graph flows down into the FAQ ---------- */
.sf-journey-faq{ padding-top:0; }
.sf-connector{
  display:flex; flex-direction:column; align-items:center;
  margin:0 0 28px;
}
.sf-connector__line{
  width:1px; height:70px;
  background:linear-gradient(to bottom, rgba(23,20,17,.04), var(--sf-line));
}
.sf-connector__halo{
  width:40px; height:40px; margin-top:-1px;
  border-radius:50%;
  background:rgba(139,85,71,.1);
  display:flex; align-items:center; justify-content:center;
}
.sf-connector__ring{
  width:16px; height:16px; border-radius:50%;
  border:5px solid var(--sf-bronze);
  background:transparent;
}

/* the final leg flies: bronze paper plane, oriented along the path */
.sf-plane{ fill:var(--sf-bronze); stroke:none; }

/* ---------- 15. the sky over the journey + flight distance ---------- */
.clothing-story__visual{ position:relative; }
.clothing-story__visual > svg,
.clothing-story__labels,
.clothing-story__steps,
.clothing-story__axis{ position:relative; z-index:1; }
.sf-sky{ position:absolute; inset:-4% -2%; pointer-events:none; z-index:0; opacity:.75; border-radius:28px; }
.sf-sky--alba{ background:radial-gradient(120% 90% at 50% 0%, rgba(233,196,124,.20), transparent 62%); }
.sf-sky--giorno{ background:radial-gradient(120% 90% at 50% 0%, rgba(23,20,17,.035), transparent 60%); }
.sf-sky--tramonto{ background:radial-gradient(120% 95% at 50% 0%, rgba(139,85,71,.17), rgba(139,85,71,.05) 48%, transparent 72%); }
.sf-sky--notte{ background:radial-gradient(120% 100% at 50% 0%, rgba(36,40,74,.17), transparent 72%); }
.sf-sky i{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#3A3F6E; opacity:.3;
  animation:sf-twinkle 4.5s ease-in-out infinite;
}
.sf-sky__moon{
  position:absolute; top:9%; right:7%; width:22px; height:22px; border-radius:50%;
  box-shadow:inset -7px 3px 0 0 rgba(54,59,102,.4);
}
@keyframes sf-twinkle{ 0%,100%{opacity:.12} 50%{opacity:.55} }
@media (prefers-reduced-motion:reduce){ .sf-sky i{ animation:none; } }
.sf-km{
  fill:var(--sf-bronze); letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; opacity:.85;
}
.sf-step-flight{
  display:block; margin-top:5px;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--sf-bronze); opacity:.85;
}

/* T-minus + odometer: tabular figures so the digits tick without jitter */
#sf-eta, .sf-step-flight{ font-variant-numeric:tabular-nums; }

/* ---------- 16. the living landscape ---------- */
.sf-scene .sf-vign{
  stroke:rgba(23,20,17,.5); stroke-width:1.2; fill:none;
  stroke-linejoin:round; stroke-linecap:round;
}
.sf-scene .sf-hill{ stroke:rgba(23,20,17,.18); stroke-width:1; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.sf-cloud path{
  fill:#FBFAF8;
  stroke:rgba(23,20,17,.3); stroke-width:1.1;
  stroke-linejoin:round;
}
.sf-cloudtrack{ animation:sf-cross 9s linear infinite; animation-delay:-3s; }
.sf-cloudtrack--2{ animation-duration:13s; animation-delay:-7s; }
.sf-cloudtrack--3{ animation-duration:11s; animation-delay:-9s; }
@keyframes sf-cross{
  from{ transform:translateX(calc(var(--sfw) * -0.2)); }
  to{ transform:translateX(calc(var(--sfw) * 1.2)); }
}
@media (prefers-reduced-motion:reduce){ .sf-cloudtrack{ animation:none; transform:translateX(30%); } }

/* ---------- 17. the diorama: perspective tilt + roomier step cards ---------- */
/* no 3D tilt: a perspective transform makes the browser rasterize the SVG and resample it,
   which blurred the whole landscape. Flat = true vector, crisp at any DPI. */
.template-product [id^="ClothingStory"] .clothing-story__chart{
  transform:none;
  shape-rendering:geometricPrecision;
}
@media (max-width:749px){
  .template-product [id^="ClothingStory"] .clothing-story__chart--mobile{
    width:calc(100vw + 140px) !important; max-width:none !important;
    margin-left:calc(50% - 50vw - 70px);
    overflow:hidden !important;
  }
}
/* cards stack in one grid cell: the container sizes to the tallest card,
   so injected dates/odometer text can never clip */
.template-product [id^="ClothingStory"] .clothing-story__steps{
  display:grid !important;
  height:auto !important; flex-basis:auto !important; min-height:0 !important;
}
.template-product [id^="ClothingStory"] .clothing-story__step{
  position:static !important;
  grid-area:1/1;
  inset:auto !important;
}

/* ---------- 18. cinematic finish: windows at dusk, film grain ---------- */
.sf-win{ fill:#C98A45; opacity:0; transition:opacity 1.2s ease; }
.sf-tod-tramonto .sf-win,
.sf-tod-notte .sf-win{ opacity:.65; }
.sf-sky::after{
  content:""; position:absolute; inset:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.5"/></svg>');
  opacity:0; display:none; border-radius:inherit;
  /* texture fades out before the labels/steps so no rectangle edge is visible around the scene */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 28%, transparent 68%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:linear-gradient(to bottom, #000 0%, #000 28%, transparent 68%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
/* same soft edges for the tint itself */
.sf-sky{
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* birds in flight: the flock crosses the sky, each bird beats its wings */
.sf-birds{ animation:sf-fly 26s linear infinite; }
@keyframes sf-fly{
  0%{ transform:translateX(calc(var(--sfw) * -0.08)); }
  100%{ transform:translateX(calc(var(--sfw) * 1.08)); }
}
.sf-bird{
  transform-box:fill-box; transform-origin:center;
  animation:sf-flap .6s ease-in-out infinite;
}
@keyframes sf-flap{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.5); } }
@media (prefers-reduced-motion:reduce){ .sf-birds,.sf-bird{ animation:none; } }

/* ---------- 19. mobile stage budget: everything fits one phone screen ---------- */
@media (max-width:749px){
  .template-product [id^="ClothingStory"] .clothing-story__eyebrow{ margin-bottom:6px !important; font-size:10px !important; }
  .template-product [id^="ClothingStory"] .clothing-story__heading{ font-size:1.42rem !important; line-height:1.18 !important; margin-bottom:4px !important; }
  .template-product [id^="ClothingStory"] .clothing-story__intro{ display:none !important; }
  .template-product [id^="ClothingStory"] .clothing-story__header{ margin-bottom:2px !important; }
  .template-product [id^="ClothingStory"] .clothing-story__step{ padding:16px 46px 15px 18px !important; }
  .template-product [id^="ClothingStory"] .clothing-story__step p{ font-size:12px !important; line-height:1.45 !important; }
  .template-product [id^="ClothingStory"] .clothing-story__step h3{ font-size:19px !important; margin-bottom:5px !important; }
  .template-product [id^="ClothingStory"] .clothing-story__steps{ margin-top:8px !important; }
  .template-product .sf-step-date, .template-product .sf-step-flight{ font-size:9.5px !important; }
}