/* ==========================================================================
   String Frame — Components
   Outlined panels, 6px corners, 1.5px ink borders. No pill shapes anywhere.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */

.btn {
  --py: 17px;
  --px: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius);
  background: var(--cobalt);
  color: var(--text-on-ink);
  font: 500 16px/1 var(--font-body);
  padding: var(--py) var(--px);
  text-align: center;
  text-decoration: none;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}
.btn:hover  { background: var(--cobalt-hover); color: var(--text-on-ink); }
.btn:active { background: var(--cobalt-active); }

.btn--sm { --py: 13px; --px: 20px; font-size: 15px; }
.btn--xs { --py: 11px; --px: 15px; font-size: 14px; }
.btn--lg { --py: 19px; --px: 32px; font-size: 17px; }
.btn--xl { --py: 20px; --px: 36px; font-size: 17px; white-space: nowrap; }
.btn--block { width: 100%; --py: 20px; --px: 20px; font-size: 17px; }

/* Secondary: transparent, 1.5px ink outline. Padding is reduced by the border
   weight so outline and solid buttons sit at identical heights. */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: var(--bw) solid var(--rule);
  padding: calc(var(--py) - var(--bw)) calc(var(--px) - var(--bw));
}
.btn--outline:hover { background: var(--ink); color: var(--text-on-ink); }

/* Outline on an ink background */
.btn--outline-inv {
  background: transparent;
  color: var(--text-on-ink);
  border: var(--bw) solid var(--text-on-ink);
  padding: calc(var(--py) - var(--bw)) calc(var(--px) - var(--bw));
}
.btn--outline-inv:hover { background: var(--text-on-ink); color: var(--ink); }

/* Quiet outline used by filter chips and selectable options */
.btn--chip {
  --py: 11px; --px: 15px;
  background: transparent;
  color: var(--ink);
  border: var(--bw) solid var(--rule);
  padding: calc(var(--py) - var(--bw)) calc(var(--px) - var(--bw));
  font-size: 14px;
}
.btn--chip:hover { background: var(--ink); color: var(--text-on-ink); }
.btn--chip[aria-pressed="true"] {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: var(--text-on-ink);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--disabled-bg);
  color: var(--disabled-ink);
  cursor: not-allowed;
}
.btn--outline[disabled] {
  background: transparent;
  border-color: var(--disabled-border);
  color: var(--disabled-outline);
}

/* Square 6px arrow buttons for carousels */
.btn-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  padding: 0;
  transition: background var(--speed) var(--ease);
}
.btn-icon svg path { stroke: var(--ink); }
.btn-icon:hover { background: var(--ink); }
.btn-icon:hover svg path { stroke: var(--paper); }
.btn-icon[disabled] { border-color: var(--disabled-border); cursor: not-allowed; }
.btn-icon[disabled] svg path { stroke: var(--disabled-outline); }
.btn-icon[disabled]:hover { background: transparent; }

/* Underlined text link, the design's tertiary action */
.link-underline {
  display: inline-block;
  font: 500 16px/1 var(--font-body);
  color: var(--cobalt);
  border-bottom: var(--bw) solid var(--cobalt);
  padding-bottom: 3px;
  text-decoration: none;
}
.link-underline--sm { font-size: 15px; padding-bottom: 2px; }
.link-inline {
  color: var(--cobalt);
  border-bottom: var(--bw) solid var(--cobalt);
  padding-bottom: 2px;
}

/* --- Badges --------------------------------------------------------------- */

.badge {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--badge-ink);
  font: 500 11px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.badge--sm  { font-size: 10px; padding: 6px 8px; }
.badge--md  { padding: 7px 9px; }
.badge--lg  { padding: 9px 11px; }
.badge--alt { background: var(--badge-alt-bg); color: var(--badge-alt-ink); }
.badge--ink { background: var(--ink); color: var(--text-on-ink); }
.badge--outline {
  background: transparent;
  border: var(--bw) solid var(--rule);
  color: var(--ink);
  padding: 6.5px 10px;
}
.badge--tint-outline {
  background: var(--cobalt-tint);
  border: var(--bw) solid var(--rule);
  color: var(--ink);
  padding: 6px 8px;
}

/* --- Cards ---------------------------------------------------------------- */

.card {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.card--pad    { padding: 26px; }
.card--pad-lg { padding: 30px; }
.card--pad-sm { padding: 22px; }
/* Product cards whose photograph already contains a picture frame: drop the
   outer box so the piece is not framed twice. */
.card--bare {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
/* Product photographs are square, so the bed is square too. A fixed height
   would crop the top and bottom of the frame — worst on portrait pieces, and
   worse again at wider breakpoints where the card grows but the height does not. */
.card--bare .card__media {
  border-radius: 0;
  aspect-ratio: 1;
  height: auto;
}
/* Photo-tip shots keep their own ratio rather than the square bed. */
.card--bare .card__media--photo { aspect-ratio: 1200 / 896; }
.card--bare .card__body {
  border-top: 0;
  padding: 16px 0 0;
}

.card--pad-24 { padding: 24px; }
.card--pad-28 { padding: 28px; }
.card--pad-32 { padding: 32px; }
.card--pad-40 { padding: 28px; }
@media (min-width: 800px) { .card--pad-40 { padding: 40px; } }
.card--pad-xl { padding: 28px; }
@media (min-width: 800px) { .card--pad-xl { padding: 40px; } }

/* Badge pinned into a card image bed */
.card__badge { position: absolute; left: 12px; top: 12px; }
.card__badge--lg { left: 16px; top: 16px; }
.card--ink    { background-color: var(--ink); color: var(--text-on-ink); }
.card--tint   { background-color: var(--cobalt-tint); }
.card--plain  { background-color: var(--surface); }

/* Card image bed, always split from the body by a 1.5px ink rule.
   Backgrounds are set with background-color only, so a .motif-* class can
   layer its image on top without the shorthand wiping it out. */
.card__media {
  position: relative;
  background-color: var(--surface);
  height: 240px;
}
.card__media--180 { height: 180px; }
/* Bed matching the 1200x896 photo-tip shots, so they show in full with no crop.
   Was 553x825 and capped at 190px for the previous portrait set, where a
   portrait at full card width dwarfed its caption. The current tips are all the
   same landscape photograph in four states, and a landscape fills the card
   without that problem — so the cap and the centring are gone. Keep this ratio
   matched to the source files: at 553/825 these shots lost their outer half,
   which took the phone chrome off the "send the original file" example and with
   it the whole point of that tip. */
.card__media--photo {
  aspect-ratio: 1200 / 896;
  height: auto;
}
.card__media--210 { height: 210px; }
.card__media--260 { height: 260px; }
.card__media--300 { height: 300px; }
.card__body {
  border-top: var(--bw) solid var(--rule);
  padding: 18px;
}
.card__body--lg { padding: 30px; }
.card__body--md { padding: 20px; }
.card__body--sm { padding: 18px; }
.card__body--16 { padding: 16px; }
.card__title {
  font: 500 20px/1.2 var(--font-display);
}
.card__meta {
  margin-top: 6px;
  font: 400 13px/1.5 var(--font-body);
  color: var(--text-caption);
}
.card__foot {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* Whole-card link */
a.card { color: var(--ink); text-decoration: none; display: block; }
a.card:hover { color: var(--ink); }
a.card:hover .card__title { color: var(--cobalt); }

/* Link card used on the 404 and quick-nav blocks */
.card-link {
  display: block;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 26px;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--speed) var(--ease);
}
.card-link:hover { background: var(--cobalt-tint); color: var(--ink); }

/* Numbered step card */
.step__num {
  font: 500 13px/1 var(--font-display);
  color: var(--cobalt);
}
.step__num--lg { font-size: 15px; }
.step__title {
  margin-top: 14px;
  font: 500 20px/1.2 var(--font-display);
}
.step__when {
  margin-top: 8px;
  font: 400 13px/1 var(--font-mono);
  color: var(--text-caption);
}

/* Big statistic */
.stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(40px * var(--ds-lg));
  line-height: 1;
  color: var(--cobalt);
}
.stat__num--lg { font-size: calc(44px * var(--ds-lg)); }

/* --- Photography ---------------------------------------------------------- */

/* Every photographic slot is a fixed-size bed with the image cropped to fill
   it. Source shots are square with the piece centred, so cover crops evenly. */
.img-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The product photographs are of the framed piece itself, edge to edge, with no
   surrounding wall — so they are contained, never cropped: a crop would cut the
   frame off. The pictures come in four aspect ratios and the beds are fixed, so
   most of them letterbox. The background sits on the img element itself, which
   fills the bed, so the letterboxed margin reads as a mount rather than a gap
   (and no :has() is needed to reach the bed). */
.img-contain {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface);
}

/* Portrait-orientation source photos dropped into landscape beds: bias the
   crop upward so the face stays in frame instead of the chin and shoulders. */
.img-cover--face { object-position: 50% 30%; }

/* Empty picture slot.
   The WireStyle photography was removed from the site pending the client's own
   photographs. Every slot that held one now carries this instead, labelled with
   the filename its replacement must be saved as, and keeping the bed's exact
   dimensions so no layout shifts when the pictures arrive.

   It fills its bed the way .img-cover did, so it inherits whatever size the bed
   already defines. Each one keeps the original alt text in data-alt — restore
   that onto the <img> when swapping a picture back in. See IMAGE-SLOTS.md. */
.imgslot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 48px;
  padding: 6px;
  background: var(--surface);
  border: var(--bw) dashed var(--text-caption);
  border-radius: var(--radius-sm);
  text-align: center;
  overflow: hidden;
}
.imgslot__name {
  font: 400 11px/1.35 var(--font-mono);
  color: var(--text-caption);
  word-break: break-word;
}

/* Beds that hold an image need to clip it. */
.card__media,
.compare__pane,
.format__proof,
.hero-figure,
.gallery__main,
.gallery__thumb,
.cart-line__thumb,
.order-line__thumb,
.map-embed,
.sg-motif { overflow: hidden; }

/* Poster frame behind a video block's play button. */
.video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 27, .45);
}
.video__stage > .video__play,
.video__stage > .ph { position: relative; z-index: 1; }

/* --- Image placeholders & motif ------------------------------------------ */

.media {
  position: relative;
  background-color: var(--surface);
  overflow: hidden;
}
.media--tint { background-color: var(--cobalt-tint); }
.media--ink  { background-color: var(--ink-raised); }

/* The curve-stitch motif: the brand mark. Never drop it. */
.motif-tile    { background-image: url("../svg/motif-tile.svg");    background-position: center;       background-size: cover;  background-repeat: no-repeat; }
.motif-quarter { background-image: url("../svg/motif-quarter.svg"); background-position: center;       background-size: cover;  background-repeat: no-repeat; }
.motif-poster  { background-image: url("../svg/motif-poster.svg");  background-position: center;       background-size: cover;  background-repeat: no-repeat; }
.motif-band    { background-image: url("../svg/motif-band.svg");    background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat; }
.motif-loader  { background-image: url("../svg/motif-loader.svg");  background-position: left bottom;  background-size: contain; background-repeat: no-repeat; }

/* Motif laid at poster scale behind hero type. It is anchored to the 1440px
   canvas edge, not the viewport edge, so it keeps its relation to the type
   on very wide screens. */
.motif-plate {
  position: absolute;
  inset-block: 0;
  right: var(--bleed);
  width: min(60%, 860px);
  background-image: url("../svg/motif-poster.svg");
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
.motif-plate--left {
  right: auto;
  left: var(--bleed);
  width: min(46%, 520px);
  background-image: url("../svg/motif-quarter.svg");
  background-position: left bottom;
  opacity: .85;
}
.motif-plate--hero { width: min(56%, 780px); opacity: .9; }
.motif-plate--85 { opacity: .85; }
.motif-plate--80 { opacity: .8; }
.motif-plate--65 { opacity: .65; }

.has-motif { position: relative; overflow: hidden; }
.has-motif > .inner { position: relative; }

/* Small mono chip naming what photography belongs in a placeholder. */
.ph {
  position: absolute;
  font: 400 11px/1 var(--font-mono);
  color: var(--ink);
  background: var(--paper);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.ph--bl { left: 12px; bottom: 12px; }
.ph--tl { left: 12px; top: 12px; }
.ph--bl-lg { left: 14px; bottom: 14px; }
.ph--tl-lg { left: 14px; top: 14px; }
.ph--onink {
  color: var(--text-on-ink);
  background: transparent;
  border: 1px solid var(--text-muted);
}
.ph--static {
  position: static;
  display: inline-block;
}

/* --- Video block ---------------------------------------------------------- */

.video {
  border: var(--bw) solid var(--text-on-ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.video__stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 400px;
  background-color: var(--ink-raised);
}
.video__stage--380 { height: 380px; }
.video__stage--420 { height: 420px; }
.video__play {
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: var(--radius);
  background: var(--cobalt);
  display: grid;
  place-items: center;
  transition: background var(--speed) var(--ease);
}
.video__play:hover { background: var(--cobalt-hover); }
.video__bar {
  border-top: var(--bw) solid var(--text-on-ink);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.video__time {
  font: 400 13px/1 var(--font-mono);
  color: var(--text-on-ink);
}
.video__time--end { color: var(--text-on-ink-cap); }
.video__track {
  flex: 1;
  height: 4px;
  background: var(--track);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.video__progress { height: 100%; background: var(--coral); }

@media (max-width: 767px) {
  .video__stage,
  .video__stage--380,
  .video__stage--420 { height: 260px; }
  .video__play { width: 64px; height: 64px; }
}

/* --- Forms ---------------------------------------------------------------- */

.field { display: block; }
.field__label {
  display: block;
  font: 500 13px/1 var(--font-body);
  margin-bottom: 8px;
}
.field__label .opt { color: var(--text-caption); font-weight: 400; }
.field__hint {
  margin-top: 8px;
  font: 400 13px/1.4 var(--font-body);
  color: var(--text-caption);
}
.field__error {
  margin-top: 8px;
  font: 400 13px/1.4 var(--font-body);
  color: var(--badge-ink);
}

.input, .select, .textarea {
  width: 100%;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 14px;
  font: 400 16px/1 var(--font-body);
  color: var(--ink);
}
.textarea { line-height: 1.5; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-caption); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px var(--cobalt-tint);
}
.input[aria-invalid="true"] { border-color: var(--badge-ink); }

/* Select keeps the custom chevron the design draws. */
.select-wrap { position: relative; }
.select {
  appearance: none;
  padding-right: 38px;
}
.select-wrap__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.select--sm { padding: 11px 38px 11px 14px; font-size: 14px; }

/* Checkbox / radio drawn as squares and circles with ink outlines. */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.check__box {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
  display: grid;
  place-items: center;
}
.check__box svg { opacity: 0; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check input:checked + .check__box { background: var(--cobalt); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.check__text { font: 400 15px/1.5 var(--font-body); }
.check__text--muted { color: var(--text-muted); font-size: 14px; }

.radio {
  display: flex;
  align-items: center;
  gap: 14px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: 18px;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.radio:hover { border-color: var(--cobalt); }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio__dot {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: var(--bw) solid var(--rule);
  display: grid;
  place-items: center;
}
.radio__dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cobalt);
  opacity: 0;
}
.radio input:checked ~ .radio__dot { border-color: var(--cobalt); }
.radio input:checked ~ .radio__dot::after { opacity: 1; }
.radio:has(input:checked) { border-color: var(--cobalt); background: var(--cobalt-tint); }
.radio input:focus-visible ~ .radio__dot { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.radio__label { font: 500 16px/1 var(--font-body); }

/* Option buttons (size / frame / amount pickers) */
.option {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: 500 15px/1.3 var(--font-body);
  padding: calc(13px - var(--bw)) calc(16px - var(--bw));
  text-align: left;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease),
              background var(--speed) var(--ease);
}
.option:hover { border-color: var(--cobalt); color: var(--cobalt); }
.option__sub { display: block; font: 400 13px/1.4 var(--font-body); color: var(--text-caption); }
.option[aria-pressed="true"] {
  border-color: var(--cobalt);
  background: var(--cobalt-tint);
  color: var(--ink);
}
.option[aria-pressed="true"] .option__sub { color: var(--cobalt); }
.option--wide { padding: calc(13px - var(--bw)) calc(18px - var(--bw)); font-size: 15px; }
.option--amount { font-family: var(--font-display); font-size: 16px; padding: calc(15px - var(--bw)) calc(20px - var(--bw)); }
.option--amount-alt { font-family: var(--font-body); }

/* Upload dropzone */
.dropzone {
  border: var(--bw) dashed var(--cobalt);
  border-radius: var(--radius);
  background: var(--cobalt-tint);
  padding: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dropzone--center {
  display: block;
  text-align: center;
  padding: 26px 20px;
}
.dropzone__title { font: 500 15px/1.3 var(--font-body); }
.dropzone--center .dropzone__title { font-size: 16px; }
.dropzone__hint { margin-top: 4px; font: 400 13px/1.4 var(--font-body); color: var(--text-muted); }

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.qty button {
  width: 34px;
  height: 40px;
  border: 0;
  background: transparent;
  font: 500 16px/1 var(--font-body);
}
.qty button:hover { background: var(--surface); }
.qty__value {
  width: 26px;
  text-align: center;
  font: 500 15px/1 var(--font-body);
}
.qty--lg button { width: 46px; height: 56px; font-size: 18px; }
.qty--lg .qty__value { width: 40px; font-size: 16px; }

/* --- Accordion ------------------------------------------------------------ */

.accordion { border-top: var(--bw) solid var(--rule); }
.accordion__item { border-bottom: var(--bw) solid var(--rule); }
.accordion__item[open] { background: var(--white); }

.accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 16px;
  font: 500 19px/1.3 var(--font-display);
  list-style: none;
  cursor: pointer;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:hover { color: var(--cobalt); }
.accordion__item[open] > .accordion__summary { color: var(--cobalt); }

.accordion__icon { flex: 0 0 auto; }
.accordion__icon path { stroke: var(--cobalt); stroke-width: 1.5; }
.accordion__item[open] .accordion__icon-v { display: none; }

.accordion__panel {
  padding: 0 16px 22px;
  font: 400 16px/1.65 var(--font-body);
  color: var(--text-muted);
}

/* Tighter variant used inside the product column */
.accordion--flush .accordion__summary { padding: 18px 4px; font-size: 17px; }
.accordion--flush .accordion__panel  { padding: 0 4px 20px; font-size: 15px; line-height: 1.6; }

/* --- Data tables ---------------------------------------------------------- */

.dtable {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.dtable__head {
  display: grid;
  background: var(--ink);
  color: var(--text-on-ink);
  font: 500 13px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dtable__head > * { padding: 16px 20px; }
.dtable__row {
  display: grid;
  font: 400 16px/1.3 var(--font-body);
  align-items: center;
}
.dtable__row + .dtable__row,
.dtable__head + .dtable__row { border-top: var(--bw) solid var(--rule-soft); }
.dtable__row > * { padding: 18px 20px; }
.dtable__row--alt { background: var(--paper); }
.num { text-align: right; }

/* Definition rows (specs, order summary) */
.deflist { display: grid; gap: 12px; font: 400 16px/1.4 var(--font-body); }
.deflist--sm { font-size: 15px; }
.deflist > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.deflist dt, .deflist .dt { color: var(--text-muted); }
.deflist dd, .deflist .dd { margin: 0; font-weight: 500; }

.ruled-list { border-top: var(--bw) solid var(--rule); }
.ruled-list > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: var(--bw) solid var(--rule-soft);
  font: 400 16px/1.4 var(--font-body);
}
.ruled-list > div:last-child { border-bottom: var(--bw) solid var(--rule); }

/* --- Announcement bar + header ------------------------------------------- */

.announcement {
  background: var(--ink);
  color: var(--text-on-ink);
  text-align: center;
  font: 400 13px/1.4 var(--font-body);
  padding: 13px 24px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--pad-x);
  border-bottom: var(--bw) solid var(--rule);
  background: var(--paper);
  position: relative;
  z-index: 30;
}
.wordmark {
  font: 500 26px/1 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark span { color: var(--cobalt); }
.wordmark--inv { color: var(--text-on-ink); }
.wordmark--inv:hover { color: var(--text-on-ink); }

.site-nav {
  display: none;
  align-items: center;
  gap: 28px;
  font: 500 15px/1 var(--font-body);
}
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--cobalt); }

.nav-menu { position: relative; }
.nav-menu__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  font: 500 15px/1 var(--font-body);
  color: var(--ink);
}
.nav-menu__trigger:hover { color: var(--cobalt); }
.nav-menu__trigger svg { transition: transform var(--speed) var(--ease); }
.nav-menu__trigger[aria-expanded="true"] { color: var(--cobalt); }
.nav-menu__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-menu__panel {
  position: absolute;
  top: calc(100% + 22px);
  left: -24px;
  z-index: 40;
  display: none;
  gap: 48px;
  /* The panel sits 22px below the trigger, clearing the header rule. Without
     a bridge across that gap the pointer leaves .nav-menu on the way down and
     the menu closes before it can be clicked. */
  background: var(--white);
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 28px;
  min-width: 420px;
}
.nav-menu__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-22px - var(--bw));
  height: calc(22px + var(--bw));
}
.nav-menu__panel[data-open="true"] { display: flex; }
.nav-menu__group-title {
  font: 500 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: 12px;
}
.nav-menu__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font: 400 15px/1.2 var(--font-body);
}
.nav-menu__links a { color: var(--ink); }
.nav-menu__links a:hover { color: var(--cobalt); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.icon-btn {
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.icon-btn:hover { color: var(--cobalt); }
.icon-btn svg path { stroke: currentColor; }

.cart-count {
  font: 500 12px/1 var(--font-body);
  color: var(--paper);
  background: var(--cobalt);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  margin-left: -6px;
}

/* Mobile drawer */
.nav-toggle { display: grid; }
.mobile-nav {
  display: none;
  border-bottom: var(--bw) solid var(--rule);
  background: var(--white);
  padding: 8px var(--pad-x) 24px;
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  font: 500 17px/1.2 var(--font-body);
  color: var(--ink);
}
.mobile-nav a:hover { color: var(--cobalt); }
.mobile-nav__group {
  margin-top: 18px;
  font: 500 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-caption);
}

/* The hamburger stays at every width, as drawn: it opens the full site map,
   which carries the pages the primary nav has no room for. */
@media (min-width: 1100px) {
  .site-nav { display: flex; }
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 56px var(--pad-x) 32px;
}
@media (min-width: 1200px) { .site-footer { padding: 72px var(--pad-x) 32px; } }

.footer-cols {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .footer-cols { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (min-width: 1000px) { .footer-cols { grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 44px; } }

.footer-col__title {
  font: 500 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-ink-cap);
  margin-bottom: 16px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font: 400 15px/1.2 var(--font-body);
}
.footer-links a { color: var(--text-on-ink); }
.footer-links a:hover { color: var(--cobalt-soft); }

.newsletter-note {
  font: 400 15px/1.5 var(--font-body);
  color: var(--text-on-ink-muted);
  max-width: 320px;
}
.newsletter {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}
.newsletter .input {
  flex: 1;
  min-width: 0;
  border-color: var(--text-on-ink);
  background: transparent;
  color: var(--text-on-ink);
  padding: 13px 12px;
  font-size: 15px;
}
.newsletter .input::placeholder { color: var(--text-on-ink-cap); }
.newsletter .input:focus { border-color: var(--cobalt-soft); box-shadow: none; }
.newsletter .btn { --py: 13px; --px: 18px; font-size: 15px; }

.footer-base {
  margin-top: 48px;
  padding-top: 24px;
  border-top: var(--bw) solid var(--ink-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font: 400 13px/1.4 var(--font-body);
  color: var(--text-on-ink-cap);
}
.socials { display: flex; gap: 10px; }
.socials a {
  width: 34px;
  height: 34px;
  border: var(--bw) solid var(--text-on-ink);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font: 500 13px/1 var(--font-body);
  color: var(--text-on-ink);
}
.socials a:hover { background: var(--text-on-ink); color: var(--ink); }

/* --- CTA band ------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: var(--bw) solid var(--rule);
}
.cta-band--paper { background: var(--paper); }
.cta-band .inner {
  position: relative;
  padding: var(--pt) var(--pad-x) var(--pb);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}
.cta-band--start .inner { justify-content: flex-start; }
@media (min-width: 1200px) {
  .cta-band { --pt: 76px; --pb: 76px; }
  .cta-band--tall { --pt: 84px; --pb: 84px; }
  .cta-band .inner { gap: 56px; }
}

/* --- Breadcrumb ----------------------------------------------------------- */

.breadcrumb {
  font: 400 13px/1.4 var(--font-body);
  color: var(--text-caption);
}
.breadcrumb a { color: var(--text-caption); }
.breadcrumb a:hover { color: var(--cobalt); }

/* --- Progress / loading --------------------------------------------------- */

.progress {
  height: 4px;
  background: var(--rule-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.progress__sweep {
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--cobalt);
  animation: tl-sweep 1.4s linear infinite;
}
@keyframes tl-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .progress__sweep { animation: none; width: 100%; }
}

/* --- Trust row ------------------------------------------------------------ */

.trust {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.trust svg { flex: 0 0 auto; margin-top: 2px; }
.trust svg path { stroke: var(--cobalt); }

/* --- Chip nav (FAQ / legal section switchers) ----------------------------- */

.chip-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.chip-nav .btn { --py: 14px; --px: 20px; font-size: 15px; }
.chip-nav .btn--outline { --py: 14px; --px: 20px; }