* { 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); }
/* Inter needs display sizes pulled tight; one rule rather than per-heading. */
h1, h2, h3 { letter-spacing: var(--track-display); }
.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; transition: opacity var(--duration) var(--ease); }
.wordmark:hover, .wordmark:focus-visible { opacity: 0.72; }
.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: var(--full); height: var(--full); padding-inline: var(--gutter-desktop); align-items: center; justify-content: space-between; }
.store-nav { display: flex; align-items: center; gap: var(--space-4); }
.store-nav__icon { position: relative; display: inline-grid; place-items: center; width: var(--min-touch); height: var(--min-touch); padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background var(--duration) var(--ease); }
.store-nav__icon svg { transition: transform var(--duration) var(--ease); }
.store-nav__icon:hover, .store-nav__icon:focus-visible { background: rgba(20, 32, 28, 0.1); }
.store-nav__icon:hover svg, .store-nav__icon:focus-visible svg { transform: scale(1.12); }
.store-nav__icon:active svg { transform: scale(0.94); }
.shop-index-page .store-nav__icon:hover, .shop-index-page .store-nav__icon:focus-visible { background: rgba(244, 241, 234, 0.2); }
/* The icon's name slides in underneath on hover and keyboard focus. */
.store-nav__icon::before {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--size-11);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.store-nav__icon:hover::before, .store-nav__icon:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
.shop-index-page .store-nav__icon::before { background: var(--paper); color: var(--ink); }
.store-nav__icon[aria-current="page"]::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--clay); }
.cart-count { position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--clay); color: var(--paper); font-size: 10px; font-weight: var(--weight-semibold); line-height: 16px; text-align: center; }
.cart-count:empty { display: none; }
.shop-nav-bar { position: sticky; z-index: 15; top: var(--header-height); background: var(--paper); border-bottom: var(--rule) solid var(--ink); }
.shop-nav-bar__inner { display: flex; gap: var(--space-20); width: var(--full); padding-inline: var(--gutter-desktop); overflow-x: auto; }
.category-nav-item { position: relative; flex: none; }
.category-nav-trigger { padding: var(--space-12) var(--radius); border: var(--radius); background: none; color: inherit; font-size: var(--size-13); font-weight: var(--weight-semibold); white-space: nowrap; cursor: pointer; }
/* The row scrolls sideways, which clips anything outside it: keep the focus ring inside. */
.category-nav-trigger:focus-visible { outline-offset: -2px; }
.category-nav-trigger { transition: color var(--duration) var(--ease); }
.category-nav-trigger:hover, .category-nav-trigger[aria-expanded="true"] { color: var(--clay); }
.category-dropdown { position: fixed; z-index: 15; display: flex; flex-direction: column; min-width: 12rem; padding-block: var(--space-8); border: var(--rule) solid var(--ink); background: var(--paper); box-shadow: 0 12px 24px rgba(20, 32, 28, 0.12); }
.category-dropdown a { padding: var(--space-8) var(--space-20); font-size: var(--size-13); text-decoration: none; white-space: nowrap; }
.category-dropdown a:hover, .category-dropdown a:focus-visible { color: var(--clay); }
.category-dropdown a:last-child:not(:first-child) { margin-top: var(--space-4); padding-top: var(--space-12); border-top: var(--rule) solid var(--ash); color: var(--ash); }
@media (max-width: 640px) {
  .shop-nav-bar__inner { padding-inline: var(--gutter-mobile); gap: var(--space-12); }
}
.masthead { padding-block: var(--space-84); border-bottom: var(--rule) solid var(--ash); }
.masthead__statement > .label a { color: var(--clay); }
.masthead h1 { max-width: var(--measure); margin: var(--space-12) var(--radius) var(--space-32); color: var(--moss); font: var(--weight-display) var(--size-52)/var(--line-tight) var(--font-display); }
.masthead__statement > p:last-child { max-width: var(--measure-small); margin: var(--radius); }
.catalogue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-52) var(--space-20); padding-block: var(--space-52) calc(var(--space-84) * 2); }
.product-card { position: relative; min-width: var(--radius); background: var(--paper-deep); border: var(--rule) solid transparent; transition: border-color var(--duration) var(--ease); }
.product-card:hover, .product-card:focus-within { border-color: var(--moss); }
.product-card__image { position: relative; display: block; aspect-ratio: var(--image-card); overflow: hidden; }
.product-card__image img { width: var(--full); height: var(--full); object-fit: cover; }
.product-card__copy { padding: var(--space-12) var(--space-20) var(--space-20); }
.product-card h2 { margin: var(--radius) var(--radius) var(--space-8); color: var(--moss); font: var(--weight-display) var(--size-18)/var(--line-heading) var(--font-display); }
.product-card h2 a { text-decoration: none; }
/* The whole box is one click target. */
.product-card h2 a::after { content: ""; position: absolute; inset: 0; }
.species-line { margin-bottom: var(--space-8); }
.species-line span, .status { color: var(--clay); }
.shop-hero { position: relative; height: 92vh; min-height: 560px; max-height: 980px; overflow: hidden; background: var(--void); color: var(--paper); text-align: center; }
.shop-hero__media { position: absolute; inset: 0; width: var(--full); height: var(--full); object-fit: cover; opacity: 0.85; transition: opacity 400ms var(--ease); }
.shop-hero__media.is-switching { opacity: 0; }
.shop-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2, 7, 6, 0.85), rgba(2, 7, 6, 0.15) 55%, rgba(2, 7, 6, 0.35)); }
.shop-hero__content { position: absolute; z-index: 1; left: 0; right: 0; bottom: var(--space-52); }
.shop-hero .label { color: var(--paper); opacity: var(--opacity-muted); }
.shop-hero h1 { margin: var(--space-12) var(--radius) var(--space-20); font: var(--weight-display) var(--size-52)/var(--line-tight) var(--font-display); }
.shop-hero__ctas { display: flex; justify-content: center; gap: var(--space-12); }
.shop-hero__credit { margin: var(--space-12) var(--radius) var(--radius); color: var(--paper); opacity: 0.6; font-size: 11px; font-weight: var(--weight-regular); text-transform: none; letter-spacing: normal; }
.shop-hero__credit a { color: inherit; text-decoration-color: rgba(244, 241, 234, 0.4); }
.shop-index-page .store-header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; border-bottom: 0; background: transparent; }
.shop-index-page .wordmark, .shop-index-page .store-nav { color: var(--paper); }
.shop-index-page .shop-nav-bar { position: absolute; top: var(--header-height); left: 0; right: 0; background: transparent; border-bottom: 0; }
.shop-index-page .category-nav-trigger { color: var(--paper); }
.shop-index-page .category-nav-trigger[aria-expanded="true"] { color: var(--clay); }
/* One control shape for the whole site: same height, padding, tracking and
   square corners, whether it sits on paper or on the dark surfaces. */
.button-primary, .button-secondary, .add-to-bag {
  display: inline-flex;
  min-height: var(--control-height);
  padding: var(--space-12) var(--space-32);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: var(--size-13);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration) var(--ease);
}
.button-primary { border: var(--rule) solid var(--paper); background: var(--paper); color: var(--void); }
.button-secondary { border: var(--rule) solid var(--paper); background: transparent; color: var(--paper); }
.button-primary:hover, .button-secondary:hover, .add-to-bag:hover { opacity: var(--opacity-muted); }

.featured-collection { padding-block: var(--space-52) var(--space-32); }

.category-cards { padding-bottom: var(--space-84); }
.category-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); }
/* Type-only tiles: there is no product photography yet, and an animal photo
   here would read as a picture of the clothing. */
.category-card { display: flex; flex-direction: column; min-height: 15rem; padding: var(--space-20); border: var(--rule) solid var(--ink); text-decoration: none; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.category-card__count { color: var(--clay); font-size: var(--size-11); font-weight: var(--weight-semibold); letter-spacing: var(--line-label); text-transform: uppercase; }
.category-card__name { margin-top: var(--space-12); color: var(--moss); font: var(--weight-display) var(--size-34)/var(--line-tight) var(--font-display); letter-spacing: var(--track-display); }
.category-card__blurb { margin-top: var(--space-12); color: var(--ink); opacity: var(--opacity-muted); font-size: var(--size-13); }
.category-card__cta { margin-top: auto; padding-top: var(--space-20); font-size: var(--size-13); font-weight: var(--weight-semibold); }
.category-card:hover, .category-card:focus-visible { background: rgba(47, 71, 57, 0.07); border-color: var(--moss); }
.category-card--featured { min-height: 17rem; padding: var(--space-32); }
.category-card--featured .category-card__name { font-size: var(--size-52); }
.category-card--featured .category-card__blurb { font-size: var(--size-15); max-width: var(--measure-small); }
.category-card:hover .category-card__cta, .category-card:focus-visible .category-card__cta { color: var(--clay); }

.species-collection { padding-block: var(--space-84); border-top: var(--rule) solid var(--ash); }
.species-collection > .label { color: var(--clay); }
.species-collection h2 { max-width: var(--measure); margin: var(--space-12) var(--radius) var(--space-32); color: var(--moss); font: var(--weight-display) var(--size-34)/var(--line-heading) var(--font-display); }
.species-collection__list { margin-bottom: var(--space-20); border-top: var(--rule) solid var(--ink); }
.species-collection__row { display: flex; justify-content: space-between; padding-block: var(--space-12); border-bottom: var(--rule) solid var(--ink); text-decoration: none; }
.species-collection__name { font-weight: var(--weight-semibold); }
.species-collection__pop { color: var(--ash); font-size: var(--size-13); }
.species-collection__row:hover .species-collection__name, .species-collection__row:focus-visible .species-collection__name { color: var(--clay); }

.map-banner { padding-block: var(--space-84); background: var(--moss); color: var(--paper); text-align: center; }
.map-banner .label { color: rgba(244, 241, 234, 0.7); }
.map-banner .button-primary { border-color: var(--paper); background: var(--paper); color: var(--moss); }
/* The band already closes the page; a rule under it reads as a stray line. */
main:has(> .map-banner:last-child) + .store-footer { border-top: 0; }
.map-banner h2 { margin: var(--space-12) var(--radius) var(--space-20); font: var(--weight-display) var(--size-34)/var(--line-heading) var(--font-display); }

.empty-category { padding-block: var(--space-84) calc(var(--space-84) * 2); }
.empty-category h2 { max-width: var(--measure); margin: var(--space-12) var(--radius) var(--space-20); color: var(--moss); font: var(--weight-display) var(--size-52)/var(--line-tight) var(--font-display); }
.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); }
.card-price { margin: var(--radius); font-size: var(--size-13); font-weight: var(--weight-semibold); }
.product-price { margin: var(--radius) var(--radius) var(--space-32); color: var(--moss); font-size: var(--size-18); font-weight: var(--weight-semibold); }
.add-to-bag { border: var(--rule) solid var(--ink); background: var(--ink); color: var(--paper); }
.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); }
/* The whole image fits on screen when the page opens (below the header, the
   category bar and the page's top padding), so scrolling moves the page. */
.product-images img { width: var(--full); background: var(--paper-deep); height: max(20rem, calc(100svh - var(--header-height) - 46px - var(--space-52) - var(--space-32))); object-fit: cover; }
.product-detail { grid-column: 8 / span 5; position: sticky; top: calc(var(--header-height) + 46px + 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-display) var(--size-34)/var(--line-heading) var(--font-display); }

.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); }
.specimen dd i { font-style: normal; color: var(--ash); }
.product-description { margin: var(--radius) var(--radius) var(--space-32); }
.related { padding-bottom: var(--space-84); }
.related-grid { display: grid; grid-template-columns: repeat(3, 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-display) 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-display) 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-display) var(--size-52)/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 h1 { font-size: var(--size-52); }
  .catalogue-grid { grid-template-columns: repeat(2, 1fr); }
  .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); }
  .category-cards__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); }
  .wordmark { font-size: var(--size-13); }
  .store-nav { gap: 0; }
  .masthead h1 { font-size: var(--size-52); }
  .catalogue-grid { grid-template-columns: 1fr; gap: var(--space-52); padding-bottom: var(--space-84); }
  .shop-hero h1 { font-size: var(--size-34); }
  .category-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  .category-card { min-height: 10.5rem; padding: 14px; }
  .category-card__name { margin-top: var(--space-8); font-size: 22px; overflow-wrap: anywhere; }
  .category-card__blurb { margin-top: var(--space-8); font-size: 12px; }
  .category-card__cta { padding-top: var(--space-12); font-size: 12px; }
  .category-card--featured { min-height: 12rem; padding: var(--space-20); }
  .category-card--featured .category-card__name { font-size: var(--size-34); }
  .category-card--featured .category-card__blurb { font-size: var(--size-13); }
  .shop-hero__ctas { flex-direction: column; }
  .store-footer { grid-template-columns: 1fr; padding-inline: var(--gutter-mobile); }
  .product-layout { display: block; padding-top: var(--space-20); }
  .product-images img { height: auto; aspect-ratio: var(--image-detail); }
  .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; } }