/* =============================================================================
   swp-product.css  —  SWP Social Product
   Design system: "Obsidian Market v2"

   Refinements over v1:
   - Tighter, more intentional depth hierarchy (4 levels instead of 3)
   - Replaced flat `!important` overrides with higher-specificity selectors
   - Richer gradient-border on image frame (amber → ice, full 360°)
   - Price block gets a "live data" treatment with mono font + pulsing dot
   - CTA button upgraded to full solid fill with shimmer sweep on hover
   - Section headings get an amber accent bar (ties to card top-border motif)
   - Cards: consistent inset highlight + directional shadow stack
   - Comment cards: left-accent glow for native platform
   - Smooth cubic-bezier curves replace linear easing everywhere
   - All !important removed except color bleed prevention

   External dependencies:
     Font Awesome 6  →  cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css
     Inter           →  fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800
     JetBrains Mono  →  fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   0.  TOKENS
   ───────────────────────────────────────────────────────────────────────────── */

.swp-wrap {

  /* Surface stack — 4 levels of depth */
  --swp-bg:   #0A0A0F;   /* canvas beneath everything        */
  --swp-l1:   #13131C;   /* primary cards (panel, gallery)   */
  --swp-l2:   #1A1A27;   /* inner fields, seg track          */
  --swp-l3:   #222232;   /* hover surface, active button bg  */
  --swp-l4:   #ede7b7;   /* deepest inner: qty bg, dropzone  */

  /* Border system — three weights */
  --swp-b0:   rgba(255,255,255,.06);   /* barely-there structure      */
  --swp-b1:   rgba(255,255,255,.11);   /* default strokes             */
  --swp-b2:   rgba(255,255,255,.18);   /* hover / lifted              */
  --swp-b3:   rgba(255,255,255,.28);   /* prominent — top edges       */

  /* Text */
 --swp-t1:  #D6E8F8;                    /* primary — cool clear blue-white */
  --swp-t2:  rgba(196,220,245,.72);      /* secondary                 */
  --swp-t3:  rgba(196,220,245,.45);      /* muted / captions          */
  --swp-t4:  rgba(196,220,245,.30);      /* placeholder               */

  /* Amber accent */
  --swp-a:   #E8923A;           /* base                              */
  --swp-a2:  #F5B97A;           /* light tint                        */
  --swp-a3:  #FBCF93;           /* lightest — icon highlights        */
  --swp-ad:  #C4711E;           /* dark — gradient base              */
  --swp-abg: rgba(232,146,58,.09);   /* tinted surface                */
  --swp-abd: rgba(232,146,58,.28);   /* accent border                 */
  --swp-agw: 0 0 0 3px rgba(232,146,58,.20);   /* focus glow         */
  --swp-agh: 0 0 20px rgba(232,146,58,.18);    /* ambient glow        */

 /* Warm secondary accent — replaces the old ice-blue for gradients/spec items,
     so nothing in the light theme carries a cool/blue cast */
  --swp-ice: #D9A05C;
  --swp-ibg: rgba(217,160,92,.08);

  /* Semantic */
  --swp-ok:    #3AA8E8;
  --swp-warn:  #E8C83A;
  --swp-err:   #E85858;
  --swp-ok-bg: rgba(58,168,232,.09);

  /* Shadows — directional, layered */
  --swp-s1:  0 2px 6px rgba(0,0,0,.28);
  --swp-s2:  0 6px 20px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.22);
  --swp-s3:  0 16px 48px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.28);
  --swp-s4:  0 28px 72px rgba(0,0,0,.62), 0 6px 18px rgba(0,0,0,.32);

  /* Inset highlights — top-edge light catch */
  --swp-hi:    inset 0 1px 0 rgba(255,255,255,.07);
  --swp-hi2:   inset 0 1px 0 rgba(255,255,255,.12);
  --swp-hi-a:  inset 0 1px 0 rgba(232,146,58,.16);

  /* Radius */
  --swp-r:   10px;   /* fields, inputs, small cards */
  --swp-r2:  16px;   /* primary cards               */
  --swp-r3:  24px;   /* outer wrap                  */

  /* Easing */
  --swp-ease:  cubic-bezier(.22,.68,0,1.2);
  --swp-ease2: cubic-bezier(.16,1,.3,1);

  /* ── Base ── */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--swp-t1);
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
position: relative;
  background: var(--swp-bg);

border: 1px solid var(--swp-b1);
  border-top: 2px solid var(--swp-a);
border-radius: var(--swp-r3);
  box-shadow: var(--swp-s3), 0 1px 0 rgba(255,255,255,.5);
}

/* ── Neutralise host-theme canvas wrapper ── */
.cq-product-canvas {
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Page body background — targets body directly so Blocksy's own
   body background is overridden, not just the inner containers. ── */

/* body background override removed — body keeps theme default */

/* Inner containers inherit from body — no separate rules needed */
body:has(.swp-wrap) .ct-container:has(.swp-wrap),
body:has(.swp-wrap) .ct-container-fluid:has(.swp-wrap) {
  background: transparent !important;
  background-color: transparent !important;
}




/* ── Dark mode background — default when OS is dark and no data-theme is set ── */
@media (prefers-color-scheme: dark) {
  .swp-wrap:not([data-theme]) {
    background: var(--swp-bg);
    --swp-t1:  #D6E8F8;
    --swp-t2:  rgba(196,220,245,.72);
    --swp-t3:  rgba(196,220,245,.45);
    --swp-t4:  rgba(196,220,245,.30);
  }
}

/* ── Fallback for browsers/OS with no color-scheme preference set ── */
   Previously defaulted to dark-mode's blue-tinted text colors even when
   the actual background in use might not be dark — this produced a
   mismatched light-background/dark-text look with a visible blue cast.
   Now defaults to the same warm palette as the light theme, since that's
   a safer, more neutral fallback than assuming dark. */
@media not all and (prefers-color-scheme: light) {
  .swp-wrap:not([data-theme]) {
    background: #EFECE5;
    --swp-bg:   #EFECE5;
    --swp-t1:   #1A1410;
    --swp-t2:   rgba(26,20,16,.70);
    --swp-t3:   rgba(26,20,16,.44);
    --swp-t4:   rgba(26,20,16,.28);
  }
}

/* ── Light mode token override.
   Scoped to .swp-wrap:not([data-theme]) so it only fires when the shortcode
   has NOT explicitly set theme="dark" or theme="light".
   The explicit [data-theme="dark"] and [data-theme="light"] blocks below
   always win because attribute selectors have higher specificity than
   the bare class selector used here. ── */
@media (prefers-color-scheme: light) {
  .swp-wrap:not([data-theme]) {
    --swp-bg:   #EFEDE5;
    --swp-l1:   #FFFFFF;
    --swp-l2:   #E7E4D9;
    --swp-l3:   #DDD9CB;
    --swp-l4:   #CFC9B8;
    --swp-b0:   rgba(28,18,8,.05);
    --swp-b1:   rgba(28,18,8,.10);
    --swp-b2:   rgba(28,18,8,.16);
    --swp-b3:   rgba(28,18,8,.25);
    --swp-t1:   #1A1410;
    --swp-t2:   rgba(26,20,16,.70);
    --swp-t3:   rgba(26,20,16,.44);
    --swp-t4:   rgba(26,20,16,.28);
    --swp-a:    #CC7020;
    --swp-a2:   #E08A3C;
    --swp-a3:   #F0A85C;
    --swp-ad:   #A85510;
    --swp-abg:  rgba(204,112,32,.08);
    --swp-abd:  rgba(204,112,32,.25);
    --swp-agw:  0 0 0 3px rgba(204,112,32,.16);
    --swp-agh:  0 0 20px rgba(204,112,32,.14);
    --swp-s1:   0 2px 6px rgba(28,18,8,.08);
    --swp-s2:   0 6px 20px rgba(28,18,8,.10);
    --swp-s3:   0 14px 40px rgba(28,18,8,.12);
    --swp-s4:   0 24px 60px rgba(28,18,8,.14);
--swp-hi:   inset 0 1px 0 rgba(255,255,255,.80);
    --swp-hi2:  inset 0 1px 0 rgba(255,255,255,.90);
  --swp-hi-a: inset 0 1px 0 rgba(204,112,32,.12);
    background: var(--swp-bg);
  }
}

/* ── Force-override when shortcode sets theme="dark" even on light OS ── */
.swp-wrap[data-theme="dark"] {
  --swp-bg:   #0A0A0F;
  --swp-l1:   #13131C;
  --swp-l2:   #1A1A27;
  --swp-l3:   #222232;
  --swp-l4:   #2A2A3E;
  --swp-b0:   rgba(255,255,255,.06);
  --swp-b1:   rgba(255,255,255,.11);
  --swp-b2:   rgba(255,255,255,.18);
  --swp-b3:   rgba(255,255,255,.28);
 --swp-t1:   #D6E8F8;
  --swp-t2:   rgba(196,220,245,.72);
  --swp-t3:   rgba(196,220,245,.45);
  --swp-t4:   rgba(196,220,245,.30);
  --swp-a:    #E8923A;
  --swp-a2:   #F5B97A;
  --swp-a3:   #FBCF93;
  --swp-ad:   #C4711E;
  --swp-abg:  rgba(232,146,58,.09);
  --swp-abd:  rgba(232,146,58,.28);
  --swp-agw:  0 0 0 3px rgba(232,146,58,.20);
  --swp-agh:  0 0 20px rgba(232,146,58,.18);
  --swp-s1:   0 2px 6px rgba(0,0,0,.28);
  --swp-s2:   0 6px 20px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.22);
  --swp-s3:   0 16px 48px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.28);
  --swp-s4:   0 28px 72px rgba(0,0,0,.62), 0 6px 18px rgba(0,0,0,.32);
--swp-hi:   inset 0 1px 0 rgba(255,255,255,.07);
  --swp-hi2:  inset 0 1px 0 rgba(255,255,255,.12);
  --swp-hi-a: inset 0 1px 0 rgba(232,146,58,.16);
  background: none;
}

/* ── Force-override when shortcode sets theme="light" even on dark OS ── */
.swp-wrap[data-theme="light"] {
  --swp-bg:   #EFEDE5;
  --swp-l1:   #FFFFFF;
  --swp-l2:   #E7E4D9;
  --swp-l3:   #DDD9CB;
  --swp-l4:   #CFC9B8;
  --swp-b0:   rgba(28,18,8,.05);
  --swp-b1:   rgba(28,18,8,.10);
  --swp-b2:   rgba(28,18,8,.16);
  --swp-b3:   rgba(28,18,8,.25);
  --swp-t1:   #1A1410;
  --swp-t2:   rgba(26,20,16,.70);
  --swp-t3:   rgba(26,20,16,.44);
  --swp-t4:   rgba(26,20,16,.28);
  --swp-a:    #CC7020;
  --swp-a2:   #E08A3C;
  --swp-a3:   #F0A85C;
  --swp-ad:   #A85510;
  --swp-abg:  rgba(204,112,32,.08);
  --swp-abd:  rgba(204,112,32,.25);
  --swp-agw:  0 0 0 3px rgba(204,112,32,.16);
  --swp-agh:  0 0 20px rgba(204,112,32,.14);
  --swp-s1:   0 2px 6px rgba(28,18,8,.08);
  --swp-s2:   0 6px 20px rgba(28,18,8,.10);
  --swp-s3:   0 14px 40px rgba(28,18,8,.12);
  --swp-s4:   0 24px 60px rgba(28,18,8,.14);
--swp-hi:   inset 0 1px 0 rgba(255,255,255,.80);
  --swp-hi2:  inset 0 1px 0 rgba(255,255,255,.90);
  --swp-hi-a: inset 0 1px 0 rgba(204,112,32,.12);
  background: none;
}

/* Accent overrides */
.swp-wrap[data-accent="aurora"] {
  --swp-a:   #2FA8E8; --swp-a2: #7DCCF2; --swp-a3: #ACE0F7;
  --swp-ad:  #1D84C4; --swp-abg: rgba(47,168,232,.09); --swp-abd: rgba(47,168,232,.28);
  --swp-agw: 0 0 0 3px rgba(47,168,232,.20); --swp-agh: 0 0 20px rgba(47,168,232,.15);
}
.swp-wrap[data-accent="violet"] {
  --swp-a:   #9B72E8; --swp-a2: #BFA0F5; --swp-a3: #D4BFFC;
  --swp-ad:  #7A52C8; --swp-abg: rgba(155,114,232,.09); --swp-abd: rgba(155,114,232,.28);
  --swp-agw: 0 0 0 3px rgba(155,114,232,.20); --swp-agh: 0 0 20px rgba(155,114,232,.15);
}

/* ── Reset ── */
.swp-wrap *, .swp-wrap *::before, .swp-wrap *::after { box-sizing: border-box; }
.swp-wrap a   { color: inherit; text-decoration: none; }
.swp-wrap p   { margin: 0; }
.swp-wrap ul  { margin: 0; padding: 0; list-style: none; }
.swp-wrap h1, .swp-wrap h2, .swp-wrap h3 { margin: 0; }

/* Bleed prevention — beats Blocksy on both color AND background */
.swp-wrap, .swp-wrap p, .swp-wrap span, .swp-wrap div,
.swp-wrap li, .swp-wrap label, .swp-wrap strong,
.swp-wrap h1, .swp-wrap h2, .swp-wrap h3,
.swp-wrap button:not(.wc-block-components-button):not(.woocommerce-button) { color: var(--swp-t1) !important; }
.swp-wrap input, .swp-wrap textarea, .swp-wrap select { color: var(--swp-t1) !important; }
.swp-wrap .swp-muted { color: var(--swp-t3) !important; }

.swp-wrap .woocommerce,
.swp-wrap .woocommerce-page,
.swp-wrap form.cart {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Force Blocksy off all background surfaces inside the wrap */
.swp-wrap .swp-panel,
.swp-wrap .swp-gallery__main,
.swp-wrap .swp-card,
.swp-wrap .swp-review,
.swp-wrap .swp-commentCard,
.swp-wrap .swp-field,
.swp-wrap .swp-accordion,
.swp-wrap .swp-shipCard,
.swp-wrap .swp-commentForm,
.swp-wrap .swp-trustCard,
.swp-wrap .swp-priceRow { background-color: unset !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   0b. UTILITY
   ───────────────────────────────────────────────────────────────────────────── */

.swp-small    { font-size: 13px; }
.swp-tiny     { font-size: 12px; }
.swp-u-nowrap { white-space: nowrap; }
.swp-mono     { font-family: 'JetBrains Mono', monospace; }

.swp-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--swp-b2);
  transition: text-decoration-color .15s ease, color .15s ease;
}
.swp-link:hover { text-decoration-color: var(--swp-a); color: var(--swp-a2); }





.swp-notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border-radius: var(--swp-r);
  border: 1px solid var(--swp-abd); background: var(--swp-abg);
  font-size: 14px; font-weight: 500;
}
.swp-notice--error {
  border-color: rgba(232,88,88,.28); background: rgba(232,88,88,.07); color: var(--swp-err);
}
.swp-notice--error i { margin-top: 2px; flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────────────────────
   1.  HERO
   ───────────────────────────────────────────────────────────────────────────── */

.swp-hero { padding: 28px 28px 24px; position: relative; }

.swp-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: start;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2.  GALLERY
   ───────────────────────────────────────────────────────────────────────────── */

.swp-gallery { display: grid; gap: 16px; }

/* L1 card — same depth plane as the purchase panel */
.swp-gallery__main {
  padding: 14px;
  border-radius: var(--swp-r2);
  border: 1px solid var(--swp-b1);
  border-top-color: var(--swp-b2);
  background: var(--swp-l1);
  box-shadow: var(--swp-s2), var(--swp-hi);
  position: relative;
  transition: border-color .22s var(--swp-ease2), box-shadow .22s var(--swp-ease2);
}
.swp-gallery__main:hover {
  border-color: var(--swp-abd);
  border-top-color: var(--swp-a);
  box-shadow: var(--swp-s3), var(--swp-hi-a), 0 0 0 1px rgba(232,146,58,.04);
}

/* ── Signature: full gradient-border image frame ──
   A 1.5px ring sweeps amber (top-left) → ice (mid) → transparent (bottom-right).
   The ring glows on hover via ::before opacity and a subtle outer shadow.
   ::after adds a film-grain texture overlay on hover for depth. */
.swp-mediaFrame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  isolation: isolate;
  background: var(--swp-l2);
}

.swp-mediaFrame::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from 135deg,
    var(--swp-a3)  0deg,
    var(--swp-a)   60deg,
    var(--swp-ice) 120deg,
    rgba(217,160,92,.15) 180deg,
    transparent    240deg,
    transparent    300deg,
    var(--swp-a3)  360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: .40;
  transition: opacity .38s var(--swp-ease2);
}
.swp-mediaFrame:hover::before { opacity: 1; }

/* Firefox fallback */
@supports not (mask-composite: exclude) {
  .swp-mediaFrame::before {
    padding: 0; background: transparent;
    border: 1.5px solid var(--swp-a); opacity: .35;
  }
  .swp-mediaFrame:hover::before { opacity: .75; }
}

/* Grain texture on hover */
.swp-mediaFrame::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none; z-index: 3;
  border-radius: inherit; opacity: 0;
  transition: opacity .3s ease;
}
.swp-mediaFrame:hover::after { opacity: 1; }

.swp-mediaFrame__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 12.5px;
  transform: scale(1.01);
  transition: transform .50s var(--swp-ease2), filter .50s ease;
}
.swp-mediaFrame:hover .swp-mediaFrame__img {
  transform: scale(1.055);
  filter: saturate(1.08) brightness(1.02);
}

.swp-mediaFrame__placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--swp-t3); font-size: 48px;
  background: var(--swp-l2); border-radius: 12.5px;
}

.swp-mediaFrame__shine {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 58% 38% at 22% 14%, rgba(255,255,255,.08), transparent 58%);
  pointer-events: none; z-index: 1; border-radius: inherit;
}

.swp-mediaFrame--modal { aspect-ratio: 16 / 9; border-radius: 10px; }
.swp-mediaFrame--modal::before { border-radius: 10px; }
.swp-mediaFrame--modal .swp-mediaFrame__img { border-radius: 8.5px; }

/* Corner tag */
.swp-cornerTag {
  position: absolute; left: 12px; top: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,10,15,.70);
  backdrop-filter: blur(14px) saturate(160%);
  font-weight: 600; font-size: 11.5px; letter-spacing: .02em;
}
.swp-cornerTag i { color: var(--swp-a); font-size: 11px; }
@media (prefers-color-scheme: light) {
  .swp-cornerTag {
    background: rgba(248,245,240,.82); border-color: var(--swp-b2);
  }
}
/* Zoom button */
.swp-zoomBtn {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,10,15,.70);
  backdrop-filter: blur(14px);
  color: var(--swp-t1); cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  transition: transform .18s var(--swp-ease), border-color .18s ease, background .18s ease;
}
.swp-zoomBtn i { font-size: 12px; color: var(--swp-a2); }
.swp-zoomBtn:hover {
  transform: translateY(-1px);
  border-color: var(--swp-abd); background: rgba(10,10,15,.86);
}
.swp-zoomBtn:active { transform: scale(.97); }
@media (prefers-color-scheme: light) {
  .swp-zoomBtn {
    background: rgba(248,245,240,.82); border-color: var(--swp-b2);
  }
}

/* Thumbnail strip */
.swp-thumbs {
  margin-top: 10px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
}
.swp-thumb {
  border: 1.5px solid var(--swp-b0);
  background: var(--swp-l2);
  border-radius: 9px; cursor: pointer; padding: 5px;
  transition: border-color .18s ease, transform .18s var(--swp-ease), box-shadow .18s ease;
}
.swp-thumb:hover { border-color: var(--swp-b2); transform: translateY(-1px); box-shadow: var(--swp-s1); }
.swp-thumb.is-active { border-color: var(--swp-a); box-shadow: var(--swp-agw); }
.swp-thumb__frame {
  display: block; border-radius: 5px; overflow: hidden; aspect-ratio: 1;
  background: var(--swp-l3);
}
.swp-thumb__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .32s ease;
}
.swp-thumb:hover .swp-thumb__frame img { transform: scale(1.09); }

/* Gallery meta */
.swp-gallery__meta { display: grid; gap: 11px; }
.swp-metaRow       { display: flex; flex-wrap: wrap; gap: 7px; }

.swp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 99px;
  border: 1px solid var(--swp-b1); background: var(--swp-l2);
  font-weight: 600; font-size: 12px; letter-spacing: .01em; color: var(--swp-t2);
  transition: border-color .15s ease, background .15s ease;
}
.swp-chip i { color: var(--swp-a); font-size: 11px; }
.swp-chip:hover { border-color: var(--swp-b2); background: var(--swp-l3); }

.swp-trustCard {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: var(--swp-r);
  border: 1px solid var(--swp-b1); background: var(--swp-l2);
  box-shadow: var(--swp-hi);
}
.swp-trustCard p { margin: 3px 0 0; font-size: 12.5px; color: var(--swp-t3); }
.swp-trustCard__icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--swp-b1); background: var(--swp-abg);
}
.swp-trustCard__icon i { color: var(--swp-a); font-size: 13px; }


/* ─────────────────────────────────────────────────────────────────────────────
   3.  PURCHASE PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.swp-panel {
  padding: 22px;
  border-radius: var(--swp-r2);
  border: 1px solid var(--swp-b1);
  border-top: 1px solid var(--swp-abd);
  background: var(--swp-l1);
  box-shadow: var(--swp-s3), var(--swp-hi-a);
  display: grid; gap: 18px; align-content: start;
  position: relative;
  transition: box-shadow .22s var(--swp-ease2), border-color .22s ease;
}
.swp-panel:hover {
  border-top-color: var(--swp-a);
  box-shadow: var(--swp-s4), var(--swp-hi-a), var(--swp-agh);
}

/* Kicker */
.swp-kicker { display: flex; align-items: center; gap: 8px; }
.swp-kicker__dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--swp-a);
  flex-shrink: 0;
  animation: swp-pulse 2.6s var(--swp-ease2) infinite;
}
@keyframes swp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,146,58,.45); }
  50%       { box-shadow: 0 0 0 5px rgba(232,146,58,.00); }
}

/* Title */
.swp-title {
  font-size: clamp(21px, 2.5vw, 33px);
  font-weight: 800; line-height: 1.06; letter-spacing: -.045em;
}
.swp-title__sub {
  display: block; font-size: .57em; font-weight: 500;
  letter-spacing: .01em; color: var(--swp-t3); margin-top: 5px;
}

/* Rating */
.swp-ratingRow { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.swp-wrap .stars, .swp-stars { display: inline-flex; gap: 3px; color: var(--swp-a); }
.swp-wrap .stars.small { font-size: 11px; }
.swp-sep { color: var(--swp-t4); }

.swp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--swp-b1); background: var(--swp-l2);
  font-weight: 600; font-size: 11.5px; letter-spacing: .01em;
}
.swp-pill--ok  { border-color: rgba(80,200,122,.30); background: var(--swp-ok-bg); }
.swp-pill--ok  i { color: var(--swp-ok); }
.swp-pill--warn i { color: var(--swp-warn); }
.swp-pill--err  i { color: var(--swp-err); }

.swp-desc { font-size: 14px; line-height: 1.72; color: var(--swp-t2); }
.swp-desc p + p { margin-top: 8px; }

/* ── Price block — "live ticker" treatment ── */
.swp-priceRow {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  border-radius: var(--swp-r);
  border: 1px solid var(--swp-abd);
  border-top: 1px solid var(--swp-a);
  background: linear-gradient(150deg, rgba(232,146,58,.10) 0%, rgba(232,146,58,.04) 60%, transparent 100%);
  box-shadow: var(--swp-hi-a), var(--swp-s1), 0 0 0 1px rgba(232,146,58,.05);
}
/* Shimmer sweep */
.swp-priceRow::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.04) 40%,
    rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.04) 60%,
    transparent
  );
  animation: swp-shimmer 4s var(--swp-ease2) infinite;
  pointer-events: none;
}
@keyframes swp-shimmer {
  0%   { left: -80%; }
  100% { left: 130%; }
}
.swp-priceBlock { display: grid; gap: 3px; position: relative; }

.swp-price {
  font-size: 36px; font-weight: 800;
  letter-spacing: -.055em; line-height: 1;
  font-family: 'JetBrains Mono', monospace;
  color: var(--swp-t1);
}
.swp-price del {
  font-size: .52em; font-weight: 500;
  color: var(--swp-t3); text-decoration: line-through;
  margin-right: 5px; vertical-align: middle;
}
.swp-price ins { text-decoration: none; }

.swp-miniSelect { display: grid; gap: 5px; min-width: 118px; }
.swp-miniSelect--wide { min-width: 100%; }
.swp-miniSelect__label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--swp-t3);
}
.swp-miniSelect__select {
  height: 40px; border-radius: var(--swp-r);
  border: 1px solid var(--swp-b1); background: var(--swp-l2);
  color: var(--swp-t1); padding: 0 12px; outline: none;
  font-family: inherit; font-size: 13px; font-weight: 500; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none; -webkit-appearance: none;
}
.swp-miniSelect__select:hover { border-color: var(--swp-b2); }
.swp-miniSelect__select:focus { border-color: var(--swp-abd); box-shadow: var(--swp-agw); }
.swp-miniSelect__select option { background: var(--swp-l1); color: var(--swp-t1); }


/* ─────────────────────────────────────────────────────────────────────────────
   4.  VARIANTS
   ───────────────────────────────────────────────────────────────────────────── */

.swp-variants { display: grid; gap: 12px; }
.swp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.swp-field {
  padding: 13px;
  border-radius: var(--swp-r);
  border: 1px solid var(--swp-b1); border-top-color: var(--swp-b2);
  background: var(--swp-l2);
  box-shadow: var(--swp-hi), inset 0 -1px 0 rgba(0,0,0,.12);
}
.swp-field__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 11px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--swp-t3);
}
.swp-variantLabel {
  font-weight: 600; font-size: 11.5px;
  color: var(--swp-a2); letter-spacing: 0; text-transform: none;
}

/* Swatches */
.swp-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swp-swatch {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1.5px solid var(--swp-b1); background: var(--swp-l3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, transform .18s var(--swp-ease), box-shadow .18s ease;
}
.swp-swatch:hover { transform: translateY(-2px); border-color: var(--swp-b2); box-shadow: var(--swp-s1); }
.swp-swatch.is-active { border-color: var(--swp-a); box-shadow: var(--swp-agw); }
.swp-swatch__dot {
  width: 17px; height: 17px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.16);
}
@media (prefers-color-scheme: light) {
  .swp-swatch__dot { border-color: rgba(0,0,0,.10); }
}
.swp-swatch__dot--graphite { background: radial-gradient(circle at 35% 30%, #4A5568, #0F1218); }
/*.swp-swatch__dot--silver   { background: radial-gradient(circle at 35% 30%, #E8EEF4, #8A9BB0); }*/
.swp-swatch__dot--sand     { background: radial-gradient(circle at 35% 30%, #F0D8B0, #A07840); }

/* Seg control */
.swp-seg {
  display: flex; gap: 3px; padding: 3px;
  background: var(--swp-l3); border: 1px solid var(--swp-b1);
  border-radius: 10px; flex-wrap: wrap;
}
.swp-seg__btn {
  flex: 1; min-width: 48px; height: 32px;
  border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--swp-t3);
  font-family: inherit; font-weight: 600; font-size: 12px; letter-spacing: .01em;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.swp-seg__btn:hover { color: var(--swp-t2); }
.swp-seg__btn.is-active {
  color: var(--swp-t1); background: var(--swp-l1);
  border-color: var(--swp-b2); box-shadow: var(--swp-s1), var(--swp-hi);
}
@media (prefers-color-scheme: light) {
  .swp-seg__btn.is-active {
    background: var(--swp-bg); border-color: var(--swp-b2);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   5.  QUANTITY + BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

.swp-qtyRow { display: grid; grid-template-columns: 136px 1fr 1fr; gap: 9px; }

.swp-qty {
  display: flex; align-items: center;
  border: 1px solid var(--swp-b1); border-radius: var(--swp-r);
  background: var(--swp-l2); overflow: hidden;
  box-shadow: var(--swp-hi);
}
.swp-qty__btn {
  width: 40px; height: 44px; border: none;
  background: transparent; color: var(--swp-t2); cursor: pointer; font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.swp-qty__btn:hover  { background: var(--swp-l3); color: var(--swp-a2); }
.swp-qty__btn:active { background: var(--swp-abg); }
.swp-qty__input {
  flex: 1; height: 44px; border: none; outline: none;
  background: transparent; color: var(--swp-t1); text-align: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px;
}
.swp-qty__input::-webkit-inner-spin-button,
.swp-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Base button */
.swp-btn {
  height: 44px; border-radius: var(--swp-r);
  border: 1px solid var(--swp-b1); background: var(--swp-l2);
  color: var(--swp-t1); font-family: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 16px;
  text-decoration: none; white-space: nowrap; letter-spacing: .01em;
  transition: transform .18s var(--swp-ease), border-color .18s ease,
              background .18s ease, box-shadow .18s ease;
}
.swp-btn:hover {
  transform: translateY(-1px);
  border-color: var(--swp-b2); box-shadow: var(--swp-s2);
  background: var(--swp-l3);
}
.swp-btn:active { transform: scale(.97); }
.swp-btn:disabled, .swp-btn[disabled] {
  opacity: .35; cursor: not-allowed; pointer-events: none; transform: none;
}

/* Primary — solid amber fill with shimmer on hover */
.swp-btn--primary {
  position: relative; overflow: hidden;
  border-color: var(--swp-a);
  background: linear-gradient(160deg, var(--swp-a2) 0%, var(--swp-a) 40%, var(--swp-ad) 100%);
  color: #fff; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 2px 10px rgba(232,146,58,.28), var(--swp-hi2);
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.swp-btn--primary::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.18) 45%,
    rgba(255,255,255,.22) 50%, rgba(255,255,255,.18) 55%, transparent
  );
  transition: left .45s var(--swp-ease2);
  pointer-events: none;
}
.swp-btn--primary:hover {
  box-shadow: 0 5px 22px rgba(232,146,58,.42), var(--swp-hi2);
  background: linear-gradient(160deg, var(--swp-a3) 0%, var(--swp-a2) 40%, var(--swp-a) 100%);
  border-color: var(--swp-a2); transform: translateY(-2px);
}
.swp-btn--primary:hover::before { left: 120%; }
.swp-btn--primary:active { transform: translateY(0) scale(.98); }
@media (prefers-color-scheme: light) {
  .swp-btn--primary { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
}

.swp-btn--ghost  { background: transparent; border-color: var(--swp-b1); color: var(--swp-t2); }
.swp-btn--ghost:hover { background: var(--swp-l2); color: var(--swp-t1); }
.swp-btn--soft   { background: var(--swp-l2); }
.swp-btn--sm { height: 34px; border-radius: 8px; font-size: 12px; padding: 0 11px; }

.swp-iconBtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 35px; height: 35px; border-radius: 9px;
  border: 1px solid var(--swp-b1); background: var(--swp-l2);
  color: var(--swp-t2); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.swp-iconBtn:hover {
  border-color: var(--swp-b2); color: var(--swp-t1); background: var(--swp-l3);
}
.swp-iconBtn:active { transform: scale(.95); }


/* ─────────────────────────────────────────────────────────────────────────────
   6.  TEXT INPUT
   ───────────────────────────────────────────────────────────────────────────── */

.swp-input {
  width: 100%; height: 44px;
  border-radius: var(--swp-r); border: 1px solid var(--swp-b1);
  background: var(--swp-l2); color: var(--swp-t1);
  font-family: inherit; font-size: 14px; padding: 0 14px; outline: none;
  box-shadow: var(--swp-hi);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.swp-input::placeholder { color: var(--swp-t4); }
.swp-input:focus { border-color: var(--swp-abd); box-shadow: var(--swp-agw), var(--swp-hi); }
.swp-input--area {
  height: auto; padding: 12px 14px;
  resize: vertical; min-height: 78px; line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7.  SHIP CARD
   ───────────────────────────────────────────────────────────────────────────── */

.swp-shipCard {
  padding: 13px; border-radius: var(--swp-r);
  border: 1px solid var(--swp-b1); border-top-color: var(--swp-b2);
  background: var(--swp-l2); display: grid; gap: 11px;
  box-shadow: var(--swp-hi), var(--swp-s1);
}
.swp-shipCard__left { display: flex; align-items: flex-start; gap: 11px; }
.swp-shipCard__left strong { font-size: 13px; font-weight: 600; display: block; }
.swp-shipCard__left p { margin: 3px 0 0; font-size: 12.5px; color: var(--swp-t3); }
.swp-shipCard__icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--swp-b1); background: var(--swp-abg);
}
.swp-shipCard__icon i { color: var(--swp-a); font-size: 14px; }
.swp-shipCard__form { display: grid; grid-template-columns: 1fr 118px; gap: 7px; }
.swp-shipCard__result { min-height: 18px; font-size: 13px; font-weight: 600; color: var(--swp-t2); }


/* ─────────────────────────────────────────────────────────────────────────────
   8.  ACCORDION
   ───────────────────────────────────────────────────────────────────────────── */

.swp-accordion {
  border-radius: var(--swp-r); overflow: hidden;
  border: 1px solid var(--swp-b1); border-top-color: var(--swp-b2);
  background: var(--swp-l2);
  box-shadow: var(--swp-hi), var(--swp-s1);
}
.swp-acc {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 11px; padding: 13px 15px;
  border: none; border-bottom: 1px solid var(--swp-b0);
  cursor: pointer; color: var(--swp-t1); background: transparent;
  font-family: inherit; font-weight: 600; font-size: 13.5px;
  transition: background .14s ease; text-align: left;
}
.swp-acc:last-of-type { border-bottom: none; }
.swp-acc span { display: flex; align-items: center; gap: 9px; }
.swp-acc span i { color: var(--swp-a); font-size: 13px; }
.swp-acc:hover { background: var(--swp-l3); }
.swp-acc .fa-chevron-down { transition: transform .22s var(--swp-ease2); opacity: .55; font-size: 11px; }
.swp-acc.is-open .fa-chevron-down { transform: rotate(180deg); opacity: 1; }

.swp-accPanel {
  padding: 0 15px 13px; color: var(--swp-t2); display: none;
  font-size: 13.5px; line-height: 1.7; border-top: 1px solid var(--swp-b0);
}
.swp-accContent { padding-top: 10px; }
.swp-accContent p:first-child { margin-top: 0; }

.swp-bullets { margin: 8px 0 0; padding-left: 0; list-style: none; }
.swp-bullets li {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0; font-size: 13.5px; color: var(--swp-t2);
  border-bottom: 1px solid var(--swp-b0);
}
.swp-bullets li:last-child { border-bottom: none; }
.swp-bullets li::before { content: '›'; color: var(--swp-a); font-size: 15px; line-height: 1.4; flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────────────────────
   9.  SECTIONS
   ───────────────────────────────────────────────────────────────────────────── */

.swp-section { padding: 30px 28px; border-top: 1px solid var(--swp-b0); }

.swp-sectionHead {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 12px; margin-bottom: 20px;
}
.swp-sectionHead h2 {
  font-size: 19px; font-weight: 800; letter-spacing: -.03em;
  display: flex; align-items: center; gap: 11px;
}
/* Amber accent bar — ties to the card top-border motif */
.swp-sectionHead h2::before {
  content: ''; display: block; width: 3px; height: 18px;
  background: linear-gradient(180deg, var(--swp-a2), var(--swp-ad));
  border-radius: 2px; flex-shrink: 0;
}
.swp-sectionHead p { margin: 0; font-size: 13px; color: var(--swp-t3); }

.swp-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 99px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--swp-b1); background: var(--swp-l2); color: var(--swp-t3);
}
.swp-badge--accent {
  background: var(--swp-abg); border-color: var(--swp-abd); color: var(--swp-a2);
}
.swp-badge--neutral { background: var(--swp-l2); }
.swp-badge--sm { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

.swp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.swp-pillBtn {
  height: 35px; padding: 0 13px; border-radius: 99px;
  border: 1px solid var(--swp-b1); background: var(--swp-l2);
  color: var(--swp-t3); font-family: inherit; font-weight: 600; font-size: 12px;
  letter-spacing: .01em; cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.swp-pillBtn i { color: var(--swp-a); font-size: 11px; }
.swp-pillBtn:hover { border-color: var(--swp-b2); color: var(--swp-t2); background: var(--swp-l3); }
.swp-pillBtn.is-active {
  border-color: var(--swp-abd); background: var(--swp-abg);
  color: var(--swp-a2); box-shadow: var(--swp-agw);
}
@media (prefers-color-scheme: light) {
  .swp-pillBtn.is-active { color: var(--swp-a); }
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. SPECS + CARDS
   ───────────────────────────────────────────────────────────────────────────── */

.swp-specGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 13px; }

/* L1 card — matches panel + gallery depth */
.swp-card {
  padding: 17px;
  border-radius: var(--swp-r2);
  border: 1px solid var(--swp-b1); border-top-color: var(--swp-b2);
  background: var(--swp-l1);
  box-shadow: var(--swp-s2), var(--swp-hi);
  transition: border-color .22s var(--swp-ease2), box-shadow .22s var(--swp-ease2), transform .22s var(--swp-ease2);
}
.swp-card:hover {
  border-color: var(--swp-b2); border-top-color: var(--swp-abd);
  box-shadow: var(--swp-s3), var(--swp-hi-a);
  transform: translateY(-2px);
}
.swp-card--desc { grid-column: 1 / -1; }

.swp-card__title {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 12.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--swp-t3);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--swp-b0);
}
.swp-card__title i { color: var(--swp-a); font-size: 12px; }

.swp-specList { display: grid; gap: 0; }
.swp-spec {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--swp-b0); font-size: 13px;
}
.swp-spec:last-child { border-bottom: none; }
.swp-spec span:first-child { color: var(--swp-t3); font-size: 12.5px; }
.swp-spec strong {
  font-weight: 600; font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace; color: var(--swp-a2);
}

.swp-tinyNote {
  margin-top: 11px; padding: 9px 13px; border-radius: 8px;
  border: 1px dashed var(--swp-b1); color: var(--swp-t3); font-size: 12px;
}

.swp-descBody { font-size: 14px; line-height: 1.75; color: var(--swp-t2); }
.swp-descBody p { margin: 0 0 10px; }
.swp-descBody h1, .swp-descBody h2, .swp-descBody h3 { color: var(--swp-t1); letter-spacing: -.02em; }
.swp-descBody ul, .swp-descBody ol { padding-left: 20px; line-height: 1.8; }
.swp-descBody li { margin-bottom: 6px; }


/* ─────────────────────────────────────────────────────────────────────────────
   11. REVIEWS
   ───────────────────────────────────────────────────────────────────────────── */

.swp-reviewBar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; margin-bottom: 16px;
}
.swp-reviewGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }

.swp-review {
  padding: 15px;
  border-radius: var(--swp-r2);
  border: 1px solid var(--swp-b1); border-top-color: var(--swp-b2);
  background: var(--swp-l1);
  box-shadow: var(--swp-s1), var(--swp-hi);
  transition: border-color .20s var(--swp-ease2), box-shadow .20s var(--swp-ease2), transform .20s var(--swp-ease2);
}
.swp-review:hover {
  border-color: var(--swp-abd); border-top-color: var(--swp-a);
  box-shadow: var(--swp-s2), var(--swp-hi-a);
  transform: translateY(-3px);
}
.swp-review__top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.swp-review__top > div:nth-child(2) { flex: 1; }

.swp-avatar {
  flex-shrink: 0; width: 37px; height: 37px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid var(--swp-b1);
  background: linear-gradient(135deg, var(--swp-abg), var(--swp-l3));
  font-weight: 700; font-size: 13px; color: var(--swp-a2);
}
.swp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swp-avatar--sm { width: 30px; height: 30px; border-radius: 7px; font-size: 11px; }

.swp-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--swp-ok);
}
.swp-verified i { font-size: 10px; }

.swp-emptyState {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  padding: 48px 20px; border: 1px dashed var(--swp-b1);
  border-radius: var(--swp-r2); color: var(--swp-t3); text-align: center;
}
.swp-emptyState i { font-size: 28px; opacity: .45; color: var(--swp-a); }
.swp-emptyState p { margin: 0; font-size: 14px; }


/* ─────────────────────────────────────────────────────────────────────────────
   12. SOCIAL COMMENTS
   ───────────────────────────────────────────────────────────────────────────── */

.swp-commentForm {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px;
  padding: 14px; border-radius: var(--swp-r);
  border: 1px solid var(--swp-b1); background: var(--swp-l2);
  box-shadow: var(--swp-hi);
}
.swp-commentForm__inner { flex: 1; display: grid; gap: 9px; }
.swp-commentForm__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.swp-charCount { font-size: 11px; color: var(--swp-t4); }

.swp-loginPrompt {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  border-radius: var(--swp-r); border: 1px dashed var(--swp-b1);
  color: var(--swp-t3); margin-bottom: 18px; font-size: 13.5px;
}
.swp-loginPrompt i { color: var(--swp-a); font-size: 15px; }

.swp-commentFeed { display: grid; gap: 9px; }

.swp-commentCard {
  display: flex; gap: 12px; padding: 13px 15px;
  border-radius: var(--swp-r);
  border: 1px solid var(--swp-b1); border-top-color: var(--swp-b2);
  background: var(--swp-l1);
  box-shadow: var(--swp-hi), var(--swp-s1);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s var(--swp-ease);
}
.swp-commentCard:hover {
  border-color: var(--swp-b2);
  box-shadow: var(--swp-s2), var(--swp-hi);
  transform: translateY(-1px);
}

.swp-commentCard[data-platform="facebook"]  { border-left: 2px solid #1877F2; }
.swp-commentCard[data-platform="instagram"] { border-left: 2px solid #E1306C; }
.swp-commentCard[data-platform="native"] {
  border-left: 2px solid var(--swp-a);
  box-shadow: var(--swp-hi), var(--swp-s1), -4px 0 14px rgba(232,146,58,.10);
}
.swp-commentCard[data-platform="facebook"]  .swp-commentCard__platform i { color: #1877F2; }
.swp-commentCard[data-platform="instagram"] .swp-commentCard__platform i { color: #E1306C; }
.swp-commentCard[data-platform="native"]    .swp-commentCard__platform i { color: var(--swp-a); }

.swp-commentCard__avatar {
  flex-shrink: 0; width: 35px; height: 35px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid var(--swp-b1);
  background: linear-gradient(135deg, var(--swp-abg), var(--swp-l3));
  font-weight: 700; font-size: 12px; color: var(--swp-a2);
}
.swp-commentCard__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swp-commentCard__body { flex: 1; min-width: 0; }
.swp-commentCard__head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 7px; margin-bottom: 5px; font-size: 12.5px;
}
.swp-commentCard__head strong { font-weight: 600; }
.swp-commentCard__platform i  { font-size: 12px; }
.swp-commentCard__ext { margin-left: auto; font-size: 11px; color: var(--swp-t4); transition: color .14s ease; }
.swp-commentCard__ext:hover { color: var(--swp-t2); }
.swp-commentCard__text {
  margin: 0 0 7px; font-size: 13.5px; line-height: 1.65; color: var(--swp-t2); word-break: break-word;
}
.swp-commentCard__text:last-child { margin-bottom: 0; }
.swp-commentCard__foot { margin-top: 7px; display: flex; align-items: center; gap: 7px; }

.swp-likeBtn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 27px; padding: 0 10px; border-radius: 99px;
  border: 1px solid var(--swp-b1); background: transparent;
  color: var(--swp-t3); font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.swp-likeBtn:hover { border-color: rgba(232,88,88,.38); color: var(--swp-t2); }
.swp-likeBtn.is-liked {
  color: var(--swp-err); border-color: rgba(232,88,88,.38); background: rgba(232,88,88,.07);
}
.swp-likeBtn.is-liked i { color: var(--swp-err); }
.swp-likeBtn:disabled { opacity: .35; cursor: not-allowed; }
.swp-heartStatic { color: var(--swp-err); font-size: 11px; }
.swp-loadMoreWrap { display: flex; justify-content: center; padding: 20px 0 4px; }


/* ─────────────────────────────────────────────────────────────────────────────
   13. FAQ
   ───────────────────────────────────────────────────────────────────────────── */

.swp-faqGrid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 13px; align-items: start; }
.swp-faqGrid .swp-card { padding: 0; overflow: hidden; }
.swp-faqGrid .swp-acc  { border-radius: 0; }

.swp-promoCard {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  border: 2px solid var(--swp-abd) !important;
  border-top: 2px solid var(--swp-a) !important;
  padding: 22px !important;
  box-shadow: var(--swp-s2), var(--swp-hi-a), 0 0 0 1px rgba(232,146,58,.06) !important;
}
.swp-promoCard__bg {
  position: absolute; inset: -18px; pointer-events: none;
  background:
    radial-gradient(ellipse 290px 190px at 18% 20%, rgba(232,146,58,.11), transparent 58%),
    radial-gradient(ellipse 260px 190px at 82% 80%, rgba(136,187,221,.07), transparent 58%);
}
.swp-promoCard h3  { font-size: 17px; font-weight: 700; letter-spacing: -.02em; position: relative; }
.swp-promoCard > p { font-size: 14px; color: var(--swp-t2); position: relative; }
.swp-promoRow      { display: flex; flex-wrap: wrap; gap: 7px; position: relative; margin-top: 4px; }
.swp-promoCard .swp-btn { position: relative; align-self: start; }


/* ─────────────────────────────────────────────────────────────────────────────
   14. MODAL
   ───────────────────────────────────────────────────────────────────────────── */

.swp-modal { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.swp-modal.is-open { pointer-events: auto; }
.swp-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.68); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .22s ease;
}
.swp-modal.is-open .swp-modal__backdrop { opacity: 1; }

.swp-modal__panel {
  position: absolute; left: 50%; top: 56px;
  transform: translateX(-50%) translateY(14px);
  width: min(900px, calc(100% - 24px));
  border-radius: var(--swp-r2);
  border: 1px solid var(--swp-b2); border-top-color: var(--swp-b3);
  background: rgba(12,12,18,.90);
  backdrop-filter: blur(26px) saturate(160%);
  box-shadow: var(--swp-s4), var(--swp-hi2);
  opacity: 0;
  transition: transform .26s var(--swp-ease2), opacity .26s ease;
  overflow: hidden;
}
@media (prefers-color-scheme: light) {
  .swp-modal__panel {
    background: rgba(248,245,240,.94); border-color: var(--swp-b2);
  }
}
.swp-modal.is-open .swp-modal__panel { opacity: 1; transform: translateX(-50%) translateY(0); }
.swp-modal__top {
  padding: 13px 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--swp-b0); font-size: 13.5px; font-weight: 600;
}
.swp-modal__media { padding: 14px; }
.swp-modal__hint  { padding: 0 14px 13px; color: var(--swp-t3); font-size: 12.5px; }


/* ─────────────────────────────────────────────────────────────────────────────
   15. TOAST
   ───────────────────────────────────────────────────────────────────────────── */

.swp-toast { position: fixed; right: 18px; bottom: 18px; z-index: 9100; display: grid; gap: 8px; pointer-events: none; }
.swp-toast__item {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 16px; border-radius: 15px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(20,20,30,.93); backdrop-filter: blur(22px);
  box-shadow: 0 8px 32px rgba(0,0,0,.50), var(--swp-hi);
  min-width: 238px; max-width: 298px;
  animation: swp-pop .24s var(--swp-ease2);
}
.swp-toast__item i      { color: var(--swp-a); margin-top: 1px; flex-shrink: 0; }
.swp-toast__item strong { display: block; font-size: 13.5px; font-weight: 600; color: #F0EDE8; }
.swp-toast__item .swp-muted { font-size: 12px; color: rgba(240,237,232,.45); }

@keyframes swp-pop {
  from { transform: translateY(10px) scale(.95); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .swp-hero__grid     { grid-template-columns: 1fr; }
  .swp-reviewGrid     { grid-template-columns: 1fr 1fr; }
  .swp-specGrid       { grid-template-columns: 1fr; }
  .swp-faqGrid        { grid-template-columns: 1fr; }
  .swp-qtyRow         { grid-template-columns: 1fr 1fr; }
  .swp-shipCard__form { grid-template-columns: 1fr; }
  .swp-thumbs         { grid-template-columns: repeat(4, 1fr); }
  .swp-grid2          { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .swp-wrap { border-radius: 18px; }
  .swp-hero    { padding: 16px 14px; }
  .swp-section { padding: 24px 14px; }

  .swp-reviewGrid        { grid-template-columns: 1fr; }
  .swp-qtyRow            { grid-template-columns: 1fr; }
  .swp-grid2             { grid-template-columns: 1fr; }
  .swp-thumbs            { grid-template-columns: repeat(4, 1fr); }
  .swp-sectionHead       { flex-direction: column; align-items: flex-start; gap: 9px; }
  .swp-commentCard__head { gap: 5px; }

  .swp-panel         { padding: 16px; }
  .swp-gallery__main { padding: 11px; }
  .swp-card          { padding: 14px; border-radius: var(--swp-r); }

  .swp-shipCard,
  .swp-commentForm,
  .swp-commentCard { padding: 11px; }

  .swp-miniSelect  { min-width: 100%; }
  .swp-priceRow    { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 560px) {
  .swp-wrap    { border-radius: 13px; }
  .swp-hero    { padding: 12px 10px; }
  .swp-section { padding: 20px 10px; }
  .swp-thumbs  { grid-template-columns: repeat(3, 1fr); }
  .swp-grid2   { grid-template-columns: 1fr; }
  .swp-qtyRow  { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .swp-wrap *,
  .swp-wrap *::before,
  .swp-wrap *::after { transition: none !important; animation: none !important; }
  .swp-modal * { transition: none !important; }
  .swp-toast * { animation: none !important; }
}

/* Mobile performance — disable expensive continuous animations on small screens */
@media (max-width: 768px) {
  /* Kill the infinite shimmer sweep on the price block */
  .swp-priceRow::after { animation: none; }

  /* Slow the pulse down; it still reads as "live" without thrashing the GPU */
  @keyframes swp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232,146,58,.45); }
    50%       { box-shadow: 0 0 0 4px rgba(232,146,58,.00); }
  }
  .swp-kicker__dot { animation-duration: 4s; }

  /* Replace conic-gradient ring (GPU-heavy) with a simple solid border */
  .swp-mediaFrame::before {
    background: none;
    border: 1.5px solid var(--swp-a);
    padding: 0;
    -webkit-mask: none;
    mask: none;
    opacity: .35;
  }
  .swp-mediaFrame:hover::before { opacity: .70; }

  /* Kill the grain texture overlay — SVG filter + opacity animation on mobile is slow */
  .swp-mediaFrame::after { display: none; }

  /* Reduce image scale-up on hover to avoid triggering full repaint */
  .swp-mediaFrame:hover .swp-mediaFrame__img {
    transform: scale(1.02);
  }

  /* Kill card lift animations on touch — hover doesn't exist on mobile anyway */
  .swp-card:hover,
  .swp-review:hover,
  .swp-commentCard:hover { transform: none; }
}