/* R&R v2: single product (DTC funnel) in the worker-led system */
.crumbs { font-size: 12.5px; color: var(--steel); padding: 18px 0; }
.crumbs a { color: var(--steel); text-decoration: none; }
.crumbs a:hover { color: var(--char); }
.crumbs span { margin: 0 8px; color: #b9b2a5; }

.pdp-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; padding-bottom: 72px; }
.gal { position: sticky; top: 16px; align-self: start; }
.gal__main { position: relative; aspect-ratio: 1/1; background: #f6f5f2; overflow: hidden; }
.gal__main > img { width: 100%; height: 100%; object-fit: cover; }
.gal__main > img.is-product { object-fit: contain; padding: 40px; mix-blend-mode: multiply; }
.gal__main .slot { position: absolute; inset: 0; min-height: 0; }
.gal__badge { position: absolute; top: 16px; left: 16px; z-index: 3; background: var(--char); color: var(--white); font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 9px 12px; }
.gal__thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.gal__thumbs button { position: relative; padding: 0; border: 2px solid transparent; background: #f6f5f2; aspect-ratio: 1/1; cursor: pointer; overflow: hidden; }
.gal__thumbs button.is-active { border-color: var(--char); }
.gal__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumbs .t-slot { width: 100%; height: 100%; background: repeating-linear-gradient(135deg, #e9e5dd 0 8px, #e2ddd3 8px 16px); display: flex; align-items: center; justify-content: center; font: 700 8.5px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #6c6458; text-align: center; padding: 4px; }

.buy { position: relative; padding-right: 34px; }
.buy > .stripe { right: 0; top: 0; bottom: auto; height: 420px; color: var(--char); }
.buy h1 { font: 800 clamp(30px, 3vw, 42px)/1.05 var(--display); text-transform: uppercase; margin: 0 0 6px; }
.buy__sub { font: 500 14px/1.4 var(--text); color: var(--steel); margin: 0 0 12px; }
.rating { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--steel); text-decoration: none; }
.rating .stars { color: #e3a008; letter-spacing: 2px; font-size: 15px; }
.price { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 2px; }
.price b { font: 800 34px/1 var(--display); }
.price s { color: var(--mist); font-size: 17px; }
.price em { font-style: normal; font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ok); background: #e6f3ea; padding: 6px 9px; }
.price-note { font-size: 12.5px; color: var(--steel); margin: 0 0 18px; }
.buy__lede { font-size: 16.5px; line-height: 1.6; color: #33393e; margin: 0 0 18px; }
.chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 600 12px/1 var(--text); padding: 9px 12px; background: var(--paper); border-left: 3px solid var(--c); }

.opt-label { display: flex; justify-content: space-between; font: 700 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; }
.opt-label small { font: 500 12px var(--text); letter-spacing: 0; text-transform: none; color: var(--steel); }
.opt-group { font: 600 10.5px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin: 14px 0 8px; }
.sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.size { text-align: left; border: 1px solid var(--line); background: var(--white); padding: 11px 12px; cursor: pointer; color: var(--char); border-radius: 2px; }
.size b { display: block; font: 600 14px/1.25 var(--text); overflow-wrap: anywhere; }
.size span { display: block; font-size: 12.5px; color: var(--steel); margin-top: 2px; }
.size:hover { border-color: #9a948a; }
.size.is-active { border-color: var(--char); box-shadow: inset 0 0 0 1px var(--char); background: #fbfaf7; }
.size[disabled] { opacity: .42; cursor: not-allowed; background: var(--paper); }
.size[disabled] span::after { content: ' \00b7  out of stock'; }

.tiers { margin: 22px 0 18px; border: 1px solid var(--line); }
.tiers__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--paper); font: 700 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.tiers__head small { font: 500 12px var(--text); letter-spacing: 0; text-transform: none; color: var(--steel); }
.tiers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tier { border: 0; border-left: 1px solid var(--line); background: var(--white); padding: 12px 6px; text-align: center; cursor: pointer; }
.tier:first-child { border-left: 0; }
.tier b { display: block; font: 700 13px var(--text); }
.tier em { display: block; font: 700 12px var(--text); font-style: normal; color: var(--ok); }
.tier span { display: block; font-size: 12px; color: var(--steel); }
.tier.is-active { background: #fbfaf7; box-shadow: inset 0 -3px 0 var(--c); }

.buyrow { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 10px; }
.qty { display: flex; border: 1px solid var(--line); height: 56px; }
.qty button { width: 42px; border: 0; background: var(--paper); font-size: 20px; cursor: pointer; }
.qty input { width: 100%; min-width: 0; border: 0; text-align: center; font: 700 16px var(--text); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buyrow .btn { height: 56px; width: 100%; }
.buy__alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.buy__alt .btn { height: 46px; font-size: 11.5px; color: var(--char); }
.buy__alt .btn--ghost:hover { background: var(--paper); }
.trust { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trust li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.35; color: var(--steel); }
.trust svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--char); }
.trust b { display: block; color: var(--char); font-size: 13px; }

.pillars { display: grid; gap: 22px; margin-top: 30px; }
.pillar { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.pillar i { width: 40px; height: 40px; background: var(--c); display: flex; align-items: center; justify-content: center; font: 900 14px var(--display); font-style: normal; color: var(--char); }
.pillar b { display: block; font: 800 15px/1.2 var(--display); text-transform: uppercase; margin-bottom: 4px; }
.pillar span { font-size: 15px; color: var(--steel); }
.on-dark .pillar span { color: #c6ccd1; }

.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how > div { background: var(--white); border: 1px solid var(--line); padding: 26px; position: relative; }
.how > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c); }
.how b { display: block; font: 800 16px/1.2 var(--display); text-transform: uppercase; margin: 6px 0 8px; }
.how p { margin: 0; color: var(--steel); font-size: 14.5px; }
.how small { font: 600 10.5px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }

.fbt { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center; background: var(--white); border: 1px solid var(--line); padding: 26px; }
.fbt__items { display: flex; align-items: center; gap: 10px; }
.fbt__item { flex: 1; min-width: 0; }
.fbt__item label { display: block; cursor: pointer; }
.fbt__img { position: relative; aspect-ratio: 1/1; background: #f6f5f2; margin-bottom: 10px; }
.fbt__img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; mix-blend-mode: multiply; }
.fbt__img input { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; accent-color: var(--char); }
.fbt__item b { display: block; font: 600 13.5px/1.3 var(--text); }
.fbt__item span { font-size: 13px; color: var(--steel); }
.fbt__plus { font: 300 26px var(--text); color: var(--mist); }
.fbt__sum .total { font: 800 32px/1 var(--display); }
.fbt__sum s { color: var(--mist); margin-left: 8px; }
.fbt__sum .btn { width: 100%; margin-top: 14px; }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.doc { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); background: var(--white); padding: 14px; text-decoration: none; color: var(--char); }
.doc:hover { border-color: var(--char); }
.doc i { flex: 0 0 34px; height: 42px; background: var(--char); color: var(--white); font: 800 9px/1 var(--display); font-style: normal; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; letter-spacing: .08em; position: relative; }
.doc i::after { content: ''; position: absolute; top: 0; right: 0; width: 4px; bottom: 0; background: var(--c); }
.doc b { display: block; font: 600 13.5px/1.3 var(--text); }
.doc span { font-size: 12px; color: var(--steel); }

.rev-sum { display: flex; gap: 28px; align-items: center; margin-bottom: 26px; }
.rev-sum b { font: 900 60px/1 var(--display); }
.rev-sum .stars { color: #e3a008; font-size: 20px; letter-spacing: 2px; }

.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(17,20,23,.1); transform: translateY(110%); transition: transform .25s ease-out; }
.sticky.is-visible { transform: none; }
.sticky .wrap { display: flex; align-items: center; gap: 14px; height: 74px; }
.sticky img { width: 50px; height: 50px; object-fit: contain; background: #f6f5f2; mix-blend-mode: multiply; }
.sticky .s-name { flex: 1; min-width: 0; }
.sticky .s-name b { display: block; font: 700 14px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky .s-name span { font-size: 12.5px; color: var(--steel); }
.sticky .btn { height: 50px; }

@media (max-width: 1100px) {
  .pdp-hero { gap: 32px; }
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pdp-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 48px; }
  .gal { position: static; margin: 0 calc(var(--gut) * -1); }
  .gal__thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62px; overflow-x: auto; padding: 0 var(--gut) 4px; }
  .buy { padding-right: 0; }
  .buy > .stripe { display: none; }
  .sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier:nth-child(3) { border-left: 0; }
  .tier:nth-child(n+3) { border-top: 1px solid var(--line); }
  .buyrow { grid-template-columns: 120px minmax(0, 1fr); }
  .buy__alt { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .how, .specs { grid-template-columns: 1fr; gap: 16px; }
  .fbt { grid-template-columns: 1fr; padding: 16px; }
  .fbt__items { gap: 6px; }
  .docs { grid-template-columns: 1fr; }
  .sticky .wrap { height: 68px; gap: 10px; }
  .sticky .btn { padding: 0 16px; }
  body.has-sticky { padding-bottom: 68px; }
}