* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: var(--radius); background: var(--paper); color: var(--ink); font: var(--weight-regular) var(--size-15)/var(--line-body) var(--font-body); }
body.cart-open { overflow: hidden; }
button, input { font: inherit; }
button, summary { color: inherit; }
a { color: inherit; text-decoration-color: var(--clay); text-underline-offset: var(--space-4); }
img { display: block; max-width: var(--full); }
[hidden] { display: none !important; }
:focus-visible { outline: var(--focus) solid var(--clay); outline-offset: var(--space-4); }
.content-grid { width: min(var(--full), var(--max-content)); margin-inline: auto; padding-inline: var(--gutter-desktop); }
.label, .species-line, legend { margin: var(--radius); font-size: var(--size-11); font-weight: var(--weight-semibold); letter-spacing: var(--line-label); line-height: var(--line-body); text-transform: uppercase; }
.wordmark { font: var(--weight-semibold) var(--size-18)/1 var(--font-display); letter-spacing: var(--line-label); text-decoration: none; }
.store-header { position: sticky; z-index: var(--z-header); top: var(--radius); height: var(--header-height); border-bottom: var(--rule) solid var(--ink); background: var(--paper); }
.store-header__inner { display: flex; width: min(var(--full), var(--max-content)); height: var(--full); margin-inline: auto; padding-inline: var(--gutter-desktop); align-items: center; justify-content: space-between; }
.store-nav { display: flex; align-items: center; gap: var(--space-32); font-size: var(--size-13); font-weight: var(--weight-semibold); }
.store-nav a { text-decoration: none; }
.store-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--clay); }
.cart-trigger { min-height: var(--min-touch); padding: var(--radius); border: var(--radius); background: transparent; cursor: pointer; }
.masthead { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-20); padding-block: var(--space-84); border-bottom: var(--rule) solid var(--ash); }
.masthead__statement { grid-column: 1 / span 7; }
.masthead h1 { max-width: var(--measure); margin: var(--space-12) var(--radius) var(--space-32); color: var(--moss); font: var(--weight-regular) var(--size-76)/var(--line-tight) var(--font-display); font-variation-settings: "opsz" 144; }
.masthead__statement > p:last-child { max-width: var(--measure-small); margin: var(--radius); }
.masthead__edition { grid-column: 10 / span 3; align-self: end; border-top: var(--rule) solid var(--ink); padding-top: var(--space-12); font-size: var(--size-13); }
.masthead__edition p:last-child { margin-bottom: var(--radius); }
.category-rail { display: flex; gap: var(--space-32); padding-block: var(--space-32); border-bottom: var(--rule) solid var(--ash); }
.category-rail a { font-size: var(--size-13); font-weight: var(--weight-semibold); text-decoration: none; }
.category-rail a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: var(--focus); }
.catalogue-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: var(--space-84) var(--space-20); padding-block: var(--space-52) calc(var(--space-84) * 2); }
.product-card { min-width: var(--radius); }
.catalogue-grid > .product-card:nth-child(3n + 2) { transform: translateY(var(--space-52)); }
.product-card--wide { grid-column: span 2; }
.product-card__image { position: relative; display: block; aspect-ratio: var(--image-card); overflow: hidden; background: var(--ash); }
.product-card--wide .product-card__image { aspect-ratio: var(--image-wide); }
.product-card__image img { width: var(--full); height: var(--full); object-fit: cover; }
.product-card__alternate { position: absolute; inset: var(--radius); opacity: var(--radius); transition: opacity var(--duration) var(--ease); }
.product-card__image:hover .product-card__alternate, .product-card__image:focus-visible .product-card__alternate { opacity: var(--full); }
.product-card__copy { padding-top: var(--space-12); border-top: var(--rule) solid var(--ink); }
.product-card h2 { margin: var(--radius) var(--radius) var(--space-8); color: var(--moss); font: var(--weight-regular) var(--size-18)/var(--line-heading) var(--font-display); }
.product-card h2 a { text-decoration: none; }
.species-line { margin-bottom: var(--space-8); }
.species-line span, .status { color: var(--clay); }
.price { margin: var(--radius); font-size: var(--size-15); }
.store-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-52); max-width: var(--max-content); margin-inline: auto; padding: var(--space-52) var(--gutter-desktop) var(--space-84); border-top: var(--rule) solid var(--ink); font-size: var(--size-13); }
.store-footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.store-footer p { max-width: var(--measure-small); margin: var(--radius); }
.product-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-20); padding-block: var(--space-52) var(--space-84); }
.product-images { grid-column: 1 / span 7; display: grid; gap: var(--space-20); }
.product-images img { width: var(--full); aspect-ratio: var(--image-detail); object-fit: cover; }
.product-detail { grid-column: 8 / span 5; position: sticky; top: calc(var(--header-height) + var(--space-32)); align-self: start; padding-left: var(--space-32); }
.product-detail > .label { color: var(--clay); }
.product-detail h1 { margin: var(--space-12) var(--radius) var(--space-8); color: var(--moss); font: var(--weight-regular) var(--size-34)/var(--line-heading) var(--font-display); }
.product-price { margin: var(--radius) var(--radius) var(--space-32); font-size: var(--size-18); }
.specimen { margin-bottom: var(--space-32); padding: var(--space-20); border: var(--rule) solid var(--ink); }
.specimen > .label { padding-bottom: var(--space-12); border-bottom: var(--rule) solid var(--ash); }
.specimen dl { margin: var(--space-12) var(--radius) var(--radius); }
.specimen dl div { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-12); padding-block: var(--space-8); border-bottom: var(--rule) solid var(--ash); }
.specimen dl div:last-child { border-bottom: var(--radius); }
.specimen dt { color: var(--ash); font-size: var(--size-11); font-weight: var(--weight-semibold); letter-spacing: var(--line-label); text-transform: uppercase; }
.specimen dd { margin: var(--radius); font-size: var(--size-13); }
.product-description { margin: var(--radius) var(--radius) var(--space-32); }
fieldset { margin: var(--radius) var(--radius) var(--space-20); padding: var(--radius); border: var(--radius); }
legend { margin-bottom: var(--space-12); padding: var(--radius); }
.choice-row, .colour-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.choice-pill input, .colour-choice input { position: absolute; opacity: var(--radius); pointer-events: none; }
.choice-pill span { display: grid; min-width: var(--control-height); min-height: var(--control-height); padding-inline: var(--space-12); place-items: center; border: var(--rule) solid var(--ash); border-radius: var(--radius-pill); font-size: var(--size-13); cursor: pointer; }
.choice-pill input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.choice-pill input:focus-visible + span, .colour-choice input:focus-visible + .swatch { outline: var(--focus) solid var(--clay); outline-offset: var(--space-4); }
.choice-pill.is-unavailable span { color: var(--ash); text-decoration: line-through; cursor: not-allowed; }
.colour-choice { display: inline-flex; min-height: var(--control-height); align-items: center; gap: var(--space-8); padding-right: var(--space-12); font-size: var(--size-13); cursor: pointer; }
.swatch { width: var(--swatch-size); height: var(--swatch-size); border: var(--rule) solid var(--ink); border-radius: var(--radius-pill); }
.swatch--paper { background: var(--paper); }.swatch--ink { background: var(--ink); }.swatch--moss { background: var(--moss); }.swatch--clay { background: var(--clay); }.swatch--ash { background: var(--ash); }
.colour-choice input:checked + .swatch { outline: var(--focus) solid var(--clay); outline-offset: var(--space-4); }
.add-button { width: var(--full); min-height: var(--control-height); margin-bottom: var(--space-20); padding: var(--space-12); border: var(--rule) solid var(--moss); border-radius: var(--radius); background: var(--moss); color: var(--paper); font-weight: var(--weight-semibold); cursor: pointer; }
details { border-top: var(--rule) solid var(--ink); }
details:last-of-type { border-bottom: var(--rule) solid var(--ink); }
summary { position: relative; padding-block: var(--space-20); font-size: var(--size-13); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: var(--radius); }
details[open] summary::after { content: "−"; }
details p { margin: var(--radius) var(--radius) var(--space-20); color: var(--ash); font-size: var(--size-13); }
.related { padding-bottom: var(--space-84); }
.related > h2 { margin: var(--space-8) var(--radius) var(--space-32); font: var(--weight-regular) var(--size-34)/var(--line-heading) var(--font-display); }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); }
.cart-backdrop { position: fixed; z-index: var(--z-overlay); inset: var(--radius); background: var(--ink); opacity: var(--opacity-muted); }
.cart-drawer { position: fixed; z-index: var(--z-drawer); top: var(--radius); right: var(--radius); display: grid; grid-template-rows: auto 1fr auto; width: min(var(--drawer-width), var(--drawer-max)); height: var(--viewport); border-left: var(--rule) solid var(--ink); background: var(--paper); }
.cart-head { display: flex; min-height: var(--header-height); padding-inline: var(--space-20); align-items: center; justify-content: space-between; border-bottom: var(--rule) solid var(--ink); }
.cart-head h2 { margin: var(--radius); font: var(--weight-regular) var(--size-24)/1 var(--font-display); }
.icon-control { display: grid; width: var(--min-touch); height: var(--min-touch); padding: var(--radius); place-items: center; border: var(--radius); background: transparent; font-size: var(--size-24); cursor: pointer; }
.cart-lines { overflow-y: auto; padding: var(--space-20); }
.cart-line { display: grid; grid-template-columns: var(--thumb-size) 1fr; gap: var(--space-12); padding-block: var(--space-20); border-bottom: var(--rule) solid var(--ash); }
.cart-line img { width: var(--thumb-size); aspect-ratio: var(--image-card); object-fit: cover; }
.cart-line h3 { margin: var(--radius) var(--radius) var(--space-4); font: var(--weight-regular) var(--size-18)/var(--line-heading) var(--font-display); }
.cart-line p { margin: var(--radius) var(--radius) var(--space-8); font-size: var(--size-13); }
.quantity { display: inline-grid; grid-template-columns: var(--stepper-size) var(--stepper-size) var(--stepper-size); border: var(--rule) solid var(--ink); }
.quantity button, .quantity span { display: grid; width: var(--stepper-size); height: var(--stepper-size); padding: var(--radius); place-items: center; border: var(--radius); background: transparent; font-size: var(--size-13); }
.quantity button { cursor: pointer; }
.remove-line { margin-left: var(--space-12); padding: var(--radius); border: var(--radius); border-bottom: var(--rule) solid var(--clay); background: transparent; font-size: var(--size-11); cursor: pointer; }
.cart-empty { padding-block: var(--space-52); }
.cart-empty p { margin: var(--radius) var(--radius) var(--space-12); }
.cart-summary { padding: var(--space-20); border-top: var(--rule) solid var(--ink); }
.cart-summary > div { display: flex; margin-bottom: var(--space-20); justify-content: space-between; }
.checkout-disabled { width: var(--full); min-height: var(--control-height); padding: var(--space-12); border: var(--rule) solid var(--ash); border-radius: var(--radius); background: var(--ash); color: var(--paper); opacity: var(--opacity-disabled); }
.not-found { min-height: calc(var(--viewport) - var(--header-height)); padding-block: var(--space-84); }
.not-found h1 { max-width: var(--measure); margin: var(--space-12) var(--radius) var(--space-20); color: var(--moss); font: var(--weight-regular) var(--size-76)/var(--line-tight) var(--font-display); }
.not-found > p { max-width: var(--measure-small); }
.text-link { display: inline-block; margin-top: var(--space-20); font-weight: var(--weight-semibold); }
@media (max-width: 900px) {
  .masthead { padding-block: var(--space-52); }
  .masthead__statement { grid-column: 1 / span 9; }
  .masthead__edition { grid-column: 10 / span 3; }
  .masthead h1 { font-size: var(--size-52); }
  .catalogue-grid { grid-template-columns: repeat(2, 1fr); }
  .catalogue-grid > .product-card:nth-child(3n + 2) { transform: none; }
  .product-card--wide { grid-column: auto; }
  .product-card--wide .product-card__image { aspect-ratio: var(--image-card); }
  .product-layout { grid-template-columns: repeat(2, 1fr); }
  .product-images, .product-detail { grid-column: auto; }
  .product-detail { padding-left: var(--radius); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .content-grid { padding-inline: var(--gutter-mobile); }
  .store-header__inner { padding-inline: var(--gutter-mobile); }
  .store-nav { gap: var(--space-20); }
  .wordmark { font-size: var(--size-13); }
  .store-nav { gap: var(--space-8); font-size: var(--size-11); }
  .masthead { display: block; }
  .masthead h1 { font-size: var(--size-52); }
  .masthead__edition { margin-top: var(--space-32); }
  .category-rail { gap: var(--space-20); overflow-x: auto; }
  .catalogue-grid { grid-template-columns: 1fr; gap: var(--space-52); padding-bottom: var(--space-84); }
  .store-footer { grid-template-columns: 1fr; padding-inline: var(--gutter-mobile); }
  .product-layout { display: block; padding-top: var(--space-20); }
  .product-detail { position: static; padding-top: var(--space-32); }
  .related-grid { grid-template-columns: 1fr; }
  .not-found h1 { font-size: var(--size-52); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }