/* Offrte A/B theme: Odd Pace Club. Shell only; commerce logic stays shared. */
html[data-variant="opc"] {
  --cream: #f4efe3;
  --paper: #fff8e8;
  --ink: #302921;
  --muted: #6c675f;
  --line: #c9beb0;
  --blue: #d84430;
  --blue-deep: #ad2f22;
  --butter: #f0de83;
  --serif: "Arial Black", Impact, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  background: var(--cream);
}

html[data-variant="opc"] body { background: var(--cream); color: var(--ink); }
html[data-variant="opc"] .announcement {
  background: var(--blue);
  color: #fff3d4;
  border-color: var(--blue);
  font-family: var(--mono);
  letter-spacing: .02em;
}
html[data-variant="opc"] .header {
  background: var(--cream);
  border-bottom: 1px solid var(--ink);
}
html[data-variant="opc"] .wordmark,
html[data-variant="opc"] .footer-logo { font-family: Impact, "Arial Black", sans-serif; font-style: italic; letter-spacing: -.08em; }
html[data-variant="opc"] .wordmark { color: var(--blue); font-size: 40px; }
html[data-variant="opc"] .main-nav a,
html[data-variant="opc"] .header-actions,
html[data-variant="opc"] .bag-button { font-family: var(--mono); font-size: 11px; }
html[data-variant="opc"] .bag-button { background: var(--blue); color: #fff3d4; border-radius: 999px; }
html[data-variant="opc"] .hero {
  background: var(--cream);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(22px, 4vw, 64px);
  padding-top: clamp(28px, 5vw, 68px);
}
html[data-variant="opc"] .hero-copy { order: 2; align-self: end; padding-bottom: clamp(18px, 4vw, 64px); }
html[data-variant="opc"] .hero-visual { order: 1; min-height: clamp(380px, 48vw, 700px); background: #b6c0c3; }
html[data-variant="opc"] .hero-visual::before {
  content: "FIELD TRIP 001 / SEOUL";
  position: absolute; z-index: 4; top: 16px; left: 16px;
  padding: 5px 8px; background: var(--cream); color: var(--ink);
  font: 10px var(--mono); letter-spacing: .04em;
}
html[data-variant="opc"] .hero-visual::after {
  content: "YOUR PACE IS A GOOD PACE.";
  position: absolute; z-index: 4; top: 18px; right: 18px;
  width: 92px; height: 92px; display: grid; place-items: center;
  padding: 12px; border: 1px solid #67472f; border-radius: 50%;
  background: var(--butter); color: #67472f; text-align: center;
  font: 600 10px/1.15 var(--mono); transform: rotate(12deg);
}
html[data-variant="opc"] .hero-product { filter: saturate(.7) contrast(.98); }
html[data-variant="opc"] .hero-product img { mix-blend-mode: multiply; }
html[data-variant="opc"] .hero-product .callout { color: var(--blue); font-family: var(--mono); }
html[data-variant="opc"] .hero-copy h1 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(56px, 8vw, 120px);
  font-weight: 900; line-height: .82; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--blue); transform: rotate(-2deg);
}
html[data-variant="opc"] .hero-copy h1 em { color: var(--ink); font-style: normal; }
html[data-variant="opc"] .hero-description { max-width: 34ch; font-size: 15px; }
html[data-variant="opc"] .hero-actions .button-blue { background: var(--blue); color: #fff3d4; border-radius: 999px; }
html[data-variant="opc"] .hero-actions .text-link { font-family: var(--mono); font-size: 11px; }
html[data-variant="opc"] .hero-readout { border-color: var(--ink); background: var(--paper); }
html[data-variant="opc"] .ticker { background: var(--ink); color: var(--butter); transform: rotate(-1deg) scale(1.02); margin: 10px 0 34px; }
html[data-variant="opc"] .ticker div { animation-duration: 20s; }
html[data-variant="opc"] .section-heading h2,
html[data-variant="opc"] .layers h2,
html[data-variant="opc"] .about h2,
html[data-variant="opc"] .faq h2 { font-family: Impact, "Arial Black", sans-serif; text-transform: uppercase; letter-spacing: -.02em; }
html[data-variant="opc"] .section-heading h2 { font-size: clamp(32px, 5vw, 64px); line-height: .9; }
html[data-variant="opc"] .product-grid { gap: 12px; }
html[data-variant="opc"] .product-card { background: transparent; }
html[data-variant="opc"] .product-media { background: #e2dbc9; border: 1px solid var(--line); }
html[data-variant="opc"] .product-code { background: var(--cream); color: var(--ink); border: 1px solid var(--ink); }
html[data-variant="opc"] .product-name { font-weight: 700; }
html[data-variant="opc"] .product-price { color: var(--blue); }
html[data-variant="opc"] .button-dark { background: var(--blue); color: #fff3d4; border-radius: 999px; }
html[data-variant="opc"] .ship-panel { background: var(--butter); border-color: var(--ink); transform: rotate(.4deg); }
html[data-variant="opc"] .layers { background: #b8bbd4; color: #312d3b; }
html[data-variant="opc"] .layers .eyebrow,
html[data-variant="opc"] .layers .mono { color: #4b4861; }
html[data-variant="opc"] .layers-chart { border-color: #4b4861; }
html[data-variant="opc"] .chart-bar { background: var(--blue); }
html[data-variant="opc"] .fit { color: var(--blue); }
html[data-variant="opc"] .about { background: var(--cream); }
html[data-variant="opc"] .route-art { color: var(--blue); }
html[data-variant="opc"] .faq { border-top: 2px solid var(--ink); }
html[data-variant="opc"] .footer { background: var(--ink); color: #fff3d4; }
html[data-variant="opc"] .footer-logo { color: var(--blue); font-size: clamp(120px, 24vw, 320px); }
html[data-variant="opc"] .mobile-bar { background: var(--blue); color: #fff3d4; }

@media (max-width: 700px) {
  html[data-variant="opc"] .wordmark { font-size: 31px; }
  html[data-variant="opc"] .hero { grid-template-columns: 1fr; padding-top: 12px; }
  html[data-variant="opc"] .hero-copy { order: 1; padding-bottom: 18px; }
  html[data-variant="opc"] .hero-visual { order: 2; min-height: 360px; }
  html[data-variant="opc"] .hero-copy h1 { font-size: clamp(57px, 18vw, 105px); }
  html[data-variant="opc"] .hero-readout { grid-template-columns: repeat(2, 1fr); }
  html[data-variant="opc"] .ticker { margin-top: 15px; }
  html[data-variant="opc"] .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  html[data-variant="opc"] .announcement span:first-child { display: none; }
  html[data-variant="opc"] .hero-visual { min-height: 310px; }
  html[data-variant="opc"] .hero-visual::after { width: 76px; height: 76px; font-size: 9px; }
}

/* Product detail: same Odd Pace Club language, shared purchase order preserved. */
html[data-variant="opc"] body.product-page { background: var(--cream); }
html[data-variant="opc"] .pdp { max-width: 1440px; }
html[data-variant="opc"] .crumbs {
  padding: 12px 0 16px; color: var(--blue); border-bottom: 1px solid var(--ink);
  font-size: 11px; letter-spacing: .04em;
}
html[data-variant="opc"] .crumbs a { color: var(--blue); }
html[data-variant="opc"] .pdp-grid { gap: 28px 24px; }
html[data-variant="opc"] .pdp-media { position: relative; }
html[data-variant="opc"] .gallery { background: #e5dfd1; border: 1px solid var(--ink); }
html[data-variant="opc"] .gallery .slide { background: #e5dfd1; }
html[data-variant="opc"] .gallery .slide img { mix-blend-mode: multiply; filter: saturate(.76) contrast(.98); }
html[data-variant="opc"] .gallery-count {
  background: var(--blue); color: #fff4d8; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
}
html[data-variant="opc"] .thumbs { gap: 8px; }
html[data-variant="opc"] .thumb { border: 1px solid var(--line); background: var(--paper); }
html[data-variant="opc"] .thumb.active { border: 2px solid var(--blue); }
html[data-variant="opc"] .pdp-buy {
  background: var(--paper); border: 1px solid var(--ink); padding: 22px;
  box-shadow: 5px 5px 0 var(--butter);
}
html[data-variant="opc"] .pdp-buy .eyebrow { color: var(--blue); font-family: var(--mono); }
html[data-variant="opc"] .pdp-buy h1 {
  font-family: Impact, "Arial Black", sans-serif; font-size: clamp(40px, 4.8vw, 74px);
  line-height: .88; letter-spacing: -.025em; text-transform: uppercase;
  color: var(--blue); margin: 8px 0 16px;
}
html[data-variant="opc"] .detail-hook { font-size: 14px; line-height: 1.6; color: var(--ink); }
html[data-variant="opc"] .detail-price {
  margin-top: 16px; font-family: var(--mono); font-size: 24px; color: var(--ink);
}
html[data-variant="opc"] .detail-korean { color: var(--muted); font-family: var(--sans); }
html[data-variant="opc"] .swatches { margin: 16px 0 20px; }
html[data-variant="opc"] .swatch-option span { border-radius: 50%; border: 1px solid var(--ink); }
html[data-variant="opc"] .swatch-option input:checked + span { outline: 3px solid var(--blue); outline-offset: 2px; }
html[data-variant="opc"] .swatch-name { color: var(--muted); }
html[data-variant="opc"] .chips-large { border-top: 1px dashed var(--line); padding-top: 16px; }
html[data-variant="opc"] .chips-large legend { font-family: var(--mono); text-transform: uppercase; color: var(--ink); }
html[data-variant="opc"] .chips-large legend a { color: var(--blue); }
html[data-variant="opc"] .chips-large .chip span { border: 1px solid var(--ink); background: var(--cream); }
html[data-variant="opc"] .chips-large .chip input:checked + span { background: var(--blue); color: #fff4d8; border-color: var(--blue); }
html[data-variant="opc"] .ship-box { background: var(--butter); border: 1px solid var(--ink); color: var(--ink); }
html[data-variant="opc"] .ship-box-line .mono,
html[data-variant="opc"] .ship-box a { color: var(--blue); }
html[data-variant="opc"] .detail-actions { gap: 8px; }
html[data-variant="opc"] .detail-actions .button-blue,
html[data-variant="opc"] .pdp-buy > .button-dark { background: var(--blue); color: #fff4d8; border-radius: 999px; }
html[data-variant="opc"] .detail-actions .button-blue { flex: 1; }
html[data-variant="opc"] .pdp-buy > .button-dark { width: 100%; }
html[data-variant="opc"] .stepper { border: 1px solid var(--ink); background: var(--cream); }
html[data-variant="opc"] .form-error { color: var(--blue-deep); }
html[data-variant="opc"] .assure { color: var(--muted); }
html[data-variant="opc"] .assure a { color: var(--blue); }
html[data-variant="opc"] .similar { border-top-color: var(--ink); }
html[data-variant="opc"] .similar .eyebrow { color: var(--blue); }
html[data-variant="opc"] .similar .strip-media { background: #e5dfd1; border: 1px solid var(--line); }
html[data-variant="opc"] .similar .strip-media img { mix-blend-mode: multiply; filter: saturate(.78); }
html[data-variant="opc"] .similar .product-name { font-family: Impact, "Arial Black", sans-serif; font-size: 17px; text-transform: uppercase; }
html[data-variant="opc"] .similar .product-price { color: var(--blue); }
html[data-variant="opc"] .pdp-tabs { border-top-color: var(--ink); background: var(--cream); }
html[data-variant="opc"] .pdp-tabs a[aria-current] { color: var(--blue); border-bottom-color: var(--blue); }
html[data-variant="opc"] .pdp-story { padding-top: 36px; }
html[data-variant="opc"] .story-title h2,
html[data-variant="opc"] .pdp-info summary {
  font-family: Impact, "Arial Black", sans-serif; text-transform: uppercase; letter-spacing: -.015em;
}
html[data-variant="opc"] .story-title h2 { font-size: clamp(34px, 4vw, 60px); line-height: .9; color: var(--blue); }
html[data-variant="opc"] .story-meta { font-family: var(--mono); font-size: 11px; }
html[data-variant="opc"] .story-meta dt,
html[data-variant="opc"] .story-figure figcaption .mono,
html[data-variant="opc"] .story-points .mono { color: var(--blue); }
html[data-variant="opc"] .story-desc { font-size: 15px; color: var(--ink); }
html[data-variant="opc"] .story-figure img { background: #e5dfd1; filter: saturate(.75); mix-blend-mode: multiply; }
html[data-variant="opc"] .story-figure figcaption { font-size: 13px; }
html[data-variant="opc"] .story-toggle { border-color: var(--ink); background: var(--butter); color: var(--ink); }
html[data-variant="opc"] .pdp-info { border-top: 2px solid var(--ink); }
html[data-variant="opc"] .pdp-section { border-color: var(--line); }
html[data-variant="opc"] .pdp-section summary { padding: 18px 0; font-size: 18px; }
html[data-variant="opc"] .spec-table th { color: var(--blue); font-family: var(--mono); }
html[data-variant="opc"] .spec-table td { color: var(--ink); }
html[data-variant="opc"] .mobile-bar { border-top: 1px solid var(--ink); }
html[data-variant="opc"] .mobile-bar .button-blue { background: var(--blue); color: #fff4d8; border-radius: 999px; }

@media (max-width: 860px) {
  html[data-variant="opc"] .pdp { padding-top: 0; }
  html[data-variant="opc"] .pdp-grid { gap: 18px; }
  html[data-variant="opc"] .pdp-buy { margin: 0 16px; padding: 18px; box-shadow: 4px 4px 0 var(--butter); }
  html[data-variant="opc"] .pdp-buy h1 { font-size: clamp(42px, 14vw, 68px); }
  html[data-variant="opc"] .pdp-tabs { margin-inline: 16px; }
  html[data-variant="opc"] .pdp-info { border-top-width: 1px; }
}