/* Reference-inspired retail purchase panel, using the supplied brand system.
   Functional quantity/colour choices replace the reference cart flow. */
.hero { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 32px; }
.hero-image-stage { background: #fff; border-radius: 0; aspect-ratio: 1.05; }
.hero-image-stage > img { width: 112%; max-width: none; }
.hero-copy { padding-top: 12px; }
.hero-copy h1 { font-size: 32px; text-transform: uppercase; font-weight: 700; line-height: 1.18; letter-spacing: -.8px; }
.hero-copy .product-brand { display: inline; font: inherit; margin: 0; letter-spacing: inherit; }
.cod-label { font-size: 11px; margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.hero-rating { margin-top: 12px; font-size: 12px; }
.hero-description { font-size: 13px; margin-top: 12px; }
.hero-price { margin-top: 17px; gap: 10px; }
.hero-price > strong { font-size: 28px; }
.hero-delivery-note { font-size: 11px; margin-top: 5px; }
.colour-picker { padding: 0; border: 0; margin: 22px 0; }
.colour-picker legend { font-size: 13px; margin-bottom: 10px; }
.colour-picker legend strong { margin-left: 10px; font-weight: 400; color: var(--muted); }
.colour-swatches { display: flex; gap: 10px; }
.colour-swatch { width: 44px; height: 44px; border: 1px solid #888; border-radius: 2px; padding: 4px; background: #fff; }
.colour-swatch::before { content: ''; display: block; height: 100%; border: 1px solid #aaa; }
.swatch-white::before { background: #fff; }
.swatch-blue::before { background: #416ba3; border-color: #416ba3; }
.swatch-black::before { background: #171717; border-color: #171717; }
.colour-swatch[aria-pressed=true] { outline: 2px solid var(--ink); outline-offset: 2px; }
.cod-panel-strip { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; background: var(--accent-soft); font-size: 11px; font-weight: 600; }
.cod-panel-strip svg { width: 17px; height: 17px; }
.cod-panel-strip > span { padding-left: 7px; border-left: 1px solid #86572c; font-size: 10px; font-weight: 400; }
.panel-order-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; margin-top: 8px; }
.hero-quantity { height: 44px; grid-template-columns: 44px 1fr 44px; border-radius: 2px; }
.hero-quantity button { background: #fff; font-size: 18px; }
.hero-quantity input { width: 100%; height: 42px; min-width: 0; padding: 0; font-size: 13px; }
.panel-order-link { display: flex; align-items: center; justify-content: center; gap: 8px; background: #f2f2f2; min-height: 44px; font-size: 12px; }
.panel-order-link svg { width: 18px; height: 18px; }
.hero-button { margin-top: 8px; border-radius: 2px; min-height: 50px; justify-content: center; gap: 20px; }
.hero-button .cta-label { font-size: 13px; }
.hero-trust { justify-content: center; gap: 15px; font-size: 10px; margin-top: 12px; }
.hero-trust svg { width: 15px; height: 15px; }
.panel-offer-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #0f0f0f; color: #fff; margin-top: 16px; padding: 18px; border-radius: 8px; }
.panel-offer-card small { display: block; font-size: 10px; color: var(--accent-soft); margin-bottom: 6px; }
.panel-offer-card strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; }
.offer-card-action { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; background: var(--accent); color: var(--ink); padding: 9px 10px; font-size: 11px; border-radius: 4px; font-weight: 600; }
.purchase-details { margin-top: 22px; border-block: 1px solid var(--line); }
.purchase-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; cursor: pointer; font-size: 13px; font-weight: 500; list-style: none; }
.purchase-details[open] summary > span { transform: rotate(45deg); }
.purchase-details .hero-points { font-size: 12px; margin: 0 0 16px; }
.verification-note { font-size: 10px; margin-top: 12px; }
.hero-photo-unavailable { background: #f9f9f9; }
/* Deliberate shape hierarchy: swatches/quantity/panel CTAs 2px, offer card 8px;
   existing page surfaces retain the established 6/8/10/12px scale. */
@media(max-width:767px) { .hero-quantity input { font-size: 16px; } }
@media(max-width:1023px) { .hero { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 28px; } .hero-copy h1 { font-size: 28px; } .hero-trust { gap: 8px; } }
@media(max-width:767px) { .hero { grid-template-columns: 1fr; gap: 18px; padding-block: 18px 28px; } .hero-image-stage { aspect-ratio: 1.9; } .hero-image-stage > img { width: 100%; } .hero-copy { display: block; padding-top: 0; } .hero-copy h1 { font-size: 27px; max-width: none; } .hero-thumbnails { margin-top: 8px; } .hero-thumb { height: 44px; } .hero-description { margin-top: 10px; } .hero-price { margin-top: 13px; } .colour-picker { margin-block: 17px; } .colour-swatch { width: 44px; height: 44px; } .hero-trust { font-size: 10px; gap: 15px; } .panel-offer-card { margin-top: 15px; } .verification-note { margin-top: 12px; } }