.commerce-page [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* The Bag control is laid out in storefront-mobile.css. The second copy of the
   count's circle that used to live here out-specified that file, which is what
   broke the badge on every commerce surface — see the note there. */
.catalog-bag { color: var(--ivory) !important; white-space: nowrap; }
.commerce-main { max-width: 1580px; margin: 0 auto; padding: clamp(3rem, 6vw, 6rem) max(5vw, 1.25rem) clamp(5rem, 8vw, 8rem); }
.commerce-intro { max-width: 800px; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.commerce-intro h1 { margin: .6rem 0 1rem; font: 400 clamp(3.4rem, 7vw, 7rem)/1 var(--display); letter-spacing: -.035em; }
.commerce-intro > p:last-child { color: var(--muted); line-height: 1.7; }
.commerce-notice { padding: 1rem 1.25rem; margin: 0 0 1.5rem; border: 1px solid var(--gold); color: var(--ivory); line-height: 1.5; }
.bag-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.bag-line { display: grid; grid-template-columns: clamp(90px, 13vw, 155px) minmax(0, 1fr) auto; gap: clamp(.85rem, 2vw, 2rem); padding: 1.5rem 0; border-top: 1px solid var(--line); }
.bag-image { display: block; aspect-ratio: 4/5; background: #29251e; overflow: hidden; }
.bag-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bag-line-info { min-width: 0; }
.bag-line h2 { margin: 0; font: 400 clamp(1.3rem, 2.5vw, 2rem)/1.2 var(--display); overflow-wrap: anywhere; }
.bag-meta, .bag-unit, .bag-summary > p { color: var(--muted); font-size: .86rem; line-height: 1.6; }
.bag-meta { margin: .65rem 0 .3rem; }
.bag-unit { margin: .3rem 0; }
.bag-issue { color: #e5bd78; font-size: .85rem; line-height: 1.5; }
.bag-line-total { font-weight: 400; font-size: .94rem; white-space: nowrap; }
.bag-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .65rem; margin-top: 1rem; }
.bag-controls button:not(.bag-text-action) { width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.bag-controls button:disabled { opacity: .35; cursor: not-allowed; }
.bag-quantity { min-width: 2rem; text-align: center; }
.bag-text-action { min-height: 44px; padding: .4rem; border: 0; background: transparent; color: var(--gold); text-decoration: underline; text-underline-offset: .25rem; cursor: pointer; }
.bag-summary, .checkout-panel { padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid var(--line); background: #151310; min-width: 0; }
.bag-summary h2, .checkout-panel h2 { margin: 0 0 2rem; font: 400 clamp(1.8rem, 3vw, 2.5rem) var(--display); }
.summary-row, .checkout-summary-line { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); line-height: 1.5; }
.summary-row span:last-child, .checkout-summary-line span:last-child { text-align: right; }
.commerce-primary, .commerce-secondary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1rem; border: 1px solid var(--gold); font: 500 .75rem var(--sans); letter-spacing: .12em; text-align: center; text-transform: uppercase; cursor: pointer; transition: background .35s cubic-bezier(.2,.7,.2,1), color .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1); }
.commerce-primary { background: var(--gold); color: var(--ink); }
.commerce-secondary { background: transparent; color: var(--ivory); }
.commerce-primary:focus-visible, .commerce-secondary:focus-visible { transform: translateY(-2px); background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
/* The lift is a pointer flourish; on touch the button answers with a firm press
   instead, so the two never fight over the same transform. */
.commerce-primary:active, .commerce-secondary:active { transform: translateY(0); background: var(--gold); color: var(--ink); }
@media (hover: hover) {
  .commerce-primary:hover, .commerce-secondary:hover { transform: translateY(-2px); background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
}
.commerce-primary:disabled, .commerce-primary[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.bag-summary .commerce-primary, .bag-summary .commerce-secondary { width: 100%; margin-top: 1rem; }
.bag-empty { padding: clamp(3rem, 8vw, 7rem) 1rem; border-block: 1px solid var(--line); text-align: center; }
.bag-empty h2 { font: 400 clamp(2rem, 5vw, 4rem)/1.1 var(--display); }
.bag-empty p:last-child { color: var(--muted); }
.product-purchase { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.product-purchase > label { display: block; margin-bottom: .7rem; color: var(--muted); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }
.purchase-controls { display: flex; gap: .75rem; }
.purchase-controls input { width: 74px; min-height: 48px; padding: .5rem; border: 1px solid var(--line); background: #171513; color: var(--ivory); font: inherit; text-align: center; }
.purchase-controls button { flex: 1; min-height: 48px; border: 1px solid var(--gold); background: var(--gold); color: var(--ink); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .3s ease, transform .3s ease; }
.purchase-controls button:focus-visible { background: var(--ivory); transform: translateY(-2px); }
.purchase-controls button:active { transform: translateY(0); }
@media (hover: hover) {
  .purchase-controls button:hover { background: var(--ivory); transform: translateY(-2px); }
}
.purchase-controls button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.product-purchase [data-add-message] { min-height: 1.5em; color: var(--muted); font-size: .85rem; }
.product-purchase [data-view-bag] { min-height: 44px; display: inline-flex; align-items: center; color: var(--gold); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }

/* Phase 5.5 — Save to wishlist.
   Its own control rather than a second button inside .purchase-controls, because
   that container's button is the gold "Add to Bag" and stretches to fill: saving
   is a secondary action and it must not be mistaken for the primary one. Full
   width on its own line, the 48px the other purchase controls use, and a gold
   outline rather than a gold fill so the two never compete. */
.product-purchase [data-wishlist-save] { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 1.1rem; border: 1px solid var(--gold); background: none; color: var(--gold); font: 500 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .3s ease, color .3s ease; }
/* Inside @media (hover: hover), because this is exactly the rule
   touch-hover-media-check.mjs exists to catch. Unguarded, it latches on tap:
   the finger goes down, the fill stays, and the page scrolls with a button that
   looks pressed long after the finger left. The guard is not a nicety here —
   the control sits directly under "Add to Bag", so a latched Save is the most
   visible possible instance of the bug. */
@media (hover: hover) {
  .product-purchase [data-wishlist-save]:hover { background: var(--gold); color: var(--ink); }
}
.product-purchase [data-wishlist-save]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.product-purchase [data-wishlist-save]:disabled { opacity: .45; cursor: not-allowed; }
/* The saved state, which is a toggle the customer can undo — so it is still
   enabled, just filled. aria-pressed carries the same information for a screen
   reader, and the label change is the same information visually. */
.product-purchase [data-wishlist-save][aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.product-purchase [data-wishlist-save][hidden] { display: none; }
.product-purchase [data-wishlist-save-notice] { min-height: 1.5em; color: var(--muted); font-size: .85rem; }
.product-purchase [data-wishlist-save-notice].is-success { color: var(--gold); }
.product-purchase [data-wishlist-save-notice].is-error { color: #d98b82; }

.checkout-panel h2:not(:first-child) { margin-top: 2.5rem; }

/* Phase 5.9 — the account block that sits above the Customer heading.
   A hairline rule, the same uppercase micro-label the field labels use, and the
   same input treatment as .field input. Deliberately not a card: the panel it
   lives in is already the card, and a second bordered box inside it would read
   as a hierarchy that is not there. It sits before the <h2> so the .checkout-panel
   h2:not(:first-child) margin above still applies to "Customer" and not to this. */
.checkout-account { margin: 0 0 2.5rem; padding: 0 0 2rem; border-bottom: 1px solid var(--line); min-width: 0; }
.checkout-account-line { margin: 0 0 1.4rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }
/* 44px on a text link is a target, not padding: it is the only way from the
   checkout into the address book, and a phone customer aiming at a word in a
   sentence needs more than the word. inline-flex with a negative margin keeps the
   line's own rhythm while the tap area reaches the full height. */
.checkout-account-line a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; color: var(--gold); text-underline-offset: 3px; }
.checkout-addresses-label { display: block; margin-bottom: .5rem; color: var(--muted); font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; }
.checkout-addresses select { width: 100%; min-width: 0; min-height: 48px; padding: .75rem; border: 1px solid var(--line); border-radius: 0; background: #1d1a16; color: var(--ivory); font: 1rem var(--sans); }
.checkout-addresses-hint { min-height: 1.5em; margin: .6rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; }
.checkout-addresses-note { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
/* A text-weight action, not a second submit-shaped button: choosing to check out
   without the account is a preference, and giving it a filled control would put
   it in competition with "Review details". 44px is the same target the header and
   the menu commit to. */
.checkout-account-action { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.2rem; padding: 0; border: 0; background: none; color: var(--gold); font: 500 .95rem var(--sans); text-align: left; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.checkout-account-action:active { color: var(--ivory); }
@media (hover: hover) {
  .checkout-account-action:hover { color: var(--ivory); }
}
.checkout-account-status { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }

.checkout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.field { min-width: 0; }.field-wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: .5rem; color: var(--muted); font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: .75rem; border: 1px solid var(--line); border-radius: 0; background: #1d1a16; color: var(--ivory); font: 1rem var(--sans); }
.field input[aria-invalid="true"] { border-color: #e5bd78; }
.field-error { margin: .4rem 0 0; color: #e5bd78; font-size: .85rem; }
.checkout-panel form > .commerce-primary { margin-top: 2rem; }
[data-error-summary] a { display: block; min-height: 32px; text-decoration: underline; }
[data-review] p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
[data-review] dl { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr; gap: .8rem 1rem; overflow-wrap: anywhere; }
[data-review] dt { color: var(--muted); }[data-review] dd { margin: 0; }
.review-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (max-width: 850px) { .bag-layout, .checkout-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .catalog-header nav a:not(.catalog-bag):not(:nth-child(2)) { display: none; } .commerce-main { padding-inline: 5vw; } }
@media (max-width: 500px) { .bag-line { grid-template-columns: 85px minmax(0, 1fr); } .bag-line-total { grid-column: 2; } .checkout-fields { grid-template-columns: 1fr; } .field-wide { grid-column: auto; } .commerce-intro h1 { font-size: clamp(3rem, 13vw, 4.5rem); } }
@media (max-width: 360px) { .catalog-header nav { gap: .4rem; } .bag-line { gap: .7rem; } }
@media (prefers-reduced-motion: reduce) { .commerce-page *, .commerce-page *::before, .commerce-page *::after, .product-purchase * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }