/* =========================================================================
   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. */
.drawer{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}