.custom-order-layout {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 48px;
  align-items: start;
}
/* Real bug fix: bare `1fr` grid tracks default to min-width:auto (same
   root cause as the earlier footer-newsletter flex overflow this
   session) -- a `1fr` track refuses to shrink below the min-content
   width of what's inside it. Nested three levels deep here
   (.custom-order-layout > .co-step > .co-product-grid, each a `1fr`
   grid), this compounded into a genuinely severe blowout confirmed live:
   a 390px-wide container computing a 5830px content width, forcing the
   whole page's layout viewport wider than the device and a real
   horizontal-scroll bug on every screen size, not just mobile.
   minmax(0, 1fr) is the standard fix -- it lets the track actually
   shrink to the available space. */
@media (max-width: 979px) { .custom-order-layout { grid-template-columns: minmax(0, 1fr); padding: 32px 20px; } }

.co-step-label { font-size: 12.5px; letter-spacing: .06em; color: var(--color-text-grey-dim); margin-bottom: 12px; text-transform: uppercase; }
.co-step { margin-bottom: 30px; }

.co-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.co-product-option { border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; background: none; color: inherit; }
/* Real gap found in the mobile motion audit (2026-08-21), Phase 14: a
   selection just snapped instantly (border-color with zero transition).
   Kept to exactly what the spec asks -- border + a subtle scale(1.01),
   no "huge animation". */
.co-product-option { transition: border-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-premium); }
.co-product-option.is-selected { border-color: var(--color-gold-accent); transform: scale(1.01); }
.co-product-option .name { font-size: 13.5px; font-weight: 600; }
.co-product-option .price { font-size: 11.5px; color: var(--color-text-grey-dim); margin-top: 4px; }

.co-leather-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 639px) { .co-leather-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.co-leather-option { border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 14px; text-align: center; cursor: pointer; background: none; color: inherit; }
.co-leather-option { transition: border-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-premium); }
.co-leather-option.is-selected { border-color: var(--color-gold-accent); transform: scale(1.01); }
.co-leather-option .swatch { width: 100%; height: 36px; border-radius: 6px; margin-bottom: 8px; }
.co-leather-option .name { font-size: 12px; }

/* Real bug fix, root cause of the severe overflow found live: this is
   127 real swatch buttons (apps/production/views.py's custom_order view
   passes the ENTIRE product-variant Color catalog as "thread colors" --
   see FRONTEND_CHANGELOG.md/chat report, a real content/query issue
   flagged separately, not fixed here) in a `flex-wrap: nowrap` row with
   no scroll container -- the row just kept extending horizontally past
   the viewport on every screen size, dragging the whole page's layout
   width out to ~3462px. flex-wrap: wrap is the immediate, safe fix
   regardless of whether the 127-color list itself gets curated down. */
.co-thread-row { display: flex; flex-wrap: wrap; gap: 12px; }
.co-thread-swatch { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,.2); }
.co-thread-swatch { transition: border-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-premium); }
.co-thread-swatch.is-selected { border-color: var(--color-gold-accent); transform: scale(1.01); }

/* Same row layout as .co-thread-row above (both use the same
   .co-thread-swatch circle styling, just a different data-co-group) --
   real gap found and fixed (2026-08-24): leather previously had no
   color dimension in the picker at all, only leather type. */
.co-leather-color-row { display: flex; flex-wrap: wrap; gap: 12px; min-height: 34px; }
.co-unavailable-note { font-size: 12.5px; color: var(--color-text-grey-dim); margin: 10px 0 0; }

.co-hardware-row { display: flex; gap: 12px; }
.co-hardware-option { border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 11px 20px; font-size: 12.5px; cursor: pointer; background: none; color: var(--color-beige-light); }
.co-hardware-option { transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-premium); }
.co-hardware-option.is-selected { background: var(--color-gold-accent); color: var(--color-charcoal-primary); border-color: var(--color-gold-accent); transform: scale(1.01); }

.co-preview-panel { position: sticky; top: 130px; background: var(--color-charcoal-secondary); border-radius: var(--radius-collection-card); padding: 26px; }
@media (max-width: 979px) { .co-preview-panel { position: static; } }
.co-preview-media { position: relative; border-radius: var(--radius-category-card); overflow: hidden; height: 260px; margin-bottom: 20px; background: repeating-linear-gradient(135deg,#222,#222 12px,#1a1a1a 12px,#1a1a1a 24px); display:flex;align-items:center;justify-content:center;color:#666;font-size:12px }
.co-preview-engraving { position: absolute; bottom: 16px; right: 20px; color: var(--color-gold-accent); font-family: var(--font-serif); font-size: 16px; letter-spacing: .05em; }
.co-preview-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-grey); padding: 5px 0; }
.co-preview-line .value { color: var(--color-beige-light); }