/* ==========================================================================
   ChargingChargers.com — VARIANT C ("Warm & human", style 3 / "Drew Barrymore")
   A/B/C challenger theme. Loads AFTER styles.css; presentation layer only.

   Design position: the store as a family shop that picks up the phone.
   Principles applied (per the six-style teardown):
     · Style 3 — warm palette, rounded geometry, candid framing, bounce motion,
       first-person copy, nothing super-bold, no corporate gloss.
     · Style 1 — subtraction still applies: fewer badges, no gradient hero.
   Brand tokens unchanged (#F38044 / #00BAC0 / #111827); C re-allocates them
   into a warm neutral system so the shop reads human, not clinical — this is
   the deliberate opposite of variant B.
   Signature element (repeated 3x): a rotated paper "sticker" stamp.
   ========================================================================== */

:root {
  --c-paper: #fdf7f1;
  --c-paper-2: #f8ecdf;
  --c-paper-3: #f2e2d1;
  --c-ink: #2a211c;
  --c-ink-2: #4a3c33;
  --c-muted: #7a6a5e;
  --c-line: #e8d8c7;
  --c-line-2: #dcc7b2;
  --c-accent: #e2723c;
  --c-accent-2: #b9521f;
  --c-sage: #1f7a6f;

  /* retune the control's tokens */
  --orange: #e2723c;
  --orange-600: #cc6231;
  --orange-700: #b9521f;
  --orange-100: #fbe3d5;
  --orange-50: #fdf1e9;
  --teal: #1f7a6f;
  --teal-700: #166055;
  --teal-100: #e6f2ef;
  --ink: #2a211c;
  --ink-2: #4a3c33;
  --slate: #5d4c41;
  --muted: #7a6a5e;
  --line: #e8d8c7;
  --line-2: #dcc7b2;
  --stripe: #f8ecdf;
  --paper: #fdf7f1;
  --paper-2: #f8ecdf;
  --paper-3: #f2e2d1;
  --night: #2a211c;

  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, monospace;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(74, 60, 51, .06), 0 6px 16px rgba(74, 60, 51, .06);
  --shadow: 0 2px 6px rgba(74, 60, 51, .07), 0 18px 34px rgba(74, 60, 51, .09);
  --shadow-lg: 0 26px 60px rgba(74, 60, 51, .16);
  --wrap: 1160px;
  --header-h: 70px;
}

/* ---------- base ---------- */
body { background: var(--c-paper); color: var(--c-ink); font-size: 16.5px; line-height: 1.7; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.14; color: var(--c-ink); }
p { color: var(--c-ink-2); }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: #f7d9c4; color: var(--c-ink); }

.display { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -.03em; }
.h2 { font-size: clamp(26px, 2.9vw, 38px); line-height: 1.14; }
.h3 { font-size: clamp(20px, 1.8vw, 24px); }
.lede { color: var(--c-muted); font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.72; }

.eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-sage);
}
.eyebrow::before { width: 18px; height: 2px; border-radius: 2px; background: var(--c-accent); }
.section--night .eyebrow { color: var(--c-sage); }

/* ---------- surfaces: warm paper, soft edges ---------- */
.section { padding: clamp(56px, 6vw, 92px) 0; }
.section--paper { background: var(--c-paper-2); }
.section--night { background: var(--c-ink); color: #f7ece1; }
.section--night h2, .section--night h3 { color: #fff7ef; }
.section--night p { color: #ddcabb; }
.section--night .lede { color: #e6d5c6; }
.section--night .eyebrow { color: #f6b795; }
.section-head { margin-bottom: 34px; }

.link-arrow { font-weight: 650; color: var(--c-accent-2); }
.link-arrow svg { width: 15px; height: 15px; }

/* ---------- chrome ---------- */
.announce { background: #f4e2d1; color: var(--c-ink-2); font-size: 13px; font-weight: 600; }
.announce__inner { min-height: 38px; }
.announce__dot { background: var(--c-accent); }
.header { background: rgba(253, 247, 241, .95); border-bottom: 1px solid var(--c-line); }
.header.is-stuck { box-shadow: 0 8px 26px rgba(74, 60, 51, .08); }
.brand__mark { border-radius: 12px; background: #fff; border: 2px solid var(--c-paper-3); }
.brand__mark::after { height: 0; }
.brand__name { font-size: 17px; font-weight: 700; }
.brand__tag { font-size: 11.5px; color: var(--c-muted); }
.nav__link { font-size: 14px; font-weight: 600; color: var(--c-ink-2); }
.nav__link:hover { color: var(--c-accent-2); }
.mega { border-radius: 16px; border-color: var(--c-line); box-shadow: var(--shadow-lg); }
.mega a { border-radius: 10px; }
.searchbox { border-radius: 999px; border: 1px solid var(--c-line-2); background: #fffdfa; }
.searchbox:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(226, 114, 60, .12); }
.tool, .cart-btn { border-radius: 12px; }

/* ---------- buttons: warm, soft, and they move a little ---------- */
.btn, .b3-btn {
  border-radius: 999px; min-height: 52px; padding: 0 26px;
  background: var(--c-accent); border: 0; color: #fff;
  font-size: 15.5px; font-weight: 700; letter-spacing: 0;
  box-shadow: 0 10px 20px rgba(226, 114, 60, .24);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), background .18s, box-shadow .18s;
}
.btn:hover { background: var(--c-accent-2); transform: translateY(-2px) rotate(-.4deg); box-shadow: 0 14px 26px rgba(226, 114, 60, .3); }
.btn:active { transform: translateY(0); }
.btn--outline-light, .btn--ghost { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line-2); box-shadow: none; }
.btn--outline-light:hover, .btn--ghost:hover { background: var(--c-paper-2); border-color: var(--c-accent); color: var(--c-accent-2); }
.btn--light { background: #fff; color: var(--c-ink); box-shadow: var(--shadow-sm); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 13px; }

/* ---------- cards: soft, rounded, gently alive ---------- */
.cat-card, .p-card, .why-card, .team-card, .quote-card, .radio-card, .cfg-result,
.cat-guide, .g-card, .pdp-card, .about-contact, .order-ok__card, .drawer,
.chat-panel, .ck-panel, .quickfind, .toolbar, .facets {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: #fffdfa;
  box-shadow: var(--shadow-sm);
}
.cat-card:hover, .p-card:hover, .why-card:hover, .radio-card:hover {
  transform: translateY(-3px) rotate(-.3deg);
  box-shadow: var(--shadow);
  border-color: var(--c-line-2);
}
.cat-card::after { background: var(--c-accent); }
.cat-card__img, .p-card__media { border-radius: 16px; background: var(--c-paper-2); }

.chip, .badge, .flag, .tag, .app-chip, .fchip, .brand-chip, .af-chip, .cmp-chip {
  border-radius: 999px; background: var(--c-paper-2); border: 1px solid var(--c-line);
  color: var(--c-ink-2); font-size: 12px; font-weight: 650;
}
.chip--orange { background: #fff; border-color: var(--c-accent); color: var(--c-accent-2); }

/* ---------- tables stay honest, just warmer ---------- */
table th, .spec-table th, .g-table th {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-muted); border-bottom: 1px solid var(--c-line-2); background: transparent;
}
table td, .spec-table td { font-size: 14px; border-bottom: 1px solid var(--c-line); }
.price__now, .pdp-price { color: var(--c-accent-2); }

/* ---------- forms ---------- */
.cfg-input, .cfg-select, .qty input, .ck-field-input, .select, .quickfind__model,
input[type="text"], input[type="search"], textarea {
  border-radius: 12px; border: 1px solid var(--c-line-2); background: #fffdfa;
}
.cfg-input:focus, .cfg-select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(226, 114, 60, .12);
}
.app-opt { border-radius: 999px; }
.app-opt.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tab { border-radius: 999px; }
.tab.is-active { background: var(--c-accent); color: #fff; }
.volt-btn { border-radius: 14px; }
.volt-btn.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.cfg-progress { border-radius: 999px; }
.cfg-progress > *, .free-ship__bar { border-radius: 999px; background: var(--c-accent); }

/* ---------- faq ---------- */
.faq-item, .g-faq__item, .pdp-faq__item { border-radius: 16px; border: 1px solid var(--c-line); background: #fffdfa; margin-bottom: 10px; box-shadow: none; }
.faq-item:hover { border-color: var(--c-line-2); }

/* ---------- footer ---------- */
.footer { background: var(--c-ink); color: #e6d5c6; }
.footer a { color: #e6d5c6; }
.footer a:hover { color: #ffd9c2; }
.footer__cols h4, .footer__merch h4 { color: #f6b795; }

/* ==========================================================================
   C HERO — candid, first person, snapshot framing
   ========================================================================== */
.b3-hero { background: var(--c-paper); position: relative; overflow: hidden; }
.b3-hero::after {
  content: ""; position: absolute; inset: auto -10% -30% -10%; height: 340px;
  background: radial-gradient(closest-side, rgba(226, 114, 60, .14), transparent 70%);
  pointer-events: none;
}
.b3-hero .wrap { padding: clamp(34px, 4vw, 60px) 0 clamp(30px, 4vw, 54px); position: relative; z-index: 1; }
.b3-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 4vw, 60px); align-items: center; }
.b3-hero__kicker {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px;
  border-radius: 999px; background: #fff; border: 1px solid var(--c-line);
  font-size: 12.5px; font-weight: 650; color: var(--c-ink-2);
  box-shadow: var(--shadow-sm);
}
.b3-hero__kicker img { width: 22px; height: 22px; object-fit: contain; }
.b3-hero h1 {
  margin-top: 20px; font-size: clamp(33px, 4.1vw, 55px); font-weight: 650;
  line-height: 1.05; letter-spacing: -.035em; max-width: 18ch; color: var(--c-ink);
}
.b3-mark {
  background: linear-gradient(180deg, transparent 62%, #f9d3b8 62%, #f9d3b8 92%, transparent 92%);
  padding: 0 2px; border-radius: 2px;
}
.b3-hero__lede { margin-top: 20px; max-width: 44ch; color: var(--c-ink-2); font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.7; }
.b3-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.b3-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.b3-btn--ghost { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line-2); box-shadow: none; }
.b3-btn--ghost:hover { background: var(--c-paper-2); transform: translateY(-2px); }
.b3-hero__trustline { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--c-muted); }
.b3-hero__trustline span { display: inline-flex; align-items: center; gap: 7px; }
.b3-hero__trustline svg { width: 14px; height: 14px; color: var(--c-sage); }

/* the snapshot: tilted paper frame — the "candid, not produced" move */
.b3-hero__shot { position: relative; }
.b3-frame {
  position: relative; background: #fff; padding: 14px 14px 46px;
  border-radius: 8px; transform: rotate(-1.6deg);
  box-shadow: 0 24px 50px rgba(74, 60, 51, .18), 0 2px 0 rgba(74, 60, 51, .05);
  border: 1px solid var(--c-line);
}
.b3-frame img { width: 100%; height: 340px; object-fit: contain; background: var(--c-paper-2); border-radius: 4px; }
.b3-frame__cap {
  position: absolute; left: 18px; right: 18px; bottom: 12px;
  font-size: 12.5px; color: var(--c-muted); line-height: 1.35;
}
.b3-frame__cap b { color: var(--c-ink-2); }
.b3-sticker {
  position: absolute; right: -14px; top: -20px; transform: rotate(7deg);
  background: var(--c-accent); color: #fff; border-radius: 12px;
  padding: 10px 14px; font-size: 12.5px; font-weight: 750; line-height: 1.2;
  text-align: center; box-shadow: 0 10px 22px rgba(226, 114, 60, .3);
  max-width: 150px;
}
.b3-sticker small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.b3-hero__person {
  margin-top: 22px; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.b3-hero__person img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: var(--c-paper-2); padding: 4px; }
.b3-hero__person p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--c-ink-2); }
.b3-hero__person b { color: var(--c-ink); }

/* ---------- signature element: paper sticker stamp, scaled 3x ---------- */
.b3-stamp {
  display: inline-block; transform: rotate(-3deg);
  background: #fff; border: 1.5px dashed var(--c-line-2); color: var(--c-ink-2);
  border-radius: 10px; padding: 7px 12px;
  font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(74, 60, 51, .08);
}
.b3-stamp--accent { background: #fff4ec; border-color: var(--c-accent); color: var(--c-accent-2); }
.b3-stamp--lg { font-size: 13px; padding: 10px 16px; border-radius: 12px; }
.b3-strip {
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  background: var(--c-paper-2); padding: 18px 0;
}
.b3-strip__inner { display: flex; align-items: center; justify-content: center; gap: 10px 16px; flex-wrap: wrap; }
.b3-strip__note { font-size: 13px; color: var(--c-muted); }
.b3-foot-note { padding: 26px 0; text-align: center; }
.b3-foot-note p { font-size: 13.5px; color: var(--c-muted); margin-top: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .b3-hero__grid { grid-template-columns: 1fr; }
  .b3-hero h1 { max-width: 26ch; }
  .b3-frame img { height: 260px; }
  .b3-sticker { right: 6px; top: -14px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .b3-hero .wrap { padding: 26px 0 30px; }
  .b3-hero h1 { font-size: clamp(29px, 8.6vw, 38px); }
  .b3-hero__actions .b3-btn { flex: 1 1 100%; }
  .b3-frame { transform: rotate(-1deg); }
  .b3-frame img { height: 210px; }
  .b3-sticker { position: static; transform: rotate(-2deg); margin: 14px 0 0; display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}