/* =========================================================================
   Cuddles WOMEN — editorial LAYOUT layer.
   Deliberately uses ONLY the Kids design tokens (colours, radius, shadow,
   Poppins font, .btn/.product-card/.product-grid components from style.css).
   No new palette, no new fonts. This file adds ONLY the editorial section
   layouts that Kids doesn't have (hero, silhouette tiles, split panels, detail
   edit, lookbook, filter shop, product detail, about). Everything is prefixed
   .wm-* and only used on /women/ pages, so Kids styling is never affected.
   ========================================================================= */

/* ---- sticky header (Women only) ----
   The Kids markup wraps <header.site-header> in <div#site-header>, which bounds
   the sticky element so it can't travel. Making the WRAPPER sticky gives it the
   full page as its containing block, so the compact header stays pinned. Scoped
   to /women/ (this file only loads there) — Kids is untouched. --wm-htop is set
   from the real header height by women.js so sub-bars pin flush under it. */
#site-header{position:sticky;top:0;z-index:300}

/* ---- shared bits ---- */
.wm-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);padding:20px 0 6px}
.wm-crumbs a{color:var(--muted)}
.wm-crumbs a:hover{color:var(--pink-deep)}
.wm-crumbs span{color:var(--border)}
.wm-crumbs .cur{color:var(--black);font-weight:600}
.wm-ed-head{margin-bottom:26px}
.wm-ed-head.between{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wm-ed-head .section-title{font-size:clamp(1.5rem,2.6vw,2rem)}
.wm-textlink{display:inline-block;font-weight:600;font-size:.85rem;color:var(--black);border-bottom:1.5px solid var(--pink-deep);padding-bottom:2px;transition:.2s}
.wm-textlink:hover{color:var(--pink-deep)}
.wm-textlink.light{color:#fff;border-color:#fff}

/* logo WOMEN tag (in the shared header) */
.logo-women{display:inline-flex;align-items:center;gap:9px}
.logo-women-tag{font-weight:700;letter-spacing:.22em;font-size:.62rem;text-transform:uppercase;color:var(--pink-deep);border-left:1.5px solid var(--border);padding-left:9px;line-height:1;white-space:nowrap}
@media(max-width:900px){.logo-women-tag{display:none}}

/* refined Collections dropdown promo image (shared header mega on Women) */
.mega-promo-img{position:relative;overflow:hidden;border-radius:var(--r);padding:0;min-height:210px;display:block}
.mega-promo-img img{width:100%;height:100%;object-fit:cover;object-position:top center;position:absolute;inset:0;transition:transform .5s ease}
.mega-promo-img:hover img{transform:scale(1.05)}
.mega-promo-img .mmp-cap{position:absolute;left:0;right:0;bottom:0;padding:20px 16px 15px;color:#fff;font-size:.8rem;background:linear-gradient(to top,rgba(17,17,17,.72),rgba(17,17,17,0))}
.mega-promo-img .mmp-cap b{display:block;font-size:1.05rem;font-weight:700}

/* ===================== HERO ===================== */
.wm-hero{background:linear-gradient(180deg,var(--pink-light) 0%,var(--cream) 62%);border-bottom:1px solid var(--border)}
.wm-hero-inner{display:grid;grid-template-columns:1.02fr 1.2fr;gap:44px;align-items:center;padding:52px 22px 56px}
.wm-hero-copy .eyebrow{margin-bottom:14px}
.wm-hero-title{font-size:clamp(2.3rem,5vw,3.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.04;margin-bottom:18px}
.wm-hero-text{color:var(--grey);font-size:1.02rem;max-width:440px;margin-bottom:26px}
.wm-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.wm-hero-media{position:relative;display:flex;justify-content:flex-end;align-items:flex-end;min-height:420px}
.wm-hero-main{width:74%;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.wm-hero-main img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wm-hero-detail{position:absolute;left:0;bottom:34px;width:40%;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);border:4px solid #fff;aspect-ratio:4/5}
.wm-hero-detail img{width:100%;height:100%;object-fit:cover;object-position:top center}
@media(max-width:860px){
  .wm-hero-inner{grid-template-columns:1fr;gap:24px;padding:30px 22px 40px}
  .wm-hero-media{min-height:0;justify-content:center}
  .wm-hero-main{width:82%;max-width:360px}
  .wm-hero-detail{width:38%;max-width:150px;left:6%;bottom:-14px}
}

/* ===================== SILHOUETTE TILES ===================== */
.wm-silhouettes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wm-tile{display:block;position:relative}
.wm-tile-img{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--lavender)}
.wm-tile-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.wm-tile:hover .wm-tile-img img{transform:scale(1.05)}
.wm-tile-cap{display:flex;align-items:center;justify-content:space-between;padding:12px 4px 0}
.wm-tile-cap span{font-weight:700}
.wm-tile-cap em{font-style:normal;font-size:.78rem;color:var(--pink-deep);opacity:0;transform:translateX(-4px);transition:.25s}
.wm-tile:hover .wm-tile-cap em{opacity:1;transform:none}
@media(max-width:760px){.wm-silhouettes{grid-template-columns:1fr 1fr;gap:12px}.wm-tile-cap em{opacity:1;transform:none}}

/* ===================== SPLIT PANELS ===================== */
.wm-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wm-split-panel{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;display:block}
.wm-split-panel img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .6s ease}
.wm-split-panel:hover img{transform:scale(1.04)}
.wm-split-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:linear-gradient(to top,rgba(17,17,17,.62),rgba(17,17,17,0) 60%);color:#fff}
.wm-split-in h3{font-size:1.5rem;margin:4px 0 12px}
@media(max-width:760px){.wm-split{grid-template-columns:1fr}}

/* ===================== DETAIL EDIT ===================== */
.wm-detail-edit{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
.wm-detail-imgs{position:relative}
.wm-detail-imgs .big{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5}
.wm-detail-imgs .big img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wm-detail-imgs .small{position:absolute;right:-14px;bottom:-14px;width:44%;border-radius:var(--r);overflow:hidden;border:5px solid #fff;box-shadow:var(--shadow-lg);aspect-ratio:1/1}
.wm-detail-imgs .small img{width:100%;height:100%;object-fit:cover}
.wm-detail-text h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:10px 0 14px;font-weight:800}
.wm-detail-text p{color:var(--grey);margin-bottom:22px}
@media(max-width:760px){.wm-detail-edit{grid-template-columns:1fr;gap:30px}.wm-detail-imgs .small{width:38%;right:6px;bottom:-10px}}

/* ===================== SHOP THE LOOK (3-up) ===================== */
.wm-looks3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wm-look3{display:block}
.wm-look3-img{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--lavender)}
.wm-look3-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.wm-look3:hover .wm-look3-img img{transform:scale(1.04)}
.wm-look3-cap{padding:14px 2px 0}
.wm-look3-cap .pc-name{font-size:1rem;margin-bottom:4px}
.wm-look3-cap .pc-price{margin-bottom:8px}
@media(max-width:760px){.wm-looks3{grid-template-columns:1fr;gap:16px}}

/* ===================== COLOUR EDIT ===================== */
.wm-colours{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wm-colour{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:22px 18px;border-radius:var(--r);border:1px solid var(--border);background:#fff;transition:.25s}
.wm-colour:hover{border-color:var(--pink-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.wm-colour span{font-weight:700}
.wm-colour em{font-style:normal;font-size:.78rem;color:var(--muted)}
.wm-colour::before{content:"";width:34px;height:34px;border-radius:50%;margin-bottom:8px;border:1px solid rgba(0,0,0,.08)}
.wm-colour-soft-neutrals::before{background:linear-gradient(135deg,#f6efe4,#fff)}
.wm-colour-pinks-mauves::before{background:linear-gradient(135deg,#f7a9cf,#c9a2c8)}
.wm-colour-blues-greens::before{background:linear-gradient(135deg,#2f4b7c,#66a37e)}
.wm-colour-rich-festive-colours::before{background:linear-gradient(135deg,#b21f2d,#e0a326)}
@media(max-width:760px){.wm-colours{grid-template-columns:1fr 1fr}}

/* ===================== SERVICE STRIP ===================== */
.wm-service{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:20px}
.wm-service-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 22px}
.wm-service-row>div{display:flex;flex-direction:column;gap:2px}
.wm-service-row .ic{color:var(--pink-deep);margin-bottom:6px}
.wm-service-row .ic svg{width:24px;height:24px}
.wm-service-row b{font-size:.95rem}
.wm-service-row span{color:var(--grey);font-size:.85rem}
.wm-service-row a{color:var(--pink-deep);font-weight:600}
@media(max-width:760px){.wm-service-row{grid-template-columns:1fr 1fr;gap:16px}}

/* ===================== SHOP (filters) ===================== */
.wm-shop{padding-bottom:60px}
.wm-shop-head{margin:6px 0 20px}
.wm-shop-head h1{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;margin-bottom:6px}
.wm-shop-head p{color:var(--grey);max-width:620px}
.wm-shop-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--border);position:sticky;top:calc(var(--wm-htop, 118px) - 1px);background:var(--cream);z-index:120;box-shadow:0 8px 16px -12px rgba(17,17,17,.18)}
.wm-filter-toggle{display:none}
.wm-chips-row{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.wm-active-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);background:var(--pink-light);color:var(--pink-deep);font-size:.78rem;font-weight:600;border:1px solid transparent}
.wm-active-chip span{font-size:1rem;line-height:1}
.wm-active-chip:hover{border-color:var(--pink-deep)}
.wm-clear-all{font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:underline;padding:5px 4px}
.wm-clear-all:hover{color:var(--pink-deep)}
.wm-count{font-size:.82rem;color:var(--muted);white-space:nowrap;font-weight:600}
.wm-sort{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);margin-left:auto;flex-shrink:0}
.wm-select{font-family:inherit;font-size:.85rem;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;color:var(--black)}
.wm-select:focus{outline:2px solid var(--pink-deep);outline-offset:1px}
.wm-shop-body{display:grid;grid-template-columns:232px 1fr;gap:30px;padding-top:26px;align-items:start}
.wm-filters{position:sticky;top:calc(var(--wm-htop, 118px) + 22px)}
.wm-filters-head{display:none}
.wm-fgroup{padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.wm-fgroup:last-child{border-bottom:none}
.wm-fgroup h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.wm-fopts{display:flex;flex-direction:column;gap:3px}
.wm-fopts.as-chips{flex-direction:row;flex-wrap:wrap;gap:8px}
.wm-fopt{text-align:left;padding:7px 4px;font-size:.9rem;color:var(--grey);border-radius:var(--r-sm);transition:.15s}
.wm-fopts:not(.as-chips) .wm-fopt:hover{color:var(--black);padding-left:8px}
.wm-fopts:not(.as-chips) .wm-fopt.on{color:var(--pink-deep);font-weight:700}
.wm-fopts.as-chips .wm-fopt{border:1px solid var(--border);padding:7px 13px;min-width:44px;text-align:center}
.wm-fopts.as-chips .wm-fopt.on{border-color:var(--black);background:var(--black);color:#fff}
.wm-fopts.as-chips .wm-fopt:hover{border-color:var(--black)}
.wm-results-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1099px) and (min-width:761px){.wm-shop-body{grid-template-columns:200px 1fr}.wm-results-grid{grid-template-columns:repeat(2,1fr)}}

/* mobile: filters become a bottom sheet */
@media(max-width:760px){
  .wm-filter-toggle{display:inline-flex}
  .wm-chips-row{order:3;flex-basis:100%;flex:none}
  .wm-shop-body{grid-template-columns:1fr;gap:0;padding-top:18px}
  .wm-filters{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:82vh;overflow:auto;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.22);transform:translateY(102%);transition:transform .3s ease;z-index:1600;padding:18px 20px 30px}
  .wm-filters.open{transform:none}
  .wm-filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .wm-filters-close{color:var(--muted)}
  .wm-results-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* ===================== PRODUCT DETAIL ===================== */
.wm-pd-wrap{padding-bottom:70px}
.wm-pd{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.wm-pd-gallery{position:sticky;top:calc(var(--header-h) + 16px)}
.wm-pd-main{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--lavender)}
.wm-pd-main img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wm-pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.wm-thumb{width:70px;height:88px;border-radius:var(--r-sm);overflow:hidden;border:1.5px solid var(--border);padding:0;background:none}
.wm-thumb img{width:100%;height:100%;object-fit:cover}
.wm-thumb.on{border-color:var(--black)}
.wm-pd-panel .pc-cat{color:var(--pink-deep);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;margin-bottom:8px}
.wm-pd-title{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;margin-bottom:12px;line-height:1.15}
.wm-pd-price{font-size:1.5rem;font-weight:800;color:var(--black);display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.wm-pd-price .old{font-size:1rem;color:var(--muted);text-decoration:line-through;font-weight:500}
.wm-pd-avail{font-size:.82rem;margin-bottom:20px}
.wm-pd-avail .in{color:var(--green);font-weight:600}
.wm-pd-avail .oos{color:var(--danger);font-weight:600}
.wm-pd-buy{display:flex;align-items:center;gap:12px;margin:14px 0 6px}
.wm-qty{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-pill);overflow:hidden}
.wm-qty button{width:38px;height:44px;font-size:1.2rem;color:var(--black)}
.wm-qty button:hover{background:var(--pink-light)}
.wm-qty span{min-width:34px;text-align:center;font-weight:700}
.wm-add{flex:1}
.wm-wish-btn{border:1.5px solid var(--border);border-radius:50%;width:46px;height:46px;flex-shrink:0}
.wm-wish-btn.active{color:var(--pink-deep);border-color:var(--pink-deep);background:var(--pink-light)}
.wm-pd-help{font-size:.82rem;color:var(--muted);margin:14px 0 4px}
.wm-pd-help a{color:var(--pink-deep);font-weight:600}
/* accordions */
.wm-acc{margin-top:22px;border-top:1px solid var(--border)}
.wm-acc-item{border-bottom:1px solid var(--border)}
.wm-acc-h{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:16px 2px;font-weight:600;font-size:.98rem;color:var(--black)}
.wm-acc-ic{transition:transform .25s;color:var(--muted)}
.wm-acc-ic svg{width:18px;height:18px}
.wm-acc-item.open .wm-acc-ic{transform:rotate(180deg)}
.wm-acc-b{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--grey);font-size:.92rem}
.wm-acc-item.open .wm-acc-b{max-height:460px;padding-bottom:16px}
.wm-acc-b p{margin-bottom:8px}
.wm-acc-b a{color:var(--pink-deep);font-weight:600}
/* sticky mobile buy bar */
.wm-buybar{position:fixed;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;background:#fff;border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.08);z-index:900}
.wm-buybar-name{font-size:.82rem;font-weight:600;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-buybar-price{font-weight:800}
.wm-buybar .btn{padding:11px 20px}
@media(max-width:860px){
  .wm-pd{grid-template-columns:1fr;gap:22px}
  .wm-pd-gallery{position:static}
  .wm-pd-main{aspect-ratio:3/4}
  .wm-pd-thumbs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .wm-thumb{flex:0 0 auto}
  .wm-buybar{display:flex}
  .wm-pd-wrap{padding-bottom:96px}
}

/* ===================== LOOKBOOK ===================== */
.wm-lookbook{padding-bottom:60px}
.wm-lookgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.wm-lookitem{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:26px}
.wm-lookimg{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;display:block}
.wm-lookimg img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.wm-lookitem:hover .wm-lookimg img{transform:scale(1.04)}
.wm-lookcap .pc-cat{color:var(--pink-deep);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;margin-bottom:6px}
.wm-lookcap .pc-name{font-size:1.05rem;margin-bottom:8px}
.wm-lookcap p{color:var(--grey);font-size:.9rem;margin-bottom:12px}
.wm-lookcap .pc-price{font-weight:800;margin-bottom:12px}
@media(max-width:900px){.wm-lookgrid{grid-template-columns:1fr}}
@media(max-width:520px){.wm-lookitem{grid-template-columns:1fr}}

/* ===================== ABOUT ===================== */
.wm-about{padding-bottom:60px}
.wm-about-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:16px 0 20px}
.wm-about-copy h1{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;line-height:1.1;margin:10px 0 16px}
.wm-about-copy p{color:var(--grey);margin-bottom:14px;max-width:520px}
.wm-about-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5}
.wm-about-img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wm-about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:34px 0;margin:30px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.wm-about-values .ic{color:var(--pink-deep)}
.wm-about-values .ic svg{width:30px;height:30px}
.wm-about-values h3{font-size:1.05rem;margin:10px 0 6px}
.wm-about-values p{color:var(--grey);font-size:.9rem}
@media(max-width:760px){.wm-about-hero{grid-template-columns:1fr;gap:22px}.wm-about-values{grid-template-columns:1fr;gap:18px}}

/* ===================== SEARCH ===================== */
.wm-search{padding-bottom:60px;min-height:50vh}
.wm-searchform{display:flex;gap:10px;max-width:540px;margin:8px 0 26px}
.wm-searchform .wm-select{flex:1;padding:12px 14px}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .wm-tile-img img,.wm-split-panel img,.wm-look3-img img,.wm-lookimg img,.wm-detail-imgs img,.mega-promo-img img,.wm-colour,.wm-acc-b,.wm-filters{transition:none!important}
}
