/* =====================================================================
   AOC — DENSITY & SCALE LAYER  (v8.5.0)
   Client brief: "too much white space, fonts too small, logo too small —
   make it look filled and premium."

   Everything here is driven by four variables so the whole site can be
   re-dialled from Settings → AOC Density without another release:

     --k      type scale        (1 = original 8.4.3 sizing)
     --ks     space scale       (1 = original; lower = tighter)
     --kl     logo scale        (1 = original 32px mark)
     --maxw   content width

   Loaded AFTER aoc-brand.css, so equal-specificity rules win on order.
   Brand tokens (colours, families, radius, pill) are untouched.
===================================================================== */

.aoc-scope{
  --k:1.12;
  --ks:.74;
  --ksm:1;
  --kl:1.32;
  --maxw:1280px;
}

/* ---------------------------------------------------------------
   1. BASE TYPE — lift the whole system off a single scale factor
--------------------------------------------------------------- */
.aoc-scope{ font-size:calc(15px * var(--k)); line-height:1.55; }

.aoc-scope .eyebrow{ font-size:calc(11px * var(--k)); }
.aoc-scope .btn{ font-size:calc(14.5px * var(--k)); padding:calc(13px * var(--k)) calc(24px * var(--k)); }
.aoc-scope .btn-lg{ font-size:calc(15.5px * var(--k)); padding:calc(15px * var(--k)) calc(28px * var(--k)); }
.aoc-scope .link{ font-size:calc(13px * var(--k)); }

/* headings — grow the floor faster than the ceiling so small screens
   gain the most (that's where "too small" is felt hardest) */
.aoc-scope .sh h2{ font-size:clamp(calc(24px * var(--k)),3.5vw,calc(36px * var(--k))); }
.aoc-scope .hero h1{ font-size:clamp(calc(36px * var(--k)),5.9vw,calc(64px * var(--k))); }
.aoc-scope .pp-info h1{ font-size:clamp(calc(26px * var(--k)),3.7vw,calc(38px * var(--k))); }
.aoc-scope .pd-cols h3{ font-size:calc(20px * var(--k)); }
.aoc-scope .step h4{ font-size:calc(17px * var(--k)); }
.aoc-scope .qpanel h3{ font-size:calc(19px * var(--k)); }
.aoc-scope .co-card h3{ font-size:calc(17px * var(--k)); }
.aoc-scope .summary h3{ font-size:calc(16px * var(--k)); }
.aoc-scope .cd-head h3{ font-size:calc(18px * var(--k)); }
.aoc-scope .fin h3{ font-size:calc(16px * var(--k)); }
.aoc-scope .sc-body h3{ font-size:clamp(calc(20px * var(--k)),2.7vw,calc(26px * var(--k))); }

/* body / UI text */
.aoc-scope .sh .lead{ font-size:calc(14.5px * var(--k)); max-width:46ch; }
.aoc-scope .hero .sub{ font-size:clamp(calc(15.5px * var(--k)),1.8vw,calc(18px * var(--k))); max-width:48ch; }
.aoc-scope .hero-note{ font-size:calc(11.5px * var(--k)); }
.aoc-scope .step p{ font-size:calc(14px * var(--k)); }
.aoc-scope .trust-in{ font-size:calc(12px * var(--k)); }
.aoc-scope .biz p{ font-size:calc(14.5px * var(--k)); }
.aoc-scope .biz-r .row{ font-size:calc(12.5px * var(--k)); }
.aoc-scope .bizstrip p{ font-size:calc(14px * var(--k)); }
.aoc-scope .pp-desc{ font-size:calc(15px * var(--k)); max-width:52ch; }
.aoc-scope .pp-madeorder{ font-size:calc(12.5px * var(--k)); }
.aoc-scope .pd-ship .r{ font-size:calc(13px * var(--k)); }
.aoc-scope .spec{ font-size:calc(13px * var(--k)); }
.aoc-scope .rev p{ font-size:calc(13.5px * var(--k)); }
.aoc-scope .rev .who{ font-size:calc(14px * var(--k)); }
.aoc-scope .qpanel p{ font-size:calc(13.5px * var(--k)); }
.aoc-scope .tiers .t{ font-size:calc(13px * var(--k)); }
.aoc-scope .cd-corp p,.aoc-scope .cd-corp .clist{ font-size:calc(14px * var(--k)); }

/* product tiles — the densest, most-scanned text on the site */
.aoc-scope .pname{ font-size:calc(14.5px * var(--k)); }
.aoc-scope .ptheme{ font-size:calc(10.5px * var(--k)); }
.aoc-scope .pfrom{ font-size:calc(13.5px * var(--k)); }
.aoc-scope .pbadge{ font-size:calc(9px * var(--k)); }
.aoc-scope .cat .cn{ font-size:calc(15px * var(--k)); }
.aoc-scope .cat .ck{ font-size:calc(11px * var(--k)); }
.aoc-scope .ncard .nn{ font-size:calc(14.5px * var(--k)); }
.aoc-scope .ncard .nc{ font-size:calc(10px * var(--k)); }
.aoc-scope .ncard .nr{ font-size:calc(13px * var(--k)); }
.aoc-scope .st-tile .sn{ font-size:calc(14px * var(--k)); }
.aoc-scope .st-tile .sp{ font-size:calc(12.5px * var(--k)); }
.aoc-scope .pr-card .pn{ font-size:calc(14px * var(--k)); }
.aoc-scope .pr-card .pp2{ font-size:calc(12.5px * var(--k)); }
.aoc-scope .ac-item .an{ font-size:calc(15px * var(--k)); }
.aoc-scope .ac-item .ap{ font-size:calc(13.5px * var(--k)); }

/* forms, cart, checkout */
.aoc-scope .field input,.aoc-scope .field select,.aoc-scope .field textarea{ font-size:calc(14px * var(--k)); padding:calc(11px * var(--k)) calc(13px * var(--k)); }
.aoc-scope .field label{ font-size:calc(10.5px * var(--k)); }
.aoc-scope .selc{ font-size:calc(14px * var(--k)); }
.aoc-scope .pills button{ font-size:calc(13.5px * var(--k)); padding:calc(9px * var(--k)) calc(15px * var(--k)); }
.aoc-scope .ci-name{ font-size:calc(14px * var(--k)); }
.aoc-scope .ci-price{ font-size:calc(13.5px * var(--k)); }
.aoc-scope .ci-opt{ font-size:calc(10.5px * var(--k)); }
.aoc-scope .sum-line{ font-size:calc(13.5px * var(--k)); }
.aoc-scope .sum-line.tot{ font-size:calc(17px * var(--k)); }
.aoc-scope .pay label{ font-size:calc(14px * var(--k)); }
.aoc-scope .cd-sub{ font-size:calc(17px * var(--k)); }

/* footer */
.aoc-scope .foot li{ font-size:calc(13.5px * var(--k)); margin-bottom:calc(9px * var(--ks) * var(--ksm) * 1.15); }
.aoc-scope .foot .bl{ font-size:calc(13.5px * var(--k)); max-width:32ch; }
.aoc-scope .foot h4{ font-size:calc(10px * var(--k)); }
.aoc-scope .foot-bot{ font-size:calc(11px * var(--k)); }

/* ---------------------------------------------------------------
   2. LOGO — client called this out directly
--------------------------------------------------------------- */
.aoc-scope .logo{ gap:calc(10px * var(--kl)); }
.aoc-scope .logo .mk{ width:calc(32px * var(--kl)); height:calc(32px * var(--kl)); border-radius:calc(8px * var(--kl)); }
.aoc-scope .logo .mk::before{ width:calc(16px * var(--kl)); height:1.5px; }
.aoc-scope .logo .mk::after{ width:1.5px; height:calc(16px * var(--kl)); }
.aoc-scope .logo .mk i{ width:calc(8px * var(--kl)); height:calc(8px * var(--kl)); }
.aoc-scope .logo .wm{ font-size:calc(17px * var(--kl)); }
.aoc-scope .logo .wm small{ font-size:calc(8px * var(--kl)); margin-top:calc(3px * var(--kl)); }

/* ---------------------------------------------------------------
   3. WHITESPACE — tighten the vertical rhythm, widen the canvas.
   This is what actually makes the page read as "filled".
--------------------------------------------------------------- */
.aoc-scope .sec{ padding:calc(clamp(46px,7vw,80px) * var(--ks) * var(--ksm)) 0; }
.aoc-scope .sh{ margin-bottom:calc(clamp(22px,4vw,34px) * var(--ks) * var(--ksm)); }
.aoc-scope .hero{ padding:calc(clamp(34px,5vw,60px) * var(--ks) * var(--ksm)) 0 calc(clamp(40px,6vw,66px) * var(--ks) * var(--ksm)); }
.aoc-scope .sg-hero{ padding:calc(clamp(40px,6vw,72px) * var(--ks) * var(--ksm)) 0; }
.aoc-scope .st-hero{ padding:calc(clamp(34px,5vw,60px) * var(--ks) * var(--ksm)) 0 calc(clamp(20px,3vw,30px) * var(--ks) * var(--ksm)); }
.aoc-scope .dc-hero,.aoc-scope .wa-hero{ padding:calc(clamp(30px,4vw,50px) * var(--ks) * var(--ksm)) 0; }
.aoc-scope .cd-hero,.aoc-scope .uv-hero{ padding:calc(clamp(30px,4vw,52px) * var(--ks) * var(--ksm)) 0; }
.aoc-scope .ac-hero{ padding:calc(clamp(36px,5vw,64px) * var(--ks) * var(--ksm)) 0; }
.aoc-scope .pr-hero{ padding:calc(clamp(34px,5vw,60px) * var(--ks) * var(--ksm)) 0; }
.aoc-scope .pp{ padding:calc(clamp(18px,3vw,28px) * var(--ks) * var(--ksm)) 0 calc(clamp(40px,6vw,68px) * var(--ks) * var(--ksm)); }
.aoc-scope .pd-cols{ padding-top:calc(clamp(36px,5vw,58px) * var(--ks) * var(--ksm)); margin-top:calc(clamp(18px,3.5vw,36px) * var(--ks) * var(--ksm)); }
.aoc-scope .foot-top{ padding:calc(clamp(40px,5vw,56px) * var(--ks) * var(--ksm)) var(--pad) calc(32px * var(--ks) * var(--ksm)); }
.aoc-scope .formpage{ padding:calc(clamp(24px,4vw,44px) * var(--ks) * var(--ksm)) var(--pad) calc(80px * var(--ks) * var(--ksm)); }

/* denser grids — more product per screen, less dead gutter */
.aoc-scope .pgrid{ gap:calc(16px * var(--ks) * var(--ksm) * 1.15); }
.aoc-scope .cats{ gap:calc(14px * var(--ks) * var(--ksm) * 1.15); }
.aoc-scope .cat{ padding:calc(22px * var(--ks) * var(--ksm) * 1.2) calc(20px * var(--ks) * var(--ksm) * 1.2); min-height:calc(150px * var(--ks) * var(--ksm) * 1.12); }
.aoc-scope .pbody{ padding:calc(14px * var(--ks) * var(--ksm) * 1.2) calc(15px * var(--ks) * var(--ksm) * 1.2) calc(16px * var(--ks) * var(--ksm) * 1.2); }
.aoc-scope .st-grid{ gap:calc(18px * var(--ks) * var(--ksm) * 1.15); }

/* wider canvas — 1280 fills a laptop screen without breaking the
   1180 reading measure on text blocks (those are capped in ch above) */
.aoc-scope .wrap,.aoc-scope .head-in,.aoc-scope .trust-in,
.aoc-scope .foot-top,.aoc-scope .foot-bot,.aoc-scope .crumb,
.aoc-scope .pd-lower,.aoc-scope .aoc-account-page{ max-width:var(--maxw); }

/* header sits taller to carry the bigger logo */
.aoc-scope .head-in{ padding-top:calc(12px * var(--kl) * .9); padding-bottom:calc(12px * var(--kl) * .9); }
.aoc-scope .nav a{ font-size:calc(14px * var(--k)); padding:calc(9px * var(--k)) calc(12px * var(--k)); }

/* ---------------------------------------------------------------
   4. MOBILE — keep the type gain, drop the width gain
--------------------------------------------------------------- */
@media(max-width:900px){
  .aoc-scope .logo .wm{ font-size:calc(16px * var(--kl)); }
}
@media(max-width:620px){
  .aoc-scope{ font-size:calc(14.5px * var(--k)); }
  /* on phones the page is already full-bleed — restore a little air so
     it doesn't read as cramped */
  .aoc-scope{ --ksm:1.22; }
  .aoc-scope .logo .mk{ width:calc(32px * var(--kl) * .88); height:calc(32px * var(--kl) * .88); }
}

/* =====================================================================
   HYBRID MEGA MENU (v8.5.0)
   Level 1 nav bar + body-level floating panel. The panel is moved to
   <body> by aoc.js so no Elementor overflow:hidden ancestor can clip it.
===================================================================== */

/* ---- level 1 bar ---- */
.aoc-scope .aoc-wpnav-ul{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; gap:2px; flex-wrap:wrap; }
.aoc-scope .aoc-wpnav-ul .aoc-l1{ list-style:none; margin:0; position:relative; }
.aoc-scope .aoc-wpnav-ul .aoc-l1 > a{
  display:flex; align-items:center; gap:6px;
  font-size:calc(14px * var(--k)); font-weight:600; color:var(--ink-2);
  padding:calc(11px * var(--k)) calc(13px * var(--k));
  border-bottom:2.5px solid transparent; white-space:nowrap; transition:.14s;
}
.aoc-scope .aoc-wpnav-ul .aoc-l1 > a:hover,
.aoc-scope .aoc-wpnav-ul .aoc-l1.aoc-open > a{ color:var(--a2); border-bottom-color:var(--a2); }
.aoc-scope .aoc-chev{ width:0; height:0; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid currentColor; opacity:.5; }
.aoc-scope.aoc-dark .aoc-wpnav-ul .aoc-l1 > a{ color:#CFC9BE; }

/* the panel is hidden in-flow; JS relocates it to body */
.aoc-scope .aoc-mega{ display:none; }

/* ---- floating panel (lives on <body>, so NOT under .aoc-scope) ---- */
.aoc-mega-pop{
  position:fixed; z-index:9999;
  background:var(--card,#fff);
  border:1px solid var(--line,#E4DCCC);
  border-top:3px solid var(--a2,#E0492C);
  border-radius:0 0 14px 14px;
  box-shadow:0 26px 60px -24px rgba(28,26,22,.45);
  padding:24px 26px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s;
  pointer-events:none;
  max-height:78vh; overflow-y:auto;
}
.aoc-mega-pop.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }

.aoc-mega-pop .aoc-mega-in{
  display:grid;
  grid-template-columns:repeat(var(--mg-cols,4),minmax(180px,1fr));
  gap:22px 30px;
}

/* sub-category heading — mono, per brand signature for labels */
.aoc-mega-pop .mg-h{
  display:block;
  font-family:var(--mono,ui-monospace,monospace);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--a2,#E0492C);
  padding-bottom:8px; margin-bottom:10px;
  border-bottom:1px solid var(--line,#E4DCCC);
  text-decoration:none;
}
.aoc-mega-pop .mg-h:hover{ color:var(--ink,#1C1A16); }

.aoc-mega-pop .mg-list{ list-style:none; margin:0; padding:0; }
.aoc-mega-pop .mg-list li{ list-style:none; margin:0; }
.aoc-mega-pop .mg-list a{
  display:flex; align-items:center; gap:10px;
  padding:6px 6px 6px 0; border-radius:8px;
  font-size:13.5px; color:var(--ink-2,#4A4438);
  text-decoration:none; transition:.12s;
}
.aoc-mega-pop .mg-list a:hover{ color:var(--ink,#1C1A16); background:var(--paper-2,#F4EEE2); padding-left:6px; }
.aoc-mega-pop .mg-t{ width:34px; height:34px; border-radius:7px; overflow:hidden; background:var(--paper-2,#F4EEE2); flex-shrink:0; display:block; }
.aoc-mega-pop .mg-t img{ width:100%; height:100%; object-fit:cover; display:block; }
.aoc-mega-pop .mg-n{ flex:1; min-width:0; }
.aoc-mega-pop .mg-p{ font-family:var(--mono,monospace); font-size:11.5px; color:var(--a2,#E0492C); white-space:nowrap; }

.aoc-mega-pop .mg-all{
  display:inline-block; margin-top:10px;
  font-family:var(--mono,monospace); font-size:11.5px; font-weight:600;
  color:var(--ink,#1C1A16); text-decoration:none; transition:.12s;
}
.aoc-mega-pop .mg-all:hover{ color:var(--a2,#E0492C); }

/* dark world (Neon) */
.aoc-mega-pop.aoc-pop-dark{ background:#131316; border-color:#24242B; }
.aoc-mega-pop.aoc-pop-dark .mg-list a{ color:#B7B2A6; }
.aoc-mega-pop.aoc-pop-dark .mg-list a:hover{ background:#1A1A1E; color:#fff; }
.aoc-mega-pop.aoc-pop-dark .mg-h{ border-bottom-color:#24242B; }
.aoc-mega-pop.aoc-pop-dark .mg-all{ color:#EDE7DA; }
.aoc-mega-pop.aoc-pop-dark .mg-t{ background:#0A0A0C; }

@media(max-width:900px){ .aoc-mega-pop{ display:none !important; } }

/* ---- mobile drawer: 3-level accordion ---- */
.aoc-scope .aoc-wpnav-drawer ul{ list-style:none; margin:0; padding:0; }
.aoc-scope .aoc-wpnav-drawer li{ list-style:none; position:relative; }
.aoc-scope .aoc-wpnav-drawer > ul > li > a{ font-size:calc(15.5px * var(--k)); font-weight:600; }
.aoc-scope .aoc-wpnav-drawer a{ display:block; padding:11px 34px 11px 10px; border-radius:9px; color:var(--ink-2); }
.aoc-scope .aoc-wpnav-drawer a:hover{ background:var(--paper-2); }
.aoc-scope .aoc-wpnav-drawer ul ul{ display:none; padding-left:12px; border-left:2px solid var(--line); margin:2px 0 2px 10px; }
.aoc-scope .aoc-wpnav-drawer li.open > ul{ display:block; }
.aoc-scope .aoc-wpnav-drawer ul ul a{ font-size:calc(13.5px * var(--k)); font-weight:500; color:var(--muted); }
.aoc-scope .dsub-toggle{
  position:absolute; top:4px; right:2px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--muted); border-radius:8px; z-index:2;
}
.aoc-scope .dsub-toggle:hover{ background:var(--paper-2); color:var(--ink); }