/* ==========================================================================
   pages.css - page specific styles
   SHARED FILE. Three agents write here:
     agent-05  PLP / collection / brand
     agent-06  PDP / product detail
     agent-07  cart, drawer, checkout, order confirmation
   Each section is fenced. APPEND your own fence, never reformat or rewrite
   somebody else's. Loaded after components.css, so overriding a component
   class from here is safe.
   ========================================================================== */


/* === CART ================================================================
   agent-07. Cart page, cart drawer, checkout, order confirmation.
   Everything between this marker and END CART belongs to agent-07.
   ======================================================================== */

/* -- shared bits the cart views rely on ---------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Money rows, used on the cart page, in the drawer, on checkout and on the
   order confirmation. One definition so the four can never drift apart. */
.summary__rows {
  margin: 0;
  padding: 0;
}
.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
}
.summary__row dt {
  color: var(--fg-muted);
  margin: 0;
}
.summary__row dd {
  margin: 0;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.summary__row--total {
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-md);
}
.summary__row--total dt,
.summary__row--total dd {
  color: var(--fg);
  font-weight: var(--fw-bold);
}
.summary__gst {
  margin: var(--sp-1) 0 0;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  text-align: right;
}
.summary__note {
  margin: var(--sp-3) 0 0;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.summary__assure {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4) 0 0;
  border-block-start: 1px solid var(--line-soft, var(--line));
  list-style: none;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}
.summary__assure li {
  position: relative;
  padding-inline-start: var(--sp-5);
  padding-block: var(--sp-1);
}
.summary__assure li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle, 50%);
  background: var(--fg-subtle);
}

/* -- free shipping progress ---------------------------------------------- */

.freeship {
  margin-block: var(--sp-4);
}
.freeship__text {
  margin: 0 0 var(--sp-2);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.freeship__track {
  position: relative;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  overflow: hidden;
}
.freeship__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--fg);
  transition: width var(--dur) var(--ease);
}

/* -- status, issues ------------------------------------------------------- */

.cart-status {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--fg);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.cart-status--warn {
  border-color: var(--warn);
  background: var(--bg);
}

.cart-issues {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--error, var(--sale));
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.cart-issues__title {
  margin: 0 0 var(--sp-1);
  color: var(--error, var(--sale));
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.cart-issues__body {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.cart-note {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.cart-note--warn { border-color: var(--warn); }

/* -- a bag line ----------------------------------------------------------- */

.cart-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-5);
  border-block-end: 1px solid var(--line-soft, var(--line));
}
.cart-line:first-child { padding-block-start: 0; }

.cart-line__media {
  display: block;
  width: 72px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  overflow: hidden;
}
.cart-line__img,
.cart-line__noimg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-line__main { min-width: 0; }

.cart-line__brand {
  margin: 0 0 2px;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.cart-line__title {
  display: block;
  color: var(--fg);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cart-line__title:hover { text-decoration: underline; }
.cart-line__variant,
.cart-line__unit {
  margin: var(--sp-1) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}
.cart-line__flag {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.cart-line__flag--stop { color: var(--error, var(--sale)); }
.cart-line__flag--warn { color: var(--warn); }

.cart-line__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
}
.cart-line__remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-subtle);
  font-family: inherit;
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cart-line__remove:hover { color: var(--fg); }
.cart-line__remove--strong { color: var(--fg); }

.cart-line__qtystatic {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}

.cart-line__total {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.cart-line__was {
  display: block;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}
.cart-line__unavailable,
.cart-line__pending {
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}

.cart-line--stopped .cart-line__media,
.cart-line--stopped .cart-line__title { opacity: 0.55; }

/* qty stepper.
   base.css normalises every bare <input> with a 7 x :not() selector, which
   outranks a single class. The stepper input is a component, not a form field,
   so it has to win that one back explicitly. */
.qty {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-pill);
  background: var(--bg);
}
.qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--fg);
  cursor: pointer;
  appearance: none;
}
.qty__btn:hover:not(:disabled) { background: var(--bg-soft); }
.qty__btn:disabled { color: var(--fg-subtle); cursor: not-allowed; }
.qty__input {
  width: 2.75rem !important;
  min-width: 0;
  height: 34px;
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fg);
  /* 1rem, not the type scale: anything smaller makes iOS Safari zoom on focus */
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: none;
}
.qty__input:focus-visible {
  outline: var(--ring-w, 2px) solid var(--ring, var(--focus, currentColor));
  outline-offset: -2px;
}

/* -- skeleton while the bag loads ---------------------------------------- */

.cart-line--skeleton {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
}
.cart-line--skeleton .cart-line__media,
.cart-line--skeleton .sk {
  display: block;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.cart-line--skeleton .cart-line__media { width: 72px; height: 72px; }
.cart-line--skeleton .sk { height: 10px; margin-block-end: var(--sp-2); }
.sk--a { width: 40%; }
.sk--b { width: 80%; }
.sk--c { width: 25%; }

/* -- empty state ---------------------------------------------------------- */

.cart-empty {
  padding: var(--sp-8) 0;
  text-align: center;
}
.cart-empty__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-display);
}
.cart-empty__body {
  margin: 0 0 var(--sp-5);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* ==========================================================================
   CART PAGE  /cart
   ========================================================================== */

.cartpage { padding-block: var(--sp-8) var(--sp-12); }

.cartpage__head { margin-block-end: var(--sp-7); }
.cartpage__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-display);
}
.cartpage__sub {
  margin: var(--sp-2) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.cartpage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.cartpage__continue {
  margin-block-start: var(--sp-6);
}
.cartpage__continue-link {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cartpage__continue-link:hover { color: var(--fg); }

.cartpage.is-empty .cartpage__continue { display: none; }

.summary {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}
.summary__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
}
.summary__cta { margin-block-start: var(--sp-5); }

.is-disabled,
[aria-disabled="true"].btn {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
}

/* recommendation rail */
.cart-rail { margin-block-start: var(--sp-12); }
.cart-rail__title {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-display);
}
.cart-rail__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cart-rail__empty {
  grid-column: 1 / -1;
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
}
.rail-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.rail-card__media {
  display: block;
  aspect-ratio: var(--card-ratio, 1 / 1);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  overflow: hidden;
}
.rail-card__img,
.rail-card__noimg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rail-card__brand {
  display: block;
  margin-block-start: var(--sp-3);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.rail-card__title {
  display: block;
  margin-block-start: 2px;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}

@media (min-width: 700px) {
  .cart-rail__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .cartpage { padding-block: var(--sp-10) var(--sp-16); }
  .cartpage__grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--sp-10);
  }
  .cartpage__summary {
    position: sticky;
    inset-block-start: calc(var(--header-h, 56px) + var(--sp-4));
  }
}

/* ==========================================================================
   CART DRAWER  built by public/js/cart.js
   The .drawer / .drawer__panel shell is agent-03's in components.css.
   Only cart specific bits live here.
   ========================================================================== */

html.has-cart-drawer,
html.has-cart-drawer body { overflow: hidden; }

.cart-drawer__panel { width: min(440px, 92vw); }

.cart-drawer__heading {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}
.cart-drawer__count {
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.cart-drawer__freeship {
  flex: none;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--line-soft, var(--line));
}

.cart-drawer__body { padding-block: var(--sp-5); }
.cart-drawer__lines .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; }
.cart-drawer__lines .cart-line__media { width: 64px; }
.cart-drawer__lines .cart-line:last-child { border-block-end: 0; }
.cart-drawer__lines.is-empty { display: none; }

.cart-drawer__empty { padding-block: var(--sp-6); }

.cart-drawer__foot .summary__row { padding-block: var(--sp-1); }
.cart-drawer__checkout { margin-block-start: var(--sp-4); }
.cart-drawer__continue {
  display: block;
  width: 100%;
  margin-block-start: var(--sp-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font-family: inherit;
  font-size: var(--fs-xs);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cart-drawer__continue:hover { color: var(--fg); }

/* ==========================================================================
   CHECKOUT  /checkout
   ========================================================================== */

.checkout { padding-block: var(--sp-7) var(--sp-12); }

.checkout__head { margin-block-end: var(--sp-6); }
.checkout__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-display);
}
.checkout__crumbs {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
}
.checkout__crumbs a {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.checkout__crumbs a:hover { color: var(--fg); }

.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.co-section {
  padding-block-end: var(--sp-7);
  margin-block-end: var(--sp-7);
  border-block-end: 1px solid var(--line-soft, var(--line));
}
.co-section:last-of-type { border-block-end: 0; }
.co-section__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.co-section__note {
  margin: 0 0 var(--sp-4);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.co-alert {
  margin-block-end: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--error, var(--sale));
  border-radius: var(--radius-sm);
  color: var(--error, var(--sale));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.co-alert--ok {
  border-color: var(--success);
  color: var(--fg);
}

/* fields.
   Every field is a <p>, and base.css gives any <p> after a <p> a top margin.
   Fields carry their own bottom margin, so the inherited one has to go or the
   two column rows land off by 16px. */
.checkout .field { margin-block: 0 var(--sp-4); }
.field-row > .field + .field { margin-block-start: 0; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-4);
}
.field-row > .field { min-width: 0; }
.field__optional {
  color: var(--fg-subtle);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: normal;
}
.field__help {
  display: block;
  margin-block-start: var(--sp-1);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}
.field__error {
  display: block;
  margin-block-start: var(--sp-1);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.field__error[hidden] { display: none; }
.field__selectwrap {
  position: relative;
  display: block;
}
.field__selectwrap::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--sp-4);
  inset-block-start: 50%;
  width: 8px;
  height: 8px;
  margin-block-start: -6px;
  border-inline-end: 1.5px solid var(--fg-muted);
  border-block-end: 1.5px solid var(--fg-muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.field__select {
  width: 100%;
  padding-inline-end: var(--sp-9);
  appearance: none;
  background-color: var(--bg);
}

/* shipping options */
.shipopts {
  display: grid;
  gap: var(--sp-3);
}
.shipopt {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.shipopt:has(.shipopt__radio:checked) {
  border-color: var(--fg);
  background: var(--bg-soft);
}
.shipopt:has(.shipopt__radio:focus-visible) {
  outline: var(--ring-w, 2px) solid var(--ring, var(--focus, currentColor));
  outline-offset: var(--ring-off, 2px);
}
.shipopt__radio {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--fg);
}
.shipopt__main {
  flex: 1 1 auto;
  min-width: 0;
}
.shipopt__label {
  display: block;
  font-size: var(--fs-sm);
}
.shipopt__eta {
  display: block;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}
.shipopt__price {
  flex: none;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* payment, switched off on purpose */
.pay-notice {
  margin-block-end: var(--sp-5);
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong, var(--line));
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.pay-notice__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.pay-notice__body {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.pay-fields--off {
  opacity: 0.5;
  filter: grayscale(1);
}
.pay-fields--off .field__input {
  background: var(--bg-soft);
  cursor: not-allowed;
}

/* submit */
.co-submit { margin-block-start: var(--sp-6); }
.co-submit__error { margin-block-end: var(--sp-3); }
.co-submit__note {
  margin: var(--sp-3) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  text-align: center;
}
.co-submit__legal {
  margin: var(--sp-3) 0 0;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  text-align: center;
}
.co-submit__legal a { color: inherit; }

/* order summary rail */
.co-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}
.co-summary__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  cursor: pointer;
  list-style: none;
}
.co-summary__toggle::-webkit-details-marker { display: none; }
.co-summary__toggle-total {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
}
.co-summary__inner {
  padding: 0 var(--sp-5) var(--sp-5);
}

.co-lines {
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}
.co-line {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--line-soft, var(--line));
  font-size: var(--fs-xs);
}
.co-line:last-child { border-block-end: 0; }
.co-line--loading,
.co-line--empty {
  display: block;
  color: var(--fg-subtle);
}
.co-line__media {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: visible;
}
.co-line__img,
.co-line__noimg {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg);
}
.co-line__qty {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: -8px;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--fg-inverse);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}
.co-line__main {
  flex: 1 1 auto;
  min-width: 0;
}
.co-line__title {
  display: block;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.co-line__variant {
  display: block;
  color: var(--fg-muted);
}
.co-line__flag {
  display: block;
  margin-block-start: var(--sp-1);
  color: var(--error, var(--sale));
}
.co-line__total {
  flex: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.co-line--stopped .co-line__img { opacity: 0.55; }

.co-summary__edit {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
}
.co-summary__edit a {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.co-summary__edit a:hover { color: var(--fg); }

.co-promo { margin-block-end: var(--sp-4); }
.co-promo__row {
  display: flex;
  gap: var(--sp-2);
  margin-block-start: var(--sp-1);
}
.co-promo__row .field__input { flex: 1 1 auto; min-width: 0; }

/* order placed, inline confirmation when there is no confirmation page */
.co-done {
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}
.co-done__eyebrow {
  margin: 0 0 var(--sp-2);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
}
.co-done__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-display);
}
.co-done__id,
.co-done__body {
  margin: 0 auto var(--sp-3);
  max-width: 46ch;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.co-done__cta { margin: var(--sp-5) 0 0; }

@media (min-width: 700px) {
  .checkout__form { max-width: 34rem; }
}

@media (min-width: 1000px) {
  .checkout { padding-block: var(--sp-10) var(--sp-16); }
  .checkout__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--sp-10);
  }
  .checkout__form { max-width: none; }
  .checkout__rail {
    position: sticky;
    inset-block-start: calc(var(--header-h, 56px) + var(--sp-4));
  }
  .co-summary__toggle { pointer-events: none; }
  .co-summary__toggle-total { display: none; }
}

/* ==========================================================================
   ORDER CONFIRMATION  /order/:id
   ========================================================================== */

.orderpage { padding-block: var(--sp-8) var(--sp-12); }
.orderpage__head { margin-block-end: var(--sp-7); }
.orderpage__eyebrow {
  margin: 0 0 var(--sp-2);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
}
.orderpage__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-display);
}
.orderpage__lede {
  margin: var(--sp-3) 0 0;
  max-width: 60ch;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.orderpage__pending {
  margin-block-end: var(--sp-7);
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong, var(--line));
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.orderpage__pending p { margin: 0; }
.orderpage__pending-title {
  margin-block-end: var(--sp-1) !important;
  font-weight: var(--fw-bold);
}
.orderpage__block { margin-block-end: var(--sp-7); }
.orderpage__h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
}
.orderpage__addr,
.orderpage__block p {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: var(--lh-body);
}
.orderpage__help { margin-block-start: var(--sp-3) !important; }
.orderpage__notes { margin-block-start: var(--sp-3) !important; }
.orderpage__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}
.orderpage__cta { margin-block-start: var(--sp-6); }

.ol-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ol {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-soft, var(--line));
}
.ol:last-child { border-block-end: 0; }
.ol__media { flex: none; }
.ol__img,
.ol__noimg {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  object-fit: cover;
}
.ol__main {
  flex: 1 1 auto;
  min-width: 0;
}
.ol__brand {
  display: block;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.ol__title {
  display: block;
  color: var(--fg);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.ol__variant,
.ol__qty {
  display: block;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}
.ol__total {
  flex: none;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 700px) {
  .orderpage__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .freeship__fill { transition: none; }
}

/* === END CART ============================================================ */

/* === PDP =================================================================
   agent-06. Product detail page: gallery, buy column, accordion, rails.
   Everything between this marker and END PDP belongs to agent-06.
   Tokens only. Mobile first. Verified at 375px and 1440px.
   ======================================================================== */

.pdp-wrap {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-12);
}

.page-pdp .crumbs {
  margin-bottom: var(--sp-5);
}

/* -- the two column shell ------------------------------------------------ */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

@media (min-width: 770px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: var(--sp-10);
  }
}

@media (min-width: 1280px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--sp-11);
  }
}

.pdp__media { min-width: 0; }

.pdp__buy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* The imagery is tall, the buy column is short. Pin it once there is room. */
@media (min-width: 1024px) {
  .pdp__buy {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
  }
}

.pdp-section {
  margin-top: var(--section-y);
}

.pdp-section__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-5);
}

/* ========================================================================
   1. GALLERY
   Mobile: one full width slide per screen, snap scrolled, dots underneath.
   Desktop: a thumbnail column plus one large active image.
   Every image carries width and height, so nothing reflows on load.
   ======================================================================== */

.pdp-gal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.pdp-gal__viewport {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius-md);
  outline-offset: 3px;
}

.pdp-gal__viewport::-webkit-scrollbar { width: 0; height: 0; }

.pdp-gal__slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: center;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pdp-gal__zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  color: inherit;
  font: inherit;
}

.pdp-gal__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--square);
  object-fit: contain;
  background: var(--bg-soft);
}

.pdp-gal__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: var(--square);
  padding: var(--sp-6);
  text-align: center;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
}

/* -- dots, mobile only --------------------------------------------------- */

.pdp-gal__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
}

.pdp-gal__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-circle);
}

.pdp-gal__dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--fg-subtle);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.pdp-gal__dot.is-active::after {
  background: var(--fg);
  border-color: var(--fg);
}

/* shade ranges run to seventy plus images: a counter, not a wall of dots */
.pdp-gal__counter {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* -- thumbnails, desktop only -------------------------------------------- */

.pdp-gal__thumbs { display: none; }

.pdp-gal__thumb {
  display: block;
  /* never let a long shade range squash the tiles inside the scroll box */
  flex: 0 0 auto;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}

.pdp-gal__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--square);
  object-fit: contain;
}

.pdp-gal__thumb:hover { border-color: var(--fg-subtle); }
.pdp-gal__thumb.is-active { border-color: var(--line-strong); }

@media (min-width: 770px) {
  .pdp-gal {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }

  .pdp-gal__viewport {
    display: block;
    overflow: visible;
    grid-column: 2;
    grid-row: 1;
  }

  .pdp-gal__slide { display: none; }
  .pdp-gal__slide.is-active { display: block; }

  .pdp-gal__dots,
  .pdp-gal__counter { display: none; }

  /* A long shade range would otherwise run the thumbnail column off the page,
     so cap it and let it scroll inside itself. */
  .pdp-gal__thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    grid-column: 1;
    grid-row: 1;
    max-height: min(70vh, 700px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    padding-right: var(--sp-1);
  }

  /* one image, or none: no thumbnail rail, so give the photo the full width */
  .pdp-gal[data-count="0"],
  .pdp-gal[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp-gal[data-count="0"] .pdp-gal__viewport,
  .pdp-gal[data-count="1"] .pdp-gal__viewport {
    grid-column: 1;
  }
}

/* -- zoom dialog --------------------------------------------------------- */

.pdp-zoom {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--fg);
}

.pdp-zoom::backdrop {
  background: rgba(0, 0, 0, 0.88);                                /* fallback */
  background: color-mix(in srgb, var(--bg-inverse) 88%, transparent);
}

/* fallback for browsers without dialog.showModal() */
.pdp-zoom.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.pdp-zoom__inner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--sp-10) var(--sp-4);
}

.pdp-zoom__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pdp-zoom__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  cursor: pointer;
}

.pdp-zoom__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--tap-min);
  height: var(--tap-min);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-circle);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}

.pdp-zoom__nav--prev { left: var(--sp-3); }
.pdp-zoom__nav--next { right: var(--sp-3); }

.pdp-zoom__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-4);
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

/* ========================================================================
   2. BUY COLUMN
   ======================================================================== */

.pdp-brand {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-wide);
}

.pdp-brand__link {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.pdp-brand__link:hover {
  color: var(--fg);
  border-bottom-color: currentColor;
}

.pdp-brand__link--none { border-bottom: 0; cursor: default; }

.pdp-title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.pdp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
}

.pdp-price__now {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.pdp-price__was {
  color: var(--fg-muted);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

.pdp-price__off { align-self: center; }

/* Red price only while an RRP is actually on show. */
.pdp-price:has(.pdp-price__was:not([hidden])) .pdp-price__now { color: var(--sale); }

.pdp-meta {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* -- stock line ---------------------------------------------------------- */

.pdp-stock {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.pdp-stock__mark {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--fg-subtle);
}

.pdp-stock.is-in .pdp-stock__mark { background: var(--success); }
.pdp-stock.is-low .pdp-stock__mark { background: var(--warn); }
.pdp-stock.is-low { color: var(--warn); }
.pdp-stock.is-oos .pdp-stock__mark { background: var(--fg-subtle); }

/* -- variant picker ------------------------------------------------------ */

.pdp-opt { margin: var(--sp-5) 0 0; }

.pdp-opt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.pdp-opt__label { color: var(--fg-muted); }

.pdp-opt__value {
  color: var(--fg);
  font-weight: var(--fw-bold);
  text-transform: none;
  letter-spacing: 0;
  text-align: right;
}

.pdp-opt__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pdp-opt__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.pdp-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  width: 62px;
  cursor: pointer;
}

.pdp-swatch__media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--square);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}

.pdp-swatch__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-swatch:hover .pdp-swatch__media { border-color: var(--fg-subtle); }
.pdp-swatch.is-active .pdp-swatch__media { border-color: var(--line-strong); }

/* The chosen shade name is already spelled out in .pdp-opt__value, so the
   per swatch name is for screen readers only. Printing it under every tile
   broke names like "Light Brown/Honey" across three ragged lines. */
.pdp-swatch__name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* sold out shades read as struck through, not just faded */
.pdp-swatch.is-oos .pdp-swatch__media { position: relative; }

.pdp-swatch.is-oos .pdp-swatch__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top right,
    transparent calc(50% - 1px), var(--fg-subtle) calc(50% - 1px),
    var(--fg-subtle) calc(50% + 1px), transparent calc(50% + 1px));
}

.pdp-opt__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pdp-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h-sm);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.pdp-pill:hover { border-color: var(--fg-subtle); }
.pdp-pill.is-active { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line-strong); }

.pdp-pill.is-oos,
.pdp-swatch.is-oos { opacity: 0.5; }

.pdp-pill.is-oos .pdp-pill__name { text-decoration: line-through; }

.pdp-opt__oos {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-muted);
}

.pdp-swatch .pdp-opt__oos { display: none; }
.pdp-swatch.is-oos.is-active .pdp-opt__oos { display: block; }

.pdp-opt--select .field__label { margin-bottom: var(--sp-2); }

/* Focus rings on the label, because the radio itself is off screen. */
.pdp-swatch:focus-within .pdp-swatch__media,
.pdp-pill:focus-within {
  outline: var(--ring-w, 2px) solid var(--focus);
  outline-offset: var(--ring-off, 2px);
}

@supports selector(:has(*)) {
  .pdp-swatch:focus-within .pdp-swatch__media,
  .pdp-pill:focus-within { outline: 0; }

  .pdp-swatch:has(.pdp-opt__radio:focus-visible) .pdp-swatch__media,
  .pdp-pill:has(.pdp-opt__radio:focus-visible) {
    outline: var(--ring-w, 2px) solid var(--focus);
    outline-offset: var(--ring-off, 2px);
  }
}

/* -- quantity and the one primary action --------------------------------- */

.pdp-actions {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.pdp-qty {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.pdp-qty__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-muted);
}

.pdp-qty__box {
  display: inline-flex;
  align-items: stretch;
  height: var(--input-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.pdp-qty__btn {
  width: var(--tap-min);
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

.pdp-qty__btn:hover:not(:disabled) { background: var(--bg-soft); }
.pdp-qty__btn:disabled { color: var(--fg-subtle); cursor: default; }

.pdp-qty__input {
  width: 4ch;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.pdp-qty__input::-webkit-outer-spin-button,
.pdp-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-add.is-loading { opacity: 0.6; pointer-events: none; }

.pdp-note {
  margin: 0;
  min-height: 1em;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.pdp-note.is-ok { color: var(--success); }
.pdp-note.is-error { color: var(--error); }

/* -- notify me ----------------------------------------------------------- */

.pdp-notify {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
}

.pdp-notify__lede {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.pdp-notify__row { margin: 0; }
.pdp-notify .field__label { display: block; margin-bottom: var(--sp-2); }
.pdp-notify .field__input { width: 100%; }
.pdp-notify.is-done .pdp-notify__row,
.pdp-notify.is-done .btn { display: none; }

/* -- shipping and returns ------------------------------------------------ */

.pdp-ship {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: var(--lh-body);
}

.pdp-ship a { color: var(--fg); }

/* ========================================================================
   3. DETAILS ACCORDION
   <details> so it works with no JavaScript at all.
   ======================================================================== */

.pdp-details { max-width: 780px; }

.pdp-acc { border-top: 1px solid var(--line); }
.pdp-acc__item { border-bottom: 1px solid var(--line); }

.pdp-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
}

.pdp-acc__head::-webkit-details-marker { display: none; }
.pdp-acc__head::marker { content: ""; }

.pdp-acc__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.pdp-acc__mark {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
}

.pdp-acc__mark::before,
.pdp-acc__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--fg);
}

.pdp-acc__mark::after {
  inset: 0 50% auto 50%;
  width: 1px;
  height: 100%;
  margin-left: -0.5px;
  transition: opacity var(--dur-fast) var(--ease);
}

.pdp-acc__item[open] .pdp-acc__mark::after { opacity: 0; }

.pdp-acc__body {
  padding-bottom: var(--sp-6);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.pdp-acc__empty {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.pdp-rte > :first-child { margin-top: 0; }
.pdp-rte > :last-child { margin-bottom: 0; }
.pdp-rte p { margin: 0 0 var(--sp-4); }
.pdp-rte ul,
.pdp-rte ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.pdp-rte li { margin-bottom: var(--sp-2); }
.pdp-rte strong { font-weight: var(--fw-bold); }
.pdp-rte a { color: var(--fg); }
.pdp-rte h2,
.pdp-rte h3,
.pdp-rte h4 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.pdp-rte img { max-width: 100%; height: auto; }
.pdp-rte table { display: block; max-width: 100%; overflow-x: auto; }

.pdp-rte--ing {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.pdp-faq { margin: 0; }
.pdp-faq__q {
  margin: 0 0 var(--sp-2);
  font-weight: var(--fw-bold);
}
.pdp-faq__a {
  margin: 0 0 var(--sp-5);
  color: var(--fg-muted);
}
.pdp-faq__a:last-child { margin-bottom: 0; }

/* ========================================================================
   4. TRUST ROW
   ======================================================================== */

.pdp-trust__list {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

@media (min-width: 770px) {
  .pdp-trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
}

.pdp-trust__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--sp-3);
  row-gap: 2px;
  align-items: start;
}

.pdp-trust__icon {
  grid-row: 1 / span 2;
  color: var(--fg-muted);
}

.pdp-trust__t {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.pdp-trust__d {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: var(--lh-body);
}

/* ========================================================================
   5. RAILS: related plus recently viewed
   Wide content scrolls inside its own box, never the page body.
   ======================================================================== */

.pdp-rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--sp-3);
}

.pdp-rail__track {
  display: flex;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-rail__cell {
  flex: 0 0 46%;
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 560px) {
  .pdp-rail__cell { flex-basis: calc((100% - 2 * var(--grid-gap)) / 3); }
}

@media (min-width: 770px) {
  .pdp-rail__cell { flex-basis: calc((100% - 3 * var(--grid-gap)) / 4); }
}

.pdp-rail__empty {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

/* ========================================================================
   6. NOT FOUND
   ======================================================================== */

.pdp-missing { max-width: var(--container-prose, 60ch); }
.pdp-missing__lede { color: var(--fg-muted); line-height: var(--lh-body); }

/* ========================================================================
   7. MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pdp-gal__viewport { scroll-behavior: auto; }
  .pdp-gal__dot::after,
  .pdp-gal__thumb,
  .pdp-swatch__media,
  .pdp-pill,
  .pdp-brand__link,
  .pdp-acc__mark::after { transition: none; }
}

/* === END PDP ============================================================= */


/* === PLP =================================================================
   agent-05. Collection, category and brand listing pages.
   Everything between this marker and END PLP belongs to agent-05.
   Scoped under .plp so nothing here can leak into another page.
   Grid: 2 up at 375px, 3 from 700px, 4 from 1200px.
   Filter rail: bottom sheet below 1024px, static left column above it.
   ======================================================================== */

.plp {
  --plp-rail-w: 244px;
}

.plp__wrap {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-12);
}

/* -- collection header ---------------------------------------------------- */

.plp .crumbs { margin-bottom: var(--sp-4); }

.plp-head {
  margin: var(--sp-4) 0 var(--sp-6);
  max-width: 62ch;
}

.plp-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.plp-head__intro {
  margin: var(--sp-2) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.plp-head__meta {
  margin: var(--sp-2) 0 0;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* -- the two column shell ------------------------------------------------- */

.plp-layout { display: block; }

.plp-main { min-width: 0; }

@media (min-width: 1024px) {
  .plp-layout {
    display: grid;
    grid-template-columns: var(--plp-rail-w) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

/* -- toolbar: filter trigger, count, sort --------------------------------- */

.plp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.plp-count {
  flex: 1 1 12ch;
  min-width: 0;
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}

.plp-toolbar__filters {
  flex: none;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
}

.plp-toolbar__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.3em;
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--fg-inverse);
  font-size: var(--fs-xs);
  line-height: 1;
}

.plp-sort {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.plp-sort__field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}

.plp-sort__label {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.plp-sort__select {
  max-width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--sp-6) 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-sm);
}

/* With JavaScript the sort applies on change, so the fallback submit goes. */
.plp-js .plp-sort__go,
.plp-js .facet__search-go { display: none; }

@media (min-width: 1024px) {
  .plp-toolbar__filters { display: none; }
}

/* -- active filter pills --------------------------------------------------- */

.plp-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}

.plp-pills[hidden] { display: none; }

.plp-pills__label {
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.pill--remove {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  max-width: 100%;
  min-height: var(--tap-min);
  padding: 0.35em 0.8em;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-xs);
  line-height: 1.2;
  text-decoration: none;
}

.pill--remove .pill__kind {
  color: var(--fg-subtle);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.pill--remove .pill__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill--remove .pill__x { flex: none; opacity: 0.55; }

.pill--remove:hover,
.pill--remove:focus-visible { border-color: var(--fg); background: var(--bg-soft); }
.pill--remove:hover .pill__x { opacity: 1; }

.plp-pills__clear {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.plp-pills__clear:hover { color: var(--fg); }

/* -- filter rail: bottom sheet on small screens ---------------------------- */

/* Closed unless .is-open. The server sets that from ?filters=open, so the
   sheet still opens and closes with JavaScript switched off. */
.plp-rail {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: none;
}

.plp-rail.is-open { display: block; }

.plp-rail__scrim {
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(17, 17, 17, 0.42);
}

.plp-rail__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 720px);
  background: var(--bg);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: plp-sheet-in var(--dur) var(--ease-out);
}

@keyframes plp-sheet-in {
  from { transform: translateY(16px); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

.plp-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.plp-rail__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.plp-rail__close {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: calc(var(--sp-2) * -1);
  border-radius: var(--radius-sm);
  color: var(--fg);
}

.plp-rail__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
}

.plp-rail__foot {
  flex: none;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.plp-rail__clear { flex: none; }
.plp-rail__apply { flex: 1 1 auto; }

/* -- filter rail: a plain column on desktop -------------------------------- */

@media (min-width: 1024px) {
  .plp-rail {
    position: sticky;
    inset: auto;
    top: calc(var(--header-h) + var(--sp-4));
    z-index: 1;
    display: block;
    max-height: calc(100vh - var(--header-h) - var(--sp-8));
  }

  .plp-rail__scrim,
  .plp-rail__head { display: none; }

  .plp-rail__panel {
    position: static;
    max-height: calc(100vh - var(--header-h) - var(--sp-8));
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: none;
  }

  .plp-rail__body { padding: 0 var(--sp-2) 0 0; }

  .plp-rail__foot {
    padding: var(--sp-4) 0 0;
    background: none;
  }

  /* Filters apply on change once JavaScript is running, so the submit goes. */
  .plp-js .plp-rail__apply { display: none; }
  .plp-js .plp-rail__foot { border-top: 0; padding-top: var(--sp-2); }
}

/* -- one facet ------------------------------------------------------------- */

.facet {
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-soft, var(--line));
}

.facet:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.facet__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.facet__search {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.facet__search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--input-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-sm);
}

.facet__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Only the brand list ever runs long enough to need its own scroller. The
   short facets flow, so the mobile sheet does not end up nesting scrollers. */
[data-facet="brand"] .facet__list {
  max-height: 21em;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.facet__opt {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}

.facet__opt.is-hidden { display: none; }

/* The checkbox is styled, never hidden, so native keyboard behaviour and the
   focus ring both survive. */
.facet__cb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: translateY(-50%);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-sm);
  background: var(--bg);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.facet__cb:checked { background: var(--fg); border-color: var(--fg); }

.facet__cb:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.facet__cb:focus-visible {
  outline: var(--ring-w, 2px) solid var(--focus);
  outline-offset: var(--ring-off, 2px);
}

/* Nothing left to match: kept in place so the list does not jump about. */
.facet__cb:disabled { border-color: var(--line); cursor: not-allowed; }
.facet__cb:disabled + .facet__label { opacity: 0.45; cursor: not-allowed; }

.facet__label,
.facet__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  width: 100%;
  min-height: 34px;
  padding: 7px 0 7px 26px;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
}

.facet__link { padding-left: 0; }

.facet__label:hover,
.facet__link:hover { color: var(--fg); }

.facet__link:focus-visible {
  outline: var(--ring-w, 2px) solid var(--focus);
  outline-offset: -2px;
}

.facet__opt.is-active .facet__label,
.facet__opt.is-active .facet__link {
  color: var(--fg);
  font-weight: var(--fw-bold);
}

.facet__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.facet__count {
  flex: none;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
}

.facet__opt--switch { margin-bottom: var(--sp-1); }

.facet__more {
  display: inline-block;
  margin-top: var(--sp-2);
  color: var(--fg);
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.facet__none,
.facet__nomatch {
  margin: var(--sp-1) 0 0;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}

.facet__nomatch[hidden] { display: none; }

/* -- the grid --------------------------------------------------------------- */

.plp-results { position: relative; }

.plp-results[aria-busy="true"] {
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease);
}

.plp-results .grid--products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-row, var(--sp-8)) var(--grid-gap);
}

@media (min-width: 700px) {
  .plp-results .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .plp-results .grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Belt and braces against layout shift. Every img already carries its
   intrinsic width and height, this holds the box square while it loads. */
.plp-results .card__media {
  position: relative;
  aspect-ratio: var(--card-ratio, var(--square));
  overflow: hidden;
  background: var(--bg-soft);
}

.plp-results .card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plp-pagecount {
  margin: var(--sp-6) 0 0;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  text-align: center;
}

.plp-results .pager { margin-top: var(--sp-4); }

.plp-empty {
  padding: var(--sp-10) var(--sp-4);
  text-align: center;
}

/* Scroll lock while the sheet is open. */
body.plp-sheet-open { overflow: hidden; }

@media (min-width: 1024px) {
  body.plp-sheet-open { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .plp-rail__panel { animation: none; }
  .plp-results { transition: none; }
}

/* === END PLP ============================================================= */