/* =========================================================================
   SUB. — one bar and one footer for the whole site.

   The homepage (v7) and the generated pages used to ship two different
   chromes: the homepage put the wordmark on the left with five links beside
   it, while every inner page centred the wordmark, showed only "Contact us /
   FAQ" and grew a SHOP NOW pill. Walking from the homepage to /about
   rearranged the bar completely, and the footer swapped a four-column block
   for a collapsed accordion.

   This file is loaded last on the generated pages and gives them the v7
   markup's own styling. The homepage keeps its transparent bar over the hero
   photograph; here the same bar sits on a solid plum band, because these
   pages have no photograph behind it.

   HOUSE RULES: no rounded corners, no shadows, no glass/blur.
   ========================================================================= */

/* ------------------------------------------------------------------ bar --- */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  background:var(--plum-700,#4A3568);color:#fff;
}
/* the scalloped lace edge is a v1 signature and has no place in v7 */
.nav__paint{display:none}
.nav,
.nav[data-solid="true"],
body[data-nav="solid"] .nav{background:var(--plum-700,#4A3568);color:#fff}

.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);width:100%;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.75rem);
}
.nav__home{display:inline-flex;align-items:center;flex:0 0 auto}
.nav__logo{--logo-w:74px;--dot:var(--butter,#FCF1B9);color:#fff}
.nav[data-solid="true"] .logo__dot,
body[data-nav="solid"] .logo__dot{background:var(--butter,#FCF1B9)}

.nav__list{display:flex;gap:clamp(.9rem,2.2vw,1.9rem);list-style:none;margin:0;padding:0;min-width:0}
.nav__list a{
  font-size:.8125rem;font-variation-settings:'wght' 500;font-weight:500;
  opacity:.94;letter-spacing:0;text-transform:none;padding:0;
}
.nav__list a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
/* site.css draws a sliding rule under each link; v7 underlines on hover */
.nav__list a::after{display:none}
.nav__list a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:4px}

.nav__right{margin-left:auto;display:flex;align-items:center;gap:.85rem;min-width:0}
.nav__icon{
  display:grid;place-items:center;width:32px;height:32px;margin:0;
  color:#fff;background:none;border:0;cursor:pointer;
}
/* IC['bag'] is shared with the product rails, where .pr__bag paints it
   --ink-2; on a plum bar that reads as a disabled icon */
.nav__icon svg{width:18px;height:18px;color:#fff;stroke:currentColor}
.nav__shop{display:none}          /* the bag icon replaced the pill */

.burger{
  display:none;flex-direction:column;justify-content:center;align-items:stretch;
  gap:4px;width:24px;height:24px;background:none;border:0;padding:0;cursor:pointer;
}
.burger span{display:block;width:100%;height:1.6px;background:#fff;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

@media (max-width:820px){
  .nav__list{display:none}
  .burger{display:flex}
}

/* the drawer hangs off the bar, so it takes the bar's colour. It also stops
   at its own height: full-screen here vs a short panel on the homepage made
   the same menu feel like two different menus. */
/* The panel is `position:fixed` under the bar with no overflow and no
   max-height, and site.js locks page scroll while it is open, so on any
   phone the items below the fold could not be reached at all. */
.drawer{max-height:calc(100vh - var(--nav-h));
  max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--plum-900,#2E2140);color:#fff;
  inset:var(--nav-h) 0 auto;height:auto;padding-block:1.25rem 1.5rem}
.drawer__foot{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid rgb(255 255 255 / .2)}
.drawer a{color:#fff}
.drawer__foot a{color:rgb(255 255 255 / .82)}

/* --------------------------------------------------------------- footer --- */
/* no extra margin: every band above already carries its own bottom
   padding, and stacking both left a dead white strip above the footer */
.foot{background:var(--plum-700,#4A3568);color:#fff;padding-top:clamp(2.25rem,5vw,3.5rem)}
.foot__in{
  display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr)) minmax(0,1.4fr);
  gap:clamp(1.25rem,3vw,2.25rem);
}
.foot__in > *{min-width:0}
.foot__brand .logo{--logo-w:110px;--dot:var(--butter,#FCF1B9);color:#fff}
.foot__tag{margin:.9rem 0 0;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.foot__p{margin:.6rem 0 0;font-size:.8125rem;opacity:.86;max-width:24ch;line-height:1.55}
.socials{display:flex;gap:.5rem;margin-top:1.25rem}
.socials a{
  width:32px;height:32px;display:grid;place-items:center;color:#fff;
  background:rgb(255 255 255 / .16);transition:background-color .2s,transform .2s;
}
.socials a:hover{background:rgb(255 255 255 / .3);transform:translateY(-2px)}
.socials svg{width:16px;height:16px}
.fcol h3{margin:0 0 .85rem;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wght' 700;font-weight:700;color:#fff}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fcol a{font-size:.8125rem;opacity:.86;color:#fff}
.fcol a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

.nl p{margin:0 0 .9rem;font-size:.8125rem;opacity:.86;line-height:1.55}
.nl__form{display:flex;gap:.5rem;background:var(--paper,#FFFFFF);padding:.3rem .3rem .3rem 1rem;align-items:center}
.nl__form input{flex:1 1 auto;min-width:0;border:0;background:none;font-size:.8125rem;color:var(--ink)}
.nl__form input::placeholder{color:var(--ink-3,#8B7E97)}
.nl__form input:focus{outline:none}
.nl__go{
  width:32px;height:32px;background:var(--plum-700,#4A3568);color:#fff;border:0;cursor:pointer;
  display:grid;place-items:center;flex:0 0 auto;transition:background-color .2s}
.nl__go:hover{background:var(--plum-900,#2E2140)}
.nl__go svg{width:15px;height:15px}
.nl__msg{margin:.6rem 0 0;font-size:.75rem;opacity:.95;min-height:1em}
.nl__msg a{text-decoration:underline;color:#fff}
.nl__msg:empty{display:none}

.foot__bar{
  margin-top:clamp(2rem,4vw,3rem);padding:1.15rem 0;
  border-top:1px solid rgb(255 255 255 / .2);
  text-align:center;font-size:.75rem;opacity:.82;
}

@media (max-width:1000px){
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand,.nl{grid-column:1/-1}
}
@media (max-width:600px){
  .foot__in{grid-template-columns:minmax(0,1fr)}
}
.foot__bar a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot__bar a:hover{opacity:.8}


/* ---------- Collections submenu -----------------------------------------
   "New Arrivals" pointed at Kuromi, which is not the newest thing on the
   site, and sat next to "Collections" as a second, overlapping shop entry.
   It is gone; Collections opens the list instead. CSS-only, so it works with
   a keyboard (:focus-within) and needs no script on either the generated
   pages or the hand-written homepage.

   HOUSE RULES hold: square, flat, no radius, no shadow, no blur. */
.nav__has-sub{position:relative}
.nav__has-sub > a{display:inline-flex;align-items:center;gap:.4rem}
.nav__caret{width:0;height:0;border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;border-top:4px solid currentColor;
  opacity:.7;transition:transform .2s ease}
.nav__has-sub:hover .nav__caret,
.nav__has-sub:focus-within .nav__caret{transform:rotate(180deg);opacity:1}

.nav__sub{
  position:absolute;top:100%;left:-1.1rem;z-index:5;
  margin:0;padding:.55rem 0;list-style:none;min-width:17rem;
  background:var(--plum-900,#2E2140);
  border:1px solid rgb(255 255 255 / .16);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* the bar is 76px tall and the item sits centred in it, so the pointer has a
   gap to cross — this pad keeps the panel hoverable on the way down */
.nav__sub::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px}
.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub li{margin:0}
.nav__sub a{
  display:block;padding:.5rem 1.1rem;font-size:.8125rem;line-height:1.35;
  color:#fff;opacity:.88;white-space:nowrap;
}
.nav__sub a:hover,.nav__sub a:focus-visible{opacity:1;background:rgb(255 255 255 / .1)}
.nav__sub li:first-child a{
  opacity:1;font-variation-settings:'wght' 600;font-weight:600;
  border-bottom:1px solid rgb(255 255 255 / .16);
  margin-bottom:.35rem;padding-bottom:.6rem;
}

/* no hover on a phone: the list is simply open inside the menu that the
   burger reveals, indented under its heading */
@media (max-width:820px){
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;border:0;background:none;padding:.35rem 0 .1rem;
    border-left:1px solid rgb(255 255 255 / .22);margin-left:.15rem}
  .nav__sub::before{display:none}
  .nav__sub a{padding:.4rem 0 .4rem .9rem;white-space:normal}
  .nav__sub li:first-child a{border-bottom:0;margin-bottom:0;padding-bottom:.4rem}
  .nav__caret{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav__sub{transition:none}.nav__caret{transition:none}
}

/* the drawer is a flat list of anchors, so the collections are indented
   under their heading rather than nested in a <ul> */
/* site.css:275 styles `.drawer a` (0,1,1). `.drawer__sub` and `.link-u` are
   both (0,1,0), so they lost and every sub-link and social link drew at the
   35px Fraunces display size meant for the six top-level items — which is
   also what made the panel taller than the screen. Match on `.drawer a` so
   the weights compare. */
.drawer a.drawer__sub{font-family:var(--sans);padding-left:1rem;
  padding-block:.6rem;font-size:.9375rem;line-height:1.5;opacity:.8;
  font-variation-settings:normal;letter-spacing:0}
/* `:first-of-type` keys on the element, not the class, so it never matched the
   first sub-link; the adjacent sibling does. */
.drawer a:not(.drawer__sub) + a.drawer__sub{margin-top:-.25rem}
.drawer__foot a.link-u{font-family:var(--sans);font-size:var(--t-sm,.8125rem);
  padding-block:.75rem;line-height:1.5;letter-spacing:.08em;
  font-variation-settings:'wght' 600}

/* ---------- each collection page wears its own colour on the bar ----------
   Not plum: the bar, the Collections panel and the phone drawer take the
   collection's colour. The pages are generated and carry no page class, so
   the hook is the canonical link, which build.py always writes — extensionless,
   the way Cloudflare actually serves the page. Dark shades
   only, so the white logo, links and icons keep their contrast. */
:root:has(link[rel="canonical"][href$="/collection-kuromi"]){--bar:#1E1D22;--bar-deep:#0E0D10}
:root:has(link[rel="canonical"][href$="/collection-hello-kitty"]){--bar:#93304C;--bar-deep:#6E2038}
:root:has(link[rel="canonical"][href$="/collection-hk-garden"]){--bar:#43663A;--bar-deep:#2F4A28}
:root:has(link[rel="canonical"][href*="/collection-"]) .nav,
:root:has(link[rel="canonical"][href*="/collection-"]) body[data-nav="solid"] .nav{background:var(--bar)}
:root:has(link[rel="canonical"][href*="/collection-"]) .nav__sub,
:root:has(link[rel="canonical"][href*="/collection-"]) .drawer{background:var(--bar-deep)}

/* ---------- phones: tap targets + card rows that fit ------------------------
   The burger drew at 24×15 / 24×24 — under the 44px a thumb needs. The hit
   area grows, the three lines stay the same size. And a collection card's
   name + badge share one row; in a two-up grid on a phone the badge ran
   past the card (and past the screen), so the row may wrap. */
.burger{box-sizing:content-box;padding:14px 10px;margin:-14px -10px;background:transparent;border:0;cursor:pointer}
@media (max-width:600px){
  .ccard__body{flex-wrap:wrap;row-gap:.45rem}
  .ccard__body .badge{max-width:100%;white-space:normal}
}

/* "Cookie settings" is a button (it opens the consent choices, it goes
   nowhere) dressed as the footer's other links */
.foot__cookie{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;
  padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.foot__cookie:hover{opacity:.8}
.foot__cookie:focus-visible{outline:2px solid currentColor;outline-offset:2px}