/* ════════════════════════════════════════════════════════════════
   3003 GARAGE — TEMPLATE STYLESHEET
   ────────────────────────────────────────────────────────────────
   This is the CORE styling — loaded once, site-wide, by index.php.
   Every section used in articles (hero, post tiles, gPack cards,
   FAQ, etc.) depends on these rules. Everything is namespaced
   under .gb-* so it can't collide with Joomla core or any module
   CSS. Do not duplicate this inside an article — it only needs
   to exist here, once.
   ════════════════════════════════════════════════════════════════ */

.gb-scope{
  --gb-black:#121212; --gb-panel:#1c1c1c; --gb-panel2:#212121; --gb-line:#2e2e2e;
  --gb-grey:#DBDBDB; --gb-grey2:#c0c0c0; --gb-grey3:#8a8a8a;
  --gb-brand:#960018; --gb-brand-lo:#6e0012; --gb-ignite:#ff1f33; --gb-ignite-hi:#ff4757;
}
body.gb-preview{background:linear-gradient(180deg,#232323 0%,#1a1a1a 30%,#141414 65%,#0e0e0e 100%) fixed;margin:0}

.gb-scope *{box-sizing:border-box}
.gb-sec{padding:80px 0;position:relative;color:var(--gb-grey);font-family:'Inter',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
.gb-sec+.gb-sec{border-top:1px solid var(--gb-line)}
.gb-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.gb-eyebrow{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.22em;font-weight:600;font-size:.72rem;color:var(--gb-grey3)}

/* announcement + kicker */
.gb-topbar{background:linear-gradient(90deg,var(--gb-brand-lo),var(--gb-brand));color:#f3dadd;text-align:center;font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-weight:600;font-size:.74rem;padding:9px 16px}
.gb-kicker{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.gb-kicker .gb-num{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1rem;color:var(--gb-brand);letter-spacing:.05em;text-transform:uppercase}
.gb-kicker .gb-rule{height:1px;flex:1;background:var(--gb-line)}

/* ── site header / nav ─────────────────────────────────────
   Three zones on desktop (logo / menu / account), one row.
   Below 768px: menu + account hide, hamburger shows, and the
   same `menu`/`account` module output re-appears stacked in
   the right-side slide-in drawer. ────────────────────────── */
.gb-nav{background:var(--gb-panel);border-bottom:1px solid var(--gb-line)}
.gb-nav-inner{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}


.gb-nav-logo{flex:none;font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:.04em;color:#fff;text-decoration:none}
.gb-nav-logo span{color:var(--gb-brand)}
.gb-nav-logo img{height:50px;width:auto;display:block}

/* Joomla's Menu module outputs a raw <ul> — undo list defaults and lay it out horizontally */
.gb-nav-links{flex:1;display:flex;justify-content:center}
.gb-nav-links ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px}
.gb-nav-links ul a{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.86rem;color:var(--gb-grey2);text-decoration:none;transition:color .15s}
.gb-nav-links ul a:hover{color:#fff}

/* account/login module — same treatment, plus light styling for the Login module's form fields */
.gb-nav-account{flex:none;display:flex;align-items:center}
.gb-nav-account ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:16px}
.gb-nav-account a{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.82rem;color:var(--gb-grey2);text-decoration:none}
.gb-nav-account a:hover{color:#fff}
.gb-nav-account input[type="text"],.gb-nav-account input[type="password"]{background:var(--gb-panel2);border:1px solid var(--gb-line);color:var(--gb-grey);border-radius:6px;padding:6px 10px;font-size:.82rem;font-family:'Inter',sans-serif}
.gb-nav-account button,.gb-nav-account input[type="submit"]{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.78rem;background:var(--gb-brand);color:#fff;border:none;border-radius:6px;padding:7px 14px;cursor:pointer}

/* hamburger — hidden on desktop */
.gb-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;flex:none;background:none;border:none;padding:0;cursor:pointer}
.gb-nav-toggle span{display:block;width:100%;height:2px;background:#fff;border-radius:2px}

@media(max-width:768px){
  .gb-nav-links,.gb-nav-account{display:none}
  .gb-nav-toggle{display:flex}
}

/* dimmed overlay behind the drawer — tap to close */
.gb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60}

/* right-side slide-in drawer — off-screen by default, .is-open slides it in */
.gb-drawer{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:84vw;background:var(--gb-panel);border-left:1px solid var(--gb-line);padding:70px 24px 24px;overflow-y:auto;z-index:61;transform:translateX(100%);transition:transform .3s ease}
.gb-drawer.is-open{transform:translateX(0)}
.gb-drawer-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--gb-grey2);font-size:1.8rem;line-height:1;padding:4px 8px;cursor:pointer}
.gb-drawer-close:hover{color:#fff}

/* menu inside the drawer reads vertically, unlike the horizontal desktop version */
.gb-drawer-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.gb-drawer-menu ul a{display:block;padding:13px 4px;font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:1rem;color:var(--gb-grey2);text-decoration:none;border-bottom:1px solid var(--gb-line)}
.gb-drawer-menu ul a:hover{color:#fff}
.gb-drawer-account{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.gb-drawer-account ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.gb-drawer-account a{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.92rem;color:var(--gb-grey2);text-decoration:none}
.gb-drawer-account a:hover{color:#fff}
.gb-drawer-account input[type="text"],.gb-drawer-account input[type="password"]{background:var(--gb-panel2);border:1px solid var(--gb-line);color:var(--gb-grey);border-radius:6px;padding:8px 10px;font-size:.86rem;font-family:'Inter',sans-serif;width:100%}
.gb-drawer-account button,.gb-drawer-account input[type="submit"]{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.82rem;background:var(--gb-brand);color:#fff;border:none;border-radius:6px;padding:9px 14px;cursor:pointer}

body.gb-no-scroll{overflow:hidden}

/* 3D pack box */
.gb-stage{perspective:1400px;display:flex;justify-content:center;align-items:center;min-height:480px}
.gb-floatwrap{animation:gb-bob 6s ease-in-out infinite;transform-style:preserve-3d}
@keyframes gb-bob{0%,100%{transform:translateY(-10px)}50%{transform:translateY(10px)}}
.gb-box{position:relative;width:300px;height:384px;transform-style:preserve-3d;animation:gb-swing 9s ease-in-out infinite}
@keyframes gb-swing{0%{transform:rotateX(-8deg) rotateY(-26deg)}50%{transform:rotateX(-6deg) rotateY(26deg)}100%{transform:rotateX(-8deg) rotateY(-26deg)}}
.gb-face{position:absolute;overflow:hidden;border:1px solid #3a3a3a;background:#161616}
.gb-front,.gb-back{width:300px;height:384px}
.gb-front{transform:translateZ(35px)}
.gb-back{transform:rotateY(180deg) translateZ(35px);background:#101010}
.gb-right{width:70px;height:384px;left:80px;transform:rotateY(90deg) translateZ(185px);background:linear-gradient(180deg,#1d1d1d,#0d0d0d)}
.gb-left{width:70px;height:384px;left:80px;transform:rotateY(-90deg) translateZ(115px);background:linear-gradient(180deg,#1a1a1a,#0b0b0b)}
.gb-topf{width:300px;height:70px;top:157px;transform:rotateX(90deg) translateZ(192px);background:linear-gradient(90deg,#222,#141414)}
.gb-botf{width:300px;height:70px;top:157px;transform:rotateX(-90deg) translateZ(192px);background:#0a0a0a}
.gb-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.gb-front .gb-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.15) 0%,rgba(18,18,18,.2) 45%,rgba(12,12,12,.96) 100%)}
.gb-front .gb-art{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}
.gb-front .gb-trow{display:flex;justify-content:space-between;align-items:flex-start}
.gb-front .gb-mk{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.3rem;color:#fff;letter-spacing:.04em}
.gb-front .gb-mk span{color:var(--gb-brand)}
.gb-front .gb-bdg{font-family:'Saira Condensed',sans-serif;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.4);padding:4px 8px;border-radius:30px}
.gb-front .gb-ser{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:3.3rem;line-height:.82;color:#fff}
.gb-front .gb-nm{font-family:'Saira Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.86rem;color:var(--gb-brand);margin-top:6px}
.gb-front .gb-tl{font-size:.82rem;color:var(--gb-grey2);margin-top:9px}
.gb-right .gb-spine{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.gb-right .gb-spine span{font-family:'Saira Condensed',sans-serif;font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:.66rem;color:var(--gb-grey2);white-space:nowrap;transform:rotate(90deg)}
.gb-boxsh{position:absolute;bottom:-46px;left:50%;width:240px;height:36px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);filter:blur(4px);animation:gb-shrink 6s ease-in-out infinite}
@keyframes gb-shrink{0%,100%{width:210px;opacity:.5}50%{width:250px;opacity:.7}}
@media(prefers-reduced-motion:reduce){.gb-floatwrap,.gb-box,.gb-boxsh{animation:none}.gb-box{transform:rotateX(-6deg) rotateY(-18deg)}}

/* layout + copy */
.gb-two{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
@media(max-width:880px){.gb-two{grid-template-columns:1fr;gap:30px}}
.gb-h{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:clamp(2.4rem,5.2vw,3.6rem);color:#fff;line-height:.95;text-transform:uppercase}
.gb-h em{color:var(--gb-brand);font-style:normal}
.gb-empathy{margin:20px 0 8px;font-size:1.06rem;color:var(--gb-grey2);max-width:44ch}
.gb-empathy b{color:#fff;font-weight:600}
.gb-dual{display:flex;margin:22px 0 6px;border:1px solid var(--gb-line);border-radius:10px;overflow:hidden}
.gb-dual div{flex:1;padding:16px 18px}
.gb-dual div+div{border-left:1px solid var(--gb-line)}
.gb-dual .gb-l{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#fff;font-size:1.05rem}
.gb-dual .gb-s{color:var(--gb-grey3);font-size:.84rem;margin-top:3px}
.gb-inc{list-style:none;margin:18px 0 4px;padding:0;display:flex;flex-direction:column;gap:9px}
.gb-inc li{display:flex;gap:11px;align-items:flex-start;color:var(--gb-grey2);font-size:.95rem}
.gb-inc li .gb-tk{color:var(--gb-brand);font-weight:800;flex:none}
.gb-inc li b{color:#fff;font-weight:600}
.gb-sound{display:inline-flex;align-items:center;gap:9px;margin-top:6px;border:1px dashed #3c3c3c;border-radius:30px;padding:7px 13px;color:var(--gb-grey2);font-size:.82rem}
.gb-sound .gb-wave{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.gb-sound .gb-wave i{width:2px;background:var(--gb-brand);animation:gb-eq 1s ease-in-out infinite}
.gb-sound .gb-wave i:nth-child(2){animation-delay:.2s}.gb-sound .gb-wave i:nth-child(3){animation-delay:.4s}.gb-sound .gb-wave i:nth-child(4){animation-delay:.1s}
@keyframes gb-eq{0%,100%{height:4px}50%{height:14px}}

.gb-buyrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.gb-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--gb-ignite-hi),var(--gb-ignite));color:#fff;font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;padding:15px 28px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;box-shadow:0 14px 34px -10px rgba(255,31,51,.55),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s,box-shadow .2s}
.gb-cta:hover{transform:translateY(-2px);box-shadow:0 20px 44px -10px rgba(255,31,51,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.gb-price{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:2rem;color:#fff;line-height:1}
.gb-pnote{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;color:var(--gb-brand);margin-top:3px}

/* tiles */
.gb-seclabel{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--gb-grey3);margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.gb-seclabel .gb-ln{height:1px;width:34px;background:var(--gb-line)}
.gb-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:880px){.gb-g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gb-g3{grid-template-columns:1fr}}
.gb-g6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:880px){.gb-g6{grid-template-columns:repeat(3,1fr)}}
.gb-tile{position:relative;aspect-ratio:9/13;border-radius:10px;overflow:hidden;border:1px solid var(--gb-line);background:#0c0c0c}
.gb-tile.gb-sm{aspect-ratio:9/14;border-radius:8px}
.gb-tile video,.gb-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.gb-tile:hover video,.gb-tile:hover img{transform:scale(1.05)}
.gb-tag{position:absolute;top:9px;left:9px;z-index:3;background:rgba(18,18,18,.82);border:1px solid #333;color:var(--gb-grey);font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;font-weight:700;padding:4px 8px;border-radius:30px}
.gb-tag.gb-post{background:var(--gb-brand);border-color:var(--gb-brand);color:#fff}
.gb-cap{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:13px 11px 10px;background:linear-gradient(to top,rgba(7,7,7,.92),transparent);font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:.8rem;color:#fff}
.gb-dur{position:absolute;top:9px;right:9px;z-index:3;font-family:'Saira Condensed',sans-serif;font-size:.6rem;color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:4px}
.gb-more{display:flex;align-items:center;justify-content:center;color:var(--gb-grey3);font-family:'Saira Condensed',sans-serif;font-size:1.5rem;font-weight:800}

/* +more styling */
.gb-more {
  position: relative;   /* makes this tile the anchor for the overlay */
  overflow: hidden;     /* keeps the image tidy within the tile */
}

.gb-more img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* image fills the tile nicely */
}

.gb-more-count {
  position: absolute;   /* lifts the number out of flow, onto the image */
  inset: 0;             /* stretches it across the whole tile */
  display: flex;
  align-items: center;      /* vertical centre */
  justify-content: center;  /* horizontal centre */
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  background: rgba(0,0,0,0.45);  /* dark veil so the number is readable */
}

/* money path */
.gb-money{margin:42px 0 36px;display:flex;border:1px solid var(--gb-line);border-radius:12px;overflow:hidden;background:rgba(28,28,28,.6)}
.gb-mp{flex:1;padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.gb-mp+.gb-mp{border-left:1px solid var(--gb-line)}
.gb-mp .gb-n{font-family:'Saira Condensed',sans-serif;font-weight:800;color:var(--gb-brand);font-size:.9rem;letter-spacing:.08em}
.gb-mp .gb-t{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:#fff;font-size:1.15rem}
.gb-mp .gb-d{color:var(--gb-grey3);font-size:.85rem}
@media(max-width:680px){.gb-money{flex-direction:column}.gb-mp+.gb-mp{border-left:none;border-top:1px solid var(--gb-line)}}

/* checkout + trust */
.gb-checkout{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:linear-gradient(180deg,rgba(33,33,33,.85),rgba(18,18,18,.85));border:1px solid var(--gb-line);border-top:2px solid var(--gb-brand);border-radius:14px;padding:28px 30px}
@media(max-width:760px){.gb-checkout{grid-template-columns:1fr;gap:22px;text-align:center}.gb-checkout .gb-buyside{justify-self:center;align-items:center}}
.gb-trust{display:flex;align-items:center;gap:16px}
.gb-trust img{height:42px;opacity:.85}
.gb-trust .gb-tl{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--gb-grey3)}
.gb-trust .gb-tb{font-family:'Saira Condensed',sans-serif;font-weight:700;color:#fff;font-size:1.2rem;line-height:1.05;margin-top:2px}
.gb-trust .gb-tb em{color:var(--gb-brand);font-style:normal}
.gb-chips{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.gb-chip{font-family:'Saira Condensed',sans-serif;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gb-grey2);border:1px solid #333;border-radius:20px;padding:3px 9px}
.gb-buyside{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.gb-guar{display:inline-flex;align-items:center;gap:8px;color:var(--gb-grey2);font-size:.8rem;font-family:'Saira Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.gb-guar svg{width:18px;height:18px;flex:none}

/* why strip */
.gb-why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gb-line);border:1px solid var(--gb-line);border-radius:12px;overflow:hidden}
@media(max-width:680px){.gb-why{grid-template-columns:1fr}}
.gb-why>div{background:rgba(14,14,14,.85);padding:22px}
.gb-why .gb-wt{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:#fff;font-size:1rem;margin-bottom:5px;display:flex;align-items:center;gap:9px}
.gb-why .gb-wt .gb-dot{width:7px;height:7px;border-radius:50%;background:var(--gb-brand);flex:none}
.gb-why .gb-wd{color:var(--gb-grey3);font-size:.84rem}

/* working-name card */
.gb-namecard{border:1px solid var(--gb-line);border-radius:12px;padding:18px 20px;background:rgba(28,28,28,.5)}
.gb-namecard .gb-k{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:var(--gb-grey3);margin-bottom:8px}
.gb-namecard .gb-big{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.7rem;color:#fff;text-transform:uppercase;line-height:1}
.gb-namecard .gb-big span{color:var(--gb-brand)}
.gb-namecard .gb-sub{color:var(--gb-grey3);font-size:.82rem;margin-top:8px}
.gb-was{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--gb-grey3);margin-top:14px}
.gb-was s{color:#666}

/* FAQ + licence */
.gb-faqgrid{display:grid;grid-template-columns:1.3fr .9fr;gap:34px;margin-top:34px}
@media(max-width:880px){.gb-faqgrid{grid-template-columns:1fr;gap:24px}}
.gb-faq details{border:1px solid var(--gb-line);border-radius:10px;margin-bottom:10px;background:rgba(28,28,28,.5);overflow:hidden}
.gb-faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#fff;font-size:.98rem;display:flex;justify-content:space-between;align-items:center}
.gb-faq summary::-webkit-details-marker{display:none}
.gb-faq summary .gb-pl{color:var(--gb-brand);font-size:1.3rem;line-height:1;transition:transform .2s}
.gb-faq details[open] summary .gb-pl{transform:rotate(45deg)}
.gb-faq .gb-body{padding:0 18px 16px;color:var(--gb-grey2);font-size:.9rem;line-height:1.6}
.gb-lic{border:1px solid var(--gb-line);border-top:2px solid var(--gb-brand);border-radius:12px;padding:22px;background:rgba(18,18,18,.6);align-self:start}
.gb-lic h4{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#fff;font-size:1.05rem;margin-bottom:14px}
.gb-lic .gb-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--gb-line);font-size:.86rem}
.gb-lic .gb-row:last-child{border-bottom:none}
.gb-lic .gb-y{color:#7ec98f;font-weight:700;flex:none}
.gb-lic .gb-x{color:#d9606b;font-weight:700;flex:none}
.gb-lic .gb-li{color:var(--gb-grey2)}
.gb-lic a{color:var(--gb-brand)}

/* ── legal / policy articles (Terms of Sale, Creator-Use Licence,
   future Privacy / Cookies) — shared typography so a long-form
   legal article dropped into Joomla reads consistently with the
   rest of the site without a bespoke style block per article.
   Wrap the article body in .gb-legal. ────────────────────────── */
.gb-legal{max-width:760px;margin:0 auto;color:var(--gb-grey2);font-size:.98rem;line-height:1.7}
.gb-legal h1{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:clamp(2rem,4.4vw,2.9rem);color:#fff;text-transform:uppercase;line-height:1.05;margin-bottom:8px}
.gb-legal-meta{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--gb-grey3);margin-bottom:36px}
.gb-legal-intro{font-size:1.02rem;color:var(--gb-grey2);max-width:60ch;margin-bottom:8px}
.gb-legal h2{font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;font-size:1.25rem;margin:38px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--gb-line)}
.gb-legal h2 .gb-legal-num{color:var(--gb-brand);margin-right:10px}
.gb-legal h3{font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;font-size:1.02rem;margin:24px 0 10px}
.gb-legal p{margin:0 0 14px}
.gb-legal p:last-child{margin-bottom:0}
.gb-legal b,.gb-legal strong{color:#fff;font-weight:600}
.gb-legal a{color:var(--gb-brand);text-decoration:none;font-weight:600}
.gb-legal a:hover{text-decoration:underline}
.gb-legal ul,.gb-legal ol{margin:0 0 14px;padding-left:22px}
.gb-legal li{margin-bottom:6px}
.gb-legal hr{border:none;border-top:1px solid var(--gb-line);margin:40px 0}
.gb-legal .gb-callout{border:1px solid var(--gb-line);border-top:2px solid var(--gb-brand);border-radius:12px;padding:18px 20px;margin:18px 0;background:rgba(28,28,28,.5)}
.gb-legal .gb-callout p{margin-bottom:0}
.gb-legal .gb-callout p+p{margin-top:10px}

/* shared key/value identity block — used in the legal articles (§1 /
   Ownership) and again in the footer, so the seller details only
   need updating in one CSS-styled pattern across both places. */
.gb-idblock{display:flex;flex-direction:column;gap:5px;font-size:.86rem}
.gb-idblock .gb-idrow{display:flex;gap:8px;flex-wrap:wrap}
.gb-idblock .gb-idk{color:var(--gb-grey3);min-width:112px;flex:none}
.gb-idblock .gb-idv{color:var(--gb-grey2)}
.gb-idblock a{color:var(--gb-brand)}

/* placeholder values still awaiting real data (identity block, dates,
   URLs) — visually flagged so they can't accidentally ship unnoticed */
/*.gb-placeholder{color:var(--gb-ignite-hi);background:rgba(255,31,51,.08);border:1px dashed var(--gb-ignite);border-radius:4px;padding:1px 6px} */

/* ── site footer (module position: "footer") ─────────────────────
   Two-zone layout: brand + legal identity on one side, a vertically
   stacked link list on the other. As shipped, links sit on the RIGHT
   and the logo/legal block on the LEFT — to flip, swap the order of
   the .gb-footer-brand and .gb-footer-links blocks in the module's
   markup (this is a plain 2-column grid, so markup order = visual
   order; no CSS change needed). ─────────────────────────────────── */
.gb-footer{background:var(--gb-panel);border-top:2px solid var(--gb-brand)}
.gb-footer-inner{max-width:1120px;margin:0 auto;padding:48px 24px 32px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px}
@media(max-width:680px){.gb-footer-inner{grid-template-columns:1fr;gap:32px}}

.gb-footer-brand{display:flex;flex-direction:column;gap:14px}
.gb-footer-logo{display:flex;align-items:center;gap:11px}
.gb-footer-logo img{height:26px;width:auto;opacity:.92}
.gb-footer-logo span{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.28em;font-size:.68rem;color:var(--gb-grey3);padding-left:11px;border-left:1px solid var(--gb-line)}
.gb-footer-tagline{color:var(--gb-grey3);font-size:.84rem;max-width:42ch}

.gb-footer-links .gb-footer-heading{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--gb-grey3);margin-bottom:10px}
.gb-footer-links nav{display:flex;flex-direction:column}
.gb-footer-links nav a{color:var(--gb-grey2);text-decoration:none;font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:.86rem;padding:7px 0;transition:color .15s}
.gb-footer-links nav a:hover{color:#fff}

.gb-footer-bottom{border-top:1px solid var(--gb-line)}
.gb-footer-bottom-inner{max-width:1120px;margin:0 auto;padding:16px 24px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center}
.gb-footer-copy{color:var(--gb-grey3);font-size:.76rem}

/* tables inside the legal articles (e.g. Privacy Policy §3 processor
   table, Cookie Policy's cookie tables) — wrapped in an overflow
   container by the markup so a wide table scrolls on mobile instead
   of blowing out the page. */
.gb-legal .gb-tablewrap{overflow-x:auto;margin:0 0 14px}
.gb-legal table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:480px}
.gb-legal th{text-align:left;font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#fff;font-size:.76rem;padding:9px 12px;border-bottom:1px solid var(--gb-line)}
.gb-legal td{padding:10px 12px;border-bottom:1px solid var(--gb-line);color:var(--gb-grey2);vertical-align:top}
.gb-legal td code{background:var(--gb-panel2);border:1px solid var(--gb-line);border-radius:4px;padding:1px 6px;font-size:.82em;color:var(--gb-grey)}

/* ── cookie consent banner (js/gb-consent.js) ─────────────────────
   Fixed bar, not a modal — it shouldn't block reading the page.
   Reject/Accept share one class on purpose: identical styling is
   the compliance point, so a later colour tweak can't drift them
   apart. Do not give Accept more visual weight than Reject. ────── */
.gb-consent{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--gb-black);border-top:1px solid var(--gb-line);padding:1rem 1.25rem;font-family:'Inter',system-ui,sans-serif}
.gb-consent[hidden]{display:none}
.gb-consent-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.gb-consent-text{margin:0;color:var(--gb-grey2);font-size:.875rem;line-height:1.5;flex:1 1 320px}
.gb-consent-link{color:var(--gb-grey);text-decoration:underline;text-underline-offset:2px;margin-left:.35rem}
.gb-consent-link:hover{color:var(--gb-brand)}
.gb-consent-actions{display:flex;gap:.75rem;flex:0 0 auto}
.gb-consent-btn{appearance:none;cursor:pointer;background:transparent;color:var(--gb-grey);border:1px solid var(--gb-grey);padding:.6rem 1.6rem;font-size:.8125rem;font-family:inherit;letter-spacing:.06em;text-transform:uppercase;transition:background .2s ease,color .2s ease,border-color .2s ease}
.gb-consent-btn:hover,.gb-consent-btn:focus-visible{background:var(--gb-brand);border-color:var(--gb-brand);color:var(--gb-grey)}
.gb-consent-btn:focus-visible{outline:2px solid var(--gb-grey);outline-offset:2px}
@media(max-width:640px){.gb-consent-inner{flex-direction:column;align-items:stretch}.gb-consent-actions{justify-content:stretch}.gb-consent-btn{flex:1;text-align:center}}

/* inline "Cookie settings" trigger used inside the Cookie Policy
   article body (same data-gb-consent-reopen mechanism as the footer
   link) — styled as text, not a button, since it sits mid-paragraph */
.gb-legal .gb-consent-reopen{background:none;border:none;padding:0;color:var(--gb-brand);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.gb-legal .gb-consent-reopen:hover{color:var(--gb-ignite-hi)}

/* ── Joomla core-view forms (Login, Contact — and by extension
   Registration / Password-reset / Username-reminder, since every
   core Joomla view shares these same Bootstrap-flavoured class
   names and this template loads no Bootstrap CSS of its own).
   Scoped to .gb-scope so it only ever touches core-component
   output, never anything inside an article. ──────────────────── */
.gb-scope .com-users-login,
.gb-scope .com-contact{
  max-width:560px;margin:64px auto;padding:0 24px;
  color:var(--gb-grey2);font-family:'Inter',system-ui,sans-serif;
}
.gb-scope .page-header h1,
.gb-scope .com-contact h2{
  font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  color:#fff;font-size:1.6rem;letter-spacing:.02em;margin:0 0 18px;
}
.gb-scope .com-contact__info{margin-bottom:24px}
.gb-scope .com-contact__address dt,.gb-scope .com-contact__address dd{color:var(--gb-grey2);font-size:.9rem}

.gb-scope .well{
  background:var(--gb-panel);border:1px solid var(--gb-line);border-top:2px solid var(--gb-brand);
  border-radius:12px;padding:26px 26px 24px;
}
.gb-scope .well fieldset{border:none;margin:0;padding:0}
.gb-scope .well legend{
  font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:#fff;font-size:1.05rem;border-bottom:1px solid var(--gb-line);padding-bottom:12px;margin-bottom:18px;width:100%;
}
.gb-scope .control-group{margin-bottom:16px}
.gb-scope .control-group:last-child{margin-bottom:0}
.gb-scope .control-label label{
  display:block;font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;font-size:.76rem;color:var(--gb-grey3);margin-bottom:6px;
}
.gb-scope .control-label label .star,.gb-scope .control-label label strong.red{color:var(--gb-brand);font-weight:700}
.gb-scope .field-spacer .control-label{margin-bottom:12px}
.gb-scope .field-spacer label{color:var(--gb-grey3);font-size:.78rem;text-transform:none;letter-spacing:normal;font-family:'Inter',sans-serif}

.gb-scope .form-control,
.gb-scope input[type="text"],
.gb-scope input[type="email"],
.gb-scope input[type="password"],
.gb-scope textarea{
  width:100%;background:var(--gb-panel2);border:1px solid var(--gb-line);color:var(--gb-grey);
  border-radius:6px;padding:10px 12px;font-size:.92rem;font-family:'Inter',sans-serif;
  transition:border-color .15s;
}
.gb-scope textarea.form-control{resize:vertical;min-height:120px}
.gb-scope .form-control:focus,
.gb-scope input:focus,
.gb-scope textarea:focus{outline:none;border-color:var(--gb-brand)}
.gb-scope .form-control.required:invalid{box-shadow:none}

.gb-scope .form-check{display:flex;align-items:center;gap:8px;margin:4px 0}
.gb-scope .form-check-input{width:16px;height:16px;accent-color:var(--gb-brand);cursor:pointer;flex:none}
.gb-scope .form-check-label{color:var(--gb-grey2);font-size:.86rem;cursor:pointer}
.gb-scope .com-users-login__remember .form-check-label{margin:0}

.gb-scope .password-group .input-group{display:flex;gap:8px}
.gb-scope .password-group input{flex:1}

.gb-scope .btn{
  font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  font-size:.86rem;border-radius:6px;padding:11px 22px;cursor:pointer;border:none;transition:transform .15s,box-shadow .2s;
}
.gb-scope .btn-primary{
  background:linear-gradient(180deg,var(--gb-ignite-hi),var(--gb-ignite));color:#fff;
  box-shadow:0 10px 24px -8px rgba(255,31,51,.5);
}
.gb-scope .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(255,31,51,.65)}
.gb-scope .btn-secondary{
  background:transparent;color:var(--gb-grey2);border:1px solid var(--gb-line);
}
.gb-scope .btn-secondary:hover{border-color:var(--gb-grey2);color:#fff}
.gb-scope .btn.w-100{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.gb-scope .btn svg{width:18px;height:18px;fill:currentColor}
.gb-scope .input-password-toggle{padding:10px 14px;flex:none}
/* Joomla's toggle icon is a font-icon glyph (icon-eye) from a Joomla
   core icon font this template doesn't load, so it would render as an
   empty box. Hide the missing glyph and surface its screen-reader-only
   label as visible button text instead — no extra icon dependency. */
.gb-scope .input-password-toggle .icon-eye{display:none}
.gb-scope .input-password-toggle .visually-hidden{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap;font-size:.72rem}

.gb-scope .com-users-login__submit{margin-top:14px}

.gb-scope .list-group{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.gb-scope .list-group-item{background:none;border:none;padding:0;color:var(--gb-grey3);font-size:.84rem;text-decoration:none}
.gb-scope .list-group-item:hover{color:var(--gb-brand)}

/* ── Joomla core-view forms (Login, Contact — and by extension
   Registration / Password-reset / Username-reminder, since every
   core Joomla view shares these same Bootstrap-flavoured class
   names and this template loads no Bootstrap CSS of its own).
   Scoped to .gb-scope so it only ever touches core-component
   output, never anything inside an article. ──────────────────── */
.gb-scope .com-users-login,
.gb-scope .com-contact{
  max-width:560px;margin:64px auto;padding:0 24px;
  color:var(--gb-grey2);font-family:'Inter',system-ui,sans-serif;
}
.gb-scope .page-header h1,
.gb-scope .com-contact h2{
  font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  color:#fff;font-size:1.6rem;letter-spacing:.02em;margin:0 0 18px;
}
.gb-scope .com-contact__info{margin-bottom:24px}
.gb-scope .com-contact__address dt,.gb-scope .com-contact__address dd{color:var(--gb-grey2);font-size:.9rem}

.gb-scope .well{
  background:var(--gb-panel);border:1px solid var(--gb-line);border-top:2px solid var(--gb-brand);
  border-radius:12px;padding:26px 26px 24px;
}
.gb-scope .well fieldset{border:none;margin:0;padding:0}
.gb-scope .well legend{
  font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:#fff;font-size:1.05rem;border-bottom:1px solid var(--gb-line);padding-bottom:12px;margin-bottom:18px;width:100%;
}
/* Joomla core views (e.g. the Checkboxes custom-field type) assume a
   Bootstrap-style .visually-hidden utility exists for screen-reader-only
   text — this template loads no Bootstrap, so without this rule that
   "hidden" text (like a Checkboxes field's inner <legend>) renders as a
   plain, visible element instead, duplicating the field's real label. */
.gb-scope .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ...except the password-toggle button, which deliberately surfaces its
   sr-only text as visible "Show Password" wording — see below. Higher
   specificity here wins over the generic rule regardless of source order. */
.gb-scope .input-password-toggle .visually-hidden{position:static!important;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:nowrap;font-size:.72rem}
.gb-scope .control-group{margin-bottom:16px}
.gb-scope .control-group:last-child{margin-bottom:0}
.gb-scope .control-label label{
  display:block;font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;font-size:.76rem;color:var(--gb-grey3);margin-bottom:6px;
}
.gb-scope .control-label label .star,.gb-scope .control-label label strong.red{color:var(--gb-brand);font-weight:700}
.gb-scope .field-spacer .control-label{margin-bottom:12px}
.gb-scope .field-spacer label{color:var(--gb-grey3);font-size:.78rem;text-transform:none;letter-spacing:normal;font-family:'Inter',sans-serif}

.gb-scope .form-control,
.gb-scope input[type="text"],
.gb-scope input[type="email"],
.gb-scope input[type="password"],
.gb-scope textarea{
  width:100%;background:var(--gb-panel2);border:1px solid var(--gb-line);color:var(--gb-grey);
  border-radius:6px;padding:10px 12px;font-size:.92rem;font-family:'Inter',sans-serif;
  transition:border-color .15s;
}
.gb-scope textarea.form-control{resize:vertical;min-height:120px}
.gb-scope .form-control:focus,
.gb-scope input:focus,
.gb-scope textarea:focus{outline:none;border-color:var(--gb-brand)}
.gb-scope .form-control.required:invalid{box-shadow:none}

.gb-scope .form-check{display:flex;align-items:center;gap:8px;margin:4px 0}
.gb-scope .form-check-input{width:16px;height:16px;accent-color:var(--gb-brand);cursor:pointer;flex:none}
.gb-scope .form-check-label{color:var(--gb-grey2);font-size:.86rem;cursor:pointer}
.gb-scope .com-users-login__remember .form-check-label{margin:0}

.gb-scope .password-group .input-group{display:flex;gap:8px}
.gb-scope .password-group input{flex:1}

.gb-scope .btn{
  font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  font-size:.86rem;border-radius:6px;padding:11px 22px;cursor:pointer;border:none;transition:transform .15s,box-shadow .2s;
}
.gb-scope .btn-primary{
  background:linear-gradient(180deg,var(--gb-ignite-hi),var(--gb-ignite));color:#fff;
  box-shadow:0 10px 24px -8px rgba(255,31,51,.5);
}
.gb-scope .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(255,31,51,.65)}
.gb-scope .btn-secondary{
  background:transparent;color:var(--gb-grey2);border:1px solid var(--gb-line);
}
.gb-scope .btn-secondary:hover{border-color:var(--gb-grey2);color:#fff}
.gb-scope .btn.w-100{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.gb-scope .btn svg{width:18px;height:18px;fill:currentColor}
.gb-scope .input-password-toggle{padding:10px 14px;flex:none}
/* Joomla's toggle icon is a font-icon glyph (icon-eye) from a Joomla
   core icon font this template doesn't load, so it would render as an
   empty box. Hide the missing glyph — the sr-only label is surfaced as
   visible button text instead by the .visually-hidden override above. */
.gb-scope .input-password-toggle .icon-eye{display:none}

.gb-scope .com-users-login__submit{margin-top:14px}

.gb-scope .list-group{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.gb-scope .list-group-item{background:none;border:none;padding:0;color:var(--gb-grey3);font-size:.84rem;text-decoration:none}
.gb-scope .list-group-item:hover{color:var(--gb-brand)}

/* ── Altcha CAPTCHA widget (Contact form) — self-hosted, no
   third-party cookies or tracking involved, which is why it's a
   better fit here than reCAPTCHA. It renders in light DOM (no
   locked shadow root or iframe), so it's themed through its own
   documented CSS custom properties rather than fighting its
   internal classes — safe across future Altcha version updates. */
.gb-scope altcha-widget{
  display:block;margin-top:2px;
  --altcha-color-base:var(--gb-panel2);
  --altcha-color-border:var(--gb-line);
  --altcha-color-border-focus:var(--gb-brand);
  --altcha-color-text:var(--gb-grey2);
  --altcha-color-active:var(--gb-brand);
  --altcha-color-error-text:var(--gb-ignite-hi);
  --altcha-border-radius:6px;
}
.gb-scope .altcha-checkbox input{accent-color:var(--gb-brand)}