/* v7 preview — shorter bands, a bar that stays, and the fitting-room motion.
   Loaded after home-v7.css on the homepage only. The hero is not touched:
   nothing here selects .hero or anything inside it.
   HOUSE RULES hold: square, flat, no radius, no shadow, no blur. */

/* ---------- the bar stays on screen -------------------------------------
   It used to be absolute, so it left with the hero. Now it is fixed: clear
   over the hero exactly as before, plum once the hero has gone by. */
.home-v7 .nav{position:fixed;transition:background-color .35s ease}
.home-v7 .nav.is-solid{background:var(--bar,var(--plum-700,#4A3568))}
.home-v7 main [id]{scroll-margin-top:var(--nav-h,76px)}

/* ---------- a collection band: the photographs fill the page -----------
   Full width, two across, as designed — never photos-left / shop-right.
   What changes is the height: at 4:5 the pair ran 899px tall on a 1440×900
   screen and went off the bottom. Now it is exactly the screen left under
   the bar and the title row, so the pair fills one page and nothing more. */
@media (min-width:1024px){
  .home-v7 .sub-edit .edit-image{aspect-ratio:auto;
    height:min(calc(100svh - var(--nav-h,76px) - 82px), 62.5vw)}
}

/* ---------- the characters -----------------------------------------------
   Each Kuromi colourway has its own sleeve embroidery pose; the same artwork
   sits on the line above the photographs and follows the colour on screen. */
.home-v7 .sub-edit .edit-photographs{position:relative}
/* the photographs' own height, per breakpoint — the card centres on it */
.home-v7 .sub-edit .edit-photographs{--imgh:calc(50vw * 1.25)}
@media (max-width:600px){.home-v7 .sub-edit .edit-photographs{--imgh:calc(50vw * 4 / 3)}}
@media (min-width:601px) and (max-width:1023px){.home-v7 .sub-edit .edit-photographs{--imgh:min(52vh,480px)}}
@media (min-width:1024px){.home-v7 .sub-edit .edit-photographs{--imgh:min(calc(100svh - var(--nav-h,76px) - 82px), 62.5vw)}}

/* the colour card: a white square in the middle of the pair — square
   corners, no shadow (house rules). Placed with left/top, never `translate`:
   GSAP folds a CSS translate into its own transform and resets it. */
.fx-card{--cs:clamp(132px,15vw,232px);position:absolute;z-index:3;
  width:var(--cs);height:var(--cs);left:calc(50% - var(--cs) / 2);top:calc(var(--imgh) / 2 - var(--cs) / 2);
  background:#fff;color:#32213f;display:grid;grid-template-rows:minmax(0,1fr) auto;
  padding:calc(var(--cs) * .1) calc(var(--cs) * .08) calc(var(--cs) * .09)}
.fx-card__char{display:grid;place-items:center;min-height:0}
.fx-card__char img{display:block;height:100%;width:auto;max-width:72%;object-fit:contain}
.fx-card__name{display:grid;overflow:hidden;text-align:center;white-space:nowrap;
  font-size:clamp(.625rem,.85vw,.8125rem);letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wght' 600;font-weight:600;padding-top:calc(var(--cs) * .05)}
.fx-card__name > span{grid-area:1 / 1}
/* the arrows sit on the card's side edges, level with the character */
.fx-card__btn{position:absolute;top:calc(50% - 16px - var(--cs) * .06);width:32px;height:32px;
  display:grid;place-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;
  transition:background-color .2s ease}
.fx-card__btn--prev{left:2px}.fx-card__btn--next{right:2px}
.fx-card__btn svg{width:17px;height:17px;transition:translate .25s cubic-bezier(.25,1,.5,1)}
.fx-card__btn:hover{background:#f3eff5}
.fx-card__btn--prev:hover svg{translate:-2px 0}.fx-card__btn--next:hover svg{translate:2px 0}
.fx-card__btn:focus-visible{outline:2px solid #32213f;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.fx-card__btn,.fx-card__btn svg{transition:none}}
.fx-char--box{position:static;z-index:2;width:clamp(92px,11vw,170px);
  grid-column:7 / 9;grid-row:2;align-self:end;justify-self:center;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:820px){
  .fx-char--box{grid-column:wrap-start / wrap-end;grid-row:3;align-self:start;justify-self:end;
    margin:calc(clamp(1.5rem,4vw,2.5rem) - 46px) 12px 0 0;width:96px}
}

/* ---------- the close: the photograph no longer sets the band's height ----
   The box-set plate is a 780×1170 portrait, so at full column width it
   pushed that band to ~930px. It fills its cell now instead of sizing it. */
.home-v7 .close__plate{position:relative}
.home-v7 .close__plate img{position:absolute;inset:0}
@media (min-width:821px){
  .home-v7 .close--boxset .close__plate{min-height:clamp(320px,36vw,540px)}
  .home-v7 .close--ledger .close__ledger{padding-block:clamp(2rem,3.6vw,3.25rem)}
}

/* ---------- motion pieces (only drawn when motion-v7.js runs) ------------ */
/* the dye: a sheet of the colourway's own colour over a photograph */
.fx-dye{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--dye,#B7CAE8)}
/* the active colour chip lifts, and its fabric bar thickens */
.home-v7 .edit-colour .edit-colour__tile{transition:translate .35s cubic-bezier(.25,1,.5,1)}
.home-v7 .edit-colour .edit-colour__tile::after{transition:height .35s cubic-bezier(.25,1,.5,1)}
.home-v7 .edit-colour.is-on .edit-colour__tile{translate:0 -4px}
.home-v7 .edit-colour.is-on .edit-colour__tile::after{height:10px}
.home-v7 .edit-colour.is-on .edit-colour__n{font-weight:600;font-variation-settings:'wght' 600}
/* the colour name under the look rolls to the next one */
.fx-roll{display:inline-grid;overflow:hidden;vertical-align:bottom}
.fx-roll > span{grid-area:1 / 1}
/* the rule under a collection title draws itself in */
.home-v7 .g-row-title{position:relative}
.fx-rule{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;
  transform-origin:left center;pointer-events:none}

/* ---------- phones + tablets: the colours are one row you swipe ----------
   Eight or nine chips wrapped to three rows and made a band ~1,060px on a
   844px phone (1,119px on a 768 tablet). One row, cut at the edge so it
   reads as "there is more". */
@media (min-width:601px) and (max-width:1023px){
  .home-v7 .sub-edit .edit-image{aspect-ratio:auto;height:min(52vh,480px)}
}
@media (max-width:1023px){
  .home-v7 .sub-edit .edit-shop{--shop-pad:28px;grid-template-columns:minmax(0,1fr) auto}
  /* a nowrap row sets its grid track's min-content width — without min-width:0
     the whole page lays out at ~870px and the phone zooms out */
  .home-v7 .sub-edit .edit-selection{min-width:0}
  .home-v7 .sub-edit .edit-colours{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;gap:10px;
    margin-inline:calc(var(--shop-pad) * -1);padding:6px var(--shop-pad) 4px;scroll-padding-inline:var(--shop-pad)}
  .home-v7 .sub-edit .edit-colours::-webkit-scrollbar{display:none}
  .home-v7 .sub-edit .edit-colour{flex:0 0 84px;width:84px;scroll-snap-align:start}
  .home-v7 .sub-edit .edit-colour__n{font-size:.75rem}
}
@media (max-width:600px){
  .home-v7 .sub-edit .edit-shop{--shop-pad:16px;grid-template-columns:minmax(0,1fr)}
}

/* the set shots are portraits cut to 4:5; on desktop the frame is nearly
   square, so hold the crop high and never cut a head */
.home-v7 .sub-edit .edit-figure--look .edit-image img{object-position:50% 12%}

/* Happy Hue and MediCafé have no character: the card holds a circle of the
   colour itself, outlined so the palest shades still read on white */
.fx-card__dot{display:block;width:62%;aspect-ratio:1;border-radius:50%;background:var(--dot);
  outline:1px solid rgb(0 0 0 / .1);outline-offset:-1px}
.fx-card--single .fx-card__name{padding-inline:0}

/* ---------- the heart: Hello Kitty and In the Garden ----------------------
   Same card, drawn as a white heart (an SVG under the content, so the heart
   is a shape, not a clipped box — nothing gets shaved off its edge). The
   content sits in the heart's wide upper body; the point is left empty. */
.fx-card--heart{--cs:clamp(150px,17vw,250px);
  height:calc(var(--cs) * .92);top:calc(var(--imgh) / 2 - var(--cs) * .46);
  background:var(--heart,#fff);transition:background-color .6s ease,color .6s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath fill='%23fff' d='M50 91C21 72 0 54 0 29 0 12 12 0 27 0c10 0 18 6 23 14C55 6 63 0 73 0c15 0 27 12 27 29 0 25-21 43-50 62Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath fill='%23fff' d='M50 91C21 72 0 54 0 29 0 12 12 0 27 0c10 0 18 6 23 14C55 6 63 0 73 0c15 0 27 12 27 29 0 25-21 43-50 62Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  padding:calc(var(--cs) * .2) calc(var(--cs) * .2) calc(var(--cs) * .31)}
.fx-card--heart .fx-card__char img{max-width:78%}
.fx-card--heart .fx-card__name{padding-top:calc(var(--cs) * .03)}
/* arrows ride the two lobes, where the heart is widest */
.fx-card--heart .fx-card__btn{top:calc(var(--cs) * .92 * .3 - 16px)}
.fx-card--heart .fx-card__btn--prev{left:calc(var(--cs) * .015)}
.fx-card--heart .fx-card__btn--next{right:calc(var(--cs) * .015)}
.fx-card--heart .fx-card__btn:hover{background:transparent}
.fx-card--heart .fx-card__btn:hover svg{scale:1.15}

/* In the Garden: all four embroideries at once, a 2×2 set, plus the line
   that explains it; a bigger heart so four characters still read on a phone */
.fx-card--garden{--cs:clamp(176px,20vw,290px);
  grid-template-rows:minmax(0,1fr) auto auto;padding-top:calc(var(--cs) * .1)}
.fx-card__four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  gap:calc(var(--cs) * .015) calc(var(--cs) * .04);width:100%;height:100%;min-height:0}
.fx-card__four img{width:100%;height:100%;max-width:none;object-fit:contain;min-height:0}
.fx-card__note{text-align:center;white-space:nowrap;padding-top:calc(var(--cs) * .025);
  font-size:clamp(.5rem,.62vw,.6875rem);letter-spacing:.12em;text-transform:uppercase;color:#7a6c80}
.fx-card--garden .fx-card__name{padding-top:calc(var(--cs) * .012)}

/* ---------- Kuromi: the card is a piece of cloth ---------------------------
   A white square finished on ALL FOUR sides with the v1 bar's lace — the same
   SVG tile (scallop + seven punched eyelets), flipped/rotated per side, eight
   scallops to a side. One solid centre plus four edge strips; the centre
   overlaps each strip's solid band, so no hairline shows where they meet. */
.fx-card--lace{--lobe:calc(var(--cs) / 8);--edge-h:calc(var(--lobe) * 0.4878);
  padding:calc(var(--cs) * .09 + var(--edge-h)) calc(var(--cs) * .08 + var(--edge-h)) calc(var(--cs) * .08 + var(--edge-h));
  /* one solid centre + four strips that are ONLY the scallop row (the v1
     tile cut to its lace), so each side meets the next at the corner */
  -webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2053.3%2026%22%3E%3Cg%20transform%3D%22translate%280%2026%29%20scale%281%20-1%29%20translate%280%20-69%29%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2053.3%2026%22%3E%3Cg%20transform%3D%22%20translate%280%20-69%29%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2053.3%22%3E%3Cg%20transform%3D%22matrix%280%201%20-1%200%2026%200%29%20translate%280%20-69%29%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2053.3%22%3E%3Cg%20transform%3D%22matrix%280%201%201%200%200%200%29%20translate%280%20-69%29%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
          mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2053.3%2026%22%3E%3Cg%20transform%3D%22translate%280%2026%29%20scale%281%20-1%29%20translate%280%20-69%29%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2053.3%2026%22%3E%3Cg%20transform%3D%22%20translate%280%20-69%29%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2053.3%22%3E%3Cg%20transform%3D%22matrix%280%201%20-1%200%2026%200%29%20translate%280%20-69%29%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2053.3%22%3E%3Cg%20transform%3D%22matrix%280%201%201%200%200%200%29%20translate%280%20-69%29%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  -webkit-mask-size:calc(100% - var(--edge-h) * 2 + 2px) calc(100% - var(--edge-h) * 2 + 2px),var(--lobe) var(--edge-h),var(--lobe) var(--edge-h),var(--edge-h) var(--lobe),var(--edge-h) var(--lobe);
          mask-size:calc(100% - var(--edge-h) * 2 + 2px) calc(100% - var(--edge-h) * 2 + 2px),var(--lobe) var(--edge-h),var(--lobe) var(--edge-h),var(--edge-h) var(--lobe),var(--edge-h) var(--lobe);
  -webkit-mask-position:center,top left,bottom left,top left,top right;
          mask-position:center,top left,bottom left,top left,top right;
  -webkit-mask-repeat:no-repeat,repeat-x,repeat-x,repeat-y,repeat-y;
          mask-repeat:no-repeat,repeat-x,repeat-x,repeat-y,repeat-y}
.fx-card--lace .fx-card__btn--prev{left:calc(var(--edge-h) + 2px)}
.fx-card--lace .fx-card__btn--next{right:calc(var(--edge-h) + 2px)}
.fx-card__note i{font-style:normal}
.fx-card--garden{padding-left:calc(var(--cs) * .16);padding-right:calc(var(--cs) * .16)}
/* phones: the heart narrows fast below its lobes, so the note takes two lines */
@media (max-width:600px){
  .fx-card--garden{--cs:170px}
  .fx-card__note{font-size:.5rem;line-height:1.35;letter-spacing:.1em}
  .fx-card__note span{display:block}.fx-card__note i{display:none}
}

/* ---------- connect with us ------------------------------------------------
   The three places people actually reach SUB., as one row of cards above the
   footer. HOUSE RULES: square, flat, a hairline, no shadow — the icon sits in
   a square tile, and the card warms to butter on hover. */
.connect{background:var(--cream,#F6F2EC);color:var(--ink,#241B33);
  padding:clamp(2.5rem,5vw,4rem) var(--edge,24px)}
.connect__in{max-width:var(--wrap,1280px);margin-inline:auto}
.connect__t{margin:0 0 clamp(1.25rem,2.4vw,1.9rem);font-family:var(--sans);font-size:clamp(1.05rem,1.8vw,1.5rem);
  font-weight:500;font-variation-settings:'wght' 500;letter-spacing:.14em;text-transform:uppercase}
.connect__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--rule,#B7A5CC);background:var(--paper,#fff)}
.connect__list li{min-width:0}
.connect__list li + li{border-left:1px solid var(--rule,#B7A5CC)}
.connect__card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;
  padding:clamp(18px,2vw,26px);height:100%;color:inherit;text-decoration:none;transition:background-color .2s ease}
.connect__card:hover{background:var(--butter,#FCF1B9)}
.connect__card:focus-visible{outline:2px solid var(--ink,#241B33);outline-offset:-4px}
.connect__ic{width:44px;height:44px;display:grid;place-items:center;background:var(--plum-900,#2E2140);color:#fff}
.connect__ic svg{width:21px;height:21px}
.connect__txt{display:grid;gap:4px;min-width:0}
.connect__name{font-size:1rem;font-weight:600;font-variation-settings:'wght' 600}
.connect__handle{font-size:.9375rem;color:var(--ink,#241B33)}
.connect__note{font-size:.8125rem;color:var(--ink-2,#584B66);margin-top:4px}
.connect__go{font-size:1.05rem;color:var(--ink-2,#584B66);transition:translate .2s ease}
.connect__card:hover .connect__go{translate:2px -2px}
@media (max-width:820px){
  .connect__list{grid-template-columns:1fr}
  .connect__list li + li{border-left:0;border-top:1px solid var(--rule,#B7A5CC)}
}
@media (prefers-reduced-motion:reduce){.connect__card,.connect__go{transition:none}}

/* the character is locked inside its slot: a tall pose (Whisper Snow, Cherry
   Blush) used to render taller than the slot and run into the name */
.fx-card__char{position:relative}
.fx-card__char > img{position:absolute;inset:0;margin:auto;width:72%;height:100%;max-width:none;object-fit:contain}
.fx-card--heart .fx-card__char > img{width:84%}

/* In the Garden: the heart IS the colour — it takes the scrub's own hex and
   holds only the four embroideries, bigger; no words */
.fx-card--garden{--cs:clamp(190px,22vw,310px);grid-template-rows:minmax(0,1fr);
  padding:calc(var(--cs) * .16) calc(var(--cs) * .15) calc(var(--cs) * .27)}
.fx-card--garden .fx-card__name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fx-card--garden .fx-card__four{gap:calc(var(--cs) * .01) calc(var(--cs) * .02)}
.fx-card--garden.is-dark{color:#fff}
@media (max-width:600px){.fx-card--garden{--cs:180px}}
@media (prefers-reduced-motion:reduce){.fx-card--heart{transition:none}}

/* ---------- colour chips are the colour itself ------------------------------
   The tile used to be a photo of the scrub; it is now a solid square of the
   colourway's hex (--chip, the same value the card and dialog use). The
   hairline keeps the palest shades visible on white; the chosen colour gets
   an ink ring instead of the old thicker fabric bar. */
.home-v7 .edit-colour__tile{aspect-ratio:1;background:var(--chip)}
.home-v7 .edit-colour__tile img,
.home-v7 .edit-colour__tile::after{display:none}
.home-v7 .edit-colour.is-on .edit-colour__tile{outline:2px solid var(--ink,#241B33);outline-offset:3px}
.home-v7 .edit-colour:hover .edit-colour__tile{translate:0 -3px}

/* ---------- the colours sit beside the name ---------------------------------
   Name + price | the colour chips | buy — one row, on every band. The chips
   are plain colour squares now, so they can be small; the row wraps only if
   a line has more colours than fit. Phones keep the stacked order. */
@media (min-width:601px){
  .home-v7 .sub-edit .edit-shop{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px clamp(24px,3vw,48px)}
  .home-v7 .sub-edit .edit-shop-heading{grid-column:1;grid-row:1}
  .home-v7 .sub-edit .edit-selection{grid-column:2;grid-row:1;border-top:0;padding-top:0;
    border-left:1px solid #e6e1e9;padding-left:clamp(20px,2.6vw,40px);min-width:0}
  .home-v7 .sub-edit .edit-buy{grid-column:3;grid-row:1;justify-self:end}
  .home-v7 .sub-edit .edit-selection>p{margin-bottom:12px}
}
@media (min-width:1024px){
  .home-v7 .sub-edit .edit-colours{flex-wrap:wrap;gap:12px 12px}
  .home-v7 .sub-edit .edit-colour{width:64px;gap:7px}
  .home-v7 .sub-edit .edit-colour__n{font-size:.6875rem;line-height:1.25}
}
@media (min-width:601px) and (max-width:1023px){
  .home-v7 .sub-edit .edit-colour{flex:0 0 60px;width:60px}
  .home-v7 .sub-edit .edit-selection>p span{display:none}
}
@media (min-width:1024px) and (max-width:1279px){
  .home-v7 .sub-edit .edit-colours{gap:10px 8px}
  .home-v7 .sub-edit .edit-colour{width:48px}
}

/* ---------- the collection title sits in the middle ------------------------
   Number + name centred on the band; the link keeps the right edge. On a
   phone there is no room for both on one line, so the link drops beneath
   the centred title. */
.home-v7 .sub-edit > .g-row-title{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.home-v7 .sub-edit > .g-row-title h2{grid-column:2;justify-content:center;text-align:center;max-width:none}
.home-v7 .sub-edit > .g-row-title .g-row-actions{grid-column:3;justify-self:end}
@media (max-width:600px){
  .home-v7 .sub-edit > .g-row-title{grid-template-columns:1fr;row-gap:10px;justify-items:center}
  .home-v7 .sub-edit > .g-row-title h2,
  .home-v7 .sub-edit > .g-row-title .g-row-actions{grid-column:1;justify-self:center}
}

/* ---------- In the Garden: four white hearts, one embroidery each ----------
   Any of the four can go on any colour, so they are shown as a set: a 2×2 of
   small white hearts, each holding one character. The arrows move outside
   the set, on small white squares, so they read over any photograph. The
   colour name stays for screen readers only. */
.fx-card--garden{--cs:clamp(230px,24vw,340px);--gap:10px;--side:40px;
  background:transparent;-webkit-mask:none;mask:none;padding:0 var(--side);
  height:calc((var(--cs) - var(--side) * 2 - var(--gap)) * .92 + var(--gap));
  top:calc(var(--imgh) / 2 - ((var(--cs) - var(--side) * 2 - var(--gap)) * .92 + var(--gap)) / 2)}
.fx-card--garden .fx-card__four{gap:var(--gap)}
.fx-heart{position:relative;display:block;min-width:0;min-height:0;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath fill='%23fff' d='M50 91C21 72 0 54 0 29 0 12 12 0 27 0c10 0 18 6 23 14C55 6 63 0 73 0c15 0 27 12 27 29 0 25-21 43-50 62Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath fill='%23fff' d='M50 91C21 72 0 54 0 29 0 12 12 0 27 0c10 0 18 6 23 14C55 6 63 0 73 0c15 0 27 12 27 29 0 25-21 43-50 62Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat}
.fx-heart img{position:absolute;left:18%;right:18%;top:17%;bottom:24%;width:64%;height:59%;object-fit:contain}
.fx-card--garden .fx-card__btn{background:#fff;top:calc(50% - 16px)}
.fx-card--garden .fx-card__btn--prev{left:0}.fx-card--garden .fx-card__btn--next{right:0}
.fx-card--garden .fx-card__btn:hover{background:#f3eff5}
@media (max-width:600px){.fx-card--garden{--cs:210px;--gap:6px;--side:34px}}

/* ---------- reels: the Kuromi films and the doctor reviews -----------------
   Replaces the film + ledger, the story plate and the Instagram strip.
   Films: dark plum field, heading left, a snap rail of 9:16 reels. Doctor
   reviews: cream field, three reels side by side. House rules: square
   corners, no shadow. */
.reels{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  align-items:end;padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,6vw,5.5rem) var(--edge,24px)}
.reels--film{background:var(--plum-900,#2E2140);color:#fff}
.reels--docs{background:var(--cream,#F6F2EC);color:var(--ink,#241B33);padding-right:var(--edge,24px)}
.reels__head{align-self:start;min-width:0}
.reels__kicker{margin:0 0 14px;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.reels__t{margin:0;font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.02em;
  font-size:clamp(2rem,4vw,3.4rem);font-variation-settings:'wght' 400,'SOFT' 20,'WONK' 1,'opsz' 144}
.reels__p{margin:18px 0 0;font-size:.9375rem;line-height:1.6;max-width:32ch;opacity:.82}
.reels__nav{display:flex;gap:8px;margin-top:28px}
.reels__arw{width:44px;height:44px;border:1px solid rgb(255 255 255 / .4);background:transparent;color:inherit;
  font-size:1.05rem;cursor:pointer;transition:background-color .2s,color .2s}
.reels__arw:hover{background:#fff;color:var(--plum-900,#2E2140)}
.reels__rail{list-style:none;margin:0;padding:0 var(--edge,24px) 0 0;display:flex;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;min-width:0}
.reels__rail::-webkit-scrollbar{display:none}
.reel{flex:0 0 clamp(200px,20vw,280px);scroll-snap-align:start}
.reels__rail--three{padding-right:0;overflow:visible}
.reels__rail--three .reel{flex:1 1 0;max-width:340px}
.reel__play{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;margin:0;
  background:#000;cursor:pointer;overflow:hidden;color:#fff}
.reel__play video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel__btn{position:absolute;left:14px;bottom:14px;width:44px;height:44px;display:grid;place-items:center;
  background:#fff;color:var(--plum-900,#2E2140);transition:opacity .25s,scale .25s}
.reel__btn svg{width:18px;height:18px;margin-left:2px}
.reel__play:hover .reel__btn{scale:1.08}
.reel__play.is-on .reel__btn{opacity:0}
.reel__sound{position:absolute;right:12px;bottom:14px;padding:6px 9px;background:rgb(0 0 0 / .55);font-size:.625rem;
  letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .25s}
.reel__play.is-on:not(.is-loud) .reel__sound{opacity:1}
.reel__play:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media (max-width:820px){
  .reels{grid-template-columns:1fr;padding-left:0;padding-right:0;gap:24px}
  .reels__head{padding-inline:var(--gutter,16px)}
  .reels__nav{display:none}
  .reels__rail,.reels__rail--three{padding:0 var(--gutter,16px);overflow-x:auto;scroll-padding-inline:var(--gutter,16px)}
  .reel,.reels__rail--three .reel{flex:0 0 62vw;max-width:none}
}
@media (prefers-reduced-motion:reduce){.reel__btn,.reel__sound,.reels__arw{transition:none}}

/* ---------- one band = one screen ------------------------------------------
   Title row + photographs + shop row fit exactly the height left under the
   bar, as in the owner's reference: the photographs take whatever the two
   rows leave (--chrome), never less than 300px. The shop row is tightened
   so the photographs keep as much of it as possible. */
@media (min-width:601px){
  .home-v7 .sub-edit{--chrome:calc(var(--nav-h,76px) + 83px + 138px)}
  .home-v7 .sub-edit .edit-shop{padding-block:18px 20px}
  .home-v7 .sub-edit .edit-photographs{--imgh:max(300px, calc(100svh - var(--chrome)))}
  .home-v7 .sub-edit .edit-image{aspect-ratio:auto;height:var(--imgh)}
}
.home-v7 .g-dialog-buy[hidden]{display:none}

/* the bar is 10px taller than the hero's --nav-h (86px); the hero keeps its
   own measure, so nothing inside it moves */
.home-v7 .nav{height:calc(var(--nav-h,76px) + 10px)}
.home-v7 main [id]{scroll-margin-top:calc(var(--nav-h,76px) + 10px)}

/* ---------- reels, v2: title on top, clips in a centred row ----------------
   No more text-left / clips-right. The heading block is centred above; the
   clips sit in one centred row (five films / three reviews) on desktop and
   become a swipe rail on phones. The play control is a soft round button in
   the middle of the frame. */
.reels{display:block;padding:clamp(3.5rem,6vw,6rem) var(--edge,24px)}
.reels__head{max-width:640px;margin:0 auto clamp(2rem,3.6vw,3rem);text-align:center}
.reels__p{margin-inline:auto;max-width:46ch}
.reels__rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:1360px;margin:0 auto;
  padding:0;overflow:visible;scroll-snap-type:none}
.reels__rail--three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
.reel,.reels__rail--three .reel{flex:none;max-width:none;min-width:0}
.reel__btn{left:50%;top:50%;bottom:auto;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;
  background:rgb(255 255 255 / .22);color:#fff;border:1.5px solid rgb(255 255 255 / .75)}
.reel__btn svg{width:22px;height:22px;margin-left:3px}
.reel__play:hover .reel__btn{background:rgb(255 255 255 / .34);scale:1.06}
@media (max-width:820px){
  .reels{padding-inline:0}
  .reels__head{padding-inline:var(--gutter,16px)}
  .reels__rail,.reels__rail--three{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    padding:0 var(--gutter,16px);scroll-padding-inline:var(--gutter,16px);max-width:none}
  .reel,.reels__rail--three .reel{flex:0 0 62vw}
  .reel__btn{width:58px;height:58px;margin:-29px 0 0 -29px}
}

/* doctor reviews: eight clips — a centred swipe rail, five in view on
   desktop, with round arrows under it (a two-row grid would double the
   section's height) */
.reels__rail--docs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  max-width:1360px;gap:14px}
.reels__rail--docs .reel{flex:0 0 calc((100% - 14px * 4) / 5);scroll-snap-align:start}
.reels--docs .reels__nav{display:flex;justify-content:center;gap:10px;margin-top:22px}
.reels--docs .reels__arw{border-radius:50%;border-color:rgb(36 27 51 / .3);color:var(--ink,#241B33)}
.reels--docs .reels__arw:hover{background:var(--ink,#241B33);color:#fff}
@media (max-width:820px){.reels__rail--docs .reel{flex:0 0 62vw}.reels--docs .reels__nav{display:none}}
.home-v7 .burger{box-sizing:content-box;padding:14px 10px;margin:-14px -10px;background:transparent;border:0;cursor:pointer}