/* Name-ring page (Direction C). Shared tokens and components (grid, bands, fields, labels,
   links, sequence, visit) come from site.css. The 3D viewer sits on the same stone grey as
   Ángel's CAD renders. One pill on the page: "Pedir por WhatsApp" in the order summary
   (sticky in the control column on desktop, a fixed bar on phone). */

@font-face { font-family: "Lobster Local"; src: url("/assets/ring-fonts/Lobster-latin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Yellowtail Local"; src: url("/assets/ring-fonts/Yellowtail-latin.ttf") format("truetype"); font-display: swap; }

.product { padding-block: var(--s-24) var(--s-128); align-items: start; row-gap: var(--s-24); }
.viewer-col { grid-column: 1 / span 7; position: sticky; top: 24px; display: grid; gap: 12px; min-width: 0; }
.buy { grid-column: 9 / span 4; display: grid; gap: var(--s-24); min-width: 0; }
@media (max-width: 1100px) and (min-width: 961px) { .viewer-col { grid-column: 1 / span 7; } .buy { grid-column: 8 / span 5; } }
@media (max-width: 960px) {
  /* phone/tablet: name the piece first, then show it, then the options */
  .product { grid-template-columns: minmax(0, 1fr); }
  .product > * { grid-column: 1 / -1 !important; }
  .product > .buy { display: contents; }
  .viewer-col { position: static; }
  .crumbs { order: 1; } .title { order: 2; } .viewer-col { order: 3; } .price { order: 4; } form#order { order: 5; } .bubble { order: 6; } .order-bar { order: 7; }
  .title h1 { font-size: var(--t-52); }
}
.viewer { position: relative; background: var(--stone); aspect-ratio: 1 / 1; max-height: calc(100vh - 150px); width: 100%; overflow: hidden; touch-action: pan-y; }
@media (max-width: 960px) { .viewer { aspect-ratio: 5 / 4; max-height: none; } }
@media (max-width: 560px) { .viewer { aspect-ratio: 1 / 1; } }
.viewer img.poster, .viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer canvas { opacity: 0; transition: opacity 0.6s ease; cursor: grab; }
.viewer canvas.ready { opacity: 1; }
.viewer canvas:active { cursor: grabbing; }
/* museum label pinned to the viewer, like every image on the site */
.viewer .badge { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: var(--ground); color: var(--ink); padding: 5px 10px 4px; }
.viewer .status { position: absolute; right: 14px; top: 14px; font: 400 var(--t-12) var(--mono); color: var(--muted); }
.viewer-note { font-size: var(--t-15); color: var(--muted); display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }

.crumbs { font: 400 var(--t-12) var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.crumbs a { text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.crumbs a:hover { text-decoration: underline; }
.title { display: grid; gap: var(--s-16); }
.title h1 { font-size: var(--t-52); line-height: 1.02; }
.title p { color: var(--muted); max-width: 40ch; }
.price { font-size: var(--t-15); color: var(--muted); border-block: 1px solid var(--line); padding-block: 12px; }
.price b { color: var(--ink); font-weight: 600; }
form#order { display: grid; gap: var(--s-24); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line-strong); }
.seg button { border: 0; background: #fff; padding: 12px 14px; min-height: 64px; cursor: pointer; display: grid; gap: 2px; text-align: left; color: var(--ink); min-width: 0; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.seg .sample { font-size: 1.4rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg .sample.lob { font-family: "Lobster Local", var(--display); }
.seg .sample.yel { font-family: "Yellowtail Local", var(--display); }
.seg small { font: 400 var(--t-12) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.seg5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.seg5 button { text-align: center; justify-items: center; padding: 10px 2px; min-height: 56px; }
.mmv { font: 500 1.125rem var(--mono); font-variant-numeric: tabular-nums; }
.mm { font: 400 var(--t-12) var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.toggle { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-strong); background: #fff; padding: 12px 14px; min-height: 56px; cursor: pointer; font: 600 var(--t-15) var(--body); color: var(--ink); text-align: left; width: 100%; }
.toggle .box { width: 20px; height: 20px; border: 1px solid var(--ink); display: grid; place-items: center; flex: none; }
.toggle[aria-pressed="true"] .box::after { content: ""; width: 10px; height: 10px; background: var(--ink); }
.toggle small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-15); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); background: #fff; padding: 8px 14px 8px 8px; min-height: 44px; cursor: pointer; font: 500 var(--t-15) var(--body); color: var(--ink); }
.swatches button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.swatches i { width: 24px; height: 24px; border-radius: 50%; display: block; border: 1px solid rgba(11, 11, 11, 0.14); }
#order input[type="text"] { font-size: 1.125rem; background: #fff; }
#order select { background: #fff; }
.field .hint a, a.hint { color: var(--muted); }
.field .hint.plain { font-family: var(--body); font-size: var(--t-15); letter-spacing: 0; font-weight: 400; }

.bubble { border-top: 1px solid var(--line); padding-top: var(--s-16); display: grid; gap: 8px; }
.pdisc summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pdisc summary::-webkit-details-marker { display: none; }
.pdisc[open] summary { margin-bottom: var(--s-16); }
.pdisc form.request { padding: 0; }
@media (max-width: 960px) { .pdisc { order: 6; } }
.bubble p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-15); color: var(--muted); }
.stub-ok.is-error { border-color: var(--ink); border-left-width: 4px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }

/* the order summary: the page's one primary action */
.order-bar { position: sticky; bottom: 0; z-index: 10; background: var(--ground); border-top: 1px solid var(--ink); padding: var(--s-16) 0; display: grid; gap: 10px; }
.order-bar .sum { font: 500 var(--t-12)/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.order-bar .sum span { color: var(--muted); }
.order-bar .row { display: flex; align-items: center; gap: 4px var(--s-24); flex-wrap: wrap; }
.order-bar .toast { font-size: var(--t-15); color: var(--muted); min-height: 0; }
.order-bar .toast:empty { display: none; }
@media (max-width: 960px) {
  .order-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 24px -18px rgba(11, 11, 11, 0.35); gap: 6px; }
  .order-bar .row { flex-wrap: nowrap; justify-content: space-between; }
  .order-bar .btn { flex: 0 1 auto; }
  .order-bar .textlink { white-space: nowrap; }
  .order-bar .sum { font-size: var(--t-12); letter-spacing: 0.02em; }
  body.page-ring { padding-bottom: 172px; }
}
@media (max-width: 359px) {
  .order-bar .row { gap: 0 12px; flex-wrap: wrap; }
  body.page-ring { padding-bottom: 216px; }
  .order-bar .btn { --lmb-pad-x: 16px; }
  .order-bar .textlink { font-size: var(--t-15); }
}

.render figure { grid-column: 1 / span 7; margin: 0; display: grid; }
.render video { width: 100%; aspect-ratio: 16 / 9; background: var(--stone); }
.render figcaption { justify-self: start; background: var(--ground); color: var(--ink); padding: 5px 10px 4px; margin: -12px 0 0 12px; position: relative; }
.render #video-toggle { justify-self: start; }
.render .sec-head { grid-column: 9 / span 4; margin: 0; align-self: center; }
.render .sec-head h2 { font-size: var(--t-34); }
@media (max-width: 1100px) and (min-width: 761px) { .render .sec-head { grid-column: 8 / span 5; } }
@media (max-width: 760px) { .render .sec-head { margin-top: var(--s-48); } }
.sizes-wrap { grid-column: 2 / span 10; overflow-x: auto; border-top: 1px solid var(--ink); }
table.sizes { border-collapse: collapse; width: 100%; min-width: 300px; font-variant-numeric: tabular-nums; }
table.sizes th, table.sizes td { padding: 12px 14px 12px 0; text-align: left; border-bottom: 1px solid var(--line); font-size: var(--t-15); }
table.sizes th { font: 500 var(--t-12) var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
table.sizes td { font-family: var(--mono); }
table.sizes tr.on td { font-weight: 500; }
table.sizes tr.on td:first-child { box-shadow: inset 3px 0 0 var(--ink); padding-left: 12px; }
.visit h2.olabel { margin: 0; }
@media (prefers-reduced-motion: reduce) { .viewer canvas { transition: none; } }
.a11y-motion .viewer canvas { transition: none; }

.new-request { background: none; border: 0; padding: 12px 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }