/* Yaxii COD Order Form — scoped styles (all classes prefixed with scf-) */
/* The webfont is enqueued from PHP (SCF_Frontend::enqueue_webfont) so only the
   family the merchant actually picked is downloaded. An @import here would
   block rendering and pull all four families on every product page. */

.scf-root {
  --scf-primary: #0f172a;
  /* Order button background — independent of --scf-primary. Defaults to it
     when the merchant hasn't set a separate button color. */
  --scf-button-bg: var(--scf-primary);
  --scf-button-text: #ffffff;
  --scf-border: #e2e8f0;
  --scf-text: #0f172a;
  --scf-muted: #64748b;
  --scf-muted-2: #94a3b8;
  --scf-bg: #ffffff;
  --scf-bg-soft: #f8fafc;
  --scf-danger: #dc2626;
  --scf-success: #16a34a;
  /* Base color that accent tints are mixed INTO (light surfaces). The dark skin
     overrides this so tinted chips/cards stay dark instead of going near-white. */
  --scf-tint-base: #ffffff;
  /* Second stop for the optional gradient order button. A deeper shade of the
     button itself, so switching the gradient on without picking a colour still
     gives one clean colour — not the primary, which is a text colour and would
     fade the button into an unrelated grey. */
  --scf-button-grad: color-mix(in srgb, var(--scf-button-bg) 72%, #000);
  --scf-radius: 12px;
  --scf-radius-lg: 16px;
  /* Two-layer elevation: a tight contact shadow plus a wide ambient one. A
     single blurred shadow reads as a flat 2015-era drop shadow; the pair is
     what makes a card look like it is actually lifted off the page. */
  --scf-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
  --scf-shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.10);
  /* One focus ring for the whole form, so every field, chip and button
     highlights identically — a keyboard user never has to guess where they are. */
  --scf-ring: 0 0 0 4px color-mix(in srgb, var(--scf-primary) 14%, transparent);
  /* Shared motion language. Everything eases the same way and for the same
     duration, which is what "smooth" actually is: consistency, not more animation. */
  --scf-ease: cubic-bezier(.4, 0, .2, 1);
  --scf-dur: .18s;
  /* Every corner in the form derives from --scf-radius: change it once and the
     cards, inputs and buttons all follow. Buttons share the card's larger radius
     (not the input radius) so the order/cart buttons match the rounded card
     they sit inside instead of looking sharper-cornered than it. */
  --scf-btn-radius: var(--scf-radius-lg);
  /* Text scale multiplier — every font-size below is calc(Npx * var(--scf-fs)). */
  --scf-fs: 1;
  --scf-section-gap: 20px;
  --scf-card-padding: 16px;
  /* Inner height of an input box. The buttons reuse it (plus the box's two
     borders) so they are exactly as tall as the fields above them. */
  --scf-control-h: 52px;
  /* Variant text-button appearance (text/pills/plain styles). */
  --scf-vbtn-pad: 8px 14px;
  --scf-vbtn-bg: var(--scf-bg);
  --scf-vbtn-text: var(--scf-text);
  --scf-vbtn-fs: calc(14px * var(--scf-fs, 1));

  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--scf-text);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.5;
  box-sizing: border-box;
}
.scf-root *, .scf-root *::before, .scf-root *::after { box-sizing: border-box; }

/* ---- Ready-made skins (one-click templates) ---- */
/* Classic — professional deep blue, tight corners. */
.scf-root.scf-skin-classic {
  --scf-primary: #1e3a8a;
  --scf-button-bg: #1e3a8a;
  --scf-button-grad: #2563eb;
  --scf-text: #0f172a;
  --scf-muted: #64748b;
  --scf-bg: #ffffff;
  --scf-bg-soft: #f1f5f9;
  --scf-border: #cbd5e1;
  --scf-radius: 8px;
  --scf-radius-lg: 10px;
  --scf-shadow: 0 1px 2px rgba(30, 58, 138, 0.06), 0 4px 16px rgba(30, 58, 138, 0.08);
}
/* Modern — vivid violet, generous rounding, airy. */
.scf-root.scf-skin-modern {
  --scf-primary: #7c3aed;
  --scf-button-bg: #7c3aed;
  --scf-button-grad: #a855f7;
  --scf-text: #1e1b4b;
  --scf-muted: #6b7280;
  --scf-bg: #ffffff;
  --scf-bg-soft: #faf5ff;
  --scf-border: #e9d5ff;
  --scf-radius: 16px;
  --scf-radius-lg: 20px;
  --scf-shadow: 0 1px 2px rgba(124, 58, 237, 0.07), 0 6px 20px rgba(124, 58, 237, 0.10);
}
/* Luxury — warm gold on cream, elegant.
   Gold is a light colour, so white on it is unreadable (2.95:1) — dark ink on
   gold is both the accessible choice and the one that actually reads as
   expensive. The accent is a shade deeper than the button so the total, which
   is drawn in it on a cream panel, stays legible. */
.scf-root.scf-skin-luxury {
  --scf-primary: #a37f28;
  --scf-button-bg: #b8912f;
  --scf-button-grad: #d4af37;
  --scf-button-text: #2d2513;
  --scf-text: #2d2513;
  --scf-muted: #6f6344;
  --scf-bg: #fffdf7;
  --scf-bg-soft: #faf5e6;
  --scf-tint-base: #fffdf7;
  --scf-border: #e6d9b0;
  --scf-radius: 6px;
  --scf-radius-lg: 10px;
  --scf-shadow: 0 1px 2px rgba(184, 145, 47, 0.10), 0 5px 18px rgba(184, 145, 47, 0.12);
}
/* Rose — warm dusty pink, soft & friendly. */
.scf-root.scf-skin-rose {
  --scf-primary: #be185d;
  --scf-button-bg: #be185d;
  --scf-button-grad: #ec4899;
  --scf-button-text: #ffffff;
  --scf-text: #3f1224;
  --scf-muted: #8f4e66;
  --scf-bg: #fffbfc;
  --scf-bg-soft: #fdf2f6;
  --scf-tint-base: #fffbfc;
  --scf-border: #fbcfe3;
  --scf-radius: 18px;
  --scf-radius-lg: 22px;
  --scf-shadow: 0 1px 2px rgba(190, 24, 93, 0.07), 0 6px 20px rgba(190, 24, 93, 0.10);
}
/* Nature — earthy green, calm & organic. */
.scf-root.scf-skin-nature {
  --scf-primary: #15803d;
  --scf-button-bg: #15803d;
  --scf-button-grad: #22c55e;
  --scf-button-text: #ffffff;
  --scf-text: #14291b;
  --scf-muted: #5f7a68;
  --scf-bg: #ffffff;
  --scf-bg-soft: #f0fdf4;
  --scf-border: #bbf7d0;
  --scf-radius: 10px;
  --scf-radius-lg: 14px;
  --scf-shadow: 0 1px 2px rgba(21, 128, 61, 0.07), 0 5px 18px rgba(21, 128, 61, 0.10);
}
/* Sky — clean & simple: blue accents/selection, crisp white cards, orange CTA.
   The CTA is a deeper orange than the obvious one: white on #f97316 is 2.8:1 and
   unreadable, while this passes at 5.2:1 and still reads unmistakably orange —
   the button's own gradient lifts the top edge back toward the brighter tone. */
.scf-root.scf-skin-sky {
  --scf-primary: #2563eb;
  --scf-button-bg: #c2410c;
  --scf-button-grad: #ea580c;
  --scf-button-text: #ffffff;
  --scf-text: #0f172a;
  --scf-muted: #64748b;
  --scf-bg: #ffffff;
  --scf-bg-soft: #f8fafc;
  --scf-border: #e2e8f0;
  --scf-success: #16a34a;
  --scf-danger: #ef4444;
  --scf-radius: 14px;
  --scf-radius-lg: 16px;
  --scf-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
}
/* Dark — full dark mode. The accent stays bright so it carries on a dark card,
   but the button sits a step deeper: white on #3b82f6 is only 3.7:1, which the
   button's 16px bold label is not large enough to get away with. */
.scf-root.scf-skin-dark {
  --scf-primary: #3b82f6;
  --scf-button-bg: #2563eb;
  --scf-button-grad: #3b82f6;
  --scf-button-text: #ffffff;
  --scf-text: #e2e8f0;
  --scf-muted: #94a3b8;
  --scf-muted-2: #64748b;
  --scf-bg: #1e293b;
  --scf-bg-soft: #0f172a;
  --scf-surface: #1e293b;
  --scf-tint-base: #1e293b;
  --scf-border: #334155;
  --scf-danger: #f87171;
  --scf-success: #4ade80;
  --scf-radius: 12px;
  --scf-radius-lg: 16px;
  /* Dark surfaces swallow a soft shadow, so the pair goes deeper and darker
     than the light skins' — depth on a dark card comes from contrast, not blur. */
  --scf-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 26px rgba(0, 0, 0, 0.45);
}

/* The banner is the top strip of the card underneath it, not a floating bar:
   it shares the card's border and shadow, keeps only the top corners rounded
   and hands its bottom edge to the card that follows. */
.scf-banner {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--scf-primary) 11%, var(--scf-tint-base)),
    color-mix(in srgb, var(--scf-primary) 5%, var(--scf-tint-base)));
  border: 1px solid var(--scf-border);
  border-bottom: none;
  box-shadow: var(--scf-shadow);
  color: var(--scf-primary);
  border-radius: var(--scf-radius-lg) var(--scf-radius-lg) 0 0;
  padding: 11px 14px;
  font-size: calc(14px * var(--scf-fs, 1));
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
}
.scf-banner + .scf-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* The merged layout already draws one border/shadow around everything. */
.scf-root.scf-layout-merged .scf-banner {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.scf-card {
  background: var(--scf-bg);
  border: 1px solid var(--scf-border);
  border-radius: var(--scf-radius-lg);
  box-shadow: var(--scf-shadow);
  padding: var(--scf-card-padding);
  margin-bottom: var(--scf-section-gap);
}

/* The form fades up once as it mounts instead of snapping into place. It runs
   on the wrapper only, so nothing inside animates twice, and `both` keeps the
   final frame applied rather than reverting. */
.scf-root .scf-content { animation: scf-rise .4s var(--scf-ease) both; }
@keyframes scf-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Merged layout — combine the product/fields/shipping/summary sections into
   one continuous card instead of separate stacked ones. The outer wrapper
   gets the unified border/shadow/radius; each inner section loses its own
   card chrome and gets a thin divider line instead of a gap. */
.scf-root.scf-layout-merged .scf-content {
  background: var(--scf-bg);
  border: 1px solid var(--scf-border);
  border-radius: var(--scf-radius-lg);
  box-shadow: var(--scf-shadow);
  overflow: hidden;
}
.scf-root.scf-layout-merged .scf-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  border-top: 1px solid var(--scf-border);
}
.scf-root.scf-layout-merged .scf-content > .scf-card:first-child {
  border-top: none;
}

/* ---- Layout templates ----
   Everything below is a complete "shape" for the form, picked from one select
   in the admin. They deliberately do NOT hard-code spacing: each one scales the
   merchant's own --scf-card-padding / --scf-section-gap, so a shop that likes
   roomy spacing stays roomy after switching template. (Those two tokens are
   written inline by applyTheme(), so a plain override here would never win.) */

/* Compact — the same separate cards, tightened everywhere. Made for shops whose
   traffic is almost all mobile: the whole order form fits one phone screen. */
.scf-root.scf-layout-compact {
  --scf-control-h: 46px;
}
.scf-root.scf-layout-compact .scf-card {
  padding: calc(var(--scf-card-padding) * .72);
  margin-bottom: calc(var(--scf-section-gap) * .55);
}
.scf-root.scf-layout-compact .scf-fields { gap: 8px; }
.scf-root.scf-layout-compact .scf-variants { margin-top: 10px; gap: 10px; }
.scf-root.scf-layout-compact .scf-product-img { width: 58px; height: 58px; }
.scf-root.scf-layout-compact .scf-product-title { font-size: calc(15px * var(--scf-fs, 1)); }
.scf-root.scf-layout-compact .scf-section-title { margin-bottom: 8px; }
.scf-root.scf-layout-compact .scf-control .scf-textarea { min-height: 68px; }

/* Minimal — no card chrome at all: no borders, no shadows, and every field
   reduced to a single underline. The form reads as part of the page instead of
   a widget bolted onto it. Suits clean/editorial themes. */
.scf-root.scf-layout-minimal .scf-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--scf-section-gap);
}
.scf-root.scf-layout-minimal .scf-control {
  border: none;
  border-bottom: 1px solid var(--scf-border);
  border-radius: 0;
  background: transparent;
}
.scf-root.scf-layout-minimal .scf-control:focus-within {
  border-color: var(--scf-primary);
  box-shadow: 0 1px 0 0 var(--scf-primary);
}
.scf-root.scf-layout-minimal .scf-banner {
  border: none;
  border-radius: var(--scf-radius);
  box-shadow: none;
}
.scf-root.scf-layout-minimal .scf-banner + .scf-card { border-radius: 0; }

/* Elegant — one calm panel: hairline dividers, generous padding, no shadow at
   all. The quiet, expensive-looking option for jewellery/cosmetics stores. */
.scf-root.scf-layout-elegant .scf-content {
  background: var(--scf-bg);
  border: 1px solid var(--scf-border);
  border-radius: var(--scf-radius-lg);
  box-shadow: none;
  overflow: hidden;
}
.scf-root.scf-layout-elegant .scf-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  border-top: 1px solid var(--scf-border);
  padding: calc(var(--scf-card-padding) * 1.45);
}
.scf-root.scf-layout-elegant .scf-content > .scf-card:first-child { border-top: none; }
.scf-root.scf-layout-elegant .scf-banner {
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
  letter-spacing: .6px;
}
.scf-root.scf-layout-elegant .scf-section-title { font-weight: 600; letter-spacing: .3px; }

/* Bold — a deliberately loud template: thick accent frame, offset block shadow,
   heavier headings and a taller order button. Built for impulse/COD offers
   where the button has to be impossible to miss. */
.scf-root.scf-layout-bold {
  --scf-control-h: 56px;
}
.scf-root.scf-layout-bold .scf-card {
  border: 2px solid var(--scf-primary);
  box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--scf-primary) 16%, transparent);
}
.scf-root.scf-layout-bold .scf-banner {
  border: 2px solid var(--scf-primary);
  border-bottom: none;
  font-weight: 800;
}
.scf-root.scf-layout-bold .scf-section-title {
  font-size: calc(16px * var(--scf-fs, 1));
  font-weight: 800;
}
.scf-root.scf-layout-bold .scf-btn-primary {
  font-size: calc(17px * var(--scf-fs, 1));
  font-weight: 800;
  letter-spacing: .3px;
}
.scf-root.scf-layout-bold .scf-summary-row.scf-total { font-size: calc(23px * var(--scf-fs, 1)); }

/* Product header */
.scf-product-head { display: flex; gap: 14px; align-items: center; }
.scf-product-img {
  width: 72px; height: 72px; border-radius: var(--scf-radius); object-fit: cover;
  border: 1px solid var(--scf-border); flex: none; background: var(--scf-bg-soft);
  box-shadow: var(--scf-shadow);
}
.scf-product-info { flex: 1; min-width: 0; }
.scf-product-title { font-weight: 700; font-size: calc(16.5px * var(--scf-fs, 1)); margin: 0 0 5px; line-height: 1.35; }
/* The price is the number the customer scans for — tabular figures keep it from
   reflowing digit by digit as the quantity or the variant changes. */
.scf-product-price {
  font-weight: 800; font-size: calc(20px * var(--scf-fs, 1)); color: var(--scf-primary);
  font-variant-numeric: tabular-nums; letter-spacing: -.2px; line-height: 1.25;
}
.scf-stock { font-size: calc(13px * var(--scf-fs, 1)); margin-top: 4px; }
.scf-stock.scf-stock-low { color: #d97706; }
.scf-stock.scf-stock-out { color: var(--scf-danger); }

/* Variant picker */
.scf-variant-row { margin-top: 12px; }
.scf-variant-row label { display: block; font-size: calc(13px * var(--scf-fs, 1)); font-weight: 600; margin-bottom: 6px; color: var(--scf-text); }

/* Per-piece variant groups (multi-variant order: one group per ordered unit) */
.scf-pieces { margin-top: 4px; display: flex; flex-direction: column; gap: 12px; }
/* With several pieces each one is a single compact block — its label on its
   own line, then its options side by side underneath. A grid (not flex-wrap)
   guarantees the option columns stay side by side at any card width instead
   of falling back to one-per-line when they don't quite fit. */
.scf-pieces-multi .scf-piece {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--scf-border); border-radius: var(--scf-radius);
  padding: 10px 12px; background: var(--scf-surface, #fff);
}
.scf-piece-title { font-size: calc(13px * var(--scf-fs, 1)); font-weight: 700; color: var(--scf-primary); margin-bottom: 6px; }
.scf-pieces-multi .scf-piece-title { margin-bottom: 0; }
.scf-pieces-multi .scf-piece .scf-variants {
  display: grid; grid-template-columns: repeat(var(--scf-opt-cols, 1), minmax(0, 1fr));
  margin-top: 0; gap: 10px; align-items: start;
}
.scf-pieces-multi .scf-opt-row { min-width: 0; }
.scf-pieces-multi .scf-opt-row .scf-label { margin-bottom: 4px; }
.scf-pieces-multi .scf-opt-row .scf-swatches { gap: 6px; }

/* Variant options (swatches / pills) */
.scf-variants { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.scf-opt-row .scf-label { margin-bottom: 8px; }
.scf-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.scf-swatch {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--scf-border); border-radius: 999px;
  padding: 8px 14px; font-size: calc(14px * var(--scf-fs, 1)); font-weight: 600; font-family: inherit;
  background: var(--scf-bg); color: var(--scf-text);
  transition: border-color var(--scf-dur) var(--scf-ease), background var(--scf-dur) var(--scf-ease),
              box-shadow var(--scf-dur) var(--scf-ease), transform .12s var(--scf-ease);
}
.scf-swatch:hover { border-color: var(--scf-primary); transform: translateY(-1px); }
/* Presses back under the finger — the one cue that tells a phone user the tap
   registered before the selection re-renders. */
.scf-swatch:active { transform: scale(.97); }
.scf-swatch:focus-visible { outline: none; box-shadow: var(--scf-ring); }
.scf-swatch.scf-swatch-selected {
  border-color: var(--scf-primary);
  background: color-mix(in srgb, var(--scf-primary) 8%, var(--scf-tint-base));
  box-shadow: var(--scf-ring);
}
.scf-swatch.scf-swatch-soldout {
  opacity: .45; text-decoration: line-through; cursor: not-allowed;
}
.scf-swatch-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 1px solid rgba(15, 23, 42, 0.18); box-shadow: inset 0 0 0 2px #fff;
}
.scf-swatch-dot-none { background: conic-gradient(#f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f87171); }
/* Colour-only swatches: compact round chips, label hidden until selected */
.scf-swatches[data-color="1"] .scf-swatch { padding: 4px; border-radius: 999px; }
.scf-swatches[data-color="1"] .scf-swatch-dot { width: 28px; height: 28px; }
.scf-swatches[data-color="1"] .scf-swatch-label { display: none; }
.scf-swatches[data-color="1"] .scf-swatch.scf-swatch-selected .scf-swatch-label {
  display: inline; padding-inline: 6px 10px; font-size: calc(13px * var(--scf-fs, 1));
}
/* Swatch dot rendered from a merchant-supplied image URL */
.scf-swatch-dot-img { background-size: cover; background-position: center; box-shadow: none; }

/* --- Explicit display styles (per-product override) --- */
/* Square: rounded-square colour/image chips */
.scf-swatches-square .scf-swatch { border-radius: 10px; padding: 4px; }
.scf-swatches-square .scf-swatch-dot { width: 30px; height: 30px; border-radius: 7px; }
.scf-swatches-square .scf-swatch-label { display: none; }
.scf-swatches-square .scf-swatch.scf-swatch-selected .scf-swatch-label {
  display: inline; padding-inline: 6px 10px; font-size: calc(13px * var(--scf-fs, 1));
}
/* Circle: force round chips even for non-colour options */
.scf-swatches-circle .scf-swatch { border-radius: 999px; padding: 4px; }
.scf-swatches-circle .scf-swatch-dot { width: 30px; height: 30px; }
.scf-swatches-circle .scf-swatch-label { display: none; }
.scf-swatches-circle .scf-swatch.scf-swatch-selected .scf-swatch-label {
  display: inline; padding-inline: 6px 10px; font-size: calc(13px * var(--scf-fs, 1));
}
/* Image: large tiles showing the mapped image/colour with the label underneath */
.scf-swatches-image { gap: 10px; }
.scf-swatches-image .scf-swatch {
  flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px;
}
.scf-swatch-img {
  width: 64px; height: 64px; border-radius: 9px; display: block;
  background-size: cover; background-position: center;
  border: 1px solid rgba(15, 23, 42, 0.12);
}
.scf-swatches-image .scf-swatch-label { font-size: calc(13px * var(--scf-fs, 1)); }

/* Plain text chip fallback: a circle/square/image style value with no colour or
   image mapped renders as a readable pill (label always shown). */
.scf-swatch.scf-swatch-plain { padding: 8px 14px; border-radius: 999px; }
.scf-swatches-square .scf-swatch.scf-swatch-plain { border-radius: 10px; }
.scf-swatch.scf-swatch-plain .scf-swatch-label { display: inline !important; font-size: calc(14px * var(--scf-fs, 1)); padding: 0; }

/* Text: clean rectangular (square-cornered) text buttons — never a dot/image. */
.scf-swatches-text { gap: 8px; }
.scf-swatches-text .scf-swatch,
.scf-style-text {
  padding: var(--scf-vbtn-pad);
  border-radius: 8px;
  background: var(--scf-vbtn-bg);
  color: var(--scf-vbtn-text);
}
.scf-style-text .scf-swatch-label { display: inline !important; font-size: var(--scf-vbtn-fs); padding: 0; }
.scf-style-text.scf-swatch-selected {
  border-color: var(--scf-primary);
  background: color-mix(in srgb, var(--scf-primary) 10%, var(--scf-vbtn-bg));
}

/* Merchant-tunable size/colours also apply to pills & plain text chips. */
.scf-style-pills,
.scf-swatch.scf-swatch-plain {
  padding: var(--scf-vbtn-pad);
  background: var(--scf-vbtn-bg);
  color: var(--scf-vbtn-text);
}
.scf-style-pills .scf-swatch-label,
.scf-swatch.scf-swatch-plain .scf-swatch-label { font-size: var(--scf-vbtn-fs); }

/* Quantity offers */
.scf-offers { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.scf-offers-title { font-size: calc(13px * var(--scf-fs, 1)); font-weight: 700; color: var(--scf-text); }
/* Grid layout: offer cards flow into responsive columns instead of a stack. */
.scf-offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; }
.scf-offers-grid .scf-offers-title { grid-column: 1 / -1; }
.scf-offers-grid .scf-offer { flex-direction: column; align-items: stretch; text-align: center; }
.scf-offers-grid .scf-offer-radio,
.scf-offers-grid .scf-offer-thumb { align-self: center; }
.scf-offers-grid .scf-offer-head,
.scf-offers-grid .scf-offer-rewards { justify-content: center; align-items: center; }
.scf-offers-grid .scf-offer-price { align-items: center; text-align: center; margin-inline-start: 0; }
/* An expanded (selected) grid offer spans the full width to fit its pickers. */
.scf-offers-grid .scf-offer.scf-offer-expanded { grid-column: 1 / -1; }
.scf-offer {
  /* Per-offer accent (falls back to the theme primary). Overridable inline. */
  --scf-offer-accent: var(--scf-primary);
  --scf-offer-tag-bg: var(--scf-offer-accent);
  /* Per-offer resting background (falls back to the theme's soft background). */
  --scf-offer-bg: var(--scf-bg-soft);
  position: relative;
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--scf-border); border-radius: var(--scf-radius);
  background: var(--scf-offer-bg); cursor: pointer;
  transition: border-color var(--scf-dur) var(--scf-ease), background var(--scf-dur) var(--scf-ease),
              transform .12s var(--scf-ease), box-shadow var(--scf-dur) var(--scf-ease);
}
.scf-offer:hover {
  border-color: color-mix(in srgb, var(--scf-offer-accent) 55%, var(--scf-border));
  transform: translateY(-2px); box-shadow: var(--scf-shadow);
}
.scf-offer:focus-visible { outline: none; box-shadow: var(--scf-ring); }
.scf-offer-now, .scf-offer-was, .scf-offer-unit { font-variant-numeric: tabular-nums; }
.scf-offer.scf-offer-active {
  border-color: var(--scf-offer-accent); background: color-mix(in srgb, var(--scf-offer-accent) 6%, var(--scf-tint-base));
  box-shadow: 0 0 0 1px var(--scf-offer-accent) inset;
}
/* Featured offers (with a merchant badge) stand out even when not selected. */
.scf-offer.scf-offer-featured { border-color: color-mix(in srgb, var(--scf-offer-accent) 45%, var(--scf-border)); }
.scf-offer-radio {
  width: 18px; height: 18px; border: 2px solid var(--scf-border); border-radius: 50%;
  flex-shrink: 0; position: relative;
}
.scf-offer.scf-offer-active .scf-offer-radio { border-color: var(--scf-offer-accent); }
.scf-offer.scf-offer-active .scf-offer-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--scf-offer-accent);
}
/* Small product thumbnail: reminds the customer what they're buying more of. */
.scf-offer-thumb {
  width: 44px; height: 44px; flex: none; border-radius: var(--scf-radius); object-fit: cover;
  border: 1px solid var(--scf-border); background: var(--scf-bg);
}
.scf-offer-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scf-offer-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.scf-offer-title { font-size: calc(15px * var(--scf-fs, 1)); font-weight: 700; color: var(--scf-text); }
.scf-offer-sub { font-size: calc(12px * var(--scf-fs, 1)); font-weight: 500; color: var(--scf-muted, #6b7177); line-height: 1.35; }
/* Savings — one quiet line, never repeated as a second chip elsewhere. */
.scf-offer-save { font-size: calc(12.5px * var(--scf-fs, 1)); font-weight: 700; color: var(--scf-success, #16a34a); }
/* Price block pinned to the inline end: total leads, old + unit price follow. */
.scf-offer-price {
  flex: none; display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; text-align: end; margin-inline-start: auto;
}
.scf-offer-now { font-size: calc(19px * var(--scf-fs, 1)); font-weight: 800; line-height: 1.2; color: var(--scf-text); white-space: nowrap; }
.scf-offer-was { font-size: calc(12.5px * var(--scf-fs, 1)); font-weight: 500; color: var(--scf-muted-2, #94a3b8); text-decoration: line-through; white-space: nowrap; }
.scf-offer-unit { font-size: calc(11.5px * var(--scf-fs, 1)); font-weight: 500; color: var(--scf-muted, #6b7177); white-space: nowrap; }
/* Legacy single-line label (kept for backward compatibility) */
.scf-offer-label { flex: 1; font-size: calc(14px * var(--scf-fs, 1)); font-weight: 600; color: var(--scf-text); }
/* Per-offer rewards: quiet icon lines, not competing coloured pills. */
.scf-offer-rewards { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.scf-offer-reward {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(12px * var(--scf-fs, 1)); font-weight: 600; color: var(--scf-muted, #6b7177); line-height: 1.4;
}
.scf-offer-reward-icon { flex: none; color: var(--scf-offer-accent); }
.scf-offer-reward-icon svg { width: 15px; height: 15px; display: block; }
/* Free gift PRODUCTS: their own little row with each gift's real image, so the
   customer sees exactly what they get for picking this tier. */
.scf-offer-gift {
  /* Sits on its own full-width row inside the (wrapping) offer card, and only
     unfolds once the customer picks the tier — the card stays compact until
     then, and choosing it reveals the gift they just earned. Several gifts
     wrap onto further lines instead of squeezing each other. */
  flex: 0 0 100%;
  display: none; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px;
  padding: 6px 8px; border-radius: var(--scf-radius);
  background: color-mix(in srgb, var(--scf-offer-accent) 8%, var(--scf-tint-base));
  border: 1px dashed color-mix(in srgb, var(--scf-offer-accent) 35%, var(--scf-border));
}
.scf-offer.scf-offer-active .scf-offer-gift { display: flex; }
.scf-offer-gift-img {
  width: 38px; height: 38px; flex: none; object-fit: cover;
  border-radius: calc(var(--scf-radius) - 4px); background: var(--scf-bg);
  border: 1px solid var(--scf-border);
}
/* One gift = image + name kept together, so several of them wrap as units. */
.scf-offer-gift-item {
  display: flex; align-items: center; gap: 6px; min-width: 0; text-align: start;
}
.scf-offer-gift-tag {
  font-size: calc(10.5px * var(--scf-fs, 1)); font-weight: 700; line-height: 1.3;
  color: var(--scf-offer-accent);
}
.scf-offer-gift-name {
  font-size: calc(12px * var(--scf-fs, 1)); font-weight: 600; line-height: 1.35;
  color: var(--scf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scf-offers-grid .scf-offer-gift { justify-content: center; }
/* Colour/size pickers for a gift the merchant set as a whole variable product.
   Deliberately outside the offer cards (the cards are click-to-select, a
   <select> inside one would fight with that) — see buildGiftPickers(). */
.scf-gift-picks {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--scf-radius);
  background: color-mix(in srgb, var(--scf-primary) 5%, var(--scf-tint-base));
  border: 1px dashed color-mix(in srgb, var(--scf-primary) 35%, var(--scf-border));
}
.scf-gift-picks.scf-invalid { border-color: var(--scf-danger); border-style: solid; }
.scf-gift-pick-title {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: calc(13px * var(--scf-fs, 1)); font-weight: 700; color: var(--scf-text);
}
.scf-gift-pick + .scf-gift-pick { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--scf-border); }
.scf-gift-pick-name {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: calc(12px * var(--scf-fs, 1)); font-weight: 600; color: var(--scf-muted);
}
.scf-gift-pick-row + .scf-gift-pick-row { margin-top: 8px; }
.scf-gift-pick-row label { display: block; margin-bottom: 4px; }
/* Merchant "most popular" ribbon — pinned to the card's top corner. */
.scf-offer-tag {
  position: absolute; top: -9px; inset-inline-end: 12px; z-index: 2;
  font-size: calc(10.5px * var(--scf-fs, 1)); font-weight: 700; color: #fff; background: var(--scf-offer-tag-bg);
  padding: 2px 9px; border-radius: 999px; line-height: 1.6; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}
/* Optional attention-grabbing pulse on the ribbon. */
.scf-offer-tag-pulse { animation: scf-tag-pulse 1.4s ease-in-out infinite; }
@keyframes scf-tag-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
  50% { transform: scale(1.08); box-shadow: 0 2px 8px color-mix(in srgb, var(--scf-offer-tag-bg) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .scf-offer-tag-pulse { animation: none; } }
/* Scarcity countdown above the offers. */
.scf-countdown {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 4px; border-radius: var(--scf-radius);
  background: color-mix(in srgb, var(--scf-danger, #dc2626) 8%, var(--scf-bg-soft));
  border: 1px solid color-mix(in srgb, var(--scf-danger, #dc2626) 25%, var(--scf-border));
}
.scf-countdown-label { font-size: calc(12px * var(--scf-fs, 1)); font-weight: 600; color: var(--scf-text); }
.scf-countdown-time {
  font-size: calc(15px * var(--scf-fs, 1)); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--scf-danger, #dc2626); letter-spacing: .5px;
}
.scf-offers-grid .scf-countdown { grid-column: 1 / -1; }
/* When an offer is selected the card "expands": the per-piece variant pickers
   are moved inside it and laid out full-width below the offer's header row. */
.scf-offer { flex-wrap: wrap; }
.scf-offer.scf-offer-expanded { cursor: default; }
.scf-offer.scf-offer-expanded:hover { transform: none; }
.scf-offer > .scf-pieces {
  flex-basis: 100%; width: 100%; order: 9; cursor: default; margin-top: 0;
  padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--scf-primary) 30%, var(--scf-border));
}
/* Same relocation trick as .scf-pieces above, but ordered right after it —
   so an expanded "buy N get a gift" card reads as one stacked list: Piece 1,
   Piece 2, then the gift picker. */
.scf-offer > .scf-gift-picks {
  flex-basis: 100%; width: 100%; order: 10; cursor: default; margin-top: 12px;
}
.scf-offer > .scf-pieces + .scf-gift-picks { margin-top: 0; padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--scf-primary) 30%, var(--scf-border));
}
.scf-summary-discount { color: var(--scf-success, #16a34a); }

/* Quantity */
.scf-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
/* The label sits beside the stepper here, not above it, so it must drop the
   stacked-label bottom margin or the row centres off by a few pixels. */
.scf-qty-row > .scf-label { margin-bottom: 0; }
.scf-qty {
  display: flex; align-items: center; border: 1px solid var(--scf-border);
  border-radius: var(--scf-radius); overflow: hidden; background: var(--scf-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color var(--scf-dur) var(--scf-ease), box-shadow var(--scf-dur) var(--scf-ease);
}
.scf-qty:focus-within { border-color: var(--scf-primary); box-shadow: var(--scf-ring); }
/* Sized off --scf-control-h, with the wrapper carrying the same 1px border as
   a field box, so the stepper is exactly as tall as the name/phone boxes under
   it. A 40px control in a column of 52px ones is the single clearest
   "unfinished form" tell. */
.scf-qty button {
  width: 46px; height: var(--scf-control-h); border: none; background: var(--scf-bg-soft);
  font-size: calc(20px * var(--scf-fs, 1)); cursor: pointer; color: var(--scf-text); line-height: 1;
  transition: background var(--scf-dur) var(--scf-ease), color var(--scf-dur) var(--scf-ease);
}
.scf-qty button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--scf-primary) 10%, var(--scf-bg-soft));
  color: var(--scf-primary);
}
.scf-qty button:disabled { opacity: .4; cursor: not-allowed; }
.scf-qty input {
  width: 58px; height: var(--scf-control-h); border: none; text-align: center; font-size: calc(16px * var(--scf-fs, 1));
  font-weight: 700; -moz-appearance: textfield; background: var(--scf-bg);
  font-variant-numeric: tabular-nums; color: var(--scf-text);
}
.scf-qty input:focus { outline: none; }
.scf-qty input::-webkit-outer-spin-button, .scf-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Quick buttons (collapsed) */
.scf-quick { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* Form action row: the order button leads, add-to-cart sits beside it.
   The row is a direct child of the form, so it is inset by the card's padding
   (plus its 1px border) to line the buttons up with the fields inside.
   margin-bottom keeps it from touching whatever comes right after it — most
   visibly the summary card's top divider when the merchant places the
   buttons above the summary. */
.scf-inline-submit {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-inline: calc(var(--scf-card-padding) + 1px);
  margin-bottom: var(--scf-section-gap);
}
.scf-inline-submit .scf-btn { flex: 1 1 150px; width: auto; }
.scf-inline-submit .scf-btn-primary { flex-grow: 1.8; }
/* "below" placement: the two buttons stack, order button on top. */
.scf-inline-submit.scf-cart-below { flex-direction: column; flex-wrap: nowrap; }
.scf-inline-submit.scf-cart-below .scf-btn { flex: none; width: 100%; }
.scf-cart-badge {
  display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 6px;
  border-radius: 999px; background: var(--scf-primary); color: var(--scf-button-text);
  font-size: calc(11px * var(--scf-fs, 1)); align-items: center; justify-content: center;
}

/* Buttons */
.scf-btn {
  width: 100%; border-radius: var(--scf-btn-radius);
  /* Same outer height as a field box: a transparent border of the same width
     as the box's, around the same inner height. Every box in the form uses a
     1px border, so this is exact at any device pixel ratio — 1.5px borders get
     rounded down by the browser and left the buttons a pixel taller than the
     fields they sit under. Centering is explicit because the height now comes
     from min-height rather than from the padding. */
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(var(--scf-control-h) + 2px);
  padding: 8px 16px; font-size: calc(16px * var(--scf-fs, 1)); font-weight: 700; cursor: pointer;
  transition: transform .12s var(--scf-ease), box-shadow var(--scf-dur) var(--scf-ease),
              opacity var(--scf-dur) var(--scf-ease), filter var(--scf-dur) var(--scf-ease),
              background var(--scf-dur) var(--scf-ease), border-color var(--scf-dur) var(--scf-ease);
  font-family: inherit; letter-spacing: .2px;
}
.scf-btn:active { transform: translateY(1px) scale(.995); }
.scf-btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--scf-button-bg) 92%, #fff), var(--scf-button-bg));
  color: var(--scf-button-text);
  /* A tinted lift plus a 1px inner highlight along the top edge — the detail
     that separates a real button from a coloured rectangle. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
              0 2px 8px color-mix(in srgb, var(--scf-button-bg) 26%, transparent);
}
/* Light sweep on hover. Purely decorative, so it never intercepts the click. */
.scf-btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .20) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .65s var(--scf-ease);
}
.scf-btn-primary:hover:not(:disabled)::after { transform: translateX(120%); }
.scf-btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
              0 8px 22px color-mix(in srgb, var(--scf-button-bg) 34%, transparent);
  transform: translateY(-2px);
}
.scf-root.scf-btn-gradient .scf-btn-primary {
  background: linear-gradient(135deg, var(--scf-button-bg), var(--scf-button-grad));
}
/* Secondary action: deliberately quieter than the order button so the primary
   path is never ambiguous. */
.scf-btn-outline {
  background: var(--scf-bg); color: var(--scf-text);
  border: 1px solid color-mix(in srgb, var(--scf-primary) 22%, var(--scf-border));
  font-weight: 600; font-size: calc(15px * var(--scf-fs, 1));
  box-shadow: none;
}
.scf-btn-outline:hover:not(:disabled) {
  background: var(--scf-bg-soft);
  border-color: color-mix(in srgb, var(--scf-primary) 45%, var(--scf-border));
}
.scf-btn:focus-visible { outline: none; box-shadow: var(--scf-ring), 0 0 0 1.5px var(--scf-primary); }
.scf-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.scf-btn:disabled::after { display: none; }

/* Fields */
.scf-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
.scf-fields.scf-cols-2 { grid-template-columns: 1fr 1fr; }
.scf-field.scf-field-full { grid-column: 1 / -1; }
/* The quantity row spans the grid when the merchant placed it among the fields. */
.scf-fields > .scf-qty-row { grid-column: 1 / -1; margin-top: 0; }
/* …but not in two columns, where spanning leaves the stepper marooned at the far
   edge of a mostly empty row. One cell puts it back in the same rhythm as the
   fields beside it. Its label is inline rather than stacked, so it also has to
   sit to the bottom of its cell for the stepper to line up with the field box
   next to it. */
.scf-fields.scf-cols-2 > .scf-qty-row { grid-column: auto; align-self: end; }
/* Labels sit above their field, so they only need to be identifiable — not
   loud. Dropping from 700 to 600 lets the field itself carry the weight and
   stops a seven-field form from reading as seven bold headlines. */
.scf-label {
  display: block; font-size: calc(13.5px * var(--scf-fs, 1)); font-weight: 600; margin-bottom: 7px;
  color: var(--scf-text); letter-spacing: .1px;
}
.scf-req { color: var(--scf-danger); margin-inline-start: 3px; font-weight: 700; }

/* The bordered box that holds the input plus its icon tile. The border lives
   on the wrapper (not the input) so the icon tile sits flush inside it. */
.scf-control {
  display: flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--scf-border); border-radius: var(--scf-radius);
  background: var(--scf-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color var(--scf-dur) var(--scf-ease), box-shadow var(--scf-dur) var(--scf-ease),
              background var(--scf-dur) var(--scf-ease);
}
.scf-control:hover { border-color: color-mix(in srgb, var(--scf-primary) 40%, var(--scf-border)); }
.scf-control:focus-within {
  border-color: var(--scf-primary);
  box-shadow: var(--scf-ring);
}
/* Standalone select (the variant pickers) keeps its own bordered box — only
   the ones inside a .scf-control hand their border over to the wrapper. */
/* A bare select (one with no icon wrapper around it) still has to line up with
   the wrapped fields beside it, so it takes its height from the same token
   rather than from its own padding — otherwise it sits two pixels short. */
.scf-select {
  width: 100%; box-sizing: border-box; min-height: calc(var(--scf-control-h) + 2px);
  padding: 12px 13px; border: 1px solid var(--scf-border);
  border-radius: var(--scf-radius); font-size: calc(15px * var(--scf-fs, 1)); font-family: inherit;
  background: var(--scf-bg); color: var(--scf-text); cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color var(--scf-dur) var(--scf-ease), box-shadow var(--scf-dur) var(--scf-ease);
}
.scf-select:hover { border-color: color-mix(in srgb, var(--scf-primary) 40%, var(--scf-border)); }
.scf-select:focus {
  outline: none; border-color: var(--scf-primary);
  box-shadow: var(--scf-ring);
}
.scf-select:disabled { background: var(--scf-bg-soft); cursor: not-allowed; color: var(--scf-muted-2); }

.scf-control .scf-input, .scf-control .scf-select, .scf-control .scf-textarea {
  flex: 1 1 auto; min-width: 0; width: 100%;
  padding: 0 14px; height: var(--scf-control-h); border: none; border-radius: 0; background: transparent;
  box-shadow: none; font-size: calc(15px * var(--scf-fs, 1)); font-family: inherit; color: var(--scf-text);
}
.scf-control .scf-input:focus, .scf-control .scf-select:focus, .scf-control .scf-textarea:focus { outline: none; box-shadow: none; }
.scf-control .scf-input::placeholder, .scf-control .scf-textarea::placeholder { color: var(--scf-muted-2); }
.scf-control .scf-select { -webkit-appearance: none; appearance: none; }
.scf-control .scf-textarea { min-height: 92px; height: auto; padding: 13px 14px; resize: vertical; line-height: 1.5; }
.scf-control .scf-select:disabled { color: var(--scf-muted-2); cursor: not-allowed; }
.scf-control:has(.scf-select:disabled) { background: var(--scf-bg-soft); }

/* Leading icon inside the box. `order` (not DOM order) puts it at the inline
   start, so it sits before the text in RTL *and* LTR — a trailing icon tile
   reads as a broken addon in left-to-right storefronts. */
.scf-control-icon {
  order: -1;
  flex: none; width: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--scf-muted-2);
  transition: color .15s ease;
}
.scf-control-icon svg { width: 19px; height: 19px; display: block; }
/* The icon already separates itself from the text, so the input only needs a
   hair of padding on that side instead of a full gutter. */
.scf-control:has(.scf-control-icon) .scf-input,
.scf-control:has(.scf-control-icon) .scf-select { padding-inline-start: 2px; }
.scf-control:focus-within .scf-control-icon { color: var(--scf-primary); }
/* Selects suppress the native arrow, so draw our own next to the icon tile.
   Flipping it while the select has focus mirrors what every native dropdown
   does, so an open list never looks like a stuck closed one. */
.scf-control-chev {
  flex: none; display: flex; align-items: center; color: var(--scf-muted-2); padding-inline-end: 8px;
  transition: color var(--scf-dur) var(--scf-ease);
}
.scf-control-chev svg { width: 18px; height: 18px; display: block; transition: transform .2s var(--scf-ease); }
.scf-control:focus-within .scf-control-chev { color: var(--scf-primary); }
.scf-control:focus-within .scf-control-chev svg { transform: rotate(180deg); }

.scf-field-msg { font-size: calc(12px * var(--scf-fs, 1)); color: var(--scf-danger); margin-top: 4px; min-height: 14px; }
/* Only reserve space for the error line once it actually has text — an empty
   message div still sat there taking ~18px under every field, stretching the
   whole form even when nothing was invalid. */
.scf-field-msg:empty { margin-top: 0; min-height: 0; }
.scf-field.scf-invalid .scf-control { border-color: var(--scf-danger); }
.scf-field.scf-invalid .scf-control-icon { color: var(--scf-danger); }

/* Section header above the customer fields */
.scf-form-head { margin-bottom: 14px; }
.scf-form-head .scf-section-title { margin-bottom: 6px; }
.scf-form-hint {
  display: flex; align-items: center; gap: 7px;
  font-size: calc(12.5px * var(--scf-fs, 1)); line-height: 1.45; color: var(--scf-muted);
}
.scf-hint-icon { flex: none; color: var(--scf-primary); }
.scf-hint-icon svg { width: 15px; height: 15px; display: block; }
.scf-note-toggle {
  background: none; border: none; color: var(--scf-primary); font-size: calc(14px * var(--scf-fs, 1));
  font-weight: 600; cursor: pointer; padding: 4px 0; font-family: inherit;
}
.scf-hidden { display: none !important; }

/* Shipping */
.scf-section-title {
  font-weight: 700; font-size: calc(15px * var(--scf-fs, 1)); margin: 4px 0 12px;
  display: flex; align-items: center; gap: 8px;
}
/* A soft accent bar that fades out at the bottom, instead of a flat 3px block
   of primary — the same marker, just not stamped on. */
.scf-section-title::before {
  content: ""; width: 4px; height: 17px; border-radius: 999px; flex: none;
  background: linear-gradient(180deg, var(--scf-primary),
    color-mix(in srgb, var(--scf-primary) 40%, transparent));
}
.scf-ship-options { display: grid; gap: 10px; }
.scf-ship-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--scf-border); border-radius: var(--scf-radius);
  padding: 13px 14px; cursor: pointer;
  transition: border-color var(--scf-dur) var(--scf-ease), background var(--scf-dur) var(--scf-ease),
              box-shadow var(--scf-dur) var(--scf-ease), transform .12s var(--scf-ease);
}
.scf-ship-card:hover {
  border-color: color-mix(in srgb, var(--scf-primary) 45%, var(--scf-border));
  transform: translateY(-1px); box-shadow: var(--scf-shadow);
}
.scf-ship-card:focus-within { box-shadow: var(--scf-ring); }
.scf-ship-card.scf-selected {
  border-color: var(--scf-primary); background: color-mix(in srgb, var(--scf-primary) 5%, var(--scf-tint-base));
  box-shadow: 0 0 0 1px var(--scf-primary) inset;
}
.scf-ship-card.scf-selected:focus-within { box-shadow: 0 0 0 1px var(--scf-primary) inset, var(--scf-ring); }
.scf-ship-price { font-variant-numeric: tabular-nums; }
.scf-ship-card input { accent-color: var(--scf-primary); }
.scf-ship-left { display: flex; align-items: center; gap: 10px; }
.scf-ship-name { font-weight: 600; font-size: calc(14px * var(--scf-fs, 1)); }
.scf-ship-price { font-weight: 700; font-size: calc(14px * var(--scf-fs, 1)); color: var(--scf-primary); }
.scf-office-note { font-size: calc(12px * var(--scf-fs, 1)); color: var(--scf-muted); margin-top: 8px; }
.scf-ship-none {
  font-size: calc(13px * var(--scf-fs, 1)); font-weight: 600; color: var(--scf-danger);
  background: color-mix(in srgb, var(--scf-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--scf-danger) 30%, transparent);
  border-radius: var(--scf-radius); padding: 10px 12px; text-align: center;
}

/* Summary */
.scf-summary-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-weight: 700; font-size: calc(15px * var(--scf-fs, 1));
}
.scf-summary-body { margin-top: 12px; }
.scf-summary-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--scf-border); }
.scf-summary-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: calc(14px * var(--scf-fs, 1)); color: var(--scf-text); }
.scf-summary-item-name { flex: 1; }
.scf-summary-item-qty { color: var(--scf-muted); font-size: calc(13px * var(--scf-fs, 1)); }
/* Every money figure in the summary uses tabular figures so the amounts line
   up in a column instead of jittering as the delivery price changes. */
.scf-summary-item-price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scf-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: calc(14px * var(--scf-fs, 1)); padding: 5px 0; color: var(--scf-muted); }
.scf-summary-row > span:last-child { font-variant-numeric: tabular-nums; }
.scf-summary-label { display: inline-flex; align-items: center; gap: 8px; }
.scf-summary-icon { flex: none; color: var(--scf-muted-2); }
.scf-summary-icon svg { width: 16px; height: 16px; display: block; }
.scf-summary-note { font-size: calc(11.5px * var(--scf-fs, 1)); color: var(--scf-muted-2); margin-top: 4px; }
/* The total is the decision point: it gets its own tinted panel rather than
   being one more line in a list of grey rows. */
.scf-summary-row.scf-total {
  font-size: calc(15px * var(--scf-fs, 1)); font-weight: 700; color: var(--scf-text);
  border-top: none; margin-top: 10px; padding: 12px 14px;
  border-radius: var(--scf-radius);
  background: color-mix(in srgb, var(--scf-primary) 6%, var(--scf-tint-base));
  border: 1px solid color-mix(in srgb, var(--scf-primary) 16%, var(--scf-border));
}
.scf-summary-row.scf-total > span:last-child {
  font-size: calc(22px * var(--scf-fs, 1)); font-weight: 800; color: var(--scf-primary);
  letter-spacing: -.3px; font-variant-numeric: tabular-nums;
}
.scf-summary-head:focus-visible { outline: none; box-shadow: var(--scf-ring); border-radius: var(--scf-radius); }
.scf-chevron { transition: transform .2s var(--scf-ease); }
.scf-collapsed .scf-chevron { transform: rotate(-90deg); }
.scf-collapsed .scf-summary-body { display: none; }

/* Sticky mobile submit */
.scf-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9998;
  /* Translucent + blurred so the page keeps scrolling visibly underneath it,
     the way a native bottom bar behaves. Browsers without backdrop-filter fall
     back to the solid colour the mix already resolves to. */
  background: color-mix(in srgb, var(--scf-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--scf-border);
  /* Clears the home indicator on notched phones instead of hiding under it. */
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 12px;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10);
}
.scf-sticky .scf-sticky-total {
  flex: none; font-weight: 800; font-size: calc(15px * var(--scf-fs, 1));
  font-variant-numeric: tabular-nums;
}
/* The sticky bar is a compact shortcut of its own — it doesn't line up with
   any field, so its button keeps the shorter height. */
.scf-sticky .scf-btn { flex: 1; min-height: 48px; }
/* Stands down while the real in-form order button is on screen. */
.scf-sticky.scf-sticky-off { display: none !important; }

/* Trust badges */
.scf-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 4px 0 2px; padding: 10px 4px;
}
/* Each reassurance reads as a badge rather than loose grey text — it is the
   last thing a hesitant buyer looks at before tapping order. */
.scf-trust-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(12.5px * var(--scf-fs, 1)); font-weight: 600; color: var(--scf-muted);
  padding: 6px 12px; border-radius: 999px;
  background: var(--scf-bg-soft); border: 1px solid var(--scf-border);
}
.scf-trust-icon { font-size: calc(16px * var(--scf-fs, 1)); line-height: 1; }
.scf-trust-text { line-height: 1.2; }

/* Powered by */
.scf-powered { text-align: center; font-size: calc(12px * var(--scf-fs, 1)); color: var(--scf-muted-2); margin-top: 10px; }

/* Toasts */
.scf-toasts { position: fixed; top: 16px; inset-inline: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.scf-toast {
  pointer-events: auto; max-width: 420px; width: 100%; padding: 12px 16px;
  border-radius: var(--scf-radius); font-size: calc(14px * var(--scf-fs, 1)); font-weight: 500; color: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2); animation: scf-toast-in .25s ease;
}
.scf-toast-success { background: var(--scf-success); }
.scf-toast-error { background: #dc2626 !important; color: #000 !important; }
@keyframes scf-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Spinner */
.scf-spinner {
  display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: scf-spin .6s linear infinite; vertical-align: -3px; margin-inline-end: 6px;
}
@keyframes scf-spin { to { transform: rotate(360deg); } }

/* Popup trigger */
.scf-popup-trigger { margin-top: 4px; }

/* Modal (popup display mode) */
body.scf-modal-open { overflow: hidden; }
.scf-modal {
  position: fixed; inset: 0; z-index: 10000;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0; color: inherit;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 14px; overflow-y: auto;
  animation: scf-fade .2s ease;
}
.scf-modal::backdrop { background: transparent; }
.scf-modal-dialog {
  position: relative; width: 100%; max-width: 560px; margin: auto;
  background: var(--scf-bg); border-radius: var(--scf-radius-lg);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  padding: 20px 16px 16px; animation: scf-pop .25s ease;
}
.scf-modal-dialog .scf-content { margin: 0; }
.scf-modal-close {
  position: absolute; inset-inline-end: 12px; top: 10px;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: var(--scf-bg-soft); color: var(--scf-text);
  font-size: calc(22px * var(--scf-fs, 1)); line-height: 1; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.scf-modal-close:hover { background: var(--scf-border); }

/* Thank-you overlay */
.scf-ty {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 14px; animation: scf-fade .2s ease;
  font-family: inherit; color: var(--scf-text);
}
.scf-ty-card {
  width: 100%; max-width: 420px; background: var(--scf-bg);
  border-radius: var(--scf-radius-lg); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  padding: 32px 24px 24px; text-align: center; animation: scf-pop .3s ease;
}
.scf-ty-check {
  width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--scf-success) 15%, var(--scf-tint-base));
  color: var(--scf-success); font-size: calc(36px * var(--scf-fs, 1)); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  animation: scf-pop-check .4s cubic-bezier(.17,.89,.32,1.28);
}
.scf-ty-title { font-size: calc(20px * var(--scf-fs, 1)); font-weight: 700; margin-bottom: 8px; }
.scf-ty-msg { font-size: calc(14px * var(--scf-fs, 1)); color: var(--scf-muted); margin-bottom: 16px; line-height: 1.6; }
.scf-ty-order {
  font-size: calc(14px * var(--scf-fs, 1)); margin-bottom: 20px; padding: 10px 14px;
  background: var(--scf-bg-soft); border-radius: var(--scf-radius);
  border: 1px dashed var(--scf-border);
}
.scf-ty-order strong { color: var(--scf-primary); font-size: calc(16px * var(--scf-fs, 1)); }

@keyframes scf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scf-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes scf-pop-check { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Order-summary accent color (falls back to the normal card background when the
   merchant leaves it empty). */
.scf-root .scf-summary-card { background: var(--scf-summary-bg, var(--scf-bg)); }
/* Merchant picked a dark summary colour: re-point the text/border variables
   inside that card only, so its contents stay legible on it. */
.scf-root.scf-summary-dark .scf-summary-card {
  --scf-text: #f8fafc;
  --scf-muted: #cbd5e1;
  --scf-muted-2: #94a3b8;
  --scf-border: rgba(255, 255, 255, 0.18);
  color: var(--scf-text);
}
/* The merged layout forces every card transparent (.scf-layout-merged .scf-card
   above) so the sections blend into one continuous card — but an explicit
   merchant summary color must still win over that, so it needs a rule of equal
   specificity placed after it. */
.scf-root.scf-layout-merged .scf-summary-card,
.scf-root.scf-layout-elegant .scf-summary-card,
.scf-root.scf-layout-minimal .scf-summary-card { background: var(--scf-summary-bg, transparent); }

/* Periodic shake to draw attention to the submit ("order now") button. */
@keyframes scf-shake {
  0%, 88%, 100% { transform: translateX(0); }
  90% { transform: translateX(-5px); }
  92% { transform: translateX(5px); }
  94% { transform: translateX(-4px); }
  96% { transform: translateX(4px); }
  98% { transform: translateX(-2px); }
}
.scf-root.scf-btn-shake .scf-inline-submit .scf-btn-primary {
  animation: scf-shake 3.2s ease-in-out infinite;
}
/* Vestibular-safe fallback (WCAG 2.3.3). Every decorative movement added for
   polish is opt-out: the form still shows all of its states through colour and
   elevation, it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  .scf-root.scf-btn-shake .scf-inline-submit .scf-btn-primary { animation: none; }
  .scf-root .scf-content,
  .scf-toast, .scf-modal, .scf-modal-dialog, .scf-ty, .scf-ty-card, .scf-ty-check { animation: none !important; }
  .scf-root *, .scf-root *::before, .scf-root *::after {
    transition-duration: .01ms !important;
  }
  .scf-btn:hover, .scf-btn:active,
  .scf-swatch:hover, .scf-swatch:active,
  .scf-offer:hover, .scf-ship-card:hover { transform: none !important; }
  .scf-btn-primary::after { display: none; }
  .scf-spinner { animation-duration: 1.2s; }
}

/* Mobile */
@media (max-width: 600px) {
  /* iOS Safari (and some Android browsers) auto-zoom the whole page when a
     tapped input's font-size is below 16px. Force 16px here regardless of
     the merchant's --scf-fs multiplier so typing never triggers page-zoom. */
  .scf-control .scf-input,
  .scf-control .scf-select,
  .scf-control .scf-textarea,
  .scf-select { font-size: 16px; }
  /* Two columns stay two columns on phones (the merchant asked for it) — the
     inputs just get tighter so they still fit a ~360px screen. */
  .scf-fields.scf-cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  /* Shorter boxes on phones — declared on the root so the order/cart buttons,
     which live outside the fields grid, shrink by exactly the same amount and
     stay the same height as the fields. */
  .scf-root:has(.scf-fields.scf-cols-2) { --scf-control-h: 48px; }
  .scf-fields.scf-cols-2 .scf-control .scf-input,
  .scf-fields.scf-cols-2 .scf-control .scf-select { padding: 0 10px; }
  .scf-fields.scf-cols-2 .scf-control-icon { width: 36px; }
  .scf-fields.scf-cols-2 .scf-control-icon svg { width: 17px; height: 17px; }
  .scf-fields.scf-cols-2 .scf-control-chev { padding-inline-end: 4px; }
  .scf-fields.scf-cols-2 .scf-control-chev svg { width: 15px; height: 15px; }
  /* Tighten the offer row so radio + thumb + text + price still fit. */
  .scf-offer { gap: 10px; padding: 12px; }
  .scf-offer-thumb { width: 38px; height: 38px; }
  .scf-offer-title { font-size: calc(14px * var(--scf-fs, 1)); }
  .scf-offer-now { font-size: calc(17px * var(--scf-fs, 1)); }
  /* The sticky bar is an EXTRA shortcut — the in-form order button stays. */
  .scf-root.scf-mobile-sticky.scf-expanded .scf-sticky { display: flex; }
  .scf-root.scf-mobile-sticky.scf-expanded { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .scf-modal { padding: 0; }
  .scf-modal-dialog { max-width: 100%; min-height: 100%; border-radius: 0; margin: 0; }
}

/* WooCommerce Blocks Mini Cart drawer's own "Checkout" button skips this
   plugin's COD form entirely (straight to the native checkout page, no
   name/phone/address collected). class-scf-cart-form.php's Buy-Now button
   already covers that need for this drawer, so the native one is hidden —
   unlike the classic mini-cart widget (unhooked in PHP, see
   SCF_Cart_Form::hide_native_checkout_button()), this drawer is rendered
   entirely client-side by WooCommerce Blocks with no server-side hook to
   remove it from, so CSS is the only lever. "View cart" is left visible —
   it only opens the cart page, no bypass. */
.wc-block-mini-cart__footer-checkout { display: none !important; }