/* PepPure collection: a product-led visual system over the existing store. */
:root{--ink:#142238;--ink-2:#24364b;--ink-soft:#52647b;--ivory:#fff;--paper:#f5f6f7;--sand:#edf0f2;--rule:#dce1e6;--rule-soft:#edf0f2;--text:#142238;--muted:#637080;--copper:#c88056;--copper-text:#975b36;--copper-soft:#f7eee7;--sans:"DM Sans",Arial,system-ui,sans-serif;--gutter:clamp(20px,4.2vw,64px);--max:1440px;--radius:4px;--space-6:clamp(56px,6vw,88px)}
html{scroll-padding-top:105px}body{background:#fff;font-size:15px;line-height:1.6}.icon{flex:none;width:21px;height:21px}button,a,input{touch-action:manipulation}button{font-family:var(--sans)}[hidden]{display:none!important}
.display-1,.display-2,.display-3,.display-4,.display-5{font-family:var(--sans);font-weight:550;letter-spacing:-.04em;line-height:1.1}.display-2{font-size:clamp(32px,4vw,52px)}.display-3{font-size:clamp(29px,3.5vw,44px)}.display-4{font-size:30px}.display-5{font-size:22px}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:650;margin-bottom:18px}.lede{font-size:17px}.button{font-size:13px;font-weight:600;border-radius:3px;min-height:50px;padding:14px 23px;gap:20px;transition:background .2s,transform .2s}.button .icon{width:18px}.button--copper{background:var(--copper);border-color:var(--copper);color:#152237}.button--copper:hover{background:#dea07b;border-color:#dea07b;color:#152237;transform:translateY(-2px)}.button--light{background:#fff;color:var(--ink);border-color:#fff}.button--light:hover{background:#edf0f2;color:var(--ink)}.text-link{display:inline-flex;gap:15px;align-items:center;font-size:13px;font-weight:600;text-decoration:none}.text-link .icon{width:19px;transition:transform .2s}.text-link:hover .icon{transform:translateX(4px)}.page-head{padding-top:42px;padding-bottom:30px}.page-head .eyebrow{margin-bottom:12px}.crumbs{font-size:10px;margin-bottom:23px;color:#73808b}
dialog{border:1px solid #dce2e7;border-radius:7px;padding:0;color:var(--ink);max-height:90dvh;box-shadow:0 30px 100px #0003;overflow:auto}dialog::backdrop{background:#0b172aaa;backdrop-filter:blur(5px)}dialog[open]{animation:dialog-in .25s ease-out}.dialog-close{position:absolute;right:16px;top:16px;z-index:3;border:1px solid #e0e5e8;background:#ffffffef;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:var(--ink)}.dialog-close .icon{width:17px}.zoom-dialog{width:min(800px,92vw);background:#f4f6f8}.zoom-dialog>img{max-height:80dvh;width:100%;object-fit:contain;mix-blend-mode:multiply}.zoom-dialog>p{text-align:center;font-size:10px;color:#6c7985;padding:0 12px 12px;margin:0}.modal-open{overflow:hidden}.empty{background:#f7f8fa;border:1px solid var(--rule);border-radius:4px;padding:48px}.empty__title{font-family:var(--sans)!important;font-size:24px!important;letter-spacing:-.04em}.form-layout{padding-bottom:70px}.prose-layout{padding-bottom:60px}.panel,.checkout-box{border-radius:4px}.spec__row{border-color:var(--rule)}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}

@media(max-width:600px){html{scroll-padding-top:80px}.crumbs{font-size:9px;margin-bottom:15px}.dialog-close{right:11px;top:11px;width:34px;height:34px}.zoom-dialog{width:calc(100% - 25px)}.page-head:not(.catalog-head) .display-2{font-size:35px}.prose-layout{display:block}.prose{font-size:14px}.form-layout{padding-bottom:40px}.empty{padding:30px 23px}}

@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}.button:hover,.text-link:hover .icon{transform:none}}

/* ==========================================================================
   Shop, product, search and lab-testing pages.
   Plain commerce layout: cards with price, stock and a button; a standard
   product page with size pills, quantity, add to cart and tabs.
   ========================================================================== */

/* Shared bits ------------------------------------------------------------- */
.stock{ display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.stock::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock--in{ color: #2c6a4c; }
.stock--out{ color: var(--muted); }
.lot-tag{ display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: 1px 6px; vertical-align: middle; }
.zoom-dialog > p{ display: none; }

/* Product card ------------------------------------------------------------ */
.product-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
.product-grid--4, .search-body .product-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .product-grid .product-card{ min-width: 0; }
.product-card{ display: flex; flex-direction: column; min-width: 0; background: #fff; }
.product-card__media{ position: relative; aspect-ratio: 1; background: #f4f6f7; border: 1px solid #e8ecef; border-radius: 4px; overflow: hidden; }
.product-card__media > a{ display: block; width: 100%; height: 100%; }
.product-card__media img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .4s ease; }
.product-card:hover .product-card__media img{ transform: scale(1.03); }
.product-card__quick{ position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 6px); opacity: 0; border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: 3px; padding: 7px 14px; font: 600 12px/1.2 var(--sans); cursor: pointer; transition: opacity .2s, transform .2s; }
.product-card:hover .product-card__quick, .product-card__quick:focus-visible{ opacity: 1; transform: translate(-50%, 0); }
.product-card__quick:hover{ background: var(--ink); color: #fff; border-color: var(--ink); }
.product-card__body{ display: flex; flex-direction: column; gap: 6px; padding-top: 14px; flex: 1; }
.product-card__title{ margin: 0; font: 600 17px/1.3 var(--sans); letter-spacing: -.01em; }
.product-card__title a{ color: var(--ink); text-decoration: none; }
.product-card__title a:hover{ text-decoration: underline; }
.product-card__sizes{ margin: 0; font-size: 13px; color: var(--muted); }
.product-card__row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.product-card__price{ margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.product-card__price span{ font-size: 13px; font-weight: 400; color: var(--muted); }
.product-card__form{ margin: 0; }
.product-card__button{ width: 100%; margin-top: 6px; min-height: 42px; font-size: 13px; justify-content: center; }
.product-card__form .product-card__button{ margin-top: 6px; }
.no-js .product-card__quick{ display: none; }
@media (hover: none) { .product-card__quick{ display: none; } }

/* Shop / category / search heads -------------------------------------------- */
.shop-head{ padding-top: 28px; padding-bottom: 8px; }
.shop-head h1{ font: 600 clamp(28px, 3.2vw, 38px)/1.15 var(--sans); letter-spacing: -.025em; margin: 0 0 8px; }
.shop-head > p, .docs-head__grid p{ margin: 0; max-width: 620px; font-size: 15px; color: var(--muted); }
.shop-head .crumbs ol{ margin-bottom: 18px; font-size: 13px; }
.shop-body{ padding-top: 22px; padding-bottom: 72px; }

/* Shop layout ----------------------------------------------------------------
   Desktop: sticky filter sidebar (internal scroll when taller than the viewport) beside the
   grid. <=900px with JS: the sidebar becomes an off-canvas drawer opened from the toolbar.
   <=900px without JS: the sidebar renders above the grid as a bordered panel. */
.shop{ --shop-top: 96px; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 44px; align-items: start; }
.shop__aside{ position: sticky; top: var(--shop-top); display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - var(--shop-top) - 24px); max-height: calc(100dvh - var(--shop-top) - 24px); }
.filters-panel{ display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Panel head: "Filters (n)" + Clear all (+ close button in the drawer) */
.filters-head{ display: flex; align-items: center; gap: 10px; min-height: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.filters-head__title{ display: flex; align-items: center; gap: 8px; margin: 0; font: 600 17px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.filters-head__count{ display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12px/1 var(--sans); letter-spacing: 0; }
.filters-head__clear{ margin-left: auto; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--copper-text); text-underline-offset: .2em; }
.filters-head__clear:hover{ color: var(--ink); }
.filters-head__close{ display: none; }

/* Scrollable group list. Inline padding keeps focus rings clear of the scroll clip. */
.shop-filters{ flex: 1; min-height: 0; margin: 0 -10px; padding: 0 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c5ced6 transparent; }
.shop-filters::-webkit-scrollbar{ width: 6px; }
.shop-filters::-webkit-scrollbar-thumb{ background: #c5ced6; border-radius: 6px; }
.shop-filters__apply{ padding: 16px 0 4px; }
.shop-filters__apply .button{ width: 100%; justify-content: center; min-height: 44px; }

/* Collapsible groups (native <details>) */
.filter-group{ border-bottom: 1px solid var(--rule); }
.filter-group__summary{ list-style: none; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 0; cursor: pointer; color: var(--ink); user-select: none; -webkit-user-select: none; }
.filter-group__summary::-webkit-details-marker{ display: none; }
.filter-group__summary::marker{ content: ""; }
.filter-group__summary:focus-visible{ outline-offset: 2px; border-radius: 2px; }
.filter-group__title{ font: 600 14px/1.3 var(--sans); letter-spacing: .005em; }
.filter-group__summary:hover .filter-group__title{ color: var(--copper-text); }
.filter-group__selected{ display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--copper-soft); color: var(--copper-text); font: 600 11px/1 var(--sans); }
.filter-group__chevron{ margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease; }
.filter-group[open] > .filter-group__summary .filter-group__chevron{ transform: rotate(180deg); }
.filter-group__body{ border: 0; margin: 0; padding: 0 0 14px; min-width: 0; }

/* Option rows: full-row label (40px target) with a drawn control over the native input */
.filter-option{ position: relative; }
.filter-option__input{ position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin: -9px 0 0; opacity: 0; cursor: pointer; z-index: 1; }
.filter-option__label{ display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 -8px; padding: 4px 8px; border-radius: 4px; font-size: 14px; line-height: 1.35; color: var(--ink); cursor: pointer; transition: background-color .15s; }
.filter-option__label:hover{ background: #f3f5f7; }
.filter-option__control{ position: relative; flex: none; width: 18px; height: 18px; border: 1.5px solid #8b97a4; border-radius: 4px; background: #fff; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.filter-option--radio .filter-option__control{ border-radius: 50%; }
.filter-option__text{ flex: 1; min-width: 0; overflow-wrap: anywhere; }
.filter-option__count{ flex: none; margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.filter-option__label:hover .filter-option__control{ border-color: var(--ink); }
.filter-option__input:checked + .filter-option__label .filter-option__control{ background: var(--ink); border-color: var(--ink); }
.filter-option--checkbox .filter-option__input:checked + .filter-option__label .filter-option__control::after{ content: ""; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.filter-option--radio .filter-option__input:checked + .filter-option__label .filter-option__control{ box-shadow: inset 0 0 0 3.5px #fff; }
.filter-option__input:checked + .filter-option__label .filter-option__text{ font-weight: 600; }
.filter-option__input:focus-visible + .filter-option__label .filter-option__control{ outline: 2px solid var(--focus); outline-offset: 2px; }
.filter-option.is-empty .filter-option__input, .filter-option.is-empty .filter-option__label{ cursor: default; }
.filter-option.is-empty .filter-option__label{ color: #98a2ad; }
.filter-option.is-empty .filter-option__label:hover{ background: transparent; }
.filter-option.is-empty .filter-option__control{ border-color: #d5dbe0; background: #f6f7f9; }
.filter-option.is-empty .filter-option__count{ color: #a7b0b9; }
@media (forced-colors: active){
  .filter-option__input:checked + .filter-option__label .filter-option__control{ background: Highlight; border-color: Highlight; }
  .filter-option__control{ border-color: ButtonText; }
}

/* Price range */
.price-range{ display: flex; align-items: flex-end; gap: 8px; }
.price-range__field{ flex: 1; min-width: 0; }
.price-range__field label{ display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.price-range__input{ display: flex; align-items: center; height: 40px; padding-left: 10px; border: 1px solid #c5ced6; border-radius: 4px; background: #fff; transition: border-color .15s; }
.price-range__input:hover{ border-color: #8b97a4; }
.price-range__input:focus-within{ border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 0; }
.price-range__input > span{ color: var(--muted); font-size: 14px; }
.price-range__input input[type="number"]{ flex: 1; width: 100%; min-width: 0; min-height: 0; height: 38px; padding: 0 8px 0 3px; border: 0; background: transparent; font-size: 14px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.price-range__input input:focus{ outline: none; }
.price-range__input input::-webkit-inner-spin-button, .price-range__input input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
.price-range__input input::placeholder{ color: #9aa4ae; }
.price-range__to{ padding-bottom: 10px; font-size: 13px; color: var(--muted); }
.price-range__foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.price-range__hint{ margin: 0; font-size: 12px; color: var(--muted); }
.price-range__apply{ min-height: 36px; padding: 6px 16px; font-size: 13px; }

/* Drawer-only parts */
.filters-foot{ display: none; }
.filters-toggle{ display: none; }
.filters-backdrop{ display: none; }

/* Toolbar: count · sort (and the drawer button on small screens) */
.shop-toolbar{ display: flex; align-items: center; gap: 16px; min-height: 56px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.shop-toolbar .results-count{ margin: 0 auto 0 0; font-size: 14px; color: var(--muted); }
.results-count{ margin: 0; font-size: 14px; color: var(--muted); }
.results-count strong{ color: var(--ink); font-weight: 600; }
.shop-sort{ display: flex; align-items: center; gap: 8px; margin: 0; }
.shop-sort label{ font-size: 14px; color: var(--muted); white-space: nowrap; }
.shop-sort select{ min-height: 40px; font-size: 14px; width: auto; min-width: 190px; border-color: #c5ced6; border-radius: 4px; }
.shop-sort select:hover{ border-color: #8b97a4; }

/* Active filter chips */
.active-filters{ margin: 0 0 22px; }
.active-filters__list{ list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.active-filters__list li{ max-width: 100%; }
.filter-chip{ display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 5px 10px 5px 13px; border: 1px solid #d3dae0; border-radius: 999px; background: #f3f5f7; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; transition: background-color .15s, border-color .15s; }
.filter-chip:hover{ background: #fff; border-color: var(--ink); color: var(--ink); }
.filter-chip__x{ flex: none; width: 14px; height: 14px; color: var(--muted); }
.filter-chip:hover .filter-chip__x{ color: var(--ink); }
.filter-chip--scope{ background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-chip--scope .filter-chip__x{ color: #c3ccd6; }
.filter-chip--scope:hover{ background: #24364b; border-color: #24364b; color: #fff; }
.filter-chip--scope:hover .filter-chip__x{ color: #fff; }
.active-filters__clear{ display: inline-flex; align-items: center; min-height: 34px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--copper-text); text-underline-offset: .2em; }
.active-filters__clear:hover{ color: var(--ink); }

/* In-place updates (collection.js): dim the results, keep the panel usable */
.shop.is-loading .shop__main{ opacity: .5; transition: opacity .15s .1s; }
.shop.is-loading .shop-filters{ opacity: .75; transition: opacity .15s .1s; }
body.filters-open{ overflow: hidden; }

/* Search -------------------------------------------------------------------- */
.search-head .search-form { max-width: 640px; margin-top: 18px; }
.search-form--compact{ margin-top: 0; max-width: 460px; flex: 1; }
.search-form--compact input[type="search"] { min-height: 38px; }
.search-head .results-count{ margin-top: 12px; }
.search-section{ font: 600 20px/1.3 var(--sans); letter-spacing: -.01em; margin: 34px 0 16px; }
.search-section:first-child, .notice + .search-section{ margin-top: 0; }
.search-section span{ font-weight: 400; color: var(--muted); }

/* Product page -------------------------------------------------------------- */
.pdp{ padding-top: 24px; }
.pdp .crumbs ol{ margin-bottom: 22px; font-size: 13px; }
.pdp__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pdp__image{ position: relative; display: block; width: 100%; padding: 0; border: 1px solid #e8ecef; border-radius: 4px; background: #f4f6f7; overflow: hidden; cursor: zoom-in; }
.pdp__image img{ width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.pdp__zoom{ position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid #e1e6ea; color: var(--ink); }
.pdp__zoom .icon{ width: 18px; height: 18px; }
.pdp__summary{ max-width: 520px; }
.pdp__title{ font: 600 clamp(30px, 3.4vw, 40px)/1.12 var(--sans); letter-spacing: -.03em; margin: 0 0 6px; }
.pdp__code{ margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.pdp__code span{ font-family: var(--mono); font-size: 12px; }
.pdp__flag{ margin: 0 0 16px; padding: 10px 12px; font-size: 13px; background: #f4f6f7; border-left: 3px solid var(--rule); }
.pdp__price{ margin: 0 0 6px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.pdp__stock{ display: flex; align-items: center; gap: 7px; margin: 0 0 16px; font-size: 14px; font-weight: 600; }
.pdp__stock.is-in{ color: #2c6a4c; }
.pdp__stock.is-out{ color: var(--muted); }
.pdp__dot{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pdp__lede{ margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.pdp-buy{ margin: 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.pdp-sizes{ border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.pdp-sizes legend{ padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.pdp-sizes__list{ display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-size{ position: relative; }
.pdp-size input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.pdp-size label{ display: inline-flex; align-items: center; gap: 4px; min-height: 42px; min-width: 76px; justify-content: center; padding: 8px 16px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.pdp-size label small{ font-weight: 400; color: var(--muted); }
.pdp-size label:hover{ border-color: var(--ink); }
.pdp-size input:checked + label{ border-color: var(--ink); background: var(--ink); color: #fff; }
.pdp-size input:checked + label small{ color: #d6dde5; }
.pdp-size input:focus-visible + label{ outline: 2px solid var(--focus); outline-offset: 2px; }
.pdp-size input[data-ok="0"] + label{ color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.pdp-size input[data-ok="0"]:checked + label{ color: #fff; }
.pdp-buy__row{ display: flex; gap: 12px; align-items: flex-end; }
.pdp-qty label{ display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.pdp-qty .stepper{ height: 50px; }
.pdp-qty .stepper input{ width: 52px; min-height: 50px; padding-inline: 0; text-align: center; font-family: var(--sans); font-size: 15px; border-color: var(--rule); -moz-appearance: textfield; }
.pdp-qty .stepper input::-webkit-inner-spin-button, .pdp-qty .stepper input::-webkit-outer-spin-button{ appearance: none; margin: 0; }
.pdp-qty .stepper__btn{ width: 38px; background: #fff; border: 1px solid var(--rule); font-size: 17px; }
.pdp-buy__button{ flex: 1; min-height: 50px; font-size: 15px; justify-content: center; }
.pdp-buy__button:disabled{ opacity: 1; background: #e6eaee; border-color: #e6eaee; color: #5d6b7a; cursor: not-allowed; }
.pdp-buy__reason{ margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.pdp-trust{ list-style: none; padding: 18px 0 0; margin: 22px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.pdp-trust li{ display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pdp-trust .icon{ width: 20px; height: 20px; color: var(--copper-text); flex: none; }
.pdp__ruo{ margin: 16px 0 0; font-size: 12px; color: var(--muted); }

/* Tabs */
.pdp-tabs{ margin-top: 56px; }
.pdp-tabs__list{ display: flex; gap: 32px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.pdp-tabs__list::-webkit-scrollbar{ display: none; }
.pdp-tabs__list button{ flex: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 0; background: transparent; color: var(--muted); font: 600 15px/1.3 var(--sans); cursor: pointer; white-space: nowrap; }
.pdp-tabs__list button:hover{ color: var(--ink); }
.pdp-tabs__list button[aria-selected="true"]{ color: var(--ink); border-bottom-color: var(--ink); }
.pdp-panel{ padding-top: 30px; scroll-margin-top: 140px; }
.js .pdp-panel__title{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pdp-panel__title{ font: 600 20px/1.3 var(--sans); margin: 0 0 14px; }
.no-js .pdp-tabs__list{ display: none; }
.no-js .pdp-panel[hidden]{ display: block !important; }
.pdp-prose{ max-width: 720px; }
.pdp-prose p, .pdp-prose li{ font-size: 15px; line-height: 1.7; }
.pdp-prose h3{ font: 600 16px/1.4 var(--sans); margin: 22px 0 8px; }
.pdp-prose__note{ color: var(--muted); font-size: 13px !important; }
.pdp-sources{ font-size: 14px; }
.pdp-split{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pdp-spec{ margin: 0; border-top: 1px solid var(--rule); }
.pdp-spec > div{ display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.pdp-spec dt{ color: var(--muted); }
.pdp-spec dd{ margin: 0; font-weight: 500; }
.pdp-callout{ display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 22px; background: #f4f6f7; border-radius: 4px; }
.pdp-callout > .icon{ grid-row: span 2; width: 24px; height: 24px; color: var(--copper-text); }
.pdp-callout p{ margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.pdp-callout p strong{ display: block; color: var(--ink); margin-bottom: 4px; }
.pdp-callout__link{ grid-column: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; }
.pdp-callout__link .icon{ width: 16px; height: 16px; }
.pdp-callout--wide{ max-width: 720px; }
.pdp-panel__intro{ max-width: 720px; font-size: 15px; color: var(--muted); }
.pdp-panel__sub{ font: 600 16px/1.4 var(--sans); margin: 26px 0 8px; }
.pdp-panel__links{ display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 14px; font-weight: 600; }
.pdp-docs{ list-style: none; padding: 0; margin: 0; }
.pdp-docs li{ padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.pdp-docs span{ color: var(--muted); font-size: 13px; }

/* Lot table (product page) */
.lot-table td, .lot-table th{ font-size: 14px; }
.lot-table th{ font: 600 12px/1.3 var(--sans); letter-spacing: .04em; color: var(--muted); border-bottom-color: var(--rule); }
.lot-docs{ list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.lot-docs span{ color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Related */
.pdp-related{ padding-top: 40px; padding-bottom: 72px; border-top: 1px solid var(--rule); }
.pdp-related__head{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.pdp-related__head h2{ font: 600 24px/1.2 var(--sans); letter-spacing: -.02em; margin: 0; }
.pdp-related__head a{ font-size: 14px; font-weight: 600; }

/* Quick view */
.quick-dialog{ width: min(780px, calc(100% - 28px)); }
.quick-dialog__content{ display: grid; grid-template-columns: 1fr 1fr; }
.quick-image{ display: flex; align-items: center; background: #f4f6f7; }
.quick-image img{ width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.quick-copy{ padding: 48px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.quick-copy h2{ font: 600 26px/1.15 var(--sans); letter-spacing: -.02em; margin: 0; }
.quick-sizes{ width: 100%; border-collapse: collapse; font-size: 14px; }
.quick-sizes th, .quick-sizes td{ text-align: left; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.quick-sizes thead th{ font-size: 12px; font-weight: 600; color: var(--muted); }
.quick-sizes tbody th{ font-weight: 600; }
.quick-sizes td{ text-align: right; }
.quick-sizes thead th:last-child{ text-align: right; }
.quick-copy .button{ margin-top: auto; justify-content: center; }

/* Lab testing / documentation -------------------------------------------------- */
.docs-head__grid{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.docs-lookup{ background: #f4f6f7; border-radius: 4px; padding: 22px; scroll-margin-top: 120px; }
.lot-lookup{ margin: 0; }
.lot-lookup label{ display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.lot-lookup__row{ display: flex; gap: 8px; }
.lot-lookup__row input{ flex: 1; min-width: 0; min-height: 46px; font-family: var(--mono); font-size: 15px; text-transform: uppercase; }
.lot-lookup__row input::placeholder{ text-transform: none; font-family: var(--sans); }
.lot-lookup__hint{ margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.docs-toolbar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.docs-kinds{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.docs-kinds a{ display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--ink); background: #fff; }
.docs-kinds a:hover{ border-color: var(--ink); }
.docs-kinds a[aria-current="page"]{ background: var(--ink); border-color: var(--ink); color: #fff; }
.docs-body .results-count{ margin-bottom: 10px; }
.doc-table th{ font: 600 12px/1.3 var(--sans); letter-spacing: .04em; color: var(--muted); border-bottom-color: var(--rule); }
.doc-table td{ font-size: 14px; }
.doc-table__dl{ white-space: nowrap; text-align: right; font-weight: 600; }
.docs-narrow{ max-width: 860px; padding-bottom: 72px; }
.docs-narrow > p{ margin-bottom: 20px; }
.docs-narrow .docs-lookup{ margin-top: 8px; max-width: 520px; }
.docs-note{ margin: 0 0 18px; padding: 10px 12px; font-size: 13px; background: #f4f6f7; border-left: 3px solid var(--rule); }
.docs-spec{ margin-top: 18px; }
.docs-files{ list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.docs-files li{ display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.docs-files p{ margin: 0; }
.docs-files__title{ font-weight: 600; }
.docs-help{ margin-top: 24px; font-size: 14px; }

/* Responsive ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .product-grid--4, .search-body .product-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid--4 > :nth-child(4){ display: none; }
  .shop{ grid-template-columns: 220px minmax(0, 1fr); gap: 30px; }
  .shop-sort select{ min-width: 170px; }
  .pdp__grid{ gap: 36px; }
}
@media (max-width: 900px) {
  .shop{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Without JS: the filter panel sits above the grid. */
  .shop__aside{ position: static; max-height: none; margin-bottom: 24px; padding: 14px 16px 2px; border: 1px solid var(--rule); border-radius: 6px; }
  .shop-filters{ overflow: visible; }
  .filter-group:last-of-type{ border-bottom: 0; }
  .price-range__input input[type="number"]{ font-size: 16px; } /* no iOS focus zoom */
  .shop-toolbar{ flex-wrap: wrap; gap: 10px 12px; min-height: 0; }
  .shop-toolbar .results-count{ order: 3; flex-basis: 100%; margin: 0; }
  .shop-sort{ margin-left: auto; }
  /* With JS: off-canvas drawer. */
  .js .filters-toggle{ display: inline-flex; gap: 8px; min-height: 40px; padding: 8px 14px; font-size: 14px; border-color: #c5ced6; border-radius: 4px; }
  .js .filters-toggle:hover{ background: #f3f5f7; color: var(--ink); border-color: var(--ink); }
  .js .filters-toggle .icon{ width: 18px; height: 18px; }
  .filters-toggle__count{ font-weight: 600; }
  .js .shop__aside{ position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(400px, calc(100% - 32px)); max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: 0 0 48px rgba(11, 23, 42, .25); transform: translateX(-102%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
  .js .shop__aside.is-open{ transform: none; visibility: visible; transition: transform .28s ease; }
  .js .shop__aside.is-instant{ transition: none; }
  .js .filters-panel{ height: 100%; }
  .js .filters-head{ min-height: 64px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--rule); }
  .js .filters-head__close{ display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
  .js .filters-head__title + .filters-head__close{ margin-left: auto; }
  .js .filters-head__close:hover{ background: #f3f5f7; }
  .js .filters-head__close .icon{ width: 20px; height: 20px; }
  .js .shop-filters{ margin: 0; padding: 0 20px 8px; overflow-y: auto; }
  .js .filter-group:last-of-type{ border-bottom: 0; }
  .js .filters-foot{ display: block; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); background: #fff; }
  .filters-foot__show{ width: 100%; justify-content: center; min-height: 48px; font-size: 15px; }
  .js .filters-backdrop{ display: block; position: fixed; inset: 0; z-index: 65; background: rgba(11, 23, 42, .5); }
  .js .filters-backdrop[hidden]{ display: none; }
  .product-grid, .search-body .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp__grid{ grid-template-columns: 1fr; gap: 24px; }
  .pdp__gallery{ max-width: 560px; }
  .pdp__summary{ max-width: none; }
  .pdp-split{ grid-template-columns: 1fr; gap: 24px; }
  .docs-head__grid{ grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .shop-head{ padding-top: 18px; }
  .shop-head .crumbs ol, .pdp .crumbs ol{ margin-bottom: 12px; }
  /* One row: [Filters (n)] [sort select]; the select's own text says what it sorts by. */
  .js .shop-sort{ flex: 1; min-width: 0; justify-content: flex-end; }
  .js .shop-sort label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shop-sort select{ min-width: 0; width: 100%; max-width: 220px; }
  .product-grid, .product-grid--4, .search-body .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .product-grid--4 > :nth-child(4){ display: flex; }
  .product-card__title{ font-size: 15px; }
  .product-card__sizes{ font-size: 12px; }
  .product-card__price{ font-size: 15px; }
  .product-card__row{ flex-direction: column; align-items: flex-start; gap: 4px; }
  .product-card__button{ font-size: 13px; padding-inline: 8px; }
  .pdp{ padding-top: 14px; }
  .pdp-buy__row{ flex-wrap: wrap; }
  .pdp-buy__button{ min-width: 0; }
  .pdp-tabs{ margin-top: 36px; }
  .pdp-tabs__list{ gap: 22px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .pdp-tabs__list button{ font-size: 14px; }
  .pdp-spec > div{ grid-template-columns: 1fr 1.3fr; }
  .lot-lookup__row input { font-size: 16px; }
  .quick-dialog__content{ grid-template-columns: 1fr; }
  .quick-image{ height: 240px; }
  .quick-image img{ height: 100%; aspect-ratio: auto; object-fit: contain; }
  .quick-copy{ padding: 22px; }
  .docs-files li{ flex-direction: column; align-items: flex-start; }
  .doc-table__dl{ text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .product-card__media img{ transition: none; transform: none !important; } }