/* refine.css — consistency layer on top of styles.css.
   Keeps the original layout, colours, icons and mockups; unifies type, buttons, labels and spacing. */

:root{
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-sans:var(--text);
}

/* ---------- typography: one display face, one text face ---------- */
body,button,input,select,textarea{font-family:var(--text)!important}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

h1,h2,h3,
.v12-product-caption strong,.cart-head b,.cart-item h4,
.serif,.page-hero h1,.story-page h1,.product-info h1,.section-title{
  font-family:var(--display)!important;
  font-weight:600!important;
  letter-spacing:-.02em!important;
  font-optical-sizing:auto;
  color:var(--v6-plum);
}
h1,.page-hero h1,.story-page h1{line-height:1.02!important}
h2{line-height:1.05!important}
h3{line-height:1.15!important;letter-spacing:-.01em!important}
.v6-hero h1{font-size:clamp(2.75rem,6vw,5.25rem)!important}
.v6-hero h1 em{font-style:italic;font-weight:500}
.v6-section-head h2,.v6-story-center h2,.v6-founder-copy h2{font-size:clamp(2.25rem,4.4vw,3.75rem)!important}
.page-hero h1,.story-page h1{font-size:clamp(2.5rem,5vw,4.25rem)!important}
.product-info h1{font-size:clamp(2.5rem,4.6vw,3.75rem)!important;margin-bottom:10px!important}
.v6-product-card h3{font-size:1.75rem!important}
.v6-ease-grid h3,.v6-side-note h3{font-size:1.25rem!important}
p{text-wrap:pretty}
h1,h2{text-wrap:balance}

/* body copy sizes on one scale */
.v6-hero-copy,.v6-section-head p,.v6-story-center p,.v6-founder-copy p,.page-hero p,.story-page-copy p{font-size:1.0625rem!important;line-height:1.6!important;color:var(--v6-muted)}
.v6-product-card p,.v6-side-note p,.v6-ease-grid p{font-size:.9375rem!important;line-height:1.55!important}

/* ---------- labels: pills, kickers, eyebrows share one style ---------- */
.v6-pill,.v6-kicker,.v6-card-label,.eyebrow,.announcement,.footer h5,.footer-light h5{
  letter-spacing:.06em!important;font-weight:600!important;
}
.v6-pill,.v6-kicker,.v6-card-label,.eyebrow{font-size:.72rem!important;text-transform:uppercase}
.v6-kicker{padding:8px 14px!important}
.eyebrow{color:var(--v6-pink)!important}
.announcement{font-size:.8rem!important}

/* ---------- buttons: one primary, one secondary, same size everywhere ---------- */
.btn{
  min-height:48px!important;padding:12px 22px!important;border-radius:999px!important;
  font-weight:600!important;font-size:.95rem!important;letter-spacing:0!important;line-height:1.2!important;
  border:1.5px solid var(--v6-plum)!important;color:var(--v6-plum);background:#fff!important;
  transition:background .2s,color .2s,box-shadow .2s!important;transform:none!important;
}
.btn:hover{box-shadow:0 8px 20px rgba(74,11,58,.12)!important}
.btn-dark{background:var(--v6-plum)!important;color:#fff!important}
.btn-dark:hover{background:var(--v6-plum2)!important}
.btn span{transition:transform .2s}
.btn:hover span{transform:translateX(2px)}
/* product page "Buy now": secondary style instead of the off-palette green */
.btn-buy{width:100%;margin-top:10px}
.v6-text-link{font-weight:600!important}

/* ---------- prices ---------- */
.was-price{color:var(--v6-muted);font-weight:400;text-decoration-thickness:1px;margin-right:2px;opacity:.8}
.v6-price-row strong{font-family:var(--text);font-weight:700!important;white-space:nowrap}
.v6-price-row strong .was-price{font-size:.95rem}
.v12-product-caption span .was-price{font-weight:500}
.price-big{font-family:var(--text)!important;font-weight:700!important}
.price-big .was-price{font-size:1.1rem;margin-right:6px}

/* ---------- home: cards & sections ---------- */
.v6-product-card{border-radius:24px!important}
.v6-card-actions{gap:10px!important}
.v6-card-actions .btn{flex:1}
.v12-combo-cta{font-weight:600!important}

/* "No pills" cards: keep text with its heading instead of pinned to the bottom */
.v6-ease-grid>div{min-height:0!important;justify-content:flex-start!important;gap:4px}
.v6-ease-grid p{margin-top:0!important}

/* benefits row: calmer weights */
.v6-benefits.v9-benefits b{font-weight:600!important}

/* photo section (new) */
.photo-section .v6-section-head{margin-bottom:28px}
.photo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:clamp(560px,56vw,760px)}
.photo-grid>:nth-child(1){grid-column:1;grid-row:1/3}
.photo-grid>:nth-child(2){grid-column:2;grid-row:1}
.photo-grid>:nth-child(3){grid-column:2;grid-row:2}
.photo-grid>:nth-child(4){grid-column:3;grid-row:1/3}
.photo-tile{position:relative;margin:0;border-radius:24px;overflow:hidden;background:var(--v6-blush);box-shadow:0 16px 36px rgba(74,11,58,.08)}
.photo-tile.tall{grid-row:span 2}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
a.photo-tile:hover img{transform:scale(1.03)}
.photo-tile span{position:absolute;left:14px;bottom:14px;background:#fff;color:var(--v6-plum);font-family:var(--display);font-weight:600;font-size:1.05rem;padding:7px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(74,11,58,.12)}

/* ---------- product page ---------- */
.gallery-thumbs{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.gallery-thumb{width:68px;height:82px;border-radius:14px;overflow:hidden;border:1.5px solid var(--v6-line);background:#fff9f7;padding:0;opacity:.75;transition:opacity .2s,border-color .2s}
.gallery-thumb:hover{opacity:1}
.gallery-thumb[aria-current="true"]{opacity:1;border-color:var(--v6-plum)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb.is-mockup img{object-fit:contain;padding:4px}
/* photos fill the stage edge to edge; mockups keep their padded look */
.product-mockup-stage.is-photo{padding:0!important}
.product-mockup-stage.is-photo .v10-gallery-image{object-fit:cover!important;border-radius:inherit}
.product-gallery-chip span{font-weight:600}
.feature-stamp .stamp-value{font-family:var(--display);font-weight:600}
.feature-stamp .stamp-value-small{font-family:var(--text);font-weight:700;letter-spacing:.02em}
.purchase-option b{font-weight:600}
.breadcrumb a:hover{color:var(--v6-plum)}

/* ---------- cart drawer ---------- */
.cart-thumb{padding:4px!important;overflow:hidden;background:#fff9f7!important}
.cart-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.cart-item .was-price{font-size:.8rem}

/* ---------- footer ---------- */
.footer-light a{font-weight:500}
.footer-bottom a:hover,.footer-light a:hover{color:var(--v6-plum)}

/* ---------- focus & motion ---------- */
:focus-visible{outline:2px solid var(--v6-pink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .photo-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
  .photo-grid>*{grid-column:auto!important;grid-row:auto!important}
  .photo-tile{aspect-ratio:4/5}
}
@media (max-width:560px){
  .photo-grid{gap:10px}
  .photo-tile{border-radius:18px}
  .photo-tile span{font-size:.9rem;left:10px;bottom:10px}
  .v6-card-actions{flex-wrap:wrap}
  .gallery-thumb{width:56px;height:68px}
}

/* header: hamburger only when the nav is collapsed */
@media (min-width:901px){.menu-btn{display:none!important}}
@media (max-width:900px){.header-actions{margin-left:auto}}

/* =========================================================
   Hero + mockup crops
   Frames match each mockup's own ratio and background (#f8ebe5),
   so pouches are never cut and edges blend in.
   ========================================================= */
:root{--mock-bg:#f8ebe5}

/* hero background: one soft centred wash, no off-centre blobs */
.v6-hero{min-height:0!important;padding:72px 0 40px!important;
  background:radial-gradient(ellipse 70% 55% at 50% 62%,#fde7ef 0,#fff4f7 55%,#fff 100%)!important}
.v6-hero-glow{display:none!important}
.v6-hero-copy{font-weight:400!important;max-width:600px!important;margin-top:20px!important}
.v8-hero-actions{margin-top:28px!important}

/* stage: notes | products | notes, vertically centred on the pouches */
.v9-stage-wrap{grid-template-columns:200px minmax(0,640px) 200px!important;gap:40px!important;align-items:center!important;margin:48px auto 0!important;max-width:1160px}
.v12-product-stage{min-height:0!important;padding:0!important;gap:22px!important;transform:none!important;margin:0!important}
.v12-hero-products{gap:24px!important;align-items:flex-start!important;max-width:640px!important}
.v12-hero-product{width:calc(50% - 12px)!important;max-width:300px;gap:14px!important}
.v12-hero-product:hover,.v12-hero-product:focus-visible{transform:translateY(-4px)!important}
.v12-product-image{height:auto!important;aspect-ratio:700/960;background:var(--mock-bg)!important;border:0!important;border-radius:24px!important;
  box-shadow:0 1px 2px rgba(74,11,58,.05),0 18px 40px rgba(74,11,58,.10)!important}
.v12-product-image img{object-fit:cover!important;width:100%!important;height:100%!important}
.v12-product-caption{display:flex!important;flex-direction:column;align-items:center!important;justify-content:flex-start!important;gap:4px!important;text-align:center;padding:0!important}
.v12-product-caption strong{font-size:1.3rem!important}
.v12-product-caption>span{font-size:.875rem!important;font-weight:500!important;color:var(--v6-muted)!important;margin:0!important}
.v12-product-caption>span [data-price]{color:var(--v6-plum);font-weight:600}
.v12-combo-cta{font-size:.875rem!important;padding:12px 20px!important}

/* side notes: same structure, width and rhythm on both sides */
.v9-side-note{gap:10px!important;padding:0!important;align-self:center!important}
.v9-side-note h3{margin:4px 0 0!important;text-wrap:balance}
.v9-side-note p{margin:0!important;font-size:.9rem!important}
.v9-side-icon{width:64px!important;height:64px!important}
.v9-side-icon img{width:60px!important;height:60px!important}
.v6-quote-mark{display:none!important}
.v6-chips{margin:4px 0!important}
.v6-chips span{font-weight:600!important;font-size:.75rem!important}

/* benefits row sits closer and cleaner under the stage */
.v6-benefits.v9-benefits{margin-top:48px!important}

/* story band pouches */
.v10-story-pack{aspect-ratio:700/960;height:auto!important;padding:0!important;background:var(--mock-bg)!important;border-radius:24px!important;transform:none!important;max-width:260px;width:100%;justify-self:center}
.v10-story-pack img{object-fit:cover!important}

/* product cards: whole pouch, consistent frame height */
.v6-product-card .v10-card-mockup{height:auto!important;aspect-ratio:1/1;padding:16px!important;background:var(--mock-bg)!important;box-shadow:none!important}
.v6-product-card .v10-card-mockup img{object-fit:contain!important}

/* product page stage */
.v10-gallery-stage{background:var(--mock-bg)!important;min-height:0!important;aspect-ratio:4/5;padding:28px!important}
.product-gallery-main{height:auto!important;padding:0!important;background:transparent!important;box-shadow:none!important}
.v10-gallery-image{object-fit:contain!important}
.product-mockup-stage.is-photo{padding:0!important}
.gallery-thumb.is-mockup{background:var(--mock-bg)}

@media (max-width:1100px){
  .v9-stage-wrap{grid-template-columns:160px minmax(0,560px) 160px!important;gap:24px!important}
}
@media (max-width:900px){
  .v6-hero{padding:48px 0 32px!important}
  .v9-stage-wrap{grid-template-columns:1fr!important;margin-top:36px!important}
  .v9-side-note{display:none!important}
  .v12-hero-products{gap:14px!important}
  .v12-hero-product{width:calc(50% - 7px)!important}
  .v6-benefits.v9-benefits{margin-top:36px!important}
}
@media (max-width:560px){
  .v6-hero{padding:36px 0 28px!important}
  .v8-hero-actions{display:grid!important;gap:10px!important}
  .v12-product-image{border-radius:18px!important}
  .v12-product-caption strong{font-size:1.1rem!important}
  .v12-product-caption>span{font-size:.78rem!important}
  .v12-combo-cta{font-size:.8rem!important}
}
.v9-side-note h3{font-size:1.2rem!important}

/* product cards: rows size to content (old fixed rows clipped the taller image) */
.v6-product-card{grid-template-rows:auto auto auto 1fr auto auto!important;row-gap:0!important}
.v6-product-card .v10-card-mockup{margin:0 0 18px!important;aspect-ratio:5/4}
.v6-product-card .v6-card-label{margin:0!important}
.v6-product-card h3{margin:8px 0 8px!important}
.v6-product-card p{margin:0 0 20px!important;overflow:visible!important}
.v6-product-card .v6-price-row{margin:0 0 14px!important;align-self:end}
@media (max-width:900px){.v6-product-card{grid-template-rows:auto!important}}
.v6-product-card .v10-card-mockup{position:relative;display:block!important;padding:0!important}
.v6-product-card .v10-card-mockup img{position:absolute;inset:14px;width:calc(100% - 28px)!important;height:calc(100% - 28px)!important;object-fit:contain!important}
.feature-stamp .stamp-value{font-size:1.3rem!important;line-height:1.15!important}
.v12-product-caption .sep{font-style:normal}
.v12-product-caption [data-price]{white-space:nowrap}
@media (max-width:560px){
  .v12-product-caption .sep{display:none}
  .v12-product-caption [data-price]{display:block;margin-top:2px}
}

/* =========================================================
   Others vs us comparison
   ========================================================= */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vs-section .v6-section-head{margin-bottom:36px}
.vs-table{max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--v6-line);border-radius:28px;overflow:hidden;box-shadow:0 18px 44px rgba(74,11,58,.07)}
.vs-row{display:grid;grid-template-columns:190px 1fr 1fr;border-top:1px solid var(--v6-line)}
.vs-row:first-child{border-top:0}
.vs-topic{padding:22px 24px;font-weight:600;font-size:.9rem;color:var(--v6-plum);display:flex;align-items:center}
.vs-cell{padding:22px 24px;display:flex;align-items:flex-start;gap:12px;font-size:.95rem;line-height:1.45}
.vs-them{color:var(--v6-muted)}
.vs-us{background:#fdf0f5;color:var(--v6-ink);font-weight:500}
.vs-head .vs-cell{align-items:center;padding-top:20px;padding-bottom:20px;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.vs-head .vs-us img{height:38px;width:auto;display:block}
.vs-mark{flex:none;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;margin-top:-1px}
.vs-mark svg{width:14px;height:14px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vs-them .vs-mark{background:#f1ecee}
.vs-them .vs-mark svg{stroke:#a3949d}
.vs-us .vs-mark{background:var(--v6-plum)}
.vs-us .vs-mark svg{stroke:#fff}
.vs-cta{text-align:center;margin-top:32px}

@media (max-width:700px){
  .vs-table{border-radius:22px}
  .vs-row{grid-template-columns:1fr 1fr}
  .vs-topic{grid-column:1/-1;padding:16px 16px 0;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--v6-muted)}
  .vs-head .vs-topic{display:none}
  .vs-cell{padding:12px 16px 16px;font-size:.875rem;gap:8px;flex-direction:column}
  .vs-row:not(.vs-head) .vs-us{border-radius:14px;margin:10px 10px 12px 0;padding:12px}
  .vs-row:not(.vs-head) .vs-them{padding-top:22px}
  .vs-head .vs-cell{padding:16px}
  .vs-head .vs-us img{height:24px}
  .vs-mark{width:22px;height:22px}
}

/* nutrition table on product pages */
.nutri-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:2px 0 8px}
.nutri-table th,.nutri-table td{padding:8px 0;border-bottom:1px solid var(--v6-line);text-align:left;font-weight:400}
.nutri-table td{text-align:right;font-weight:600;color:var(--v6-plum);white-space:nowrap;padding-left:12px}
.nutri-table thead th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--v6-muted)}
.nutri-table thead th+th{text-align:right}
.nutri-note{font-size:.8rem;color:var(--v6-muted);margin:6px 0 0}
/* logo has intrinsic width/height attributes (prevents layout shift); keep its aspect ratio */
.logo img,.footer-logo img{height:auto!important;aspect-ratio:1540/586}