/* =============================================================================
   Del Plaza — product
   Product page, gallery zoom & responsive adjustments
   =============================================================================*/

/* =============================================================================
   Product Page
   Blue Dress product template at /product.php
   =============================================================================*/

/* ---- Product Page Spacing ----*/
.product-page {
  padding-top: 0;
}

/* ---- Product Breadcrumb ----*/
.product-breadcrumb {
  padding: var(--spacing-xs) 0 var(--spacing-xxs);
}

.product-breadcrumb .breadcrumb {
  margin-bottom: 0;
}

.product-breadcrumb .breadcrumb-item {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.product-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--cognac);
  content: "›";
}

.product-breadcrumb .breadcrumb-item a {
  color: var(--color-content-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.product-breadcrumb .breadcrumb-item a:hover {
  color: var(--cognac);
}

.product-breadcrumb .breadcrumb-item.active {
  color: var(--color-content-heading);
  font-weight: 600;
}

/* ---- Product Gallery — 4:5 Aspect Ratio ----*/
.product-gallery {
  background-color: var(--color-surface-card);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

.product-gallery__viewport {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--parchment-cream);
}

.product-gallery__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.product-gallery__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  z-index: 1;
}

.product-gallery__slide.active {
  opacity: 1;
  z-index: 2;
}

.product-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Gallery Navigation Arrows ----*/
.product-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--muted-silver);
  color: var(--slate-charcoal);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 0 0 3px 3px;
  transition: all 0.25s var(--ease-out);
  backdrop-filter: blur(4px);
}

.product-gallery__nav:hover {
  background-color: var(--deep-navy);
  color: #ffffff;
  border-color: var(--deep-navy);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.product-gallery__nav:active {
  background-color: var(--imperial-plum);
  border-color: var(--imperial-plum);
  transform: translateY(-50%) translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product-gallery__nav--prev {
  left: var(--spacing-xxs);
}

.product-gallery__nav--next {
  right: var(--spacing-xxs);
}

/* ---- Gallery Footer — Counter & Thumbnails ----*/
.product-gallery__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xxs) var(--spacing-xs);
  background-color: #ffffff;
  border-top: 1px solid var(--muted-silver);
}

.product-gallery__counter {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ash-grey);
  min-width: 3rem;
}

.product-gallery__thumbnails {
  display: flex;
  gap: var(--spacing-nano);
}

.product-gallery__thumb {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: all 0.25s var(--ease-out);
  opacity: 0.55;
}

.product-gallery__thumb:hover {
  opacity: 0.8;
  border-color: var(--cognac);
}

.product-gallery__thumb.active {
  opacity: 1;
  border-color: var(--deep-navy);
}

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

/* ---- Product Details ----*/
.product-details {
  padding: var(--spacing-xxs);
}

.product-details__overline {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--color-content-muted);
  margin-bottom: var(--spacing-nano);
}

.product-details__title {
  font-family: 'Univers Condensed', var(--font-primary);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.10;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-xxs);
}

/* ---- Title Row & Wishlist (sign-out placement pattern) ----*/
.product-details__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xxs);
}

.product-details__wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--slate-charcoal);
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}

.product-details__wishlist i {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
}

.product-details__wishlist:hover,
.product-details__wishlist.is-wished {
  color: var(--imperial-plum);
}

/* ---- Price ----*/
.product-details__price {
  margin: var(--spacing-xs) 0 var(--spacing-xs);
  display: flex;
  align-items: baseline;
  gap: var(--spacing-quark);
}

.product-details__price-currency {
  font-family: 'Univers Extended', var(--font-primary);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 400;
  color: var(--cognac);
}

.product-details__price-amount {
  font-family: 'Univers Extended', var(--font-primary);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--cognac);
  line-height: 1;
}

/* ---- Divider ----*/
.product-details__divider {
  height: 1px;
  background-color: var(--muted-silver);
  margin: var(--spacing-xs) 0;
}

/* ---- Description ----*/
.product-details__description {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.7;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-xs);
}

/* ---- SKU ----*/
.product-details__sku {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-nano);
  margin-bottom: var(--spacing-xxs);
  padding: var(--spacing-quark) 0;
}

.product-details__sku-label {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--ash-grey);
}

.product-details__sku-value {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--slate-charcoal);
}

/* ---- Key Features ----*/
.product-details__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-xs);
}

.product-details__features li {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-content-primary);
  padding-left: var(--spacing-xxs);
  position: relative;
}

.product-details__features li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--cognac);
  font-weight: 500;
}

/* ---- Composition & provenance ----*/
.product-details__composition {
  margin: 0 0 var(--spacing-xs);
}

.product-details__composition-title {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash-grey);
  margin: 0 0 var(--spacing-quark);
}

.product-details__made-at {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-content-primary);
  margin: 0 0 var(--spacing-quark);
}

.product-details__material-kind {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-charcoal);
}

.product-details__components {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--slate-charcoal);
  margin: 0;
}

.product-details__components-label {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash-grey);
  margin-right: var(--spacing-quark);
}

/* ---- Size Selector ----*/
.product-details__size-selector {
  margin-bottom: var(--spacing-xs);
}

.product-details__size-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-nano);
}

.product-details__stock-status {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--tawny-umber);
}

.product-details__label {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-content-heading);
  margin-bottom: 0;
}

.product-details__size-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-nano);
}

.product-details__size-btn {
  min-width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--color-content-primary);
  background-color: #ffffff;
  border: 1px solid var(--muted-silver);
  cursor: pointer;
  border-radius: 0 0 6px 6px;
  transition: all 0.2s var(--ease-out);
  padding: 0 var(--spacing-nano);
}

.product-details__size-btn:hover {
  border-color: var(--cognac);
  color: var(--cognac);
}

.product-details__size-btn.active {
  background-color: var(--deep-navy);
  border-color: var(--deep-navy);
  color: #ffffff;
}

.product-details__size-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product-details__size-btn:disabled,
.product-details__size-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  background-color: var(--muted-silver);
  border-color: var(--ash-grey);
  color: var(--ash-grey);
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ---- Add to Cart CTA ----*/
.product-details__cta {
  width: 100%;
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xxs) var(--spacing-xs);
}

/* ---- Guarantee Badge ----*/
.product-details__guarantee {
  display: flex;
  align-items: center;
  gap: var(--spacing-nano);
  padding: var(--spacing-xxxs) var(--spacing-xs);
  background-color: var(--parchment-cream);
  border-left: 3px solid var(--cognac);
  border-radius: var(--border-radius-sticker);
}

.product-details__guarantee i {
  font-size: 1.125rem;
  color: var(--cognac);
  flex-shrink: 0;
}

.product-details__guarantee span {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-content-primary);
}

.product-details__guarantee strong {
  font-weight: 600;
  color: var(--deep-navy);
}

/* =============================================================================
   Product Promo Section — Typography-driven
   =============================================================================*/
.product-promo {
  padding: var(--spacing-xxxl) 0 var(--spacing-xl);
  margin-top: var(--spacing-xl);
  background-color: var(--color-surface-card);
  border-top: 1px solid var(--muted-silver);
  border-bottom: 1px solid var(--muted-silver);
}

.product-promo__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.product-promo__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.5rem;
  color: #ffffff;
  background-color: var(--cognac);
  border-radius: 0 0 3px 3px;
  margin-bottom: var(--spacing-xs);
}

.product-promo__heading {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.15;
  color: var(--deep-navy);
  margin-bottom: var(--spacing-xs);
}

.product-promo__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-xs);
}

.product-promo__text strong {
  font-weight: 500;
  color: var(--cognac);
}

.product-promo__divider {
  width: 3rem;
  height: 2px;
  background-color: var(--cognac);
  margin: var(--spacing-xs) auto;
}

.product-promo__footer {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--ash-grey);
}

/* =============================================================================
   Product Page — Responsive Adjustments
   =============================================================================*/
@media (max-width: 991.98px) {
  .product-gallery__viewport {
    aspect-ratio: 3 / 4;
  }

  .product-details {
    padding: var(--spacing-xs) 0;
  }

  .product-promo {
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    margin-top: var(--spacing-lg);
  }
}

@media (max-width: 575.98px) {
  .product-gallery__viewport {
    aspect-ratio: 4 / 5;
  }

  .product-gallery__thumb {
    width: 2.75rem;
    height: 2.75rem;
  }

  .product-gallery__nav {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .product-details__cta {
    padding: var(--spacing-xxxs) var(--spacing-xs);
  }
}

/* Product Gallery — Zoom Feature*/

.product-gallery__viewport {
  cursor: zoom-in;
  touch-action: manipulation; /* allow scroll, suppress double-tap browser zoom*/
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.product-gallery__viewport.is-touch-zoomed {
  cursor: zoom-out;
  touch-action: none; /* zoomed state — panning is handled in JS*/
}

.product-gallery__img {
  transform-origin: 50% 50%;
  transition: transform 0.35s var(--ease-out);
  backface-visibility: hidden;
}

/* While any zoom is active, prepare the compositor for live transforms*/
.product-gallery__viewport.is-zooming .product-gallery__img,
.product-gallery__viewport.is-touch-zoomed .product-gallery__img {
  will-change: transform;
}

/* Apply the scale transform on hover zoom — the actual enlargement*/
.product-gallery__viewport.is-zooming .product-gallery__img {
  transform: scale(1.9);
}

/* Fast tracking while the cursor/finger moves — tactile, immediate*/
.product-gallery__viewport.is-zooming .product-gallery__img.is-tracking,
.product-gallery__viewport.is-touch-zoomed .product-gallery__img.is-tracking {
  transition: transform 60ms linear;
}

/* ---- Zoom Hint (touch devices) ----*/
.product-gallery__zoom-hint {
  position: absolute;
  bottom: var(--spacing-xxs);
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  background-color: rgba(60, 71, 122, 0.88);
  color: var(--parchment-cream);
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.5;
  padding: var(--spacing-quark) var(--spacing-nano);
  border-radius: 0 0 3px 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.product-gallery__zoom-hint.is-visible {
  opacity: 1;
}



/* =============================================================================
   THE ORIGIN MARK — one 'Made in ___' treatment for each live market.

   The mark a good wears is struck for the nation that made it, and chosen in
   templates/_partials/origin-mark.html.twig by the market's own id. It is set below the
   description and above the SKU — right-aligned, as the SKU row is, so the details column
   keeps one margin and not two. Each mark is its own component: its own structure, its own
   material logic, its own geometry. Nothing here is one badge recoloured — the only constant
   is the tag, printed once as the market gives it (product.origin). Colours are tokens from
   tokens.css; motion is a hovering event, never idle.
   ============================================================================= */

/* Right-aligned, as the SKU row beneath it is. */
.product-details__origin {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--spacing-xs);
}
/* ---- The loom's label (Italian Market) — textile weave, stitched selvedge ----*/
.origin-label {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.06) 1px 2px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px),
    var(--deep-navy);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), var(--shadow-light);
  color: var(--parchment-cream);
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-tiny);
  max-width: 12rem;
  padding: var(--spacing-nano) var(--spacing-nano) var(--spacing-nano) calc(var(--spacing-nano) + var(--spacing-quark));
  position: relative;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.origin-label__stitch {
  background: repeating-linear-gradient(180deg, var(--golden-milk) 0 4px, transparent 4px 8px);
  bottom: var(--spacing-tiny);
  left: var(--spacing-quark);
  position: absolute;
  top: var(--spacing-tiny);
  width: 2px;
}

.origin-label__origin {
  font-family: 'Univers Extended', var(--font-primary);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.origin-label:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), var(--shadow-medium);
  transform: translateY(-2px);
}

/* ---- The etched glass vitrine label (German Market) — bevelled pane, acid-frosted ----*/
.origin-vitrine {
  align-items: center;
  display: inline-flex;
  padding: 0 var(--spacing-nano);
  position: relative;
  transition: transform 0.35s var(--ease-out);
}

.origin-vitrine__pane {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.20) 42%, rgba(208, 219, 246, 0.45)),
    var(--parchment-cream);
  border: 1px solid var(--muted-silver);
  /* A rectangle, so it obeys the house geometry: square top corners, 3px bottom radius. */
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 0 2px 6px rgba(208, 219, 246, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.14);
  display: inline-flex;
  justify-content: center;
  padding: var(--spacing-nano) var(--spacing-sm);
}

.origin-vitrine__origin {
  color: var(--slate-charcoal);
  font-family: 'Univers Condensed', var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); /* the frosted bite of etched glass */
  text-transform: uppercase;
}

/* The clamps: the pane is held to the case, not set into it. */
.origin-vitrine__clamp {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.12)),
    var(--muted-silver);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  height: 60%;
  position: absolute;
  top: 20%;
  width: 7px;
}

.origin-vitrine__clamp--l { border-radius: 2px 0 0 2px; left: -3px; }
.origin-vitrine__clamp--r { border-radius: 0 2px 2px 0; right: -3px; }

.origin-vitrine:hover {
  transform: translateY(-2px);
}

.origin-vitrine:hover .origin-vitrine__pane {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.95),
    inset 0 2px 6px rgba(208, 219, 246, 0.70),
    0 5px 10px rgba(0, 0, 0, 0.18);
}

/* ---- The tucked ticket (French Market) — card, angled, punched and threaded ----
   The card is white, at the operator's word: the house's own white, so the punched card stands
   off the parchment it is tucked into instead of dissolving into it. */
.origin-ticket {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.60), rgba(0, 0, 0, 0.04)),
    #ffffff;
  border: 1px solid var(--muted-silver);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.10), var(--shadow-light);
  color: var(--slate-charcoal);
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-tiny);
  max-width: 12rem;
  padding: var(--spacing-nano) var(--spacing-nano) var(--spacing-nano) calc(var(--spacing-sm) + var(--spacing-quark));
  position: relative;
  transform: rotate(-3.5deg);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.origin-ticket__eyelet {
  background: var(--parchment-cream);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  height: 8px;
  left: var(--spacing-nano);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.origin-ticket__eyelet::after {
  border: 1px solid var(--tawny-umber);
  border-bottom-color: transparent;
  border-radius: 50%;
  content: "";
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(18deg);
  width: 16px;
}

.origin-ticket__origin {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.origin-ticket:hover {
  box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.10), var(--shadow-medium);
  transform: rotate(-1deg) translateY(-3px);
}

/* ---- The roundel (Spanish Market) — minted disc, beaded rim, concentric rings ----*/
.origin-roundel {
  align-items: center;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0) 45%),
    radial-gradient(circle at 70% 78%, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0) 60%),
    var(--deep-navy);
  border: 2px solid var(--parchment-cream);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--deep-navy),
    0 4px 10px rgba(0, 0, 0, 0.30),
    inset 0 0 0 3px rgba(255, 255, 255, 0.08);
  display: inline-flex;
  height: 7rem;
  justify-content: center;
  position: relative;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  width: 7rem;
}

.origin-roundel::before {
  border: 2px dotted var(--golden-milk);
  border-radius: 50%;
  content: "";
  inset: 6px;
  opacity: 0.8;
  position: absolute;
}

.origin-roundel__ring {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-tiny);
  padding: 0 var(--spacing-nano);
  text-align: center;
  width: 68%;
}

.origin-roundel__origin {
  color: var(--parchment-cream);
  font-family: 'Univers Extended', var(--font-primary);
  /* One line now stands where two stood: the tag is given the size and the tracking the
     disc's centre can carry, so the roundel is a saying and not an empty coin. */
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.origin-roundel:hover {
  box-shadow:
    0 0 0 2px var(--deep-navy),
    0 8px 18px rgba(0, 0, 0, 0.35),
    inset 0 0 0 3px rgba(255, 255, 255, 0.12);
  transform: scale(1.04);
}

/* ---- The ruled line (Swiss Market) — the tag above one firm rule, in a muted silver frame ----
   The frame is set from the house's own metal, Muted Silver, so the mark reads as a small framed
   plate rather than loose words: a rectangle, therefore house geometry — square top corners, 3px
   bottom radius. The plate's face is white, at the operator's word: the house's own white, so the
   silver frame and its struck rivets read as a plate laid on the parchment rather than a frame
   drawn on it, and the mark is never the page showing through. */
.origin-rule {
  background: #ffffff;
  border: 2px solid var(--muted-silver);
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  display: inline-flex;
  flex-direction: column;
  padding: var(--spacing-xxxs) var(--spacing-sm);
  position: relative;
}

/* One rivet in each corner, holding the frame down: a struck head of the same silver, its
   highlight set off-centre and its edge darkened, the way a driven rivet catches the light on
   one side only. */
.origin-rule__rivet {
  background: radial-gradient(circle at 36% 30%, var(--muted-silver), var(--slate-charcoal) 82%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(0, 0, 0, 0.18);
  height: 6px;
  position: absolute;
  width: 6px;
}

.origin-rule__rivet--tl { left: 5px; top: 5px; }
.origin-rule__rivet--tr { right: 5px; top: 5px; }
.origin-rule__rivet--bl { bottom: 5px; left: 5px; }
.origin-rule__rivet--br { bottom: 5px; right: 5px; }

.origin-rule__origin {
  color: var(--deep-navy);
  font-family: 'Univers Extended', var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
  padding-bottom: var(--spacing-quark);
  text-transform: uppercase;
  white-space: nowrap;
}

/* One rule: set a hair short at rest, drawn out to its length under the hand. A rectangle,
   so its bottom corners keep the house radius. */
.origin-rule::after {
  background: var(--cognac);
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  content: "";
  height: 2px;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}

.origin-rule:hover::after {
  transform: scaleX(1);
}

/* ---- The black marble (Belgian Market) — the marble the Meuse has cut since the twelfth
   century, the tag cut into it and the gold laid in the cut ----
   No object is simulated and no material is coloured falsely: the stone is the house's own plum,
   the way cobalt stands as deep navy on the azulejo. What is drawn is the working of it — a slab
   of the black marble the Low Countries cut for fonts, tombs and thresholds. Its face is taken to
   a polish that holds whatever light is in the room; its calcite seam is left exactly where the
   stone gave it, because the cutter goes round a seam and never through it; its end is left as the
   saw left it, matte where the polish stops; and the tag is cut into the polished face with the
   gold laid in the cut, so the shadow of the cut sits above the letters and the light of it below.
   Under the hand the polish takes the light: one event, the slab turned a hair where it stands. */
.origin-marble {
  background: var(--imperial-plum);
  /* A slab cut square — the saw's four corners, and no house radius on any of them. */
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 7px rgba(0, 0, 0, 0.30);
  display: inline-block;
  overflow: hidden;
  padding: calc(var(--spacing-nano) + var(--spacing-quark)) var(--spacing-sm) calc(var(--spacing-nano) + var(--spacing-quark)) calc(var(--spacing-sm) + var(--spacing-nano));
  position: relative;
}

/* The seam: the calcite the cutter is careful never to cross. Two veins and a hair, each cut
   sharp, each running the slab at its own angle. */
.origin-marble::before {
  background-image:
    linear-gradient(118deg, transparent 0 28%, rgba(249, 243, 229, 0.40) 28% 28.45%, transparent 28.45%),
    linear-gradient(131deg, transparent 0 57%, rgba(196, 196, 192, 0.32) 57% 57.4%, transparent 57.4%),
    linear-gradient(97deg, transparent 0 78%, rgba(196, 196, 192, 0.22) 78% 78.32%, transparent 78.32%);
  content: "";
  inset: 0;
  position: absolute;
}

/* The end: the saw's own face, left matte and striated where the polish stops. Struck over the
   veining, because a saw crosses a seam and the polish does not. */
.origin-marble::after {
  background-image: repeating-linear-gradient(90deg, rgba(94, 93, 90, 0.80) 0 1px, rgba(94, 93, 90, 0.34) 1px 3px);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: var(--spacing-quark);
}

/* The polish: a broad sheen lying on the stone, kept off to one side at rest and drawn across the
   face under the hand. */
.origin-marble__sheen {
  background: linear-gradient(104deg, transparent 0 46%, rgba(255, 255, 255, 0.17) 56%, transparent 66%);
  inset: 0;
  position: absolute;
  transform: translateX(-30%);
  transition: transform 0.55s var(--ease-out);
}

.origin-marble:hover .origin-marble__sheen {
  transform: translateX(16%);
}

/* The tag: cut into the face and the gold laid in the cut. The gold is the house's own, and the
   cut is read off the letters — dark above, light below, the way any incised letter reads. */
.origin-marble__origin {
  color: var(--golden-milk);
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  position: relative; /* the gilding stands in the polished face */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.70), 0 1px 0 rgba(255, 255, 255, 0.22);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- The cooper's staves (Danish Market) — walnut staves bound by an iron hoop ----
   Wood is the one material of the old trades the board had not yet taken, and it is Denmark's own;
   the trade that works it here is the cooper's. Staves of walnut are stood on edge — set alternately
   from two boards, the seams cut dark between them — and a single hoop of iron is driven over them
   at the head: the barrel-maker's trade, and the whole of it in the mark. The tag is struck across
   the staves in the field below, at the market's own word.
   A mark and not a button, so it takes no house radius: all four corners are square. */
.origin-cask {
  background:
    /* the cask turning dark at the foot, where it turns away from the light */
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.22)),
    /* the staves, set alternately from two boards, their seams cut dark between them */
    repeating-linear-gradient(90deg,
      var(--tawny-umber) 0 20px,
      rgba(0, 0, 0, 0.45) 20px 22px,
      var(--cognac) 22px 42px,
      rgba(0, 0, 0, 0.45) 42px 44px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    inset 0 -3px 6px rgba(0, 0, 0, 0.48),
    0 4px 10px rgba(0, 0, 0, 0.28);
  display: inline-block;
  overflow: hidden;
  padding: calc(var(--spacing-nano) + var(--spacing-md)) var(--spacing-md) calc(var(--spacing-nano) + var(--spacing-quark));
  position: relative;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

/* The hoop: one band of iron driven over the staves, catching the light on its upper edge. */
.origin-cask::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(0, 0, 0, 0.30)),
    linear-gradient(180deg, var(--muted-silver), var(--slate-charcoal));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  content: "";
  height: 11px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* The tag, struck across the staves: pale letters on the walnut, the shadow of the strike above. */
.origin-cask__origin {
  color: var(--golden-milk);
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  position: relative;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.14);
  text-transform: uppercase;
  white-space: nowrap;
}

/* One event: the cask is lifted a hair. */
.origin-cask:hover {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.20),
    inset 0 -3px 6px rgba(0, 0, 0, 0.52),
    0 9px 18px rgba(0, 0, 0, 0.32);
  transform: translateY(-2px);
}

/* ---- The azulejo (Portuguese Market) — a tin-glazed tile, cobalt border ----*/
.origin-azulejo {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(208, 219, 246, 0.25) 62%),
    var(--parchment-cream);
  /* A tile is square, so the house geometry still governs: square top corners, 3px bottom. */
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  box-shadow:
    inset 0 0 0 6px var(--deep-navy),
    inset 0 0 0 7px var(--golden-milk),
    var(--shadow-light);
  color: var(--deep-navy);
  display: inline-flex;
  justify-content: center;
  min-height: 5.25rem;
  padding: var(--spacing-sm);
  position: relative;
  text-align: center;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  width: 6.5rem;
}

.origin-azulejo__origin {
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
  max-width: 4.25rem;
  text-transform: uppercase;
}

.origin-azulejo:hover {
  box-shadow:
    inset 0 0 0 6px var(--deep-navy),
    inset 0 0 0 7px var(--golden-milk),
    var(--shadow-medium);
  transform: translateY(-2px);
}

/* ---- The stitched strap (Croatian Market) — grain leather, saddle-stitched, keepered ----*/
.origin-strap {
  align-items: center;
  background:
    repeating-linear-gradient(118deg, rgba(0, 0, 0, 0.055) 0 1px, rgba(0, 0, 0, 0) 1px 5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.22)),
    var(--tawny-umber);
  /* A rectangle, so it keeps the house geometry: square top corners, 3px bottom radius. */
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), var(--shadow-light);
  color: var(--parchment-cream);
  display: inline-flex;
  gap: var(--spacing-nano);
  padding: var(--spacing-nano) var(--spacing-nano) var(--spacing-nano) var(--spacing-sm);
  position: relative;
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

/* Two runs of thread down the edges, as a saddler closes a strap. */
.origin-strap::before,
.origin-strap::after {
  border-top: 1px dashed var(--golden-milk);
  content: "";
  left: var(--spacing-quark);
  opacity: 0.5;
  position: absolute;
  right: var(--spacing-quark);
}

.origin-strap::before { top: 3px; }
.origin-strap::after { bottom: 3px; }

.origin-strap__origin {
  font-family: 'Univers Extended', var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); /* blind-stamped into the grain, not laid on it */
  text-transform: uppercase;
}

/* The keeper the strap runs through, standing proud of it. */
.origin-strap__keeper {
  align-self: stretch;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.30));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12), -2px 0 3px rgba(0, 0, 0, 0.28);
  flex: 0 0 auto;
  margin: calc(-1 * var(--spacing-nano)) 0;
  width: var(--spacing-quark);
}

.origin-strap:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.26), var(--shadow-medium);
  transform: translateY(-2px);
}

/* Motion is a hovering event, never decoration that runs on its own. */
@media (prefers-reduced-motion: reduce) {
  .origin-label:hover { transform: none; }
  .origin-vitrine:hover { transform: none; }
  .origin-ticket:hover { transform: rotate(-3.5deg); }
  .origin-roundel:hover { transform: none; }
  .origin-rule:hover::after { transform: scaleX(0.4); }
  .origin-marble:hover .origin-marble__sheen { transform: translateX(-30%); }
  .origin-cask:hover { transform: none; }
  .origin-azulejo:hover { transform: none; }
  .origin-strap:hover { transform: none; }
}