/* ==========================================================================
   Product page
   ========================================================================== */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-2); }
.crumbs a:hover { text-decoration: underline; }
.pdp { padding-block: 14px 40px; }
.pdp__grid { display: flex; flex-direction: column; gap: 0; margin-top: 12px; margin-inline: calc(var(--gutter) * -1); }

/* ---------- gallery ---------- */
.gallery { background: var(--surface); border-block: var(--bw) solid var(--ink); }
.gallery__stage { aspect-ratio: 1 / 1; }
.gallery__stage .tagbox { position: absolute; top: 14px; inset-inline-end: 14px; display: flex; gap: 6px; z-index: 2; }
.gallery__stage .tagbox .tag { font-size: 11px; }
.g-code { position: absolute; top: 10px; inset-inline-start: 18px; font-size: clamp(90px, 28vw, 190px); line-height: 1; -webkit-text-stroke-width: 1.5px; }
.g-img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; animation: fp-fade .35s ease-out; }
.g-spool { position: absolute; inset-inline-start: 3%; top: 12%; width: 62%; }
.g-vase { position: absolute; inset-inline-end: 7%; bottom: 7%; width: 44%; }
.g-callout { position: absolute; display: flex; align-items: center; direction: ltr; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.g-callout span { background: var(--surface); padding: 3px 7px; }
.g-callout i { width: 48px; height: 1px; background: var(--ink); }
.g-callout b { width: 7px; height: 7px; background: var(--ink); }
.g-callout--a { top: 30%; right: 0; }
.g-callout--b { bottom: 22%; left: 0; flex-direction: row-reverse; }
.macro-tint { position: absolute; inset: 0; background-image: url(../../img/art/art-macro-white.webp); background-size: cover; background-position: center; background-blend-mode: multiply; animation: fp-fade .35s ease-out; }
.macro-tag { position: absolute; bottom: 14px; inset-inline-start: 14px; background: var(--surface); font-size: 12px; font-weight: 700; padding: 3px 8px; direction: ltr; }
.gallery__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--bw) solid var(--ink); }
.gallery__tabs button { position: relative; min-height: 84px; background: #F7F6F2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 6px 2px; }
.gallery__tabs button + button { border-inline-start: 1px solid var(--line); }
.gallery__tabs button[aria-selected="true"] { background: var(--surface); }
.gallery__tabs button[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--ink); }
.gallery__tabs img, .gallery__tabs .macro-tint { position: static; width: 44px; height: 44px; animation: none; object-fit: contain; }

/* ---------- buy box ---------- */
.buy { padding: 22px var(--gutter) 0; display: flex; flex-direction: column; gap: 22px; }
.buy__eyebrow { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); }
.buy__head { display: flex; flex-direction: column; gap: 12px; }
.buy h1 { font-size: clamp(38px, 9vw, 60px); line-height: 1; }
.buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.buy__price strong { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.buy__price .muted { font-size: 14px; }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; background: currentColor; }
.step { display: flex; flex-direction: column; gap: 10px; }
.step__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.step__l { font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.step__l em { font-style: normal; font-weight: 400; color: var(--ink-2); }
.step .link-underline { font-size: 14px; }

.tiers-pick { display: grid; grid-template-columns: 1fr 1fr; border: var(--bw) solid var(--ink); }
.tiers-pick button { text-align: start; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #F7F6F2; }
.tiers-pick button + button { border-inline-start: var(--bw) solid var(--ink); }
.tiers-pick button[aria-checked="true"] { background: var(--surface); }
.tiers-pick button[aria-checked="true"].is-premium { background: var(--accent); }
.tiers-pick .tp__top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.tiers-pick strong { font-size: 18px; }
.tiers-pick .tp__pt { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.4; }
.tiers-pick .tp__pt::before { content: ""; width: 6px; height: 6px; background: var(--ink); flex-shrink: 0; transform: translateY(-1px); }

.colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.colors button { position: relative; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 6px; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .12s ease; text-align: center; }
.colors button:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.colors button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.colors .c__chip { display: block; height: 48px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.colors .c__n { font-size: 12px; font-weight: 700; line-height: 1.2; }
.colors .c__low { position: absolute; top: 10px; inset-inline-start: 10px; width: 8px; height: 8px; background: #E0A11B; }
.colors button.is-out .c__chip { opacity: .4; }
.colors button.is-out .c__n { text-decoration: line-through; color: var(--ink-2); }

.packs button { position: relative; min-height: 68px; flex-direction: column; gap: 2px; }
.packs button small { font-size: 14px; font-weight: 600; }
.packs .pk__tag { position: absolute; top: 0; inset-inline-start: 0; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 800; padding: 1px 6px; }

.fit__ok { font-size: 14px; font-weight: 700; color: #0B5A36; }
.fit__ok::before { content: "✓ "; }
.printers .chip { min-height: 40px; font-size: 13px; }
.fit__line { font-size: 14px; line-height: 1.6; }
.fit__warn { font-size: 14px; line-height: 1.6; background: #FBF2DF; padding: 10px 12px; }

.cta { display: flex; flex-direction: column; gap: 10px; }
.cta .btn--big { min-height: 64px; font-size: 18px; padding: 0 20px; }
.cta__express { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cta__express .btn { min-height: 50px; padding: 0 6px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cta__express .btn:hover { background: var(--ink); color: #fff; }
.notify { background: var(--surface); border: var(--bw) solid var(--ink); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.notify form { display: flex; }
.notify input { flex: 1; min-width: 0; min-height: 52px; padding: 0 12px; border: var(--bw-strong) solid var(--ink); border-inline-end: 0; font-size: 16px; direction: ltr; text-align: left; }
.notify .btn { min-height: 52px; }
.shipbar { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.shipbar .progress { height: 6px; background: var(--line); }
.upsell { display: flex; gap: 14px; align-items: center; text-align: start; width: 100%; background: var(--ink); color: #fff; padding: 12px 14px; transition: background-color .15s ease, color .15s ease; }
.upsell:hover { background: var(--accent); color: var(--ink); }
.upsell:hover .muted { color: var(--ink); }
.upsell .muted { display: block; color: #cfcfcf; font-size: 14px; }
.upsell strong { display: block; font-size: 16px; }
.upsell__plus { width: 44px; height: 44px; flex-shrink: 0; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 800; }

/* ---------- data band ---------- */
.databand { border-block: var(--bw) solid var(--ink); }
.databand__art { inset-inline-start: -10%; top: -20%; width: 120%; opacity: .1; }
.databand__in { padding-block: 40px; display: flex; flex-direction: column; gap: 28px; }
.databand__head { display: flex; flex-direction: column; gap: 12px; }
.databand h2 { font-size: clamp(32px, 6vw, 56px); margin-top: 8px; }
.databand__note { font-size: 13px; color: #BDBDBD; }
.databand__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #3A3A3A; }
.dcell { padding: 14px 0 16px; padding-inline-end: 12px; border-bottom: 1px solid #3A3A3A; display: flex; flex-direction: column; gap: 8px; }
.dcell:nth-child(5) { grid-column: 1 / -1; }
.dcell__k { font-size: 12px; color: #B9B9B9; }
.dcell__v { font-size: 30px; line-height: 1.1; font-weight: 300; letter-spacing: -.02em; }
.dcell__bar { position: relative; height: 6px; background: #2C2C2C; }
.dcell__bar span { position: absolute; top: 0; bottom: 0; background: var(--accent); }
.dcell__minmax { display: flex; justify-content: space-between; font-size: 11px; color: #9A9A9A; direction: ltr; }
.dcell__note { font-size: 12px; line-height: 1.5; color: #B9B9B9; }

/* ---------- info tabs ---------- */
.info { border-bottom: var(--bw) solid var(--ink); }
.info__in { padding-block: 0 32px; padding-inline: 0; }
.info__tabs { border-top: 0; }
.info__tabs > button { min-height: 56px; font-size: 14px; }
.info__panel { padding: 28px var(--gutter) 0; display: grid; gap: 24px; }
.info__panel h3 { font-size: 26px; margin-bottom: 12px; }
.info__panel p { font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 56ch; margin-bottom: 12px; }
.info__rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--line); font-size: 15px; }
.info__rows > div:last-child { border-bottom: 1px solid var(--line); }
.info__rows span { color: var(--ink-2); }

/* ---------- more colors ---------- */
.more h2 { font-size: clamp(28px, 5vw, 48px); margin-bottom: 24px; }
.more__grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: var(--bw) solid var(--ink); border-inline-start: var(--bw) solid var(--ink); }
.more__item { background: var(--surface); border-inline-end: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); text-align: start; display: flex; flex-direction: column; }
.more__item .pcard__stage img { width: 84%; }
.more__item:hover img { transform: scale(1.05); }
.more__item img { transition: transform .5s var(--ease); }
.more__item .m__t { padding: 10px 12px 14px; display: flex; flex-direction: column; font-size: 13px; }
.more__item .m__t strong { font-size: 15px; }

/* ---------- sticky bar ---------- */
.stickybar { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky); background: var(--surface); border-top: var(--bw) solid var(--ink); padding-bottom: env(safe-area-inset-bottom); }
.stickybar__in { display: flex; align-items: center; gap: 12px; min-height: 68px; padding-block: 8px; }
.stickybar__img { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.stickybar__img img { width: 100%; }
.stickybar__txt { display: none; flex-direction: column; line-height: 1.35; min-width: 0; }
.stickybar__txt strong { font-size: 15px; }
.stickybar__txt span { font-size: 13px; }
.stickybar__price { margin-inline-start: auto; font-size: 20px; }
.stickybar .btn { min-height: 52px; flex: 1; max-width: 220px; }
body.page-product { padding-bottom: 0; }

/* ---------- mini cart ---------- */
.mini__head { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; min-height: 68px; background: var(--surface); border-bottom: var(--bw) solid var(--ink); font-size: 20px; }
.mini__ship { padding: 14px 16px; background: var(--surface); border-bottom: var(--bw) solid var(--ink); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.mini__list { padding: 12px 0; display: flex; flex-direction: column; gap: 1px; background: var(--paper); }
.mini__line { display: flex; gap: 12px; align-items: center; background: var(--surface); padding: 12px 16px; }
.mini__line .thumb { width: 64px; height: 64px; background: var(--stage); flex-shrink: 0; }
.mini__line .thumb img { width: 100%; }
.mini__line .t { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.mini__line .t strong { font-size: 15px; }
.mini__upsell { margin: 12px 16px 0; width: calc(100% - 32px); display: flex; gap: 12px; align-items: center; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); padding: 10px; text-align: start; }
.mini__upsell:hover { background: var(--accent); }
.mini__upsell .thumb { width: 44px; height: 44px; background: var(--stage); }
.mini__foot { position: sticky; bottom: 0; background: var(--surface); border-top: var(--bw) solid var(--ink); padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.mini__sum { display: flex; justify-content: space-between; align-items: baseline; }
.mini__sum strong { font-size: 24px; }

/* ---------- tablet+ ---------- */
@media (min-width: 768px) {
  .pdp__grid { margin-inline: 0; }
  .gallery__tabs button { min-height: 104px; }
  .gallery__tabs img, .gallery__tabs .macro-tint { width: 60px; height: 60px; }
  .colors { grid-template-columns: repeat(6, 1fr); }
  .more__grid { grid-template-columns: repeat(3, 1fr); }
  .databand__grid { grid-template-columns: repeat(5, 1fr); }
  .dcell { padding-inline-start: 16px; border-inline-start: 1px solid #3A3A3A; border-bottom: 0; }
  .dcell:nth-child(5) { grid-column: auto; }
  .dcell__v { font-size: 34px; }
  .info__panel { grid-template-columns: 1fr 1fr; gap: 48px; padding-inline: var(--gutter); }
  .stickybar__txt { display: flex; }
}

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  .pdp { padding-block: 20px 56px; }
  .pdp__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; margin-top: 20px; align-items: start; }
  .gallery { grid-column: span 7; position: sticky; top: 20px; border: var(--bw) solid var(--ink); }
  .buy { grid-column: span 5; padding: 0; gap: 26px; }
  .databand__in { padding-block: 72px; }
  .databand__head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .info__tabs > button { min-height: 68px; font-size: 16px; padding: 0 26px; }
  .info__panel { padding-block: 48px 24px; grid-template-columns: repeat(12, 1fr); }
  .info__panel > div:first-child { grid-column: span 5; }
  .info__panel > div:last-child { grid-column: 7 / span 6; }
  .more__grid { grid-template-columns: repeat(5, 1fr); }
  .stickybar__in { gap: 20px; min-height: 76px; }
  .stickybar__price { font-size: 24px; }
  .g-callout i { width: 64px; }
}
@media (min-width: 1024px) { .info__in { padding-inline: var(--gutter); } }

.fit__ok--no { color: var(--err); }
.fit__ok--no::before { content: "✕ "; }
.fit__ok--check { color: var(--warn); }
.fit__ok--check::before { content: "! "; }
.more__stage { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.more__stage img { width: 84%; transition: transform .5s var(--ease); }
.more__item:hover .more__stage img { transform: scale(1.05); }
@media (max-width: 767px) {
  .gallery__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery__tabs [data-v="combo"] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .g-img, .macro-tint { animation: none; } }