@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --plum:#4C1C56;
  --lavender:#D8BFEF;
  --paper:#FDFCF9;
  --ink:#211D24;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
}
h1,h2,h3,.display{
  font-family:Anton,"Arial Narrow",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}

/* Announcement bar */
.announce-bar{background:var(--plum);color:#fff;text-align:center;padding:9px 16px;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}

/* Header */
header.site{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid rgba(33,29,36,0.08);
  position:sticky;top:0;background:var(--paper);z-index:50;
}
header.site .logo{font-family:Anton,sans-serif;font-size:20px;letter-spacing:0.04em;}
header.site nav{display:flex;gap:28px;align-items:center;}
header.site nav a{font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;}
header.site .bag{display:flex;align-items:center;gap:8px;border:1px solid var(--ink);padding:8px 14px;font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;}
header.site .bag-count{background:var(--plum);color:#fff;border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;}
header.site .bag-count:empty{display:none;}

/* Buttons */
.btn{
  display:inline-block;background:var(--plum);color:#fff;
  font-family:"DM Sans",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:0.04em;text-transform:uppercase;
  padding:13px 17px;border:none;cursor:pointer;
}
.btn:hover{background:#3a1542;}
.btn.outline{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn.outline:hover{background:var(--ink);color:#fff;}
.btn.full{width:100%;text-align:center;padding:16px;font-size:15px;}
.btn:disabled{background:#c9c2cc;cursor:not-allowed;}

/* Hero (full-bleed split, no gap, matches the live site) */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--lavender);}
.hero-copy{padding:72px 56px;display:flex;flex-direction:column;justify-content:center;}
.hero-copy .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.14em;color:var(--plum);margin-bottom:16px;}
.hero-copy h1{font-size:56px;line-height:0.98;margin-bottom:22px;}
.hero-copy p{font-size:17px;max-width:440px;margin-bottom:28px;color:rgba(33,29,36,0.8);}
.hero-copy .ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;min-height:480px;}

/* Steps row (thin horizontal strip, paper bg) */
.steps-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:22px 0;border-bottom:1px solid rgba(33,29,36,0.1);}
.steps-row .intro{font-size:14px;color:rgba(33,29,36,0.7);}
.steps-row .steps-list{display:flex;gap:36px;flex-wrap:wrap;}
.steps-row .steps-list a{font-size:13px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;}
.steps-row .steps-list a:hover{text-decoration:underline;}
.steps-row .steps-list b{color:var(--plum);margin-right:8px;}

/* Reimagining / generic thin plum strip */
.plum-strip{background:var(--plum);color:var(--paper);padding:22px 0;}
.plum-strip .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.plum-strip p{font-size:18px;margin:0;}
.plum-strip p i{font-style:italic;}
.plum-strip a{font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;border-bottom:2px solid var(--paper);padding-bottom:2px;white-space:nowrap;}

/* Statement + facts (full-width text sections) */
.statement-section{padding:64px 0 32px;}
.statement-section .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.14em;color:var(--plum);margin-bottom:14px;}
.statement-section h2{font-size:40px;max-width:820px;margin-bottom:18px;}
.statement-section p{font-size:17px;color:rgba(33,29,36,0.75);max-width:600px;}
.statement-section .row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:32px 0 64px;border-top:1px solid rgba(33,29,36,0.1);margin-top:32px;}
.facts-grid .n{font-size:13px;font-weight:700;color:var(--plum);margin-bottom:8px;}
.facts-grid h4{font-size:16px;text-transform:uppercase;letter-spacing:0.02em;margin-bottom:8px;}
.facts-grid p{font-size:14px;color:rgba(33,29,36,0.7);margin:0;}

/* Promotion section (paper bg, 2-col with divider list) */
.promo-section{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:64px 0;align-items:start;}
.promo-section .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.14em;color:var(--plum);margin-bottom:14px;}
.promo-section h2{font-size:40px;}
.promo-list{display:flex;flex-direction:column;}
.promo-list .row{padding:14px 0;border-bottom:1px solid rgba(33,29,36,0.12);font-weight:700;color:var(--plum);font-size:16px;}
.promo-list a{margin-top:16px;font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;border-bottom:2px solid var(--plum);padding-bottom:2px;display:inline-block;}

/* Section headers */
.section-head{text-align:center;padding:24px 0 8px;}
.section-head .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.14em;color:var(--plum);}
.section-head h2{font-size:32px;margin-top:8px;}

/* Shop page hero + simple journey row + compact section header */
.page-hero-lavender{background:var(--lavender);padding:80px 56px;}
.page-hero-lavender .eyebrow{color:var(--plum);font-weight:700;letter-spacing:0.14em;font-size:13px;margin-bottom:14px;}
.page-hero-lavender h1{font-size:40px;max-width:640px;margin-bottom:14px;}
.page-hero-lavender p{max-width:560px;color:rgba(33,29,36,0.8);font-size:16px;}
.shop-journey{display:flex;gap:36px;flex-wrap:wrap;padding:20px 56px;border-bottom:1px solid rgba(33,29,36,0.1);}
.shop-journey p{margin:0;font-size:14px;font-weight:600;}
.shop-journey span{color:var(--plum);font-weight:700;margin-right:8px;}
.compact-header{padding:40px 56px 0;}
.compact-header .eyebrow{color:var(--plum);font-weight:700;letter-spacing:0.1em;font-size:13px;margin-bottom:6px;}
.compact-header p:not(.eyebrow){font-size:15px;color:rgba(33,29,36,0.7);}

/* Color-block section wrappers */
.block-lavender{background:var(--lavender);}
.block-lavender .eyebrow{color:var(--plum);}
.block-plum{background:var(--plum);color:var(--paper);}
.block-plum h1,.block-plum h2,.block-plum h3{color:var(--paper);}
.block-plum .eyebrow{color:var(--lavender);}
.block-plum p{color:rgba(253,252,249,0.82);}

/* UGC video gallery */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:32px 0 56px;}
.video-card{position:relative;}
.video-card video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--ink);}
.video-card .caption{padding:12px 2px 0;}
.video-card .caption h4{font-size:14px;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:4px;}
.video-card .caption p{font-size:13px;color:rgba(33,29,36,0.65);margin:0;}

/* Meet the brief */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px 0;}
.split img{aspect-ratio:1/1;object-fit:cover;}
.feature-list{display:flex;flex-direction:column;gap:22px;margin-top:20px;}
.feature-list .n{font-family:Anton,sans-serif;color:var(--plum);font-size:22px;}
.feature-list h4{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin:2px 0 4px;}
.feature-list p{margin:0;color:rgba(33,29,36,0.75);font-size:15px;}

/* Press feature */
.press-feature{padding:40px 0;text-align:center;}
.press-feature-list{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:20px;}
.press-item a{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:220px;}
.press-logo{height:28px;width:auto;object-fit:contain;}
.press-item p{font-size:14px;font-style:italic;color:rgba(33,29,36,0.75);margin:0;display:flex;align-items:center;gap:4px;}
.press-item svg{width:13px;height:13px;flex-shrink:0;}

/* Product grid (inline add-to-cart tiles, matching the live site) */
.shade-grid{background:var(--lavender);}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:32px 0 56px;}
.product-tile{background:var(--paper);display:flex;flex-direction:column;}
.product-colour-panel{position:relative;display:block;}
.product-colour-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);}
.product-colour-panel img{aspect-ratio:4/5;object-fit:cover;}
.product-colour-panel-label{position:absolute;top:14px;left:14px;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#fff;z-index:2;}
.product-colour-panel-name{position:absolute;bottom:38px;left:14px;right:14px;font-family:Anton,sans-serif;font-size:26px;line-height:1;color:#fff;z-index:2;}
.product-colour-panel-note{position:absolute;bottom:14px;left:14px;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;text-decoration:underline;color:#fff;z-index:2;}
.product-tile-copy{padding:14px 16px 0;font-size:14px;}
.product-tile-copy .row1{display:flex;justify-content:space-between;font-weight:700;}
.product-tile-copy .shade-name{display:block;color:rgba(33,29,36,0.6);font-size:13px;margin-top:2px;}
.product-bundle-callout{margin:10px 16px 0;padding:10px 12px;background:var(--lavender);}
.product-bundle-callout strong{display:block;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--plum);margin-bottom:6px;}
.bundle-rows{display:flex;flex-direction:column;gap:5px;}
.bundle-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:rgba(33,29,36,0.85);}
.bundle-row b{color:var(--ink);font-weight:700;white-space:nowrap;}
.product-tile-actions{display:flex;gap:10px;align-items:flex-end;padding:14px 16px 18px;margin-top:auto;}
.product-tile-actions label{display:flex;flex-direction:column;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;gap:4px;flex:1;}
.product-tile-actions select{padding:9px 8px;border:1px solid var(--ink);background:var(--paper);font-family:"DM Sans",sans-serif;font-size:13px;}
.product-tile-add{background:var(--plum);color:#fff;border:none;padding:10px 14px;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:0.03em;cursor:pointer;white-space:nowrap;}
.product-tile-add:disabled{background:#c9c2cc;cursor:not-allowed;}

/* Old simple shade card (kept for shop.html fallback use) */
.shade-card{border:1px solid rgba(33,29,36,0.1);}
.shade-card img{aspect-ratio:1/1;object-fit:cover;}
.shade-card .body{padding:16px;}
.shade-card .name{font-family:Anton,sans-serif;font-size:16px;}
.shade-card .price{font-weight:700;margin-top:4px;}

/* Product detail (matches the live /product/seamless-period-brief page) */
.product-page{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:0 0 60px;}
.product-gallery{background:var(--plum);padding:16px;}
.product-gallery-main{position:relative;background:#fff;}
.product-gallery-main img{aspect-ratio:4/5;object-fit:cover;width:100%;}
.product-gallery-tag{position:absolute;bottom:14px;right:14px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:5px 10px;}
.product-gallery-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;}
.product-gallery-thumbs img{aspect-ratio:1/1;object-fit:cover;cursor:pointer;border:2px solid transparent;background:#fff;}
.product-gallery-thumbs img.active{border-color:var(--paper);}

.product-info{padding:40px 0;}
.breadcrumb{font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:rgba(33,29,36,0.55);margin-bottom:18px;}
.breadcrumb a{text-decoration:underline;color:var(--ink);}
.stock-label{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--plum);margin-bottom:10px;}
.product-info h1{font-size:46px;line-height:0.98;margin-bottom:14px;}
.product-info .price{font-size:20px;font-weight:700;margin-bottom:20px;}
.pdp-bundle-box{background:var(--lavender);border:2px solid var(--plum);padding:16px 18px;margin-bottom:22px;}
.pdp-bundle-box strong{display:block;font-family:Anton,sans-serif;font-size:17px;letter-spacing:0.02em;margin-bottom:10px;}
.pdp-bundle-box .bundle-rows{gap:8px;}
.pdp-bundle-box .bundle-row{font-size:14.5px;color:rgba(33,29,36,0.9);}
.pdp-bundle-box .bundle-row b{font-size:15px;}
.product-info > p.desc{font-size:16px;color:rgba(33,29,36,0.8);margin-bottom:24px;}
.divider{border:none;border-top:1px solid rgba(33,29,36,0.12);margin:24px 0;}
.pdp-row-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.pdp-row-head .label{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.pdp-row-head .link{font-size:13px;font-weight:700;text-decoration:underline;}
.pdp-colour-name{font-size:14px;color:rgba(33,29,36,0.7);}
.pdp-swatches{display:flex;gap:12px;}
.pdp-swatches button{width:36px;height:36px;border-radius:50%;border:3px solid transparent;padding:0;cursor:pointer;}
.pdp-swatches button.active{border-color:var(--ink);}
.pdp-size-quantity{display:flex;gap:24px;align-items:flex-start;}
.pdp-sizes{display:flex;gap:8px;flex:1;}
.pdp-sizes button{flex:1;border:1px solid var(--ink);background:transparent;padding:14px 0;font-family:"DM Sans",sans-serif;font-weight:600;cursor:pointer;}
.pdp-sizes button.selected{background:var(--ink);color:#fff;}
.pdp-qty label{display:block;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:6px;}
.pdp-qty select{padding:13px 10px;border:1px solid var(--ink);background:var(--paper);font-family:"DM Sans",sans-serif;font-size:14px;min-width:64px;}
.pdp-size-guide-note{font-size:13px;color:rgba(33,29,36,0.6);margin-top:14px;}
.pdp-add-btn{width:100%;background:var(--plum);color:#fff;border:none;padding:18px;font-weight:700;font-size:15px;letter-spacing:0.03em;text-transform:uppercase;cursor:pointer;margin-top:20px;}
.pdp-add-btn:disabled{background:#c9c2cc;cursor:not-allowed;}
.pdp-add-note{font-size:13px;color:rgba(33,29,36,0.6);margin-top:12px;}
.pdp-facts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:15px;}
.pdp-facts li{padding-left:18px;position:relative;}
.pdp-facts li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--ink);}

/* Generic pre-footer CTA banner (appears on every page) */
.cta-banner{background:var(--plum);color:var(--paper);padding:64px 0;}
.cta-banner .eyebrow{color:var(--lavender);font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:14px;}
.cta-banner h2{color:var(--paper);font-size:40px;max-width:640px;margin-bottom:18px;}
.cta-banner a{font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;border-bottom:2px solid var(--paper);padding-bottom:3px;}

/* Bundle callout */
.bundle-block{background:var(--plum);color:var(--paper);padding:56px 0;margin-top:24px;}
.bundle-block .wrap{text-align:center;}
.bundle-block h2{color:var(--paper);font-size:32px;}
.bundle-block ul{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:10px;font-size:16px;}

/* Info pages: How It Works / Fit & Size / Care (shared template on the live site) */
.info-page-heading{background:var(--lavender);padding:90px 56px 60px;}
.info-page-heading .eyebrow{color:var(--plum);font-weight:700;letter-spacing:0.14em;font-size:13px;margin-bottom:14px;}
.info-page-heading h1{font-size:44px;margin-bottom:16px;max-width:640px;}
.info-page-heading p{max-width:560px;color:rgba(33,29,36,0.8);font-size:16px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px;padding:56px;max-width:900px;margin:0 auto;}
.info-card span{font-family:Anton,sans-serif;color:var(--plum);font-size:20px;display:block;margin-bottom:8px;}
.info-card h2{font-size:22px;margin-bottom:8px;}
.info-card p{font-size:15px;color:rgba(33,29,36,0.75);margin:0;}
.info-cta{background:var(--plum);color:var(--paper);text-align:center;padding:40px 0;}
.info-cta p{margin:0 0 10px;font-size:14px;color:rgba(253,252,249,0.75);}
.info-cta a{font-weight:700;font-size:15px;border-bottom:2px solid var(--paper);padding-bottom:2px;}

/* Cart / Checkout */
.cart-page{padding:40px 0 80px;}
.cart-line{display:grid;grid-template-columns:80px 1fr auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(33,29,36,0.1);}
.cart-line img{aspect-ratio:1/1;object-fit:cover;}
.cart-line .remove{font-size:13px;color:rgba(33,29,36,0.5);cursor:pointer;}
.cart-summary{margin-top:24px;max-width:380px;margin-left:auto;}
.cart-summary .row{display:flex;justify-content:space-between;padding:6px 0;font-size:15px;}
.cart-summary .row.total{font-weight:700;font-size:18px;border-top:1px solid var(--ink);margin-top:8px;padding-top:12px;}
.bundle-tag{background:var(--lavender);display:inline-block;padding:3px 10px;font-size:12px;font-weight:700;margin-top:6px;}
.empty-cart{text-align:center;padding:80px 0;}

/* Footer */
footer.site{background:var(--ink);color:var(--paper);padding:56px 0 32px;}
footer.site .logo{color:var(--paper);}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;}
footer.site .eyebrow{color:var(--lavender);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;}
footer.site h2{color:var(--paper);font-size:26px;margin-bottom:14px;}
footer.site h4{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;color:rgba(253,252,249,0.6);}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:rgba(253,252,249,0.85);}
footer.site .bottom{margin-top:40px;font-size:12px;color:rgba(253,252,249,0.5);display:flex;justify-content:space-between;border-top:1px solid rgba(253,252,249,0.12);padding-top:20px;}

@media (max-width:820px){
  .hero,.product-page{grid-template-columns:1fr;}
  .method-grid,.video-grid,.product-grid,.facts-grid{grid-template-columns:1fr 1fr;}
  .promo-section{grid-template-columns:1fr;}
  footer.site .cols{grid-template-columns:1fr;}
  header.site nav{gap:14px;font-size:12px;}
}
@media (max-width:560px){
  .video-grid,.product-grid,.facts-grid{grid-template-columns:1fr;}
}