/*!
Theme Name: NovexThemes
Theme URI: https://novexthemes.com/
Author: NovexThemes
Author URI: https://novexthemes.com/
Description: NovexThemes is a WooCommerce marketplace theme for selling WordPress themes, plugins and digital products. It ships with a full Customizer control set, AJAX shop filtering, three category-aware single product layouts (theme bundle, premium theme, free theme) driven by Secure Custom Fields, and designed templates for every store, blog and support page.
Version: 3.4.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: novex-themes
Tags: e-commerce, blog, two-columns, right-sidebar, custom-background, custom-colors, full-width-template, custom-menu, custom-logo, featured-images, theme-options, threaded-comments, translation-ready
*/

/* ============================================================
   NOVEXTHEMES — DESIGN SYSTEM
   Colour : blue #2F6BFF / deep #1D4FD8 / tint #DCE8FF
            ink #0B1220 / slate #5A6579 / line #E7ECF5
            mint #12B981 / amber #F5A524
   Type   : Plus Jakarta Sans (display) · Inter (body)
            IBM Plex Mono (labels, versions, data)
   Scale  : the store pages run a compact 1340px grid; marketing
            pages (front page, about) opt into the airy 1180px
            scale through body.novex-marketing.
   Tokens marked (C) are re-declared by the Customizer through
   the inline :root block printed from functions.php.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------- */
:root{
  --ink:#0B1220;            /* (C) */
  --slate:#5A6579;          /* (C) */
  --slate-light:#8C97A8;
  --line:#E7ECF5;           /* (C) */
  --line-soft:#F0F4FA;
  --cloud:#F7F9FC;          /* (C) */
  --wash:#EDF3FF;
  --blue:#2F6BFF;           /* (C) */
  --blue-deep:#1D4FD8;      /* (C) */
  --blue-tint:#DCE8FF;
  --mint:#12B981;           /* (C) */
  --amber:#F5A524;          /* (C) */
  --white:#fff;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;

  --shadow-card:0 1px 2px rgba(11,18,32,.05);
  --shadow-hover:0 12px 32px rgba(24,54,120,.13);
  --shadow-float:0 24px 64px rgba(24,54,120,.14), 0 2px 8px rgba(11,18,32,.05);
  --shadow-blue:0 16px 40px rgba(47,107,255,.28);

  --display:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;  /* (C) */
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;                 /* (C) */
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;           /* (C) */

  --maxw:1340px;            /* (C) */
  --gut:24px;
  --base:15px;              /* (C) */
  --sec-pad:56px;
  --head-h:64px;
}

/* Airy marketing scale — front page and the About template. */
body.novex-marketing{
  --cloud:#F5F8FD;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --shadow-card:0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.05);
  --maxw:1180px;
  --base:16px;
  --sec-pad:92px;
}

/* ------------------------------------------------------------
   2. BASE
   --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  font-size:var(--base);
  line-height:1.62;
  letter-spacing:-.006em;
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.novex-marketing{line-height:1.68;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  color:var(--ink);
  margin:0;
  letter-spacing:-.028em;
  line-height:1.15;
  font-weight:700;
}
h1{font-size:1.875rem;letter-spacing:-.036em;}
h2{font-size:1.375rem;}
h3{font-size:.9375rem;letter-spacing:-.018em;}
h4{font-size:.9375rem;}

body.novex-marketing h1,
body.novex-marketing h2,
body.novex-marketing h3{letter-spacing:-.032em;line-height:1.08;}
body.novex-marketing h1{font-size:clamp(2.15rem,4.4vw,3.5rem);font-weight:800;line-height:1.07;}
body.novex-marketing h2{font-size:clamp(1.9rem,3.4vw,2.7rem);}
body.novex-marketing h3{font-size:1.0625rem;line-height:1.35;letter-spacing:-.015em;}

p{margin:0;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;height:auto;display:block;}
button,input,select,textarea{font:inherit;}
button{cursor:pointer;}
svg{flex:none;}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);}
.narrow{max-width:760px;}
.tbd{color:var(--slate-light);font-family:var(--mono);font-size:.92em;}

/* Accessible helpers */
.skip,
.screen-reader-text{
  position:absolute!important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  white-space:nowrap;
}
.skip:focus,
.screen-reader-text:focus{
  position:fixed!important;
  left:14px;top:14px;z-index:200;
  width:auto;height:auto;clip:auto;clip-path:none;
  background:var(--white);color:var(--ink);
  padding:10px 16px;border-radius:8px;
  box-shadow:var(--shadow-hover);
  font-weight:600;
}

/* ------------------------------------------------------------
   3. BUTTONS
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--body);font-weight:600;font-size:.8438rem;
  padding:10px 18px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-deep);color:#fff;}
.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:#C9D5EA;color:var(--ink);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#1B2537;color:#fff;}
.btn-white{background:var(--white);color:var(--ink);}
.btn-white:hover{background:#F2F6FF;}
.btn-mint{background:var(--mint);color:#fff;}
.btn-mint:hover{background:#0E9C6D;}
.btn-lg{padding:13px 22px;font-size:.9375rem;}
.btn-sm{padding:8px 14px;font-size:.78rem;}
.btn-block{width:100%;}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none;}

/* Pill buttons on the marketing scale. */
body.novex-marketing .btn{
  font-weight:600;font-size:.9375rem;padding:13px 26px;border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
body.novex-marketing .btn-primary{box-shadow:var(--shadow-blue);}
body.novex-marketing .btn-primary:hover{transform:translateY(-2px);}
body.novex-marketing .btn-ghost{box-shadow:var(--shadow-card);}
body.novex-marketing .btn-ghost:hover{transform:translateY(-2px);border-color:#D3DCEC;}
body.novex-marketing .btn-dark:hover{background:#182338;transform:translateY(-2px);}
body.novex-marketing .btn-sm{padding:9px 18px;font-size:.8125rem;}

/* Shared micro-elements */
.tick{
  width:16px;height:16px;border-radius:50%;background:var(--wash);color:var(--blue);
  display:grid;place-items:center;flex:none;margin-top:2px;
  font-size:.5625rem;font-weight:700;line-height:1;
}
.cross{
  width:15px;height:15px;border-radius:50%;background:#F1F4F9;color:var(--slate-light);
  display:grid;place-items:center;flex:none;margin-top:3px;font-size:.5625rem;font-weight:700;
}
.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);background:var(--wash);
  border:1px solid var(--blue-tint);border-radius:999px;padding:6px 14px;margin-bottom:22px;
}
.lede{font-size:1.0625rem;color:var(--slate);max-width:46ch;}
.crumbs{font-size:.75rem;color:var(--slate-light);}
.crumbs a:hover{color:var(--blue);}
.stars{color:var(--amber);letter-spacing:.1em;font-size:1.05rem;}

/* ------------------------------------------------------------
   4. HEADER — top bar + store nav
   --------------------------------------------------------- */
.topbar{background:var(--ink);color:rgba(255,255,255,.72);font-size:.75rem;padding:8px 0;}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.topbar b{color:#fff;font-weight:600;}
.topbar a{color:#8FB4FF;}
.topbar a:hover{color:#fff;}

.site-nav{border-bottom:1px solid var(--line);background:var(--white);}
.site-nav > .wrap{display:flex;align-items:center;gap:26px;padding-block:14px;}

.brand{
  display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;
  font-size:1.0625rem;color:var(--ink);letter-spacing:-.03em;flex:none;
}
.brand img{max-height:34px;width:auto;}
.brand-mark{
  width:26px;height:26px;border-radius:7px;
  background:linear-gradient(145deg,var(--blue),#5B8CFF);
  display:grid;place-items:center;color:#fff;font-size:.75rem;font-weight:700;flex:none;
}

.nav-links{display:flex;gap:22px;align-items:center;}
.nav-links a{font-size:.875rem;color:var(--slate);transition:color .15s ease;}
.nav-links a:hover,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links a[aria-current]{color:var(--ink);}

/* one level of dropdown */
.nav-links li{position:relative;}
.nav-links .sub-menu{
  position:absolute;top:calc(100% + 12px);left:-14px;min-width:216px;z-index:20;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-hover);padding:8px;display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;}
.nav-links .sub-menu a{display:block;padding:8px 11px;border-radius:7px;font-size:.8438rem;}
.nav-links .sub-menu a:hover{background:var(--cloud);}
.nav-links .menu-item-has-children > a{display:inline-flex;align-items:center;gap:7px;}
.nav-links .menu-item-has-children > a::after{
  content:"";width:5px;height:5px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}

.head-search{flex:1;max-width:340px;margin-left:auto;position:relative;}
.head-search input{
  width:100%;border:1px solid var(--line);background:var(--cloud);border-radius:8px;
  padding:9px 14px 9px 36px;font-size:.875rem;color:var(--ink);
}
.head-search input:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--white);}
.head-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--slate-light);}
.head-search button[type=submit]{position:absolute;left:-9999px;}

.nav-right{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto;}
.head-search + .nav-right{margin-left:0;}
.acct{
  display:grid;place-items:center;width:36px;height:36px;border-radius:8px;
  border:1px solid var(--line);color:var(--ink);
}
.acct:hover{border-color:#C9D5EA;}
.cart{
  position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;
  border:1px solid var(--line);color:var(--ink);
}
.cart:hover{border-color:#C9D5EA;}
.cart b{
  position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;border-radius:999px;
  background:var(--blue);color:#fff;font-family:var(--mono);font-size:.5625rem;font-weight:500;
  display:grid;place-items:center;padding:0 4px;
}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);padding:6px;}

/* ------------------------------------------------------------
   5. HEADER — floating marketing nav
   --------------------------------------------------------- */
.nav-shell{padding-top:18px;background:transparent;}
.nav-shell .nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(255,255,255,.84);backdrop-filter:blur(14px);
  border:1px solid rgba(231,236,245,.9);border-radius:999px;
  padding:10px 12px 10px 24px;box-shadow:0 6px 20px rgba(24,54,120,.06);
}
.nav-shell .nav-links{gap:28px;}
.nav-shell .nav-links > li > a{font-size:.9125rem;}
.nav-cta{display:flex;align-items:center;gap:12px;}
.nav-cta .btn{padding:11px 22px;}
.nav-shell .nav-toggle{padding:8px;}

/* ------------------------------------------------------------
   6. MOBILE NAV PANEL
   --------------------------------------------------------- */
.mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(340px,86vw);z-index:120;
  background:var(--white);border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(11,18,32,.14);
  padding:20px var(--gut) 32px;overflow-y:auto;
  transform:translateX(100%);transition:transform .26s ease;
  display:flex;flex-direction:column;gap:18px;
}
.mobile-nav.open{transform:none;}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mobile-nav-close{background:none;border:0;color:var(--ink);padding:6px;}
.mobile-nav ul{display:grid;gap:2px;}
.mobile-nav a:not(.btn):not(.brand){display:block;padding:10px 12px;border-radius:8px;font-size:.9375rem;color:var(--ink);font-weight:500;}
.mobile-nav a:not(.btn):not(.brand):hover{background:var(--cloud);}
.mobile-nav .btn-dark{color:#fff;}
.mobile-nav .btn-ghost{color:var(--ink);}
.mobile-nav .sub-menu{margin:2px 0 6px 12px;padding-left:10px;border-left:1px solid var(--line);}
.mobile-nav .sub-menu a{font-size:.875rem;color:var(--slate);font-weight:400;}
.mobile-nav .mobile-actions{display:grid;gap:9px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line-soft);}
.nav-scrim{
  position:fixed;inset:0;z-index:110;background:rgba(11,18,32,.42);
  opacity:0;visibility:hidden;transition:opacity .26s ease, visibility .26s;
}
.nav-scrim.open{opacity:1;visibility:visible;}
body.nav-open{overflow:hidden;}

/* ------------------------------------------------------------
   7. FOOTER
   --------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding:60px 0 28px;}
body.novex-marketing .foot{padding:78px 0 32px;margin-top:88px;}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;}
body.novex-marketing .foot-grid{gap:36px;}
.foot-brand p{font-size:.8438rem;margin-top:14px;max-width:32ch;}
.foot-mail{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--mono);
  font-size:.75rem;color:var(--blue);background:var(--wash);border:1px solid var(--blue-tint);
  border-radius:999px;padding:6px 13px;
}
.foot-mail:hover{background:var(--blue-tint);}
.foot h4,.foot .widget-title{
  font-family:var(--display);font-size:.6875rem;font-weight:700;color:var(--ink);
  letter-spacing:.08em;margin-bottom:13px;text-transform:uppercase;
}
.foot ul{display:grid;gap:9px;}
.foot li a{font-size:.8125rem;color:var(--slate);transition:color .15s ease;}
.foot li a:hover{color:var(--blue);}
.foot-social{display:flex;gap:8px;margin-top:16px;}
.foot-social a{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--slate);
}
.foot-social a:hover{border-color:var(--blue-tint);color:var(--blue);background:var(--wash);}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:.75rem;color:var(--slate-light);
}
.foot-bottom nav{display:flex;gap:18px;flex-wrap:wrap;}
.foot-bottom a:hover{color:var(--blue);}
.pay-marks{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.pay-marks span{
  font-family:var(--mono);font-size:.5938rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:5px;padding:4px 8px;color:var(--slate-light);
}

/* ------------------------------------------------------------
   8. SECTION SHELL (marketing)
   --------------------------------------------------------- */
.sec{padding:var(--sec-pad) 0;}
.sec-cloud{background:var(--cloud);}
.sec-head{display:grid;grid-template-columns:1.05fr .85fr;gap:40px;align-items:end;margin-bottom:44px;}
.sec-head h2{max-width:17ch;}
.sec-head-center{text-align:center;max-width:640px;margin:0 auto 46px;}
.sec-head-center h2{margin-inline:auto;max-width:19ch;}
.sec-head-center .lede{margin:18px auto 0;}

/* ------------------------------------------------------------
   9. HERO (front page)
   --------------------------------------------------------- */
.hero{
  position:relative;margin-top:-94px;padding:150px 0 70px;text-align:center;overflow:hidden;
  background:
    radial-gradient(900px 460px at 50% -8%, #C9DDFF 0%, rgba(201,221,255,0) 62%),
    radial-gradient(700px 420px at 12% 12%, #E2ECFF 0%, rgba(226,236,255,0) 58%),
    radial-gradient(700px 420px at 88% 6%, #DCE9FF 0%, rgba(220,233,255,0) 55%),
    linear-gradient(180deg,#F2F7FF 0%, #FFFFFF 80%);
}
.pill{
  display:inline-flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:6px 16px 6px 6px;font-size:.8125rem;color:var(--slate);
  box-shadow:0 2px 8px rgba(24,54,120,.07);margin-bottom:26px;
}
.pill b{
  background:var(--blue);color:#fff;border-radius:999px;padding:3px 11px;font-family:var(--mono);
  font-size:.625rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.hero h1{max-width:19ch;margin-inline:auto;text-wrap:balance;}
.hero h1 em{font-style:normal;color:var(--blue);}
.hero-sub{margin:22px auto 0;max-width:48ch;font-size:1.0625rem;}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px;}
.hero-meta{margin-top:18px;font-family:var(--mono);font-size:.75rem;color:var(--slate-light);letter-spacing:.03em;}

/* clickable catalogue strip — full-bleed carousel, 5 cards per view */
.strip-wrap{position:relative;margin-top:52px;width:100%;}
.strip{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* room for the card shadow and the 5px hover lift, which overflow would clip */
  padding:14px var(--gut) 26px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.strip::-webkit-scrollbar{display:none;}
/* drag-to-scroll */
.strip{cursor:grab;}
.strip.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.strip.is-dragging .theme-card{pointer-events:none;}
.strip.is-dragging a,
.strip.is-dragging img{-webkit-user-drag:none;user-select:none;}
.strip > .theme-card{
  /* five across, minus the four 20px gaps and the two gutters */
  flex:0 0 calc((100% - (var(--gut) * 2) - 80px) / 5);
  max-width:calc((100% - (var(--gut) * 2) - 80px) / 5);
  scroll-snap-align:start;text-align:left;
}
.strip .theme-shot{height:170px;}
.strip .theme-body{gap:12px;}

.strip-dots[hidden]{display:none;}
.strip-dots{display:flex;justify-content:center;gap:8px;margin-top:6px;}
.strip-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#CBD8EE;
  transition:background .2s ease, width .2s ease;
}
.strip-dots button:hover{background:var(--slate-light);}
.strip-dots button[aria-current="true"]{width:22px;background:var(--blue);}

.strip-note{
  font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);letter-spacing:.04em;
  text-align:center;margin-top:16px;
}
.strip-note a{color:var(--blue);}

/* wireframe placeholder used wherever a screenshot is missing */
.fr,.frame,.ph{display:grid;gap:6px;align-content:start;height:100%;
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:10px;}
.fr i,.frame i,.ph i{display:block;height:6px;border-radius:3px;background:#EAEFF8;}
.fr i.h,.frame i.hd,.ph i.hd{height:10px;width:44%;background:var(--ink);}
.fr i.b,.frame i.big,.frame i.hero,.ph i.big{height:38px;background:linear-gradient(120deg,var(--blue-tint),#F1F5FF);}
.fr .c3,.frame .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.fr .c3 i,.frame .cols i{height:18px;background:#F2F6FD;}

/* ------------------------------------------------------------
   10. PROOF BAR
   --------------------------------------------------------- */
.proof{padding:56px 0;border-bottom:1px solid var(--line-soft);}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center;}
.proof-grid strong{
  display:block;font-family:var(--display);font-size:1.9rem;font-weight:800;
  color:var(--ink);letter-spacing:-.03em;line-height:1.1;
}
.proof-grid span{font-size:.8125rem;color:var(--slate);}

/* ------------------------------------------------------------
   11. FEATURE CARDS
   --------------------------------------------------------- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;
  box-shadow:var(--shadow-card);transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-float);}
.ico{
  width:38px;height:38px;border-radius:11px;background:var(--wash);display:grid;place-items:center;
  margin-bottom:40px;color:var(--blue);
}
.ico svg{width:19px;height:19px;}
.card h3{margin-bottom:9px;}
.card p{font-size:.875rem;line-height:1.6;}
.card .num{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--blue);
  display:block;margin-bottom:26px;}
.card-blue{
  background:linear-gradient(155deg,var(--blue) 0%,#4E7EFF 55%,#6E97FF 100%);
  border-color:transparent;box-shadow:var(--shadow-blue);
}
.card-blue h3{color:#fff;}
.card-blue p{color:rgba(255,255,255,.84);}
.card-blue .ico{background:rgba(255,255,255,.2);color:#fff;}

/* ------------------------------------------------------------
   12. BENTO MOCKS
   --------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.bento-2{display:grid;grid-template-columns:1fr 1.25fr;gap:20px;margin-top:20px;}
.bento figure,.bento-2 figure{margin:0;}
.bento figcaption,.bento-2 figcaption{padding:18px 4px 0;}
.bento figcaption h3,.bento-2 figcaption h3{margin-bottom:7px;}
.bento figcaption p,.bento-2 figcaption p{font-size:.875rem;line-height:1.6;}
.bento figcaption a,.bento-2 figcaption a{color:var(--blue);}
.shot-mock{
  background:linear-gradient(170deg,#EDF3FF,#F8FAFF);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px;min-height:190px;display:flex;align-items:center;justify-content:center;
}
.panel{
  width:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;
  box-shadow:0 8px 20px rgba(24,54,120,.07);
}
.panel-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:.8125rem;color:var(--slate);}
.panel-row + .panel-row{border-top:1px solid var(--line-soft);}
.sw{width:34px;height:19px;border-radius:999px;background:#E4EAF4;position:relative;flex:none;}
.sw::after{
  content:"";position:absolute;top:2.5px;left:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.sw.on{background:var(--blue);}
.sw.on::after{left:auto;right:3px;}
.swatch{display:flex;gap:6px;}
.swatch i{width:15px;height:15px;border-radius:5px;display:block;border:1px solid rgba(11,18,32,.06);}
.thumbs-mock{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.thumb-mock{background:var(--white);border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:0 6px 14px rgba(24,54,120,.06);}
.thumb-mock .tb{height:7px;background:#F3F6FC;border-bottom:1px solid var(--line-soft);}
.thumb-mock .tl{padding:10px;display:grid;gap:5px;}
.tl i{display:block;height:5px;border-radius:3px;background:#E7EDF8;}
.tl i.w{width:60%;}
.tl i.b{height:20px;background:linear-gradient(120deg,#DCE8FF,#EFF4FF);}
.tl i.blue{background:var(--blue);width:34%;height:7px;}
.docs{width:100%;display:grid;gap:9px;}
.doc{
  display:flex;align-items:center;gap:11px;background:var(--white);border:1px solid var(--line);
  border-radius:11px;padding:11px 14px;font-size:.8125rem;color:var(--slate);
}
.doc b{
  font-family:var(--mono);font-size:.625rem;color:var(--blue);background:var(--wash);
  border-radius:6px;padding:3px 8px;flex:none;font-weight:500;
}
.tbl{width:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.tbl-row{display:grid;grid-template-columns:1.5fr 1fr .8fr;gap:10px;padding:11px 15px;font-size:.8125rem;align-items:center;}
.tbl-row + .tbl-row{border-top:1px solid var(--line-soft);}
.tbl-row.hd{
  background:#FAFCFF;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate-light);
}
.state{font-family:var(--mono);font-size:.625rem;padding:3px 9px;border-radius:999px;justify-self:start;}
.state.live{background:#E8F8F1;color:#0E9C6D;}
.state.free{background:#F1F4F9;color:var(--slate-light);}

/* changelog list (shared with the product page) */
.log{width:100%;display:grid;gap:11px;}
.log-item{display:flex;gap:12px;align-items:flex-start;}
.bento .log-item,.bento-2 .log-item{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.ver{
  font-family:var(--mono);font-size:.6875rem;color:var(--blue);background:var(--wash);
  border-radius:5px;padding:3px 8px;flex:none;
}
.log-item p{font-size:.8438rem;line-height:1.5;}
.log-item small{font-family:var(--mono);font-size:.625rem;color:var(--slate-light);display:block;margin-top:3px;}

/* ------------------------------------------------------------
   13. SPLIT SECTIONS + ACCORDIONS
   --------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center;}
.split + .split{margin-top:92px;}
.split-flip .split-copy{order:2;}
.split h2{margin-bottom:18px;}
.acc{margin-top:26px;display:grid;gap:10px;}
.acc-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);overflow:hidden;}
body.novex-marketing .acc-item{border-radius:14px;}
.acc-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 17px;
  cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;font-size:.9125rem;
  color:var(--ink);letter-spacing:-.015em;
}
body.novex-marketing .acc-item summary{padding:15px 18px;font-size:.9375rem;}
.acc-item summary::-webkit-details-marker{display:none;}
.acc-item summary::after{content:"+";font-family:var(--mono);color:var(--blue);flex:none;font-size:1.05rem;}
.acc-item[open] summary::after{content:"–";}
.acc-item[open]{background:var(--wash);border-color:var(--blue-tint);}
.acc-item p,.acc-item .a{padding:0 17px 16px;font-size:.875rem;}
body.novex-marketing .acc-item p{padding:0 18px 17px;line-height:1.6;}
.acc-item .a p{padding:0;}
.acc-item .a p + p{margin-top:10px;}
.acc-item .a ul{margin-top:8px;display:grid;gap:6px;}
.acc-item .a li{display:flex;gap:9px;align-items:flex-start;}
.acc-item .a a,.acc-item p a{color:var(--blue);}
.acc-item .a a:hover,.acc-item p a:hover{text-decoration:underline;text-underline-offset:3px;}
.acc-item:focus-within{outline:2px solid var(--blue);outline-offset:2px;}

.mock-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mock-head h3{font-size:.9375rem;}
.mock-head .tag{
  font-family:var(--mono);font-size:.625rem;color:var(--mint);background:#E8F8F1;
  border-radius:999px;padding:4px 10px;letter-spacing:.06em;
}
.import-card{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;background:linear-gradient(160deg,#F7FAFF,#fff);}
.import-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.import-top strong{font-family:var(--display);font-size:1.3rem;color:var(--ink);font-weight:800;letter-spacing:-.03em;}
.import-top small{font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);}
.bar{height:7px;border-radius:999px;background:#E9EFF9;overflow:hidden;}
.bar i{display:block;height:100%;width:76%;border-radius:999px;background:linear-gradient(90deg,var(--blue),#6C9BFF);}
.steps{margin-top:15px;display:grid;gap:9px;}
.step{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--slate);}
.check{
  width:17px;height:17px;border-radius:50%;background:var(--mint);flex:none;display:grid;
  place-items:center;color:#fff;font-size:.625rem;font-weight:700;
}
.check.wait{background:#E4EAF4;color:var(--slate-light);}

/* ------------------------------------------------------------
   14. THEME GALLERY (front page)
   --------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.theme-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .22s ease, box-shadow .22s ease;
  display:flex;flex-direction:column;
}
.theme-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-float);}
.theme-shot{
  height:180px;padding:16px;background:linear-gradient(165deg,#E9F0FF,#F7FAFF);
  border-bottom:1px solid var(--line-soft);display:block;
}
.theme-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:10px;}
.theme-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px;flex:1;}
.theme-body h3{font-size:1.0625rem;}
.theme-body h3 a:hover{color:var(--blue);}
.theme-body > span{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-light);display:block;margin-top:4px;
}
.theme-body p{font-size:.8125rem;line-height:1.55;}
.theme-foot{display:flex;align-items:center;gap:10px;margin-top:auto;flex-wrap:wrap;}
.theme-foot .price{
  font-family:var(--display);font-weight:800;color:var(--ink);font-size:1rem;
  letter-spacing:-.03em;margin-left:auto;
}
.gallery-foot{text-align:center;margin-top:40px;}

/* ------------------------------------------------------------
   15. FREE VERSION / EMAIL CAPTURE
   --------------------------------------------------------- */
.freebie{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:44px;box-shadow:var(--shadow-card);
}
.freebie h2{font-size:clamp(1.6rem,2.6vw,2.15rem);margin-bottom:14px;}
.freebie p{font-size:.9375rem;}
.freebie ul{display:grid;gap:10px;margin-top:22px;}
.freebie li{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;}
.form-inline{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;}
.form-inline input{
  flex:1;min-width:220px;border:1px solid var(--line);border-radius:999px;padding:13px 20px;
  font:inherit;font-size:.9375rem;color:var(--ink);background:#FBFCFE;
}
.form-inline input:focus{outline:2px solid var(--blue);outline-offset:1px;background:var(--white);}
.form-note{margin-top:12px;font-size:.75rem;color:var(--slate-light);}
.cmp{display:grid;grid-template-columns:1.7fr .5fr .5fr;gap:10px;padding:11px 4px;font-size:.8438rem;align-items:center;}
.cmp + .cmp{border-top:1px solid var(--line-soft);}
.cmp-hd{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-light);}
.cmp span:not(:first-child){text-align:center;}
.cmp .yes{color:var(--mint);font-weight:700;}
.cmp .no{color:var(--slate-light);}

/* ------------------------------------------------------------
   16. PRICING
   --------------------------------------------------------- */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:880px;margin-inline:auto;}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 32px;box-shadow:var(--shadow-card);position:relative;}
.plan-kicker{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-light);}
.plan .amt{
  font-family:var(--display);font-size:3rem;font-weight:800;color:var(--ink);letter-spacing:-.04em;
  line-height:1;margin:16px 0 6px;
}
.plan .amt sup{font-size:1.25rem;font-weight:700;top:-1.1em;position:relative;margin-right:2px;}
.plan .amt small{font-family:var(--body);font-size:.875rem;font-weight:400;color:var(--slate-light);letter-spacing:0;}
.anchor{font-size:.8125rem;color:var(--slate-light);margin-bottom:18px;}
.plan > p{font-size:.9125rem;margin-bottom:22px;}
.plan ul{display:grid;gap:11px;margin-bottom:26px;}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:.875rem;line-height:1.5;}
.plan .tick{width:17px;height:17px;font-size:.625rem;}
.plan .btn{width:100%;}
.plan-blue{
  background:linear-gradient(160deg,#1F58EE 0%,var(--blue) 48%,#5C8BFF 100%);
  border-color:transparent;box-shadow:var(--shadow-blue);
}
.plan-blue .plan-kicker{color:rgba(255,255,255,.72);}
.plan-blue h3,.plan-blue .amt{color:#fff;}
.plan-blue .amt small,.plan-blue .anchor{color:rgba(255,255,255,.72);}
.plan-blue > p,.plan-blue li{color:rgba(255,255,255,.88);}
.plan-blue .tick{background:rgba(255,255,255,.22);color:#fff;}
.plan-blue .btn{background:#fff;color:var(--blue-deep);box-shadow:none;}
.plan-blue .btn:hover{background:#F2F6FF;}
.badge{
  position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:5px 11px;
}
.price-note{text-align:center;margin-top:26px;font-size:.8125rem;color:var(--slate-light);}
.price-note a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}

/* ------------------------------------------------------------
   17. FAQ + CTA BAND
   --------------------------------------------------------- */
.faq{max-width:760px;margin-inline:auto;display:grid;gap:10px;}
.faqsec .faq{max-width:740px;gap:9px;}
.faq-foot{text-align:center;margin-top:32px;font-size:.875rem;}
.faq-foot a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.band{
  border-radius:var(--r-xl);padding:62px 40px;text-align:center;box-shadow:var(--shadow-blue);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%),
    linear-gradient(155deg,#1B4FE0 0%,var(--blue) 52%,#5B8BFF 100%);
}
.band h2{color:#fff;max-width:20ch;margin-inline:auto;}
.band p{color:rgba(255,255,255,.86);max-width:48ch;margin:18px auto 0;}
.band .hero-actions,.band-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
.band .btn-primary{background:#fff;color:var(--blue-deep);box-shadow:none;}
.band .btn-primary:hover{background:#F2F6FF;}
.band .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none;}
.band .btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff;}
.band small{display:block;margin-top:18px;font-family:var(--mono);font-size:.6875rem;color:rgba(255,255,255,.64);letter-spacing:.04em;}

/* ------------------------------------------------------------
   18. ABOUT TEMPLATE
   --------------------------------------------------------- */
.about-hero{
  position:relative;margin-top:-94px;padding:150px 0 76px;text-align:center;overflow:hidden;
  background:
    radial-gradient(900px 440px at 50% -10%, #C9DDFF 0%, rgba(201,221,255,0) 62%),
    radial-gradient(680px 400px at 14% 14%, #E2ECFF 0%, rgba(226,236,255,0) 58%),
    linear-gradient(180deg,#F2F7FF 0%, #FFFFFF 88%);
}
.about-hero h1{max-width:19ch;margin-inline:auto;text-wrap:balance;}
.about-hero h1 em{font-style:normal;color:var(--blue);}
.about-hero .hero-sub{max-width:52ch;}
.about-hero .hero-meta{margin-top:26px;font-size:.75rem;letter-spacing:.05em;}
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;}
.story-body{display:grid;gap:20px;font-size:1.0625rem;}
.story-body p:first-child{color:var(--ink);font-size:1.125rem;line-height:1.6;}
.pullquote{
  border-left:3px solid var(--blue);padding:4px 0 4px 22px;margin:6px 0;
  font-family:var(--display);font-weight:700;font-size:1.1875rem;letter-spacing:-.025em;
  line-height:1.4;color:var(--ink);
}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.steps-list{
  display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;background:var(--white);box-shadow:var(--shadow-card);
}
.stepbox{padding:30px 26px;}
.stepbox + .stepbox{border-left:1px solid var(--line-soft);}
.stepbox b{
  display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-light);margin-bottom:16px;
}
.stepbox h3{margin-bottom:9px;font-size:1rem;}
.stepbox p{font-size:.8438rem;line-height:1.6;}
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;}
.numbers strong{
  display:block;font-family:var(--display);font-size:2.1rem;font-weight:800;
  color:var(--ink);letter-spacing:-.035em;line-height:1.1;
}
.numbers span{font-size:.8438rem;color:var(--slate);}
.promise{
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:44px;box-shadow:var(--shadow-card);
}
.promise h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:14px;}
.promise p{font-size:.9375rem;}
.promise ul{display:grid;gap:12px;}
.promise li{display:flex;gap:11px;align-items:flex-start;font-size:.9125rem;line-height:1.55;}
.promise .tick{width:18px;height:18px;margin-top:3px;font-size:.625rem;}
.mailbox{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-family:var(--mono);
  font-size:.875rem;color:var(--blue);background:var(--wash);border:1px solid var(--blue-tint);
  border-radius:999px;padding:9px 18px;
}
.mailbox:hover{background:var(--blue-tint);}

/* ------------------------------------------------------------
   19. SCROLL REVEAL
   --------------------------------------------------------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
.rv.in{opacity:1;transform:none;}
.no-js .rv{opacity:1;transform:none;}

/* ------------------------------------------------------------
   20. ARCHIVE BAR (shop, blog, taxonomy)
   --------------------------------------------------------- */
.archbar{background:var(--cloud);border-bottom:1px solid var(--line);padding:26px 0;}
.archbar .crumbs{margin-bottom:10px;}
.archbar h1{margin-bottom:8px;}
.archbar p{font-size:.9375rem;max-width:78ch;}

/* ------------------------------------------------------------
   21. SHOP — layout, filters, toolbar
   --------------------------------------------------------- */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);gap:32px;padding:28px 0 72px;align-items:start;}
/* blog and archive flip the sidebar to the right */
.shell--blog{grid-template-columns:minmax(0,1fr) 300px;}

.side{position:sticky;top:78px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;}
.admin-bar .side{top:110px;}
.fgroup{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:16px 18px;}
.fgroup h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:12px;}
.fgroup li + li{margin-top:2px;}
.flink{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;
  border-radius:7px;font-size:.875rem;color:var(--slate);transition:background .14s ease,color .14s ease;
}
.flink:hover{background:var(--cloud);color:var(--ink);}
.flink[aria-pressed="true"]{background:var(--wash);color:var(--blue-deep);font-weight:600;}
.flink span{font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);}
.flink[aria-pressed="true"] span{color:var(--blue);}
.check-row{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:7px;font-size:.875rem;cursor:pointer;}
.check-row:hover{background:var(--cloud);}
.check-row input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;flex:none;}
.price-fields{display:flex;align-items:center;gap:8px;}
.price-fields input{
  width:100%;min-width:0;border:1px solid var(--line);border-radius:7px;padding:8px 10px;
  font-size:.8125rem;background:var(--cloud);color:var(--ink);
}
.price-fields input:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--white);}
.side-promo{
  border:1px solid transparent;border-radius:var(--r-lg);padding:20px 18px;color:#fff;
  background:linear-gradient(160deg,#1F58EE,var(--blue) 55%,#5C8BFF);
}
.side-promo h3{color:#fff;font-size:1rem;text-transform:none;letter-spacing:-.02em;margin-bottom:8px;}
.side-promo p{font-size:.8125rem;color:rgba(255,255,255,.84);margin-bottom:14px;}
.side-promo .amt{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;display:block;}
.side-promo .amt s{font-weight:500;font-size:.875rem;color:rgba(255,255,255,.6);margin-right:7px;letter-spacing:0;}
.side-promo .btn{margin-top:14px;}
.filters-toggle{display:none;}

.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:11px 16px;margin-bottom:18px;
}
.toolbar p{font-size:.8438rem;}
.toolbar b{color:var(--ink);font-weight:600;}
.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tools select{
  border:1px solid var(--line);border-radius:7px;padding:7px 11px;font-size:.8125rem;
  color:var(--ink);background:var(--white);cursor:pointer;
}
.viewtog{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;}
.viewtog button{background:var(--white);border:0;padding:7px 9px;color:var(--slate-light);display:grid;place-items:center;}
.viewtog button[aria-pressed="true"]{background:var(--ink);color:#fff;}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.active-filters .chip-x{
  display:inline-flex;align-items:center;gap:7px;background:var(--wash);border:1px solid var(--blue-tint);
  color:var(--blue-deep);border-radius:999px;padding:5px 12px;font-size:.75rem;font-weight:500;
}
.active-filters button{background:none;border:0;color:inherit;padding:0;line-height:1;font-size:.9rem;}

/* ------------------------------------------------------------
   22. SHOP — product grid
   --------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.item{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.item:hover{box-shadow:var(--shadow-hover);border-color:#DCE4F1;transform:translateY(-2px);}
.item.hide{display:none;}
.shot{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(165deg,#E9F0FF,#F7FAFF);
}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.shot .frame{display:none;}
.shot.noimg{padding:14px;}
.shot.noimg img{display:none;}
.shot.noimg .frame{display:grid;padding:10px;border-radius:8px;}
.shot.noimg .frame i{height:5px;}
.shot.noimg .frame i.hd{height:9px;}
.shot.noimg .frame i.big{height:44px;}
.shot.noimg .frame .cols i{height:20px;}
.hoverbar{
  position:absolute;inset:auto 0 0;display:flex;gap:8px;padding:10px;
  background:linear-gradient(180deg,rgba(11,18,32,0),rgba(11,18,32,.78));
  opacity:0;transform:translateY(8px);transition:opacity .18s ease, transform .18s ease;
}
.item:hover .hoverbar,.item:focus-within .hoverbar{opacity:1;transform:none;}
.hoverbar .btn{flex:1;padding:8px 10px;font-size:.75rem;}
.ribbon{
  position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:.5625rem;letter-spacing:.09em;
  text-transform:uppercase;border-radius:5px;padding:4px 8px;z-index:2;
}
.ribbon.popular{background:var(--ink);color:#fff;}
.ribbon.new{background:var(--blue);color:#fff;}
.ribbon.updated{background:var(--white);color:var(--mint);border:1px solid #CBEEDF;}
.ribbon.sale{background:var(--amber);color:var(--ink);}
.ribbon.free{background:var(--mint);color:#fff;}

.meta{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1;}
.cat{font-size:.6875rem;color:var(--slate-light);}
.cat:hover{color:var(--blue);}
.meta h3{font-size:.9375rem;line-height:1.35;}
.meta h3 a:hover{color:var(--blue);}
.item .row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;
  padding-top:9px;border-top:1px solid var(--line-soft);
}
.price{font-family:var(--display);font-weight:800;color:var(--ink);font-size:1rem;letter-spacing:-.03em;}
.price small{font-family:var(--mono);font-size:.5625rem;font-weight:400;color:var(--slate-light);letter-spacing:.06em;}
.price del{color:var(--slate-light);font-weight:500;font-size:.8125rem;margin-right:6px;}
.price ins{text-decoration:none;}

/* list view */
.grid.list{grid-template-columns:1fr;}
.grid.list .item{flex-direction:row;align-items:stretch;}
.grid.list .shot{width:270px;flex:none;aspect-ratio:auto;}
.grid.list .meta{flex:1;padding:16px 20px;}
.grid.list .item .row{border-top:0;padding-top:6px;}

.empty{
  display:none;border:1px dashed var(--line);border-radius:var(--r-lg);padding:44px;
  text-align:center;color:var(--slate-light);
}
.empty.show{display:block;}
.empty button{background:none;border:0;color:var(--blue);font-weight:600;cursor:pointer;}
.is-loading{opacity:.45;transition:opacity .18s ease;pointer-events:none;}

/* ------------------------------------------------------------
   23. SEO COPY + PAGINATION
   --------------------------------------------------------- */
.archcopy{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);max-width:78ch;}
.archcopy h2{font-size:1.25rem;margin-bottom:12px;}
.archcopy h3{font-size:1rem;margin:24px 0 8px;}
.archcopy p{font-size:.9375rem;}
.archcopy p + p{margin-top:12px;}
.archcopy a{color:var(--blue);}
.archcopy a:hover{text-decoration:underline;text-underline-offset:3px;}

.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:30px;flex-wrap:wrap;}
.pager a,.pager span.page-numbers{
  min-width:36px;height:36px;padding:0 11px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:8px;background:var(--white);font-size:.8438rem;font-weight:500;color:var(--slate);
  transition:border-color .14s ease,color .14s ease;
}
.pager a:hover{border-color:#C9D5EA;color:var(--ink);}
.pager .current,.pager a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600;}
.pager .nav-arrow{color:var(--slate-light);}
.pager .disabled{opacity:.4;pointer-events:none;}
.pager .pinfo{font-size:.8125rem;color:var(--slate-light);margin-left:10px;border:0;background:none;min-width:0;height:auto;padding:0;}
.pager .dots{border-color:transparent;background:none;}

.faqsec{padding:66px 0;}
.faqsec.bordered{border-top:1px solid var(--line);padding:56px 0 66px;}
.faqhead{text-align:center;max-width:560px;margin:0 auto 32px;}
.faqsec h2{text-align:center;}
.faqsec .faq{margin-top:22px;}

/* ------------------------------------------------------------
   24. SINGLE PRODUCT
   --------------------------------------------------------- */
.pdp-crumbs{padding:18px 0 0;}
.product{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:36px;padding:22px 0 60px;align-items:start;}

/* gallery */
.pdp-gallery{display:grid;gap:12px;}
.stage{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(165deg,#E9F0FF,#F7FAFF);margin:0;
}
.stage img{width:100%;height:auto;display:block;object-fit:contain;}
.stage .frame{display:none;}
.stage.noimg{aspect-ratio:16/10;padding:26px;}
.stage.noimg img{display:none;}
.stage.noimg .frame{display:grid;padding:16px;gap:9px;border-radius:10px;box-shadow:0 10px 26px rgba(24,54,120,.1);}
.stage.noimg .frame i{height:7px;border-radius:4px;}
.stage.noimg .frame i.hd{height:13px;width:38%;}
.stage.noimg .frame i.big{height:96px;}
.stage.noimg .frame .cols{gap:9px;}
.stage.noimg .frame .cols i{height:44px;}
.stage .ribbon{top:14px;left:14px;font-size:.5938rem;padding:5px 10px;background:var(--ink);color:#fff;}
.pdp-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.pdp-thumb{
  border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--cloud);
  aspect-ratio:4/3;padding:0;cursor:pointer;
}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.pdp-thumb[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-tint);}
.pdp-thumb > span{display:grid;height:100%;padding:7px;gap:4px;align-content:start;}
.pdp-thumb i{display:block;height:4px;border-radius:2px;background:#E4EAF5;}
.pdp-thumb i.hd{height:6px;width:44%;background:#B9C6DC;}
.pdp-thumb i.big{height:22px;background:linear-gradient(115deg,var(--blue-tint),#F0F5FF);}

/* buy box */
.buybox{
  position:sticky;top:82px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:22px;box-shadow:var(--shadow-card);
}
.admin-bar .buybox{top:114px;}
.buybox .cat{font-size:.75rem;}
.buybox h1{margin:6px 0 10px;font-size:1.5rem;}
.subline{font-size:.875rem;margin-bottom:16px;}
.opt{
  display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 14px;cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.opt + .opt{margin-top:9px;}
.opt:hover{border-color:#C9D5EA;}
.opt input{margin-top:3px;width:16px;height:16px;accent-color:var(--blue);flex:none;}
.opt.sel{border-color:var(--blue);background:var(--wash);}
.opt b{display:block;font-family:var(--display);font-size:.9125rem;color:var(--ink);font-weight:700;}
.opt .opt-text > span{font-size:.8125rem;display:block;margin-top:2px;}
.opt .p{margin-left:auto;font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.0625rem;letter-spacing:-.03em;}
.total{
  display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 12px;
  padding-top:15px;border-top:1px solid var(--line-soft);
}
/* Only the label — the price html puts its own <span>s inside the <b>. */
.total > span{font-size:.8438rem;}
.total b span{font-size:inherit;font-weight:inherit;}
.total b small{font-size:.625rem;font-weight:400;}
.total b{font-family:var(--display);font-weight:800;font-size:1.75rem;color:var(--ink);letter-spacing:-.04em;}
.total small{font-family:var(--mono);font-size:.625rem;color:var(--slate-light);margin-left:5px;}
.total del{font-size:1rem;font-weight:500;color:var(--slate-light);margin-right:8px;}
.buy-actions{display:grid;gap:9px;}
.assure{display:grid;gap:8px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line-soft);}
.assure div{display:flex;gap:9px;align-items:flex-start;font-size:.8125rem;}
.freeline{
  margin-top:14px;padding:11px 13px;border:1px dashed var(--line);border-radius:var(--r-md);font-size:.8125rem;
}
.freeline a{color:var(--blue);font-weight:600;}
.freeline a:hover{text-decoration:underline;text-underline-offset:3px;}
.doc-btn{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;width:100%;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:.8438rem;letter-spacing:-.01em;
  color:var(--blue-deep);background:linear-gradient(120deg,var(--wash),#F4F8FF);
  border:1px solid var(--blue-tint);border-radius:var(--r-md);padding:11px 16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.doc-btn:hover{background:var(--blue-tint);border-color:#BFD5FF;transform:translateY(-1px);}
.doc-btn svg{width:15px;height:15px;}
.sales-note{font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);margin-top:10px;letter-spacing:.03em;}

/* detail column */
.detail{border-top:1px solid var(--line);background:var(--cloud);padding:52px 0 66px;}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start;}
.block{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;}
.block + .block{margin-top:18px;}
.block h2{margin-bottom:14px;font-size:1.25rem;}
.block h3{font-size:.9375rem;}
.block p{font-size:.9375rem;}
.block p + p{margin-top:12px;}
.block a{color:var(--blue);}
.block a:hover{text-decoration:underline;text-underline-offset:3px;}
.block ul.plain{display:grid;gap:10px;margin-top:10px;}
.block ul.plain li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:6px;}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;line-height:1.5;}
.pagelist{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.pagelist li{
  font-size:.8125rem;background:var(--cloud);border:1px solid var(--line-soft);
  border-radius:6px;padding:6px 10px;
}
.demolist{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px;}
.demo{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white);}
.demo .ds{aspect-ratio:4/3;background:linear-gradient(165deg,#E9F0FF,#F7FAFF);padding:9px;display:block;}
.demo .ds img{width:100%;height:100%;object-fit:cover;border-radius:6px;}
.demo .ds > span{display:grid;height:100%;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:7px;gap:4px;align-content:start;}
.demo .ds i{display:block;height:4px;border-radius:2px;background:#EAEFF8;}
.demo .ds i.hd{height:6px;width:42%;background:var(--ink);}
.demo .ds i.big{height:20px;background:linear-gradient(115deg,var(--blue-tint),#F0F5FF);}
.demo p{padding:9px 11px 11px;font-size:.8125rem;color:var(--ink);font-weight:500;}
.demo a:hover p{color:var(--blue);}

.specs{width:100%;border-collapse:collapse;font-size:.875rem;}
.specs th,.specs td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;}
.specs th{width:44%;font-weight:500;color:var(--slate);}
.specs td{color:var(--ink);}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0;}
.specs a{color:var(--blue);}

.aside-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;}
.aside-card + .aside-card{margin-top:16px;}
.aside-card h3{margin-bottom:12px;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;}
.mini{display:flex;gap:12px;align-items:center;}
.mini + .mini{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);}
.mini .ms{
  width:64px;height:48px;border-radius:7px;background:linear-gradient(165deg,#E9F0FF,#F7FAFF);
  border:1px solid var(--line);flex:none;overflow:hidden;
}
.mini .ms img{width:100%;height:100%;object-fit:cover;}
.mini b{display:block;font-family:var(--display);font-size:.8438rem;color:var(--ink);font-weight:700;}
.mini .mtext > span{font-size:.75rem;color:var(--slate-light);}
.mini .mp{margin-left:auto;font-family:var(--display);font-weight:800;font-size:.875rem;color:var(--ink);}
.mini:hover b{color:var(--blue);}
.upsell{background:linear-gradient(160deg,#1F58EE,var(--blue) 55%,#5C8BFF);border-color:transparent;color:#fff;}
.upsell h3{color:#fff;text-transform:none;letter-spacing:-.02em;font-size:1rem;}
.upsell p{font-size:.8125rem;color:rgba(255,255,255,.86);margin-bottom:14px;}
.upsell .amt{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;display:block;}
.upsell .amt s{font-weight:500;font-size:.875rem;color:rgba(255,255,255,.6);margin-right:7px;letter-spacing:0;}
.upsell .btn{margin-top:13px;}

.related{padding:56px 0 72px;}
.related h2{margin-bottom:20px;}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}

/* sticky mobile buy bar */
.mobilebuy{
  position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px var(--gut);
  display:none;align-items:center;justify-content:space-between;gap:12px;
}
.mobilebuy b{font-family:var(--display);font-weight:800;font-size:1.125rem;color:var(--ink);letter-spacing:-.03em;}

/* reviews */
.review-list{display:grid;gap:16px;}
.review{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:16px 18px;background:var(--cloud);}
.review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.review-head b{font-family:var(--display);font-size:.875rem;color:var(--ink);}
.review-head time{font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);}
.review p{font-size:.875rem;}
.review-form label{display:block;margin-bottom:12px;font-size:.8438rem;}
.review-form span{display:block;font-family:var(--display);font-size:.8125rem;font-weight:700;color:var(--ink);margin-bottom:6px;}
.review-form input,.review-form textarea,.review-form select{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 14px;
  font-size:.9125rem;color:var(--ink);background:var(--cloud);
}
.review-form input:focus,.review-form textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--white);}
.review-form textarea{min-height:130px;resize:vertical;}

/* Rating picker — radios drawn as stars. Scoped under .review-form because
   the generic `.review-form label` / `.review-form span` rules above are block
   layout and would otherwise stack the stars one per line.

   The inputs sit high-to-low in the DOM and the row is reversed, so
   `:checked ~ label` paints every star up to and including the chosen one. */
.review-form .rate-field{margin-bottom:14px;}
.review-form .rate-field > span{
  display:block;font-family:var(--display);font-size:.8125rem;font-weight:700;
  color:var(--ink);margin-bottom:6px;
}
.review-form .rate-pick{
  position:relative;display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;
  align-items:center;gap:6px;margin:0;font-weight:400;
}
.review-form .rate-pick input{
  position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0;
}
.review-form .rate-pick label{
  display:inline-flex;align-items:center;margin:0;cursor:pointer;font-size:1.75rem;
  line-height:1;color:#D9E1EF;transition:color .12s ease, transform .12s ease;
}
.review-form .rate-pick label > span[aria-hidden]{
  display:inline;margin:0;font:inherit;color:inherit;
}
.review-form .rate-pick input:checked ~ label{color:var(--amber);}
.review-form .rate-pick:hover label{color:#D9E1EF;}
.review-form .rate-pick label:hover,
.review-form .rate-pick label:hover ~ label{color:var(--amber);}
.review-form .rate-pick label:active{transform:scale(.92);}
.review-form .rate-pick input:focus-visible + label{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;
}

/* ------------------------------------------------------------
   25. BLOG ARCHIVE
   --------------------------------------------------------- */
.featured{padding:30px 0 0;}
.fcard{
  display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--white);
  box-shadow:var(--shadow-card);transition:box-shadow .18s ease,border-color .18s ease;
}
.fcard:hover{box-shadow:var(--shadow-hover);border-color:#DCE4F1;}
.fshot{position:relative;background:linear-gradient(150deg,#E9F0FF,#F7FAFF);min-height:280px;padding:26px;display:block;}
.fshot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.fshot .ph{display:none;}
.fshot.noimg img{display:none;}
.fshot.noimg .ph{display:grid;padding:16px;gap:8px;border-radius:10px;box-shadow:0 10px 24px rgba(24,54,120,.09);}
.fshot.noimg .ph i{height:7px;border-radius:4px;}
.fshot.noimg .ph i.hd{height:13px;width:46%;}
.fshot.noimg .ph i.big{height:88px;}
.fbody{padding:32px 34px;display:flex;flex-direction:column;justify-content:center;gap:12px;}
.flag{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.5938rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--blue);background:var(--wash);
  border:1px solid var(--blue-tint);border-radius:5px;padding:4px 9px;align-self:flex-start;
}
.fbody h2{font-size:1.625rem;letter-spacing:-.034em;}
.fbody h2 a:hover{color:var(--blue);}
.fbody p{font-size:.9375rem;}
.pmeta{
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.04em;color:var(--slate-light);text-transform:uppercase;
}
.pmeta span.sep{width:3px;height:3px;border-radius:50%;background:var(--slate-light);display:block;}

.filters{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  font-size:.8125rem;font-weight:500;color:var(--slate);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.chip:hover{border-color:#C9D5EA;color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.count{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-light);}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.post-card{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.post-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:#DCE4F1;}
.post-card.hide{display:none;}
.pshot{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,#E9F0FF,#F7FAFF);padding:14px;display:block;}
.pshot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.pshot .ph{display:none;}
.pshot.noimg img{display:none;}
.pshot.noimg .ph{display:grid;padding:11px;gap:6px;border-radius:8px;}
.pshot.noimg .ph i{height:5px;}
.pshot.noimg .ph i.hd{height:9px;width:46%;}
.pshot.noimg .ph i.big{height:38px;}
.pbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1;}
.pbody .cat{font-family:var(--mono);font-size:.5938rem;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);}
.pbody .cat:hover{text-decoration:underline;text-underline-offset:3px;}
.pbody h3{font-size:1rem;line-height:1.35;}
.pbody h3 a:hover{color:var(--blue);}
.pbody p{font-size:.8438rem;}
.pbody .pmeta{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);}

/* blog / post sidebar */
.side-col{position:sticky;top:82px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
.admin-bar .side-col{top:114px;}
.scard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:20px 22px;}
.scard h4,.scard .widget-title{
  font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:14px;
}
.slist li + li{margin-top:2px;}
.slist a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;
  border-radius:7px;font-size:.875rem;color:var(--slate);transition:background .14s ease,color .14s ease;
}
.slist a:hover{background:var(--cloud);color:var(--ink);}
.slist span{font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);}
.pop{display:flex;gap:11px;align-items:flex-start;}
.pop + .pop{margin-top:13px;padding-top:13px;border-top:1px solid var(--line-soft);}
.pop > b{font-family:var(--mono);font-size:.8125rem;color:var(--blue-tint);flex:none;line-height:1.4;}
.pop h5{font-family:var(--display);font-size:.8438rem;font-weight:700;color:var(--ink);margin:0;line-height:1.35;letter-spacing:-.018em;}
.pop:hover h5{color:var(--blue);}
.pop .pop-meta{font-family:var(--mono);font-size:.625rem;color:var(--slate-light);display:block;margin-top:3px;text-transform:uppercase;}
.promo{background:linear-gradient(160deg,#1F58EE,var(--blue) 55%,#5C8BFF);border-color:transparent;color:#fff;}
.promo h4{color:#fff;text-transform:none;letter-spacing:-.02em;font-size:1rem;margin-bottom:8px;}
.promo p{font-size:.8125rem;color:rgba(255,255,255,.86);margin-bottom:13px;}
.promo .amt{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;display:block;}
.promo .btn{margin-top:12px;}
.sub input{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 13px;font-size:.875rem;
  color:var(--ink);background:var(--cloud);margin-bottom:9px;
}
.sub input:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--white);}
.sub p{font-size:.8125rem;margin-bottom:12px;}
.sub small{display:block;margin-top:9px;font-size:.6875rem;color:var(--slate-light);}

/* ------------------------------------------------------------
   26. SINGLE POST
   --------------------------------------------------------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--blue);z-index:80;transition:width .1s linear;}
.ahead{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#F4F8FF,#fff);padding:34px 0 38px;}
.ahead .crumbs{margin-bottom:16px;}
.ahead .inner{max-width:940px;}
.tag{
  display:inline-flex;font-family:var(--mono);font-size:.5938rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue);background:var(--wash);border:1px solid var(--blue-tint);border-radius:5px;
  padding:4px 9px;margin-bottom:16px;
}
.ahead h1{margin-bottom:16px;font-size:clamp(1.875rem,3.4vw,2.75rem);letter-spacing:-.038em;line-height:1.12;}
.deck{font-size:1.0625rem;max-width:64ch;}
.byline{display:flex;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap;}
.avatar{
  width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,var(--blue),#5B8CFF);
  display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:.875rem;flex:none;
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.byline b{font-family:var(--display);font-size:.875rem;color:var(--ink);font-weight:700;}
.byline .m{font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);letter-spacing:.04em;display:block;margin-top:2px;text-transform:uppercase;}
.share{margin-left:auto;display:flex;gap:8px;}
.share button,.share a{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--white);
  display:grid;place-items:center;color:var(--slate);cursor:pointer;transition:border-color .15s ease,color .15s ease;
}
.share button:hover,.share a:hover{border-color:#C9D5EA;color:var(--ink);}

.post-shell{
  display:grid;grid-template-columns:minmax(0,945px) 300px;gap:48px;padding:38px 0 76px;
  justify-content:center;align-items:start;
}
.hero-img{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,#E9F0FF,#F7FAFF);aspect-ratio:16/9;position:relative;margin:0 0 30px;
}
.hero-img img{width:100%;height:100%;object-fit:cover;}
.hero-img .ph{display:none;}
.hero-img.noimg{padding:26px;}
.hero-img.noimg img{display:none;}
.hero-img.noimg .ph{display:grid;padding:16px;gap:9px;border-radius:10px;box-shadow:0 10px 24px rgba(24,54,120,.09);}
.hero-img.noimg .ph i{height:7px;border-radius:4px;}
.hero-img.noimg .ph i.hd{height:13px;width:42%;}
.hero-img.noimg .ph i.big{height:92px;}

/* long-form prose */
.article{font-size:1.0625rem;line-height:1.72;color:#3E4859;}
.article > * + *{margin-top:20px;}
.article h2{font-size:1.5rem;margin-top:42px;scroll-margin-top:96px;}
.article h3{font-size:1.125rem;margin-top:30px;}
.article h4{font-size:1rem;margin-top:24px;}
.article a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.article a:hover{color:var(--blue-deep);}
.article strong,.article b{color:var(--ink);font-weight:600;}
.article ul,.article ol{display:grid;gap:10px;padding-left:0;}
.article ul li{display:flex;gap:11px;align-items:flex-start;list-style:none;}
.article ul li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;margin-top:10px;
}
.article ul.bullets li::before{content:none;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;margin-top:10px;}
.article ol{counter-reset:s;}
.article ol li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;list-style:none;}
.article ol li::before{
  content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--wash);color:var(--blue);font-family:var(--mono);font-size:.75rem;font-weight:500;
  display:grid;place-items:center;margin-top:3px;
}
.article blockquote,.note{
  border-left:3px solid var(--amber);background:#FFF9EF;border-radius:0 10px 10px 0;
  padding:16px 20px;font-size:.9375rem;color:var(--ink);
}
.article blockquote p + p{margin-top:10px;}
.article img,.article figure img{border-radius:var(--r-lg);border:1px solid var(--line);}
.article figure{margin:0;}
.article figcaption{padding:11px 4px 0;font-size:.8125rem;color:var(--slate-light);}
.article code{
  font-family:var(--mono);font-size:.875em;background:var(--cloud);border:1px solid var(--line-soft);
  border-radius:5px;padding:2px 6px;color:var(--ink);
}
.article pre{
  background:var(--ink);color:#DCE8FF;border-radius:var(--r-lg);padding:20px 22px;overflow-x:auto;
  font-family:var(--mono);font-size:.875rem;line-height:1.6;
}
.article pre code{background:none;border:0;padding:0;color:inherit;}
.article table{width:100%;border-collapse:collapse;font-size:.9375rem;}
.article th,.article td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft);}
.article th{font-family:var(--display);color:var(--ink);font-weight:700;background:var(--cloud);}
.article hr{border:0;border-top:1px solid var(--line);margin:32px 0;}
.figure{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--cloud);}
.figure .box{aspect-ratio:16/9;background:linear-gradient(160deg,#E9F0FF,#F7FAFF);padding:20px;}
.figure figcaption{padding:11px 16px;font-size:.8125rem;color:var(--slate-light);border-top:1px solid var(--line);background:var(--white);}

.inline-cta{
  border:1px solid transparent;border-radius:var(--r-lg);padding:24px 26px;color:#fff;
  background:linear-gradient(155deg,#1B4FE0,var(--blue) 52%,#5B8BFF);
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.inline-cta h3{color:#fff;font-size:1.0625rem;}
.inline-cta p{font-size:.875rem;color:rgba(255,255,255,.86);margin-top:5px;max-width:52ch;}
.inline-cta .btn{margin-left:auto;flex:none;}

.authorbox{
  margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--cloud);
  padding:22px 24px;display:flex;gap:16px;align-items:flex-start;
}
.authorbox p{font-size:.875rem;margin-top:6px;}
.authorbox b{font-family:var(--display);font-size:.9375rem;color:var(--ink);}
.authorbox a{color:var(--blue);}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
.pn a{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;background:var(--white);transition:border-color .15s ease,box-shadow .15s ease;}
.pn a:hover{border-color:#C9D5EA;box-shadow:var(--shadow-card);}
.pn span{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-light);}
.pn h4{font-size:.9125rem;margin-top:6px;line-height:1.35;}
.pn a:hover h4{color:var(--blue);}
.pn .next{text-align:right;}
.toc li + li{margin-top:3px;}
.toc a{
  display:block;padding:6px 10px;border-radius:7px;font-size:.8438rem;color:var(--slate);
  border-left:2px solid transparent;transition:background .14s ease,color .14s ease;
}
.toc a:hover{background:var(--cloud);color:var(--ink);}
.toc a.on{color:var(--blue-deep);background:var(--wash);border-left-color:var(--blue);font-weight:600;}
.rel{display:flex;gap:11px;align-items:flex-start;}
.rel + .rel{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);}
.rel .rs{
  width:58px;height:44px;border-radius:7px;background:linear-gradient(160deg,#E9F0FF,#F7FAFF);
  border:1px solid var(--line);flex:none;overflow:hidden;
}
.rel .rs img{width:100%;height:100%;object-fit:cover;}
.rel h5{font-family:var(--display);font-size:.8125rem;font-weight:700;color:var(--ink);margin:0;line-height:1.35;letter-spacing:-.018em;}
.rel:hover h5{color:var(--blue);}
.rel .rel-meta{font-family:var(--mono);font-size:.5938rem;color:var(--slate-light);display:block;margin-top:3px;text-transform:uppercase;}

/* ------------------------------------------------------------
   27. SUPPORT / FAQ TEMPLATE
   --------------------------------------------------------- */
.page-hero{background:linear-gradient(180deg,#F2F7FF,#fff);border-bottom:1px solid var(--line);padding:44px 0 40px;}
.page-hero.center{text-align:center;}
.page-hero .crumbs{margin-bottom:14px;}
.page-hero.center h1{max-width:24ch;margin:0 auto 12px;}
.page-hero.center p{max-width:60ch;margin:0 auto;font-size:.9375rem;}
.page-hero h1{margin-bottom:10px;}
.page-hero p{font-size:.9375rem;max-width:66ch;}
.searchbox{position:relative;max-width:520px;margin:26px auto 0;}
.searchbox input{
  width:100%;border:1px solid var(--line);background:var(--white);border-radius:10px;
  padding:14px 16px 14px 42px;font-size:.9375rem;color:var(--ink);box-shadow:var(--shadow-card);
}
.searchbox input:focus{outline:2px solid var(--blue);outline-offset:-1px;}
.searchbox svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--slate-light);}
.searchbox button[type=submit]{position:absolute;left:-9999px;}
.hint{margin-top:10px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;color:var(--slate-light);text-transform:uppercase;}

.quick{padding:34px 0 6px;}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.qcard{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:22px;
  box-shadow:var(--shadow-card);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;display:block;
}
.qcard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:#DCE4F1;}
.qico{
  width:36px;height:36px;border-radius:10px;background:var(--wash);color:var(--blue);
  display:grid;place-items:center;margin-bottom:16px;
}
.qcard h3{margin-bottom:6px;}
.qcard p{font-size:.8438rem;}
.qcard > span{display:inline-block;margin-top:10px;font-size:.8125rem;font-weight:600;color:var(--blue);}

.support-shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;padding:44px 0 76px;align-items:start;}
.sidenav{position:sticky;top:82px;}
.admin-bar .sidenav{top:114px;}
.sidenav h4{
  font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:12px;
}
.sidenav a{display:block;padding:8px 11px;border-radius:7px;font-size:.875rem;color:var(--slate);transition:background .14s ease,color .14s ease;}
.sidenav a:hover{background:var(--cloud);color:var(--ink);}
.sidenav a.on{background:var(--wash);color:var(--blue-deep);font-weight:600;}
.group{scroll-margin-top:100px;}
.group + .group{margin-top:38px;}
.group > h2{margin-bottom:6px;font-size:1.1875rem;}
.group > .gsub{font-size:.875rem;margin-bottom:16px;}
.acc-item.hide{display:none;}
.callout{
  margin-top:12px;border-left:3px solid var(--amber);background:#FFF9EF;border-radius:0 8px 8px 0;
  padding:11px 14px;font-size:.8438rem;color:var(--ink);
}
.noresults{display:none;border:1px dashed var(--line);border-radius:var(--r-lg);padding:40px;text-align:center;color:var(--slate-light);}
.noresults.show{display:block;}
.noresults button{background:none;border:0;color:var(--blue);font-weight:600;cursor:pointer;}

.contact-strip{border-top:1px solid var(--line);background:var(--cloud);padding:52px 0 60px;}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;}
.cbox{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;}
.cbox h2{margin-bottom:10px;font-size:1.1875rem;}
.cbox p{font-size:.9375rem;}
.cbox a{color:var(--blue);}
.mailbtn{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-family:var(--mono);font-size:.875rem;
  color:#fff;background:var(--blue);border-radius:8px;padding:11px 18px;
}
.mailbtn:hover{background:var(--blue-deep);color:#fff;}
.checklist{margin-top:18px;display:grid;gap:9px;font-size:.875rem;}
.checklist li{display:flex;gap:9px;align-items:flex-start;}
.sla{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:.8125rem;color:var(--slate-light);}

/* ------------------------------------------------------------
   28. CONTACT TEMPLATE
   --------------------------------------------------------- */
.routes{padding:34px 0 0;}
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.route{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:22px;
  box-shadow:var(--shadow-card);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;display:block;
}
.route:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:#DCE4F1;}
.rico{width:36px;height:36px;border-radius:10px;background:var(--wash);color:var(--blue);display:grid;place-items:center;margin-bottom:15px;}
.route h3{margin-bottom:6px;}
.route p{font-size:.8438rem;}
.route > span{display:inline-block;margin-top:10px;font-size:.8125rem;font-weight:600;color:var(--blue);}

.form-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:38px;padding:40px 0 76px;align-items:start;}
.formcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:30px 32px;box-shadow:var(--shadow-card);}
.formcard h2{margin-bottom:6px;font-size:1.25rem;}
.formcard > p{font-size:.9125rem;margin-bottom:22px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{display:block;margin-bottom:14px;}
.field > span,
.field > label{display:block;font-family:var(--display);font-size:.8125rem;font-weight:700;color:var(--ink);margin-bottom:6px;}
.field .opt-note{font-family:var(--body);font-weight:400;color:var(--slate-light);font-size:.75rem;margin-left:5px;font-style:normal;}
.field input,.field select,.field textarea,
.wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.wpcf7 select,.wpcf7 textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 14px;
  font-size:.9125rem;color:var(--ink);background:var(--cloud);
}
.field input:focus,.field select:focus,.field textarea:focus,
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--white);}
.field textarea,.wpcf7 textarea{min-height:150px;resize:vertical;}
.hintline{font-size:.75rem;color:var(--slate-light);margin-top:6px;display:block;font-family:var(--body);font-weight:400;}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem;margin:6px 0 18px;}
.consent input{width:16px;height:16px;accent-color:var(--blue);margin-top:2px;flex:none;}
.consent a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.formfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.formfoot p{font-size:.75rem;color:var(--slate-light);}
.sent{
  display:none;border:1px solid #CBEEDF;background:#F0FBF6;border-radius:var(--r-md);
  padding:14px 16px;font-size:.875rem;color:#0E7A57;margin-bottom:18px;
}
.sent.show{display:block;}
.kv{display:flex;gap:11px;align-items:flex-start;font-size:.8438rem;}
.kv + .kv{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft);}
.kv b{font-family:var(--display);font-size:.8125rem;color:var(--ink);display:block;}
.kv .kv-text > span{display:block;margin-top:2px;}
.warn{
  border-left:3px solid var(--amber);background:#FFF9EF;border-radius:0 8px 8px 0;
  padding:12px 14px;font-size:.8125rem;color:var(--ink);margin-top:12px;
}
.scard.promo .btn{background:#fff;color:var(--ink);}
.scard.promo .btn:hover{background:#F2F6FF;}

/* ------------------------------------------------------------
   29. WOOCOMMERCE — notices
   --------------------------------------------------------- */
.woocommerce-notices-wrapper:empty{display:none;}
.woocommerce-message,.woocommerce-info,.woocommerce-error,
ul.woocommerce-error,.wc-block-components-notice-banner{
  list-style:none;margin:0 0 18px;padding:14px 18px;border-radius:var(--r-md);
  font-size:.875rem;border:1px solid var(--line);background:var(--cloud);color:var(--ink);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
.woocommerce-message{background:#F0FBF6;border-color:#CBEEDF;color:#0E7A57;}
.woocommerce-info{background:var(--wash);border-color:var(--blue-tint);color:var(--blue-deep);}
.woocommerce-error{background:#FEF2F2;border-color:#FBD5D5;color:#B42318;}
/* WooCommerce places its own icon with an absolutely positioned ::before,
   which lands on top of the first word once the notice is a padded flex row.
   Make it an ordinary flex item instead. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
ul.woocommerce-error::before,
.wc-block-components-notice-banner::before{
  position:static;top:auto;left:auto;right:auto;margin:0;padding:0;
  flex:none;line-height:1;font-size:1rem;
}
.woocommerce-message > li,
.woocommerce-info > li,
.woocommerce-error > li,
ul.woocommerce-error > li{flex:1 1 auto;min-width:0;margin:0;padding:0;list-style:none;}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;}
.woocommerce-notices-wrapper .button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--body);font-weight:600;font-size:.8438rem;padding:10px 18px;
  border-radius:8px;border:1px solid transparent;background:var(--ink);color:#fff;cursor:pointer;
  transition:background .15s ease;
}
.woocommerce .button:hover,.woocommerce a.button:hover,
.woocommerce button.button:hover,.woocommerce input.button:hover{background:#1B2537;color:#fff;}
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt{background:var(--blue);color:#fff;}
.woocommerce .button.alt:hover{background:var(--blue-deep);}

/* ------------------------------------------------------------
   30. WOOCOMMERCE — cart
   --------------------------------------------------------- */
.store-shell{padding:34px 0 76px;}
.store-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;}
.cart-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden;}
.cart-head{
  display:grid;grid-template-columns:1fr 110px 110px 36px;gap:14px;padding:12px 20px;
  background:#FAFCFF;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-light);
}
.cart-row{
  display:grid;grid-template-columns:1fr 110px 110px 36px;gap:14px;padding:18px 20px;align-items:center;
}
.cart-row + .cart-row{border-top:1px solid var(--line-soft);}
.cart-item{display:flex;gap:14px;align-items:center;}
.cart-thumb{
  width:76px;height:58px;border-radius:9px;border:1px solid var(--line);flex:none;overflow:hidden;
  background:linear-gradient(165deg,#E9F0FF,#F7FAFF);
}
.cart-thumb img{width:100%;height:100%;object-fit:cover;}
.cart-item h3{font-size:.9375rem;}
.cart-item h3 a:hover{color:var(--blue);}
.cart-item .cart-meta{font-size:.75rem;color:var(--slate-light);display:block;margin-top:3px;}
.cart-item dl{margin:6px 0 0;font-size:.75rem;color:var(--slate-light);}
.qty-box{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.qty-box button{background:var(--white);border:0;width:30px;height:34px;color:var(--slate);font-size:1rem;line-height:1;}
.qty-box button:hover{background:var(--cloud);color:var(--ink);}
.qty-box input{
  width:44px;height:34px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-size:.875rem;color:var(--ink);background:var(--white);-moz-appearance:textfield;
}
.qty-box input::-webkit-outer-spin-button,.qty-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-price{font-family:var(--display);font-weight:700;color:var(--ink);font-size:.9375rem;}
.cart-remove{
  width:30px;height:30px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--slate-light);background:var(--white);font-size:.9rem;
}
.cart-remove:hover{border-color:#FBD5D5;color:#B42318;background:#FEF2F2;}
.cart-foot{
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:16px 20px;border-top:1px solid var(--line);background:#FAFCFF;
}
.coupon{display:flex;gap:8px;flex-wrap:wrap;}
.coupon input{
  border:1px solid var(--line);border-radius:8px;padding:9px 13px;font-size:.8438rem;
  background:var(--white);color:var(--ink);min-width:180px;
}
.coupon input:focus{outline:2px solid var(--blue);outline-offset:-1px;}

.summary{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:22px;
  box-shadow:var(--shadow-card);position:sticky;top:82px;
}
.admin-bar .summary{top:114px;}
.summary h2{font-size:1rem;margin-bottom:16px;}
.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;padding:9px 0;}
.sum-row + .sum-row{border-top:1px solid var(--line-soft);}
.sum-row.total{
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.25rem;letter-spacing:-.03em;align-items:baseline;
}
.sum-row.total span:first-child{font-family:var(--body);font-size:.8438rem;font-weight:400;color:var(--slate);}
.summary .btn{margin-top:16px;}
.summary .assure{margin-top:16px;}
.cart-empty{
  border:1px dashed var(--line);border-radius:var(--r-lg);padding:56px 32px;text-align:center;
  max-width:620px;margin-inline:auto;
}
.cart-empty .ico{margin:0 auto 18px;width:46px;height:46px;}
.cart-empty h1{font-size:1.5rem;margin-bottom:10px;}
.cart-empty p{font-size:.9375rem;max-width:44ch;margin:0 auto 22px;}

/* ------------------------------------------------------------
   31. WOOCOMMERCE — checkout
   --------------------------------------------------------- */
.checkout-steps{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:22px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-light);
}
.checkout-steps b{color:var(--ink);font-weight:500;}
.checkout-steps .on{color:var(--blue);}
.co-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:26px 28px;}
.co-card + .co-card{margin-top:18px;}
.co-card h2,.co-card h3{font-size:1rem;margin-bottom:16px;}
.woocommerce form .form-row{display:block;margin-bottom:14px;padding:0;}
.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label{
  display:block;font-family:var(--display);font-size:.8125rem;font-weight:700;color:var(--ink);margin-bottom:6px;
}
.woocommerce form .form-row .required{color:var(--blue);text-decoration:none;border:0;}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 14px;height:auto;
  font-size:.9125rem;color:var(--ink);background:var(--cloud);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--white);}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none;}
.co-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4;padding:0;color:var(--ink);}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:8px;right:8px;}

/* The order column is not sticky. The payment block is a sibling of the summary,
   so sticking the summary alone let payment slide over it on scroll — and
   sticking the whole column can push Place order below the fold on a short
   viewport. The cart summary, which is always short, stays sticky. */
.order-review{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:22px;
  box-shadow:var(--shadow-card);
}
.order-review h2{font-size:1rem;margin-bottom:16px;}
.order-line{display:flex;gap:12px;align-items:flex-start;padding:11px 0;font-size:.875rem;}
.order-line + .order-line{border-top:1px solid var(--line-soft);}
.order-line .oname{flex:1;color:var(--ink);}
.order-line .oname small{display:block;font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);margin-top:3px;}
.order-line .oprice{font-family:var(--display);font-weight:700;color:var(--ink);}
#payment{margin-top:18px;}
#payment ul.payment_methods{
  list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px;border:0;
}
#payment ul.payment_methods li{
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;background:var(--white);
}
#payment ul.payment_methods li input{accent-color:var(--blue);margin-right:8px;}
#payment ul.payment_methods li label{
  font-family:var(--display);font-size:.9125rem;font-weight:700;color:var(--ink);display:inline;
}
.woocommerce-checkout #payment div.payment_box{
  margin:10px 0 0;background:var(--cloud);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:12px 14px;font-size:.8125rem;color:var(--slate);
}
.woocommerce-checkout #payment div.payment_box::before{display:none;}
.woocommerce-checkout #payment div.payment_box p{margin:0;padding:0;}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:0;padding:0;margin:0 0 16px;}
.woocommerce-checkout #payment ul.payment_methods li{list-style:none;}
.woocommerce-checkout #payment ul.payment_methods li img{max-height:22px;width:auto;margin-left:8px;}
.woocommerce-checkout #payment{background:transparent;border-radius:0;}
#payment .place-order{padding:0;margin:0;}
#payment .woocommerce-privacy-policy-text{font-size:.75rem;color:var(--slate-light);margin-bottom:12px;}
#place_order{width:100%;font-size:.9375rem;padding:13px 22px;background:var(--blue);}
#place_order:hover{background:var(--blue-deep);}
.woocommerce-form__label-for-checkbox{display:flex;gap:9px;align-items:flex-start;font-size:.8125rem;}
.woocommerce-form__label-for-checkbox input{accent-color:var(--blue);margin-top:3px;}

/* ------------------------------------------------------------
   32. WOOCOMMERCE — thank you
   --------------------------------------------------------- */
.thanks-hero{
  background:linear-gradient(180deg,#F2F7FF,#fff);border-bottom:1px solid var(--line);
  padding:52px 0 46px;text-align:center;
}
.thanks-mark{
  width:56px;height:56px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center;
  margin:0 auto 18px;font-size:1.4rem;box-shadow:0 12px 30px rgba(18,185,129,.32);
}
.thanks-hero h1{margin-bottom:10px;}
.thanks-hero p{max-width:56ch;margin:0 auto;font-size:.9375rem;}
.order-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--white);margin-top:28px;box-shadow:var(--shadow-card);
}
.order-meta div{padding:18px 20px;text-align:left;}
.order-meta div + div{border-left:1px solid var(--line-soft);}
.order-meta b{
  display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate-light);margin-bottom:7px;
}
.order-meta span{font-family:var(--display);font-size:.9375rem;font-weight:700;color:var(--ink);}
.downloads-card .dl-row{display:flex;gap:14px;align-items:center;padding:14px 0;}
.downloads-card .dl-row + .dl-row{border-top:1px solid var(--line-soft);}
.downloads-card .dl-row .dl-name{flex:1;font-family:var(--display);font-size:.9125rem;font-weight:700;color:var(--ink);}
.downloads-card .dl-row small{display:block;font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);font-weight:400;margin-top:3px;}

/* ------------------------------------------------------------
   33. WOOCOMMERCE — my account
   --------------------------------------------------------- */
.account-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;padding:34px 0 76px;align-items:start;}
.account-nav{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:14px;position:sticky;top:82px;}
.admin-bar .account-nav{top:114px;}
.account-user{display:flex;gap:11px;align-items:center;padding:6px 8px 14px;border-bottom:1px solid var(--line-soft);margin-bottom:10px;}
.account-user b{font-family:var(--display);font-size:.875rem;color:var(--ink);display:block;}
.account-user span{font-size:.75rem;color:var(--slate-light);}
.woocommerce-MyAccount-navigation ul{display:grid;gap:2px;}
.woocommerce-MyAccount-navigation a{
  display:block;padding:9px 11px;border-radius:8px;font-size:.875rem;color:var(--slate);
  transition:background .14s ease,color .14s ease;
}
.woocommerce-MyAccount-navigation a:hover{background:var(--cloud);color:var(--ink);}
.woocommerce-MyAccount-navigation .is-active a{background:var(--wash);color:var(--blue-deep);font-weight:600;}
.woocommerce-MyAccount-content{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:26px 28px;
}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-size:1.0625rem;margin-bottom:14px;}
.woocommerce-MyAccount-content p{font-size:.9375rem;margin-bottom:12px;}
.woocommerce-MyAccount-content a{color:var(--blue);}
.woocommerce table.shop_table,
.woocommerce-MyAccount-content table{
  width:100%;border-collapse:collapse;font-size:.875rem;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.woocommerce table.shop_table th{
  background:#FAFCFF;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-light);text-align:left;padding:11px 14px;font-weight:500;
}
.woocommerce table.shop_table td{padding:13px 14px;border-top:1px solid var(--line-soft);color:var(--ink);}
.woocommerce table.shop_table td.woocommerce-orders-table__cell-order-actions{text-align:right;}

.login-shell{max-width:920px;margin-inline:auto;padding:44px 0 76px;}
.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.login-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:30px 32px;box-shadow:var(--shadow-card);}
.login-card h2{font-size:1.125rem;margin-bottom:6px;}
.login-card > p{font-size:.875rem;margin-bottom:20px;}
.login-card .woocommerce-form-login__rememberme{display:flex;gap:9px;align-items:center;font-size:.8125rem;margin-bottom:14px;}
.login-card .lost_password{font-size:.8125rem;margin-top:12px;}
.login-card .lost_password a{color:var(--blue);}

/* ------------------------------------------------------------
   34. SEARCH, 404, PAGE, COMMENTS
   --------------------------------------------------------- */
.page-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:38px;padding:38px 0 76px;}
.page-shell.has-sidebar{grid-template-columns:minmax(0,1fr) 300px;}
.entry-content{font-size:1rem;line-height:1.7;color:#3E4859;}
.entry-content > * + *{margin-top:18px;}
.entry-content h2{font-size:1.375rem;margin-top:34px;}
.entry-content h3{font-size:1.0625rem;margin-top:26px;}
.entry-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.entry-content ul,.entry-content ol{padding-left:22px;}
.entry-content ul li{list-style:disc;}
.entry-content ol li{list-style:decimal;}
.entry-content li + li{margin-top:7px;}
.entry-content img{border-radius:var(--r-lg);}
.entry-content .alignwide{width:min(100%, calc(var(--maxw) - var(--gut) * 2));}
.entry-content .alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);}
.entry-content .alignleft{float:left;margin:4px 22px 14px 0;}
.entry-content .alignright{float:right;margin:4px 0 14px 22px;}
.entry-content .aligncenter{margin-inline:auto;}
.wp-caption-text,.entry-content figcaption{font-size:.8125rem;color:var(--slate-light);padding-top:9px;}
.wp-block-button__link{
  background:var(--blue);color:#fff;border-radius:8px;padding:11px 20px;font-weight:600;font-size:.9125rem;
  text-decoration:none;display:inline-block;
}
.wp-block-button.is-style-outline .wp-block-button__link{background:none;border:1px solid var(--line);color:var(--ink);}
.wp-block-separator{border:0;border-top:1px solid var(--line);margin:30px 0;}
.wp-block-table td,.wp-block-table th{border:1px solid var(--line-soft);padding:9px 12px;}

.error404-hero{text-align:center;padding:90px 0 40px;background:linear-gradient(180deg,#F2F7FF,#fff);border-bottom:1px solid var(--line);}
.error-code{
  font-family:var(--display);font-size:clamp(4rem,12vw,7.5rem);font-weight:800;line-height:1;
  letter-spacing:-.05em;color:transparent;
  background:linear-gradient(150deg,var(--blue),#6E97FF 55%,var(--blue-tint));
  -webkit-background-clip:text;background-clip:text;
}
.error404-hero h1{margin:14px 0 12px;font-size:1.75rem;}
.error404-hero p{max-width:52ch;margin:0 auto 26px;font-size:.9375rem;}
.error-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.error-links{padding:44px 0 76px;}

.search-shell{padding:34px 0 76px;}
.search-summary{font-size:.9375rem;margin-bottom:22px;}
.search-summary b{color:var(--ink);}
.search-list{display:grid;gap:14px;}
.search-item{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:18px 20px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.search-item:hover{border-color:#C9D5EA;box-shadow:var(--shadow-card);}
.search-item .kind{
  font-family:var(--mono);font-size:.5938rem;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);
  background:var(--wash);border:1px solid var(--blue-tint);border-radius:5px;padding:3px 8px;display:inline-block;margin-bottom:9px;
}
.search-item h2{font-size:1.0625rem;margin-bottom:6px;}
.search-item h2 a:hover{color:var(--blue);}
.search-item p{font-size:.875rem;}

.comments{margin-top:44px;border-top:1px solid var(--line);padding-top:32px;}
.comments h2{font-size:1.125rem;margin-bottom:20px;}
.comment-list{display:grid;gap:18px;}
.comment-list .children{display:grid;gap:18px;margin:18px 0 0 32px;padding-left:18px;border-left:1px solid var(--line-soft);}
.comment-body{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:18px 20px;}
.comment-head{display:flex;gap:11px;align-items:center;margin-bottom:9px;flex-wrap:wrap;}
.comment-head b{font-family:var(--display);font-size:.875rem;color:var(--ink);}
.comment-head time{font-family:var(--mono);font-size:.6875rem;color:var(--slate-light);}
.comment-body p{font-size:.9125rem;}
.comment-reply-link{font-size:.8125rem;font-weight:600;color:var(--blue);display:inline-block;margin-top:10px;}
.comment-respond{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--cloud);padding:24px 26px;}
.comment-respond .comment-reply-title{font-size:1rem;margin-bottom:16px;}
.comment-form label{display:block;font-family:var(--display);font-size:.8125rem;font-weight:700;color:var(--ink);margin-bottom:6px;}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 14px;
  font-size:.9125rem;color:var(--ink);background:var(--white);margin-bottom:14px;
}
.comment-form textarea{min-height:130px;resize:vertical;}
.comment-form .form-submit input{
  background:var(--blue);color:#fff;border:0;border-radius:8px;padding:11px 20px;font-weight:600;font-size:.8438rem;cursor:pointer;
}
.comment-form .comment-form-cookies-consent{display:flex;gap:9px;align-items:flex-start;font-size:.8125rem;margin-bottom:14px;}

/* widgets */
.widget + .widget{margin-top:16px;}
.widget ul{display:grid;gap:2px;}
.widget ul li a{display:block;padding:7px 9px;border-radius:7px;font-size:.875rem;color:var(--slate);}
.widget ul li a:hover{background:var(--cloud);color:var(--ink);}
.widget select{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--white);}
.widget .search-field{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 13px;background:var(--cloud);}

/* ------------------------------------------------------------
   35. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1180px){
  .strip > .theme-card{flex-basis:calc((100% - (var(--gut) * 2) - 60px) / 4);max-width:calc((100% - (var(--gut) * 2) - 60px) / 4);}
  .grid{grid-template-columns:repeat(2,1fr);}
  .shell--blog{grid-template-columns:minmax(0,1fr) 280px;gap:26px;}
  .product{grid-template-columns:minmax(0,1fr) 330px;gap:26px;}
  .dgrid{grid-template-columns:minmax(0,1fr) 300px;}
  .rgrid{grid-template-columns:repeat(2,1fr);}
  .post-grid{grid-template-columns:repeat(2,1fr);}
  .head-search{max-width:240px;}
  .post-shell{grid-template-columns:minmax(0,1fr) 280px;gap:34px;}
  .store-grid{grid-template-columns:minmax(0,1fr) 320px;gap:24px;}
}
@media (max-width:1024px){
  .strip > .theme-card{flex-basis:calc((100% - (var(--gut) * 2) - 40px) / 3);max-width:calc((100% - (var(--gut) * 2) - 40px) / 3);}
  .feat{grid-template-columns:repeat(2,1fr);}
  .bento{grid-template-columns:1fr 1fr;}
  .bento figure:last-child{grid-column:span 2;}
  .gallery{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr;gap:36px;}
  .split-flip .split-copy{order:0;}
  .sec-head{grid-template-columns:1fr;align-items:start;gap:18px;}
  .freebie{grid-template-columns:1fr;gap:32px;padding:36px;}
  .story{grid-template-columns:1fr;gap:26px;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .steps-list{grid-template-columns:1fr 1fr;}
  .stepbox:nth-child(3){border-left:0;}
  .stepbox:nth-child(n+3){border-top:1px solid var(--line-soft);}
  .promise{grid-template-columns:1fr;gap:30px;padding:36px;}
  .qgrid,.route-grid,.cgrid{grid-template-columns:1fr;}
  .form-shell{grid-template-columns:1fr;gap:26px;}
  .form-shell .side-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:static;}
  .foot-grid{grid-template-columns:1.3fr 1fr 1fr;}
  .order-meta{grid-template-columns:1fr 1fr;}
  .order-meta div:nth-child(3),.order-meta div:nth-child(4){border-top:1px solid var(--line-soft);}
  .order-meta div:nth-child(3){border-left:0;}
}
@media (max-width:960px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .head-search{max-width:220px;}
  .shell,.shell--blog{grid-template-columns:1fr;gap:20px;}
  .side{position:static;display:none;}
  .side.open{display:grid;}
  .filters-toggle{display:inline-flex;}
  .product{grid-template-columns:1fr;}
  .buybox{position:static;}
  .dgrid{grid-template-columns:1fr;}
  .demolist{grid-template-columns:repeat(2,1fr);}
  .post-shell{grid-template-columns:1fr;gap:30px;}
  .side-col{position:static;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .side-col .toc-card{grid-column:span 2;}
  .fcard{grid-template-columns:1fr;}
  .fshot{min-height:210px;}
  .support-shell{grid-template-columns:1fr;gap:22px;}
  .sidenav{position:static;display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;}
  .sidenav h4{display:none;}
  .sidenav a{white-space:nowrap;border:1px solid var(--line);}
  .store-grid,.account-shell{grid-template-columns:1fr;}
  .summary,.account-nav{position:static;}
  .page-shell.has-sidebar{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .strip > .theme-card{flex-basis:calc((100% - (var(--gut) * 2) - 20px) / 2);max-width:calc((100% - (var(--gut) * 2) - 20px) / 2);}
  body.novex-marketing .nav-links{display:none;}
  .proof-grid{grid-template-columns:1fr 1fr;gap:30px;}
  .bento-2{grid-template-columns:1fr;}
  .numbers{grid-template-columns:1fr 1fr;gap:30px;}
  .login-grid{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .strip{gap:14px;}
  .strip > .theme-card{flex-basis:calc(100% - (var(--gut) * 2) - 32px);max-width:calc(100% - (var(--gut) * 2) - 32px);}
  :root{--gut:16px;}
  body.novex-marketing{--gut:18px;--sec-pad:70px;}
  /* the header row is the widest fixed thing on a phone — trim it to
     brand + cart + burger, and move the rest into the slide-in panel */
  .site-nav > .wrap{gap:12px;}
  .nav-shell .nav{padding:8px 8px 8px 16px;gap:10px;}
  .nav-right .btn,.nav-cta .btn,.acct{display:none;}
  .brand{font-size:1rem;min-width:0;}
  .brand img{max-height:28px;}
  .grid{grid-template-columns:1fr 1fr;gap:12px;}
  .meta{padding:11px 12px 13px;}
  .grid.list .item{flex-direction:column;}
  .grid.list .shot{width:100%;aspect-ratio:4/3;}
  .head-search{display:none;}
  .feat,.bento,.gallery,.price-grid,.grid-3,.steps-list,.post-grid{grid-template-columns:1fr;}
  .bento figure:last-child{grid-column:auto;}
  .stepbox + .stepbox{border-left:0;border-top:1px solid var(--line-soft);}
  .hero,.about-hero{margin-top:-84px;padding:126px 0 56px;}
  .ico{margin-bottom:20px;}
  .band{padding:46px 22px;}
  .freebie,.promise{padding:28px 22px;}
  .split + .split{margin-top:62px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .pdp-thumbs{grid-template-columns:repeat(4,1fr);}
  .feats{grid-template-columns:1fr;}
  .block,.co-card,.formcard,.cbox,.woocommerce-MyAccount-content,.login-card{padding:20px;}
  .mobilebuy{display:flex;}
  body.single-product{padding-bottom:66px;}
  .side-col{grid-template-columns:minmax(0,1fr);}
  .side-col .toc-card{grid-column:auto;}
  .pn,.frow,.co-row2{grid-template-columns:1fr;}
  .inline-cta .btn{margin-left:0;}
  .fbody{padding:22px;}
  .fbody h2{font-size:1.3rem;}
  .article{font-size:1rem;}
  .cart-head{display:none;}
  .cart-row{grid-template-columns:1fr auto;gap:12px 14px;}
  .cart-row .cart-item{grid-column:1 / -1;}
  .order-meta{grid-template-columns:1fr;}
  .order-meta div + div{border-left:0;border-top:1px solid var(--line-soft);}
  .rgrid{grid-template-columns:1fr 1fr;}
  .demolist{grid-template-columns:1fr 1fr;}
}
@media (max-width:420px){
  .grid,.rgrid{grid-template-columns:1fr;}
  .proof-grid,.numbers{grid-template-columns:1fr;}
}

/* ------------------------------------------------------------
   36. MOTION + PRINT
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;}
}
@media print{
  .topbar,.site-nav,.nav-shell,.mobile-nav,.nav-scrim,.foot,.mobilebuy,.side,.side-col,.share{display:none!important;}
  body{color:#000;font-size:12pt;}
  .wrap{max-width:none;padding:0;}
}

/* footer legal row sits inline rather than stacked like the link columns */
.foot-bottom nav ul,.foot-legal{display:flex;gap:18px;flex-wrap:wrap;}
.foot-bottom nav a{font-size:.75rem;}

/* the payment block reads as its own card beside the order review */
#payment.woocommerce-checkout-payment{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:22px;box-shadow:var(--shadow-card);margin-top:16px;
}
#payment.woocommerce-checkout-payment h2{font-size:1rem;margin-bottom:16px;}
.login-grid.single{grid-template-columns:minmax(0,520px);justify-content:center;}

/* Widget markup (block widgets in particular) must not widen the sidebar. */
.side-col .widget,.side .widget,.scard .widget{min-width:0;}
.scard .wp-block-search__inside-wrapper{flex-wrap:wrap;gap:8px;}
.scard .wp-block-search__input{min-width:0;flex:1 1 100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--cloud);}
.scard .wp-block-search__button{border:0;border-radius:8px;background:var(--ink);color:#fff;padding:9px 14px;font-size:.8125rem;}
.scard ul{display:grid;gap:6px;}
.scard li{min-width:0;}
.scard .wp-block-heading{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:12px;}

/* ------------------------------------------------------------
   37. WOOCOMMERCE OVERRIDES
   --------------------------------------------------------- */

/* The account columns are grid items; WooCommerce's own float + percentage
   widths shrink them to 25% / 68% of their track. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{float:none;width:100%;}
.woocommerce-account .account-shell{width:100%;}

/* Coupon form — moved into the order column, styled as part of the summary. */
.coupon-card{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow-card);
}
.coupon-card summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  list-style:none;font-family:var(--display);font-weight:700;font-size:.875rem;color:var(--ink);
}
.coupon-card summary::-webkit-details-marker{display:none;}
.coupon-card summary::after{content:"+";font-family:var(--mono);color:var(--blue);}
.coupon-card[open] summary::after{content:"–";}
.coupon-card .coupon-body{margin-top:14px;}
.coupon-card p{font-size:.8125rem;color:var(--slate);margin-bottom:10px;}
/* Its own class, not .form-row: every `.woocommerce form .form-row` rule —
   ours and WooCommerce's — lays fields out one per line. Grid also keeps the
   two columns whatever `display` or `flex-direction` is inherited. */
.coupon-card .coupon-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:8px;margin:0;padding:0;
}
.coupon-card .coupon-row input[type=text]{
  width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:10px 13px;
  font-size:.875rem;background:var(--cloud);color:var(--ink);
}
.coupon-card .coupon-row input[type=text]:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--white);}
.coupon-card .coupon-row button{white-space:nowrap;}

/* WooCommerce prints its coupon toggle as a notice above the form — hidden,
   because the theme renders the panel inside the order column instead. */
.woocommerce-form-coupon-toggle{display:none;}

/* Sold individually: the stepper is replaced by a plain count. */
.qty-fixed{
  display:inline-flex;align-items:center;height:34px;padding:0 12px;
  border:1px solid var(--line-soft);border-radius:8px;background:var(--cloud);
  font-family:var(--mono);font-size:.75rem;color:var(--slate);white-space:nowrap;
}

/* ------------------------------------------------------------
   38. DARK HERO + DARK FOOTER
   --------------------------------------------------------- */
.hero{
  background:
    radial-gradient(900px 460px at 50% -8%, rgba(47,107,255,.42) 0%, rgba(47,107,255,0) 62%),
    radial-gradient(700px 420px at 12% 12%, rgba(47,107,255,.20) 0%, rgba(47,107,255,0) 58%),
    radial-gradient(700px 420px at 88% 6%, rgba(91,140,255,.22) 0%, rgba(91,140,255,0) 55%),
    var(--ink);
  color:rgba(255,255,255,.72);
}
.hero h1{color:#fff;max-width:22ch;}
.hero h1 em{color:#8FB4FF;}
.hero .hero-sub{color:rgba(255,255,255,.74);}
.hero .hero-meta{color:rgba(255,255,255,.5);}
.hero .pill{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.78);box-shadow:none;
}
.hero .btn-ghost{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;
}
.hero .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff;}
body.novex-marketing .hero .btn-ghost{box-shadow:none;}
.hero .strip-note{color:rgba(255,255,255,.5);}
.hero .strip-note a{color:#8FB4FF;}
.hero .strip-dots button{background:rgba(255,255,255,.28);}
.hero .strip-dots button:hover{background:rgba(255,255,255,.5);}
.hero .strip-dots button[aria-current="true"]{background:#fff;}

/* Hero strip cards are the screenshot and nothing else. */
.theme-card--shot{border-radius:var(--r-lg);}
.theme-card--shot .theme-shot{border-bottom:0;height:100%;}
.strip .theme-card--shot{height:275px;}
.strip .theme-card--shot .theme-shot{height:100%;}

/* Footer */
.foot{background:var(--ink);border-top:0;color:rgba(255,255,255,.62);}
.foot .brand{color:#fff;}
/* The header caps the logo at 34px; the footer lockup can breathe a little,
   and the Customizer width, when set, overrides this inline. */
.foot .brand img{max-height:44px;width:auto;}
.foot-brand p{color:rgba(255,255,255,.62);}
.foot h4,.foot .widget-title{color:#fff;}
.foot li a,.foot .widget a{color:rgba(255,255,255,.62);}
.foot li a:hover,.foot .widget a:hover{color:#fff;}
.foot-mail{
  color:#8FB4FF;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
}
.foot-mail:hover{background:rgba(255,255,255,.12);color:#fff;}
.foot-social a{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72);}
.foot-social a:hover{border-color:rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.08);}
.foot-bottom{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.48);}
.foot-bottom a{color:rgba(255,255,255,.62);}
.foot-bottom a:hover{color:#fff;}
.foot .pay-marks span{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.5);}
.foot .scard,.foot .widget{color:rgba(255,255,255,.62);}

/* ------------------------------------------------------------
   39. TOP BAR MARQUEE
   --------------------------------------------------------- */
.topbar-track{display:flex;justify-content:space-between;gap:16px;}
.topbar-dupe{display:none;}

@keyframes novex-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ------------------------------------------------------------
   40. MOBILE SUB-MENU TOGGLE
   --------------------------------------------------------- */
.mobile-nav .has-toggle{display:flex;flex-wrap:wrap;align-items:center;}
.mobile-nav .has-toggle > a{flex:1;min-width:0;}
.mobile-nav .has-toggle > .sub-menu{flex-basis:100%;display:none;}
.mobile-nav .has-toggle.is-open > .sub-menu{display:grid;}
.submenu-toggle{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:none;border:0;border-radius:8px;color:var(--slate);
}
.submenu-toggle:hover{background:var(--cloud);color:var(--ink);}
.submenu-arrow{
  width:7px;height:7px;display:block;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s ease;
}
.has-toggle.is-open .submenu-arrow{transform:translateY(1px) rotate(-135deg);}

/* ------------------------------------------------------------
   41. TUTORIALS
   --------------------------------------------------------- */
.tut-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:10px;}
.tut-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;
}
.tut-frame{position:relative;aspect-ratio:16/9;background:var(--ink);}
.tut-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.tut-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;}
.tut-body h2{font-size:1.0625rem;}
.tut-len{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-light);
}
.tut-body p{font-size:.8438rem;line-height:1.6;}

/* ------------------------------------------------------------
   42. LIVE DEMOS PAGE
   --------------------------------------------------------- */
.demo-bar{display:flex;align-items:center;gap:12px;margin:0 0 18px;flex-wrap:wrap;}
.demo-bar label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate-light);}
.demo-bar select{
  border:1px solid var(--line);border-radius:8px;background:var(--white);
  padding:9px 12px;font-size:.875rem;color:var(--ink);min-width:200px;
}
.demo-count{
  margin-left:auto;font-family:var(--mono);font-size:.75rem;color:var(--slate-light);
}

/* ------------------------------------------------------------
   43. SHARED CARD EVERYWHERE
   --------------------------------------------------------- */
/* The related row and the bundle list print the catalogue card, so nothing
   bespoke is left here — only the column counts differ. */
.grid--tight{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}

/* Contact route icons — a 17px glyph floated in a 36px tile read as a
   mis-centred speck, so the tile and the glyph are both sized here. */
.rico{width:42px;height:42px;border-radius:12px;}
.rico svg{display:block;width:20px;height:20px;}
.kv .tick,.assure .tick{flex:none;}

/* ------------------------------------------------------------
   44. RESPONSIVE FIXES
   --------------------------------------------------------- */
@media (max-width:1024px){
  .tut-grid{grid-template-columns:1fr;}
}
@media (max-width:680px){
  /* The announcement bar scrolls its own text rather than wrapping to two
     lines, which is what pushed the nav down the page on a phone. */
  .topbar{height:32px;padding:0;display:flex;align-items:center;overflow:hidden;}
  .topbar .wrap{padding-inline:0;overflow:hidden;flex-wrap:nowrap;}
  .topbar-scroll{display:flex;width:max-content;animation:novex-marquee 22s linear infinite;}
  .topbar-dupe{display:block;}
  .topbar-track{flex:none;gap:26px;padding-right:26px;white-space:nowrap;justify-content:flex-start;}

  /* Footer stacks into one column. */
  .foot-grid{grid-template-columns:1fr;gap:26px;}
  .foot-brand p{max-width:none;}
  .foot-bottom{justify-content:flex-start;}

  /* About page — beliefs one per row, counters two-up. */
  .grid-2{grid-template-columns:1fr;}
  .numbers{grid-template-columns:1fr 1fr;}

  /* Single product — related themes one per row. */
  .rgrid{grid-template-columns:1fr;}

  /* Contact — every card full width. */
  .route-grid,.cgrid,.qgrid{grid-template-columns:1fr;}
  .form-shell .side-col{grid-template-columns:minmax(0,1fr);}

  .demo-bar select{width:100%;}
  .demo-count{margin-left:0;}
}
@media (max-width:480px){
  .grid,.rgrid,.grid--tight{grid-template-columns:1fr;}
  .proof-grid,.numbers{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
  .topbar-scroll{animation:none;}
}

/* ------------------------------------------------------------
   45. STICKY SITE HEADER
   --------------------------------------------------------- */
/* One sticky context for the announcement bar and the nav together, on every
   template. Two separate sticky elements meant the bar scrolled away and the
   nav jumped; this keeps the whole header pinned. */
.site-head{position:sticky;top:0;z-index:60;}
.admin-bar .site-head{top:32px;}
@media (max-width:782px){
  /* The admin bar is 46px and fixed at this width, not 32px. */
  .admin-bar .site-head{top:46px;}
}
/* The floating nav still sits over the hero, so the block itself is see-through
   and only the pill inside it is painted. */
body.novex-marketing .site-head{background:transparent;pointer-events:none;}
body.novex-marketing .site-head > *{pointer-events:auto;}

/* ------------------------------------------------------------
   46. HERO STRIP CARDS
   --------------------------------------------------------- */
.theme-card--shot{border-radius:var(--r-sm);}
.strip .theme-card--shot{height:250px;}
.strip .theme-card--shot .theme-shot{height:100%;padding:12px;}
.strip .theme-card--shot .theme-shot img{border-radius:6px;object-position:top center;}
@media (max-width:680px){
  .strip .theme-card--shot{height:210px;}
}

/* ------------------------------------------------------------
   47. STICKY CTA BAR
   --------------------------------------------------------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:none;align-items:center;gap:12px;
  padding:12px var(--gut);background:var(--ink);color:rgba(255,255,255,.72);
  box-shadow:0 -8px 28px rgba(11,18,32,.22);
  transform:translateY(110%);transition:transform .28s ease;
}
.stickybar.is-on{transform:none;}
.stickybar.is-live{display:flex;}
.stickybar-text{font-size:.8125rem;min-width:0;}
.stickybar-text b{display:block;color:#fff;font-family:var(--display);font-size:.9375rem;letter-spacing:-.02em;}
.stickybar-actions{display:flex;gap:10px;margin-left:auto;flex:none;}
.stickybar .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none;}
.stickybar .btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff;}
.stickybar .btn-white:hover{background:#EDF3FF;}
.stickybar-close{
  background:none;border:0;color:rgba(255,255,255,.5);padding:6px;line-height:1;flex:none;
}
.stickybar-close:hover{color:#fff;}
body.has-stickybar{padding-bottom:72px;}
@media (max-width:680px){
  .stickybar{flex-wrap:wrap;padding:10px var(--gut);}
  .stickybar-text{flex:1 1 100%;font-size:.75rem;}
  .stickybar-actions{margin-left:0;flex:1 1 auto;}
  .stickybar-actions .btn{flex:1;}
  body.has-stickybar{padding-bottom:112px;}
}

/* ------------------------------------------------------------
   48. REVIEW BOX
   --------------------------------------------------------- */
/* Only the labels the theme prints get the block heading treatment — the
   spans WooCommerce and core drop into the notes and the consent row must
   stay inline. */
.review-form .comment-form > p > label > span,
.review-form .rate-field > span:first-child{
  display:block;font-family:var(--display);font-size:.8125rem;font-weight:700;
  color:var(--ink);margin-bottom:6px;
}
.review-form .comment-notes,
.review-form .comment-form-cookies-consent,
.review-form .logged-in-as{
  font-family:var(--body);font-size:.75rem;font-weight:400;color:var(--slate-light);
  letter-spacing:0;margin:0 0 12px;
}
.review-form .comment-notes span,
.review-form .comment-form-cookies-consent span,
.review-form .required-field-message{
  display:inline;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;margin:0;
}
.review-form .required{color:var(--blue);}
.review-form .comment-form-cookies-consent{
  display:flex;align-items:flex-start;gap:9px;
}
.review-form .comment-form-cookies-consent input[type=checkbox]{
  width:16px;height:16px;flex:none;margin:1px 0 0;padding:0;border-radius:4px;
  accent-color:var(--blue);background:var(--white);
}
.review-form .comment-form-cookies-consent label{margin:0;font-size:.75rem;line-height:1.5;}
.review-form .form-submit{margin:4px 0 0;}
.review-form input[type=submit]{
  width:auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;border:1px solid transparent;border-radius:8px;
  padding:11px 22px;font-family:var(--body);font-weight:600;font-size:.8438rem;cursor:pointer;
  transition:background .15s ease;
}
.review-form input[type=submit]:hover{background:var(--blue-deep);}
.review-form .comment-reply-title{font-size:1rem;margin:22px 0 14px;}

/* ------------------------------------------------------------
   49. TUTORIAL DESCRIPTION EXPAND
   --------------------------------------------------------- */
.tut-text{position:relative;font-size:.8438rem;line-height:1.6;}
.tut-text p + p{margin-top:10px;}
.tut-text.is-clamped{max-height:7.2em;overflow:hidden;}
.tut-text.is-clamped::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3em;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--white));
}
.tut-more{
  align-self:flex-start;background:none;border:0;padding:4px 0;
  font-family:var(--body);font-weight:600;font-size:.8125rem;color:var(--blue);
}
.tut-more:hover{color:var(--blue-deep);}

/* ------------------------------------------------------------
   50. THEME CONTACT + OPT-IN FORMS
   --------------------------------------------------------- */
.novex-form{display:grid;gap:14px;margin-top:18px;}
.novex-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.novex-form label{display:block;font-size:.8438rem;}
.novex-form label > span{
  display:block;font-family:var(--display);font-size:.8125rem;font-weight:700;
  color:var(--ink);margin-bottom:6px;
}
.novex-form input,.novex-form textarea,.novex-form select{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 14px;
  font-size:.9125rem;color:var(--ink);background:var(--cloud);
}
.novex-form input:focus,.novex-form textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--white);}
.novex-form textarea{min-height:150px;resize:vertical;}
.novex-form .hp{position:absolute;left:-9999px;}
.novex-form .btn{justify-self:start;}
.formnote{font-size:.75rem;color:var(--slate-light);}
.formmsg{
  border-radius:var(--r-md);padding:12px 15px;font-size:.8438rem;margin-bottom:16px;
  border:1px solid var(--blue-tint);background:var(--wash);color:var(--ink);
}
.formmsg.is-error{border-color:#F5C2C2;background:#FDF1F1;}
@media (max-width:680px){
  .novex-form .frow{grid-template-columns:1fr;}
}

/* ------------------------------------------------------------
   51. STORE NAV — CENTRED LINKS
   --------------------------------------------------------- */
/* Three tracks rather than a flex row: the brand and the end group take equal
   share of the leftover width, so the menu sits on the true centre of the bar
   whatever those two happen to measure. The middle track collapses to nothing
   once the links move into the mobile panel. */
.site-nav > .wrap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;
}
.site-nav .nav-links{justify-content:center;flex-wrap:wrap;}
.nav-end{display:flex;align-items:center;gap:14px;justify-content:flex-end;min-width:0;}
.site-nav .head-search{flex:0 1 300px;max-width:300px;margin-left:0;}
.site-nav .nav-right{margin-left:0;}

@media (max-width:1180px){
  .site-nav .head-search{flex-basis:220px;max-width:220px;}
}
@media (max-width:960px){
  /* No centre track to hold once the menu is behind the burger. */
  .site-nav > .wrap{grid-template-columns:auto 1fr;gap:16px;}
  .site-nav .head-search{flex-basis:220px;max-width:220px;}
}
@media (max-width:680px){
  .nav-end{gap:10px;}
}