/* ==========================================================================
   SubStore — Cyan / Navy Design System
   Modern, trustworthy, animated.
   ========================================================================== */

:root {
  --ink: #102536;
  --text: #244052;
  --text-muted: #607789;
  --text-faint: #94A3B8;
  --bg: #F6FBFD;
  --surface: #FFFFFF;
  --border: #DCEAF0;
  --border-strong: #BBCFD9;

  --brand-cyan: #0AADDB;
  --primary: #087DA4;
  --primary-dark: #075D80;
  --primary-light: #E8F9FF;
  --primary-mid: #BDECF7;

  --teal: #12A5C6;
  --teal-light: #D9F6FC;

  --success: #059669;
  --success-soft: #DCFCE7;
  --warn: #B45309;
  --warn-soft: #FEF3C7;
  --danger: #DC2626;
  --danger-soft: #FEE2E2;
  --gold: #F59E0B;

  --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 24px 48px -12px rgba(15,23,42,.18);
  --shadow-glow: 0 0 0 4px rgba(10,173,219,.16);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Sora', 'Inter', -apple-system, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; color: var(--ink); margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
hr { border: none; border-top: 1px solid var(--border); margin: 30px 0; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* ---------- Scroll reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: .03s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: .09s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: .15s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: .21s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: .27s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: .33s; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: .39s; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: .45s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 12px; font-weight: 600; font-size: .93rem;
  cursor: pointer; border: 1px solid transparent; transition: all .22s var(--ease);
  font-family: var(--font-body); position: relative;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(8,125,164,.20); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(8,125,164,.28); }
.btn-ghost { background: #fff; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-dark); transform: translateY(-2px); }
.btn-outline { background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-secondary { background: var(--primary-light); color: var(--primary-dark); }
.btn-secondary:hover { background: var(--primary-mid); }
.btn-large { padding: 16px 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-disabled { background: #EDEFF3; color: var(--text-faint); cursor: not-allowed; box-shadow: none; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: .82rem; }

/* ---------- Header ---------- */
.site-header {
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow .25s, border-color .25s;
}
.site-header.scrolled { border-color: var(--border); box-shadow: 0 2px 12px rgba(15,23,42,.05); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--teal)); color: #fff; font-size: .88rem; font-weight: 800; box-shadow: 0 4px 10px rgba(8,125,164,.25); }
.main-nav { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.main-nav > a { font-weight: 500; font-size: .92rem; color: var(--text-muted); transition: .15s; position: relative; }
.main-nav > a:hover { color: var(--primary-dark); }
.dropdown { position: relative; }
.dropdown > a { display: flex; align-items: center; gap: 4px; }
.caret { font-size: .7rem; }
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 12px); left: -12px; background: var(--surface);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border); border-radius: var(--radius); min-width: 220px; padding: 8px; z-index: 50;
}
.dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: .88rem; color: var(--text); }
.dropdown-menu a:hover { background: var(--primary-light); color: var(--primary-dark); }
.dd-icon { font-size: 1rem; }
.dropdown:hover .dropdown-menu { display: block; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.search-form { display: flex; }
.search-form input { padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px 0 0 10px; width: 170px; font-size: .88rem; background: var(--bg); }
.search-form input:focus { outline: none; border-color: var(--primary); }
.search-form button { border: 1px solid var(--border); border-left: none; border-radius: 0 10px 10px 0; background: var(--bg); cursor: pointer; padding: 0 12px; color: var(--text-muted); display: flex; align-items: center; }
.nav-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--ink); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 96px 0 76px; overflow: hidden; background: linear-gradient(180deg, var(--primary-light) 0%, var(--bg) 100%); }
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; z-index: 0;
  animation: float 9s ease-in-out infinite;
}
.hero::before { width: 380px; height: 380px; background: radial-gradient(circle, #19BCEF, transparent 70%); top: -140px; right: -80px; }
.hero::after { width: 320px; height: 320px; background: radial-gradient(circle, #B7EDFC, transparent 70%); bottom: -160px; left: -100px; animation-delay: -4s; }
@keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-24px) scale(1.06); } }

.hero-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 60px; flex-wrap: wrap; }
.hero-text { max-width: 560px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--primary-dark); background: #fff; border: 1px solid var(--primary-mid); padding: 7px 16px; border-radius: 20px; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
.eyebrow::before { content: '●'; color: var(--success); font-size: .6rem; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.hero-text h1 { font-size: 2.9rem; line-height: 1.14; margin-bottom: 18px; font-weight: 700; }
.hero-text h1 .accent-text { color: var(--primary); position: relative; }
.hero-text p { color: var(--text-muted); font-size: 1.08rem; max-width: 520px; }
.hero-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 34px; font-size: .85rem; color: var(--text-muted); font-weight: 500; }
.hero-trust span { display: flex; align-items: center; gap: 6px; }

.hero-visual { position: relative; width: 340px; height: 340px; flex-shrink: 0; }
.hero-card {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 150px; height: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); animation: drift 6s ease-in-out infinite;
}
@keyframes drift { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
.hero-card-icon { font-size: 2.1rem; }
.hero-card-label { font-size: .8rem; font-weight: 600; color: var(--text); }
.hero-card-1 { top: 0; left: 44px; animation-delay: 0s; }
.hero-card-2 { top: 118px; left: 178px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); animation-delay: -2s; }
.hero-card-2 .hero-card-label { color: #fff; }
.hero-card-3 { top: 214px; left: 8px; animation-delay: -4s; }

/* ---------- Stats bar ---------- */
.stats-bar { background: var(--ink); padding: 44px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; }
.stat-item { color: #fff; }
.stat-number { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; display: block; background: linear-gradient(135deg, #19BCEF, #B7EDFC); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { color: #94A3B8; font-size: .85rem; margin-top: 6px; }

/* ---------- Sections ---------- */
.section { padding: 76px 0; }
.alt-bg { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-title { font-size: 2rem; margin-bottom: 10px; text-align: center; font-weight: 700; }
.section-sub { text-align: center; color: var(--text-muted); margin-bottom: 40px; font-size: .99rem; }

/* ---------- Category grid ---------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 32px; }
.category-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 18px;
  text-align: center; transition: all .25s var(--ease); position: relative; overflow: hidden;
}
.category-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary-light), transparent); opacity: 0; transition: opacity .25s; }
.category-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-5px); }
.category-card:hover::before { opacity: 1; }
.cat-icon { font-size: 2rem; display: block; margin-bottom: 10px; position: relative; z-index: 1; transition: transform .25s; }
.category-card:hover .cat-icon { transform: scale(1.15) rotate(-4deg); }
.cat-name { font-weight: 600; font-size: .92rem; position: relative; z-index: 1; }

/* ---------- Product grid & card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; margin-top: 26px; }
.product-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  transition: all .28s var(--ease); display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-lg); border-color: var(--primary); transform: translateY(-6px); }
.product-img { position: relative; aspect-ratio: 1 / 1; background: #E8F5F9; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.product-card:hover .product-img img { transform: scale(1.07); }
.badge-discount { position: absolute; top: 12px; left: 12px; background: var(--danger); color: #fff; padding: 4px 11px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.badge-discount.large { position: static; display: inline-block; margin-top: 10px; }
.badge-outofstock { position: absolute; top: 12px; right: 12px; background: var(--text-muted); color: #fff; padding: 4px 11px; border-radius: 20px; font-size: .72rem; }
.product-body { padding: 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product-cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); font-weight: 700; }
.product-name { font-size: 1.03rem; margin: 0; font-family: var(--font-display); font-weight: 700; }
.product-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.price { font-weight: 700; color: var(--ink); font-size: 1.15rem; font-family: var(--font-display); }
.old-price { text-decoration: line-through; color: var(--text-faint); font-size: .85rem; }
.product-card .btn { margin-top: 6px; }

/* ---------- Trust / security badges ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; }
.trust-grid > div { padding: 8px; }
.trust-icon-box { width: 56px; height: 56px; border-radius: 16px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 14px; }
.trust-grid h3 { margin-bottom: 8px; font-size: 1.02rem; }
.trust-grid p { color: var(--text-muted); font-size: .9rem; margin: 0; }

/* ---------- Testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 30px; }
.testimonial-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: all .25s var(--ease); }
.testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.stars { color: var(--gold); font-size: .95rem; letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-quote { font-size: .94rem; color: var(--text); margin-bottom: 18px; line-height: 1.6; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--teal)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.author-name { font-weight: 600; font-size: .88rem; }
.author-meta { font-size: .78rem; color: var(--text-faint); }

/* ---------- FAQ ---------- */
.faq-list details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 22px; margin-bottom: 10px; transition: border-color .2s; }
.faq-list details:hover { border-color: var(--border-strong); }
.faq-list summary { font-weight: 600; cursor: pointer; font-size: .96rem; }
.faq-list p { margin: 12px 0 0; color: var(--text-muted); font-size: .92rem; }

/* ---------- CTA banner ---------- */
.cta-banner { background: linear-gradient(135deg, var(--primary), var(--primary-dark) 60%, var(--teal)); border-radius: var(--radius-lg); padding: 56px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-banner h2 { color: #fff; font-size: 1.8rem; margin-bottom: 10px; }
.cta-banner p { color: #D9F6FD; margin-bottom: 26px; font-size: 1rem; }
.cta-banner .btn-primary { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-md); }
.cta-banner .btn-primary:hover { background: #F8FAFC; transform: translateY(-2px); }

/* ---------- Shop layout ---------- */
.shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 36px; align-items: start; }
.shop-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: sticky; top: 96px; }
.shop-sidebar h3 { font-size: .92rem; margin-bottom: 12px; }
.filter-list a { display: block; padding: 9px 0; color: var(--text-muted); font-size: .9rem; border-bottom: 1px solid var(--border); transition: .15s; }
.filter-list li:last-child a { border-bottom: none; }
.filter-list a.active, .filter-list a:hover { color: var(--primary-dark); font-weight: 600; padding-left: 4px; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.shop-toolbar h1 { font-size: 1.5rem; }
.shop-toolbar small { color: var(--text-muted); font-weight: 400; font-size: .9rem; }
.sort-form select { padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: .87rem; background: var(--surface); }
.breadcrumbs { color: var(--text-faint); font-size: .84rem; margin-bottom: 20px; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--primary-dark); }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 36px; }
.pagination a { padding: 9px 15px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: .88rem; color: var(--text-muted); transition: .15s; }
.pagination a:hover { border-color: var(--primary); color: var(--primary-dark); }
.pagination a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Product detail ---------- */
.product-detail { display: grid; grid-template-columns: 440px 1fr; gap: 48px; margin-bottom: 48px; }
.product-gallery img { border-radius: var(--radius); border: 1px solid var(--border); width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.product-info h1 { margin: 8px 0 12px; font-size: 1.85rem; }
.product-price-block { display: flex; align-items: baseline; gap: 14px; margin: 18px 0; }
.price-large { font-size: 2.2rem; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.old-price-large { text-decoration: line-through; color: var(--text-faint); font-size: 1.1rem; }
.duration-tag { background: var(--primary-light); border: 1px solid var(--primary-mid); padding: 5px 12px; border-radius: 20px; font-size: .8rem; color: var(--primary-dark); font-weight: 600; }
.stock-status { font-weight: 600; margin-bottom: 20px; font-size: .92rem; color: var(--text-muted); }
.status-out_of_stock { color: var(--danger); }
.status-limited { color: var(--warn); }
.status-in_stock { color: var(--success); }
.plan-select { margin: 20px 0; }
.plan-select h3 { font-size: .92rem; margin-bottom: 10px; }
.plan-option { display: block; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; margin-bottom: 8px; cursor: pointer; font-size: .92rem; transition: .18s; }
.plan-option:hover { border-color: var(--primary); background: var(--primary-light); }
.trust-strip { display: flex; gap: 18px; flex-wrap: wrap; margin: 24px 0; font-size: .84rem; color: var(--text-muted); }
.features-list h3, .product-description h3 { font-size: .95rem; margin-bottom: 10px; }
.features-list ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.features-list li { padding-left: 26px; position: relative; font-size: .92rem; color: var(--text); }
.features-list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--success-soft); color: var(--success); font-weight: 700; font-size: .68rem; display: flex; align-items: center; justify-content: center; }
.product-description { margin-top: 24px; font-size: .94rem; color: var(--text); }

/* ---------- Articles section (below product) ---------- */
.product-articles { margin-top: 64px; border-top: 1px solid var(--border); padding-top: 44px; }
.product-articles h2 { margin-bottom: 24px; font-size: 1.5rem; }
.article-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; }
.article-block img { border-radius: var(--radius-sm); margin-bottom: 16px; max-height: 320px; object-fit: cover; width: 100%; }
.article-block h3 { font-size: 1.15rem; margin-bottom: 6px; }
.article-block time { color: var(--text-faint); font-size: .82rem; }
.article-content { margin-top: 14px; font-size: .94rem; }
.article-content p { margin: 0 0 12px; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; margin-top: 24px; }
.blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all .25s var(--ease); }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--primary); }
.blog-card img { aspect-ratio: 16/9; object-fit: cover; }
.blog-card-body { padding: 16px 18px; }
.blog-card-body h3 { font-size: 1.02rem; margin: 6px 0; }
.blog-card-body time { color: var(--text-faint); font-size: .8rem; }
.blog-card-cat { font-size: .72rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Related ---------- */
.related-products { margin-top: 56px; }
.related-products h2 { font-size: 1.4rem; margin-bottom: 8px; }

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 380px 1fr; gap: 30px; }
.checkout-summary, .checkout-form, .contact-form-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.checkout-summary h2 { font-size: 1.15rem; margin-bottom: 18px; }
.summary-product { display: flex; gap: 14px; margin-bottom: 22px; }
.summary-product img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); }
.summary-product h3 { font-size: .98rem; }
.summary-product .price { font-size: 1.05rem; }
.payment-info-box h4 { font-size: .9rem; margin-bottom: 8px; }
.payment-info-box p { font-size: .88rem; color: var(--text-muted); }
.payment-info-box ul { margin-top: 10px; padding-left: 18px; list-style: disc; font-size: .88rem; color: var(--text-muted); }
.checkout-form label, .contact-form-box label { display: block; font-weight: 600; margin: 16px 0 7px; font-size: .87rem; }
.checkout-form input, .checkout-form select, .contact-form-box input, .contact-form-box textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .92rem; background: var(--bg);
}
.checkout-form input:focus, .checkout-form select:focus, .contact-form-box input:focus, .contact-form-box textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: var(--shadow-glow); }
.form-errors { background: var(--danger-soft); color: #991B1B; padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .88rem; }
.form-success { background: var(--success-soft); color: #166534; padding: 13px 16px; border-radius: var(--radius-sm); font-size: .9rem; }
.order-success { text-align: center; background: var(--surface); padding: 48px; border-radius: var(--radius); grid-column: 1 / -1; border: 1px solid var(--border); }
.order-success h1 { font-size: 1.5rem; margin-bottom: 12px; }

/* ---------- Track order ---------- */
.track-form { display: flex; gap: 10px; margin: 24px 0; }
.track-form input { flex: 1; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: .92rem; }
.order-status-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-top: 20px; }
.order-status-box h2 { font-size: 1.2rem; margin-bottom: 12px; }
.status-pill { padding: 5px 14px; border-radius: 20px; background: var(--primary-light); color: var(--primary-dark); font-weight: 700; font-size: .85rem; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; }
.contact-info h1 { font-size: 1.7rem; margin-bottom: 12px; }
.contact-info p { color: var(--text-muted); }
.contact-info ul { margin-top: 20px; }
.contact-info li { margin-bottom: 12px; font-size: .95rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #94A3B8; padding: 60px 0 0; margin-top: 70px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px; padding-bottom: 36px; }
.footer-grid h3 { color: #fff; margin-bottom: 12px; font-size: 1.05rem; }
.footer-grid h4 { color: #fff; margin-bottom: 14px; font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.footer-grid > div > p { font-size: .88rem; margin: 0 0 16px; color: #7A8699; }
.footer-grid a { display: block; color: #94A3B8; margin-bottom: 10px; font-size: .88rem; transition: .15s; }
.footer-grid a:hover { color: #fff; }
.socials { display: flex; gap: 14px; margin-top: 4px; }
.socials a { margin-bottom: 0; }
.footer-bottom { border-top: 1px solid #1E293B; padding: 20px 0; text-align: center; font-size: .82rem; color: #64748B; }
.payments { font-size: .8rem; color: #64748B !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .product-detail, .checkout-layout, .contact-layout, .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; }
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-text { max-width: 100%; }
  .hero-text p { margin: 0 auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-visual { display: none; }
  .cta-banner { padding: 40px 28px; }
}
@media (max-width: 768px) { .hero-text h1 { font-size:2.1rem; } .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* SubStore identity: all layout rules above originate from the selected ProSubscription design. */
.logo .brand-logo{display:block;height:37px;width:auto;max-width:180px;object-fit:contain}
@media(max-width:1150px){.main-nav{gap:12px}.search-form input{width:130px}.header-inner{gap:12px}.logo .brand-logo{max-width:158px}}
@media(max-width:950px){.search-form{display:none}.main-nav{gap:9px}}

@media(max-width:600px){.container{padding:0 17px}.header-inner{padding:11px 17px;gap:7px}.logo .brand-logo{height:32px;max-width:145px}.hero{padding:64px 0 45px}.hero-text h1{font-size:clamp(1.95rem,9vw,2.45rem)}.hero-trust{gap:9px 15px;font-size:.78rem}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.stat-number{font-size:1.48rem}.section{padding:48px 0}.section-title{font-size:1.6rem}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category-card{padding:21px 10px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.product-body{padding:11px;gap:5px}.product-name{font-size:.91rem}.price{font-size:.99rem}.product-card .btn{padding:9px 7px;font-size:.79rem}.footer-grid{grid-template-columns:1fr 1fr;gap:20px}.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.testimonial-grid{grid-template-columns:1fr}.checkout-summary,.checkout-form,.contact-form-box{padding:18px}.track-form{flex-direction:column}}
@media(max-width:375px){.logo .brand-logo{max-width:125px;height:28px}.product-grid{grid-template-columns:1fr}.trust-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.hero-cta{gap:8px}.hero-cta .btn{padding:11px 13px;font-size:.85rem}}

/* SubStore blog artwork/content, retaining the ProSubscription visual system */
.sub-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:26px}
.sub-blog-card{display:block;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);color:inherit;transition:transform .18s,box-shadow .18s}
.sub-blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.sub-blog-card>img{display:block;width:100%;height:190px;object-fit:cover}
.sub-blog-card .blog-card-body{padding:20px}
.sub-blog-card h3{font-size:1.04rem;line-height:1.45;margin:9px 0;min-height:2.9em}
.sub-blog-card p{font-size:.87rem;line-height:1.6;color:var(--text-muted);margin:0 0 16px}
.sub-blog-card time{font-size:.77rem;color:var(--text-faint)}
.sub-blog-card .blog-card-cat{display:inline-block;color:var(--primary-dark);background:var(--primary-light);padding:4px 10px;border-radius:30px;font-size:.72rem;font-weight:750}
.blog-search{display:flex;gap:10px;max-width:550px;margin:23px 0 8px}.blog-search input{flex:1;min-width:0;background:white;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.sub-blog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.sub-blog-article{max-width:850px;margin:auto}.sub-blog-article>h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.18;margin:12px 0 28px}.sub-blog-cover{width:100%;max-height:500px;object-fit:cover;border-radius:var(--radius);margin-bottom:28px}.sub-blog-content{font-size:1.04rem;line-height:1.85;color:var(--text)}.sub-blog-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:25px 0}.sub-blog-gallery img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;border-radius:12px}.blog-note{border-left:3px solid var(--primary);background:var(--primary-light);padding:18px 20px;border-radius:8px;margin-top:25px;line-height:1.75;font-size:.92rem}.blog-note a{text-decoration:underline}
@media(max-width:800px){.sub-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sub-blog-heading{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.sub-blog-grid{grid-template-columns:1fr}.sub-blog-gallery{grid-template-columns:1fr}.blog-search{flex-direction:column}.sub-blog-article>h1{font-size:1.75rem}}



/* SubStore: square product artwork and mobile-only collapsible shop categories. */
.product-img { aspect-ratio: 1 / 1; }
.product-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-card .product-price { margin-top: auto; }
.shop-category-toggle { display: none; }
@media (max-width: 900px) {
  .shop-sidebar.is-collapsible { padding: 0; overflow: hidden; }
  .shop-sidebar.is-collapsible > h3 { display: none; }
  .shop-sidebar.is-collapsible .shop-category-toggle {
    width: 100%; min-height: 54px; display: flex; justify-content: space-between; align-items: center;
    gap: 12px; border: none; border-radius: inherit; padding: 14px 18px;
    text-align: left; background: var(--surface); color: var(--ink);
    font: 700 .96rem var(--font-display); cursor: pointer;
  }
  .shop-sidebar.is-collapsible .shop-category-toggle:focus-visible {
    outline: 3px solid var(--primary); outline-offset: -3px;
  }
  .shop-sidebar.is-collapsible .shop-category-toggle small {
    color: var(--text-muted); font: 500 .78rem var(--font-body);
  }
  .shop-sidebar.is-collapsible .shop-category-chevron {
    flex: 0 0 9px; height: 9px; width: 9px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg);
    transition: transform .2s ease; margin-right: 5px; margin-top: -4px;
  }
  .shop-sidebar.is-collapsible.is-open .shop-category-chevron { transform: rotate(225deg); margin-top: 4px; }
  .shop-sidebar.is-collapsible .filter-list { display: none; padding: 0 18px 12px; border-top: 1px solid var(--border); }
  .shop-sidebar.is-collapsible.is-open .filter-list { display: block; }
  .shop-sidebar.is-collapsible .filter-list a { padding: 12px 0; }
}


/* ------------------------------------------------------------------
   PrimeSubs-inspired refinements, November 2026.
   The SubStore product imagery remains square and descriptions stay
   on detail pages, not cards. All content is loaded from SubStore.
   ------------------------------------------------------------------ */
.section-kicker { display:block; color:var(--primary-dark); font-size:.78rem; font-weight:800; letter-spacing:.085em; text-transform:uppercase; text-align:center; margin-bottom:12px; }
.showcase-intro { margin-bottom:44px; }
.home-category-showcase { background:#f8fafc; }
.category-shelf { padding:32px 0 43px; border-top:1px solid var(--border); }
.category-shelf:first-of-type { border-top:0; }
.category-shelf-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px; }
.category-shelf-heading>div { display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:13px; }
.category-shelf-heading .shelf-icon { grid-row:1/3; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--primary-light); border-radius:12px; font-size:23px; }
.category-shelf-heading h3 { font-size:1.3rem; line-height:1.4; }
.category-shelf-heading p { margin:2px 0 0; font-size:.85rem; line-height:1.5; color:var(--text-muted); max-width:690px; }
.shelf-view-all { font-size:.87rem; font-weight:750; color:var(--primary-dark); display:inline-flex; align-items:center; gap:7px; flex-shrink:0; padding:9px 13px; background:#fff; border:1px solid var(--primary-mid); border-radius:10px; }
.shelf-view-all:hover { background:var(--primary-light); }
.category-product-grid { margin-top:0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.category-product-grid .product-card { min-width:0; }
.badge-limited { position:absolute; top:12px; right:12px; background:#92400e; color:#fff; padding:4px 10px; border-radius:20px; font-size:.71rem; font-weight:750; }
.badge-bestseller { position:absolute; top:12px; right:12px; background:#087DA4; color:#fff; padding:4px 10px; border-radius:20px; font-size:.71rem; font-weight:750; }
.badge-limited+.badge-bestseller { top:43px; }
.product-card:focus-visible, .shelf-view-all:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.bottom-cta-actions { display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
.cta-banner .btn-outline { border-color:rgba(255,255,255,.7); color:#fff; background:transparent; }
.cta-banner .btn-outline:hover { background:rgba(255,255,255,.1); }
.shop-results-meta { display:flex; gap:13px; justify-content:space-between; align-items:center; color:var(--text-muted); font-size:.87rem; margin:9px 0 8px; }
.shop-clear-filters { color:var(--primary-dark); text-decoration:underline; font-weight:700; }
.mobile-nav-search { display:none; }
.back-to-top { position:fixed; bottom:90px; right:23px; z-index:85; border:1px solid var(--border); border-radius:13px; height:42px; width:42px; display:grid; place-items:center; background:#fff; box-shadow:var(--shadow-md); color:var(--primary-dark); font:800 23px var(--font-body); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(9px); transition:opacity .18s,transform .18s; }
.back-to-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:focus-visible { outline:3px solid var(--primary-mid); }
@media(max-width:1150px){ .category-product-grid {grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:850px){ .category-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){
  .showcase-intro { margin-bottom:26px; }
  .category-shelf { padding:23px 0 30px; }
  .category-shelf-heading { align-items:flex-start; gap:9px; }
  .category-shelf-heading>div { grid-template-columns:37px 1fr; column-gap:8px; }
  .category-shelf-heading .shelf-icon {width:37px;height:37px;font-size:19px;}
  .category-shelf-heading h3 {font-size:1.05rem;}
  .category-shelf-heading p {font-size:.75rem;line-height:1.4;}
  .shelf-view-all {font-size:.76rem; padding:7px 8px; white-space:normal; flex:0 0 auto; max-width:130px; text-align:center;}
  .category-product-grid { gap:11px; }
  .back-to-top { right:14px;bottom:85px; }
  .badge-bestseller,.badge-limited {font-size:.62rem;padding:3px 7px;top:8px;right:8px;}
  .badge-discount {font-size:.62rem;padding:3px 7px;top:8px;left:8px;}
}
@media(max-width:375px){ .category-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* SubStore SEO additions: customer reviews follow approved existing visual system. */
.product-customer-reviews{margin:46px 0 28px}.product-customer-reviews h2{margin-bottom:12px}
.customer-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.customer-review{border:1px solid #e2e8f0;border-radius:14px;padding:20px;background:#fff;overflow-wrap:anywhere}
.customer-review h3{font-size:1rem;margin:8px 0}.customer-review p{margin:8px 0}.customer-review small,.review-summary{color:#64748b}
.customer-review .review-stars,.product-rating{color:#d97706;font-weight:700}
@media(max-width:670px){.customer-review-grid{grid-template-columns:1fr}.customer-review{padding:16px}}


/* =======================================================================
   SubStore: focused design & accessibility fixes, November 2026
   Preserve the approved TrustBlue theme, images, page copy and SEO content.
   ======================================================================= */
:where(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
:where(.product-card,.article-block,.blog-card,.faq-list details) { min-width: 0; }
.skip-link { position:fixed; z-index:999; left:14px; top:-70px; padding:10px 16px; border-radius:8px; background:var(--ink); color:#fff; font-weight:700; }
.skip-link:focus { top:12px; }
html { scroll-padding-top: 85px; }
img { height:auto; }
/* Logo sizing and compact navigation at intermediate widths */
.header-inner { min-height:72px; }
.brand-logo { max-width:100%; }
.dropdown-heading { display:flex; align-items:center; gap:4px; }
.dropdown-heading > a { display:flex; align-items:center; gap:4px; font-size:.92rem; font-weight:500; color:var(--text-muted); }
.dropdown-heading > a:hover { color:var(--primary-dark); }
.dropdown:focus-within .dropdown-menu { display:block; }
.mobile-category-toggle { display:none; }
/* Product cards: image is 1:1, price and action buttons align, no descriptions */
.product-grid { min-width:0; }
.product-card { min-width:0; height:100%; }
.product-img { width:100%; aspect-ratio:1/1; flex:none; }
.product-img img { width:100%;height:100%;object-fit:cover; }
.product-body { min-width:0; }
.product-name { line-height:1.42; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.product-price { flex-wrap:wrap; gap:3px 9px; min-width:0; }
.product-card .btn { width:100%; white-space:normal; line-height:1.25; text-align:center; min-height:42px; }
.badge-discount,.badge-limited,.badge-bestseller,.badge-outofstock { font-size:.68rem; padding:4px 8px; line-height:1.25; max-width:58%; text-align:center; }
.product-card:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
/* Long-form SEO guides and restored blog posts */
.article-content,.sub-blog-content,.product-description { overflow-wrap:anywhere; }
.article-content { max-width:850px; margin-inline:auto; font-size:1rem; line-height:1.85; }
.article-content h2,.sub-blog-content h2,.product-description h2 { font-size:clamp(1.18rem,2.2vw,1.52rem); line-height:1.35; margin:1.65em 0 .62em; }
.article-content h3,.sub-blog-content h3,.product-description h3 { font-size:1.11rem; line-height:1.4; margin:1.3em 0 .55em; }
.article-content p,.sub-blog-content p,.product-description p { margin:0 0 1.1em; }
.article-content ul,.article-content ol,.sub-blog-content ul,.sub-blog-content ol,.product-description ul,.product-description ol { padding-left:1.5em; margin:12px 0 19px; list-style-position:outside; }
.article-content ul,.sub-blog-content ul,.product-description ul { list-style:disc; }
.article-content ol,.sub-blog-content ol,.product-description ol { list-style:decimal; }
.article-content li,.sub-blog-content li,.product-description li { margin:7px 0; }
.article-content a,.sub-blog-content a:not(.btn),.product-description a { color:var(--primary-dark); text-decoration:underline; text-underline-offset:2px; }
.article-content img,.sub-blog-content img,.product-description img { max-width:100%;height:auto;border-radius:10px; }
.article-content table,.sub-blog-content table,.product-description table { width:100%; border-collapse:collapse; display:block; overflow-x:auto; }
.article-content th,.article-content td,.sub-blog-content th,.sub-blog-content td { border:1px solid var(--border); padding:10px 12px; text-align:left; }
.article-content blockquote,.sub-blog-content blockquote { border-left:4px solid var(--primary); background:var(--primary-light); padding:14px 20px; border-radius:0 9px 9px 0; margin:18px 0; }
.product-articles { margin-top:46px; padding-top:36px; }
.article-block h3 { margin-top:0; }
/* Form, breadcrumb and long-label wrapping */
.product-price-block,.trust-strip,.breadcrumbs,.shop-toolbar,.category-shelf-heading { min-width:0; }
.product-info h1,.shop-toolbar h1,.contact-info h1 { overflow-wrap:anywhere; }
.breadcrumbs { line-height:1.6; overflow-wrap:anywhere; }
.form-errors,.form-success { overflow-wrap:anywhere; }
.shop-main { min-width:0; }
.shop-toolbar .sort-form select { max-width:100%; }
.shop-results-meta { flex-wrap:wrap; }
.faq-list summary { list-style-position:outside; padding-right:8px; }
/* Footer contact links must stay inline inside their sentences */
.footer-grid p a { display:inline; margin:0; overflow-wrap:anywhere; }
.footer-grid .socials a { display:inline-flex; }
.footer-grid > div { min-width:0; }
.footer-grid p,.footer-grid a { overflow-wrap:anywhere; }
/* Selected variation is clear, especially on touch screens */
.plan-option:has(input:checked) { border-color:var(--primary); background:var(--primary-light); box-shadow:inset 0 0 0 1px var(--primary); }
.plan-option input { accent-color:var(--primary); margin-right:7px; }
/* Prevent the hover-only desktop navigation gap */
@media(min-width:1101px) { .dropdown-menu { top:100%; } }
/* Header and menu: do not let the navigation wrap or squeeze tablet widths */

@media (max-width:900px) {
  .product-detail { grid-template-columns:minmax(0,1fr); gap:24px; }
  .product-gallery { max-width:560px; width:100%; }
  .shop-layout,.checkout-layout,.contact-layout { grid-template-columns:minmax(0,1fr); gap:22px; }
}
@media (max-width:600px) {
  .hero-text h1 { overflow-wrap:break-word; }
  .hero-trust { justify-content:center; gap:9px 12px; }
  .hero-trust span { max-width:100%; }
  .stats-grid { gap:16px; }
  .category-product-grid,.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .product-body { padding:11px 10px; gap:6px; }
  .product-name { font-size:.85rem; line-height:1.37; min-height:3.5em; }
  .product-cat { font-size:.64rem; }
  .price { font-size:.97rem; }
  .old-price { font-size:.74rem; }
  .product-card .btn { font-size:.78rem; min-height:38px; padding:9px 4px; }
  .badge-discount,.badge-limited,.badge-bestseller,.badge-outofstock { top:7px; padding:4px 5px; font-size:.58rem; border-radius:8px; }
  .badge-discount { left:6px; }
  .badge-limited,.badge-bestseller,.badge-outofstock { right:6px; }
  .badge-limited + .badge-bestseller { top:32px; }
  .shop-toolbar { align-items:stretch; }
  .shop-toolbar h1 { font-size:1.32rem; }
  .sort-form select { width:100%; min-height:42px; }
  .article-block { padding:20px 16px; }
  .article-content { font-size:.94rem; line-height:1.8; }
  .product-price-block { flex-wrap:wrap; gap:8px 12px; }
  .price-large { font-size:1.9rem; }
  .cta-banner { padding:34px 20px; }
  .bottom-cta-actions .btn { width:100%; }
  .sub-blog-content { font-size:1rem; line-height:1.75; }
}
@media(max-width:375px){
  .product-grid,.category-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .product-body { padding:10px 8px; }
  .product-name { font-size:.79rem; }
  .price { font-size:.88rem; }
  .product-card .btn { font-size:.71rem; }
  .site-header .brand-logo { max-width:120px; }
  .header-actions { gap:7px; }
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .product-card:hover,.blog-card:hover {transform:none;} }

/* ==========================================================================
   SUBSTORE CYAN / NAVY REFINEMENT — logo #0AADDB, contrast-safe button #087DA4
   Footer, responsive navigation and mobile shop filter. Site structure unchanged.
   ========================================================================== */
:root { --brand-cyan:#0AADDB; --primary:#087DA4; --primary-dark:#075D80; --primary-light:#E8F9FF; --primary-mid:#BDECF7; --ink:#102536; }
:where(a,button,input,select,summary):focus-visible { outline:3px solid var(--brand-cyan); outline-offset:3px; }
.site-header { border-color:var(--border); }
.logo { min-width:0; flex-shrink:0; }
.logo .brand-logo { display:block; width:auto; height:auto; max-width:180px; max-height:45px; }
.header-inner { gap:16px; }
.main-nav { flex-wrap:nowrap; gap:19px; }
.main-nav > a,.dropdown-heading > a { white-space:nowrap; }
.dropdown-menu { top:100%; }
.mobile-nav-top,.nav-scrim { display:none; }
.nav-scrim[hidden] { display:none!important; }
.nav-toggle { padding:0 11px; gap:7px; min-height:44px; }
.nav-toggle-text { font-size:.81rem; font-weight:700; }
.btn-primary { box-shadow:0 4px 14px rgba(8,125,164,.20); }
.btn-primary:hover { box-shadow:0 8px 22px rgba(8,125,164,.24); }
.hero-text h1 .accent-text,.product-cat { color:var(--primary-dark); }
.hero-card-2 { background:linear-gradient(135deg,#0AADDB,#075D80); }
.stats-bar { background:#102536; }
.stat-number { background:linear-gradient(135deg,#27C4F2,#A4E9FA); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.cta-banner { background:linear-gradient(120deg,#075D80,#087DA4 58%,#0AADDB); }
.shop-main,.shop-layout { min-width:0; }
/* Desktop category filters: clear active item and comfortable click targets. */
.shop-sidebar { border-color:var(--border); box-shadow:var(--shadow-sm); }
.shop-sidebar h3 { margin-bottom:10px; }
.shop-sidebar .filter-list a { display:flex; align-items:center; gap:8px; padding:11px 12px; border:0; border-radius:10px; overflow-wrap:anywhere; }
.shop-sidebar .filter-list li+li { margin-top:3px; }
.shop-sidebar .filter-list a:hover { background:var(--primary-light); padding-left:12px; }
.shop-sidebar .filter-list a.active { background:var(--primary-light); color:var(--primary-dark); padding-left:12px; font-weight:750; }
.shop-toolbar { gap:12px; }
.sort-form select { min-height:42px; }
/* Footer: four clear areas, coherent spacing and legible links. */
.site-footer { background:linear-gradient(135deg,#102536,#092334 78%); color:#C4D7E2; padding:58px 0 0; margin-top:64px; }
.site-footer .footer-grid { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.88fr)) minmax(0,1.18fr); gap:clamp(18px,3vw,44px); padding-bottom:44px; }
.site-footer .footer-grid > * { min-width:0; }
.footer-brand-link { display:inline-flex; width:fit-content; max-width:100%; margin-bottom:16px; }
.footer-brand-link img { width:172px; height:auto; max-width:100%; }
.site-footer .footer-brand > p { color:#B8CDD8; font-size:.9rem; line-height:1.72; margin:0 0 18px; max-width:32ch; }
.footer-availability { display:flex; align-items:flex-start; gap:9px; font-size:.81rem; line-height:1.55; color:#CCE3EC; }
.footer-availability strong { color:#fff; }
.footer-status-dot { width:8px; height:8px; flex:none; background:#36D0E8; border-radius:50%; margin-top:6px; }
.site-footer .footer-column h3 { font-size:.96rem; color:#fff; margin-bottom:19px; letter-spacing:0; text-transform:none; font-weight:750; }
.site-footer .footer-column h4.footer-mini-title { color:#94C1D3; text-transform:uppercase; letter-spacing:.06em; margin:23px 0 7px; font-size:.69rem; }
.site-footer .footer-column > a:not(.footer-help-button) { display:block; color:#C4D7E2; font-size:.86rem; line-height:1.5; margin:0 0 12px; padding:0; }
.site-footer .footer-column > a:not(.footer-help-button):hover { color:#57D7F4; }
.footer-socials { display:flex; gap:8px; flex-wrap:wrap; margin-top:19px; }
.site-footer .footer-socials a { display:inline-flex; align-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); padding:6px 10px; border-radius:8px; color:#E6F6FB; font-size:.75rem; margin:0; }
.site-footer .footer-socials a:hover { color:#fff; background:rgba(10,173,219,.22); }
.site-footer .footer-contact-item { display:flex; gap:11px; color:#C4D7E2; font-size:.85rem; line-height:1.65; margin:0 0 14px; overflow-wrap:anywhere; }
.site-footer .footer-contact-item a { display:inline; margin:0; color:inherit; font-size:inherit; }
.site-footer .footer-contact-item a:hover { color:#5CD9F6; }
.footer-contact-icon { flex:none; width:23px; color:#51D3F3; font-size:1.12rem; text-align:center; }
.site-footer a.footer-help-button { width:fit-content; max-width:100%; display:inline-flex; align-items:center; gap:10px; font-size:.83rem; font-weight:700; background:#087DA4; color:#fff; padding:11px 14px; border-radius:10px; margin:3px 0 0; border:1px solid #30A8CB; }
.site-footer a.footer-help-button:hover { color:#fff; background:#096B8E; }
.site-footer .footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:7px 20px; align-items:center; border-top:1px solid rgba(255,255,255,.14); padding:20px 0 23px; text-align:left; color:#A8C4D2; }
.site-footer .footer-bottom p { margin:0; font-size:.78rem; color:#A8C4D2; }
.site-footer .footer-bottom .footer-bottom-note { max-width:390px; text-align:right; }
/* Drawer: scrim, locked scroll, touch-sized rows, reliable accordion. */
@media(max-width:1100px) {
  body.nav-open { overflow:hidden; }
  .site-header.menu-active { backdrop-filter:none; -webkit-backdrop-filter:none; z-index:310; }
  .site-header .main-nav { display:flex; visibility:hidden; pointer-events:none; position:fixed; top:0; right:0; bottom:0; left:auto; width:min(392px,92vw); max-width:100%; height:100dvh; min-height:100vh; padding:0 19px 28px; z-index:320; overflow-y:auto; overscroll-behavior:contain; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0; border:0; border-left:1px solid var(--border); border-radius:0; background:#fff; box-shadow:-15px 0 42px rgba(5,35,51,.20); transform:translateX(105%); transition:transform .24s ease,visibility .24s; }
  .site-header .main-nav.open { visibility:visible; pointer-events:auto; transform:translateX(0); }
  .nav-scrim:not([hidden]) { display:block; position:fixed; inset:0; z-index:300; width:100%; height:100dvh; background:rgba(7,26,42,.54); border:0; padding:0; cursor:default; }
  .mobile-nav-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 0 15px; margin-bottom:10px; border-bottom:1px solid var(--border); }
  .mobile-nav-title { color:var(--ink); font-size:1.05rem; font-weight:800; font-family:var(--font-display); }
  .nav-close { display:grid; place-items:center; border:1px solid var(--border); border-radius:11px; background:var(--primary-light); color:var(--primary-dark); font-size:1.8rem; line-height:1; height:43px; width:43px; cursor:pointer; }
  .site-header .main-nav > a, .site-header .main-nav .dropdown-heading > a { width:100%; min-height:48px; display:flex; align-items:center; padding:10px 5px; margin:0; font-size:.94rem; font-weight:650; color:var(--text); border-bottom:1px solid var(--border); white-space:normal; }
  .site-header .main-nav > a:hover { color:var(--primary-dark); }
  .site-header .main-nav .dropdown { width:100%; }
  .site-header .main-nav .dropdown-heading { display:flex; align-items:center; border-bottom:1px solid var(--border); gap:5px; }
  .site-header .main-nav .dropdown-heading > a { flex:1; border:0; }
  .site-header .main-nav .dropdown-menu, .site-header .main-nav .dropdown:hover .dropdown-menu, .site-header .main-nav .dropdown:focus-within .dropdown-menu { display:none; position:static; padding:2px 0 12px 10px; min-width:0; width:100%; background:transparent; border:0; box-shadow:none; }
  .site-header .main-nav .dropdown.submenu-open .dropdown-menu { display:grid; gap:3px; }
  .site-header .main-nav .dropdown-menu a { min-height:42px; padding:9px 10px; border-radius:10px; }
  .mobile-category-toggle { width:43px; height:43px; flex:0 0 43px; background:var(--primary-light); color:var(--primary-dark); border:1px solid var(--primary-mid); display:grid; place-items:center; border-radius:11px; font-size:1.45rem; cursor:pointer; }
  .mobile-category-toggle span { display:block; transition:transform .2s; }
  .dropdown.submenu-open .mobile-category-toggle span { transform:rotate(180deg); }
  .mobile-nav-search { display:block; padding:0 0 14px; margin:0 0 7px; border-bottom:1px solid var(--border); }
  .mobile-nav-search label { display:block; color:var(--text-muted); font-size:.81rem; font-weight:700; margin-bottom:8px; }
  .mobile-nav-search > div { display:flex; gap:7px; }
  .mobile-nav-search input { border-radius:10px; min-width:0; padding:12px; flex:1; font:inherit; background:#fff; border:1px solid var(--border-strong); }
  .mobile-nav-search button { flex:none; min-height:44px; min-width:45px; background:var(--primary); color:#fff; border:0; border-radius:10px; font-size:20px; cursor:pointer; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; border:1px solid var(--border-strong); border-radius:11px; color:var(--primary-dark); background:#fff; font-size:1rem; cursor:pointer; }
  .search-form { display:none; }
  .header-inner { gap:10px; }
}
@media(min-width:1101px) {
  .site-header .main-nav { display:flex; visibility:visible; pointer-events:auto; position:static; transform:none; }
  .nav-toggle,.mobile-category-toggle,.mobile-nav-top,.mobile-nav-search { display:none; }
}
/* Mobile/tablet shop filter panel: compact single control, expanded links. */
.shop-filter-symbol { display:none; }
.shop-filter-label { display:flex; flex-direction:column; align-items:flex-start; flex:1; gap:1px; }
.shop-filter-label strong { font-size:.93rem; line-height:1.35; }
.shop-filter-label small { font-size:.76rem; line-height:1.2; font-weight:500; color:var(--text-muted); }
@media(max-width:900px) {
  .shop-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
  .shop-sidebar { position:static; padding:0; overflow:visible; }
  .shop-sidebar > h3 { display:none; }
  .shop-sidebar .shop-category-toggle:not([hidden]) { display:flex; align-items:center; width:100%; text-align:left; gap:11px; padding:13px 15px; min-height:61px; border:0; background:#fff; border-radius:var(--radius); color:var(--ink); font-family:var(--font-body); cursor:pointer; }
  .shop-filter-symbol { display:grid; place-items:center; flex:none; width:39px; height:39px; border-radius:11px; color:var(--primary-dark); background:var(--primary-light); }
  .shop-sidebar .shop-category-chevron { width:10px; height:10px; flex:0 0 10px; margin:0 5px 5px; border-right:2px solid var(--primary-dark); border-bottom:2px solid var(--primary-dark); transform:rotate(45deg); transition:transform .18s; }
  .shop-sidebar.is-open .shop-category-chevron { transform:rotate(225deg); margin:5px 5px 0; }
  .shop-sidebar .filter-list { padding:8px 10px 12px; display:block; background:#fff; border-top:1px solid var(--border); border-radius:0 0 15px 15px; }
  .js-enabled .shop-sidebar.is-collapsible:not(.is-open) .filter-list { display:none; }
  .js-enabled .shop-sidebar.is-collapsible.is-open .filter-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .shop-sidebar.is-collapsible .filter-list li { min-width:0; margin:0; }
  .shop-sidebar.is-collapsible .filter-list a { min-height:44px; height:100%; padding:10px 9px; display:flex; align-items:center; font-size:.8rem; line-height:1.35; border:1px solid var(--border); border-radius:9px; background:#fff; }
  .shop-sidebar.is-collapsible .filter-list a.active { color:var(--primary-dark); background:var(--primary-light); border-color:var(--primary-mid); }
  .shop-sidebar.is-collapsible .filter-list a:hover { padding-left:9px; }
  .shop-sidebar.is-open { box-shadow:var(--shadow-sm); }
}
@media(max-width:680px) {
  .site-footer { margin-top:48px; padding-top:40px; }
  .site-footer .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:27px 19px; }
  .site-footer .footer-brand { grid-column:1/-1; }
  .site-footer .footer-contact { grid-column:1/-1; }
  .site-footer .footer-brand > p { max-width:100%; }
  .site-footer .footer-bottom { flex-direction:column; align-items:flex-start; gap:8px; }
  .site-footer .footer-bottom .footer-bottom-note { text-align:left; }
  .header-inner { min-height:65px; }
  .header-actions { gap:7px; }
  .logo .brand-logo { max-width:150px; max-height:38px; }
  .nav-toggle-text { display:none; }
  
  
}
@media(max-width:370px) {
  .site-footer .footer-grid { gap:24px 13px; }
  .site-footer .footer-column > a:not(.footer-help-button) { font-size:.8rem; }
  .shop-sidebar .filter-list { padding:7px; }
  .shop-sidebar.is-collapsible .filter-list a { font-size:.76rem; padding:9px 6px; }
  .logo .brand-logo { max-width:131px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header .main-nav,.mobile-category-toggle span { transition:none; }
}

/* Product guide accordion: closed until "Read More" is clicked, accessible without JS. */
.product-articles .article-block { padding:clamp(17px,2.6vw,27px); }
.product-articles .article-block h3 { font-size:clamp(1.05rem,2.2vw,1.25rem); line-height:1.4; margin-bottom:7px; }
.product-articles .article-block time { display:block; margin-bottom:16px; }
.article-accordion { min-width:0; }
.article-read-more {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:44px; padding:11px 19px; border-radius:10px;
  background:var(--primary); color:#fff; font-size:.91rem; font-weight:700;
  cursor:pointer; user-select:none; list-style:none; transition:background .16s ease,transform .16s ease;
}
.article-read-more::-webkit-details-marker { display:none; }
.article-read-more::marker { content:''; }
.article-read-more:hover { background:var(--primary-dark); }
.article-read-more:focus-visible { outline:3px solid var(--primary-mid); outline-offset:3px; }
.article-toggle-open { display:none; }
.article-accordion[open] .article-toggle-open { display:inline; }
.article-accordion[open] .article-toggle-closed { display:none; }
.article-toggle-arrow { display:inline-block; font-size:1.25rem; line-height:.75; transition:transform .18s ease; }
.article-accordion[open] .article-toggle-arrow { transform:rotate(180deg); }
.article-expanded { min-width:0; border-top:1px solid var(--border); margin-top:21px; padding-top:4px; }
.article-expanded .article-cover { margin-top:17px; }
.article-expanded .article-content { line-height:1.8; }
@media (max-width:600px) {
  .product-articles { margin-top:35px; padding-top:25px; }
  .product-articles .article-block { padding:17px; }
  .article-read-more { width:100%; justify-content:center; }
  .article-expanded .article-content { line-height:1.72; }
}
@media (prefers-reduced-motion:reduce) {
  .article-read-more,.article-toggle-arrow { transition:none; }
}
/* Keep the intentionally off-screen mobile drawer from widening the document. */
@media(max-width:1100px) {
  html, body { overflow-x:clip; }
}


/* =======================================================================
   SubStore purchase choices, article controls and floating WhatsApp support
   ======================================================================= */
.product-purchase-actions {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px; width:100%; margin-top:22px;
}
.product-purchase-actions > * {min-width:0;}
.product-info .purchase-action {
  width:100%; min-height:64px; padding:14px 12px;
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  gap:9px; text-align:center; font-size:1.03rem; font-weight:800;
  line-height:1.25; white-space:normal; box-shadow:0 6px 17px rgba(8,125,164,.12);
}
.purchase-action svg {flex:0 0 23px;}
.product-info a.purchase-whatsapp {color:#fff; background:#168B49; border:2px solid #168B49;}
.product-info a.purchase-whatsapp:hover {background:#10723C;border-color:#10723C; color:#fff; transform:translateY(-2px);box-shadow:0 9px 22px rgba(15,119,57,.21);}
.product-info .purchase-unavailable {opacity:.78;cursor:not-allowed;box-shadow:none;}
.product-info .purchase-sold-out {max-width:100%;}
.purchase-help-text {font-size:.81rem;line-height:1.55;color:var(--text-muted);margin:10px 0 5px;}
@media (max-width:600px) {
  .product-purchase-actions {grid-template-columns:1fr;gap:10px;}
  .product-info .purchase-action {min-height:59px;font-size:1.02rem;padding:15px;}
}

/* Native <details> accordion: no JS required, closed by default. */
.article-block .article-accordion {margin-top:18px;}
.article-block .article-read-more {
  display:inline-flex;justify-content:center;align-items:center;
  gap:10px; min-width:185px; min-height:48px;
  border:1.5px solid var(--primary); border-radius:12px;
  padding:11px 19px; font-size:.96rem; font-weight:800;
  background:var(--primary-light); color:var(--primary-dark);
  line-height:1.3; box-shadow:none;
  cursor:pointer; user-select:none;
}
.article-block .article-read-more:hover {color:#fff;background:var(--primary-dark);border-color:var(--primary-dark);}
.article-block .article-read-more .article-toggle-arrow {flex:0 0 18px; transition:transform .2s ease;}
.article-block .article-read-more .article-book-icon {flex:0 0 19px;}
.article-block .article-accordion:not([open]) > .article-expanded {display:none;}
.article-block .article-accordion[open] > .article-expanded {display:block;}
.article-block .article-accordion[open] > .article-read-more {background:var(--primary);color:#fff;}
.article-block .article-accordion[open] .article-toggle-arrow {transform:rotate(180deg);}
@media (max-width:600px) { .article-block .article-read-more {width:100%;min-width:0;} }

.floating-whatsapp-support {
  position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:92; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:15px 22px; min-height:62px; border-radius:999px;
  background:#20CF64; color:#fff; font-family:var(--font-body);
  font-size:1.15rem; line-height:1.25; font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; white-space:nowrap;
  box-shadow:0 8px 26px rgba(13,134,62,.23);
  transition:background .18s,box-shadow .18s,transform .18s;
}
.floating-whatsapp-support:hover {background:#16B958;color:#fff;transform:translateY(-2px);box-shadow:0 12px 32px rgba(13,134,62,.28);}
.floating-whatsapp-support:focus-visible {outline:3px solid #075D80;outline-offset:4px;}
.floating-whatsapp-icon {display:block;flex:0 0 27px;width:27px;height:27px;}
/* Keep back-to-top visible above the pill rather than overlapping it. */
.back-to-top {right:22px;bottom:calc(101px + env(safe-area-inset-bottom));}
@media(max-width:600px) {
  .floating-whatsapp-support {right:16px;bottom:calc(16px + env(safe-area-inset-bottom));padding:13px 18px;min-height:56px;font-size:1rem;gap:8px;}
  .floating-whatsapp-icon {width:24px;height:24px;flex-basis:24px;}
  .back-to-top {right:16px;bottom:calc(88px + env(safe-area-inset-bottom));}
}
@media(prefers-reduced-motion:reduce) {
  .floating-whatsapp-support, .article-block .article-read-more .article-toggle-arrow {transition:none;}
}


/* ========================================================================
   SubStore UI refinement: aligned vector icons and mobile-only search removal
   ======================================================================== */
.ui-icon {width:1.15em;height:1.15em;display:inline-block;vertical-align:-.15em;flex:0 0 auto;stroke-linejoin:round;stroke-linecap:round;overflow:visible;}
.whatsapp-brand-icon {fill:currentColor;stroke:none;}
.btn .ui-icon,.purchase-action .ui-icon {display:block;width:23px;height:23px;flex:0 0 23px;align-self:center;}
button .ui-icon {width:20px;height:20px;display:block;}
.hero-trust span {display:inline-flex;align-items:center;gap:7px;line-height:1.4;}
.hero-trust .ui-icon {width:17px;height:17px;color:var(--primary-dark);}
.hero-card-icon,.cat-icon,.shelf-icon,.trust-icon-box,.dd-icon,.shop-filter-symbol {display:inline-flex;align-items:center;justify-content:center;}
.hero-card-icon .ui-icon {width:35px;height:35px;}
.cat-icon .ui-icon {width:34px;height:34px;}
.shelf-icon .ui-icon {width:24px;height:24px;}
.trust-icon-box .ui-icon {width:27px;height:27px;color:var(--primary-dark);}
.dd-icon {width:24px;min-width:24px;line-height:1;}
.dd-icon .ui-icon {width:19px;height:19px;}
.category-fallback {display:inline-flex;align-items:center;justify-content:center;line-height:1.2;}
.shop-sidebar .filter-list a {gap:10px;}
.shop-sidebar .filter-list a > .ui-icon {width:19px;height:19px;flex:0 0 19px;color:var(--primary-dark);}
.shop-sidebar .filter-list a > span:not(.category-fallback) {min-width:0;}
.shop-filter-symbol .ui-icon {width:20px;height:20px;}
.mobile-nav-search button {display:flex;align-items:center;justify-content:center;}
.mobile-nav-search button .ui-icon {width:20px;height:20px;}
.nav-close {display:inline-flex;align-items:center;justify-content:center;}
.nav-close .ui-icon {width:22px;height:22px;}
.mobile-category-toggle {align-items:center;justify-content:center;}
.mobile-category-toggle .ui-icon {width:18px;height:18px;}
.caret {display:inline-flex;align-items:center;line-height:1;}
.caret .ui-icon {width:14px;height:14px;}
.search-form button .ui-icon {width:18px;height:18px;}
.nav-toggle .ui-icon {width:23px;height:23px;}
.footer-contact-icon {display:inline-flex;align-items:flex-start;justify-content:center;width:24px;min-width:24px;}
.footer-contact-icon .ui-icon {width:19px;height:19px;margin-top:2px;}
.floating-whatsapp-icon {width:27px;height:27px;flex:0 0 27px;}
.back-to-top {display:flex;align-items:center;justify-content:center;}
.back-to-top .ui-icon {width:19px;height:19px;}
.product-info .stock-status {display:flex;align-items:center;flex-wrap:wrap;gap:5px;}
.product-info .stock-status .ui-icon {width:18px;height:18px;}
.product-purchase-actions .ui-icon {width:23px;height:23px;}
.product-benefits span,.product-trust span {display:inline-flex;align-items:center;gap:6px;}
.product-benefits .ui-icon,.product-trust .ui-icon {width:17px;height:17px;}
.article-block .article-read-more .article-book-icon {width:20px;height:20px;flex:0 0 20px;}
.article-block .article-read-more .article-toggle-arrow {width:18px;height:18px;flex:0 0 18px;}
.shelf-view-all > span {display:inline-flex;vertical-align:middle;margin-left:4px;}
.shelf-view-all .ui-icon {width:16px;height:16px;}
.contact-info li {display:flex;align-items:flex-start;gap:9px;}
.contact-info li > .ui-icon {width:18px;height:18px;flex:0 0 18px;color:var(--primary-dark);margin-top:4px;}
.section .narrow li > .ui-icon {vertical-align:-.17em;margin-right:5px;color:var(--primary-dark);}
/* Shop category and support controls on mobile. */
@media(max-width:767px) {
  .shop-sidebar .filter-list a > .ui-icon {width:17px;height:17px;flex-basis:17px;}
  .floating-whatsapp-icon {width:24px;height:24px;flex-basis:24px;}
  .hero-trust .ui-icon {width:16px;height:16px;}
}

.trust-strip > span {display:inline-flex;align-items:center;gap:6px;line-height:1.4;}
.trust-strip .ui-icon {width:17px;height:17px;color:var(--primary-dark);}

/* Shop interaction polish: accessible focus rings, safe responsive fields. */
.visually-hidden { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.search-form:focus-within, .mobile-nav-search:focus-within { border-radius:12px; }
.search-form input, .mobile-nav-search input { color:var(--ink); }
.search-form input:focus-visible, .mobile-nav-search input:focus-visible, .sort-form select:focus-visible {
  outline:3px solid var(--primary-mid);outline-offset:2px;
}
.search-form button:hover, .mobile-nav-search button:hover { color:var(--primary-dark);background:var(--primary-light); }
.mobile-nav-search button:hover { background:var(--primary-dark);color:#fff; }
.sort-form {display:flex;align-items:center;gap:8px;max-width:100%;}
.shop-empty-state { grid-column:1/-1; background:#fff; border:1px solid var(--border);border-radius:16px;padding:clamp(22px,4vw,34px);margin-top:16px;text-align:center; }
.shop-empty-state h2 {font-size:1.25rem;margin:0 0 10px;}
.shop-empty-state p {max-width:48ch;margin:0 auto 18px;color:var(--text-muted);}
.shop-category-toggle:focus-visible,.shop-clear-filters:focus-visible,.sort-form select:focus-visible {outline:3px solid var(--primary-mid);outline-offset:2px;}
.pagination a:focus-visible {outline:3px solid var(--primary-mid);outline-offset:3px;}


/* =======================================================================
   SUBSTORE: ORIGINAL ICON FEEL + CONSISTENT ALIGNMENT, COMPACT HERO
   - Original colorful category and illustrated feature icons are restored.
   - Utility controls retain crisp SVG icons; WhatsApp uses its brand mark.
   ======================================================================= */
/* The screenshot's top gap came from 96px of desktop hero padding. */
.page-index .hero {padding-top:44px;padding-bottom:56px;}
.page-index .hero-inner {gap:clamp(22px,3.5vw,52px);}
.page-index .eyebrow {margin-bottom:15px;}
.page-index .hero-text h1 {margin-bottom:15px;}
.page-index .hero-cta {margin-top:23px;}
.page-index .hero-trust {margin-top:24px;gap:10px 20px;}
/* Emoji use a controlled square and baseline instead of differing default glyph spacing. */
.hero-mini-icon,.benefit-emoji,.about-benefit-icon {
  display:inline-flex;align-items:center;justify-content:center;
  width:1.45em;min-width:1.45em;height:1.45em;
  flex:0 0 1.45em;line-height:1;font-size:1.06em;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.hero-trust > span {display:inline-flex;align-items:center;gap:6px;line-height:1.45;}
.hero-card-icon {display:flex;align-items:center;justify-content:center;width:56px;height:56px;line-height:1;font-size:2.15rem;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}
/* Keep the emoji inside the colored VPN card clear and centered. */
.hero-card {justify-content:center;gap:6px;}
.legacy-category-icon,.shop-category-emoji {display:inline-flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}
.cat-icon {width:100%;min-height:40px;margin:0 0 10px;display:flex;align-items:center;justify-content:center;font-size:2rem;}
.cat-icon .legacy-category-icon {min-width:40px;min-height:40px;font-size:2rem;}
.category-shelf-heading .shelf-icon {display:flex;align-items:center;justify-content:center;line-height:1;}
.category-shelf-heading .shelf-icon .legacy-category-icon {width:30px;height:30px;font-size:1.46rem;}
.dd-icon {width:26px;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;}
.dd-icon .legacy-category-icon {width:23px;height:23px;font-size:1.15rem;}
.shop-sidebar .filter-list a .shop-category-emoji {width:24px;height:24px;flex:0 0 24px;font-size:1.12rem;}
.trust-icon-box {display:flex;align-items:center;justify-content:center;width:56px;height:56px;line-height:1.1;font-size:1.7rem;margin:0 auto 14px;}
.trust-strip > span {display:inline-flex;align-items:center;gap:6px;line-height:1.5;}
.trust-strip .benefit-emoji {font-size:1rem;}
.section .narrow li .about-benefit-icon {vertical-align:middle;margin-right:4px;}
/* Icon-bearing buttons and logo stay baseline-safe across browsers. */
.search-form button,.mobile-nav-search button,.nav-close,.back-to-top {display:inline-flex;align-items:center;justify-content:center;}
.search-form button .ui-icon,.mobile-nav-search button .ui-icon,.nav-toggle .ui-icon,.nav-close .ui-icon {display:block;flex-shrink:0;}
.floating-whatsapp-support .whatsapp-brand-icon,.purchase-whatsapp .whatsapp-brand-icon {display:block;flex-shrink:0;fill:currentColor;stroke:none;}
@media(max-width:1100px){
  .page-index .hero {padding-top:38px;padding-bottom:47px;}
  .page-index .hero-inner {gap:24px;}
}
@media(max-width:600px){
  .page-index .hero {padding-top:29px;padding-bottom:34px;}
  .page-index .eyebrow {margin-bottom:13px;}
  .page-index .hero-trust {margin-top:19px;gap:7px 13px;}
  .page-index .hero-cta {margin-top:20px;}
  .cat-icon .legacy-category-icon {font-size:1.72rem;}
}
@media(prefers-reduced-motion:reduce){.hero-card {animation:none;}}


/* SubStore homepage CTA refinement (Nov 2026): equal-size buttons, no feature row. */
.page-index .hero-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 422px);
  gap: 16px;
}
.page-index .hero-cta > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 14px 12px;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .page-index .hero-cta {
    gap: 10px;
    margin-inline: auto;
  }
  .page-index .hero-cta > .btn {
    min-height: 56px;
    padding: 10px 6px;
    font-size: clamp(.76rem, 3.7vw, .93rem);
  }
}

/* Hide the mobile navigation trigger whenever the full desktop menu is visible. */
@media (min-width: 1101px) {
  .site-header .nav-toggle { display: none; }
}


/* SubStore compact WhatsApp support: minimal button + gentle, accessible halo. */
.floating-whatsapp-support {
  right: 20px;
  bottom: calc(19px + env(safe-area-inset-bottom));
  min-height: 46px;
  padding: 0 15px;
  gap: 8px;
  border-radius: 999px;
  background: #128C4C;
  color: #fff;
  font-size: .83rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 5px 14px rgba(6, 85, 41, .23);
  animation: substore-whatsapp-pulse 3s ease-in-out infinite;
}
.floating-whatsapp-support .floating-whatsapp-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.floating-whatsapp-support:hover {
  background: #0E783E;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(5, 79, 38, .30);
  animation-play-state: paused;
}
.floating-whatsapp-support:focus-visible {
  outline: 3px solid #075D80;
  outline-offset: 4px;
  animation-play-state: paused;
}
@keyframes substore-whatsapp-pulse {
  0%, 100% { box-shadow: 0 5px 14px rgba(6, 85, 41, .23), 0 0 0 0 rgba(37, 211, 102, .20); }
  50% { box-shadow: 0 6px 18px rgba(6, 85, 41, .30), 0 0 0 8px rgba(37, 211, 102, .055); }
}
/* The back-to-top button stays above WhatsApp rather than covering it. */
.back-to-top { right: 20px; bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (max-width: 600px) {
  .floating-whatsapp-support {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    min-height: 44px;
    padding: 0 13px;
    gap: 7px;
    font-size: .8rem;
  }
  .floating-whatsapp-support .floating-whatsapp-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
  }
  .back-to-top { right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp-support { animation: none; }
}

/* Mobile headline: retain full heading, fit it into two or three balanced lines. */
@media (max-width: 600px) {
  .page-index .hero-text h1 {
    font-size: clamp(1.55rem, 7.2vw, 2.1rem);
    line-height: 1.18;
    letter-spacing: -0.035em;
    text-wrap: balance;
    overflow-wrap: normal;
  }
}


/* November 2026: smaller, single-line mobile category filter.
   Keep the existing category toggle and ARIA behavior; redesign visuals only. */
@media (max-width: 900px) {
  .shop-sidebar.is-collapsible {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
  }
  .shop-sidebar.is-collapsible .shop-category-toggle:not([hidden]) {
    width: 100%;
    min-height: 47px;
    height: 47px;
    padding: 0 13px;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(16, 37, 54, .045);
    color: var(--ink);
    font-family: var(--font-body);
  }
  .shop-sidebar.is-collapsible .shop-category-toggle:hover {
    border-color: var(--primary-mid);
    background: #fbfeff;
  }
  .shop-sidebar.is-collapsible .shop-category-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  .shop-filter-symbol {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 0;
    background: none;
    color: var(--primary-dark);
  }
  .shop-filter-symbol .ui-icon {width: 18px;height: 18px;}
  .shop-filter-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    overflow: hidden;
  }
  .shop-filter-label strong {
    flex: none;
    font-size: .85rem;
    line-height: 1.25;
    font-weight: 750;
    white-space: nowrap;
  }
  .shop-sidebar.is-collapsible .shop-filter-label small {
    min-width: 0;
    max-width: 53%;
    padding: 4px 9px;
    background: var(--primary-light);
    border-radius: 50px;
    color: var(--primary-dark);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .shop-sidebar .shop-category-chevron {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin: 0 4px 4px 0;
  }
  .shop-sidebar.is-open .shop-category-chevron {margin: 4px 4px 0 0;}
  .shop-sidebar.is-collapsible .filter-list {
    margin-top: 7px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(16, 37, 54, .06);
  }
  .shop-sidebar.is-collapsible.is-open {box-shadow:none;}
  .shop-layout {gap: 13px;}
}
@media (max-width: 370px) {
  .shop-sidebar.is-collapsible .shop-category-toggle:not([hidden]) {padding-inline: 11px;gap: 7px;}
  .shop-filter-label {gap:6px;}
  .shop-filter-label strong {font-size:.8rem;}
  .shop-sidebar.is-collapsible .shop-filter-label small {padding:3px 7px;font-size:.68rem;max-width:48%;}
}

/* Floating WhatsApp Support: modestly larger and brighter green, soft halo. */
.floating-whatsapp-support {
  background: #20C764;
  color: #fff;
  min-height: 50px;
  padding: 0 17px;
  gap: 9px;
  font-size: .87rem;
  box-shadow: 0 5px 16px rgba(11, 133, 62, .23);
  animation: substore-whatsapp-pulse 3s ease-in-out infinite;
}
.floating-whatsapp-support .floating-whatsapp-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
}
.floating-whatsapp-support:hover {
  background: #1AB757;
  box-shadow: 0 8px 20px rgba(10, 125, 54, .27);
}
@keyframes substore-whatsapp-pulse {
  0%,100% {box-shadow: 0 5px 16px rgba(11, 133, 62, .23), 0 0 0 0 rgba(32, 199, 100, .18);}
  50% {box-shadow: 0 6px 19px rgba(11, 133, 62, .28), 0 0 0 7px rgba(32, 199, 100, .06);}
}
.back-to-top {bottom: calc(85px + env(safe-area-inset-bottom));}
@media (max-width: 600px) {
  .floating-whatsapp-support {
    min-height: 49px;
    padding: 0 15px;
    font-size: .84rem;
    gap: 8px;
  }
  .floating-whatsapp-support .floating-whatsapp-icon {width: 22px;height: 22px;flex-basis: 22px;}
  .back-to-top {bottom: calc(79px + env(safe-area-inset-bottom));}
}
@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp-support {animation:none;}
}

/* SubStore reviews: customer moderation entry point, responsive and accessible */
.product-customer-reviews{scroll-margin-top:110px}
.review-section-heading{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.review-section-heading h2{margin:0 0 5px}
.review-section-heading .review-summary{margin:0}
.review-jump-link{display:inline-flex;min-height:42px;align-items:center;padding:8px 15px;border-radius:12px;border:1px solid #b1dce9;font-weight:750;color:#087da4;background:#ebfaff;text-decoration:none}
.customer-review .review-stars{font-size:21px;letter-spacing:2px;margin:0 0 5px}
.review-disclosure{display:inline-block;font-size:12px;color:#425468;background:#eef3f7;padding:4px 9px;margin:8px 8px 0 0;border-radius:20px}
.review-submission{background:#f4fbfe;border:1px solid #d3e9f3;border-radius:17px;padding:24px;margin-top:27px;scroll-margin-top:110px}
.review-submission h3{margin:0 0 6px;font-size:1.2rem;color:#102536}
.review-submission>p{color:#60768a;font-size:14px;margin:0 0 18px}
.review-form{display:grid;gap:16px}
.review-form-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.review-form label{display:grid;gap:7px;font-size:14px;color:#173449;font-weight:700}
.review-form input,.review-form select,.review-form textarea{box-sizing:border-box;width:100%;min-width:0;border:1px solid #bdd3df;border-radius:11px;background:white;color:#102536;font:inherit;font-weight:400;padding:12px;min-height:45px}
.review-form textarea{resize:vertical;min-height:120px}
.review-form input:focus-visible,.review-form select:focus-visible,.review-form textarea:focus-visible{outline:3px solid #acebfb;border-color:#087da4}
.review-submit-button{justify-self:start;min-height:46px}
.review-form-notice,.review-form-error{padding:12px 15px;border-radius:11px;margin:15px 0;line-height:1.5}
.review-form-notice{background:#ddf8e7;border:1px solid #9cdab6;color:#116032}
.review-form-error{background:#fff0ef;border:1px solid #eab6b0;color:#a52c22}
.review-form-error p{margin:3px 0}
.review-honeypot{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
@media(max-width:600px){.review-submission{padding:17px}.review-form-row{grid-template-columns:minmax(0,1fr)}.review-jump-link{font-size:13px}}


/* SubStore product review summary and admin-editable product rules */
.product-rating-group{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:4px 0 15px}
.product-rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:9px;color:#536e84;font-size:14px;text-decoration:none;line-height:1.45;font-weight:500}
.product-rating:hover .product-rating-count{text-decoration:underline;color:#087da4}
.product-rating-stars{display:inline-block;position:relative;font-size:24px;letter-spacing:1px;white-space:nowrap;line-height:1;color:#cbd5e1;font-family:Arial, sans-serif}
.product-rating-stars .rating-filled{display:block;position:absolute;inset:0 auto auto 0;width:var(--rating-fill);overflow:hidden;color:#ffb400;white-space:nowrap}
.product-rating-score{color:#52697c;font-weight:600}
.product-rating-count{color:#61798e}
.rating-disclosure{color:#60758a;font-size:11px;line-height:1.45}
.product-info-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:13px;margin-top:18px}
.product-info-panels.has-both{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-info-panel{border:1px solid #d6e7ed;border-radius:14px;padding:18px 17px;background:#f5fbfe;min-width:0;align-self:stretch}
.product-info-panel h3{color:#12364a;font-size:1rem;line-height:1.35;margin:0 0 13px;font-weight:750}
.product-info-list{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.product-info-list li{position:relative;padding-left:23px;color:#36556a;line-height:1.5;font-size:.875rem;overflow-wrap:anywhere}
.product-info-list li::before{content:'✓';position:absolute;top:2px;left:0;display:flex;align-items:center;justify-content:center;border-radius:50%;height:17px;width:17px;background:#c9f6e4;color:#04724f;font-size:11px;font-weight:800}
.product-rules-panel{background:#fffaf1;border-color:#f3e4c2}
.product-rules-panel .product-info-list li::before{content:'!';background:#ffedc4;color:#94650d;font-size:11px}
@media(max-width:700px){.product-info-panels.has-both{grid-template-columns:1fr}.product-info-panel{padding:16px}.product-rating-stars{font-size:22px}}

/* Admin editable policy content: readable paragraphs */
.editable-policy-text p{margin:0 0 1.1em;line-height:1.85;white-space:normal}


/* Native review accordion — initially closed. Button in the heading opens this form. */
.review-submission{padding:0;overflow:hidden}
.review-form-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;padding:17px 22px;color:#075d80;font-size:16px;font-weight:750;cursor:pointer;user-select:none}
.review-form-summary::-webkit-details-marker{display:none}
.review-form-summary:hover{background:#e8f9ff}
.review-form-summary:focus-visible{outline:3px solid #48b7d8;outline-offset:-3px}
.review-form-chevron{display:inline-flex;align-items:center;justify-content:center;font-size:24px;font-weight:400;line-height:1;transition:transform .2s ease}
.review-submission[open] .review-form-chevron{transform:rotate(180deg)}
.review-submission-body{border-top:1px solid #d3e9f3;padding:21px 23px 23px}
.review-submission-body>p{color:#60768a;font-size:14px;margin:0 0 18px}
@media(max-width:600px){.review-form-summary{padding:14px 16px}.review-submission-body{padding:18px 15px}}
@media(prefers-reduced-motion:reduce){.review-form-chevron{transition:none}}

/* 2026 trust and policy readability */
.legal-document{max-width:850px;margin-inline:auto;line-height:1.78}.legal-document h1{line-height:1.2;margin-bottom:18px}.legal-document h2,.legal-document .editable-policy-text h2{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.3;margin:30px 0 9px;color:var(--ink,#102536)}.legal-document p{margin:0 0 15px;overflow-wrap:anywhere}.legal-document li{margin-bottom:8px}.legal-document ul{padding-left:1.35rem}.legal-document a{overflow-wrap:anywhere}

/* Category icon reliability: old DB values are Font Awesome classes, rendered by our local SVGs. */
.cat-icon .category-svg {display:block;width:38px;height:38px;color:var(--primary-dark);stroke-width:1.8;}
.category-shelf-heading .shelf-icon .category-svg {display:block;width:26px;height:26px;color:var(--primary-dark);}
.dd-icon .category-svg {display:block;width:20px;height:20px;color:var(--primary-dark);}
.shop-category-emoji .category-svg {display:block;width:19px;height:19px;color:var(--primary-dark);}
.category-title-icon {display:inline-flex;align-items:center;justify-content:center;vertical-align:-.12em;margin-right:.24em;}
.category-title-icon .category-svg {height:.9em;width:.9em;}
.admin-category-icon {display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;}
.admin-category-icon .category-svg {height:20px;width:20px;}
@media (max-width:600px){.cat-icon .category-svg{width:32px;height:32px;}}

/* SubStore mobile fixes: the four homepage statistics share one row at phone widths. */
@media (max-width: 768px) {
  .stats-bar { padding: 24px 0 25px; }
  .stats-bar .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 6px;
  }
  .stats-bar .stat-item { min-width: 0; text-align: center; }
  .stats-bar .stat-number { font-size: clamp(1.08rem, 4.8vw, 1.52rem); line-height: 1.25; white-space: nowrap; }
  .stats-bar .stat-label { display: block; margin-top: 5px; font-size: clamp(.57rem, 2.3vw, .73rem); line-height: 1.33; overflow-wrap: break-word; }
}
@media (max-width: 370px) {
  .stats-bar .stats-grid { gap: 4px; }
  .stats-bar .stat-number { font-size: 1.05rem; }
  .stats-bar .stat-label { font-size: .57rem; }
}
/* Only the mobile Categories button expands the submenu; the desktop link remains a link. */
@media (max-width: 1100px) {
  .site-header .main-nav .dropdown-heading > .desktop-category-link { display:none; }
  .site-header .main-nav .dropdown-heading { width:100%; }
  .site-header .main-nav .dropdown-heading > .mobile-category-toggle {
    display:flex;
    width:100%;
    flex:1 1 auto;
    min-height:48px;
    padding:10px 5px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:0;
    border-radius:0;
    border-bottom:1px solid var(--border);
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:.94rem;
    font-weight:650;
    text-align:left;
    cursor:pointer;
  }
  .mobile-category-toggle .mobile-category-label { display:inline; transform:none; }
  .mobile-category-toggle .mobile-category-chevron { display:flex; flex:0 0 23px; align-items:center; justify-content:center; transition:transform .2s ease; }
  .dropdown.submenu-open .mobile-category-toggle .mobile-category-label { transform:none; }
  .dropdown.submenu-open .mobile-category-toggle .mobile-category-chevron { transform:rotate(180deg); }
  .site-header .main-nav .mobile-category-toggle:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
}
@media (min-width: 1101px) {
  .site-header .main-nav .dropdown-heading > .mobile-category-toggle {display:none;}
}
/* A single button in the review heading controls the form; no second accordion label. */
.review-jump-link { font:inherit; font-size:13px; line-height:1.35; cursor:pointer; }
.review-jump-link:focus-visible {outline:3px solid #48b7d8; outline-offset:2px;}
.review-submission[hidden] {display:none!important;}
.review-submission-body {border-top:0;}
@media (max-width: 600px) {
  .review-jump-link {font-size:12px; min-height:38px; padding:7px 12px;}
  .review-submission-body {padding:18px 15px;}
}