/* ============================================================
   Print Affairs — storefront skin

   Values taken from the Paper artboards "Print Affairs — Shop
   (P&S register)" and "— Product (P&S register)", which were in
   turn matched against partiesandsigns.com.

   Loaded AFTER styles.css and shop.css so it overrides the
   earlier editorial look. The behaviour (filters, cart,
   personalisation) is unchanged — this is purely the skin.
   ============================================================ */

:root {
  /* The reference site's layout, in Print Affairs' own colours.
     Its tan/sand accents are replaced by a pink family built from
     the logo's magenta: a soft tint for panels, the vivid ink for
     accents, and a darkened variant wherever text must stay
     legible at small sizes.

       --s-pink       panels, hero and band grounds     (tint)
       --s-pink-soft  hover washes, thumbnails          (tint)
       --s-pink-line  hairlines on pink grounds
       --s-accent     prices, links, active state       6.1:1 on white
       --s-accent-lit the vivid logo magenta — fills only, never text
  */
  --s-pink:       #FDEEF4;
  --s-pink-soft:  #FBE2EC;
  --s-pink-line:  #F3CEDC;
  --s-accent:     #B8005A;   /* darkened from the logo ink for contrast */
  --s-accent-lit: #FF0275;   /* the logo magenta itself */
  --s-cocoa:      #4A2C1E;   /* hero headline; 10.4:1 on the pink panel */

  --s-head:       #1F1B1D;
  --s-card-title: #2E282B;
  --s-body:       #554E51;
  --s-muted:      #8A8189;
  --s-faint:      #B8AFB4;
  --s-line:       #EAE4E7;
  --s-line-warm:  #EFE6EB;
  --s-ink:        #1A1614;

  /* The house faces, as everywhere else on the site. */
  --s-display: 'Fraunces', Georgia, serif;
  --s-sans:    'Archivo', system-ui, sans-serif;

  --s-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.09);
  --s-page:   1320px;
}

/* ---------- ground ---------- */
body.store {
  background: #FFFFFF;
  color: var(--s-body);
  font-family: var(--s-sans);
  font-size: 16px;
}

.store .wrap,
.store .nav__inner {
  max-width: var(--s-page);
  margin-inline: auto;
  padding-inline: 60px;
  width: 100%;
  box-sizing: border-box;
}

/* styles.css centres .wrap on --page-max (1440) with a 40px gutter,
   which would put content 120px in while the header sits 60px in.
   Rebind both so header and content share exactly one measure. */
body.store { --page-max: 1320px; --gutter: 60px; }

/* ============================================================
   HEADER — logo left, dominant search centre, icons right
   ============================================================ */
.store .nav {
  background: #FFFFFF;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: static;
}

.store .nav__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-block: 18px 0;
  min-height: 0;
}

.store .nav__brand { gap: 12px; width: auto; flex-shrink: 0; }

.store .nav__logo { width: 40px; height: 40px; }

.store .nav__wordmark {
  font-family: var(--s-display);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--s-head);
}

/* --- Search --------------------------------------------------
   The single loudest element in their header, and the thing that
   makes a 1,800-product catalogue navigable. */
.store-search {
  display: flex;
  flex: 1;
  height: 48px;
  border: 1px solid var(--s-line);
  max-width: 700px;
}

.store-search__input {
  flex: 1;
  border: 0;
  padding: 0 18px;
  font: inherit;
  font-size: 16px;
  color: var(--s-head);
  background: transparent;
  min-width: 0;
}
.store-search__input::placeholder { color: #9AA0A6; }
.store-search__input:focus { outline: 0; }
.store-search:focus-within { border-color: var(--s-accent); }

.store-search__go {
  width: 56px;
  border: 0;
  background: var(--s-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.store-search__go:hover { background: var(--s-accent-lit); }
.store-search__go svg { width: 18px; height: 18px; stroke: #FFFFFF; }

/* --- Utility icons ------------------------------------------- */
.store .nav__right { gap: 24px; }

.store-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  position: relative;
  color: var(--s-head);
}
.store-icon svg { width: 22px; height: 22px; }
.store-icon:hover { color: var(--s-accent); }

/* Only exists once the field collapses; see the 820px block. */
.store-icon--search { display: none; }

.store-icon__n {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--magenta-txt, #C4005A);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
}
.store-icon__n[data-n]:not([data-n="0"]) { display: inline-flex; }

/* --- Nav row ------------------------------------------------- */
.store .nav__links {
  display: flex;
  justify-content: center;
  gap: 46px;
  padding: 6px 0 20px;
  border-bottom: 1px solid var(--s-line);
  width: 100%;
}

.store .nav__link {
  font-family: var(--s-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--s-head);
  letter-spacing: 0;
}
.store .nav__link:hover { color: var(--s-accent); }

.store .nav-row {
  border-bottom: 1px solid var(--s-line);
  background: #FFFFFF;
}

/* ============================================================
   PAGE TITLE
   ============================================================ */
.store-head { padding: 64px 0 34px; }

.store-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--s-muted);
  padding-bottom: 14px;
}
.store-crumbs a { color: var(--s-muted); }
.store-crumbs a:hover { color: var(--s-accent); }
.store-crumbs .sep { color: #C4C4C4; }
.store-crumbs .here { color: var(--s-accent); }

.store-title {
  font-family: var(--s-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--s-head);
  margin: 0;
}

/* ============================================================
   BROWSE
   ============================================================ */
.store .browse {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
  padding: 0 0 90px;
}

/* --- Filter rail: bordered box of collapsed groups ----------- */
.store .rail {
  border: 1px solid var(--s-line-warm);
  border-radius: 5px;
  padding: 22px 20px;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
}

.store .rail__group { padding: 0; }

/* Each axis is a disclosure, closed by default — their pattern,
   and the only way five axes fit without a wall of checkboxes. */
.store .rail__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 14px;
  margin: 0;
  border: 1px solid var(--s-line);
  border-radius: 3px;
  font-family: var(--s-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--s-body);
  cursor: pointer;
  box-sizing: border-box;
  list-style: none;
}
.store .rail__legend::-webkit-details-marker { display: none; }
.store .rail__legend::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--s-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.store details[open] > .rail__legend::after { transform: rotate(180deg); }
.store details[open] > .rail__legend { border-color: #D9D9D9; }

.store .rail__panel { padding: 10px 4px 4px; }

.store .rail__opt {
  min-height: 38px;
  font-size: 15px;
  color: var(--s-body);
  gap: 9px;
}
.store .rail__opt input { accent-color: var(--s-accent); }
.store .rail__count { font-size: 13px; color: var(--s-muted); }

.store .rail__clear {
  color: var(--s-accent);
  font-size: 14px;
  min-height: 38px;
}

/* --- Results bar --------------------------------------------- */
.store .results__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 26px;
}

.store .results__count {
  font-size: 16px;
  color: #666666;
  font-weight: 400;
}
.store .results__count strong { font-weight: 400; color: #666666; }

.store .results__sort {
  width: 230px;
  height: 44px;
  padding: 0 15px;
  border: 1px solid var(--s-line);
  border-radius: 3px;
  font-family: var(--s-sans);
  font-size: 15px;
  color: var(--s-body);
  background-color: #FFFFFF;
}

/* --- Grid ---------------------------------------------------- */
.store .results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* --- Product card -------------------------------------------
   No border. A soft all-round glow, square-ish portrait image
   edge to edge, then centred title above a centred tan price. */
.store .product {
  border: 0;
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: var(--s-shadow);
  padding: 5px 5px 16px;
  overflow: visible;
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.store .product:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.store .product__media {
  aspect-ratio: 283 / 330;
  border-radius: 3px;
  background: var(--s-pink-soft);
}
.store .product:hover .product__media img { transform: none; }

.store .product__body {
  padding: 16px 12px 0;
  align-items: center;
  gap: 9px;
  text-align: center;
}

.store .product__name {
  font-family: var(--s-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 22px;
  color: var(--s-card-title);
  margin: 0;
}

/* The blurb is noise in a dense grid — their cards carry name
   and price only, and it reads far cleaner. */
.store .product__blurb,
.store .product__variants { display: none; }

.store .product__price-row {
  justify-content: center;
  padding-top: 0;
  margin-top: 0;
  gap: 5px;
}

.store .product__amount {
  font-family: var(--s-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--s-accent);
}

.store .product__from-label {
  font-size: 12px;
  color: var(--s-muted);
}

/* Sale badge: white pill, top-left, soft shadow. */
.store .product__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  font-weight: 500;
  color: var(--s-head);
}

/* --- Applied chips, kept but restyled to the palette --------- */
.store .applied__chip {
  background: var(--s-accent);
  border-color: var(--s-accent);
  color: #FFFFFF;
  border-radius: 3px;
  font-weight: 400;
}
.store .applied__clear { color: var(--s-accent); }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.store .detail {
  grid-template-columns: 640px minmax(0, 1fr);
  gap: 60px;
  padding: 46px 0 90px;
}

.store .detail__main {
  aspect-ratio: 640 / 740;
  border-radius: 3px;
  background: var(--s-pink-soft);
}

.store .detail__thumb {
  width: 96px;
  height: 96px;
  border-radius: 3px;
  border: 1px solid var(--s-line);
}
.store .detail__thumb.is-on { border: 2px solid var(--s-head); }

.store .detail__buy { padding-top: 34px; }

.store .detail__name {
  font-family: var(--s-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 46px;
  color: var(--s-head);
  margin: 0;
}

.store .detail__from {
  font-family: var(--s-sans);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--s-accent);
  margin: 14px 0 0;
}
.store .detail__from .cur {
  font-size: 15px;
  color: var(--s-muted);
  margin-left: 4px;
}

.store .detail__blurb {
  font-size: 16px;
  line-height: 28px;
  color: var(--s-body);
  margin: 18px 0 0;
}

.store .detail__turn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin: 22px 0 0;
  padding: 22px 0;
  border-top: 1px solid var(--s-line);
  border-bottom: 1px solid var(--s-line);
  font-size: 14px;
  color: var(--s-body);
}
.store .detail__turn strong {
  font-weight: 400;
  color: var(--s-muted);
  margin-right: 0;
}

.store .eyebrow { display: none; }

/* --- Buy box controls ---------------------------------------- */
.store .product__label {
  font-family: var(--s-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--s-head);
  margin: 26px 0 9px;
}

.store .product__select,
.store .pf__input {
  height: 52px;
  min-height: 52px;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  font-size: 16px;
  color: var(--s-body);
  background-color: #FFFFFF;
}
.store .pf__input::placeholder { color: var(--s-faint); }
.store .pf__input--note { height: auto; min-height: 96px; }

/* Their personalisation fields sit bare on the page rather than
   inside a boxed fieldset. */
.store .pf {
  border: 0;
  padding: 0;
  margin: 0;
}
.store .pf__legend { display: none; }
.store .pf__row { padding-bottom: 0; padding-top: 22px; }

.store .pf__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--s-head);
  margin-bottom: 9px;
}
.store .pf__hint {
  font-size: 14px;
  line-height: 22px;
  color: #777777;
  margin: -4px 0 8px;
}

.store .pf__file::file-selector-button {
  height: 44px;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
  background: #FFFFFF;
  font-size: 15px;
  color: var(--s-body);
}

.store .detail__qty { padding: 26px 0 0; }
.store .detail__qty .product__label { display: none; }

.store .line__qty {
  width: 118px;
  height: 52px;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  gap: 0;
}
.store .line__step { width: 38px; height: 50px; color: #666666; font-size: 18px; }
.store .line__n { flex: 1; font-size: 16px; color: #333333; }

/* --- The button: outline, fills on hover --------------------- */
.store .detail__actions { padding-top: 20px; gap: 14px; }

.store .btn--fill,
.store .detail__add {
  height: 62px;
  min-height: 62px;
  border-radius: 5px;
  border: 1.5px solid var(--s-ink);
  background: transparent;
  color: var(--s-ink);
  font-family: var(--s-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.store .btn--fill:hover,
.store .detail__add:hover {
  background: var(--s-ink);
  color: #FFFFFF;
}

.store .btn--quiet {
  height: 62px;
  min-height: 62px;
  border-radius: 5px;
  border: 1px solid var(--s-line);
  color: var(--s-body);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
}

.store .chips { padding-top: 26px; }
.store .chip {
  border-radius: 3px;
  border-color: var(--s-line);
  color: var(--s-body);
  font-size: 14px;
}
.store .chip:hover { border-color: var(--s-accent); color: var(--s-accent); }

.store .spec__cap {
  font-family: var(--s-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--s-head);
}
.store .spec td { border-top-color: var(--s-line); font-size: 15px; }

/* ============================================================
   DRAWER / BUY BAR — carried over, restyled
   ============================================================ */
.store .drawer__send,
.store button.drawer__send {
  border-radius: 5px;
  background: var(--s-ink);
  border: 1.5px solid var(--s-ink);
  font-family: var(--s-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.store .drawer__send:hover { background: #000000; }

.store .drawer__title {
  font-family: var(--s-display);
  font-weight: 400;
  color: var(--s-head);
}
.store .line__cost { color: var(--s-accent); }
.store .drawer__total-amt {
  font-family: var(--s-sans);
  font-weight: 500;
  color: var(--s-accent);
}

.store .buybar__price {
  font-family: var(--s-sans);
  font-weight: 500;
  color: var(--s-accent);
}
.store .buybar__add { border-radius: 5px; }

/* ============================================================
   RESPONSIVE
   Their grid is 3 / 3 / 2 — two across on phones, which square
   product shots carry comfortably.
   ============================================================ */
@media (max-width: 1180px) {
  .store .browse { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
  .store .detail { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; }
}

@media (max-width: 1024px) {
  .store .results__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .store .nav__links { gap: 28px; font-size: 15px; }
}

@media (max-width: 900px) {
  .store .detail { grid-template-columns: 1fr; gap: 28px; }
  .store .detail__main { aspect-ratio: 1 / 1; }
}

@media (max-width: 820px) {
  /* The category row collapses into the hamburger here, not at
     640px, so it never has to squeeze seven labels into a tablet
     width. The burger is revealed at the same breakpoint, because
     styles.css only shows it below 640 and the band between would
     otherwise have no navigation at all. */
  .store .nav-row,
  .store .nav__links { display: none; }
  .store .nav__toggle { display: flex; }

  /* The search field collapses to an icon and expands in place.
     A field spanning the whole bar was the loudest thing on a
     phone screen and pushed everything else down a row. */
  .store-icon--search { display: grid; }

  .store .store-search {
    display: none;
    order: 3;
    flex-basis: 100%;
    max-width: none;
    height: 44px;
    margin-top: 10px;
  }
  .store .store-search.is-open { display: flex; }
  /* styles.css only turns the panel into a column below 640px. */
  .store .menu:not([hidden]) { display: flex; }

  /* Without a gutter here the burger runs past the viewport edge
     in the 640 to 820 band and the page scrolls sideways. */
  .store .wrap,
  .store .nav__inner { padding-inline: 24px; }

  /* `.store .results__bar` is display:flex and outranks the mobile
     rule in shop.css, so the three controls wrapped into a 210px
     stack between the heading and the first product. Two columns,
     count underneath. */
  .store .results__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
    padding-bottom: 16px;
  }
  .store .filter-open  { grid-column: 1; grid-row: 1; }
  .store .results__sort { grid-column: 2; grid-row: 1; width: 100%; }
  .store .results__count { grid-column: 1 / -1; grid-row: 2; font-size: 15px; }

  .store .browse { grid-template-columns: 1fr; }
  /* The rail becomes a bottom sheet. `.store .rail` sets
     position:sticky and outranks shop.css's mobile rule, so the
     sheet has to be restated here or the rail stays in the flow
     and pushes the products a screen down the page. */
  .store .rail {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    max-height: 88dvh;
    border: 0;
    border-radius: 18px 18px 0 0;
    padding: 0 var(--gutter, 20px) calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 50px rgba(31, 27, 29, 0.18);
    transform: translateY(101%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.3s;
  }
  .store .rail.is-open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .store .results__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .store .wrap,
  .store .nav__inner { padding-inline: 16px; }

  .store .nav__inner { gap: 12px; flex-wrap: wrap; padding-block: 12px 0; }
  /* Search sizing now lives in the 820px block, which collapses it
     to an icon; restating it here would force it back open. */
  .store .nav__right { gap: 10px; margin-left: auto; }
  .store-icon { width: 36px; height: 36px; }


  .store-head { padding: 26px 0 20px; }
  .store-title { font-size: 30px; }

  .store .results__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .store .product { padding: 4px 4px 12px; }
  .store .product__body { padding: 11px 6px 0; gap: 6px; }
  .store .product__name { font-size: 15px; line-height: 20px; }
  .store .product__amount { font-size: 15px; }

  .store .detail__name { font-size: 27px; line-height: 35px; }
  .store .detail__from { font-size: 25px; }
  .store .results__sort { width: 100%; }
}

@media (max-width: 380px) {
  .store .results__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE
   Values from the Paper artboard "Print Affairs — Home
   (P&S register)".
   ============================================================ */

/* --- Hero: sand panel, copy left, tilted photos right -------- */
.store .hero-band {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 44px;
  padding: 64px 56px;
  background: var(--s-pink);
  border-radius: 4px;
}

/* Fraunces carries the hero, as it does everywhere else on the
   site. Two tiers: the product in large colour, the promise
   smaller and black beneath it, so the eye lands on what we sell
   before it reads why it matters. */
/* min-width:0 so a long word cannot push the copy column wider
   than its track and slide under the photo stack. */
.store .hero-band__copy { min-width: 0; }

.store .hero-band__title {
  font-family: var(--s-sans);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.store .hero-band__shout {
  font-family: var(--s-sans);
  font-size: 62px;
  font-weight: 600;
  line-height: 68px;
  letter-spacing: -0.03em;
  color: var(--s-cocoa);
}

.store .hero-band__quiet {
  font-family: var(--s-sans);
  font-size: 30px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.02em;
  color: var(--s-head);
  padding-top: 8px;
}

.store .hero-band__lede {
  font-size: 19px;
  line-height: 31px;
  color: var(--s-body);
  margin: 20px 0 0;
}

/* Square, solid — the reference never uses a pill. */
.store .btn-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  margin-top: 30px;
  background: var(--s-ink);
  color: #FFFFFF;
  font-family: var(--s-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background-color 0.2s ease;
}
.store .btn-square:hover { background: #000000; }

.store .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  margin-top: 28px;
  border: 1.5px solid var(--s-ink);
  border-radius: 5px;
  color: var(--s-ink);
  font-family: var(--s-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.store .btn-outline:hover { background: var(--s-ink); color: #FFFFFF; }

/* --- Polaroid stack ----------------------------------------- */
.store .polaroids {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.store .polaroid {
  width: 186px;
  flex-shrink: 0;
  margin: 0 -16px 0 0;
  padding: 10px 10px 30px;
  background: #FFFFFF;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}
.store .polaroid:last-child { margin-right: 0; }

.store .polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 166 / 210;
  object-fit: cover;
  background: var(--s-pink-soft);
}

/* Each leans differently — a straight row reads as a grid, not a
   handful of photos dropped on a table. */
.store .polaroid--a { rotate: -7deg; z-index: 1; }
.store .polaroid--b { rotate:  4deg; z-index: 3; }
.store .polaroid--c { rotate: -3deg; z-index: 2; }
.store .polaroid--d { rotate:  8deg; z-index: 1; }

/* --- Three steps -------------------------------------------- */
.store .steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 0 10px;
}

.store .steps__badge {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 26px;
  margin: 0;
  background: var(--s-pink);
  font-family: var(--s-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--s-head);
}

.store .steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  padding-top: 34px;
  width: 100%;
}

.store .steps__item { text-align: center; }

.store .steps__t {
  font-family: var(--s-display);
  font-size: 20px;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--s-head);
  margin: 0 0 10px;
}

.store .steps__b {
  font-size: 16px;
  line-height: 27px;
  color: var(--s-body);
  margin: 0;
}

/* --- Merchandising rows -------------------------------------- */
.store .home-row { padding-top: 60px; }

.store .home-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 26px;
}

.store .home-row__title {
  font-family: var(--s-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--s-head);
  margin: 0;
}

.store .home-row__more {
  font-size: 15px;
  color: var(--s-accent);
}
.store .home-row__more:hover { text-decoration: underline; }

.store .results__grid--four { grid-template-columns: repeat(4, 1fr); }

/* --- Occasion circles ---------------------------------------- */
.store .circles {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 22px;
}

.store .circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.store .circle__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  background: var(--s-pink-soft);
}

.store .circle__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.store .circle:hover .circle__img img { transform: scale(1.06); }

.store .circle__name {
  font-family: var(--s-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--s-head);
}
.store .circle:hover .circle__name { color: var(--s-accent); }

/* --- Why band ------------------------------------------------ */
.store .why-band {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  margin-top: 70px;
  padding: 52px 56px;
  background: var(--s-pink);
  border-radius: 4px;
}

.store .why-band__title {
  font-family: var(--s-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -0.015em;
  color: var(--s-head);
  margin: 0;
}

.store .why-band__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.store .why-band__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 17px;
  color: var(--s-card-title);
}

/* A small tan star, drawn rather than shipped as an asset. */
.store .why-band__list li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: var(--s-accent);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
                     79% 91%, 50% 70%, 21% 91%, 32% 57%,
                     2% 35%, 39% 35%);
}

.store .why-band__media {
  height: 330px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--s-pink-soft);
}
.store .why-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Promise strip ------------------------------------------- */
.store .promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 64px 0 80px;
}

.store .promises__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.store .promises__t {
  font-family: var(--s-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-head);
}

.store .promises__b { font-size: 15px; color: var(--s-body); }
.store .promises__b a { color: var(--s-accent); }

/* --- Footer, toned to the palette ---------------------------- */
.store .footer {
  background: #FFFFFF;
  border-top: 1px solid var(--s-line);
  color: var(--s-body);
}
.store .footer__wordmark {
  font-family: var(--s-display);
  font-weight: 400;
  color: var(--s-head);
}
.store .footer__heading {
  font-family: var(--s-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--s-head);
}
.store .footer__col a,
.store .footer__col span,
.store .footer__blurb { color: var(--s-body); font-size: 15px; }
.store .footer__col a:hover { color: var(--s-accent); }
.store .footer__base { border-top-color: var(--s-line); color: var(--s-muted); }

/* ============================================================
   HOMEPAGE — RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .store .circles { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .store .results__grid--four { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .store .hero-band,
  .store .why-band { grid-template-columns: 1fr; gap: 34px; padding: 40px 32px; }
  .store .hero-band__shout { font-size: 52px; line-height: 58px; }
  .store .hero-band__quiet { font-size: 26px; line-height: 34px; }
  .store .why-band__media { height: 260px; }
  .store .results__grid--four { grid-template-columns: repeat(2, 1fr); }
  .store .steps__grid { gap: 30px; }
}

@media (max-width: 640px) {
  /* Photos first on a phone: the products are the pitch, and a
     wall of type above the fold is a worse first screen than the
     work itself. The copy keeps its DOM order for screen readers
     and is moved visually. */
  .store .hero-band {
    margin-top: 28px;
    padding: 24px 20px 30px;
    gap: 24px;
  }
  .store .hero-band__copy { order: 2; }
  .store .polaroids { order: 1; }
  .store .hero-band__shout { font-size: 38px; line-height: 43px; letter-spacing: -0.03em; }
  .store .hero-band__quiet { font-size: 21px; line-height: 28px; padding-top: 4px; }
  .store .hero-band__lede { font-size: 17px; line-height: 28px; }
  .store .btn-square { width: 100%; }

  /* The stack shrinks rather than wraps — four small leaning
     photos still read as a pile; two big ones do not. */
  .store .polaroid { width: 42%; padding: 6px 6px 20px; margin-right: -12px; }
  .store .polaroid--c,
  .store .polaroid--d { display: none; }

  .store .steps { padding: 36px 0 0; }
  .store .steps__badge { font-size: 20px; min-height: 40px; padding: 0 18px; }
  .store .steps__grid { grid-template-columns: 1fr; gap: 26px; padding-top: 24px; }

  .store .home-row { padding-top: 40px; }
  .store .home-row__title { font-size: 25px; }

  .store .circles { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .store .circle__name { font-size: 14px; }

  .store .why-band { margin-top: 44px; }
  .store .why-band__title { font-size: 25px; line-height: 34px; }
  .store .why-band__list li { font-size: 16px; }
  .store .btn-outline { width: 100%; }

  .store .promises { grid-template-columns: 1fr; gap: 26px; padding: 44px 0 56px; }
}

@media (max-width: 380px) {
  .store .circles { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SEEN AT — marquee
   Venue and event types rather than client logos, so nothing
   here needs a licence or a client's permission.
   ============================================================ */
.store .marquee {
  margin-top: 70px;
  padding: 26px 0;
  background: var(--s-pink);
  overflow: hidden;
}

.store .marquee__label {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--s-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-accent);
}

.store .marquee__viewport {
  overflow: hidden;
  /* Fade the ends so the loop never looks cut off. */
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.store .marquee__track {
  display: flex;
  width: max-content;
  animation: pa-marquee 38s linear infinite;
}
.store .marquee:hover .marquee__track { animation-play-state: paused; }

.store .marquee__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.store .marquee__set span {
  font-family: var(--s-display);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--s-head);
  white-space: nowrap;
}

.store .marquee__set i {
  font-style: normal;
  color: var(--s-accent);
  padding: 0 22px;
  font-size: 13px;
}

@keyframes pa-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .store .marquee__track { animation: none; }
  .store .marquee__viewport { overflow-x: auto; }
}

/* ============================================================
   TRUST BADGES
   ============================================================ */
.store .trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 60px 0 0;
}

/* No card, no border. The medallions are the ornament; a pink box
   round each one fought with them. */
.store .trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 8px 16px 0;
}

/* The shared <defs> must be in the DOM but must not take space. */
.store .medal-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Gold medallions. Drawn inline so they stay crisp at any size
   and can be recoloured without touching an asset file. */
.store .medal {
  display: block;
  width: 150px;
  margin-bottom: 4px;
}
.store .medal svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(36, 31, 29, 0.22));
}

/* Medal lettering. Set in Archivo so it reads as stamped metal
   rather than as body copy, and letter-spaced to sit evenly on
   a dark ground. */
.store .medal text { fill: url(#paGold); font-family: 'Archivo', sans-serif; }

.store .medal__big {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.store .medal__mid {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.store .medal__sm {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
/* Cream on a deepened gold ribbon. Dark-on-gold measured well in
   the abstract but rendered washed out, because the text sits on
   the band's lightest stop rather than the mid-tone. */
.store .medal__rib {
  fill: #FFF6E2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.store .trust__t {
  font-family: var(--s-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--s-head);
}

.store .trust__b {
  font-size: 15px;
  line-height: 24px;
  color: var(--s-body);
}

@media (max-width: 900px) {
  .store .trust { grid-template-columns: 1fr; gap: 14px; padding-top: 44px; }
  .store .trust__item { padding: 22px 20px; }
  .store .marquee__set span { font-size: 20px; }
  .store .marquee__set i { padding: 0 15px; }
}

@media (max-width: 640px) {
  .store .marquee { margin-top: 44px; padding: 20px 0; }
  .store .marquee__set span { font-size: 17px; }
}

/* ============================================================
   BUY BOX — compact

   Six stacked full-width fields pushed the Add button 1,500px
   down the page. Short answers now sit two-up, the rhythm is
   tighter, and the optional extras collapse behind a toggle so
   the required path is short.
   ============================================================ */
.store .pf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  padding-top: 4px;
}

.store .pf__row {
  padding: 14px 0 0;
  min-width: 0;
}

/* Anything that needs room takes the full width. */
.store .pf__row[data-type="note"],
.store .pf__row[data-type="file"],
.store .pf__row--wide {
  grid-column: 1 / -1;
}

.store .pf__label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--s-head);
}

.store .pf__hint {
  font-size: 13px;
  line-height: 19px;
  margin: -2px 0 6px;
  color: var(--s-muted);
}

.store .product__select,
.store .pf__input {
  height: 46px;
  min-height: 46px;
  padding: 10px 13px;
  font-size: 16px;      /* 16px still, or iOS zooms on focus */
}

.store .pf__input--note {
  height: auto;
  min-height: 56px;
  padding: 10px 13px;
}

/* The two optional extras cost a full row each and are rarely
   used, so they sit below the fold of the form rather than
   between the customer and the button. */
.store .pf__row[data-type="note"],
.store .pf__row[data-type="file"] { padding-top: 12px; }
.store .pf__row[data-type="note"] .pf__label,
.store .pf__row[data-type="file"] .pf__label { margin-bottom: 4px; }

.store .pf__file { padding: 4px 0; font-size: 14px; }
.store .pf__file::file-selector-button {
  height: 40px;
  margin-right: 10px;
  padding: 0 14px;
  font-size: 14px;
}

/* Size label sits tight above its select rather than 26px away. */
.store .product__label { margin: 18px 0 6px; }

/* Quantity and the button share a row: the stepper is narrow and
   the button wants to be wide, so they cost one row, not two. */
.store .detail__qty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 0;
}

.store .detail__actions {
  display: flex;
  gap: 10px;
  padding-top: 12px;
}
.store .detail__add { flex: 1 1 auto; }
.store .btn--fill,
.store .detail__add,
.store .btn--quiet { height: 54px; min-height: 54px; }
.store .btn--quiet { flex: 0 0 auto; padding-inline: 20px; }

/* The full size table is reference material, not part of the
   decision, so it folds away. */
.store .spec-fold {
  margin-top: 20px;
  border-top: 1px solid var(--s-line);
  padding-top: 14px;
}
.store .spec-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--s-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--s-head);
  min-height: 32px;
}
.store .spec-fold > summary::-webkit-details-marker { display: none; }
.store .spec-fold > summary::after {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--s-muted);
  transition: transform 0.2s ease;
}
.store .spec-fold[open] > summary::after { transform: rotate(180deg); }
.store .spec-fold .spec { margin-top: 4px; }
.store .spec-fold .spec__cap { display: none; }
.store .spec td { padding: 9px 0; font-size: 14px; }

.store .detail__note {
  margin-top: 14px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 20px;
  background: var(--s-pink);
  border-radius: 5px;
}

.store .chips { padding-top: 18px; }

/* Tighten the head of the buy box too. */
.store .detail__buy { padding-top: 26px; }
.store .detail__name { font-size: 32px; line-height: 40px; }
.store .detail__from { font-size: 27px; margin-bottom: 10px; }
.store .detail__blurb { font-size: 15px; line-height: 25px; margin-top: 12px; }
.store .detail__turn {
  margin-top: 16px;
  padding: 14px 0;
  gap: 22px;
  font-size: 13px;
}

@media (max-width: 640px) {
  /* One column on a phone: two-up fields would be too narrow to
     read their own labels. */
  .store .pf { grid-template-columns: 1fr; }
  .store .detail__actions { flex-wrap: wrap; }
  .store .detail__add { flex: 1 1 100%; }
  .store .btn--quiet { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   COLOUR PICKER
   Swatches rather than a dropdown: colour is the fastest thing
   to judge by eye, and a select hides it behind a click.
   ============================================================ */
.store .picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.store .picker__opt {
  display: inline-flex;
  cursor: pointer;
  line-height: 0;
}

.store .picker__opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.store .picker__dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(31, 27, 29, 0.16);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.store .picker__opt input:checked + .picker__dot {
  box-shadow: inset 0 0 0 1px rgba(31, 27, 29, 0.16),
              0 0 0 2px #FFFFFF,
              0 0 0 4px var(--s-accent);
  transform: scale(1.06);
}

.store .picker__opt input:focus-visible + .picker__dot {
  box-shadow: inset 0 0 0 1px rgba(31, 27, 29, 0.16),
              0 0 0 2px #FFFFFF,
              0 0 0 4px var(--s-accent-lit);
}

/* Names the current choice, since a swatch alone does not say
   which colour it is. */
.store .picker__read {
  font-size: 13px;
  color: var(--s-muted);
  padding-left: 4px;
}

@media (hover: none) {
  /* Bigger targets on touch; a 30px dot is under the 44px rule. */
  .store .picker { gap: 10px; }
  .store .picker__dot { width: 36px; height: 36px; }
}

/* ============================================================
   FAQ
   Two columns of grouped accordions. Native <details>, so an
   answer is reachable before JS runs and find-in-page can open
   a closed one.
   ============================================================ */
.store .faq { padding: 70px 0 0; }

.store .faq__head { max-width: 620px; }

.store .faq__lede {
  font-size: 17px;
  line-height: 28px;
  color: var(--s-body);
  margin: 10px 0 0;
}

.store .faq__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 48px;
  align-items: start;
  padding-top: 30px;
}

.store .faq__group { break-inside: avoid; }

.store .faq__group-title {
  font-family: var(--s-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-accent);
  margin: 20px 0 6px;
}

.store .faq__item { border-bottom: 1px solid var(--s-line); }

.store .faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--s-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 26px;
  color: var(--s-head);
}
.store .faq__q::-webkit-details-marker { display: none; }
.store .faq__q:hover { color: var(--s-accent); }

/* A plus that becomes a minus. Drawn from two bars so it stays
   crisp at any size and needs no icon font. */
.store .faq__mark {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 5px;
}
.store .faq__mark::before,
.store .faq__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 1px;
  background: var(--s-accent);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.store .faq__mark::after { rotate: 90deg; }
.store .faq__item[open] .faq__mark::after { opacity: 0; rotate: 0deg; }

.store .faq__a {
  padding: 0 34px 18px 0;
  font-size: 16px;
  line-height: 27px;
  color: var(--s-body);
}
.store .faq__a p { margin: 0; }

.store .faq__foot {
  margin: 34px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--s-line);
  font-size: 16px;
  color: var(--s-body);
}
.store .faq__foot a { color: var(--s-accent); }
.store .faq__foot a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .store .faq__groups { grid-template-columns: 1fr; gap: 0 0; }
}

@media (max-width: 640px) {
  .store .faq { padding-top: 44px; }
  .store .faq__q { font-size: 16px; line-height: 24px; padding: 13px 0; }
  .store .faq__a { font-size: 15px; line-height: 25px; padding-right: 26px; }
}

/* ============================================================
   WPE REGISTER
   Measured from wpeprinting.com in the browser, not eyeballed:

     body / all type   Inter, 14px base
     h2                Inter 24px / 800
     card title        Inter 14px / 800, centred, #000
     price             Inter 14px / 800, #1a3945
     card image        298x298, ratio 1.00, radius 0, cover
     grid gap          16px
     card chrome       no border, no radius, no shadow, transparent
     sale badge        #e93d3d bg, #dadada text, 12px/700,
                       radius 4px, padding 4px 10px
     buttons           radius 4px

   This block loads last and overrides the earlier pink/serif
   skin. Everything here is a measured value.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap');

body.store {
  --s-display: 'Inter', system-ui, sans-serif;
  --s-sans:    'Inter', system-ui, sans-serif;

  /* Their palette. Cyan is the primary, orange the accent, and a
     deep navy carries every price. */
  --w-cyan:    #09b5f4;
  --w-cyan-dk: #089bd2;
  --w-orange:  #f0702c;
  --w-navy:    #1a3945;
  --w-ink:     #0b1613;
  --w-sale:    #e93d3d;
  --w-line:    #ecedec;
  --w-grey:    #f4f4f4;

  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--w-ink);
}

/* Retarget the existing tokens so every rule written against the
   old skin inherits the new palette without being rewritten. */
body.store {
  --s-head:       #000000;
  --s-card-title: #000000;
  --s-body:       #0b1613;
  --s-accent:     var(--w-navy);
  --s-accent-lit: var(--w-cyan);
  --s-line:       var(--w-line);
  --s-line-warm:  var(--w-line);
  --s-ink:        var(--w-ink);
  --s-pink:       var(--w-grey);
  --s-pink-soft:  #fafafa;
  --s-pink-line:  var(--w-line);
}

/* ---------- announcement bar ---------- */
.store .announce {
  background: var(--w-ink);
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 11px 16px;
}

/* ---------- header ---------- */
.store .nav__wordmark {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--w-ink);
}

.store-search { height: 56px; border: 2px solid var(--w-line); border-radius: 4px; }
.store-search__input { font-size: 14px; }
.store-search__go { background: transparent; width: 52px; }
.store-search__go svg { stroke: var(--w-ink); }
.store-search__go:hover { background: var(--w-grey); }

/* Nav: a full-width bar of small bold caps, left aligned. */
.store .nav-row { border-bottom: 1px solid var(--w-line); background: #ffffff; }

.store .nav__links {
  justify-content: flex-start;
  gap: 26px;
  padding: 0;
  border-bottom: 0;
  min-height: 45px;
  align-items: center;
}

.store .nav__link {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--w-ink);
  white-space: nowrap;
}
.store .nav__link:hover { color: var(--w-cyan); }

/* ---------- headings ---------- */
.store .home-row__title,
.store .store-title,
.store .faq .home-row__title,
.store .why-band__title,
.store .steps__badge {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #000000;
}
.store .home-row__title { font-size: 24px; }
.store .store-title     { font-size: 32px; }
.store .why-band__title { font-size: 24px; line-height: 1.15; }
.store .steps__badge    { font-size: 20px; background: transparent; padding: 0; }
.store .steps__t {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  color: #000000;
}

/* ---------- product card ----------
   Square image, no card chrome at all, centred bold title, navy
   price. This is the biggest single difference from the previous
   skin, which used a bordered white panel and a serif title. */
.store .product {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.store .product:hover { box-shadow: none; transform: none; }

.store .product__media {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: var(--w-grey);
}
.store .product__media img { border-radius: 0; }

.store .product__body {
  padding: 12px 4px 0;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.store .product__name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  color: #000000;
}

.store .product__amount {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--w-navy);
}
.store .product__from-label { font-size: 12px; color: #6b6b6b; }

.store .product__badge {
  top: 10px;
  left: 10px;
  border-radius: 4px;
  background: var(--w-sale);
  color: #dadada;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  box-shadow: none;
}

/* 4 across, 16px gutters. */
.store .results__grid { grid-template-columns: repeat(4, 1fr); gap: 26px 16px; }
.store .results__grid--four { grid-template-columns: repeat(4, 1fr); }

/* ---------- buttons ---------- */
.store .btn-square,
.store .btn--fill,
.store .detail__add,
.store .drawer__send,
.store button.drawer__send {
  border-radius: 4px;
  background: var(--w-cyan);
  border: 0;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  padding: 16px 22px;
  min-height: 0;
}
.store .btn-square:hover,
.store .btn--fill:hover,
.store .detail__add:hover,
.store .drawer__send:hover { background: var(--w-cyan-dk); color: #ffffff; }

.store .btn-outline,
.store .btn--quiet {
  border-radius: 4px;
  border: 1px solid var(--w-ink);
  color: var(--w-ink);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  padding: 15px 22px;
  min-height: 0;
}
.store .btn-outline:hover,
.store .btn--quiet:hover { background: var(--w-ink); color: #ffffff; }

/* ---------- hero: image left, colour promo panel right ---------- */
.store .hero-band {
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 16px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-top: 16px;
  align-items: stretch;
}

.store .hero-band__copy {
  order: 2;
  background: var(--w-orange);
  color: #ffffff;
  border-radius: 0;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.store .hero-band__title { align-items: center; }

.store .hero-band__shout {
  font-family: 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.store .hero-band__quiet {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  padding-top: 10px;
}
.store .hero-band__lede { color: #ffffff; font-size: 15px; line-height: 1.7; }
.store .hero-band .btn-square { background: #ffffff; color: var(--w-ink); }
.store .hero-band .btn-square:hover { background: var(--w-ink); color: #ffffff; }

/* The photo side becomes one flat image panel, not a polaroid pile. */
.store .polaroids {
  order: 1;
  display: block;
  position: relative;
  min-height: 380px;
  background: var(--w-grey);
  overflow: hidden;
}
.store .polaroid {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  rotate: none;
  box-shadow: none;
  background: transparent;
}
.store .polaroid--b,
.store .polaroid--c,
.store .polaroid--d { display: none; }
.store .polaroid img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

/* ---------- trust strip, steps, bands ---------- */
.store .why-band {
  background: var(--w-grey);
  border-radius: 0;
  padding: 40px 40px;
}
.store .steps__badge { border-radius: 0; }

.store .faq__group-title { color: var(--w-navy); }
.store .faq__q { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 800; }
.store .faq__mark::before,
.store .faq__mark::after { background: var(--w-cyan); }
.store .faq__a { font-size: 14px; line-height: 1.85; }

/* ---------- detail page ---------- */
.store .detail__name {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #000000;
  line-height: 1.2;
}
.store .detail__from {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--w-navy);
}
.store .detail__main { border-radius: 0; }
.store .detail__thumb { border-radius: 0; }

.store .circle__img { border-radius: 0; }
.store .circle__name { font-weight: 700; font-size: 13px; }

.store .rail__legend,
.store .results__sort,
.store .product__select,
.store .pf__input { border-radius: 4px; font-family: 'Inter', sans-serif; }

.store .footer__heading { font-family: 'Inter', sans-serif; font-weight: 800; }
.store .footer__wordmark { font-family: 'Inter', sans-serif; font-weight: 800; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .store .results__grid,
  .store .results__grid--four { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .store .hero-band { grid-template-columns: 1fr; }
  .store .hero-band__copy { padding: 30px 22px; }
  .store .polaroids { min-height: 260px; }
  .store .results__grid,
  .store .results__grid--four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .store .hero-band { margin-top: 12px; gap: 0; }
  .store .hero-band__shout { font-size: 24px; }
  .store .hero-band__quiet { font-size: 16px; }
  .store .home-row__title { font-size: 20px; }
  .store .store-title { font-size: 24px; }
  .store .results__grid,
  .store .results__grid--four { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .store .product__name { font-size: 13px; }
  .store .product__amount { font-size: 13px; }
}

/* ============================================================
   MEGA MENU
   Seven categories, each opening a panel of titled columns.
   The panel lives inside its <li>, so the pointer never crosses
   dead space on the way down into it.
   ============================================================ */
.store .nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.store .nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.store .nav__item > .nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 45px;
  white-space: nowrap;
}

.store .nav__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transition: transform 0.16s ease;
}
.store .nav__item.is-open .nav__caret { transform: rotate(180deg); }
.store .nav__item.is-open > .nav__link { color: var(--w-cyan); }

/* The panel. Full-bleed white with a hairline and a soft drop,
   the way a retail mega-menu reads. */
.store .mega {
  position: absolute;
  top: 45px;
  left: -18px;
  z-index: 80;
  background: #ffffff;
  border: 1px solid var(--w-line);
  border-top: 2px solid var(--w-cyan);
  box-shadow: 0 12px 28px rgba(11, 22, 19, 0.12);
  padding: 22px 26px;
  min-width: 460px;
}
.store .mega[hidden] { display: none; }

.store .mega__inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.store .mega__col {
  min-width: 150px;
  display: flex;
  flex-direction: column;
}

.store .mega__col-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-navy);
  margin: 0 0 10px;
}

.store .mega__link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--w-ink);
  padding: 6px 0;
  white-space: nowrap;
}
.store .mega__link:hover { color: var(--w-cyan); text-decoration: underline; }

/* Keep the last panels from running off the right edge. */
.store .nav__item:nth-last-child(-n+3) .mega { left: auto; right: -18px; }

/* ---------- mobile: the same tree as nested disclosures ------- */
.store .menu__group { border-bottom: 1px solid var(--w-line); }

.store .menu__link--group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
.store .menu__link--group::-webkit-details-marker { display: none; }
.store .menu__link--group::after {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.5;
  transition: transform 0.2s ease;
}
.store .menu__group[open] > .menu__link--group::after { transform: rotate(180deg); }

.store .menu__sub { padding: 2px 0 14px 12px; }

.store .menu__sub .mega__col { padding-bottom: 12px; }
.store .menu__sub .mega__col-title { font-size: 10px; margin-bottom: 6px; }
.store .menu__sub .mega__link {
  font-size: 15px;
  padding: 9px 0;
  white-space: normal;
}

@media (max-width: 1180px) {
  .store .nav__links { gap: 18px; }
  .store .nav__link { font-size: 11px; }
  .store .mega { min-width: 400px; padding: 18px 20px; }
  .store .mega__inner { gap: 28px; }
}