/*
Theme Name: CJ Flight Design
Theme URI: https://www.cjflightdesign.co.uk/
Author: Weightman Digital
Description: Bespoke theme for CJ Flight Design, custom laser engraved dart flights, shafts and cases. Palette sampled from the client's own logo.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: cjflight
*/

/* ============================================================
   Palette taken from the client's own logo PNG and product
   photography. Brand red #EC1D25 is sampled, not eyeballed.
   ============================================================ */
:root{
  --oche:      #0A0A0B;
  --carbon:    #16171A;
  --carbon-hi: #1E2024;
  --wire:      #2A2C31;
  --smoke:     #8A9096;
  --chalk:     #F2F0EB;
  --chalk-dim: #C9C6BE;
  --treble:    #EC1D25;
  --treble-dk: #B4131A;

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --util: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --wrap: 1280px;
  --gut: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--oche); color:var(--chalk);
  font-family:var(--body); font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--treble); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:100; background:var(--treble); color:#fff; padding:11px 18px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:820px; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:400; text-transform:uppercase; margin:0; line-height:.95; letter-spacing:.01em; text-wrap:balance; }
h1{ font-size:clamp(42px,6.4vw,84px); }
h2{ font-size:clamp(32px,4.3vw,58px); }
h3{ font-size:clamp(19px,1.5vw,23px); line-height:1.05; }
h4{ font-size:clamp(17px,1.2vw,20px); }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--util); text-transform:uppercase; letter-spacing:.26em;
  font-weight:600; font-size:13px; color:var(--treble); margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--wire); }
.eyebrow.solo::after{ display:none; }
.lede{ font-size:clamp(17px,1.35vw,21px); color:var(--chalk-dim); line-height:1.6; }
/* headings sit on a .95 line-height, so anything following one needs its own space */
h1 + .lede, h2 + .lede, h2 + p, h3 + p, h4 + p{ margin-top:18px; }

.vitrine{ position:relative; isolation:isolate; }
.vitrine::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 78% at 50% 0%, rgba(190,205,220,.11), transparent 68%);
}
section{ padding:clamp(64px,8vw,118px) 0; position:relative; }
.hr-top{ border-top:1px solid var(--wire); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--util); text-transform:uppercase; letter-spacing:.13em;
  font-weight:700; font-size:16px; line-height:1;
  padding:17px 30px; border-radius:2px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--treble); color:#fff; }
.btn-primary:hover{ background:var(--treble-dk); }
.btn-ghost{ border-color:var(--wire); color:var(--chalk); background:transparent; }
.btn-ghost:hover{ border-color:var(--smoke); background:rgba(255,255,255,.04); }

/* ---- header ---- */
.site-head{
  position:sticky; top:0; z-index:60; background:rgba(10,10,11,.9);
  backdrop-filter:blur(11px); border-bottom:1px solid var(--wire);
}
.head-in{ display:flex; align-items:center; gap:clamp(16px,3vw,42px); height:76px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.brand img{ width:46px; height:46px; border-radius:3px; }
.brand-txt b{ display:block; color:var(--chalk); font-family:var(--display); text-transform:uppercase; font-size:19px; letter-spacing:.02em; line-height:1; font-weight:400; }
.brand-txt span{ display:block; font-family:var(--util); font-size:10.5px; letter-spacing:.24em; color:var(--smoke); text-transform:uppercase; margin-top:3px; }
.nav{ display:flex; gap:clamp(14px,1.8vw,30px); margin-left:auto; list-style:none; margin-block:0; padding:0; }
.nav a{
  font-family:var(--util); text-transform:uppercase; letter-spacing:.13em;
  font-size:14.5px; font-weight:600; text-decoration:none; color:var(--chalk-dim);
  padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; display:block; white-space:nowrap;
}
.nav a:hover, .nav .current-menu-item > a{ color:var(--chalk); border-color:var(--treble); }
.head-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; margin-left:auto; }
.nav + .head-cta{ margin-left:0; }
.head-tel{ font-family:var(--util); font-size:16px; letter-spacing:.06em; font-weight:600; text-decoration:none; white-space:nowrap; }
.head-tel:hover{ color:var(--treble); }
.menu-btn{ display:none; background:none; border:1px solid var(--wire); border-radius:3px; width:46px; height:44px; padding:0 11px; cursor:pointer; flex-shrink:0; }
.menu-btn span{ display:block; height:2px; background:var(--chalk); margin:5px 0; transition:transform .2s, opacity .2s; }
.site-head.open .menu-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-head.open .menu-btn span:nth-child(2){ opacity:0; }
.site-head.open .menu-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(max-width:1200px){
  .nav{ display:none; }
  .menu-btn{ display:block; order:3; }
  .site-head.open .nav{
    display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:100%;
    background:rgba(10,10,11,.97); border-bottom:1px solid var(--wire); padding:8px clamp(20px,5vw,40px) 18px;
  }
  .site-head.open .nav a{ padding:14px 0; font-size:16px; border-bottom:1px solid var(--wire); }
}
@media(max-width:640px){
  .head-tel{ display:none; }
  .head-in{ height:66px; gap:10px; }
  .brand img{ width:38px; height:38px; }
  .brand-txt b{ font-size:16px; white-space:nowrap; }
  .brand-txt span{ font-size:9px; letter-spacing:.15em; }
  .head-cta .btn{ padding:12px 15px; font-size:13.5px; letter-spacing:.09em; white-space:nowrap; }
}
@media(max-width:400px){ .brand-txt{ display:none; } }

/* ---- hero ---- */
.hero{ padding:0; border-bottom:1px solid var(--wire); }
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; align-items:stretch; min-height:min(84vh,780px); }
.hero-text{ display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,6vw,96px) clamp(28px,4vw,72px) clamp(48px,6vw,96px) var(--gut); }
.hero-text .lede{ max-width:46ch; }
.hero h1 span{ color:var(--treble); display:block; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
.hero-media{ position:relative; background:#000; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--oche) 0%, rgba(10,10,11,.42) 22%, transparent 55%); }
.hero-tag{
  position:absolute; left:0; bottom:24px; z-index:2; margin:0;
  background:rgba(10,10,11,.82); backdrop-filter:blur(6px);
  border-left:3px solid var(--treble); padding:11px 20px;
  font-family:var(--util); font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-dim);
}
@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr; min-height:0; }
  .hero-media{ order:-1; aspect-ratio:4/3; }
  .hero-media::after{ background:linear-gradient(0deg, var(--oche) 0%, transparent 46%); }
  .hero-text{ padding:clamp(34px,7vw,56px) var(--gut); }
}

/* ---- page banner ---- */
.banner{ padding:clamp(52px,6vw,92px) 0 clamp(40px,4.5vw,64px); border-bottom:1px solid var(--wire); }
.banner .lede{ max-width:62ch; }

/* ---- figures ---- */
.figures{ border-bottom:1px solid var(--wire); padding:0; background:var(--carbon); }
.figures-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.fig{ padding:clamp(26px,3vw,40px) clamp(18px,2vw,30px); border-right:1px solid var(--wire); }
.fig:last-child{ border-right:0; }
.fig b{ display:block; font-family:var(--display); font-size:clamp(30px,3.3vw,44px); line-height:1; font-weight:400; }
.fig span{ display:block; font-family:var(--util); text-transform:uppercase; letter-spacing:.17em; font-size:12.5px; color:var(--smoke); margin-top:10px; }
@media(max-width:520px){ .fig span{ letter-spacing:.1em; font-size:11.5px; } }

.sec-head{ max-width:60ch; margin-bottom:clamp(34px,4vw,58px); }
.sec-head .lede{ margin-top:18px; }

/* ---- cards ---- */
.range{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(14px,1.6vw,22px); }
.card{
  background:var(--carbon); border:1px solid var(--wire); border-radius:3px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover{ border-color:#3A3D44; transform:translateY(-4px); background:var(--carbon-hi); }
.card-img{ aspect-ratio:4/3; background:#000; overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-img img{ transform:scale(1.045); }
.card-body{ padding:24px 24px 28px; flex:1; display:flex; flex-direction:column; }
.card-body h3{ margin-bottom:11px; }
.card-body p{ color:var(--chalk-dim); font-size:15.5px; line-height:1.6; }
.card-tag{ font-family:var(--util); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--treble); margin-bottom:13px; }

/* ---- split ---- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,72px); align-items:center; }
.split.flip .split-media{ order:2; }
.split-media{ position:relative; border:1px solid var(--wire); border-radius:3px; overflow:hidden; background:#000; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; } .split.flip .split-media{ order:0; } }

/* ---- steps ---- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); counter-reset:step; }
.step{ position:relative; padding-top:26px; border-top:1px solid var(--wire); counter-increment:step; }
.step::before{
  content:counter(step,decimal-leading-zero); position:absolute; top:-1px; left:0;
  font-family:var(--display); font-size:13px; letter-spacing:.1em;
  color:var(--oche); background:var(--treble); padding:5px 10px 4px; line-height:1;
}
.step h3{ font-size:clamp(17px,1.25vw,20px); margin:16px 0 10px; }
.step p{ color:var(--chalk-dim); font-size:15.5px; }
@media(max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ---- brands ---- */
.brands{ border-block:1px solid var(--wire); background:var(--carbon); padding:clamp(30px,3.6vw,48px) 0; }
.brands-in{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(18px,3.4vw,52px); }
.brands span{ font-family:var(--display); text-transform:uppercase; font-size:clamp(20px,2.4vw,32px); color:#43474E; letter-spacing:.03em; transition:color .2s; }
.brands span:hover{ color:var(--chalk); }
.brands em{ font-family:var(--util); font-style:normal; font-size:14px; letter-spacing:.17em; text-transform:uppercase; color:var(--smoke); }

/* ---- light section ---- */

/* ---- placeholder flag for anything the client still has to supply ---- */
.tbc{
  display:inline-block; font-family:var(--util); font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; background:var(--treble); color:#fff;
  padding:3px 9px; border-radius:2px; vertical-align:middle; margin-left:9px;
}

/* ---- faq ---- */
.faq{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,4vw,64px); }
details{ border-bottom:1px solid var(--wire); padding:5px 0; }
summary{ cursor:pointer; list-style:none; padding:19px 34px 19px 0; position:relative; font-family:var(--body); font-weight:600; font-size:17px; line-height:1.4; }
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-family:var(--body); font-weight:400; font-size:30px; color:var(--treble); line-height:1; transition:transform .2s ease;
}
details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
details p{ color:var(--chalk-dim); font-size:15.5px; padding:0 34px 20px 0; margin:0; }
@media(max-width:820px){ .faq{ grid-template-columns:1fr; } }

/* ---- contact ---- */
.order{ background:var(--carbon); border-top:1px solid var(--wire); }
.order-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4.5vw,70px); }
.contact-line{ display:flex; gap:14px; align-items:flex-start; padding:19px 0; border-bottom:1px solid var(--wire); text-decoration:none; }
.contact-line:first-of-type{ border-top:1px solid var(--wire); }
.contact-line .ic{ width:20px; height:20px; flex-shrink:0; margin-top:3px; color:var(--treble); }
.contact-line .k{ font-family:var(--util); text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--smoke); display:block; }
.contact-line .v{ font-weight:600; font-size:17px; }
.contact-line:hover .v{ color:var(--treble); }
form{ display:grid; gap:15px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
label{ font-family:var(--util); text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--smoke); display:block; margin-bottom:7px; }
input,select,textarea{
  width:100%; background:var(--oche); border:1px solid var(--wire); color:var(--chalk);
  padding:13px 15px; font-family:var(--body); font-size:16px; border-radius:2px;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--treble); }
textarea{ resize:vertical; min-height:112px; }
.f-note{ font-size:13.5px; color:var(--smoke); line-height:1.55; }
@media(max-width:860px){ .order-grid{ grid-template-columns:1fr; } .f-row{ grid-template-columns:1fr; } }

/* ---- blog ---- */
.page-photo{ max-width:760px; margin:0 auto clamp(30px,4vw,48px); aspect-ratio:4/3; border:1px solid var(--wire); border-radius:3px; overflow:hidden; background:#000; }
.page-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ---- gallery ---- */
.gal-head{ padding-bottom:clamp(30px,3.5vw,48px); }
.gal{ padding-top:clamp(26px,3vw,40px); }
.gal-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,2.4vw,30px); }
.gal-filters button{
  font-family:var(--util); text-transform:uppercase; letter-spacing:.12em; font-size:13.5px; font-weight:600;
  color:var(--chalk-dim); background:transparent; border:1px solid var(--wire); border-radius:999px;
  padding:9px 16px; cursor:pointer; transition:color .15s, border-color .15s, background .15s;
}
.gal-filters button span{ color:var(--smoke); margin-left:4px; font-weight:500; }
.gal-filters button:hover{ color:var(--chalk); border-color:var(--smoke); }
.gal-filters button.on{ background:var(--treble); border-color:var(--treble); color:#fff; }
.gal-filters button.on span{ color:rgba(255,255,255,.75); }
.thumbs{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.thumb{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:4px; background:#000; border:1px solid var(--wire); transition:border-color .2s, transform .25s; }
.thumb[hidden]{ display:none; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .3s; filter:brightness(.88); }
.thumb:hover, .thumb:focus-visible{ border-color:var(--treble); transform:translateY(-2px); }
.thumb:hover img, .thumb:focus-visible img{ transform:scale(1.07); filter:none; }
.thumb:focus-visible{ outline:2px solid var(--treble); outline-offset:2px; }
.thumb.in{ animation:tileIn .4s ease both; }
@keyframes tileIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@media(max-width:1100px){ .thumbs{ grid-template-columns:repeat(5,1fr); } }
@media(max-width:760px){ .thumbs{ grid-template-columns:repeat(4,1fr); gap:8px; } }
@media(max-width:600px){
  .thumbs{ grid-template-columns:repeat(3,1fr); gap:6px; }
  .gal-filters{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); scrollbar-width:none; }
  .gal-filters::-webkit-scrollbar{ display:none; }
  .gal-filters button{ flex-shrink:0; }
}
.lb{ position:fixed; inset:0; z-index:100; background:rgba(6,6,7,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center; padding:70px 90px 40px; }
.lb[hidden]{ display:none; }
.lb-top{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:14px 18px 0 24px; }
.lb-count{ font-family:var(--util); letter-spacing:.2em; font-size:13px; color:var(--smoke); }
.lb figure{ margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:100%; max-height:100%; }
.lb img{ max-width:100%; max-height:calc(100vh - 190px); object-fit:contain; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.6); opacity:0; transform:scale(.985); transition:opacity .3s, transform .3s; }
.lb img.ready{ opacity:1; transform:none; }
.lb figcaption{ margin-top:18px; text-align:center; }
.lb figcaption em{ display:block; font-style:normal; font-family:var(--util); text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--treble); font-weight:600; }
.lb figcaption b{ display:block; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(22px,2.4vw,30px); color:var(--chalk); margin-top:4px; }
.lb button{ background:none; border:0; color:var(--chalk); cursor:pointer; }
.lb-x{ font-size:40px; line-height:1; padding:4px 8px; }
.lb-x:hover{ color:var(--treble); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:1px solid rgba(242,240,235,.18)!important; display:grid; place-items:center; transition:background .2s, border-color .2s; }
.lb-nav:hover{ background:var(--treble); border-color:var(--treble)!important; }
.lb-nav svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; }
.lb-prev{ left:22px; } .lb-next{ right:22px; }
@media(max-width:640px){
  .lb{ padding:60px 10px 96px; }
  .lb img{ max-height:calc(100vh - 230px); }
  .lb-nav{ top:auto; bottom:22px; transform:none; width:50px; height:50px; }
  .lb-prev{ left:calc(50% - 64px); } .lb-next{ right:calc(50% - 64px); }
}
.posts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(18px,2.2vw,30px); }
.post-card{
  background:var(--carbon); border:1px solid var(--wire); border-radius:3px;
  padding:clamp(24px,2.4vw,34px); display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.post-card:hover{ border-color:#3A3D44; transform:translateY(-4px); background:var(--carbon-hi); }
.post-meta{ font-family:var(--util); text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--treble); margin-bottom:14px; }
.post-card h2{ font-size:clamp(22px,1.9vw,28px); line-height:1.06; }
.post-card p{ color:var(--chalk-dim); font-size:15.5px; margin:16px 0 22px; }
.post-card .more{ margin-top:auto; font-family:var(--util); text-transform:uppercase; letter-spacing:.14em; font-size:14px; font-weight:700; color:var(--chalk); text-decoration:none; }
.post-card .more:hover{ color:var(--treble); }

.entry{ max-width:760px; margin:0 auto; }
.entry p, .entry ul, .entry ol{ font-size:17.5px; line-height:1.72; color:var(--chalk-dim); }
.entry h2{ font-size:clamp(26px,2.7vw,38px); margin:2em 0 0; }
.entry h3{ font-size:clamp(19px,1.6vw,24px); margin:1.8em 0 0; }
.entry h2 + p, .entry h3 + p{ margin-top:16px; }
.entry ul, .entry ol{ padding-left:1.3em; margin:0 0 1.05em; }
.entry li{ margin-bottom:.5em; }
.entry strong{ color:var(--chalk); }
.entry a{ color:var(--treble); text-underline-offset:3px; }
.entry blockquote{ border-left:3px solid var(--treble); margin:2em 0; padding:4px 0 4px 24px; }
.entry blockquote p{ color:var(--chalk); font-size:20px; }

.pager{ display:flex; gap:14px; justify-content:center; margin-top:clamp(40px,4vw,64px); }
.pager a, .pager span{
  font-family:var(--util); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:14px;
  padding:12px 18px; border:1px solid var(--wire); border-radius:2px; text-decoration:none;
}
.pager .current{ background:var(--treble); border-color:var(--treble); color:#fff; }

/* ---- footer ---- */
.site-foot{ border-top:1px solid var(--wire); padding:clamp(44px,5vw,64px) 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(26px,4vw,56px); }
.foot-grid h4{ font-family:var(--util); text-transform:uppercase; letter-spacing:.19em; font-size:13px; color:var(--chalk); margin:0 0 16px; font-weight:700; }
.foot-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot-links a{ text-decoration:none; color:var(--chalk-dim); font-size:15.5px; }
.foot-links a:hover{ color:var(--treble); }
.foot-brand img{ width:96px; border-radius:3px; margin-bottom:18px; }
.foot-brand p{ color:var(--smoke); font-size:15px; max-width:38ch; }
.foot-bar{ margin-top:clamp(34px,4vw,52px); padding-top:22px; border-top:1px solid var(--wire); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13.5px; color:var(--smoke); }
.socials{ display:flex; gap:11px; margin-top:20px; }
.socials a{ width:40px; height:40px; border:1px solid var(--wire); border-radius:3px; display:grid; place-items:center; color:var(--chalk-dim); transition:all .18s; }
.socials a:hover{ border-color:var(--treble); color:var(--treble); }
.socials svg{ width:18px; height:18px; }
@media(max-width:760px){ .foot-grid{ grid-template-columns:1fr; } }

@media(prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ============================================================
   Shop (WooCommerce), in the site's own dark look
   ============================================================ */
.shop{ padding-top:clamp(36px,4vw,60px); }
.woocommerce-store-notice, p.demo_store{ background:var(--treble); }
.woocommerce .woocommerce-notices-wrapper:empty{ display:none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments{
  background:var(--carbon)!important; color:var(--chalk)!important; border:1px solid var(--wire)!important;
  border-top:3px solid var(--treble)!important; border-radius:3px; list-style:none; padding:16px 20px 16px 52px!important; margin:0 0 26px!important;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ color:var(--treble)!important; }
.woocommerce-message a.button, .woocommerce-info a.button{ float:right; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #payment #place_order{
  background:var(--treble)!important; color:#fff!important; border:0; border-radius:2px;
  font-family:var(--util); text-transform:uppercase; letter-spacing:.13em; font-weight:700; font-size:15px;
  padding:15px 26px; line-height:1; transition:background .16s, transform .16s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce #payment #place_order:hover{ background:var(--treble-dk)!important; transform:translateY(-2px); }
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled]{ opacity:.5; padding:15px 26px; }

/* product grid */
.woocommerce ul.products{ display:grid!important; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); margin:0!important; }
.woocommerce ul.products::before, .woocommerce ul.products::after{ display:none!important; }
.woocommerce ul.products li.product{
  width:auto!important; margin:0!important; float:none!important; background:var(--carbon); border:1px solid var(--wire); border-radius:3px;
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s, background .2s;
}
.woocommerce ul.products li.product:hover{ border-color:#3A3D44; transform:translateY(-4px); background:var(--carbon-hi); }
.woocommerce ul.products li.product a img{ margin:0!important; aspect-ratio:1/1; object-fit:cover; background:#000; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display)!important; font-weight:400; text-transform:uppercase; font-size:clamp(20px,1.6vw,24px)!important;
  line-height:1.05; padding:22px 22px 0!important; color:var(--chalk);
}
.woocommerce ul.products li.product .price{ color:var(--chalk)!important; font-family:var(--util); font-weight:700; font-size:20px!important; letter-spacing:.04em; padding:8px 22px 0; margin:0!important; }
.woocommerce ul.products li.product .price::after{ content:" a set of three"; font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{ text-decoration:none; color:inherit; }
.woocommerce ul.products li.product .button{ margin:18px 22px 24px!important; align-self:flex-start; }
@media(max-width:900px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){
  .woocommerce ul.products{ gap:10px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:17px!important; padding:14px 12px 0!important; }
  .woocommerce ul.products li.product .price{ font-size:17px!important; padding:6px 12px 0; }
  .woocommerce ul.products li.product .price::after{ content:" / set of 3"; font-size:11px; letter-spacing:.08em; }
  .woocommerce ul.products li.product .button{ margin:12px 12px 14px!important; padding:12px 16px; font-size:13px; }
}

/* single product */
.woocommerce div.product{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,70px); align-items:start; }
.woocommerce div.product div.images, .woocommerce div.product div.summary{ width:auto!important; float:none!important; margin:0!important; }
.woocommerce div.product div.images img{ border:1px solid var(--wire); border-radius:3px; background:#000; }
.woocommerce div.product div.images .flex-control-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px!important; }
.woocommerce div.product div.images .flex-control-thumbs li{ width:auto!important; float:none!important; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{ background:var(--chalk); }
.woocommerce div.product .product_title{ font-size:clamp(36px,4.2vw,58px); margin-bottom:14px; }
.woocommerce div.product p.price{ color:var(--chalk)!important; font-family:var(--util); font-weight:700; font-size:28px!important; letter-spacing:.03em; margin:0 0 18px; }
.woocommerce div.product p.price::after{ content:" a set of three"; font-weight:500; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); }
.woocommerce div.product .woocommerce-product-details__short-description{ color:var(--chalk-dim); margin-bottom:24px; }
.woocommerce div.product form.cart{ display:block; margin:0!important; }
.woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after{ display:none; }
.cjf-fields{ display:grid; gap:16px; margin-bottom:22px; padding:22px; background:var(--carbon); border:1px solid var(--wire); border-radius:3px; }
.cjf-fields label em{ font-style:normal; color:var(--treble); margin-left:6px; letter-spacing:.12em; }
.cjf-fields textarea{ min-height:96px; }
.cjf-fields input[type=file]{ padding:11px; font-size:14.5px; color:var(--chalk-dim); }
.cjf-fields input[type=file]::file-selector-button{ background:var(--wire); color:var(--chalk); border:0; border-radius:2px; padding:8px 14px; margin-right:12px; font-family:var(--util); text-transform:uppercase; letter-spacing:.12em; font-weight:600; cursor:pointer; }
.cjf-fields .f-note{ margin:8px 0 0; }
.cjf-pills{ border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; min-width:0; }
.cjf-pills legend{ padding:0; margin-bottom:10px; font-family:var(--util); text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--smoke); }
.cjf-pills legend em{ font-style:normal; color:var(--treble); margin-left:6px; letter-spacing:.12em; }
.cjf-pills label{ position:relative; cursor:pointer; margin:0; font-family:var(--body); text-transform:none; letter-spacing:0; font-size:15px; }
.cjf-pills input{ position:absolute; opacity:0; width:1px; height:1px; }
.cjf-pills span{ display:inline-block; min-width:64px; text-align:center; padding:10px 20px; border:1px solid var(--wire); border-radius:999px; color:var(--chalk-dim); transition:border-color .15s, background .15s, color .15s; }
.cjf-pills label:hover span{ border-color:var(--smoke); color:var(--chalk); }
.cjf-pills input:checked + span{ background:var(--chalk); border-color:var(--chalk); color:var(--oche); font-weight:600; }
.cjf-pills input:focus-visible + span{ outline:2px solid var(--treble); outline-offset:2px; }
.cjf-proof{ color:var(--chalk-dim)!important; border-top:1px solid var(--wire); padding-top:14px; margin:0!important; }
.woocommerce div.product form.cart .quantity{ float:none!important; display:inline-block; margin:0 10px 0 0!important; vertical-align:middle; }
.woocommerce div.product form.cart .button{ float:none!important; vertical-align:middle; }
.woocommerce .quantity .qty{ width:76px; padding:13px 8px; text-align:center; }
.woocommerce div.product .woocommerce-tabs{ grid-column:1 / -1; margin-top:clamp(20px,3vw,40px); }
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0!important; margin:0 0 24px!important; border-bottom:1px solid var(--wire); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:none!important; border:0!important; border-radius:0!important; margin:0!important; padding:0!important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none!important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-family:var(--util); text-transform:uppercase; letter-spacing:.16em; font-size:14px; color:var(--chalk)!important; padding:12px 0!important; border-bottom:2px solid var(--treble); }
.woocommerce div.product .woocommerce-tabs .panel{ max-width:760px; color:var(--chalk-dim); }
.woocommerce div.product .woocommerce-tabs .panel h2{ display:none; }
@media(max-width:860px){ .woocommerce div.product{ grid-template-columns:1fr; } }

/* basket and checkout */
.woocommerce table.shop_table{ border:1px solid var(--wire)!important; border-radius:3px; border-collapse:separate; background:var(--carbon); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td{ border-color:var(--wire)!important; color:var(--chalk); padding:14px 16px!important; }
.woocommerce table.shop_table th{ font-family:var(--util); text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--smoke); }
.woocommerce table.shop_table td.product-name a{ color:var(--chalk); font-weight:600; text-decoration:none; }
.woocommerce table.shop_table img{ width:72px!important; border-radius:2px; }
.woocommerce td.product-name dl.variation{ font-size:14px; color:var(--chalk-dim); margin-top:8px; }
.woocommerce td.product-name dl.variation dt{ font-family:var(--util); text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--smoke); }
.woocommerce a.remove{ color:var(--treble)!important; }
.woocommerce a.remove:hover{ background:var(--treble)!important; color:#fff!important; }
.woocommerce .cart-collaterals .cart_totals h2, .woocommerce-checkout h3, #order_review_heading{ font-size:clamp(24px,2.3vw,32px); margin:0 0 16px; }
.woocommerce form .form-row label{ line-height:1.4; }
.woocommerce form .form-row .required{ color:var(--treble); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.select2-container--default .select2-selection--single{ background:var(--oche)!important; border:1px solid var(--wire)!important; color:var(--chalk)!important; border-radius:2px!important; }
.select2-container--default .select2-selection--single{ height:50px!important; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--chalk)!important; line-height:48px!important; padding-left:14px; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:48px!important; }
.select2-dropdown{ background:var(--carbon)!important; border-color:var(--wire)!important; color:var(--chalk); }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected]{ background:var(--treble)!important; }
.woocommerce form .form-row{ margin:0 0 14px; }
.woocommerce-checkout #payment{ background:var(--carbon)!important; border:1px solid var(--wire); border-radius:3px; }
.woocommerce-checkout #payment ul.payment_methods{ border-color:var(--wire)!important; }
.woocommerce-checkout #payment div.payment_box{ background:var(--carbon-hi)!important; color:var(--chalk-dim)!important; }
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:var(--carbon-hi)!important; }
.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper{ color:var(--smoke); font-size:14px; }
.woocommerce ul#shipping_method li label{ color:var(--chalk); }
.woocommerce-order-details, .woocommerce-customer-details{ margin-top:30px; }
.woocommerce ul.order_details{ padding:0; }
.woocommerce ul.order_details li{ border-color:var(--wire)!important; color:var(--smoke); }
.woocommerce ul.order_details li strong{ color:var(--chalk); }
@media(max-width:768px){
  .woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td{ background:transparent!important; }
  .woocommerce table.shop_table_responsive tr:nth-child(2n) td{ background:transparent!important; }
}
.shop-other .btn{ margin-top:4px; }