/* =====================================================================

   Syne Digitals   Brand Theme Layer (dark only)

   Palette taken from the logo:

     Yellow  #FED41D  (brand)      Black  #0A0A0A (canvas)     White #FFFFFF (text)

   Loaded after every other stylesheet so it is the single source of truth.

   ===================================================================== */



/*   Global 8% size scale   */

body {

  zoom: 1.08;

}



:root,

html[data-theme="dark"] {

  color-scheme: dark;



  /* Brand */

  --brand:        #fed41d;

  --brand-hover:  #ffe047;

  --brand-press:  #e8bf0f;

  --brand-soft:   rgba(254, 212, 29, .12);

  --brand-line:   rgba(254, 212, 29, .32);

  --on-brand:     #0a0a0a;



  /* Legacy variable names used across the codebase   mapped to the new palette */

  --violet:   var(--brand);

  --violet-2: var(--brand-hover);

  --grad-2:   #ffe476;

  --navy:     #1c1c1c;

  --navy-2:   #262626;

  --gt-a:     #ffffff;



  /* Surfaces */

  --bg:            #0a0a0a;

  --card:          #141414;

  --surface-alt:   rgba(255, 255, 255, .03);

  --glass:         rgba(20, 20, 20, .78);

  --glass-strong:  rgba(20, 20, 20, .94);

  --glass-border:  rgba(255, 255, 255, .09);

  --chip-bg:       rgba(255, 255, 255, .06);

  --grid-line:     rgba(255, 255, 255, .022);



  /* Text */

  --ink:        #d4d4d4;

  --ink-strong: #ffffff;

  --muted:      #9a9a9a;

  --line:       rgba(255, 255, 255, .09);



  /* States (kept semantic) */

  --green-bg: rgba(22, 163, 74, .16);



  --shadow:    0 18px 44px rgba(0, 0, 0, .55);

  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .4);

}



/* ---------- Canvas ---------- */

html[data-theme="dark"] body {

  background-color: var(--bg);

  background-image:

    linear-gradient(var(--grid-line) 1px, transparent 1px),

    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);

  background-size: 40px 40px, 40px 40px;

  background-attachment: scroll, scroll;

  color: var(--ink);

}



html[data-theme="dark"] ::selection { background: var(--brand); color: var(--on-brand); }



/* Scrollbar */

html[data-theme="dark"] { scrollbar-color: #2a2a2a #0a0a0a; }

html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }

html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a0a0a; }

html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; border: 2px solid #0a0a0a; }

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--brand-press); }



/* ---------- Buttons ---------- */

html[data-theme="dark"] .btn-navy,

html[data-theme="dark"] .btn-primary {

  background: var(--brand);

  color: var(--on-brand);

  border-color: transparent;

  box-shadow: 0 8px 22px rgba(254, 212, 29, .14);

}

html[data-theme="dark"] .btn-navy:hover,

html[data-theme="dark"] .btn-primary:hover {

  background: var(--brand-hover);

  color: var(--on-brand);

  box-shadow: 0 10px 26px rgba(254, 212, 29, .22);

}

html[data-theme="dark"] .btn-navy:active,

html[data-theme="dark"] .btn-primary:active { background: var(--brand-press); }

html[data-theme="dark"] .btn-navy svg,

html[data-theme="dark"] .btn-primary svg { stroke: currentColor; }



html[data-theme="dark"] .btn-glass,

html[data-theme="dark"] .btn-ghost,

html[data-theme="dark"] .btn-outline {

  background: rgba(255, 255, 255, .04);

  color: #fff;

  border: 1px solid rgba(255, 255, 255, .12);

}

html[data-theme="dark"] .btn-glass:hover,

html[data-theme="dark"] .btn-ghost:hover,

html[data-theme="dark"] .btn-outline:hover {

  border-color: var(--brand-line);

  color: var(--brand);

  background: rgba(254, 212, 29, .06);

}



/* WhatsApp buttons keep WhatsApp green (recognisable action) */

html[data-theme="dark"] .btn-whatsapp { background: #25d366; color: #06210f; }

html[data-theme="dark"] .btn-whatsapp:hover { background: #2fe476; color: #06210f; }



/* ---------- Navigation ---------- */

html[data-theme="dark"] .nav-links a.active,

html[data-theme="dark"] .nav-links a.active:hover {

  background: var(--brand);

  color: var(--on-brand);

}

html[data-theme="dark"] .nav-links a:hover { color: var(--brand); background: rgba(255, 255, 255, .05); }



/* ---------- Text accents ---------- */

html[data-theme="dark"] .grad-text,

html[data-theme="dark"] .grad-anim,

html[data-theme="dark"] .hl.grad-anim {

  background: none;

  -webkit-background-clip: initial;

  background-clip: initial;

  -webkit-text-fill-color: var(--brand);

  color: var(--brand);

  animation: none;

}



/* ---------- Links ---------- */

html[data-theme="dark"] a:not([class]):hover { color: var(--brand); }



/* ---------- Forms ---------- */

html[data-theme="dark"] input:focus,

html[data-theme="dark"] select:focus,

html[data-theme="dark"] textarea:focus {

  border-color: var(--brand) !important;

  box-shadow: 0 0 0 3px rgba(254, 212, 29, .16) !important;

  outline: none;

}

html[data-theme="dark"] input[type="checkbox"],

html[data-theme="dark"] input[type="radio"],

html[data-theme="dark"] input[type="range"] { accent-color: var(--brand); }



/* ---------- Hero ---------- */

html[data-theme="dark"] .hero2::before { background: radial-gradient(ellipse at 30% 20%, rgba(254, 212, 29, .05), transparent 65%); }

html[data-theme="dark"] .hero2-bg .b1 { background: rgba(254, 212, 29, .10); }

html[data-theme="dark"] .hero2-bg .b2,

html[data-theme="dark"] .hero2-bg .b3 { background: rgba(254, 212, 29, .05); }

html[data-theme="dark"] .hero2 .stats-band { background: #121212; border-color: rgba(255, 255, 255, .08); }

html[data-theme="dark"] .hero2 .stat-cell .stat-ico,

html[data-theme="dark"] .hero2 .stat-cell:nth-child(n) .stat-ico {

  background: rgba(254, 212, 29, .10);

  color: var(--brand);

}



/* ---------- Cards ---------- */

html[data-theme="dark"] .trust-card,

html[data-theme="dark"] .tl-card,

html[data-theme="dark"] .popular-tools-grid .tl-card {

  background: #131313;

  border-color: rgba(255, 255, 255, .08);

}

html[data-theme="dark"] .trust-card:hover,

html[data-theme="dark"] .tl-card:hover { border-color: var(--brand-line); }

html[data-theme="dark"] .trust-card .glowb,

html[data-theme="dark"] .trust-card:nth-child(n) .glowb { background: var(--brand); opacity: .06; }

html[data-theme="dark"] .trust-card .ticon { background: rgba(254, 212, 29, .10); color: var(--brand); }



/* ---------- Preloader ---------- */

html[data-theme="dark"] .preloader-overlay { background: rgba(8, 8, 8, .92); }

html[data-theme="dark"] .preloader-bar { background: var(--brand); }

html[data-theme="dark"] .preloader-circle { border-color: rgba(254, 212, 29, .18); border-top-color: var(--brand); }



/* ---------- Badges ---------- */

html[data-theme="dark"] .badge-pill,

html[data-theme="dark"] .sec-pill {

  background: rgba(255, 255, 255, .04);

  border-color: rgba(254, 212, 29, .28);

  color: #fff;

}

html[data-theme="dark"] .badge-pill .dot { background: var(--brand); }



/* ---------- Auth (login / register) story panel ---------- */

html[data-theme="dark"] .lgx-story {

  background: #121212;

  border-color: rgba(255, 255, 255, .09);

  color: #f5f5f5;

}

html[data-theme="dark"] .lgx-story:before { opacity: .35; }

html[data-theme="dark"] .lgx-story-glow { background: rgba(254, 212, 29, .08); }

html[data-theme="dark"] .lgx-story h1 { color: #fff; }

html[data-theme="dark"] .lgx-story h1 em { color: var(--brand); }

html[data-theme="dark"] .lgx-story-copy p { color: #a3a3a3; }

html[data-theme="dark"] .lgx-orb-one,

html[data-theme="dark"] .lgx-orb-two { opacity: .5; }



/* ---------- Blog category badges (DB colors unified to brand) ---------- */

html[data-theme="dark"] .bc-cat,

html[data-theme="dark"] .ls-badges .blog-cat-badge:first-child,

html[data-theme="dark"] .bp-cat,

html[data-theme="dark"] .blog-post-cat {

  background: var(--brand) !important;

  color: #0a0a0a !important;

}





/* =====================================================================

   Account Dashboard   Workspace Overview & Bento Cards

   ===================================================================== */

html[data-theme="dark"] .ud-v3-section-head span {

  color: var(--brand);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-size: 0.72rem;

}



html[data-theme="dark"] .ud-v3-section-head h2 {

  color: #ffffff;

  font-weight: 800;

}



html[data-theme="dark"] .ud-v3-section-head p {

  color: rgba(255, 255, 255, 0.6);

}



/* Bento Cards base */

html[data-theme="dark"] .ud-v3-bento > article,

html[data-theme="dark"] .ud-v3-mini-card {

  background: linear-gradient(150deg, #181714 0%, #11100e 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.09) !important;

  border-radius: 18px !important;

  box-shadow: 0 14px 35px -8px rgba(0, 0, 0, 0.5) !important;

  color: #f2f2f2;

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;

}



html[data-theme="dark"] .ud-v3-bento > article:hover,

html[data-theme="dark"] .ud-v3-mini-card:hover {

  transform: translateY(-3px) !important;

  border-color: rgba(254, 212, 29, 0.35) !important;

  box-shadow: 0 18px 45px -8px rgba(0, 0, 0, 0.7), 0 0 24px -4px rgba(254, 212, 29, 0.12) !important;

}



/* 1. Value Card (Total active purchases)   Luxury obsidian + gold glow */

html[data-theme="dark"] .ud-v3-value-card {

  background:

    radial-gradient(circle 260px at 85% 15%, rgba(254, 212, 29, 0.18) 0%, transparent 70%),

    radial-gradient(circle 220px at 15% 85%, rgba(254, 212, 29, 0.08) 0%, transparent 65%),

    linear-gradient(150deg, #191812 0%, #12110c 55%, #0b0a08 100%) !important;

  border: 1px solid rgba(254, 212, 29, 0.3) !important;

  border-radius: 18px !important;

  box-shadow: 0 16px 45px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(254, 212, 29, 0.22) !important;

  color: #ffffff !important;

}



html[data-theme="dark"] .ud-v3-value-card .ud-v3-card-icon {

  background: rgba(254, 212, 29, 0.14) !important;

  border: 1px solid rgba(254, 212, 29, 0.3) !important;

  color: #fed41d !important;

  border-radius: 11px !important;

}



html[data-theme="dark"] .ud-v3-value-card .ud-v3-live {

  color: rgba(255, 255, 255, 0.85) !important;

  font-size: 0.75rem;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 7px;

}



html[data-theme="dark"] .ud-v3-value-card .ud-v3-live i {

  display: inline-block;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #22c55e !important;

  box-shadow: 0 0 10px #22c55e !important;

}



html[data-theme="dark"] .ud-v3-value-card > small {

  color: rgba(255, 255, 255, 0.72) !important;

  font-size: 0.84rem !important;

  font-weight: 500;

  margin-top: 1.15rem;

  display: block;

}



html[data-theme="dark"] .ud-v3-value-card > strong {

  color: #fed41d !important;

  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;

  font-weight: 800 !important;

  letter-spacing: -0.02em !important;

  text-shadow: 0 2px 20px rgba(254, 212, 29, 0.35) !important;

  margin: 0.15rem 0 !important;

  display: block;

}



html[data-theme="dark"] .ud-v3-value-card .ud-v3-bars i {

  background: linear-gradient(180deg, rgba(254, 212, 29, 0.42), rgba(254, 212, 29, 0.12)) !important;

  border-top: 1px solid rgba(254, 212, 29, 0.55) !important;

  border-radius: 4px 4px 2px 2px;

}



html[data-theme="dark"] .ud-v3-value-card > p {

  color: rgba(255, 255, 255, 0.55) !important;

  font-size: 0.78rem !important;

  line-height: 1.45;

  margin-top: 0.85rem;

}



/* 2. Order Journey card */

html[data-theme="dark"] .ud-v3-progress-card .ud-v3-card-icon {

  background: rgba(254, 212, 29, 0.1) !important;

  border: 1px solid rgba(254, 212, 29, 0.22) !important;

  color: #fed41d !important;

  border-radius: 11px !important;

}



html[data-theme="dark"] .ud-v3-progress-card button[data-tab="orders"] {

  color: #fed41d !important;

  font-size: 0.84rem;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  background: none;

  border: none;

  cursor: pointer;

  transition: opacity 0.2s, transform 0.2s;

}



html[data-theme="dark"] .ud-v3-progress-card button[data-tab="orders"]:hover {

  opacity: 0.85;

  transform: translateX(2px);

}



html[data-theme="dark"] .ud-v3-progress-card h3 {

  color: #ffffff !important;

  font-size: 1.15rem;

  font-weight: 700;

}



html[data-theme="dark"] .ud-v3-progress-card p {

  color: rgba(255, 255, 255, 0.62) !important;

  font-size: 0.82rem;

}



html[data-theme="dark"] .ud-v3-progress-track {

  background: rgba(255, 255, 255, 0.08) !important;

  height: 6px;

  border-radius: 99px;

}



html[data-theme="dark"] .ud-v3-progress-track span {

  background: linear-gradient(90deg, #e8bf0f, #fed41d) !important;

  box-shadow: 0 0 12px rgba(254, 212, 29, 0.4) !important;

}



html[data-theme="dark"] .ud-v3-progress-meta {

  color: rgba(255, 255, 255, 0.55) !important;

  font-size: 0.76rem;

}



html[data-theme="dark"] .ud-v3-progress-meta b {

  color: #ffffff !important;

  font-size: 1.05rem;

  font-weight: 700;

}



/* 3. Wishlist mini card */

html[data-theme="dark"] .ud-v3-wish > span {

  background: rgba(244, 63, 94, 0.12) !important;

  border: 1px solid rgba(244, 63, 94, 0.25) !important;

  color: #fb7185 !important;

  border-radius: 11px !important;

}



html[data-theme="dark"] .ud-v3-mini-card small {

  color: rgba(255, 255, 255, 0.65) !important;

  font-size: 0.8rem;

  font-weight: 600;

}



html[data-theme="dark"] .ud-v3-mini-card strong {

  color: #ffffff !important;

  font-size: 1.85rem;

  font-weight: 800;

}



html[data-theme="dark"] .ud-v3-mini-card em {

  color: #fed41d !important;

  font-size: 0.72rem;

  font-weight: 600;

  font-style: normal;

  display: inline-flex;

  align-items: center;

  gap: 4px;

}



/* 4. Pack library mini card */

html[data-theme="dark"] .ud-v3-packs > span {

  background: rgba(254, 212, 29, 0.12) !important;

  border: 1px solid rgba(254, 212, 29, 0.25) !important;

  color: #fed41d !important;

  border-radius: 11px !important;

}



/* 5. Security pulse card */

html[data-theme="dark"] .ud-v3-security-ring {

  background: rgba(254, 212, 29, 0.1) !important;

  border: 1px solid rgba(254, 212, 29, 0.28) !important;

  color: #fed41d !important;

  border-radius: 12px !important;

  box-shadow: none !important;

}



html[data-theme="dark"] .ud-v3-security-card small,

html[data-theme="dark"] .ud-v3-discover-card small {

  color: #fed41d !important;

  font-weight: 800;

  font-size: 0.7rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



html[data-theme="dark"] .ud-v3-security-card h3,

html[data-theme="dark"] .ud-v3-discover-card h3 {

  color: #ffffff !important;

  font-size: 0.98rem;

  font-weight: 700;

}



html[data-theme="dark"] .ud-v3-security-card p,

html[data-theme="dark"] .ud-v3-discover-card p {

  color: rgba(255, 255, 255, 0.62) !important;

  font-size: 0.78rem;

}



html[data-theme="dark"] .ud-v3-security-card .btn {

  background: rgba(255, 255, 255, 0.06) !important;

  border: 1px solid rgba(255, 255, 255, 0.16) !important;

  color: #ffffff !important;

  font-weight: 600 !important;

  border-radius: 10px !important;

  transition: all 0.2s !important;

}



html[data-theme="dark"] .ud-v3-security-card .btn:hover {

  background: rgba(254, 212, 29, 0.12) !important;

  border-color: rgba(254, 212, 29, 0.4) !important;

  color: #fed41d !important;

}



/* 6. Discover more card */

html[data-theme="dark"] .ud-v3-discover-card .ud-v3-card-icon {

  background: rgba(254, 212, 29, 0.1) !important;

  border: 1px solid rgba(254, 212, 29, 0.28) !important;

  color: #fed41d !important;

  border-radius: 12px !important;

}



html[data-theme="dark"] .ud-v3-discover-card .btn-navy {

  background: #fed41d !important;

  color: #0a0a0a !important;

  font-weight: 700 !important;

  border: none !important;

  border-radius: 10px !important;

  box-shadow: 0 4px 16px rgba(254, 212, 29, 0.3) !important;

  transition: all 0.2s !important;

}



html[data-theme="dark"] .ud-v3-discover-card .btn-navy:hover {

  background: #ffe047 !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 6px 22px rgba(254, 212, 29, 0.45) !important;

}

html[data-theme="dark"] .site-main::before {

  content: "";

  position: fixed;

  inset: -10vw;

  z-index: 0;

  pointer-events: none;

  background:

    radial-gradient(ellipse 70% 80% at 0% 15%, rgba(254,212,29,.14) 0%, transparent 60%),

    radial-gradient(ellipse 60% 80% at 100% 25%, rgba(254,212,29,.10) 0%, transparent 55%),

    radial-gradient(circle at 50% 65%, rgba(254, 212, 29, 0.08) 0, transparent 65%),

    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(254,212,29,.12) 0%, transparent 55%),

    radial-gradient(ellipse 70% 70% at 90% 90%, rgba(254,212,29,.09) 0%, transparent 55%);

  filter: blur(110px);

  -webkit-filter: blur(110px);

  animation: themeFlaresPulse 18s ease-in-out infinite alternate;

}



html[data-theme="dark"] .site-main {

  isolation: isolate;

   

}





/* =====================================================================

   AMBIENT BLOB BACKGROUND SYSTEM

     Consistent dark background across all sections

     Global gold-tinted grid overlay

     Five large floating glowing blobs

   ===================================================================== */



/* 1. Consistent base background   every page, every section */

html[data-theme="dark"] body {

  background: #0a0a0a !important;

  background-color: #0a0a0a !important;

}



/* Unified background: remove lighter grey from sections that stand out */

html[data-theme="dark"] .popular-tools-section,

html[data-theme="dark"] [data-theme="dark"] .popular-tools-section {

  background: transparent !important;

  border-top: 1px solid rgba(254, 212, 29, .06) !important;

  border-bottom: 1px solid rgba(254, 212, 29, .06) !important;

}



/* 2. Global grid overlay   fixed so it covers the whole page at all times */

html[data-theme="dark"] body::before {

  content: '';

  position: fixed;

  inset: 0;

  background-image:

    linear-gradient(rgba(254, 212, 29, .032) 1px, transparent 1px),

    linear-gradient(90deg, rgba(254, 212, 29, .032) 1px, transparent 1px);

  background-size: 44px 44px;

  pointer-events: none;

  z-index: 0;

}



/* Fade the grid near top & bottom edges for polish */

html[data-theme="dark"] body::after {

  content: '';

  position: fixed;

  inset: 0;

  background:

    linear-gradient(180deg, rgba(10,10,10,.55) 0%, transparent 12%, transparent 88%, rgba(10,10,10,.55) 100%);

  pointer-events: none;

  z-index: 0;

}



/* 3. Blob container itself */

#syne-blobs {

  mix-blend-mode: screen;

}



/* 4. Blob keyframes   each blob gets a unique gentle drift path */

@keyframes syneBlob1 {

  0%   { transform: translate(0px, 0px) scale(1);    opacity: 1; }

  25%  { transform: translate(40px, -55px) scale(1.06); opacity: .85; }

  50%  { transform: translate(-25px, 30px) scale(.94); opacity: 1; }

  75%  { transform: translate(20px, -20px) scale(1.03); opacity: .9; }

  100% { transform: translate(-35px, 45px) scale(.97); opacity: 1; }

}







@keyframes syneBlob2 {

  0%   { transform: translate(0px, 0px)   scale(1);    opacity: 1; }

  33%  { transform: translate(-50px, 40px) scale(1.07); opacity: .8; }

  66%  { transform: translate(30px, -30px) scale(.93); opacity: .95; }

  100% { transform: translate(-20px, 20px) scale(1.04); opacity: 1; }

}







@keyframes syneBlob3 {

  0%   { transform: translate(0px, 0px)    scale(1);    opacity: 1; }

  40%  { transform: translate(-35px, -45px) scale(1.05); opacity: .85; }

  80%  { transform: translate(45px, 30px)  scale(.96); opacity: 1; }

  100% { transform: translate(10px, -15px) scale(1.02); opacity: .9; }

}







@keyframes syneBlob4 {

  0%   { transform: translate(0px, 0px)   scale(1);    opacity: 1; }

  30%  { transform: translate(30px, 50px) scale(1.08); opacity: .8; }

  70%  { transform: translate(-40px, -25px) scale(.92); opacity: .95; }

  100% { transform: translate(15px, 35px) scale(1.04); opacity: 1; }

}







@keyframes syneBlob5 {

  0%   { transform: translate(0px, 0px)   scale(1);    opacity: 1; }

  50%  { transform: translate(-30px, -40px) scale(1.1); opacity: .75; }

  100% { transform: translate(25px, 30px) scale(.95); opacity: 1; }

}







/* 5. Make sure site content stays above the blobs + grid */

html[data-theme="dark"] .site-main {

  position: relative;

  z-index: 2;

}



html[data-theme="dark"] .site-header {

  z-index: 60;

}



/* 6. Glass cards get a slightly stronger blur so blobs glow through them */

html[data-theme="dark"] .pcard,

html[data-theme="dark"] .pack-card-v2,

html[data-theme="dark"] .trust-card,

html[data-theme="dark"] .product-card {

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

}



/* 7. Section borders   soft gold glow line between sections instead of hard breaks */

html[data-theme="dark"] section.block + section.block {

  border-top: none !important;

}



html[data-theme="dark"] section.block + section.block::before {

  content: '';

  position: absolute;

  top: -1px;

  left: 8%;

  right: 8%;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(254,212,29,.15) 30%, rgba(254,212,29,.15) 70%, transparent);

  pointer-events: none;

}



/* =====================================================================

   PREMIUM PRODUCT CARDS (tl-card) OVERRIDES

     Gold border with ambient glow

     Text color enhancements (less pure white/grey, more rich tints)

   ===================================================================== */



html[data-theme="dark"] .tl-card {

  /* Premium yellow border */

  border: 1px solid rgba(254, 212, 29, 0.45) !important;

  /* Ambient golden inner/outer glow */

  box-shadow: 

    0 12px 34px rgba(0, 0, 0, 0.4),

    0 0 15px rgba(254, 212, 29, 0.08),

    inset 0 1px 0 rgba(255, 255, 255, 0.05),

    inset 0 0 20px rgba(254, 212, 29, 0.03) !important;

}



html[data-theme="dark"] .tl-card:hover {

  border-color: rgba(254, 212, 29, 0.9) !important;

  box-shadow: 

    0 16px 40px rgba(0, 0, 0, 0.6),

    0 0 25px rgba(254, 212, 29, 0.18),

    inset 0 1px 0 rgba(255, 255, 255, 0.1),

    inset 0 0 30px rgba(254, 212, 29, 0.06) !important;

}



/* Card image box inner border */

html[data-theme="dark"] .tl-card-top {

  border: 1px solid rgba(254, 212, 29, 0.15) !important;

}



/* 1. Title */

html[data-theme="dark"] .tl-title a {

  color: #ffffff !important;

  text-shadow: 0 2px 10px rgba(255,255,255,0.1);

}

html[data-theme="dark"] .tl-title a:hover {

  color: #fed41d !important;

  text-shadow: 0 2px 12px rgba(254, 212, 29, 0.3);

}



/* 2. Verified Badge */

html[data-theme="dark"] .tl-verified {

  color: #1ed760 !important; /* Brighter neon green */

}



/* 3. Stats row (reviews / sold) */

html[data-theme="dark"] .tl-review-count {

  color: #a2b9ce !important; /* Soft ice blue */

}

html[data-theme="dark"] .tl-sold-count {

  color: #dcb360 !important; /* Warm copper/gold */

}

html[data-theme="dark"] .tl-rating b {

  color: #fed41d !important; /* Match stars */

}



/* 4. Description paragraph */

html[data-theme="dark"] .tl-desc {

  color: #b5b5b5 !important; /* Brighter, richer grey instead of dull dark grey */

}



/* 5. Pricing */

html[data-theme="dark"] .tl-price {

  color: #ffffff !important;

}

html[data-theme="dark"] .tl-price-old {

  color: #a36f6f !important; /* Subtle reddish grey for old price */

}



/* 6. Arrow icon in title */

html[data-theme="dark"] .tl-title-arrow {

  color: #fed41d !important;

  background: rgba(254, 212, 29, 0.1) !important;

}



/* 7. Hover effect for the cart button */

html[data-theme="dark"] .tl-btn-cart:hover {

  background: #fed41d !important;

  color: #0a0a0a !important;

  border-color: #fed41d !important;

}



/* =====================================================================

   HERO FULL-BLEED BACKGROUNDS

     Pulls hero sections up behind the navbar to the very top edge

   ===================================================================== */







/* Ensure navbar background is completely transparent so the hero gradients show through cleanly */

html[data-theme="dark"] .site-header {

  background: transparent !important;

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(254, 212, 29, 0.05) !important; /* very subtle gold line below navbar */

}

/* Pull heroes up behind the navbar */

html[data-theme="dark"] .packs-hero,

html[data-theme="dark"] .journal-hero,

html[data-theme="dark"] .tl-hero,

html[data-theme="dark"] .ud-wrap {

  margin-top: -92px !important;

  padding-top: calc(92px + 2.5rem) !important;

}



@media (min-width: 1025px) {

  html[data-theme="dark"] .packs-hero,

  html[data-theme="dark"] .journal-hero,

  html[data-theme="dark"] .tl-hero,

  html[data-theme="dark"] .ud-wrap {

    margin-top: -76px !important;

    padding-top: calc(76px + 3rem) !important;

  }

}







/* =====================================================================

   PRODUCT TRUST CELLS (Spacing & Fonts)

   ===================================================================== */

html[data-theme="dark"] .pd-trust-cell div {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.45rem;

}



html[data-theme="dark"] .pd-trust-cell strong {

  font-family: var(--font-display) !important; /* Premium title font */

  font-weight: 600 !important;

  color: #ffffff !important;

  letter-spacing: 0.3px;

}



html[data-theme="dark"] .pd-trust-cell span {

  font-family: var(--font-body) !important; /* Regular body font */

  font-weight: 400 !important;

  color: #a3a3a3 !important;

  font-size: 0.9em !important;

}



/* Remove dashboard-specific background to allow global grid & blobs to show */

html[data-theme="dark"] .ud-bg {

  display: none !important;

}



/* Ensure the dashboard wrap is entirely transparent so the global body background shows */

html[data-theme="dark"] .ud-wrap {

  background: transparent !important;

}



/* Also make sure the dark theme dashboard hero matches the new premium aesthetic */

html[data-theme="dark"] .ud-v3-hero {

  border-color: rgba(254, 212, 29, 0.22) !important;

  background: linear-gradient(125deg, #121212 0%, #1a1a1a 52%, rgba(254, 212, 29, 0.08) 100%) !important;

  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), inset 0 1px rgba(254, 212, 29, 0.15) !important;

}



/* =====================================================================

   DASHBOARD DESKTOP SIDEBAR REDESIGN

   ===================================================================== */

@media (min-width: 1025px) {

  /* Master flex layout for the dashboard container */

  html[data-theme="dark"] .ud-wrap.ud-v3 {

    display: flex !important;

    align-items: flex-start !important;

    gap: 3rem !important;

    max-width: 1400px !important;

    margin: 0 auto !important;

    padding: 0 2rem 4rem 2rem !important;

  }

  

  /* Sidebar Container */

  html[data-theme="dark"] .ud-v3-dock-wrap {

    position: sticky !important;

    top: 100px !important;

    flex: 0 0 260px !important;

    width: 260px !important;

    max-width: 260px !important;

    flex-direction: column !important;

    align-items: stretch !important;

    background: rgba(15, 15, 15, 0.6) !important;

    border: 1px solid rgba(254, 212, 29, 0.15) !important;

    border-radius: 24px !important;

    padding: 1.5rem !important;

    margin: 0 !important;

    backdrop-filter: blur(20px) !important;

    -webkit-backdrop-filter: blur(20px) !important;

    box-shadow: 0 24px 60px rgba(0,0,0,0.4) !important;

    height: calc(100vh - 120px) !important;

    max-height: 800px !important;

  }

  

  /* Sidebar Nav List */

  html[data-theme="dark"] .ud-nav.ud-v3-dock {

    flex-direction: column !important;

    align-items: stretch !important;

    justify-content: flex-start !important;

    gap: 0.4rem !important;

    flex: 0 0 auto !important;

  }

  

  /* Sidebar Buttons */

  html[data-theme="dark"] .ud-v3 .ud-nav-btn {

    justify-content: flex-start !important;

    padding: 0.85rem 1.15rem !important;

    border-radius: 12px !important;

    font-size: 1rem !important;

    font-family: var(--font-display) !important;

    font-weight: 500 !important;

    color: rgba(255, 255, 255, 0.7) !important;

    transition: all 0.3s ease !important;

    margin: 0 !important;

    flex: 0 0 auto !important;

    height: auto !important;

    min-height: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

  }

  

  html[data-theme="dark"] .ud-v3 .ud-nav-btn::after {

    display: none !important;

  }

  

  html[data-theme="dark"] .ud-v3 .ud-nav-btn .ud-nav-count {

    margin-left: auto !important;

    background: rgba(254, 212, 29, 0.15) !important;

    color: #fed41d !important;

    font-size: 0.75rem !important;

    padding: 0.2rem 0.6rem !important;

    border-radius: 20px !important;

    font-weight: 600 !important;

    border: 1px solid rgba(254, 212, 29, 0.3) !important;

  }

  html[data-theme="dark"] .ud-v3 .ud-nav-btn.on .ud-nav-count {

    background: #fed41d !important;

    color: #0a0a0a !important;

  }

  

  html[data-theme="dark"] .ud-v3 .ud-nav-btn .ud-icon {

    margin-right: 0.75rem !important;

    color: inherit !important;

  }

  

  html[data-theme="dark"] .ud-v3 .ud-nav-btn:hover {

    background: rgba(254, 212, 29, 0.08) !important;

    color: #fed41d !important;

  }

  

  html[data-theme="dark"] .ud-v3 .ud-nav-btn.on {

    background: rgba(254, 212, 29, 0.15) !important;

    color: #fed41d !important;

    box-shadow: inset 0 0 0 1px rgba(254, 212, 29, 0.3) !important;

  }

  

  /* Logout area inside sidebar */

  html[data-theme="dark"] .ud-v3-dock-acts {

    margin-top: auto !important;

    margin-left: 0 !important;

    padding: 1.5rem 0 0 0 !important;

    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

    border-left: none !important;

    border-right: none !important;

    border-bottom: none !important;

    display: flex !important;

    justify-content: flex-start !important;

    width: 100% !important;

  }

  

  html[data-theme="dark"] .ud-v3-dock-acts a {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 0.75rem !important;

    color: rgba(255, 255, 255, 0.6) !important;

    padding: 0.85rem 1.15rem !important;

    border-radius: 12px !important;

    font-family: var(--font-display) !important;

    font-weight: 500 !important;

    width: 100% !important;

    height: auto !important;

    max-width: none !important;

    margin: 0 !important;

    white-space: nowrap !important;

    transition: all 0.2s ease !important;

    background: transparent !important;

  }

  html[data-theme="dark"] .ud-v3-dock-acts a::after {

    content: "Sign Out" !important;

    white-space: nowrap !important;

  }

  html[data-theme="dark"] .ud-v3-dock-acts a:hover {

    color: #ff6b6b !important;

    background: rgba(255, 107, 107, 0.08) !important;

  }

  html[data-theme="dark"] .ud-v3-dock-acts a:hover {

    background: rgba(255, 107, 107, 0.1) !important;

  }

  

  /* Main Content Area */

  html[data-theme="dark"] .ud-shell.ud-v3-shell {

    flex: 1 !important;

    margin: 0 !important;

    min-width: 0 !important;

  }

  

  /* Reset hero margin since it's now inside the tab */

  html[data-theme="dark"] .ud-v3-hero {

    margin-top: 0 !important;

    margin-bottom: 2rem !important;

  }

}







/* Ensure no purplish/grey gradient at the bottom of site-main for the footer reveal */

html[data-theme="dark"] .footer-reveal-ready .site-main {

  background-image: 

    linear-gradient(var(--grid-line) 1px, transparent 1px), 

    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;

}



/* =====================================================================

   MOBILE POLISH (hero, packs hero, product cards, orders)

   ===================================================================== */

@media (max-width: 768px) {

  /* Root cause of content being cut on the right: global 1.08 zoom */

  body { zoom: 1 !important; }

  html, body { overflow-x: hidden !important; max-width: 100vw; }



  /* ---------- Home hero ---------- */

  html[data-theme="dark"] .hero2-title,

  html[data-theme="dark"] .hero2-title .hero-title-mobile {

    font-size: clamp(1.6rem, 7.5vw, 2.35rem) !important;

    line-height: 1.08 !important;

    letter-spacing: -0.02em !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

  }

  html[data-theme="dark"] .hero2-title .hl:first-child { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }

  html[data-theme="dark"] .hero2-title .hl.grad-anim {

    background: linear-gradient(90deg, #fed41d, #ffe98a, #fed41d) !important;

    background-size: 200% auto !important;

    -webkit-background-clip: text !important;

    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

  }

  html[data-theme="dark"] .hero2-sub { font-size: .9rem !important; line-height: 1.55 !important; color: #b9b9b9 !important; }

  html[data-theme="dark"] .hero2-sub br { display: none; }

  html[data-theme="dark"] .hero2 .glow-badge {

    font-size: .68rem !important; color: #fed41d !important;

    background: rgba(254,212,29,.08) !important; border: 1px solid rgba(254,212,29,.3) !important;

  }

  html[data-theme="dark"] .hero-search-input { font-size: .88rem !important; }

  html[data-theme="dark"] .hero-cta { gap: .6rem !important; }

  html[data-theme="dark"] .hero-cta .btn { font-size: .76rem !important; padding: .65rem .5rem !important; }



  /* ---------- Packs hero: clean card like the Tools hero ---------- */

  html[data-theme="dark"] .packs-hero,

  html[data-theme="dark"] .journal-hero {

    margin-top: 10px !important;

    padding-top: 0 !important;

  }

  html[data-theme="dark"] .packs-hero-inner {

    padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;

  }

  html[data-theme="dark"] .packs-hero .container { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }

  html[data-theme="dark"] .packs-hero::before,

  html[data-theme="dark"] .packs-hero::after { display: none !important; }

  html[data-theme="dark"] .packs-hero h1 {

    font-size: clamp(1.55rem, 7vw, 1.9rem) !important;

    line-height: 1.12 !important; color: #ffffff !important; margin: .7rem 0 .4rem !important;

  }

  html[data-theme="dark"] .packs-hero h1 .grad-text {

    color: #fed41d !important; -webkit-text-fill-color: #fed41d !important; background: none !important;

  }

  html[data-theme="dark"] .packs-hero p { font-size: .86rem !important; color: #b5b5b5 !important; line-height: 1.55 !important; }

  html[data-theme="dark"] .packs-hero .sec-pill {

    color: #fed41d !important; background: rgba(254,212,29,.08) !important; border-color: rgba(254,212,29,.3) !important;

  }



  /* ---------- Product cards: no white frame, just rounded image ---------- */

  html[data-theme="dark"] .tl-card .tl-card-top,

  html[data-theme="dark"] body[data-page] .tl-card .tl-card-top {

    background: transparent !important;

    padding: 0 !important;

    border: 0 !important;

    box-shadow: none !important;

    border-radius: 14px !important;

    overflow: hidden !important;

  }

  html[data-theme="dark"] .tl-card .tl-card-top > a { display: block; width: 100%; height: 100%; }

  html[data-theme="dark"] .tl-card .tl-card-img,

  html[data-theme="dark"] body[data-page] .tl-card .tl-card-img {

    width: 100% !important; height: 100% !important;

    object-fit: cover !important; border-radius: 14px !important;

    background: transparent !important; border: 0 !important;

  }

  html[data-theme="dark"] .tl-card .tl-badge.off { font-size: .6rem !important; padding: .2rem .45rem !important; }

  html[data-theme="dark"] .tl-card .tl-title,

  html[data-theme="dark"] .tl-card .tl-title a { font-size: .92rem !important; line-height: 1.25 !important; }

  html[data-theme="dark"] .tl-card .tl-verified { font-size: .68rem !important; }

  html[data-theme="dark"] .tl-card .tl-meta-access { font-size: .66rem !important; color: #fed41d !important; }

  html[data-theme="dark"] .tl-card .tl-price { font-size: 1rem !important; color: #ffffff !important; }

  html[data-theme="dark"] .tl-card .tl-price-old { font-size: .7rem !important; }

  html[data-theme="dark"] .tl-card .tl-btn-get {

    font-size: .76rem !important; background: #fed41d !important; color: #0a0a0a !important;

    border: 0 !important; font-weight: 700 !important;

  }

  html[data-theme="dark"] .tl-card .tl-btn-cart {

    background: rgba(254,212,29,.08) !important; color: #fed41d !important; border: 1px solid rgba(254,212,29,.3) !important;

  }



  /* ---------- Orders (account) ---------- */

  html[data-theme="dark"] .mo-order-card {

    background: linear-gradient(160deg, rgba(254,212,29,.05), rgba(20,20,20,.92) 50%) !important;

    border: 1px solid rgba(254,212,29,.16) !important;

  }

  html[data-theme="dark"] .mo-order-foot a {

    background: #fed41d !important; color: #0a0a0a !important; border: 0 !important; font-weight: 700 !important;

  }

  html[data-theme="dark"] .mo-order-secondary { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .5rem !important; }

  html[data-theme="dark"] .mo-order-secondary form { margin: 0 !important; display: flex !important; }

  html[data-theme="dark"] .mo-order-secondary a,

  html[data-theme="dark"] .mo-order-secondary button {

    width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;

    gap: .4rem !important; min-height: 40px !important; padding: .55rem .8rem !important;

    border-radius: 12px !important; font-size: .78rem !important; font-weight: 600 !important;

    background: rgba(255,255,255,.04) !important; color: #e8e8e8 !important;

    border: 1px solid rgba(254,212,29,.22) !important; box-shadow: none !important;

  }

  html[data-theme="dark"] .mo-order-secondary a svg,

  html[data-theme="dark"] .mo-order-secondary button svg { color: #fed41d !important; }

  html[data-theme="dark"] .mo-order-switch button.is-active { background: #fed41d !important; color: #0a0a0a !important; }

  html[data-theme="dark"] .mo-order-switch button.is-active b { background: rgba(0,0,0,.15) !important; color: #0a0a0a !important; }

}







/* Mobile: compact product card height */

@media (max-width: 768px) {

  html[data-theme="dark"] .tl-card { padding: .6rem !important; min-height: 0 !important; height: auto !important; }

  html[data-theme="dark"] .tl-card .tl-card-top,

  html[data-theme="dark"] body[data-page] .tl-card .tl-card-top {

    aspect-ratio: 1.45 / 1 !important; height: auto !important; min-height: 0 !important; margin-bottom: .45rem !important;

  }

  html[data-theme="dark"] .tl-card .tl-card-body { padding: 0 !important; gap: .3rem !important; min-height: 0 !important; }

  html[data-theme="dark"] .tl-card .tl-title-row { margin: 0 !important; min-height: 0 !important; }

  html[data-theme="dark"] .tl-card .tl-title { min-height: 0 !important; height: auto !important; margin: 0 !important; -webkit-line-clamp: 1; }

  html[data-theme="dark"] .tl-card .tl-card-kicker { margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: .35rem !important; }

  html[data-theme="dark"] .tl-card .tl-compact-meta { margin: 0 !important; padding: 0 !important; gap: .35rem !important; }

  html[data-theme="dark"] .tl-card .tl-rating,

  html[data-theme="dark"] .tl-card .tl-desc { display: none !important; }

  html[data-theme="dark"] .tl-card .tl-price-row { margin: .15rem 0 0 !important; }

  html[data-theme="dark"] .tl-card .tl-actions { margin-top: .4rem !important; gap: .4rem !important; }

  html[data-theme="dark"] .tl-card .tl-btn-get { min-height: 36px !important; height: 36px !important; padding: 0 .6rem !important; border-radius: 10px !important; }

  html[data-theme="dark"] .tl-card .tl-btn-cart { width: 36px !important; height: 36px !important; min-height: 36px !important; border-radius: 10px !important; }

}







/* Mobile: compact order card + fix white Reorder wrapper */

@media (max-width: 768px) {

  html[data-theme="dark"] body[data-page="account"] .mo-order-secondary > form {

    background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;

    border-radius: 0 !important; flex: 1 !important; display: flex !important; margin: 0 !important;

  }

  html[data-theme="dark"] body[data-page="account"] .mo-order-card { padding: .85rem .95rem !important; border-radius: 16px !important; gap: 0 !important; }

  html[data-theme="dark"] body[data-page="account"] .mo-order-main { gap: .35rem !important; }

  html[data-theme="dark"] body[data-page="account"] .mo-order-top span:first-child { font-size: .6rem !important; }

  html[data-theme="dark"] body[data-page="account"] .mo-order-top .status { font-size: .55rem !important; padding: .15rem .45rem !important; }

  html[data-theme="dark"] body[data-page="account"] .mo-order-card h3 { font-size: .95rem !important; margin: .1rem 0 0 !important; }

  html[data-theme="dark"] body[data-page="account"] .mo-order-meta { font-size: .68rem !important; gap: .6rem !important; padding-bottom: .5rem !important; margin: 0 !important; }

  html[data-theme="dark"] body[data-page="account"] .mo-order-foot { margin: .2rem 0 0 !important; padding: 0 !important; }

  html[data-theme="dark"] body[data-page="account"] .mo-order-foot strong { font-size: 1rem !important; color: #fff !important; }

  html[data-theme="dark"] body[data-page="account"] .mo-order-foot a {

    font-size: .72rem !important; padding: .4rem .8rem !important; min-height: 30px !important; border-radius: 999px !important;

  }

  html[data-theme="dark"] body[data-page="account"] .mo-order-secondary { margin-top: .5rem !important; gap: .45rem !important; }

  html[data-theme="dark"] body[data-page="account"] .mo-order-secondary a,

  html[data-theme="dark"] body[data-page="account"] .mo-order-secondary button {

    min-height: 32px !important; height: 32px !important; padding: 0 .6rem !important; font-size: .72rem !important;

    border-radius: 10px !important; background: rgba(254,212,29,.06) !important; color: #f1f1f1 !important;

    border: 1px solid rgba(254,212,29,.25) !important; width: 100% !important;

  }

  html[data-theme="dark"] body[data-page="account"] .mo-order-secondary a:active,

  html[data-theme="dark"] body[data-page="account"] .mo-order-secondary button:active { background: rgba(254,212,29,.15) !important; }



/* =====================================================================

   SUPPORT CHAT COMPOSER   compact premium pill

   ===================================================================== */

html[data-theme="dark"] .support-quick-replies {

  display: flex !important; flex-wrap: nowrap !important; gap: .4rem !important;

  overflow-x: auto !important; scrollbar-width: none; padding: 0 .1rem .5rem !important; margin: 0 !important;

}

html[data-theme="dark"] .support-quick-replies::-webkit-scrollbar { display: none; }

html[data-theme="dark"] .support-quick-replies button {

  flex: 0 0 auto !important; white-space: nowrap !important;

  font-size: .72rem !important; font-weight: 600 !important; line-height: 1 !important;

  padding: .45rem .75rem !important; min-height: 0 !important; border-radius: 999px !important;

  background: rgba(254,212,29,.06) !important; color: #fed41d !important;

  border: 1px solid rgba(254,212,29,.22) !important; transition: background .2s, border-color .2s !important;

}

html[data-theme="dark"] .support-quick-replies button:hover { background: rgba(254,212,29,.14) !important; border-color: rgba(254,212,29,.45) !important; }



html[data-theme="dark"] .support-composer {

  display: flex !important; align-items: center !important; gap: 8px !important;

  padding: 7px 10px 7px 12px !important; min-height: 52px !important; border-radius: 999px !important;

  background: linear-gradient(180deg, #18181b 0%, #111113 100%) !important;

  border: 1px solid rgba(254, 212, 29, 0.28) !important;

  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 16px rgba(254, 212, 29, 0.04) !important;

  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

html[data-theme="dark"] .support-composer:focus-within {

  border-color: #fed41d !important;

  box-shadow: 0 0 0 3px rgba(254, 212, 29, 0.16), 0 16px 40px -4px rgba(0, 0, 0, 0.7), 0 0 24px rgba(254, 212, 29, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

}



/* round icon buttons */

html[data-theme="dark"] .support-composer .support-attach,

html[data-theme="dark"] .support-composer .support-record {

  flex: 0 0 38px !important; width: 38px !important; height: 38px !important; min-height: 0 !important;

  display: grid !important; place-items: center !important; padding: 0 !important; margin: 0 !important;

  border-radius: 50% !important; border: 1px solid rgba(254, 212, 29, 0.18) !important; background: rgba(254, 212, 29, 0.08) !important;

  color: #fed41d !important; cursor: pointer; transition: all .2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

html[data-theme="dark"] .support-composer .support-attach:hover,

html[data-theme="dark"] .support-composer .support-record:hover {

  background: rgba(254, 212, 29, 0.2) !important;

  border-color: #fed41d !important;

  color: #fed41d !important;

  transform: scale(1.08) !important;

  box-shadow: 0 0 14px rgba(254, 212, 29, 0.3) !important;

}

html[data-theme="dark"] .support-composer .support-attach svg,

html[data-theme="dark"] .support-composer .support-record svg { width: 18px !important; height: 18px !important; }



/* text field */

html[data-theme="dark"] .support-composer .support-input-wrap {

  flex: 1 1 auto !important; min-width: 0 !important; position: relative !important;

  background: transparent !important; border: 0 !important; box-shadow: none !important;

  padding: 0 !important; margin: 0 !important; border-radius: 0 !important;

}

html[data-theme="dark"] .support-composer textarea {

  display: block !important; width: 100% !important;

  min-height: 26px !important; max-height: 120px !important; height: 26px;

  padding: 4px 34px 4px 8px !important; margin: 0 !important;

  background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important;

  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;

  caret-color: #fed41d !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.45 !important; resize: none !important;

}

html[data-theme="dark"] .support-composer textarea::placeholder {

  color: rgba(255, 255, 255, 0.42) !important;

  -webkit-text-fill-color: rgba(255, 255, 255, 0.42) !important;

  font-weight: 400 !important;

}

html[data-theme="dark"] .support-composer .support-emoji-toggle {

  position: absolute !important; right: 2px !important; top: 50% !important; transform: translateY(-50%) !important; bottom: auto !important;

  width: 28px !important; height: 28px !important; min-height: 0 !important; padding: 0 !important;

  border-radius: 50% !important; border: 0 !important; background: transparent !important;

  color: rgba(254, 212, 29, 0.8) !important; font-size: 1.05rem !important; display: grid !important; place-items: center !important;

  cursor: pointer !important; transition: all .2s ease !important;

}

html[data-theme="dark"] .support-composer .support-emoji-toggle:hover {

  color: #fed41d !important; background: rgba(254, 212, 29, 0.15) !important; transform: translateY(-50%) scale(1.15) !important;

}



/* send */

html[data-theme="dark"] .support-composer .support-send {

  flex: 0 0 38px !important; width: 38px !important; height: 38px !important; min-height: 0 !important;

  padding: 0 !important; margin: 0 !important; border-radius: 50% !important;

  display: grid !important; place-items: center !important;

  background: linear-gradient(135deg, #fed41d 0%, #f59e0b 100%) !important;

  border: 1px solid rgba(254, 212, 29, 0.4) !important;

  color: #0b0b0d !important;

  box-shadow: 0 4px 14px rgba(254, 212, 29, 0.35) !important; transition: all .2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

html[data-theme="dark"] .support-composer .support-send svg { width: 17px !important; height: 17px !important; transform: translateX(-1px); }

html[data-theme="dark"] .support-composer .support-send:not(:disabled):hover {

  transform: scale(1.08) !important;

  box-shadow: 0 6px 20px rgba(254, 212, 29, 0.5) !important;

}

html[data-theme="dark"] .support-composer .support-send:disabled {

  background: rgba(254, 212, 29, 0.08) !important;

  border-color: rgba(254, 212, 29, 0.15) !important;

  color: rgba(254, 212, 29, 0.4) !important;

  box-shadow: none !important; cursor: not-allowed !important; opacity: 0.65 !important;

}



/* =====================================================================

   BLOG TOOLBAR   categories + search

   ===================================================================== */

html[data-theme="dark"] .blog-toolbar-v2 {

  display: flex !important; align-items: center !important; justify-content: space-between !important;

  gap: .9rem !important; flex-wrap: wrap !important; margin: 1.5rem 0 1.25rem !important;

}

html[data-theme="dark"] .blog-cats-v2 {

  display: flex !important; flex-wrap: nowrap !important; gap: .45rem !important;

  overflow-x: auto !important; scrollbar-width: none; min-width: 0 !important; flex: 1 1 auto !important;

  padding: 2px !important;

}

html[data-theme="dark"] .blog-cats-v2::-webkit-scrollbar { display: none; }

html[data-theme="dark"] .blog-cat-btn {

  flex: 0 0 auto !important; white-space: nowrap !important;

  padding: .5rem 1rem !important; border-radius: 999px !important; font-size: .8rem !important; font-weight: 600 !important;

  background: rgba(255,255,255,.04) !important; color: #cfcfcf !important;

  border: 1px solid rgba(254,212,29,.18) !important; transition: all .2s !important; line-height: 1.1 !important;

}

html[data-theme="dark"] .blog-cat-btn:hover { color: #fed41d !important; border-color: rgba(254,212,29,.45) !important; }

html[data-theme="dark"] .blog-cat-btn.on {

  background: #fed41d !important; color: #0a0a0a !important; border-color: #fed41d !important;

  box-shadow: 0 4px 14px rgba(254,212,29,.3) !important;

}

html[data-theme="dark"] .blog-search-v2 {

  display: flex !important; align-items: center !important; gap: .5rem !important;

  flex: 0 1 300px !important; min-width: 220px !important; height: 42px !important;

  padding: 0 .9rem !important; margin: 0 !important; border-radius: 999px !important;

  background: #131313 !important; border: 1px solid rgba(254,212,29,.2) !important; color: #8a8a8a !important;

}

html[data-theme="dark"] .blog-search-v2:focus-within { border-color: rgba(254,212,29,.55) !important; box-shadow: 0 0 0 3px rgba(254,212,29,.08) !important; }

html[data-theme="dark"] .blog-search-v2 svg { color: #fed41d !important; flex: none !important; }

html[data-theme="dark"] .blog-search-v2 input {

  flex: 1 !important; min-width: 0 !important; height: 100% !important; background: transparent !important;

  border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 !important;

  color: #f1f1f1 !important; font-size: .88rem !important;

}



@media (max-width: 768px) {

  html[data-theme="dark"] .blog-toolbar-v2 { flex-direction: column !important; align-items: stretch !important; gap: .75rem !important; }

  html[data-theme="dark"] .blog-search-v2 { order: -1 !important; flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; }

  html[data-theme="dark"] .blog-cats-v2 { width: 100% !important; flex: 0 0 auto !important; }

  html[data-theme="dark"] .blog-cat-btn { padding: .45rem .9rem !important; font-size: .76rem !important; }

}



/* =====================================================================

   HERO POLISH & FAQ FIXES

   ===================================================================== */

@media (max-width: 768px) {

  /* Tagline smaller */

  html[data-theme="dark"] .hero2-sub {

    font-size: .8rem !important;

    line-height: 1.45 !important;

    color: #a8a8a8 !important;

    max-width: 100% !important;

    margin: .5rem 0 1.5rem 0 !important;

    text-align: left !important;

  }

  

  /* Remove stuck shine glitch */

  html[data-theme="dark"] .btn-shine::after { display: none !important; }



  /* Premium Buttons */

  html[data-theme="dark"] .hero-browse-btn {

    background: rgba(255,255,255,.05) !important;

    border: 1px solid rgba(255,255,255,.1) !important;

    color: #f1f1f1 !important;

  }

  html[data-theme="dark"] .hero-whatsapp-btn {

    background: #fed41d !important;

    color: #0a0a0a !important;

    border: none !important;

    font-weight: 700 !important;

    box-shadow: 0 4px 14px rgba(254,212,29,.25) !important;

  }

  html[data-theme="dark"] .hero-whatsapp-btn svg { color: #0a0a0a !important; }

}



/* FAQ Page fixes (Applies to Desktop & Mobile) */

html[data-theme="dark"] .faq-cta-actions .btn-dark {

  background: #fed41d !important;

  color: #0a0a0a !important;

  border: none !important;

  font-weight: 700 !important;

}

html[data-theme="dark"] .faq-category.is-active small {

  background: rgba(0,0,0,.15) !important;

  color: #0a0a0a !important;

}



/* Cart Drawer Polish */

html[data-theme="dark"] .mcd-count-badge {

  background: #fed41d !important;

  color: #0a0a0a !important;

}

html[data-theme="dark"] .mcd-footer {

  background: #111111 !important;

  border-top: 1px solid rgba(255,255,255,0.05) !important;

}

html[data-theme="dark"] .mcd-view-full-link {

  color: #888888 !important;

}

html[data-theme="dark"] .mcd-view-full-link:hover {

  color: #fed41d !important;

}

html[data-theme="dark"] .mcd-remove-btn {

  color: #666666 !important;

}

html[data-theme="dark"] .mcd-remove-btn:hover {

  color: #ef4444 !important; /* show red only on hover */

}

html[data-theme="dark"] .mcd-subtotal-row strong {

  color: #fff !important;

}

html[data-theme="dark"] .mcd-header { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }





  html[data-theme="dark"] body[data-page="index"] .hero2-title .hl,

  body[data-page="index"] .hero2-title .hl {

    display: inline-block !important;

    white-space: nowrap !important;

  }

}



/* =====================================================================

   FLASH MESSAGES AS TOASTS

   ===================================================================== */

.flash-wrap {

  position: fixed !important;

  left: 50% !important;

  bottom: 2rem !important;

  transform: translateX(-50%) !important;

  z-index: 10025 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

  pointer-events: none !important;

  margin: 0 !important;

  width: max-content !important;

  max-width: 90vw !important;

}



.flash {

  padding: .8rem 1.3rem !important;

  border-radius: 999px !important;

  background: #202020 !important;

  color: #fff !important;

  font-size: .84rem !important;

  font-weight: 700 !important;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.448) !important;

  border: 1px solid rgba(254, 212, 29, 0.25) !important;

  margin: 0 !important;

  text-align: center !important;

  animation: flashToastAnim 4s ease forwards !important;

}



.flash-error {

  border-color: rgba(239, 68, 68, 0.4) !important;

  color: #fca5a5 !important;

}

.flash-success {

  border-color: rgba(34, 197, 94, 0.4) !important;

  color: #86efac !important;

}



@keyframes flashToastAnim {

  0% { transform: translateY(24px); opacity: 0; }

  10% { transform: translateY(0); opacity: 1; }

  90% { transform: translateY(0); opacity: 1; }

  100% { transform: translateY(-24px); opacity: 0; visibility: hidden; }

}

/* FINAL HERO TITLE MOBILE FIX */

@media (max-width: 768px) {

  html[data-theme="dark"] body[data-page="index"] .hero2-title,

  html[data-theme="dark"] body[data-page="index"] .hero-title-mobile {

    font-size: 21px !important;

    line-height: 1.1 !important;

  }

  html[data-theme="dark"] body[data-page="index"] .hero2-title .hl {

    display: inline-block !important;

    white-space: nowrap !important;

    font-size: 21px !important;

    line-height: 1.1 !important;

  }

}



/* =====================================================================

   BOTTOM NAVBAR - ALL TABS BRAND YELLOW (#fed41d)

   ===================================================================== */

#appBottomNav,

#appBottomNav .app-nav-item,

#appBottomNav .app-nav-active-bg {

  --app-nav-accent: #fed41d !important;

}



/* =====================================================================

   MOBILE PRODUCT CARDS REFINEMENT (Home & Tools Pages)

   ===================================================================== */

@media (max-width: 768px) {

  /* 1. Tools Page Image: Eliminate white border / padding / background */

  html[data-theme="dark"] body[data-page="products"] .tl-card-top,

  body[data-page="products"] .tl-card-top {

    background: #141414 !important;

    padding: 0 !important;

    border: 1px solid rgba(255, 255, 255, 0.06) !important;

    border-radius: 14px !important;

    margin-bottom: 6px !important;

  }

  html[data-theme="dark"] body[data-page="products"] .tl-card-img,

  html[data-theme="dark"] body[data-page="products"] .tl-card-img.icon-mode,

  body[data-page="products"] .tl-card-img,

  body[data-page="products"] .tl-card-img.icon-mode {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    border-radius: 13px !important;

    background: transparent !important;

    padding: 0 !important;

  }



  /* 2. Tools Page Content: Verified & Instant Access Alignment */

  .tl-verified::after {

    display: none !important;

    content: none !important;

  }

  html[data-theme="dark"] .tl-card-kicker,

  .tl-card-kicker {

    margin-bottom: 2px !important;

    gap: 4px !important;

  }

  html[data-theme="dark"] .tl-verified,

  .tl-verified {

    color: #10b981 !important;

    font-size: 11px !important;

    font-weight: 700 !important;

  }

  html[data-theme="dark"] .tl-compact-meta,

  .tl-compact-meta {

    margin-bottom: 3px !important;

    min-height: 0 !important;

    gap: 4px !important;

  }

  html[data-theme="dark"] .tl-meta-access,

  .tl-meta-access {

    color: #fed41d !important;

    font-size: 11px !important;

    font-weight: 700 !important;

  }



  /* 3. Tools Page Buttons: Yellow Get Access button */

  html[data-theme="dark"] body[data-page="products"] .tl-btn-get,

  body[data-page="products"] .tl-btn-get {

    background: #fed41d !important;

    color: #0a0a0a !important;

    border: none !important;

    font-weight: 800 !important;

    height: 38px !important;

    min-height: 38px !important;

    border-radius: 11px !important;

    font-size: 12px !important;

    box-shadow: 0 4px 14px rgba(254, 212, 29, 0.25) !important;

  }

  html[data-theme="dark"] body[data-page="products"] .tl-btn-cart,

  body[data-page="products"] .tl-btn-cart {

    background: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    color: #ffffff !important;

    height: 38px !important;

    min-height: 38px !important;

    width: 38px !important;

    min-width: 38px !important;

    border-radius: 11px !important;

  }



  /* 4. Home Page Cards Price Size & Empty Space Reduction */

  html[data-theme="dark"] body[data-page="index"] .popular-tools-grid .tl-price-row,

  body[data-page="index"] .popular-tools-grid .tl-price-row {

    min-height: 0 !important;

    gap: 6px !important;

    margin-top: 1px !important;

    margin-bottom: 2px !important;

    padding-top: 0 !important;

  }

  html[data-theme="dark"] body[data-page="index"] .popular-tools-grid .tl-price,

  body[data-page="index"] .popular-tools-grid .tl-price,

  html[data-theme="dark"] .tl-card .tl-price {

    font-size: 19px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    letter-spacing: -0.01em !important;

    color: #ffffff !important;

  }

  html[data-theme="dark"] body[data-page="index"] .popular-tools-grid .tl-price-old,

  body[data-page="index"] .popular-tools-grid .tl-price-old {

    font-size: 10px !important;

    line-height: 1 !important;

    color: #888888 !important;

  }

  html[data-theme="dark"] body[data-page="index"] .popular-tools-grid .tl-card-body,

  body[data-page="index"] .popular-tools-grid .tl-card-body {

    padding: 6px 4px 4px !important;

    gap: 3px !important;

  }

  html[data-theme="dark"] body[data-page="index"] .popular-tools-grid .tl-actions,

  body[data-page="index"] .popular-tools-grid .tl-actions {

    gap: 5px !important;

    margin-top: 2px !important;

  }

}





/* =====================================================================

   DESKTOP HERO TITLE: STRICTLY 2 LINES (NOT 3)

   ===================================================================== */

@media (min-width: 769px) {

  .hero2-title,

  html[data-theme="dark"] .hero2-title {

    font-size: clamp(2.3rem, 4.2vw, 3.6rem) !important;

    line-height: 0.95 !important;

  }

  .hero2-title .hl,

  .hero2-title .hero-desktop-only,

  .hero2-title .hero-desktop-only .hl {

    display: inline-block !important;

    white-space: nowrap !important;

  }

}



/* =====================================================================

   PRODUCT DETAIL PAGE: BACK BUTTON & TOP NAVBAR SPACING

   ===================================================================== */

.pd-top-bar {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  margin-top: 1.6rem !important;

  margin-bottom: 1.2rem !important;

  flex-wrap: wrap !important;

}



.pd-back-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 6px 14px !important;

  background: rgba(254, 212, 29, 0.08) !important;

  border: 1px solid rgba(254, 212, 29, 0.3) !important;

  border-radius: 999px !important;

  color: #fed41d !important;

  font-size: 12px !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  cursor: pointer !important;

  transition: all .2s ease !important;

  flex-shrink: 0 !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;

}



.pd-back-btn svg {

  transition: transform .2s ease !important;

  color: #fed41d !important;

}



.pd-back-btn:hover {

  background: #fed41d !important;

  color: #0a0a0a !important;

  border-color: #fed41d !important;

}



.pd-back-btn:hover svg {

  transform: translateX(-3px) !important;

  color: #0a0a0a !important;

}



.pd-crumb {

  display: inline-flex !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 6px !important;

  margin: 0 !important;

  padding: 0 !important;

  font-size: 12px !important;

}



.pd-crumb a {

  color: #fed41d !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  transition: opacity .15s !important;

}



.pd-crumb a:hover {

  text-decoration: underline !important;

  opacity: .85 !important;

}



.pd-crumb-sep {

  color: rgba(255, 255, 255, 0.25) !important;

  margin: 0 1px !important;

  font-size: 11px !important;

}



.pd-crumb-curr {

  color: #888888 !important;

  font-weight: 500 !important;

}



@media (max-width: 768px) {

  body[data-page="product"] > .container {

    padding-top: 24px !important;

  }

  .pd-top-bar {

    margin-top: 26px !important;

    margin-bottom: 12px !important;

    gap: 10px !important;

  }

  .pd-back-btn {

    padding: 5px 12px !important;

    font-size: 11px !important;

  }

  .pd-crumb {

    font-size: 10.5px !important;

  }

}





/* =====================================================================

   PREMIUM SMOOTH FOOTER REVEAL (Curtain Reveal with Rounded Page Endings)

   ===================================================================== */

@media (min-width: 1025px) {

  /* Page ends at the screen with rounded endings on ALL pages */

  .site-main,

  .footer-reveal-ready .site-main,

  html .site-main,

  html.footer-reveal-ready .site-main,

  html[data-theme="dark"] .site-main,

  html[data-theme="dark"].footer-reveal-ready .site-main {

    position: relative !important;

    z-index: 5 !important;

    min-height: 100vh !important;

    margin-bottom: var(--footer-reveal-height, 420px) !important;

    border-bottom-left-radius: 34px !important;

    border-bottom-right-radius: 34px !important;

    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;

    background-color: var(--bg) !important;

    background-image:

      linear-gradient(var(--grid-line) 1px, transparent 1px),

      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;

    background-size: 40px 40px, 40px 40px !important;

    transform: translateZ(0);

  }



  /* Fixed footer revealed underneath as user scrolls */

  .site-footer,

  .footer-reveal-ready .site-footer,

  html .site-footer,

  html.footer-reveal-ready .site-footer,

  html[data-theme="dark"] .site-footer,

  html[data-theme="dark"].footer-reveal-ready .site-footer {

    position: fixed !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    z-index: 1 !important;

    width: 100% !important;

    min-height: 0 !important;

    height: auto !important;

    margin: 0 !important;

    padding-top: 2.2rem !important;

    border-top: none !important;

    box-shadow: none !important;

    background: #080808 !important;

    visibility: visible !important;

  }

}



@media (max-width: 1024px) {

  .site-main,

  .footer-reveal-ready .site-main,

  html .site-main,

  html.footer-reveal-ready .site-main {

    margin-bottom: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

  }

  .site-footer,

  .footer-reveal-ready .site-footer,

  html .site-footer,

  html.footer-reveal-ready .site-footer {

    position: relative !important;

    inset: auto !important;

    z-index: 10 !important;

  }

}



/* Remove any blue-black strip, -42px shadow, or reveal head dividers between page and footer */

.footer-reveal-head,

.site-footer::before {

  display: none !important;

}



.site-footer {

  box-shadow: none !important;

  border-top: none !important;

}



/* Ensure testimonials / stats band before footer has neat bottom padding */

#reviews,

.testi-stats {

  margin-bottom: 0 !important;

}

.testi-section {

  padding-bottom: 3.5rem !important;

}



/* FAQ CTA Button (Brand yellow with dark text) */

html[data-theme="dark"] .faq-cta .btn-dark,

html[data-theme="dark"] .faq-cta-actions .btn-dark,

.faq-cta .btn-dark,

.faq-cta-actions .btn-dark {

  background: #fed41d !important;

  color: #0a0a0a !important;

  border: none !important;

  font-weight: 700 !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;

}

html[data-theme="dark"] .faq-cta .btn-dark:hover,

html[data-theme="dark"] .faq-cta-actions .btn-dark:hover,

.faq-cta .btn-dark:hover,

.faq-cta-actions .btn-dark:hover {

  background: #ffe047 !important;

  color: #0a0a0a !important;

  transform: translateY(-2px);

}

html[data-theme="dark"] .faq-cta .btn-dark svg,

.faq-cta .btn-dark svg {

  color: #0a0a0a !important;

}



/* =====================================================================
   MOBILE ENFORCEMENT: 100% PURPLE ELIMINATION & GOLD/DARK COHESION
   ===================================================================== */
@media (max-width: 1024px) {
  :root,
  html,
  body,
  html[data-theme="dark"] {
    --mobile-purple: #fed41d !important;
    --mobile-navy: #141416 !important;
    --mobile-line: rgba(255, 255, 255, 0.09) !important;
    --mobile-surface: #141417 !important;
    --mo-violet: #fed41d !important;
    --pm-violet: #fed41d !important;
    --pd-violet: #fed41d !important;
    --pd-accent: #fed41d !important;
    --pd-accent-dark: #fed41d !important;
    --purple: #fed41d !important;
  }

  /* Home Hero Card */
  body[data-page="index"] .hero2-copy {
    background: linear-gradient(145deg, #161619 0%, #0e0e11 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  body[data-page="index"] .hero2-copy::before {
    background: linear-gradient(90deg, #fed41d, #ffe476) !important;
  }

  /* Search input & buttons */
  .hero-search-icon {
    color: #fed41d !important;
  }

  .hero-search-input {
    background: #111113 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  .hero-search-input:focus {
    border-color: #fed41d !important;
    box-shadow: 0 0 0 3px rgba(254, 212, 29, 0.18) !important;
  }

  .hero-search-btn {
    background: #fed41d !important;
    color: #0a0a0a !important;
  }

  .hero-search-btn svg {
    stroke: #0a0a0a !important;
  }

  /* Stat trust cells (1000+ creators, 4.9 rating, etc) */
  body[data-page="index"] .stat-cell {
    background: #131316 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  }

  body[data-page="index"] .stat-cell .stat-ico {
    background: rgba(254, 212, 29, 0.1) !important;
    color: #fed41d !important;
  }

  body[data-page="index"] .stat-cell .num {
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  body[data-page="index"] .stat-cell .lbl {
    color: #a1a1aa !important;
  }

  /* Floating Support Chat FAB */
  .mob-chat-fab {
    background: linear-gradient(135deg, #fed41d, #f5be0b) !important;
    color: #0a0a0a !important;
    box-shadow: 0 6px 20px rgba(254, 212, 29, 0.38), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

  .mob-chat-fab svg {
    stroke: #0a0a0a !important;
  }

  .mob-chat-fab-pulse {
    background: rgba(254, 212, 29, 0.35) !important;
  }

  /* Service note on mobile */
  .hero-service-note {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .hero-service-icon {
    color: #fed41d !important;
    background: rgba(254, 212, 29, 0.1) !important;
  }

  /* Catalog / products chips */
  .tl-mobile-chip.active {
    background: #fed41d !important;
    color: #0a0a0a !important;
    border-color: #fed41d !important;
    font-weight: 800 !important;
  }

  /* Tools Catalog Hero Card - Pure Obsidian Dark */
  body[data-page="products"] .tl-hero,
  [data-theme="dark"] body[data-page="products"] .tl-hero {
    background: transparent !important;
  }

  body[data-page="products"] .tl-hero-card,
  [data-theme="dark"] body[data-page="products"] .tl-hero-card {
    background: linear-gradient(145deg, #161619 0%, #0e0e11 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  }

  /* Product Details Image Wrapper - Neutral Dark (No Purple Frame) */
  body[data-page="product"],
  [data-theme="dark"] body[data-page="product"] {
    background: #0a0a0a !important;
  }

  body[data-page="product"] .pd-imgwrap,
  [data-theme="dark"] body[data-page="product"] .pd-imgwrap {
    background: #141416 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
  }

  body[data-page="product"] .pd-imgcard,
  [data-theme="dark"] body[data-page="product"] .pd-imgcard {
    background: #101012 !important;
    border: none !important;
  }

  /* Creator Packs Page - Clean Dark Surfaces */
  body[data-page="packs"],
  [data-theme="dark"] body[data-page="packs"] {
    background-color: #0a0a0a !important;
  }

  body[data-page="packs"] .packs-hero,
  [data-theme="dark"] body[data-page="packs"] .packs-hero {
    background: linear-gradient(145deg, #161619 0%, #0e0e11 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  }

  body[data-page="packs"] .pm-search,
  [data-theme="dark"] body[data-page="packs"] .pm-search,
  body[data-page="packs"] .pm-filter-form,
  [data-theme="dark"] body[data-page="packs"] .pm-filter-form {
    background: #111113 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  body[data-page="packs"] .empty-state,
  [data-theme="dark"] body[data-page="packs"] .empty-state {
    background: #141417 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
  }
}

/* =====================================================================
   PRODUCT DETAIL TABS: STRICT 1-LINE AUTO-ADJUSTING LAYOUT (4 OR 5 TABS)
   ===================================================================== */
.pd-tab-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.pd-tab-bar .pd-tab-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* Tab panes - strictly show only active pane */
.pd-tab-pane {
  display: none !important;
}

.pd-tab-pane.pd-tab-on {
  display: block !important;
  animation: pd-panel-in .32s cubic-bezier(.22, 1, .36, 1) both;
}

/* Desktop 5-tab sizing */
@media (min-width: 769px) {
  .pd-tab-bar.has-5-tabs,
  .pd-tab-bar:has(> :nth-child(5)) {
    gap: .3rem !important;
  }
  .pd-tab-bar.has-5-tabs .pd-tab-btn,
  .pd-tab-bar:has(> :nth-child(5)) .pd-tab-btn {
    padding: .5rem .5rem !important;
    font-size: .8rem !important;
  }
}

/* Mobile 5-tab sizing */
@media (max-width: 768px) {
  body[data-page="product"] .pd-tab-bar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  body[data-page="product"] .pd-tab-bar.has-5-tabs,
  body[data-page="product"] .pd-tab-bar:has(> :nth-child(5)) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3.5px !important;
    padding: 4px 0 10px !important;
  }

  body[data-page="product"] .pd-tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body[data-page="product"] .pd-tab-bar.has-5-tabs .pd-tab-btn,
  body[data-page="product"] .pd-tab-bar:has(> :nth-child(5)) .pd-tab-btn {
    min-height: 34px !important;
    padding: 6px 1.5px !important;
    font-size: 7.8px !important;
    letter-spacing: -0.025em !important;
  }
}

@media (max-width: 370px) {
  body[data-page="product"] .pd-tab-bar.has-5-tabs,
  body[data-page="product"] .pd-tab-bar:has(> :nth-child(5)) {
    gap: 2.5px !important;
  }

  body[data-page="product"] .pd-tab-bar.has-5-tabs .pd-tab-btn,
  body[data-page="product"] .pd-tab-bar:has(> :nth-child(5)) .pd-tab-btn {
    padding: 5px 1px !important;
    font-size: 7.2px !important;
    letter-spacing: -0.035em !important;
  }
}



/* ==========================================================================
   PRODUCT PAYMENT ROW - 4 CHIPS STRICTLY IN 1 SINGLE LINE
   ========================================================================== */
.pd-pay-row,
body[data-page="product"] .pd-pay-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.pd-pay-chip,
body[data-page="product"] .pd-pay-chip {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.pd-pay-chip img {
  width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.pd-pay-chip svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .pd-pay-row,
  body[data-page="product"] .pd-pay-row {
    gap: 5px !important;
    margin-top: 12px !important;
    padding-bottom: 7px !important;
  }

  .pd-pay-chip,
  body[data-page="product"] .pd-pay-chip {
    padding: 6px 4px !important;
    font-size: 10px !important;
    letter-spacing: -0.02em !important;
    gap: 4px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
  }

  .pd-pay-chip img {
    width: 14px !important;
    height: 14px !important;
  }

  .pd-pay-chip svg {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 375px) {
  .pd-pay-row,
  body[data-page="product"] .pd-pay-row {
    gap: 3.5px !important;
  }

  .pd-pay-chip,
  body[data-page="product"] .pd-pay-chip {
    padding: 5px 2px !important;
    font-size: 9.2px !important;
    letter-spacing: -0.03em !important;
    gap: 3px !important;
  }

  .pd-pay-chip img {
    width: 13px !important;
    height: 13px !important;
  }

  .pd-pay-chip svg {
    width: 11px !important;
    height: 11px !important;
  }
}

/* ====================================================================
   PRODUCT TAB POINTS REDESIGN (CARDS & ANIMATION)
   ==================================================================== */
[data-theme="dark"] .inc-item,
[data-theme="dark"] .fact-v2,
[data-theme="dark"] .pd-step {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  opacity: 0;
  transform: translateY(15px);
}

[data-theme="dark"] .pd-visible {
  animation: tabItemSlideIn 0.4s forwards cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes tabItemSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-theme="dark"] .pd-visible:nth-child(1) { animation-delay: 0.05s; }
[data-theme="dark"] .pd-visible:nth-child(2) { animation-delay: 0.1s; }
[data-theme="dark"] .pd-visible:nth-child(3) { animation-delay: 0.15s; }
[data-theme="dark"] .pd-visible:nth-child(4) { animation-delay: 0.2s; }
[data-theme="dark"] .pd-visible:nth-child(5) { animation-delay: 0.25s; }
[data-theme="dark"] .pd-visible:nth-child(6) { animation-delay: 0.3s; }
[data-theme="dark"] .pd-visible:nth-child(7) { animation-delay: 0.35s; }
[data-theme="dark"] .pd-visible:nth-child(8) { animation-delay: 0.4s; }
[data-theme="dark"] .pd-visible:nth-child(9) { animation-delay: 0.45s; }
[data-theme="dark"] .pd-visible:nth-child(10) { animation-delay: 0.5s; }

[data-theme="dark"] .inc-item:hover,
[data-theme="dark"] .fact-v2:hover,
[data-theme="dark"] .pd-step:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* What's Included */
[data-theme="dark"] .inc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
[data-theme="dark"] .inc-item {
  gap: 14px !important;
}
[data-theme="dark"] .inc-check {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  background: rgba(255, 212, 29, 0.12) !important;
  color: #ffe885 !important;
  border-radius: 50% !important;
}
[data-theme="dark"] .inc-check svg {
  width: 14px !important;
  height: 14px !important;
}

/* Quick Facts */
[data-theme="dark"] .facts-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
[data-theme="dark"] .fact-v2 {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 16px !important;
}
[data-theme="dark"] .fact-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
[data-theme="dark"] .fact-val {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 500;
}

/* How It Works */
[data-theme="dark"] .pd-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme="dark"] .pd-step {
  align-items: flex-start !important;
  gap: 18px !important;
  padding: 18px !important;
}
[data-theme="dark"] .pd-step-num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffd41d 0%, #f6bd10 100%) !important;
  color: #000 !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(254, 212, 29, 0.3) !important;
}
[data-theme="dark"] .pd-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-theme="dark"] .pd-step-body h3 {
  color: #fff !important;
  font-size: 1.05rem !important;
  margin: 0 !important;
}
[data-theme="dark"] .pd-step-body p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}


/* ====================================================================
   COMPACT TRUST CARDS (MOBILE)
   ==================================================================== */
@media (max-width: 850px) {
  body[data-page="product"] .pd-trust-row {
    gap: 5px !important;
  }

  body[data-page="product"] .pd-trust-cell {
    min-height: 75px !important;
    padding: 8px 6px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    justify-content: flex-start !important;
  }

  body[data-page="product"] .pd-trust-cell > svg {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
    margin-bottom: 2px !important;
  }

  body[data-page="product"] .pd-trust-cell div {
    gap: 2px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body[data-page="product"] .pd-trust-cell strong {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body[data-page="product"] .pd-trust-cell span {
    font-size: 8px !important;
    line-height: 1.15 !important;
  }
}

/* ====================================================================
   FIX MAIN IMAGE CONTAINER CORNERS
   ==================================================================== */
body[data-page="product"] .pd-imgwrap,
[data-theme="dark"] body[data-page="product"] .pd-imgwrap {
  border-radius: 26px !important;
}

@media (max-width: 850px) {
  body[data-page="product"] .pd-imgwrap,
  [data-theme="dark"] body[data-page="product"] .pd-imgwrap {
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  body[data-page="product"] .pd-imgcard,
  [data-theme="dark"] body[data-page="product"] .pd-imgcard {
    min-height: unset !important;
    height: auto !important;
    aspect-ratio: 16 / 9.2 !important;
    max-height: 220px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  body[data-page="product"] .pd-imgcard img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  body[data-page="product"] .pd-imgcard .initial {
    font-size: 3.5rem !important;
  }

  body[data-page="product"] .pd-vbadge {
    top: 10px !important;
    left: 10px !important;
    font-size: 10px !important;
    padding: 3px 10px !important;
  }

  body[data-page="product"] .pd-stock {
    bottom: 10px !important;
    left: 10px !important;
    font-size: 10.5px !important;
    padding: 3px 10px !important;
  }
}

/* ====================================================================
   FIX ACCOUNT "EXPLORE PACKS" BUTTON
   ==================================================================== */
[data-theme="dark"] body[data-page="account"] .mo-order-empty a {
  background: linear-gradient(135deg, #ffd41d 0%, #f6bd10 100%) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(254, 212, 29, 0.25) !important;
  border-radius: 12px !important;
}

/* ====================================================================
   HERO SUBTITLE INCREASE ON MOBILE
   ==================================================================== */
@media (max-width: 768px) {
  html[data-theme="dark"] .hero2-sub,
  body[data-page="index"] .hero2-sub {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }
}

/* ====================================================================
   HERO TITLE INCREASE ON MOBILE (AND SUBTITLE DECREASE)
   ==================================================================== */
@media (max-width: 768px) {
  html[data-theme="dark"] body[data-page="index"] .hero2-title,
  html[data-theme="dark"] body[data-page="index"] .hero-title-mobile {
    font-size: 42px !important;
    line-height: 0.95 !important;
  }
}

/* ====================================================================
   PRODUCT CARD TITLE FONT TO MATCH HERO HEADING
   ==================================================================== */
.pcard h3,
.pcard h3 a {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ====================================================================
   ANNOUNCEMENT BAR SPARKLE ICON FIX
   ==================================================================== */
.announcement-spark,
.announcement-spark svg {
  color: #000000 !important;
  fill: currentColor;
}

/* ====================================================================
   DEAL OF THE DAY BUTTON FIX
   ==================================================================== */
.dk-foot .btn {
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* ====================================================================
   MOBILE HERO CTA BUTTONS BALANCED FIT
   ==================================================================== */
@media (max-width: 768px) {
  body[data-page="index"] .hero-cta,
  html[data-theme="dark"] body[data-page="index"] .hero-cta,
  html[data-theme="dark"] .hero-cta {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body[data-page="index"] .hero-cta .btn,
  html[data-theme="dark"] body[data-page="index"] .hero-cta .btn,
  html[data-theme="dark"] .hero-cta .btn {
    min-width: 0 !important;
    padding: 0 8px !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-sizing: border-box !important;
    text-overflow: clip !important;
  }

  body[data-page="index"] .hero-cta .btn svg,
  html[data-theme="dark"] body[data-page="index"] .hero-cta .btn svg,
  html[data-theme="dark"] .hero-cta .btn svg {
    flex-shrink: 0 !important;
    width: 15px !important;
    height: 15px !important;
  }
}

@media (max-width: 375px) {
  body[data-page="index"] .hero-cta,
  html[data-theme="dark"] body[data-page="index"] .hero-cta,
  html[data-theme="dark"] .hero-cta {
    grid-template-columns: 1fr 1.18fr !important;
    gap: 6px !important;
  }

  body[data-page="index"] .hero-cta .btn,
  html[data-theme="dark"] body[data-page="index"] .hero-cta .btn,
  html[data-theme="dark"] .hero-cta .btn {
    font-size: 10.5px !important;
    padding: 0 6px !important;
    gap: 4px !important;
  }
}