/* ===========================================================================
   GoodLyf Barbers, shared design system
   Street-art barbershop. Ink + white + one brand red (sampled from their capes).
   Owned by the marketing build; consumed by book.html + admin.html too.
   =========================================================================== */

:root{
  /* palette (sampled from their real assets) */
  --ink:#0e0e11;
  --ink-2:#151519;
  --ink-3:#1d1d22;
  --line:#2a2a30;
  --white:#ffffff;
  --paper:#f4f3f1;
  --muted:#9a9aa1;
  --muted-2:#c7c7cd;
  --red:#e4152b;
  --red-2:#c11020;
  --red-ink:#ff2d40;      /* red for use on dark only, larger */
  --ok:#1f9d55;
  --warn:#e0a412;
  /* drop accents, sampled from the clothing itself. Product-scoped only:
     swatches, drop moments, product imagery. Never sitewide chrome. */
  --drop-blue:#1f86c0;
  --drop-pink:#ff2d7a;
  --drop-sand:#b08a48;

  /* type */
  --display:"Anton",system-ui,"Arial Narrow",sans-serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* spacing / layout */
  --wrap:1200px;
  --gap:clamp(1rem,4vw,2rem);
  --pad-x:clamp(1.15rem,5vw,2.5rem);
  --sec:clamp(3.75rem,9vw,7rem);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.55);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--red);color:#fff}

/* ---- type ---- */
h1,h2,h3{margin:0;font-weight:400;line-height:.98;letter-spacing:.005em}
.display{font-family:var(--display);text-transform:uppercase;font-weight:400}
h1.display{font-size:clamp(2.9rem,11vw,7rem)}
h2.display{font-size:clamp(2.1rem,7vw,4.4rem);line-height:.95}
h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.4rem,4vw,2rem)}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.02em;color:var(--red-ink);
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem}
.lead{font-size:clamp(1.08rem,1rem + .5vw,1.35rem);color:var(--muted-2);line-height:1.5;max-width:42ch}
p{margin:0 0 1rem}
.small{font-size:.85rem;color:var(--muted)}

/* ---- layout ---- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
section{padding-block:var(--sec)}
.stack>*+*{margin-top:1.1rem}
.center{text-align:center}
.grid{display:grid;gap:var(--gap)}
@media(min-width:760px){
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(4,1fr)}
}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:1rem;letter-spacing:.01em;line-height:1;
  padding:1.05rem 1.6rem;border-radius:var(--radius-sm);border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s;
  will-change:transform}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2)}
.btn-ghost{background:transparent;color:#fff;border-color:var(--line)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--paper)}
.btn-outline-red{background:transparent;color:var(--red-ink);border-color:var(--red)}
.btn-outline-red:hover{background:var(--red);color:#fff}
.cart-btn{position:relative;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.cart-count{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;
  border-radius:100px;background:var(--red);color:#fff;font-size:.72rem;font-weight:800;
  padding-inline:.25rem;margin-left:.15rem}
.nav-lock .lock-glyph{font-size:.8em}
.btn-lg{padding:1.2rem 2rem;font-size:1.05rem}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* ---- surfaces ---- */
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;
  padding:.35rem .7rem;border-radius:100px;background:var(--ink-3);border:1px solid var(--line);color:var(--muted-2)}
.tag.red{background:rgba(228,21,43,.14);border-color:rgba(228,21,43,.4);color:#ff8a95}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ---- header / nav ---- */
.site-head{position:sticky;top:0;z-index:60;background:var(--ink);
  border-bottom:1px solid var(--line)}
.site-head.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:76px}
.brand{display:flex;align-items:center;flex:none}
.brand img{width:132px;height:auto;display:block}
.nav-cta .btn{padding:.62rem 1.05rem;font-size:.92rem}
@media(min-width:900px){
  .brand img{width:162px}
  .nav{height:84px}
}
.nav-links{display:none;align-items:center;gap:1.7rem}
.nav-links a{font-weight:600;font-size:.95rem;color:var(--muted-2);position:relative;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;padding:.5rem;cursor:pointer;min-width:44px;min-height:44px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:900px){.nav-links{display:flex}.burger{display:none}}

/* mobile menu */
.mobile-menu{position:fixed;inset:68px 0 0;z-index:55;background:var(--ink);
  transform:translateY(-100%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;padding:2rem var(--pad-x) 3rem;gap:.25rem;visibility:hidden}
.mobile-menu.open{transform:translateY(0);visibility:visible}
.mobile-menu a{font-family:var(--display);text-transform:uppercase;font-size:2rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:1.5rem}

/* ---- footer ---- */
.site-foot{background:var(--ink-2);border-top:1px solid var(--line);padding-block:clamp(3rem,7vw,4.5rem) 2rem;
  position:relative;isolation:isolate;overflow:hidden}
.site-foot::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--foot-photo) center/cover;opacity:.07;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}

/* Faint photo texture threaded through dark sections.
   The two sides of the brand do NOT share photography: the clothing pages must never carry
   barbering imagery (a client in a cape is not a product shot), so the source is a variable.
   Clothing is the default; the barber pages opt in to the shop photos via .studio-side. */
:root{
  --tex-photo:url("../assets/img/shop/flat-hangers.webp");
  --foot-photo:url("../assets/img/shop/flat-hangers.webp");
}
.studio-side{
  --tex-photo:url("../assets/img/space-03.webp");
  --foot-photo:url("../assets/img/space-02.webp");
}
.tex{position:relative;isolation:isolate;overflow:hidden}
.tex::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--tex-photo) center/cover;opacity:.05;filter:grayscale(.2)}
/* giant faint spray wordmark watermark */
.watermark{position:absolute;inset:auto 0 -2% 0;z-index:0;pointer-events:none;text-align:center;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(5rem,22vw,18rem);line-height:.8;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.05);white-space:nowrap;overflow:hidden}
.foot-grid{display:grid;gap:2rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid h4{font-family:var(--display);text-transform:uppercase;font-size:1rem;letter-spacing:.03em;margin:0 0 1rem;color:var(--muted-2)}
.foot-grid a{color:var(--muted-2);display:block;padding:.28rem 0}
.foot-grid a:hover{color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;
  margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.foot-bottom a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.foot-bottom a:hover{color:#fff}

/* ---- graffiti outline marquee (vault: infinite-marquee, re-skinned) ---- */
.marquee{--dur:34s;overflow:hidden;border-block:1px solid var(--line);background:var(--ink-2);
  padding-block:clamp(1.4rem,3.2vw,2.3rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;gap:2.2rem;animation:mq var(--dur) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.6rem,7vw,4.6rem);
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.72);white-space:nowrap;letter-spacing:.005em;line-height:1}
.marquee span.solid{color:var(--red);-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ---- forms (shared by booking + admin) ---- */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-weight:600;font-size:.9rem;color:var(--muted-2)}
.input,select.input,textarea.input{
  width:100%;background:var(--ink-3);border:1.5px solid var(--line);border-radius:10px;
  color:#fff;font:inherit;padding:.85rem 1rem;transition:border-color .18s}
.input:focus{outline:none;border-color:var(--red)}
.input::placeholder{color:#6d6d75}

/* ---- accessible focus ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--red-ink);outline-offset:2px;border-radius:6px}

/* ---- badges for notes / fill-ins (visible only where content is genuinely unknown) ---- */
.fillin{border:1.5px dashed var(--line);border-radius:12px;padding:1rem 1.15rem;color:var(--muted);
  background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.02) 10px,rgba(255,255,255,.02) 20px);
  font-size:.92rem}
.fillin b{color:var(--muted-2)}
.dr-legal{color:var(--muted);font-size:.86rem;margin-top:.9rem;max-width:62ch}

/* ---- delivery ticker. Lewis asked for a moving banner for "free delivery over 50";
   it sits ABOVE the header, because at the bottom of the page it was only met by
   people who had already finished looking. js/site.js builds it from the real shipping
   setting and rewrites it as the basket fills, so it says nothing Lewis has not set in
   HQ and nothing the checkout will not honour. ---- */
/* --red-2, not --red-ink: white on #c11020 is 6.4:1, and this strip carries real
   text at 15px on a phone, where AA wants 4.5:1 (the brighter ink only reaches 3.7). */
.ship-ticker{position:relative;overflow:hidden;background:var(--red-2);color:#fff;
  border-block:1px solid rgba(0,0,0,.25)}
.ship-ticker-track{display:flex;width:max-content;gap:2.5rem;padding:.6rem 0;
  animation:ship-mq 26s linear infinite;will-change:transform}
.ship-ticker:hover .ship-ticker-track,.ship-ticker:focus-within .ship-ticker-track{animation-play-state:paused}
.ship-ticker span{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(.95rem,2.6vw,1.25rem);line-height:1;white-space:nowrap}
.ship-ticker .dot{opacity:.65}
@keyframes ship-mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .ship-ticker-track{animation:none;width:100%;justify-content:center;padding:.7rem 1rem;flex-wrap:wrap}
  .ship-ticker .dot,.ship-ticker span:nth-child(n+2){display:none}
}

/* ---- utilities ---- */
.u-red{color:var(--red-ink)}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
}

/* admin top-bar wordmark */
.admin-mark{width:104px;height:auto;display:block}