@import url("./components/skeleton.css");
/* Shared runtime primitives. Original D22 token export remains untouched.
   Compact contexts may override padding/type; never the 44px interaction floor. */
.button {
  font-family:var(--font-ui);
  font-size:var(--type-ui);
  font-weight:var(--weight-medium);
  line-height:var(--line-label);
  min-height:var(--target-min);
  gap:var(--space-1);
  border-radius:var(--radius-2);
  padding:var(--space-detail) var(--space-2);
}
.button-secondary {background:transparent}
.button-secondary:not(:disabled) {border-color:var(--ink-muted)}
.button:disabled {
  opacity:1;
  background:var(--surface-soft);
  color:var(--ink-muted);
  border-color:var(--line);
  transform:none;
  box-shadow:none;
}
.button:hover:disabled {transform:none;box-shadow:none}
/* The 200 × 104 viewport meets inside 96 × 40 without distorting the paths.
   Centering this box in the 64px mobile masthead leaves at least one spark X
   (12.31px) above and below the visible ink; the 72px masthead has more room. */
.wordmark-logo {display:block;width:96px;height:40px;color:var(--jt-forest);flex:none}
[data-theme=dark] .wordmark-logo {color:var(--jt-ivory)}
.footer-brand .wordmark-logo {color:var(--jt-ivory);margin-bottom:var(--space-detail)}

/* One ProductCard presentation for runtime data and explicitly labelled specimens.
   Layout grids remain page compositions; states never assert price or availability. */
.product-card.product-card {
  position:relative;
  z-index:0;
  min-width:0;
  background:var(--surface);
  color:var(--ink);
  border:var(--border-width) solid var(--line);
  border-radius:var(--radius-3);
  overflow:visible;
  transform:none;
  box-shadow:none;
  transition:transform var(--motion-card) var(--ease-standard),box-shadow var(--motion-card) var(--ease-standard),border-color var(--motion-card) var(--ease-standard),background-color var(--motion-card) var(--ease-standard);
}
.product-card .product-card-media {position:relative;overflow:hidden;border-radius:calc(var(--radius-3) - var(--border-width)) calc(var(--radius-3) - var(--border-width)) 0 0}
.product-card .product-card-art {position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:var(--surface-soft);width:100%;min-width:0}
.product-card .product-card-art>svg {display:block;width:100%;height:auto;aspect-ratio:16/9}
.product-card .product-card-body {display:flex;flex-direction:column;flex:1;min-width:0;padding:var(--space-2);border-radius:0 0 var(--radius-3) var(--radius-3)}
.product-card .product-card-body .product-card-title {font-family:var(--font-ui);font-size:var(--type-md);font-weight:var(--weight-semibold);line-height:var(--line-copy);color:var(--ink);margin:0 0 var(--space-1);min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .product-card-actions {display:grid;grid-template-columns:1fr var(--target-min);gap:var(--space-1);margin-top:auto;padding-top:var(--space-1)}
.product-card .product-card-body .product-card-actions>.button {font-family:var(--font-ui);font-size:var(--type-ui);font-weight:var(--weight-medium);line-height:var(--line-label);min-height:var(--target-min);padding:var(--space-detail);border-radius:var(--radius-2)}
.product-card .product-card-actions>.icon-button {width:var(--target-min);height:var(--target-min);border-radius:var(--radius-2);border:var(--border-width) solid var(--ink-muted);background:var(--surface);color:var(--ink)}
.product-card .product-card-save {position:absolute;top:var(--space-1);right:var(--space-1);width:var(--target-min);height:var(--target-min);border:var(--border-width) solid var(--line-strong);border-radius:var(--radius-circle);background:var(--surface-raised);color:var(--ink)}
.product-card .product-card-save>.icon,.product-card .product-card-actions>.icon-button>.icon {width:var(--icon-size-lg);height:var(--icon-size-lg);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.product-card.product-card:is(:hover,[data-card-state=hover]):not([data-card-state=sold-out]) {transform:translateY(calc(-1 * var(--motion-distance-hover)));box-shadow:var(--shadow-raised);border-color:var(--gold-ink)}
.product-card.product-card:is(:has(button:active:not(:disabled)),[data-card-state=pressed]) {transform:translateY(var(--motion-distance-press));box-shadow:none;border-color:var(--ink-muted);background:var(--surface-soft);transition-duration:var(--motion-press)}
.product-card.product-card:is([data-saved=true],[data-card-state=saved]) {border-color:var(--success)}
.product-card .product-card-save[aria-pressed=true] {background:var(--success-soft);color:var(--success);border-color:var(--success)}
.product-card .product-card-save[aria-pressed=true]>.icon {fill:currentColor}
.product-card.product-card:is(:focus-within:has(:focus-visible),[data-card-state=focus]) {outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset);z-index:1}
.product-card .product-card-save:focus-visible,.product-card .product-card-actions>:focus-visible {outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
.product-card[data-card-state=sold-out] .product-card-media {background:var(--surface-soft)}
@media(max-width:760px) {.product-card .product-card-body .product-card-title {font-size:var(--type-sm);min-height:0}}
[data-reduce-motion=true] .product-card.product-card,[data-reduced-motion=true] .product-card.product-card {transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce) {.product-card.product-card {transition:none;transform:none!important}}