/* ============================================================
   SKAIWALK · Shop page (shop.html)
   ============================================================ */

.shop {
  padding: 140px 48px 120px;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}
.shop__inner {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 96px;
  align-items: center;
}

/* ---------- Hero column (left) ----------
   Mirrors the index.html hero: statement at top, watch in the middle,
   wordmark + edition at the bottom. Centered text. */
.shop__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 56px;
}
.shop__hero-statement {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.shop__hero-setup,
.shop__hero-claim {
  display: block;
}
/* Sized to mirror the homepage hero — setup ≈ edition (small, secondary)
   and claim ≈ wordmark (prominent). Same numeric values as landing.css's
   --hero-setup-size / --hero-claim-size. */
.shop__hero-setup {
  font-size: 28px;
  font-weight: var(--sk-weight-light);
  color: var(--sk-fg-muted);
}
.shop__hero-claim {
  font-size: 48px;
  font-weight: var(--sk-weight-light);
  color: var(--sk-fg);
  margin-top: 8px;
}
.shop__hero-stage {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.shop__hero-photo {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%, #000 7%, #000 93%, transparent 100%);
  filter:
    drop-shadow(0 24px 40px rgba(35, 60, 90, 0.22))
    drop-shadow(0 6px 12px rgba(35, 60, 90, 0.14));
}
[data-theme="dark"] .shop__hero-photo {
  filter:
    drop-shadow(0 0 60px rgba(166, 211, 230, 0.10))
    drop-shadow(0 24px 40px rgba(0, 0, 0, 0.32))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.20));
}
/* In the hero, the wordmark + edition pair tighter (smaller gap) and the
   wordmark renders larger than the controls-side use. */
.shop__hero .shop__title img { height: 44px; }
.shop__hero .shop__edition { margin-top: -32px; }

/* ---------- Meta column (right) ----------
   Slides in from the right on every shop load. From the homepage hero
   transition, the left column appears to "stay" (the new shop hero
   matches the index hero) while these controls reveal from the right. */
.shop__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 420px;
  animation: shopMetaSlideIn 600ms var(--sk-ease-flow) 120ms both;
}
@keyframes shopMetaSlideIn {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .shop__meta { animation: none; }
}
.shop__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.shop__title {
  margin: 0;
  line-height: 1;
}
.shop__title img {
  height: 36px;
  width: auto;
  display: block;
  opacity: 0.95;
}
/* Two AIR wordmarks ride along — dark-ink for light theme, white for dark.
   Selector specificity matches `.shop__title img` so the display rule above
   doesn't override the hidden state. */
.shop__title img.shop__title-img--dark { display: none; }
[data-theme="dark"] .shop__title img.shop__title-img--light { display: none; }
[data-theme="dark"] .shop__title img.shop__title-img--dark { display: block; }
.shop__edition {
  font-family: var(--sk-font-script);
  font-size: 40px;
  font-weight: var(--sk-weight-regular);
  line-height: 1;
  color: var(--sk-fg-muted);
  letter-spacing: 0.01em;
}
.shop__rule {
  width: 100%;
  height: 1px;
  border: 0;
  background: rgba(35, 60, 90, 0.10);
  margin: 36px 0 24px;
}
/* Total divider — sits between the controls and the total summary. */
.shop__rule--total {
  margin: 28px 0 20px;
}

/* ---------- Quantity row (label left, stepper right) ---------- */
.shop__qty-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.shop__qty-label,
.shop__total-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sk-fg-subtle);
  font-weight: var(--sk-weight-medium);
}

/* ---------- Stock notice ("Only N left" / sold out) ---------- */
.shop__stock {
  margin: -6px 0 16px;
  font-size: 13px;
  font-weight: var(--sk-weight-medium);
  color: #d97706;                 /* amber — a gentle low-stock nudge */
}
.shop__stock[data-sold-out="true"] {
  color: var(--sk-fg-subtle);     /* sold out is conveyed by the disabled CTA */
}

/* ---------- Total summary (label left, big number + currency pill right) ---------- */
.shop__total-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.shop__total-summary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.shop__total-value {
  font-size: 36px;
  font-weight: var(--sk-weight-light);
  letter-spacing: -0.02em;
  color: var(--sk-fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Quantity stepper — borderless. Digit and ± glyphs ride at the same 36px
   size as the total below so the two summary lines feel typographically twinned. */
.shop__stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.shop__stepper-btn {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: var(--sk-weight-light);
  line-height: 1;
  color: var(--sk-fg);
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 200ms var(--sk-ease-flow);
}
.shop__stepper-btn:hover { background: rgba(35, 60, 90, 0.06); }
.shop__stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.shop__stepper-value {
  width: 72px;
  text-align: center;
  font: inherit;
  font-size: 36px;
  font-weight: var(--sk-weight-light);
  letter-spacing: -0.02em;
  color: var(--sk-fg);
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
}
input.shop__stepper-value::-webkit-outer-spin-button,
input.shop__stepper-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.shop__stepper-value:focus {
  /* Subtle focus cue without losing the seamless look. */
  color: var(--sk-fg);
}

/* Currency dropdown — compact pill, just enough to fit "USD ⌄". */
.shop__currency { position: relative; }
.shop__currency-toggle {
  height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--sk-radius-pill);
  background: transparent;
  border: 1px solid rgba(35, 60, 90, 0.14);
  font: inherit;
  font-size: 13px;
  font-weight: var(--sk-weight-medium);
  color: var(--sk-fg);
  cursor: pointer;
  transition:
    background 240ms var(--sk-ease-flow),
    border-color 240ms var(--sk-ease-flow);
}
.shop__currency-toggle:hover {
  /* Rim only — surface stays transparent, the hairline border just darkens. */
  border-color: rgba(35, 60, 90, 0.32);
}
.shop__currency-toggle svg { opacity: 0.7; transition: transform 200ms var(--sk-ease-flow); }
.shop__currency-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.shop__currency-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--sk-radius-popover);
  background: var(--sk-glass-bg);
  backdrop-filter: var(--sk-glass-blur);
  -webkit-backdrop-filter: var(--sk-glass-blur);
  border: var(--sk-glass-border);
  box-shadow: var(--sk-glass-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 200ms var(--sk-ease-flow),
    transform 240ms var(--sk-ease-flow);
  z-index: 50;
}
.shop__currency-menu[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.shop__currency-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  color: var(--sk-fg);
  cursor: pointer;
  transition: background 200ms var(--sk-ease-flow);
}
/* Same unified menu-row pattern as .sk-lang__item — hover uses bg-hover so
   it's perceptible against the base fill; active is distinguished by
   font-weight and stays at the base fill. */
.shop__currency-item:hover { background: var(--sk-glass-bg-hover); }
.shop__currency-item[data-active="true"] {
  background: var(--sk-glass-bg);
  font-weight: var(--sk-weight-medium);
}

/* ---------- CTA — Buy now → (total lives in its own row above) ---------- */
.shop__cta {
  width: 100%;
  padding: 20px 28px;
  font-size: 16px;
  font-weight: var(--sk-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.shop__cta .sk-btn__arrow { margin-left: 4px; }

/* ---------- Trust strip — text only, bullet-separated ---------- */
.shop__trust {
  list-style: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk-fg-subtle);
  font-weight: var(--sk-weight-medium);
}
.shop__trust li:not(:last-child)::after {
  content: "·";
  margin-left: 16px;
  opacity: 0.4;
}

/* ---------- Back link (only visible during checkout) ---------- */
.shop__back {
  display: none;
  margin-top: 24px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sk-fg-subtle);
  cursor: pointer;
  transition: color 240ms var(--sk-ease-flow);
}
.shop__back:hover { color: var(--sk-fg); }
.shop__back svg { display: block; }

/* ============================================================
   Checkout state — hero (watch + statement) is hidden, the controls
   column slides into the now-empty left slot, and the payment panel
   slides in from the right.
   ============================================================ */
.shop[data-shop-state="cart"] .shop__payment { display: none; }

.shop[data-shop-state="checkout"] .shop__inner {
  grid-template-columns: 1fr 1fr;
}
.shop[data-shop-state="checkout"] .shop__hero,
.shop[data-shop-state="checkout"] .shop__cta,
.shop[data-shop-state="checkout"] .shop__trust {
  display: none;
}
.shop[data-shop-state="checkout"] .shop__back {
  display: inline-flex;
}

/* ============================================================
   View Transitions — smooth cart ↔ checkout swap.
   - shop-hero: fades + slides out left when entering checkout
   - shop-meta: position-interpolates from the right column to the left
   - shop-payment: slides in from the right when entering checkout
   Browsers without View Transitions (Firefox) get an instant cut.
   ============================================================ */
.shop__hero    { view-transition-name: shop-hero; }
.shop__meta    { view-transition-name: shop-meta; }
.shop__payment { view-transition-name: shop-payment; }

::view-transition-old(shop-hero) {
  animation: 400ms var(--sk-ease-flow) both shopHeroOut;
}
::view-transition-new(shop-hero) {
  animation: 480ms var(--sk-ease-flow) both shopHeroIn;
}
::view-transition-old(shop-meta),
::view-transition-new(shop-meta) {
  /* Default position-interpolation — meta visibly slides from the right
     column to the left column as the grid template changes. */
  animation-duration: 520ms;
  animation-timing-function: var(--sk-ease-flow);
}
::view-transition-old(shop-payment) {
  animation: 320ms var(--sk-ease-flow) both shopPaymentOut;
}
::view-transition-new(shop-payment) {
  /* Slight delay so the hero has already started clearing the column
     before the payment panel slides in — feels less crowded. */
  animation: 480ms var(--sk-ease-flow) 80ms both shopPaymentIn;
}

@keyframes shopHeroOut {
  to   { opacity: 0; transform: translateX(-32px); }
}
@keyframes shopHeroIn {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shopPaymentOut {
  to   { opacity: 0; transform: translateX(32px); }
}
@keyframes shopPaymentIn {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 0.01ms !important; }
}

/* ---------- Payment panel ---------- */
.shop__payment {
  display: flex;
  flex-direction: column;
  max-width: 460px;
}
.shop__payment-head {
  margin-bottom: 28px;
}
.shop__payment-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sk-fg-subtle);
  font-weight: var(--sk-weight-medium);
  margin-bottom: 10px;
}
.shop__payment-title {
  font-size: 28px;
  font-weight: var(--sk-weight-light);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--sk-fg);
  margin: 0;
}
.shop__payment-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Field block: small-caps label + input */
.shop__field { display: flex; flex-direction: column; gap: 6px; }
.shop__field-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sk-fg-subtle);
  font-weight: var(--sk-weight-medium);
}
.shop__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(35, 60, 90, 0.14);
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--sk-fg);
  outline: none;
  transition:
    border-color 200ms var(--sk-ease-flow),
    background 200ms var(--sk-ease-flow);
}
.shop__input:focus { border-color: var(--sk-accent); }
.shop__input--select {
  /* Native chevron suppressed; we draw our own via background-image. */
  -webkit-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%236B7C93' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Wallet shortcuts (Apple Pay / Google Pay) — appear above the form when
   available on the buyer's device. Same 50px box-height as `.shop__input`
   so the visual rhythm stays unbroken when wallets are present. */
.shop__wallets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 0;
}
.shop__wallet {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: var(--sk-weight-medium);
  padding: 0;
  transition: opacity 200ms var(--sk-ease-flow), transform 200ms var(--sk-ease-flow);
  box-sizing: border-box;
}
.shop__wallet:hover { opacity: 0.92; }
.shop__wallet:active { transform: scale(0.99); }
.shop__wallet[hidden] { display: none; }

/* Gated until the shipping/contact form is valid — wallets supply only the
   payment prime, so the address fields above must be filled first. Apple Pay
   is our own <button> (native :disabled); the TapPay-injected Google Pay button
   can't take :disabled, so we block pointer events on its container instead. */
.shop__wallet:disabled,
.shop__wallets[data-form-valid="false"] .shop__wallet--apple {
  opacity: 0.45;
  cursor: not-allowed;
}
.shop__wallets[data-form-valid="false"] .shop__wallet--google {
  opacity: 0.45;
  pointer-events: none;
}
.shop__wallet--apple {
  background: #000;
  color: #fff;
}
[data-theme="dark"] .shop__wallet--apple {
  /* On dark theme keep Apple Pay button white-on-black, per Apple HIG.
     (Apple permits dark or light variants — we go with dark for consistency
     with the buyer-facing brand outside.) */
  background: #fff;
  color: #000;
}
.shop__wallet--google {
  /* TapPay's setupGooglePayButton injects an official-style button inside
     this container. We just give it the same 50px box + bg the wrapper
     style provides; the injected button styles itself. */
  background: transparent;
  overflow: hidden;
}
.shop__wallet--google > * { width: 100% !important; height: 100% !important; }

/* "Or pay with card" divider between wallets and card form. */
.shop__wallet-or {
  position: relative;
  text-align: center;
  margin: 6px 0 18px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sk-fg-subtle);
  font-weight: var(--sk-weight-medium);
}
.shop__wallet-or::before,
.shop__wallet-or::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 90px);
  height: 1px;
  background: rgba(35, 60, 90, 0.14);
}
.shop__wallet-or::before { left: 0; }
.shop__wallet-or::after  { right: 0; }
[data-theme="dark"] .shop__wallet-or::before,
[data-theme="dark"] .shop__wallet-or::after {
  background: rgba(255, 255, 255, 0.14);
}

/* Three-column row for City / State / ZIP. Collapses to a stack on narrow. */
.shop__field-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .shop__field-grid { grid-template-columns: 1fr; }
}

/* TapPay Fields container. Each id="card-number" etc. is replaced by a
   TapPay-hosted iframe at runtime, so we style the *wrapper* — the iframe
   inside renders text using the `styles` map we pass to card.setup(). */
.shop__tappay-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop__tappay-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Wrapper for one TapPay-hosted iframe. Matches `.shop__input`'s box so the
   card / expiry / ccv fields read as the same control family as the shipping
   inputs above (State / ZIP). The horizontal padding inset pushes TapPay's
   iframe in 14px from each side, giving the placeholder + typed digits the
   same left gutter as `.shop__input`'s `padding: 12px 14px`. */
.shop__tappay-field {
  width: 100%;
  height: 50px;                                       /* matches .shop__input */
  padding: 0 14px;                                    /* matches .shop__input's horizontal padding */
  border-radius: 12px;
  border: 1px solid rgba(35, 60, 90, 0.14);
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 200ms var(--sk-ease-flow);
}
.shop__tappay-field:focus-within { border-color: var(--sk-accent); }

/* Inline field-level error (e.g. invalid card number from TapPay onUpdate). */
.shop__field-error {
  margin: 0;
  font-size: 12px;
  color: #d33;
  line-height: 1.4;
}

/* Form-level status row beneath the Pay button — used for "Processing…",
   network errors, and the final success line. */
.shop__form-status {
  margin: 10px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--sk-fg-subtle);
  line-height: 1.4;
}
.shop__form-status[data-kind="error"]   { color: #d33; }
.shop__form-status[data-kind="success"] { color: #1f9d55; }

/* Pay button — same primary glass treatment as the cart CTA, but with
   inline price (separator like the previous embedded-CTA pattern). */
.shop__pay {
  width: 100%;
  padding: 20px 28px;
  font-size: 16px;
  font-weight: var(--sk-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.shop__pay-sep { opacity: 0.45; font-weight: var(--sk-weight-light); }
.shop__pay-total { font-variant-numeric: tabular-nums; }
.shop__pay .sk-btn__arrow { margin-left: 4px; }
.shop__pay-note {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sk-fg-subtle);
  line-height: 1.5;
  text-align: center;
}

/* "Charged in TWD · NT$4,714 (≈ US$149)" — the real settlement amount, since
   the merchant bills TWD while the store is priced in USD. */
.shop__charge-note {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: var(--sk-weight-medium);
  text-align: center;
  color: var(--sk-fg-muted);
}
.shop__charge-note[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .shop { padding: 120px 24px 64px; }
  .shop__inner { grid-template-columns: 1fr; gap: 48px; }
  .shop__meta { max-width: 100%; }
  .shop__total-value { font-size: 28px; }
  .shop[data-shop-state="checkout"] .shop__inner { grid-template-columns: 1fr; }
}

/* ---------- Dark theme overrides ----------
   Hairlines flip to white-ink at the same opacities; the product photo
   trades its dark drop-shadow for a soft cool glow + black grounding so
   the watch reads as floating rather than disappearing into the field. */
[data-theme="dark"] .shop__photo img {
  filter:
    drop-shadow(0 0 50px rgba(166, 211, 230, 0.10))
    drop-shadow(0 24px 40px rgba(0, 0, 0, 0.32))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.20));
}
[data-theme="dark"] .shop__rule { background: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .shop__stepper-btn:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .shop__currency-toggle { border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .shop__currency-toggle:hover {
  /* Rim only — same as light, just inverted hairline. */
  border-color: rgba(255, 255, 255, 0.32);
}

/* Payment form on dark — inputs and TapPay field wrappers flip to white-ink
   hairlines so they read against the dark base. The TapPay iframe contents
   themselves switch colour via the `styles` map computed in shop.js. */
[data-theme="dark"] .shop__input,
[data-theme="dark"] .shop__tappay-field {
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .shop__input:focus,
[data-theme="dark"] .shop__tappay-field:focus-within {
  border-color: var(--sk-accent);
}
[data-theme="dark"] .shop__input--select {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23A6B4C5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ============================================================
   Delivery method toggle + Taiwan store-pickup (超商取貨)
   ============================================================ */

/* Segmented control: [Home delivery] [Store pickup · Taiwan]. */
.shop__delivery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin: 0 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(35, 60, 90, 0.14);
}
.shop__delivery-opt {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: var(--sk-weight-medium);
  color: var(--sk-fg-muted);
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 200ms var(--sk-ease-flow), color 200ms var(--sk-ease-flow);
}
.shop__delivery-opt[data-active="true"] { background: var(--sk-accent); color: #fff; }

/* Store-pickup sub-form (revealed when "Store pickup" is selected). */
.shop__cvs { display: flex; flex-direction: column; gap: 12px; }
/* `display:flex` above outranks the UA [hidden]{display:none}, so the store-pickup
   block leaked into Home-delivery mode — restore hiding when toggled off. */
.shop__cvs[hidden] { display: none; }

.shop__cvs-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(35, 60, 90, 0.3);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: var(--sk-weight-medium);
  color: var(--sk-accent);
  cursor: pointer;
  transition: border-color 200ms var(--sk-ease-flow), background 200ms var(--sk-ease-flow);
}
.shop__cvs-pick:hover { border-color: var(--sk-accent); }

/* Selected-store card. */
.shop__cvs-store {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(35, 60, 90, 0.14);
  background: var(--sk-glass-bg);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sk-fg);
}
.shop__cvs-store strong { font-weight: var(--sk-weight-medium); }
.shop__cvs-store span { display: block; color: var(--sk-fg-muted); font-size: 12px; margin-top: 2px; }

[data-theme="dark"] .shop__delivery,
[data-theme="dark"] .shop__cvs-store { border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .shop__cvs-pick { border-color: rgba(255, 255, 255, 0.28); }

/* ---- E-invoice optional section ---- */
.shop__invoice-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 18px;
}
.shop__invoice-summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
  list-style: none;
}
.shop__invoice-summary::-webkit-details-marker { display: none; }
.shop__invoice-summary::before {
  content: '▸ ';
  font-size: 11px;
  opacity: 0.6;
}
details[open] .shop__invoice-summary::before { content: '▾ '; }
.shop__invoice-body {
  padding: 0 16px 14px;
  border-top: 1px solid var(--line);
}
.shop__invoice-body .shop__field { margin-top: 14px; }
[data-theme="dark"] .shop__invoice-details { border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .shop__invoice-body   { border-color: rgba(255, 255, 255, 0.10); }