/*
  Soft Edge -- shop layer.

  Every page skin: the colourway-led hero, the story sections, the catalog,
  journal, policies, bag, and checkout. Replaces the old specimen-sheet
  stylesheets (soft-edge-ribbon.css / soft-edge-store.css).

  House rules: big rounded blocks, generous type, sentence case, and colour
  supplied by the chosen ribbon rather than by fixed brand chrome.
*/

/* --- Section furniture ---------------------------------------------------- */

.section {
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--gutter);
}

.section--tint {
  background: var(--way-tint);
  border-radius: var(--radius-lg);
  margin-inline: var(--page-margin);
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  transition: background 500ms var(--ease-out);
}

.section-head {
  max-width: 36rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.section-head h2 {
  margin: 0.6rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.section-head p {
  margin: 0;
  color: var(--soft);
  font-size: 1.08rem;
}

.eyebrow {
  margin: 0;
  color: var(--way-deep);
  font-size: 0.95rem;
  font-weight: 700;
}

/* --- Hero: gallery + buy box ---------------------------------------------- */

.ribbon-hero {
  padding: clamp(1.4rem, 3vw, 2.6rem) var(--gutter) clamp(2.4rem, 5vw, 4rem);
}

/* The media column is capped rather than proportional. Left as a fraction it
   grew with the page and produced a product shot taller than the viewport. */
.ribbon-hero__shell {
  display: grid;
  grid-template-columns: minmax(0, var(--gallery-max)) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
  max-width: 64rem;
  margin-inline: auto;
}

@media (max-width: 940px) {
  .ribbon-hero__shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Gallery -------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  max-width: var(--gallery-max);
}

.gallery__main {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--cream-deep);
}

.gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.7rem;
}

.gallery__thumb {
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out);
}

.gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumb:hover,
.gallery__thumb:focus-visible {
  border-color: var(--way);
}

.gallery__thumb[aria-pressed="true"] {
  border-color: var(--ink);
}

/* --- Buy box -------------------------------------------------------------- */

.ribbon-hero__buy {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.ribbon-hero__buy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.hero-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: baseline;
}

.hero-price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.03em;
}

.hero-price-row span {
  color: var(--muted);
  font-size: 0.95rem;
}

.hero-deck {
  max-width: 46ch;
  margin: 0;
  color: var(--soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.option-block {
  display: grid;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

.option-block__head {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.option-block__head strong {
  font-weight: 700;
}

.length-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.length-picker button {
  min-width: 4.4rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--pill);
  background: var(--white);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}

.length-picker button:hover {
  border-color: var(--ink);
}

.length-picker button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--way);
  color: var(--way-contrast);
}

.length-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.hero-buy {
  display: grid;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

.hero-buy .button,
.hero-buy__form .button {
  width: 100%;
  justify-content: center;
}

.hero-buy__form {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.mock-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero-facts li {
  padding: 0.42rem 0.9rem;
  border-radius: var(--pill);
  background: var(--cream-deep);
  font-size: 0.88rem;
  font-weight: 600;
}

/* --- Shop grid ------------------------------------------------------------ */

.shop-grid-section,
.materials-section,
.service-section {
  padding: clamp(2.4rem, 5vw, 4.2rem) 0;
}

/* These sections pad their own children rather than themselves, so the heading
   has to pick up the same gutter as the grid it introduces.

   This must be margin, not padding. .section-head is max-width capped, and
   under border-box a padding gutter is subtracted from that cap: once the
   gutter reached half the cap (~2016px viewport) the text collapsed to one
   character per line. Margin sits outside the max-width box. */
.shop-grid-section > .section-head,
.materials-section > .section-head {
  margin-inline: var(--gutter);
}

/* Gutter as margin, not padding: this rule is max-width capped further down,
   and padding would be subtracted from that cap. */
.grid-footnote {
  margin: 1.4rem var(--gutter) 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* --- Materials ------------------------------------------------------------ */

.material-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.2rem;
  padding: 0 var(--gutter);
}

.material-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
}

.material-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.material-card__body {
  display: grid;
  gap: 0.7rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

.material-card__tier {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: space-between;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.03em;
}

.material-card__body p {
  max-width: 42ch;
  margin: 0;
  color: var(--soft);
}

.material-card dl {
  display: grid;
  gap: 0.4rem;
  padding-top: 0.8rem;
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.material-card dl div {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.material-card dt {
  color: var(--muted);
}

.material-card dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* --- Shipping and returns strip ------------------------------------------- */

.service-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.2rem;
  padding: 0 var(--gutter);
  margin: 0;
  list-style: none;
}

.service-strip li {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius);
  background: var(--white);
}

.service-strip h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.service-strip p {
  margin: 0;
  color: var(--soft);
  font-size: 0.95rem;
  line-height: 1.55;
}


/* --- Page furniture ------------------------------------------------------- */

.page-head {
  display: grid;
  gap: 0.7rem;
  padding: clamp(2.6rem, 5vw, 4.5rem) var(--gutter) clamp(1.6rem, 3vw, 2.4rem);
}

.page-head h1 {
  max-width: 20ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.04em;
  line-height: 1;
}

.page-head__deck {
  max-width: 44ch;
  margin: 0;
  color: var(--soft);
  font-size: 1.08rem;
}

.page-rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

/* --- Long-form content ---------------------------------------------------- */

/* Centred prose column. The gutter is for full-bleed sections and must not be
   used here: under border-box it is subtracted from max-width, and past about
   1500px it consumed the whole 44rem measure and squeezed the text to nothing.
   Pad by the small page margin and add it back to the cap so the measure stays
   a true 44rem at every width. */
.content-page,
.article-page {
  max-width: calc(44rem + var(--page-margin) * 2);
  padding: clamp(2.4rem, 5vw, 4rem) var(--page-margin) clamp(3.5rem, 7vw, 5.5rem);
  margin-inline: auto;
}

.content-page h1,
.article-page h1 {
  margin: 0.7rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.content-meta,
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.95rem;
}

.rte h2 {
  margin: 2.3rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.025em;
}

.rte h3 {
  margin: 1.6rem 0 0.4rem;
  font-size: 1.08rem;
  font-weight: 700;
}

.rte p,
.rte li {
  color: var(--soft);
  font-size: 1.02rem;
  line-height: 1.7;
}

.rte p {
  margin: 0 0 1rem;
}

.rte ul,
.rte ol {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.3rem;
  margin: 0 0 1.2rem;
}

.draft-note {
  display: grid;
  gap: 0.3rem;
  padding: 1.2rem 1.4rem;
  margin-bottom: 2rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, var(--cream));
}

.draft-note p {
  margin: 0;
}

.draft-note .eyebrow {
  color: var(--accent-text);
}

/* --- Catalog -------------------------------------------------------------- */

.product-grid,
.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem;
  padding: 0 var(--gutter);
  margin: 0;
  list-style: none;
}

/* The catalogue steps down 4 -> 3 -> 2 rather than using auto-fit. auto-fit
   packs as many columns as will fit, which on a wide screen leaves a ragged
   part-filled last row, and on a phone collapses to one very long column. */
.product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .product-grid {
    gap: 0.8rem;
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-deep);
  transition: transform 260ms var(--ease-out);
}

.product-card:hover {
  transform: translateY(-4px);
}

/* Cards are photograph-led: the image fills the frame edge to edge rather than
   floating a cut-out on a tinted field. */
.product-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.product-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--card-tint, var(--cream-deep));
}

.product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-out);
}

.product-card:hover .product-card__media img {
  transform: scale(1.04);
}

.product-card__flag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--pill);
  background: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
}

.product-card__tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--pill);
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.2rem 1.3rem 1.4rem;
}

.product-card__body h2,
.product-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.025em;
}

.product-card__body a {
  text-decoration: none;
}

.product-card__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Pushed to the bottom of the card so prices line up across a row even when a
   longer title wraps to two lines. */
.product-card__price {
  margin: 0.4rem 0 0;
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.product-card__foot {
  margin-top: auto;
  padding-top: 1rem;
}

.product-card__foot .button {
  width: 100%;
  min-height: 3rem;
}

/* --- Search --------------------------------------------------------------- */

.search-page {
  padding: clamp(2.4rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
}

.search-form {
  display: flex;
  gap: 0.6rem;
  max-width: 34rem;
  margin: 1.2rem 0 1.4rem;
  padding: 0.4rem 0.4rem 0.4rem 1.3rem;
  border-radius: var(--pill);
  background: var(--cream-deep);
}

.search-form input {
  flex: 1;
  border: 0;
  background: transparent;
}

.search-form input:focus-visible {
  outline: none;
}

.search-form .button {
  min-height: 3rem;
  padding-inline: 1.4rem;
}

.search-summary {
  margin: 0 0 1.6rem;
  color: var(--muted);
}

.search-results {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.search-result {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--cream-deep);
}

.search-result img {
  border-radius: var(--radius-sm);
  background: var(--white);
}

.search-result__body p {
  margin: 0;
}

.search-result__body a {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.search-result__kind {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.search-empty {
  max-width: 34rem;
  color: var(--soft);
}

.search-empty ul {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.3rem;
  margin: 0.7rem 0 0;
}

/* --- Journal -------------------------------------------------------------- */

.journal-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius);
  background: var(--cream-deep);
}

.journal-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.journal-card h2 a {
  text-decoration: none;
}

.journal-card p {
  margin: 0;
  color: var(--soft);
}

.journal-card__more {
  margin-top: auto;
  padding-top: 0.7rem;
  font-weight: 700;
}

/* Padded to a 24px minimum target; the bare link was 20px tall. */
.journal-card__more a {
  display: inline-block;
  padding-block: 0.25rem;
}

.article-comments {
  padding-top: 2rem;
  margin-top: 2.4rem;
  border-top: 1px solid var(--hairline);
}

.article-comments h2 {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--font-display-weight);
}

.comment {
  padding: 1rem 1.2rem;
  margin-bottom: 0.7rem;
  border-radius: var(--radius);
  background: var(--cream-deep);
}

.comment__meta {
  margin: 0 0 0.3rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.comment p:last-child {
  margin: 0;
}

.comment-form {
  display: grid;
  gap: 0.9rem;
  max-width: 32rem;
  margin-top: 1.6rem;
}

.comment-form label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1.1rem;
  border: 2px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.comment-form textarea {
  min-height: 7rem;
  resize: vertical;
}

/* --- Error and password --------------------------------------------------- */

.error-page,
.password-main {
  display: grid;
  align-content: center;
  gap: 1.1rem;
  min-height: 60vh;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
  justify-items: start;
}

.error-page h1,
.password-main h1 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.error-page p,
.password-main > p {
  max-width: 36rem;
  margin: 0;
  color: var(--soft);
  font-size: 1.08rem;
}

.password-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

.password-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.4rem 0.4rem 0.4rem 1.3rem;
  border-radius: var(--pill);
  background: var(--cream-deep);
}

.password-form input {
  min-width: min(15rem, 60vw);
  border: 0;
  background: transparent;
}

.password-form input:focus-visible {
  outline: none;
}

.password-foot {
  padding: 1.4rem var(--gutter);
  color: var(--muted);
  font-size: 0.92rem;
}

/* --- Bag ------------------------------------------------------------------ */

.bag {
  position: fixed;
  z-index: 120;
  inset: 0;
  visibility: hidden;
}

.bag.is-open {
  visibility: visible;
}

.bag__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
}

.bag.is-open .bag__backdrop {
  opacity: 1;
}

.bag__panel {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  bottom: 0.7rem;
  display: flex;
  flex-direction: column;
  width: min(27rem, calc(100vw - 1.4rem));
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow);
  transform: translateX(calc(100% + 1.4rem));
  transition: transform 340ms var(--ease-out);
}

.bag.is-open .bag__panel {
  transform: translateX(0);
}

.bag__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.3rem 1.4rem 1rem;
}

.bag__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.03em;
}

.bag__tag {
  margin: 0;
  padding: 0.25rem 0.7rem;
  border-radius: var(--pill);
  background: var(--cream-deep);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.bag__close {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--cream-deep);
  font-size: 1.05rem;
  line-height: 1;
}

.bag__close:hover {
  color: var(--way-contrast);
  background: var(--way);
}

.bag__note {
  margin: 0 1.4rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
  color: var(--muted);
  font-size: 0.9rem;
}

.bag__items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.4rem;
  margin: 0;
  list-style: none;
}

.bag__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem 0;
}

.bag__item + .bag__item {
  border-top: 1px solid var(--hairline);
}

.bag__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.02em;
}

.bag__item span {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.bag__controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bag__controls button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--cream-deep);
  line-height: 1;
}

.bag__controls button:hover {
  color: var(--way-contrast);
  background: var(--way);
}

.bag__controls span {
  min-width: 1.3rem;
  font-weight: 700;
  text-align: center;
}

.bag__line-price {
  font-weight: 700;
}

.bag__empty {
  padding: 2.2rem 1.4rem;
  margin: 0;
  color: var(--muted);
}

.bag__foot {
  display: grid;
  gap: 0.6rem;
  padding: 1.2rem 1.4rem 1.4rem;
  border-top: 1px solid var(--hairline);
}

.bag__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 600;
}

.bag__subtotal strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.02em;
}

/* --soft, not --muted: this panel is way-tinted and darkens per colourway. */
.bag__small {
  margin: 0;
  color: var(--soft);
  font-size: 0.9rem;
}

/* --- Cookie choices ------------------------------------------------------- */

.consent {
  position: fixed;
  z-index: 130;
  right: 1rem;
  bottom: 1rem;
  display: none;
  width: min(25rem, calc(100vw - 2rem));
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow);
}

.consent.is-visible {
  display: block;
}

.consent p {
  margin: 0.5rem 0 0;
  color: var(--soft);
  font-size: 0.96rem;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.consent__actions .button {
  flex: 1;
  min-height: 3rem;
  padding-inline: 1rem;
  font-size: 0.95rem;
}

.bag-open .consent.is-visible {
  display: none;
}

/* --- Simulated checkout --------------------------------------------------- */

.co-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem var(--gutter);
}

.co-note {
  display: grid;
  gap: 0.3rem;
  margin: clamp(1.4rem, 3vw, 2.2rem) var(--gutter) 0;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, var(--cream));
}

.co-note p {
  margin: 0;
}

.co-note .eyebrow {
  color: var(--accent-text);
}

.co-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
}

.co-panel h2 {
  margin: 2rem 0 1rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.025em;
}

.co-panel h2:first-child {
  margin-top: 0;
}

.co-field {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}

.co-field label {
  color: var(--muted);
  font-size: 0.95rem;
}

.co-field input {
  min-height: 3.1rem;
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
  color: var(--muted);
  cursor: not-allowed;
}

.co-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.co-summary {
  align-self: start;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  background: var(--way-tint);
}

.co-summary h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.025em;
}

.co-summary ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.co-summary li,
.co-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}

.co-row--total {
  border-bottom: 0;
  font-weight: 700;
}

/* --- Cart ----------------------------------------------------------------- */

.cart-page {
  max-width: 52rem;
  padding: clamp(2.4rem, 5vw, 4rem) var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
  margin-inline: auto;
}

.cart-page h1 {
  margin: 0.7rem 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.035em;
}

.cart-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.1rem 1.2rem;
  margin-bottom: 0.7rem;
  border-radius: var(--radius);
  background: var(--cream-deep);
}

.cart-row img {
  border-radius: var(--radius-sm);
  background: var(--white);
}

.cart-row__info p {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.cart-row__qty {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.cart-row__qty input {
  width: 3.6rem;
  min-height: 2.8rem;
  padding: 0.4rem;
  border: 2px solid var(--hairline);
  border-radius: var(--pill);
  background: var(--white);
  text-align: center;
}

.cart-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
}

.cart-total {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.02em;
}

.cart-empty {
  padding: 2rem 0;
  color: var(--muted);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1000px) {
  .ribbon-hero__shell {
    grid-template-columns: 1fr;
  }

  .co-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .co-grid-2 {
    grid-template-columns: 1fr;
  }

  .search-result,
  .cart-row {
    grid-template-columns: 3.6rem minmax(0, 1fr);
  }

  .search-result .product-card__price,
  .cart-row__qty {
    grid-column: 2;
  }

  .bag__panel {
    inset: 0;
    width: 100%;
    border-radius: 0;
    transform: translateX(100%);
  }

  .consent {
    right: 0.7rem;
    bottom: 0.7rem;
    left: 0.7rem;
    width: auto;
  }

  .section--tint,
  .ribbon-hero__shell {
    border-radius: var(--radius);
  }
}

/* --- Product page --------------------------------------------------------- */

.product-page {
  display: grid;
  grid-template-columns: minmax(0, var(--gallery-max)) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
  max-width: calc(64rem + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(1.6rem, 3vw, 2.8rem) var(--gutter) clamp(2.6rem, 5vw, 4.2rem);
}

@media (max-width: 940px) {
  .product-page {
    grid-template-columns: minmax(0, 1fr);
  }
}

.product-page__info {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.product-page__info h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.product-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.03em;
}

.product-description {
  max-width: 48ch;
  color: var(--soft);
  line-height: 1.6;
}

.product-buy-form {
  display: grid;
  gap: 0.7rem;
  padding-top: 1rem;
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.product-buy-form label {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Form controls carry an intrinsic minimum width that becomes a floor inside a
   grid track; min-width: 0 lets them shrink with the column instead. */
.product-buy-form select,
.product-buy-form input {
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font: inherit;
}

.quantity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 7rem);
  gap: 0.7rem;
  align-items: center;
}

.micro-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.micro-proof li {
  padding: 0.42rem 0.9rem;
  border-radius: var(--pill);
  background: var(--cream-deep);
  font-size: 0.88rem;
  font-weight: 600;
}

.product-accordion {
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

.product-accordion summary {
  font-weight: 700;
  cursor: pointer;
}

.product-accordion p {
  max-width: 48ch;
  margin: 0.7rem 0 0;
  color: var(--soft);
  line-height: 1.6;
}

.product-spec {
  display: grid;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
}

.product-spec div {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}

.product-spec dt {
  color: var(--muted);
}

.product-spec dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-card__media img {
    transform: none;
  }
}

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

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 1.4rem var(--gutter) 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Padded to a 24px minimum target; the bare links were 23px tall. */
.breadcrumb a {
  display: inline-block;
  padding-block: 0.25rem;
  color: inherit;
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* --- Readable measure ------------------------------------------------------
   Long-form text in full-bleed sections has no column to constrain it, so on a
   wide monitor it ran the entire content width. Cap the measure; these all sit
   inside gutter-padded parents, so a plain max-width is enough. */

.grid-footnote,
.search-summary,
.journal-card p,
.co-note p {
  max-width: 68ch;
}

.service-strip p {
  max-width: 46ch;
}

/* --- Free-shipping meter ---------------------------------------------------
   Fill uses the live colourway rather than a fixed brand hue, so the drawer
   stays coherent with whatever the shopper picked. */

.ship-meter {
  display: grid;
  gap: 0.5rem;
  padding: 0 1.4rem 1rem;
}

.ship-meter__text {
  margin: 0;
  color: var(--soft);
  font-size: 0.9rem;
  font-weight: 600;
}

.ship-meter__track {
  overflow: hidden;
  height: 0.5rem;
  border-radius: var(--pill);
  background: var(--cream-deeper);
}

.ship-meter__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--pill);
  background: var(--way);
  transition: width 420ms var(--ease-out), background 500ms var(--ease-out);
}

.ship-meter.is-complete .ship-meter__text {
  color: var(--way-deep);
}

@media (prefers-reduced-motion: reduce) {
  .ship-meter__fill {
    transition: none;
  }
}