:root{
  --ink:#050505; --gold:#d59852; --white:#fff; --muted:#9a9a9a;
  /* EXACT brand rainbow gradient (sampled from PSD): cyan->blue->indigo->purple->magenta->red->orange->gold */
  --grad-brand:linear-gradient(90deg,#17aa9e 0%,#2f86c4 16%,#5a6fbe 30%,#8c58b4 44%,#b14a92 58%,#c8474d 71%,#dd6f37 86%,#e6a94e 100%);
  --grad-brand-d:linear-gradient(135deg,#17aa9e 0%,#2f86c4 16%,#5a6fbe 30%,#8c58b4 44%,#b14a92 58%,#c8474d 71%,#dd6f37 86%,#e6a94e 100%);
  --f-head:'Oswald',sans-serif; --f-body:'Roboto',sans-serif;
  --content:1256px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#000}
body{font-family:var(--f-body);color:var(--white);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* fixed design canvas (responsive handled later) */
/* div-scoped: WordPress puts class "page" on <body> of static Pages — an
   unscoped .page rule would clip BODY and kill viewport scrolling. */
/* overflow-x clip kills the horizontal scrollbar from the scaled 1800px
   canvas; overflow-y stays visible so nav dropdowns/flyouts aren't clipped. */
div.page{width:1800px;background:#000;overflow-x:clip;overflow-y:visible;position:relative;transform-origin:0 0;margin:0 auto}
body.page{overflow:visible;width:auto;zoom:normal}
.container{width:var(--content);margin:0 auto}

/* ---------- announcement bar ---------- */
.announce{background:#050505;height:44px;display:flex;align-items:center;font-family:var(--f-head)}
.announce .container{display:flex;align-items:center;justify-content:flex-end;gap:34px}
.callus{display:flex;align-items:center;gap:13px;font-family:var(--f-head);font-weight:300;font-size:17px;letter-spacing:0;text-transform:uppercase;color:#f0f0f0}
.callus i{color:#fff;font-size:18px}
.callus b{font-family:var(--f-head);font-weight:500;font-size:17px;letter-spacing:0;color:#fff}
.socials{display:flex;align-items:center;gap:10px}
.socials a{width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid #454545;display:flex;align-items:center;justify-content:center;font-size:14px;color:#e2e2e2;transition:.18s}
.socials a:hover{border-color:var(--gold);color:var(--gold)}

/* gradient divider */
.brandline{height:2px;width:100%;background:var(--grad-brand)}

/* ---------- main nav ---------- */
.nav{background:#050505;height:72px;display:flex;align-items:center}
.nav .container{display:flex;align-items:center}
.brand{display:flex;align-items:center}
.brand-logo{height:58px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:36px;margin-left:auto;margin-right:46px;font-family:var(--f-head);font-weight:500;font-size:16px;letter-spacing:1px;text-transform:uppercase}
.menu a{color:#f2f2f2;transition:.15s}
.menu a:hover{color:var(--gold)}
.actions{display:flex;align-items:center;gap:20px}
.actions .ico{font-size:18px;color:#fff;position:relative;display:flex;align-items:center}
.actions .cart .badge{position:absolute;top:-8px;right:-10px;background:var(--gold);color:#111;font-family:var(--f-head);font-size:10px;font-weight:600;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hotdeal{display:flex;align-items:center;gap:8px;background:var(--grad-brand);
  color:#fff;font-family:var(--f-head);font-weight:600;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  padding:11px 18px;border-radius:5px}
.hotdeal i{font-size:13px}

/* ---------- hero ---------- */
.hero{position:relative;width:100%;height:710px;overflow:visible;background:#000;z-index:3}
.hero-bg{position:absolute;inset:0;width:100%;height:710px;object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 99%);mask-image:linear-gradient(to bottom,#000 68%,transparent 99%)}
/* 2026-09-07: prod layers. Glow = prod's section overlay (Layer-88-1); cues =
   prod's cues-right.png at natural size, placed where the design had them
   (alpha bbox of the old flattened hero-cues.webp started at 1205,64). */
.hero-glow{position:absolute;inset:0;width:100%;height:710px;object-fit:cover;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 99%);mask-image:linear-gradient(to bottom,#000 68%,transparent 99%)}
.hero-cues{position:absolute;top:64px;left:1205px;width:595px;height:auto;z-index:5;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 82%);mask-image:linear-gradient(to bottom,#000 60%,transparent 82%)}
.hero h1 .g{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-rail{position:absolute;left:110px;top:132px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:20px}
.hero-rail a{color:#e2e2e2;font-size:15px}
.hero-rail a:hover{color:var(--gold)}
.hero-rail .vline{width:1px;height:66px;background:#575757;margin:4px 0}
.hero-rail .sd{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-head);font-size:12px;letter-spacing:3px;color:#8a8a8a}
.hero-inner{position:relative;z-index:2;padding-top:98px}
.hero h1{font-family:var(--f-head);font-weight:500;font-size:90px;line-height:.98;letter-spacing:1px;text-transform:uppercase;color:#fff}
.hero h1 .p{background:linear-gradient(92deg,#b23c8f,#e06a2b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .c{background:linear-gradient(92deg,#20a89e,#3f74d0,#8c58b4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:26px;max-width:565px;font-family:var(--f-body);font-weight:400;font-size:21px;line-height:1.5;color:#c7c7c7}
.btn-grad{display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-brand);color:#fff;
  font-family:var(--f-head);font-weight:500;font-size:16px;letter-spacing:2px;text-transform:uppercase;
  padding:16px 34px;border-radius:5px}
.hero-cta{margin-top:38px;display:inline-flex}
.hero-dots{display:flex;gap:12px;margin-top:66px}
.hero-dots span{width:9px;height:9px;border-radius:50%;background:#5c5c5c}
.hero-dots span.on{background:var(--gold)}

/* ---------- patience banner ---------- */
.patience{position:relative;width:100%;height:534px;background:#000;overflow:hidden}
.pat-bg{position:absolute;inset:0;width:100%;height:534px}
.pat-inner{position:relative;z-index:2;text-align:center;padding-top:82px}
.pat-inner h2{font-family:var(--f-head);font-weight:500;font-size:39px;line-height:1.2;letter-spacing:.3px;text-transform:uppercase;color:#fff;max-width:1015px;margin:0 auto}
.pat-sub{margin-top:24px;font-family:var(--f-body);font-weight:300;font-size:27px;color:#ededed}
.pat-sub b{font-weight:700}
.pat-cta{margin-top:42px}

/* ---------- promo trio + used cues (2026-09-07: prod banners over prod's Layer-89-1 texture) ---------- */
.promo{position:relative;width:100%;background:#000 url(../img/tex-arc.webp) no-repeat right center;background-size:auto 100%;padding:78px 0 92px;overflow:hidden}
.promo-row{display:flex;justify-content:center;gap:24px}
.promo-card{display:block;width:405px;flex:0 0 auto;border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.promo-card img{display:block;width:100%;height:auto}
.promo-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.promo-card{position:relative}
.used-band{text-align:center;margin-top:96px}
.used-band .used-copy{max-width:1120px;margin:18px auto 0;line-height:1.7}
.used-band .btn-grad{margin-top:32px}
.pcard{position:absolute;top:72px;width:408px;height:491px;z-index:2}
.pcard.c1{left:271px}.pcard.c2{left:695px}.pcard.c3{left:1119px}
.pcard>*{position:absolute}
.ptitle{font-family:var(--f-head);font-weight:500;font-size:39px;line-height:1.05;text-transform:uppercase;color:#fff}
.tl-teal{color:#13a68b}.tl-green{color:#129d54}.tl-blue{color:#2f9fe0}.tl-gray{color:#9a9a9a}
.collar{font-family:var(--f-body);font-weight:700;font-size:18px;color:#fff}
.cdesc{font-family:var(--f-body);font-weight:400;font-size:16px;line-height:1.35;color:#c4c4c4}
.oldp{font-family:var(--f-head);font-weight:500;font-size:22px;color:#d63232;text-decoration:line-through}
.newp{font-family:var(--f-head);font-weight:500;font-size:40px;color:#fff}
.subttl{font-family:var(--f-head);font-weight:500;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:#bcbcbc}
.btn-green{background:#0a8f6f;color:#fff;font-family:var(--f-head);font-weight:500;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;padding:12px 26px;border-radius:5px}
.btn-gray{background:#cfcfcf;color:#1a1a1a;font-family:var(--f-head);font-weight:500;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;padding:12px 26px;border-radius:5px}
.btn-line{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;font-family:var(--f-head);font-weight:500;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;padding:11px 24px;border-radius:5px}
.badge-new{width:98px;height:98px;display:flex;align-items:center;justify-content:center;text-align:center;background:#e0342f;color:#fff;font-family:var(--f-head);font-weight:600;font-size:16px;line-height:1.05;text-transform:uppercase;
 clip-path:polygon(50% 0%,61% 14%,78% 8%,74% 26%,92% 27%,80% 42%,98% 50%,80% 58%,92% 73%,74% 74%,78% 92%,61% 86%,50% 100%,39% 86%,22% 92%,26% 74%,8% 73%,20% 58%,2% 50%,20% 42%,8% 27%,26% 26%,22% 8%,39% 14%)}

/* ---------- section heading (shared) ---------- */
.sec-head{font-family:var(--f-head);font-weight:500;font-size:50px;text-align:center;color:#fff;letter-spacing:.5px;text-transform:uppercase}

/* ---------- categories ---------- */
.categories{position:relative;width:100%;background:#000;padding:127px 0 129px}
.cat-rows{margin-top:44px;display:flex;flex-direction:column;gap:16px}
.cat-row{display:flex;gap:16px}
.tile{position:relative;height:380px;border-radius:12px;overflow:hidden}
.tile.coin{width:832px}.tile.cues{width:408px}.tile.third{flex:1}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* apparel tile = prod's two layers (Layer_83 floor + Layer_82 hat) */
.tile.apparel>img.tile-hat{inset:auto;right:6%;bottom:-6px;width:70%;max-width:302px;height:auto;object-fit:contain;z-index:1}
.cat-sub{max-width:900px;margin-left:auto;margin-right:auto;line-height:1.6}
.tile .t-title{position:absolute;font-family:var(--f-head);font-weight:500;font-size:48px;line-height:1;color:#fff;text-transform:uppercase;z-index:2}
.coin-desc{position:absolute;font-family:var(--f-body);font-weight:400;font-size:18px;line-height:1.35;color:#ededed;max-width:300px;z-index:2}
/* prod's quarter-holder copy runs three lines: keep it clear of the button */
.tile.coin .coin-desc{top:196px !important}
.tile.coin .catbtn{top:296px !important}
.catbtn{position:absolute;font-family:var(--f-head);font-weight:500;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;padding:12px 24px;border-radius:5px;z-index:2;background:#3a3a3a;transition:background .2s,transform .2s}
.catbtn:hover{transform:translateY(-1px)}
.cb-green:hover{background:#0a8f6f}.cb-blue:hover{background:#2f9fe0}.cb-orange:hover{background:#e8712a}.cb-dark:hover{background:#2f9fe0}
.usa-badge{position:absolute;top:0;right:0;font-family:var(--f-head);font-weight:600;font-size:14px;letter-spacing:.3px;text-transform:uppercase;color:#fff;background:#5f2c8f;padding:11px 22px;border-bottom-left-radius:16px;z-index:2}
.sec-sub{font-family:var(--f-body);font-weight:400;font-size:19px;color:#8f8f8f;text-align:center;margin-top:13px}

/* ---------- product grid (reusable, swappable) ---------- */
.newproduct{position:relative;width:100%;background:#000;padding:20px 0 12px}
.prod-grid{display:flex;gap:10px;justify-content:center;margin-top:50px}
.pcardg{width:306px}
.pbox{position:relative;background:#fff;border-radius:16px;height:283px;overflow:hidden}
.pbox img{width:100%;height:100%;object-fit:cover}
.pheart{position:absolute;top:14px;left:14px;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.12);color:#9a9a9a;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.pheart.gold{background:linear-gradient(135deg,#e8a651,#d5762f);color:#fff;border:none}
.pstars{color:var(--gold);text-align:center;letter-spacing:4px;font-size:16px;margin:22px 0 13px}
.pname{font-family:var(--f-head);font-weight:500;font-size:24px;line-height:1.16;text-align:center;color:#fff;min-height:56px;padding:0 6px}
.pprice{font-family:var(--f-head);font-weight:500;font-size:24px;color:var(--gold);text-align:center;margin-top:14px}
.pshop{display:block;margin:22px auto 0;width:200px;padding:14px 0;border-radius:5px;background:#0d0d0d;border:1px solid #343434;color:#fff;font-family:var(--f-head);font-weight:500;font-size:15px;letter-spacing:2px;text-transform:uppercase;text-align:center}
.pshop.feat{background:var(--grad-brand);border:none}
.prod-nav{position:absolute;top:388px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-family:var(--f-head);z-index:3}
.prod-nav.left{left:191px;background:#262626;color:#b8b8b8}
.prod-nav.right{left:1563px;background:#262626;color:#b8b8b8}

/* ---------- what is quarter king ---------- */
.whatis{position:relative;width:100%;height:800px;overflow:hidden;background:#000}
.wi-bg{position:absolute;inset:0;width:100%;height:800px;object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 88%,transparent 100%)}
.wi-cues{-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 90%,transparent 100%)}
.wi-cues{position:absolute;inset:0;width:100%;height:800px;object-fit:cover;z-index:1;pointer-events:none}
/* prod's upright cue (Layer-48-1, 87x686) sits where the design's flattened layer had it */
.wi-cue{position:absolute;left:117px;top:95px;width:87px;height:auto;z-index:1;pointer-events:none}
.wi-inner{position:relative;z-index:2;padding-top:132px}
.wi-h{font-family:var(--f-head);font-weight:500;font-size:70px;line-height:1.02;text-transform:uppercase;color:#fff}
.wi-body{margin-top:22px;max-width:590px}
.wi-body p{font-family:var(--f-body);font-weight:400;font-size:20px;line-height:1.5;color:#ddd2c2;margin-bottom:20px}
.wi-body p:first-child{color:#f4efe6;font-size:21px}
.wi-more{display:inline-flex;align-items:center;gap:12px;margin-top:12px;font-family:var(--f-head);font-weight:500;font-size:17px;letter-spacing:1.5px;text-transform:uppercase;color:#fff}
.wi-more i{font-size:15px}

/* ---------- hot deals ---------- */
.hotdeals{position:relative;width:100%;background:#000;padding:74px 0 50px}
.hd-row{display:flex;gap:10px;margin-top:46px}
.hd-feature{position:relative;width:622px;height:522px;border-radius:14px;overflow:hidden;flex-shrink:0}
.hd-feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hdf-title{position:absolute;top:44px;left:38px;font-family:var(--f-head);font-weight:500;font-size:44px;color:#fff;text-transform:uppercase;z-index:2}
.hdf-sub{position:absolute;top:106px;left:40px;font-family:var(--f-head);font-weight:500;font-size:21px;letter-spacing:1px;color:#fff;text-transform:uppercase;z-index:2}
.hdf-btn{position:absolute;top:156px;left:40px;background:linear-gradient(180deg,#d8ad3e,#a87d22);color:#fff;font-family:var(--f-head);font-weight:500;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;padding:13px 28px;border-radius:5px;z-index:2}
.hdf-badge{position:absolute;top:150px;left:296px;width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#e0342f;color:#fff;font-family:var(--f-head);text-transform:uppercase;z-index:2;
 clip-path:polygon(50% 0%,61% 14%,78% 8%,74% 26%,92% 27%,80% 42%,98% 50%,80% 58%,92% 73%,74% 74%,78% 92%,61% 86%,50% 100%,39% 86%,22% 92%,26% 74%,8% 73%,20% 58%,2% 50%,20% 42%,8% 27%,26% 26%,22% 8%,39% 14%)}
.hdf-badge b{font-size:21px;font-weight:600;line-height:1}
.hdf-badge span{font-size:13px;font-weight:400;line-height:1.18;margin-top:3px;padding:0 24px}
.hd-grid{margin-top:0;flex:1}
/* prod's Valhalla banner: heading top-left, button right under it (prod: h2 @20,10 48px; button @20,78) */
.hd-feature.valhalla .hdf-title{top:22px;left:30px;font-size:40px;line-height:1.05;max-width:330px;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.hd-feature.valhalla .hdf-btn{top:124px;left:30px}

/* ---------- core brands ---------- */
.corebrands{position:relative;width:100%;height:630px;overflow:hidden;background:#000}
.cb-bg{position:absolute;inset:0;width:100%;height:630px;object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 87%,transparent 100%)}
.cb-inner{position:relative;z-index:2;padding-top:219px}
.brand-row{display:flex;gap:14px;justify-content:center;margin-top:45px}
/* 2026-09-07: prod's six partner logos are white-on-black 177x55 PNGs shown on WHITE
   cards (prod inverts them) — six cards fit the 1256 container at 197px each. */
.brand-card{width:197px;height:120px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.brand-card.active{background:#fff}
.brand-card img{width:177px;max-width:88%;height:auto;object-fit:contain;filter:invert(1)}
.cb-nav{position:absolute;top:432px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-family:var(--f-head);z-index:3}
.cb-nav.left{left:193px;background:#262626;color:#b8b8b8}
.cb-nav.right{left:1563px;background:#262626;color:#b8b8b8}
.cb-dots{display:flex;gap:11px;justify-content:center;margin-top:44px}
.cb-dots span{width:9px;height:9px;border-radius:50%;background:#4a4a4a}
.cb-dots span.on{background:var(--gold)}

/* ---------- blogs ---------- */
.blogs{position:relative;width:100%;background:#000;padding:190px 0 142px}
.blog-grid{display:flex;gap:14px;margin-top:44px}
.blog-card{width:408px}
.blog-card>img{width:408px;height:321px;object-fit:cover;border-radius:12px;display:block}
.blog-date{display:flex;align-items:center;gap:8px;margin-top:30px;font-family:var(--f-body);font-size:15px;color:#9a9a9a}
.blog-title{margin-top:13px;font-family:var(--f-head);font-weight:500;font-size:28px;color:#fff}
.blog-ex{margin-top:16px;font-family:var(--f-body);font-weight:400;font-size:17px;line-height:1.5;color:#9a9a9a;max-width:378px}
.blog-more{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--f-head);font-weight:500;font-size:17px;letter-spacing:1px;color:#fff}
.blog-more i{font-size:14px}

/* ---------- newsletter ---------- */
.newsletter{position:relative;width:100%;height:445px;overflow:hidden;background:#000}
.nl-bg{position:absolute;inset:0;width:100%;height:445px}
.nl-cues{position:absolute;inset:0;width:100%;height:445px;object-fit:cover;z-index:1;pointer-events:none}
.nl-inner{position:relative;z-index:2;text-align:center;padding-top:80px}
.nl-inner h2{font-family:var(--f-head);font-weight:500;font-size:50px;color:#fff;text-transform:uppercase}
.nl-sub{margin-top:16px;font-family:var(--f-body);font-size:19px;color:#9a9a9a;max-width:1040px;margin-left:auto;margin-right:auto;line-height:1.55}
.nl-form{display:flex;align-items:center;width:992px;margin:32px auto 0;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:8px;padding:6px 6px 6px 22px}
.nl-form i.mail{color:#7a7a7a;font-size:16px;margin-right:13px}
.nl-form input{flex:1;background:none;border:none;outline:none;color:#ccc;font-family:var(--f-body);font-size:16px;padding:15px 0}
.nl-form input::placeholder{color:#7a7a7a}
.nl-submit{background:var(--grad-brand);color:#fff;font-family:var(--f-head);font-weight:600;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;padding:15px 36px;border-radius:6px}
.nl-social{display:flex;gap:16px;justify-content:center;margin-top:28px}
.nl-social a{width:44px;height:44px;border-radius:50%;border:1px solid #454545;display:flex;align-items:center;justify-content:center;color:#d5d5d5;font-size:15px}
.nl-social a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- trust badges ---------- */
.trust{width:100%;background:#000;padding:40px 0 0}
.trust-row{display:flex}
.trust-item{flex:1;display:flex;align-items:center;gap:16px}
.trust-item .ic{font-size:34px;background:var(--grad-brand-d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.trust-item .tt{font-family:var(--f-head);font-weight:600;font-size:20px;color:#fff}
.trust-item .ts{font-family:var(--f-body);font-size:14px;color:#9a9a9a;margin-top:5px}
.trust-divider{width:100%;height:1px;background:#242424;margin-top:40px}

/* ---------- footer ---------- */
.footer{width:100%;background:#000;padding:52px 0 34px}
.foot-cols{display:flex}
.fcol{padding:0 34px}
.fcol.logo{width:344px;padding-left:0}
.fcol.links{width:212px;border-left:1px solid #232323}
.fcol.contact{width:346px;border-left:1px solid #232323}
.fcol.news{flex:1;border-left:1px solid #232323}
.foot-logo{width:250px;height:auto;margin-bottom:22px}
.foot-social{display:flex;gap:13px}
.foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid #3a3a3a;display:flex;align-items:center;justify-content:center;color:#c5c5c5;font-size:14px}
.fh{font-family:var(--f-head);font-weight:600;font-size:20px;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:26px}
.fcol.links a{display:block;font-family:var(--f-body);font-size:16px;color:#b6b6b6;margin-bottom:19px}
.fcol.links a:hover{color:var(--gold)}
.fc-item{display:flex;gap:14px;margin-bottom:24px;font-family:var(--f-body);font-size:16px;color:#bdbdbd;line-height:1.5}
.fc-item i{color:#c9c9c9;font-size:16px;margin-top:3px}
.fc-item .lbl{font-weight:700;color:#fff}
.fc-item .phone{font-family:var(--f-body);font-weight:700;font-size:24px;color:#fff;margin-top:2px}
.fnews-sub{font-family:var(--f-body);font-size:16px;color:#b6b6b6;margin-bottom:18px}
.fnews-form{display:flex;align-items:center;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:7px;padding:5px 5px 5px 18px;margin-bottom:28px}
.fnews-form input{flex:1;background:none;border:none;outline:none;color:#ccc;font-family:var(--f-body);font-size:15px;padding:12px 0}
.fnews-form input::placeholder{color:#8a8a8a}
.fnews-form button{width:44px;height:40px;border-radius:6px;background:var(--grad-brand-d);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.foot-pay img{height:26px;width:auto}
.foot-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #232323;margin-top:40px;padding-top:30px;font-family:var(--f-body);font-size:15px;color:#9a9a9a}
.foot-bottom a{color:#c8c8c8}
.foot-chat{position:absolute;right:-4px;top:-12px;width:52px;height:52px;border-radius:50%;background:var(--grad-brand-d);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}

/* ---------- interactions / hover ---------- */
.pshop,.btn-green,.btn-gray,.btn-line,.catbtn,.hdf-btn,.hotdeal,.btn-grad,.nl-submit,.prod-nav,.cb-nav,.nl-form .nl-submit{cursor:pointer}
.pshop{transition:background .2s,border-color .2s,color .2s,filter .2s}
.pshop:hover,.pcardg:hover .pshop{background:var(--grad-brand);border-color:transparent;color:#fff}
.pcardg:hover .pheart{background:linear-gradient(135deg,#e8a651,#d5762f);color:#fff;border-color:transparent}
.btn-green,.btn-gray,.btn-line{transition:background .2s,border-color .2s,color .2s}
.btn-green:hover,.btn-gray:hover,.btn-line:hover{background:#e8712a;border-color:#e8712a;color:#fff}
.btn-grad,.hotdeal,.nl-submit,.hdf-btn{transition:filter .2s,transform .2s}
.btn-grad:hover,.hotdeal:hover,.nl-submit:hover{filter:brightness(1.12)}
.hotdeal:hover{transform:translateY(-1px)}
.hdf-btn:hover{filter:brightness(1.1)}
.menu a,.actions .ico,.foot-social a,.blog-more,.wi-more,.pheart,.fnews-form button{transition:.18s}
.actions .ico:hover{color:var(--gold)}
.foot-social a:hover{border-color:var(--gold);color:var(--gold)}
.blog-more:hover,.wi-more:hover{color:var(--gold)}
.pheart:hover{color:#e8712a}
.fnews-form button:hover{filter:brightness(1.12)}
/* carousels */
.prod-nav,.cb-nav{transition:background .18s,transform .18s}
.prod-nav:hover,.sc-nav:hover{background:var(--grad-brand);color:#fff;transform:scale(1.07)}
.cb-nav:hover{background:#e8712a;color:#fff;transform:scale(1.07)}
.brand-card{transition:background .2s,transform .2s,box-shadow .2s}
.brand-card:hover{background:#fff;transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.prod-grid,.brand-row{transition:opacity .15s ease}

/* ---------- responsive scale-to-fit (pixel-perfect at 1800px design width) ----------
   fitStage (main.js + the inline first-paint copy in header.php) zooms div.page
   to viewport/1800 in BOTH directions above 1024px, so the canvas always fills
   the window edge-to-edge (2026-09-07: it used to cap at 1 and leave black
   bands + hard-cut hero art on anything wider than 1800). */
.stage{position:relative;width:100%;overflow-x:clip;background:#000}

/* ---------- shop by color ---------- */
.shopcolor{width:100%;background:#000;padding:60px 0 54px}
.sc-row{position:relative;margin-top:42px}
.sc-row .prod-grid{margin-top:0}
.sc-nav{position:absolute;top:120px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-family:var(--f-head);z-index:3;cursor:pointer;transition:background .18s,transform .18s}
.sc-nav.left{left:-78px;background:#262626;color:#b8b8b8}
.sc-nav.right{right:-78px;background:#262626;color:#b8b8b8}

/* ---------- production header/footer visual parity (2026-08-25) ----------
   Measured from live quarterkingbilliards.com computed styles:
   bars pure #000, call bar 52px/17px, nav 76px, menu Oswald 14px/500,
   oversized gradient logo (288x113) overlapping both header rows,
   footer subscribe band Oswald 50px, quick links Roboto 17px #49a0da. */
.announce{background:#000;height:52px}
.brandline{background:#000}
.nav{background:#000;height:76px}
.menu{font-size:14px}
@media(min-width:1025px){
	.nav .container{position:relative}
	.brand-logo{height:104px;margin:-15px 0;position:relative;z-index:20}
}
.subscribe-band{background:#000;padding:56px 0 42px;text-align:center}
.subscribe-band h2{font-family:var(--f-head);font-weight:500;font-size:50px;color:#fff;margin:0 0 14px;letter-spacing:.5px}
.subscribe-band p{font-family:var(--f-body);color:#b9b9b9;font-size:17px;max-width:840px;margin:0 auto 26px;line-height:1.65}
.subscribe-band .mailpoet_form,.subscribe-band form{max-width:540px;margin:0 auto}
.subscribe-band .foot-social{display:flex;justify-content:center;gap:20px;margin-top:26px}
.subscribe-band .foot-social a{color:#fff;font-size:18px}
.fcol.links a{color:#49a0da;font-family:var(--f-body);font-size:17px}
@media(max-width:700px){.subscribe-band h2{font-size:32px}.subscribe-band{padding:36px 0 28px}}

/* ---------- shop-by-color rebuild (single strip, in-place swap) ---------- */
.sc-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:20px 0 10px}
.sc-strip .sc-sw{width:36px;height:36px;border-radius:50%;background:var(--c);border:2px solid #2c2c2c;cursor:pointer;display:inline-block;transition:transform .15s,box-shadow .15s,border-color .15s}
.sc-strip .sc-sw:hover{transform:scale(1.15)}
.sc-strip .sc-sw.active{border-color:#fff;box-shadow:0 0 0 3px #49a0da}
.sc-strip .sc-sw.light{border-color:#565656}
.sc-strip .sc-sw.rainbow{background:conic-gradient(#ef4444,#f97316,#e8c33a,#159d64,#2f7fd0,#a855f7,#ef4444)}
.sc-strip .sc-sw.all{background:#141414;border:2px solid transparent;background-image:linear-gradient(#141414,#141414),linear-gradient(135deg,#f97316,#ec4899,#a855f7);background-origin:border-box;background-clip:content-box,border-box}
.sc-rowhead{font-family:var(--f-head);font-weight:500;font-size:19px;letter-spacing:1px;text-transform:uppercase;color:#e8e8e8;margin:26px 0 12px}
.sc-row{position:relative}
.sc-row.loading .prod-grid{opacity:.35;pointer-events:none;transition:opacity .15s}
.sc-empty{color:#9a9a9a;font-size:16px;padding:26px 4px}
/* nav buttons: true vertical centering (were pinned at a fixed offset) */
.sc-nav{top:50%;transform:translateY(-50%)}
.sc-nav:hover{transform:translateY(-50%) scale(1.07)}

/* ---------- one width contract (2026-08-26) ----------
   div.page IS the canvas (1800px, scaled to fit by fitStage). Every section
   derives from it with width:100% instead of repeating the magic number, and
   the header bars get the same contract so they can never stretch to fit
   overflowing page content while the footer stays pinned — which is why the
   header looked different on category pages than on the homepage. */
.announce,.brandline,.nav{width:100%}
.announce .container,.nav .container{max-width:var(--content)}

/* ---------- homepage rows cleanup (2026-09-06) ----------
   Swatch strip centered under the heading; product rows are contained
   scrollers (exactly 5 cards per view) with small header arrows + "View all"
   instead of floating circles over the cards. */
.shopcolor .sc-strip{justify-content:center;gap:16px;margin:30px auto 6px;max-width:900px}
.shopcolor .sc-strip .sc-sw{width:40px;height:40px;border-width:2px}
.shopcolor .sc-strip .sc-sw.active{border-color:#fff;box-shadow:0 0 0 3px var(--gold)}
.sc-rowhead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:36px 0 16px;padding-bottom:12px;border-bottom:1px solid #1e1e1e}
.sc-rowlabel{font-family:var(--f-head);font-weight:500;font-size:19px;letter-spacing:1.5px;text-transform:uppercase;color:#e8e8e8}
.np-rowhead{margin-top:34px}
.row-tools{display:flex;align-items:center;gap:10px}
.row-all{font-family:var(--f-body);font-size:14.5px;color:#bdbdbd;margin-right:10px;display:inline-flex;align-items:center;gap:8px;transition:color .18s}
.row-all i{font-size:11px;color:var(--gold)}
.row-all:hover{color:#fff}
.row-arrow{width:40px;height:40px;border:1px solid #2e2e2e;border-radius:8px;background:#0d0d0d;color:#e6e6e6;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;padding:0;transition:border-color .18s,color .18s,background .18s}
.row-arrow:hover{border-color:var(--gold);color:var(--gold)}
.row-arrow[disabled]{opacity:.35;cursor:default;border-color:#2e2e2e;color:#e6e6e6}
.row-arrow .flip{display:inline-block;transform:scaleX(-1)}
.sc-row{margin-top:0}
.qk-scroller{display:flex;gap:18px;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:0;padding:4px 0 10px}
.qk-scroller::-webkit-scrollbar{display:none}
.qk-scroller>*{flex:0 0 auto;scroll-snap-align:start}
.qk-scroller>.pcardg{width:calc((100% - 72px) / 5)}
.sc-nav,.newproduct .prod-nav{display:none !important}
.newproduct{padding-bottom:40px}

/* ---------- grey glow texture on the plain-black home sections (2026-09-06) ----------
   Production puts a soft grainy grey glow (uploads/2023/10/Layer-89-*.png) behind
   "Used Pool Cues" (right edge, natural size) and "Monthly hot deals" (right edge,
   contain). Corey: the bare-black sections on the new home read "splatter shot"
   without it. Same asset, alternating right/left so the eye flows down the page;
   the pseudo-element sits under the content and never catches clicks. */
.shopcolor,.newproduct,.categories,.hotdeals,.blogs{position:relative;overflow:hidden}
.shopcolor>*,.newproduct>*,.categories>*,.hotdeals>*,.blogs>*{position:relative;z-index:1}
.shopcolor::before,.newproduct::before,.categories::before,.hotdeals::before,.blogs::before{content:"";position:absolute;top:0;bottom:0;width:62%;max-width:1117px;pointer-events:none;z-index:0;background:url(../img/tex-glow.png) no-repeat;background-size:auto 100%}
.shopcolor::before,.categories::before,.hotdeals::before{right:0;background-position:right center}
.newproduct::before,.blogs::before{left:0;background-position:right center;transform:scaleX(-1)}
.newproduct::before{opacity:.85}
@media (max-width:700px){.shopcolor::before,.newproduct::before,.categories::before,.hotdeals::before,.blogs::before{width:90%;opacity:.7}}