/*
Theme Name: Northbridge Eyewear
Theme URI: https://commerce.varai.ai
Description: Commerce Studio WooCommerce demo theme — mirrors the Drupal "Northbridge Eyewear" (varai_eyewear) demo look & feel. ADR-170 test fixture. v2 editorial-optician refresh.
Author: Commerce Studio
Template: twentytwentyfive
Version: 2.0.0
*/

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --nb-primary: #0F8B5C;
  --nb-primary-dark: #0B7048;
  --nb-primary-darker: #053D27;
  --nb-accent: #F4D924;
  --nb-accent-dark: #DFC418;
  --nb-ink: #15201B;
  --nb-text: #283732;
  --nb-text-muted: #5C6B64;
  --nb-bg: #FFFFFF;
  --nb-bg-cream: #F6F4EC;
  --nb-bg-mint: #EAF3EE;
  --nb-footer: #0A1711;
  --nb-border: #E3E0D6;
  --nb-radius: 14px;
  --nb-radius-lg: 26px;
  --nb-radius-pill: 999px;
  --nb-container: 1240px;
  --nb-display: "Fraunces", Georgia, "Times New Roman", serif;
  --nb-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nb-shadow: 0 18px 50px -24px rgba(5, 61, 39, .45);
  --nb-shadow-sm: 0 6px 20px -12px rgba(5, 61, 39, .35);
}

body, button, input, select, textarea {
  font-family: var(--nb-body);
  color: var(--nb-text);
  letter-spacing: -0.005em;
}
body { background: var(--nb-bg); }

h1, h2, h3, .nb-display {
  font-family: var(--nb-display);
  font-optical-sizing: auto;
  color: var(--nb-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}

a { color: var(--nb-primary); text-decoration: none; }
a:hover { color: var(--nb-primary-dark); }

.nb-wrap { max-width: var(--nb-container); margin: 0 auto; padding: 0 24px; }

/* ── Buttons ───────────────────────────────────────────── */
.nb-btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: 15px 30px; border-radius: var(--nb-radius-pill);
  font-family: var(--nb-body); font-weight: 700; font-size: 1rem;
  text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nb-btn--primary { background: var(--nb-accent); color: var(--nb-ink); box-shadow: 0 10px 24px -10px rgba(244,217,36,.8); }
.nb-btn--primary:hover { background: var(--nb-accent-dark); color: var(--nb-ink); transform: translateY(-2px); }
.nb-btn--ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.nb-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); }
.nb-btn--ink { background: var(--nb-primary); color: #fff; }
.nb-btn--ink:hover { background: var(--nb-primary-dark); color: #fff; transform: translateY(-2px); }

/* WooCommerce buttons + price accents */
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce #respond input#submit, .wp-element-button, .wp-block-button__link {
  background: var(--nb-primary) !important; color: #fff !important;
  border-radius: var(--nb-radius-pill) !important; border: none !important;
  font-family: var(--nb-body) !important; font-weight: 700; padding: 12px 26px !important; letter-spacing: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover { background: var(--nb-primary-dark) !important; }
.woocommerce span.price, .woocommerce .price { color: var(--nb-ink); font-weight: 700; font-family: var(--nb-body); }

/* ── Hero ──────────────────────────────────────────────── */
.nb-hero {
  position: relative; overflow: hidden; color: #fff;
  max-width: var(--nb-container); margin: 28px auto 18px; padding: 84px 56px 88px;
  border-radius: var(--nb-radius-lg);
  background: linear-gradient(150deg, var(--nb-primary) 0%, var(--nb-primary-dark) 52%, var(--nb-primary-darker) 100%);
  box-shadow: var(--nb-shadow);
}
.nb-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38rem 38rem at 88% 8%, rgba(244,217,36,.30), transparent 55%),
    radial-gradient(30rem 30rem at 6% 96%, rgba(255,255,255,.10), transparent 55%);
}
/* spectacle-frame line motif top-right */
.nb-hero::before {
  content: ""; position: absolute; top: -60px; right: -40px; width: 360px; height: 360px;
  background:
    radial-gradient(circle at 30% 50%, transparent 52px, rgba(255,255,255,.16) 53px, rgba(255,255,255,.16) 56px, transparent 57px),
    radial-gradient(circle at 70% 50%, transparent 52px, rgba(255,255,255,.16) 53px, rgba(255,255,255,.16) 56px, transparent 57px);
  opacity: .6;
}
.nb-hero > * { position: relative; z-index: 1; }
.nb-hero .eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem;
  font-weight: 700; color: var(--nb-accent); margin-bottom: 20px;
  padding: 7px 14px; border: 1px solid rgba(244,217,36,.45); border-radius: var(--nb-radius-pill);
}
.nb-hero h1 {
  color: #fff; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .98; margin: 0 0 18px;
  font-weight: 600; max-width: 14ch;
}
.nb-hero h1 em { font-style: italic; font-weight: 500; color: var(--nb-accent); }
.nb-hero p { font-family: var(--nb-body); font-size: 1.2rem; line-height: 1.55; max-width: 50ch; opacity: .94; margin: 0 0 34px; }
.nb-hero .nb-btn { margin-right: 14px; }

/* ── Trust strip ───────────────────────────────────────── */
.nb-trust {
  max-width: var(--nb-container); margin: 0 auto 64px; padding: 22px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  background: var(--nb-bg-cream); border: 1px solid var(--nb-border); border-radius: var(--nb-radius);
}
.nb-trust div { display: flex; flex-direction: column; gap: 2px; }
.nb-trust .t-num { font-family: var(--nb-display); font-weight: 600; font-size: 1.5rem; color: var(--nb-primary-dark); line-height: 1; }
.nb-trust .t-lbl { font-size: .86rem; color: var(--nb-text-muted); font-weight: 500; }

/* ── Section heads ─────────────────────────────────────── */
.nb-section { max-width: var(--nb-container); margin: 0 auto 72px; padding: 0 24px; }
.nb-section h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 0 0 6px; }
.nb-section .nb-sub { color: var(--nb-text-muted); font-size: 1.08rem; max-width: 60ch; margin: 0 0 32px; }
.nb-eyebrow-dark { text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 700; color: var(--nb-primary); margin-bottom: 10px; }

/* ── Category tiles (cohesive, not rainbow) ────────────── */
.nb-cats {
  max-width: var(--nb-container); margin: 0 auto 72px; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.nb-cat {
  position: relative; overflow: hidden; min-height: 200px; border-radius: var(--nb-radius);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 24px;
  color: #fff; text-decoration: none; font-family: var(--nb-display); font-weight: 600; font-size: 1.5rem;
  background: linear-gradient(170deg, var(--nb-primary) 0%, var(--nb-primary-darker) 100%);
  border: 1px solid rgba(5,61,39,.18); transition: transform .2s ease, box-shadow .2s ease;
}
.nb-cat::after {
  content: ""; position: absolute; top: -30px; right: -30px; width: 150px; height: 150px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.16); box-shadow: 0 0 0 26px rgba(255,255,255,.05);
}
.nb-cat .nb-cat-go { font-family: var(--nb-body); font-size: .82rem; font-weight: 600; letter-spacing: .04em; opacity: .85; }
.nb-cat:nth-child(2) { background: linear-gradient(170deg, #1F2C26 0%, #0A1711 100%); }
.nb-cat:nth-child(3) { background: linear-gradient(170deg, var(--nb-primary-dark) 0%, #0A1711 100%); }
.nb-cat:nth-child(4) { background: linear-gradient(170deg, var(--nb-accent) 0%, var(--nb-accent-dark) 100%); color: var(--nb-ink); }
.nb-cat:nth-child(4) .nb-cat-go { color: var(--nb-ink); opacity: .7; }
.nb-cat:nth-child(4)::after { border-color: rgba(21,32,27,.18); box-shadow: 0 0 0 26px rgba(21,32,27,.05); }
.nb-cat:hover { transform: translateY(-6px); box-shadow: var(--nb-shadow); color: #fff; }
.nb-cat:nth-child(4):hover { color: var(--nb-ink); }

/* ── Booking band (free eye test) ──────────────────────── */
.nb-booking {
  max-width: var(--nb-container); margin: 0 auto 72px; padding: 56px 56px; border-radius: var(--nb-radius-lg);
  background: var(--nb-bg-mint); border: 1px solid #D5E6DC;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
.nb-booking h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin: 0 0 12px; }
.nb-booking p { color: var(--nb-text); font-size: 1.08rem; line-height: 1.6; margin: 0 0 24px; max-width: 46ch; }
.nb-booking .nb-checks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.nb-booking .nb-checks li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.nb-booking .nb-checks li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nb-primary); color: #fff; font-size: .8rem; flex: none; }
.nb-booking .nb-bk-card {
  background: #fff; border: 1px solid var(--nb-border); border-radius: var(--nb-radius); padding: 30px; box-shadow: var(--nb-shadow-sm);
}
.nb-booking .nb-bk-card .t-num { font-family: var(--nb-display); font-size: 3rem; font-weight: 600; color: var(--nb-primary-dark); line-height: 1; }
.nb-booking .nb-bk-card .t-cur { font-family: var(--nb-display); font-size: 1.4rem; vertical-align: top; }
.nb-booking .nb-bk-card .t-cap { color: var(--nb-text-muted); margin: 6px 0 20px; }

/* ── Product loop polish ───────────────────────────────── */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { text-align: left; }
.woocommerce ul.products li.product a img {
  border-radius: var(--nb-radius); border: 1px solid var(--nb-border); background: var(--nb-bg-cream); transition: transform .25s ease;
}
.woocommerce ul.products li.product:hover a img { transform: translateY(-4px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--nb-body); font-weight: 600; font-size: 1rem; padding-top: 12px; color: var(--nb-ink); }

/* ── Footer ────────────────────────────────────────────── */
.nb-footer { background: var(--nb-footer); color: #aebcb4; text-align: center; padding: 40px 24px; margin-top: 72px; font-size: .95rem; }
.nb-footer strong { color: #fff; }
.nb-footer .nb-footer-brand { font-family: var(--nb-display); font-size: 1.3rem; color: #fff; margin-bottom: 8px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1023px) {
  .nb-cats { grid-template-columns: repeat(2, 1fr); }
  .nb-trust { grid-template-columns: repeat(2, 1fr); }
  .nb-booking { grid-template-columns: 1fr; padding: 40px 32px; }
  .nb-hero { padding: 64px 32px 68px; }
}
@media (max-width: 560px) {
  .nb-cats { grid-template-columns: 1fr; }
  .nb-trust { grid-template-columns: 1fr 1fr; }
  .nb-hero { padding: 48px 22px 52px; margin-top: 14px; }
  .nb-hero .nb-btn { margin-bottom: 10px; }
}