:root{
  --black:#08090a;
  --carbon:#141516;
  --carbon-2:#1c1d1f;
  --carbon-3:#26282a;
  --gold:#D4AF37;
  --gold-bright:#E8C766;
  --gold-dim:#8a712b;
  --titanium:#9BA1A6;
  --titanium-light:#C7CCD1;
  --white:#F7F7F5;
  --line:rgba(247,247,245,0.08);
  --line-strong:rgba(212,175,55,0.35);
  --ff-display:'Space Grotesk', 'Inter', sans-serif;
  --ff-body:'Inter', sans-serif;
  --ff-mono:'JetBrains Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--ff-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.eyebrow{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:'';
  width:24px;height:1px;
  background:var(--gold);
  display:inline-block;
}
.container{
  max-width:1320px;
  margin:0 auto;
  padding:0 48px;
}
@media(max-width:768px){.container{padding:0 24px;}}

::selection{background:var(--gold);color:var(--black);}

/* ================= HEADER ================= */
.site-header{
  position:-webkit-sticky;position:sticky;top:0;left:0;right:0;
  z-index:1000;
  padding:28px 0;
  transition:background .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(8,9,10,0.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1320px;margin:0 auto;padding:0 48px;
}
@media(max-width:768px){.header-inner{padding:0 24px;}}

/* v1.2.0: laptop-range internal spacing optimization.
   Root cause: at the original v1.1.0 nav gap (44px) and CTA button padding
   (34px each side), the full desktop header (logo + 7-item nav + CTA +
   cart icon) mathematically does not fit within roughly 900–1200px
   viewports — a pre-existing characteristic of the original design, not
   something introduced by this release. Per explicit direction, this is
   fixed by tightening internal spacing ONLY within that specific range,
   not by moving the 900px hamburger-menu breakpoint and not by changing
   any font size, color, or the header's visual language. Above 1200px,
   nothing in this media query applies and the header is pixel-identical
   to the original v1.1.0 CSS. */
@media(min-width:901px) and (max-width:1200px){
  .main-nav{gap:28px;}
  .header-inner{padding:0 30px;}
}
.logo-mark{display:flex;align-items:center;gap:12px;}
.logo-mark svg{height:32px;width:auto;}

/* ================= LOGO — RESPONSIVE SIZING (v1.1.0) =================
   Constrains whatever image is uploaded via Appearance → Customize →
   Site Identity → Logo, so the logo container has fixed, predictable
   dimensions and can never determine page layout by its own natural
   resolution. This is what prevents a repeat of the "oversized logo
   covers the page" issue from before v1.1.0 — that happened because
   raster <img> logos had no max-height rule at all. */

.logo-mark{
  display:flex;align-items:center;gap:12px;
  max-width:220px; /* prevents an unusually wide uploaded file from pushing header nav off-canvas */
}
.logo-mark img,
.custom-logo-link img,
.custom-logo{
  max-height:50px;
  height:auto;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

/* Footer logo: slightly larger per spec, still fully contained */
.footer-brand .logo-mark{max-width:260px;}
.footer-brand .logo-mark img,
.footer-brand .custom-logo{
  max-height:56px;
  object-fit:contain;
}

/* Mobile header + slide-in panel logo: smaller cap so it sits comfortably
   beside the hamburger icon without crowding it or causing overflow */
@media(max-width:900px){
  .site-header .logo-mark{max-width:170px;}
  .site-header .logo-mark img,
  .site-header .custom-logo{
    max-height:40px;
  }
}
.mobile-nav-panel-head .logo-mark img,
.mobile-nav-panel-head .custom-logo{
  max-height:40px;
}
.logo-word{font-family:var(--ff-display);font-size:16px;letter-spacing:.18em;font-weight:600;color:var(--white);text-transform:uppercase;}
.logo-word span{color:var(--gold);}
.main-nav{display:flex;gap:44px;}
.main-nav a{
  font-size:13px;letter-spacing:.05em;font-weight:500;
  color:var(--titanium-light);
  position:relative;
  padding-bottom:4px;
  transition:color .3s;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold);transition:width .35s ease;
}
.main-nav a:hover{color:var(--white);}
.main-nav a:hover::after{width:100%;}
.header-cta{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-strong);
  padding:11px 24px;
  color:var(--gold);
  transition:all .35s ease;
}
.header-cta:hover{background:var(--gold);color:var(--black);border-color:var(--gold);}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:26px;}
.nav-toggle span{height:1px;background:var(--white);width:100%;}
@media(max-width:900px){
  .main-nav{display:none;}
  .header-cta{display:none;}
  .nav-toggle{display:flex;}
}

/* ================= HERO ================= */
.hero{
  position:relative;
  height:calc(100vh - 80px);min-height:720px;
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--black);
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 900px 600px at 72% 30%, rgba(212,175,55,0.10), transparent 60%),
    linear-gradient(180deg, #0a0b0c 0%, #0d0e0f 45%, #08090a 100%);
}
.hero-bg::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,0.025) 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,255,255,0.025) 79px 80px);
  mask-image:radial-gradient(ellipse 80% 80% at 60% 40%, black, transparent 75%);
}
.hero-machining{
  position:absolute;
  right:-6%;
  top:50%;
  transform:translateY(-50%);
  width:60%;
  max-width:820px;
  opacity:.9;
  animation:heroFloat 14s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(-50%) rotate(0deg);}50%{transform:translateY(-52%) rotate(1deg);}}
.hero-content{
  position:relative;z-index:2;
  width:100%;
  padding-bottom:11vh;
}
.hero-eyebrow{
  opacity:0;
  animation:fadeUp 1s ease forwards .3s;
}
.hero h1{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(48px,8vw,108px);
  line-height:.98;
  letter-spacing:-.02em;
  margin:22px 0 26px;
  max-width:920px;
  opacity:0;
  animation:fadeUp 1.1s ease forwards .5s;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold-bright),var(--gold) 60%,var(--gold-dim));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  font-size:clamp(16px,1.6vw,20px);
  color:var(--titanium-light);
  font-weight:300;
  max-width:560px;
  line-height:1.6;
  margin-bottom:44px;
  opacity:0;
  animation:fadeUp 1.1s ease forwards .75s;
}
.hero-buttons{
  display:flex;gap:18px;flex-wrap:wrap;
  opacity:0;
  animation:fadeUp 1.1s ease forwards 1s;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:18px 34px;
  transition:all .4s cubic-bezier(.2,.7,.3,1);
}
.btn-primary{
  background:var(--gold);
  color:var(--black);
}
.btn-primary:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(212,175,55,.5);}
.btn-secondary{
  border:1px solid rgba(247,247,245,0.25);
  color:var(--white);
}
.btn-secondary:hover{border-color:var(--white);background:rgba(255,255,255,0.04);transform:translateY(-2px);}
.scroll-cue{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--titanium);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;
  z-index:3;
  opacity:0;
  animation:fadeUp 1s ease forwards 1.4s;
}
.scroll-line{width:1px;height:44px;background:linear-gradient(180deg,var(--gold),transparent);animation:scrollPulse 2s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{opacity:.3;}50%{opacity:1;}}

/* Geometric CNC ornament used across hero/sections instead of stock photography */
.tech-ring{position:absolute;border:1px solid rgba(212,175,55,0.18);border-radius:50%;}
.hero-ornament{position:absolute;right:6%;top:18%;width:340px;height:340px;z-index:1;}
.hero-ornament .tech-ring{inset:0;animation:spin 40s linear infinite;}
.hero-ornament .tech-ring.r2{inset:40px;border-color:rgba(155,161,166,0.2);animation:spin 30s linear infinite reverse;}
.hero-ornament .tech-ring.r3{inset:80px;border-color:rgba(212,175,55,0.3);animation:spin 22s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ================= SECTION SHELL ================= */
section{position:relative;}
.section-pad{padding:160px 0;}
@media(max-width:768px){.section-pad{padding:100px 0;}}
.section-head{max-width:680px;margin-bottom:80px;}
.section-head h2{
  font-family:var(--ff-display);
  font-size:clamp(34px,4.2vw,58px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.08;
  margin-top:20px;
  color:var(--white);
}
.section-head p{
  margin-top:22px;
  font-size:17px;
  line-height:1.7;
  color:var(--titanium-light);
  font-weight:300;
  max-width:560px;
}
.divider{height:1px;background:var(--line);width:100%;}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ================= PHILOSOPHY / WHY HOLYSLUG ================= */
.philosophy,.why-holyslug{background:var(--black);}
.why-holyslug .philo-grid{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.why-holyslug .philo-grid{grid-template-columns:1fr;}}
.philo-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.philo-card{
  background:var(--black);
  padding:44px 32px;
  transition:background .4s ease;
}
.philo-card:hover{background:var(--carbon);}
.philo-icon{width:44px;height:44px;margin-bottom:28px;}
.philo-card h3{
  font-family:var(--ff-display);font-size:18px;font-weight:600;margin-bottom:12px;letter-spacing:-.005em;
}
.philo-card p{font-size:14px;color:var(--titanium);line-height:1.7;font-weight:300;}
.philo-num{font-family:var(--ff-mono);font-size:11px;color:var(--gold-dim);letter-spacing:.15em;margin-bottom:20px;display:block;}
@media(max-width:900px){.philo-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.philo-grid{grid-template-columns:1fr;}}

/* ================= SHIPPING & SUPPORT ================= */
.shipping-support{background:var(--carbon);}
.shipping-support-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.shipping-support-card{
  background:var(--carbon-2);padding:40px 32px;text-align:center;
  transition:background .4s ease;
}
.shipping-support-card:hover{background:var(--carbon-3);}
.shipping-support-card h3{
  font-family:var(--ff-display);font-size:18px;font-weight:600;margin-bottom:12px;letter-spacing:-.005em;color:var(--white);
}
.shipping-support-card p{font-size:14px;color:var(--titanium);line-height:1.7;font-weight:300;}
@media(max-width:900px){.shipping-support-grid{grid-template-columns:1fr;}}

/* ================= PRODUCTS ================= */
.products{background:var(--carbon);}
.section-head-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:80px;flex-wrap:wrap;gap:24px;
}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
.product-card{
  background:var(--carbon-2);
  display:flex;flex-direction:column;
  position:relative;
  overflow:hidden;
}
.product-visual{
  aspect-ratio:1/1;
  position:relative;
  background:
    radial-gradient(circle at 50% 40%, rgba(212,175,55,0.10), transparent 55%),
    linear-gradient(160deg,#1c1d1f 0%, #0e0f10 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.product-visual svg{width:58%;height:58%;transition:transform .7s cubic-bezier(.2,.8,.2,1);position:relative;z-index:2;}
.product-card:hover .product-visual svg{transform:scale(1.08) rotate(2deg);}

/* v1.1.0 fix: real product photos (as opposed to the placeholder SVG icons)
   were stretching/distorting inside the square .product-visual card slot.
   This was previously patched only via a live-site Customizer CSS snippet,
   which meant a fresh install of this theme package would silently regress.
   Baking the fix directly into the theme so it can never be lost again. */
.product-visual img,
.product-visual a img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}
.product-card:hover .product-visual img {
  transform: scale(1.05);
}

/* v1.1.0 fix: the "no featured image yet" placeholder wrapper div was
   referenced in inc/shortcodes.php but had no matching CSS rule at all,
   so it would not center/size inside the square card slot the way the
   icon-only SVG rule above does. */
.product-visual-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.product-visual-placeholder svg {
  width: 68%;
  height: 68%;
}
.product-visual::after{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.02) 12px 13px);
}
.product-tag{
  position:absolute;top:20px;left:20px;z-index:3;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.15em;
  color:var(--gold);border:1px solid var(--line-strong);
  padding:6px 12px;text-transform:uppercase;
  background:rgba(8,9,10,0.5);backdrop-filter:blur(4px);
}
.product-body{padding:32px;flex:1;display:flex;flex-direction:column;}
.product-body h3{
  font-family:var(--ff-display);font-size:22px;font-weight:600;margin-bottom:6px;
  /* v1.2.0 fix: long product titles (e.g. "633/635 HolySlug Sawing Die Kit
     .25 Cal") could wrap across many lines on narrow mobile screens with
     no limit, making cards of differing title length look visually
     unbalanced next to each other. Clamps to 3 lines maximum with an
     ellipsis, and adds overflow-wrap as a safety net in case any single
     word/SKU segment is wider than the card itself. Font, size, weight,
     and color are all unchanged -- this only bounds line count. */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:break-word;
  line-height:1.25;
}
.product-cal{font-family:var(--ff-mono);font-size:12px;color:var(--gold);letter-spacing:.08em;margin-bottom:18px;}
.spec-list{list-style:none;margin-bottom:28px;flex:1;}
.spec-list li{
  display:flex;justify-content:space-between;
  font-size:13px;color:var(--titanium);
  padding:9px 0;border-bottom:1px solid var(--line);
  font-weight:300;
}
.spec-list li span:last-child{color:var(--titanium-light);font-family:var(--ff-mono);font-size:12px;}
.product-link{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--white);
  padding-top:18px;border-top:1px solid var(--line);
  transition:color .3s;
}
.product-link:hover{color:var(--gold);}
.product-link svg{width:16px;height:16px;transition:transform .35s;}
.product-link:hover svg{transform:translateX(6px);}

/* v1.1.0: Add to Cart button on product cards (previously missing entirely) */
.product-body .holyslug-btn-add-to-cart{
  margin-top:14px;
  width:100%;
  justify-content:center;
  text-align:center;
}
.product-body .added_to_cart{
  display:block;text-align:center;margin-top:10px;
}
@media(max-width:900px){.product-grid{grid-template-columns:1fr;}}

/* ================= MANUFACTURING ================= */
.manufacturing{background:var(--black);}
.mfg-flow{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-top:20px;
}
.mfg-step{
  background:var(--black);padding:30px 20px;text-align:left;
  transition:background .4s;
}
.mfg-step:hover{background:var(--carbon);}
.mfg-step .step-index{font-family:var(--ff-mono);font-size:11px;color:var(--gold-dim);letter-spacing:.1em;}
.mfg-step .step-icon{margin:20px 0 18px;height:36px;}
.mfg-step h3{font-size:14px;font-weight:600;margin-bottom:8px;letter-spacing:-.005em;}
.mfg-step p{font-size:12.5px;color:var(--titanium);line-height:1.6;font-weight:300;}
@media(max-width:1024px){.mfg-flow{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.mfg-flow{grid-template-columns:1fr 1fr;}}

.mfg-banner{
  margin-top:100px;
  border:1px solid var(--line);
  padding:70px 60px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  background:linear-gradient(120deg, var(--carbon-2), var(--black));
  position:relative;
}
.mfg-banner::before{
  content:'';position:absolute;top:-1px;left:-1px;width:60px;height:60px;
  border-top:1px solid var(--gold);border-left:1px solid var(--gold);
}
.mfg-banner::after{
  content:'';position:absolute;bottom:-1px;right:-1px;width:60px;height:60px;
  border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);
}
.mfg-banner h3{font-family:var(--ff-display);font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.2;}
.mfg-banner p{color:var(--titanium-light);font-weight:300;line-height:1.75;font-size:15.5px;margin-top:18px;}
.mfg-stats{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
.mfg-stat .num{font-family:var(--ff-display);font-size:44px;font-weight:700;color:var(--gold);}
.mfg-stat .lbl{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:var(--titanium);margin-top:6px;text-transform:uppercase;}
@media(max-width:800px){.mfg-banner{grid-template-columns:1fr;padding:44px 28px;}}

/* ================= PERFORMANCE (report style) ================= */
.performance{background:var(--carbon);}
.report-frame{
  border:1px solid var(--line);
  background:var(--black);
}
.report-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 36px;border-bottom:1px solid var(--line);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:var(--titanium);
  text-transform:uppercase;flex-wrap:wrap;gap:10px;
}
.report-header .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;display:inline-block;margin-right:8px;box-shadow:0 0 8px var(--gold);}
.report-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1px;background:var(--line);}
.report-panel{background:var(--black);padding:44px;}
.chart-box{margin-bottom:40px;}
.chart-box:last-child{margin-bottom:0;}
.chart-label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;font-family:var(--ff-mono);font-size:11px;color:var(--titanium);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.chart-label b{color:var(--gold);font-weight:500;white-space:nowrap;}
.group-target{
  width:100%;aspect-ratio:16/6;
  position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 40px);
  border:1px solid var(--line);
}
.dot-hit{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(212,175,55,.7);transform:translate(-50%,-50%);}
.bar-row{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.bar-row .bar-label{width:120px;font-size:12px;color:var(--titanium-light);font-family:var(--ff-mono);flex-shrink:0;}
.bar-track{flex:1;height:8px;background:var(--carbon-3);position:relative;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));}
.bar-val{width:60px;text-align:right;font-family:var(--ff-mono);font-size:12px;color:var(--gold);flex-shrink:0;}
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{
  text-align:left;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;color:var(--titanium);
  text-transform:uppercase;padding:0 0 16px;font-weight:400;border-bottom:1px solid var(--line);
}
.data-table td{padding:14px 0;border-bottom:1px solid var(--line);color:var(--titanium-light);font-weight:300;}
.data-table td:first-child, .data-table th:first-child{color:var(--white);font-weight:500;}
.data-table tr:last-child td{border-bottom:none;}
@media(max-width:900px){.report-grid{grid-template-columns:1fr;}.report-panel{padding:30px 24px;}}

/* ================= KNOWLEDGE HUB ================= */
.knowledge{
  background:linear-gradient(180deg, var(--black), #0c0d0e);
  position:relative;
  overflow:hidden;
}
.knowledge-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.kh-visual{
  aspect-ratio:4/5;
  border:1px solid var(--line);
  position:relative;
  background:radial-gradient(circle at 30% 20%, rgba(212,175,55,.08), transparent 60%), var(--carbon-2);
  display:flex;align-items:center;justify-content:center;
}
.kh-visual .tech-ring{position:absolute;}
.kh-tags{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 36px;}
.kh-tag{
  font-family:var(--ff-mono);font-size:11.5px;color:var(--titanium-light);
  border:1px solid var(--line);padding:9px 16px;letter-spacing:.03em;
}
@media(max-width:900px){.knowledge-inner{grid-template-columns:1fr;gap:50px;}.kh-visual{order:2;}}

/* ================= COMMUNITY ================= */
.community{background:var(--carbon);}
.community-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px;}
.comm-cell{background:var(--black);padding:38px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;position:relative;transition:background .4s;}
.comm-cell:hover{background:var(--carbon-2);}
.comm-cell.feature{background:linear-gradient(150deg,var(--carbon-2),var(--black));}
.comm-quote{font-family:var(--ff-display);font-size:19px;font-weight:500;line-height:1.5;color:var(--white);}
.comm-meta{font-family:var(--ff-mono);font-size:11px;color:var(--gold);letter-spacing:.08em;margin-top:24px;text-transform:uppercase;}
.comm-visual{width:100%;aspect-ratio:1;background:linear-gradient(160deg,#1c1d1f,#0e0f10);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.vote-bars{display:flex;flex-direction:column;gap:14px;}
@media(max-width:900px){.community-grid{grid-template-columns:1fr;}}

/* ================= TRUST ================= */
.trust{background:var(--black);}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.trust-card{background:var(--black);padding:40px;transition:background .4s;}
.trust-card:hover{background:var(--carbon);}
.stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:20px;}
.trust-card p{font-size:14.5px;color:var(--titanium-light);line-height:1.75;font-weight:300;margin-bottom:24px;}
.trust-name{font-family:var(--ff-mono);font-size:11.5px;color:var(--white);letter-spacing:.05em;}
.trust-role{font-family:var(--ff-mono);font-size:11px;color:var(--titanium);margin-top:3px;}
@media(max-width:900px){.trust-grid{grid-template-columns:1fr;}}

/* ================= CTA BAND ================= */
.cta-band{
  background:linear-gradient(120deg,var(--carbon-2),var(--black) 70%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:120px 0;text-align:center;
}
.cta-band h2{font-family:var(--ff-display);font-size:clamp(30px,4.5vw,52px);font-weight:600;letter-spacing:-.01em;max-width:760px;margin:20px auto 40px;line-height:1.15;}
.cta-buttons{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}

/* ================= FOOTER ================= */
.site-footer{background:var(--black);border-top:1px solid var(--line);padding:90px 0 40px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:50px;margin-bottom:90px;}
.footer-brand .logo-mark{margin-bottom:20px;}
.footer-brand p{font-size:14px;color:var(--titanium);line-height:1.7;font-weight:300;max-width:280px;}
.footer-col h4{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;margin-bottom:22px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:13px;}
.footer-col a{font-size:14px;color:var(--titanium-light);font-weight:300;transition:color .3s;}
.footer-col a:hover{color:var(--white);}
.footer-company-description,
.footer-address{
  display:block;
  font-size:14px;
  color:var(--titanium-light);
  font-weight:300;
  line-height:1.6;
}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:32px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:var(--ff-mono);font-size:11.5px;color:var(--titanium);letter-spacing:.03em;
}
.footer-bottom .badge{color:var(--gold-dim);}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr;}}

/* ================= MOBILE NAVIGATION (v1.1.0) =================
   Slide-in panel from the right, dark overlay behind it, hamburger
   morphs into an X while open. Uses the same color/spacing tokens
   as the rest of the site — no new visual language introduced. */

.nav-toggle{cursor:pointer;position:relative;z-index:1201;transition:transform .3s ease;}
.nav-toggle span{
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, width .35s ease;
  transform-origin:center;
}
.nav-toggle.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-nav-overlay{
  position:fixed;inset:0;
  background:rgba(8,9,10,0.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .4s ease, visibility 0s linear .4s;
  z-index:1150;
}
.mobile-nav-overlay.is-visible{
  opacity:1;visibility:visible;
  transition:opacity .4s ease, visibility 0s linear 0s;
}

.mobile-nav-panel{
  position:fixed;top:0;right:0;bottom:0;
  width:min(360px, 86vw);
  background:var(--carbon);
  border-left:1px solid var(--line);
  z-index:1200;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,0.6);
}
.mobile-nav-panel.is-open{transform:translateX(0);}

.mobile-nav-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 24px;
  border-bottom:1px solid var(--line);
}
.mobile-nav-close{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  color:var(--titanium-light);
  transition:all .3s ease;
}
.mobile-nav-close:hover{border-color:var(--gold);color:var(--gold);}
.mobile-nav-close svg{width:18px;height:18px;}

.mobile-nav-links{
  display:flex;flex-direction:column;
  padding:20px 8px;
  overflow-y:auto;
}
.mobile-nav-links a{
  padding:16px 24px;
  font-size:15px;letter-spacing:.03em;font-weight:500;
  color:var(--titanium-light);
  border-bottom:1px solid var(--line);
  transition:color .3s ease, padding-left .3s ease;
}
.mobile-nav-links a:hover,
.mobile-nav-links a:active{color:var(--white);padding-left:30px;}

.mobile-nav-cart-link{
  display:flex !important;
  align-items:center;justify-content:space-between;
  margin-top:8px;
  color:var(--gold) !important;
  font-family:var(--ff-mono);
  text-transform:uppercase;letter-spacing:.1em;font-size:12px !important;
}
.mobile-nav-cart-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:var(--gold);color:var(--black);
  font-family:var(--ff-mono);font-size:11px;font-weight:700;
  border-radius:100px;
}

/* Body scroll lock while the mobile panel is open */
body.mobile-nav-open{overflow:hidden;}

@media(min-width:901px){
  .mobile-nav-overlay,.mobile-nav-panel{display:none;}
}

/* ================= HEADER CART ICON + MINI CART (v1.1.0) ================= */
.header-cart{position:relative;}
.header-cart-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  position:relative;
  color:var(--titanium-light);
  transition:color .3s ease;
}
.header-cart-icon:hover{color:var(--gold);}
.header-cart-icon svg{width:21px;height:21px;}

.header-account-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  color:var(--titanium-light);
  transition:color .3s ease;
}
.header-account-icon:hover{color:var(--gold);}
.header-account-icon svg{width:21px;height:21px;}
@media(max-width:900px){.header-account-icon{display:none;}}
.header-cart-count{
  position:absolute;top:2px;right:2px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--gold);color:var(--black);
  font-family:var(--ff-mono);font-size:10px;font-weight:700;
  border-radius:100px;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.header-cart-count:empty,
.header-cart-count[data-cart-count="0"]{opacity:0;transform:scale(0.6);}

.header-mini-cart{
  position:absolute;top:calc(100% + 16px);right:0;
  width:340px;
  background:var(--carbon-2);
  border:1px solid var(--line);
  box-shadow:0 24px 50px -12px rgba(0,0,0,0.6);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  z-index:1100;
  padding:20px;
  max-height:70vh;overflow-y:auto;
}
.header-cart.is-open .header-mini-cart{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}

/* Restyle WooCommerce's native mini-cart widget markup to match the system */
.widget_shopping_cart ul.woocommerce-mini-cart{list-style:none;margin:0 0 16px;padding:0;}
.widget_shopping_cart ul.woocommerce-mini-cart li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--line);
  position:relative;
}
.widget_shopping_cart ul.woocommerce-mini-cart li img{
  width:56px;height:56px;object-fit:cover;flex-shrink:0;border:1px solid var(--line);
}
.widget_shopping_cart ul.woocommerce-mini-cart li a:not(.remove){
  color:var(--white);font-size:13px;font-weight:500;line-height:1.4;display:block;
}
.widget_shopping_cart ul.woocommerce-mini-cart li a.remove{
  position:absolute;top:14px;right:0;
  color:var(--titanium) !important;font-size:16px;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
}
.widget_shopping_cart ul.woocommerce-mini-cart li a.remove:hover{color:var(--gold) !important;}
.widget_shopping_cart .quantity{
  font-family:var(--ff-mono);font-size:12px;color:var(--titanium);display:block;margin-top:4px;
}
.widget_shopping_cart .total{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--ff-mono);font-size:13px;color:var(--titanium);
  padding-top:14px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em;
}
.widget_shopping_cart .total .woocommerce-Price-amount{color:var(--gold);font-size:16px;font-weight:600;}
.widget_shopping_cart .buttons{display:flex;gap:10px;}
.widget_shopping_cart .buttons a{
  flex:1;text-align:center;
  font-family:var(--ff-body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:14px 16px;
}
.widget_shopping_cart .buttons a.wc-forward{border:1px solid var(--line-strong);color:var(--gold);}
.widget_shopping_cart .buttons a.wc-forward:hover{background:var(--gold);color:var(--black);}
.widget_shopping_cart .buttons a.checkout{background:var(--gold);color:var(--black);}
.widget_shopping_cart .buttons a.checkout:hover{background:var(--gold-bright);}
.woocommerce-mini-cart__empty-message{
  color:var(--titanium);font-size:13.5px;font-weight:300;text-align:center;padding:20px 0;
}

@media(max-width:900px){
  .header-cart{display:none;} /* mobile relies on the slide-in panel's Cart link instead, avoids duplicate/crowded header controls */
}

/* ================= FOCUS STATES (v1.1.0 accessibility fix) =================
   Root cause: no theme had explicit :focus-visible styling anywhere, and
   several interactive elements (product card links/buttons, header icons)
   sit inside `overflow:hidden` containers close to their edges. Browsers'
   default focus ring typically renders OUTSIDE the element's box, which
   risks being partially clipped by those overflow:hidden ancestors —
   effectively making keyboard focus invisible on some elements. Fix: an
   explicit, on-brand focus treatment that renders INSET (via outline-offset
   and box-shadow) so it can never be clipped, using :focus-visible so it
   only appears for keyboard/assistive-tech navigation, not mouse clicks. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 0;
}

/* Elements inside overflow:hidden containers get an inset box-shadow instead
   of relying purely on outline, since outline-offset:-2px can still be
   visually awkward on very small tap-target icons. */
.product-card a:focus-visible,
.product-card button:focus-visible,
.header-cart-icon:focus-visible,
.nav-toggle:focus-visible,
.mobile-nav-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* Buttons that are already gold (btn-primary) need a visible-contrast focus
   ring rather than a gold-on-gold outline that would be invisible. */
.btn-primary:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* ================= LEARNING / TEST VIDEOS PAGES (v1.3.0) ================= */
.learning-block{margin-bottom:80px;}
.learning-block:last-child{margin-bottom:0;}
.learning-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);
}
@media(max-width:900px){.learning-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.learning-grid{grid-template-columns:1fr;}}

.learning-card{
  background:var(--carbon-2);
  display:block;
  transition:background .4s ease;
}
.learning-card:hover{background:var(--carbon);}
.learning-card-image{
  aspect-ratio:16/10;
  background:linear-gradient(160deg,#1c1d1f 0%, #0e0f10 100%);
  overflow:hidden;
  position:relative;
}
.learning-card-image img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.learning-card:hover .learning-card-image img{transform:scale(1.05);}
.learning-card h3{
  font-family:var(--ff-display);font-size:18px;font-weight:600;
  margin:20px 24px 8px;letter-spacing:-.005em;color:var(--white);
}
.learning-card p{
  font-size:13.5px;color:var(--titanium);line-height:1.6;font-weight:300;
  margin:0 24px 24px;
}

/* Video-specific overlay play icon */
.video-play-icon{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
  background:rgba(8,9,10,0.15);
  transition:background .3s ease;
}
.video-play-icon svg{width:48px;height:48px;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));}
.video-card:hover .video-play-icon{background:rgba(8,9,10,0.35);}

.holyslug-empty-note{
  font-size:14px;color:var(--titanium);font-weight:300;font-style:normal;
  border:1px solid var(--line);padding:24px 28px;
}

/* ================= SUPPORT PAGE FAQ (v1.3.0) ================= */
.support-block{scroll-margin-top:120px;margin-bottom:80px;}
.support-block:last-child{margin-bottom:0;}
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-question{
  font-family:var(--ff-display);font-size:16px;font-weight:600;color:var(--white);
  padding:22px 4px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  transition:color .3s ease;
  list-style:none; /* Firefox: summary defaults to display:list-item with its own marker, styled via list-style rather than ::-webkit-details-marker */
}
.faq-question::-webkit-details-marker{display:none;} /* Chrome/Safari: use the older, separate pseudo-element instead of list-style */
.faq-question-text{flex:1;padding-right:16px;}
.faq-question::after{
  content:'+';
  font-family:var(--ff-mono);font-size:20px;color:var(--gold);
  transition:transform .3s ease;
  flex-shrink:0;
}
.faq-item[open] .faq-question::after{transform:rotate(45deg);}
.faq-question:hover{color:var(--gold);}
.faq-answer{
  font-size:14.5px;color:var(--titanium-light);font-weight:300;line-height:1.7;
  padding:0 4px 24px;
}

/* ================= STANDALONE PAGE HEADINGS (v1.3.0) =================
   Consolidates a heading pattern previously repeated as inline styles
   across page-about.php, page-learning.php, page-test-videos.php, and
   page-support.php into two reusable classes -- one page-title (H1)
   pattern and one section-title (H2) pattern -- improving maintainability
   and matching the rest of the theme's CSS-class-based styling approach. */
.hs-page-title{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(36px,5vw,58px);letter-spacing:-.01em;line-height:1.08;
  margin-top:20px;
}
.hs-section-title{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(26px,3vw,36px);margin-top:16px;
}
.hs-body-text{
  color:var(--titanium-light);font-weight:300;line-height:1.7;font-size:16px;max-width:600px;
}

/* ================= LEGAL PAGE CONTENT (v1.4.0) =================
   Wraps the Privacy Policy / Terms of Service / Shipping Policy / Refund
   Policy page content (inserted as real post_content at page-creation
   time -- see holyslug_create_legal_pages() in functions.php -- and
   editable afterward through the standard WordPress Page Editor).
   Reuses the existing .hs-section-title / .hs-body-text classes already
   established for the About/Learning/Test Videos/Support pages, with a
   wider max-width appropriate for dense legal prose rather than the
   600px cap sized for the Support page's shorter paragraphs. */
.hs-legal-content{max-width:760px;}
.hs-legal-content .hs-body-text{max-width:none;margin-bottom:16px;}
.hs-legal-content .hs-section-title{margin-top:48px;margin-bottom:4px;}
.hs-legal-content .hs-section-title:first-of-type{margin-top:16px;}
.hs-legal-content ul.hs-body-text{margin-bottom:24px;}
.hs-legal-content ul.hs-body-text li{margin-bottom:8px;}
.hs-legal-content a{color:var(--gold);transition:color .3s ease;}
.hs-legal-content a:hover{color:var(--gold-bright);}