/**
 * Prime Printing — layout chrome
 *
 * Topbar, header/nav, full-screen mobile menu, footer. These render on every
 * page, so everything here is shared; nothing page-specific belongs in this file.
 *
 * The header has two modes, both from the references:
 *   default      sticky white bar with navy type (shop-v3, product, checkout…)
 *   transparent  fixed over the dark hero, white type, solidifying on scroll
 *                (theme-motion homepage). Body gets .prime-has-hero.
 */

/* ---- Topbar ------------------------------------------------------------- */
.prime-topbar {
  background: var(--navy);
  color: var(--on-navy);
  font-size: var(--fs-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}

.prime-topbar .prime-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  block-size: var(--topbar-h);
}

/* ---- Header ------------------------------------------------------------- */
.prime-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--line);
}

.prime-nav .prime-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--nav-h);
}

/* Transparent-over-hero variant. */
.prime-has-hero .prime-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-hero-nav);
  background: none;
  backdrop-filter: none;
  border-block-end: 0;
  padding-block: var(--sp-5);
  transition: background var(--dur-slow), padding var(--dur-slow);
}

.prime-has-hero .prime-nav .prime-wrap { block-size: auto; }

.prime-has-hero .prime-nav.is-solid {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--line);
}

/* The topbar scrolls away above a transparent header, so it is not sticky
   there; the nav covers the full width from the top. */
.prime-has-hero .prime-topbar { display: none; }

/* ---- Wordmark ----------------------------------------------------------- */
/*
 * The real brand asset. Both colour variants are in the markup; only one is
 * ever displayed. The dark (navy) one is the default, and the light one takes
 * over on navy surfaces — the mobile menu, the footer, and the homepage header
 * while it is still transparent over the hero.
 */
.prime-logo {
  display: block;
  flex: none;
  line-height: 0;
}

/*
 * Qualified as `.prime-logo .prime-logo__img` rather than the bare class: on
 * every WooCommerce page (shop, product, cart, checkout — most of the site)
 * body carries the `woocommerce`/`woocommerce-page` class, and WooCommerce's
 * own stylesheet ships `.woocommerce img, .woocommerce-page img { height:
 * auto; max-width: 100%; }` — one class + one element, specificity (0,1,1),
 * which beats a bare `.prime-logo__img` (0,1,0) and was silently winning on
 * every such page, rendering the logo at its raw 720×315 intrinsic size. Two
 * classes (0,2,0) beats it cleanly, no !important needed.
 *
 * `display` is deliberately NOT set here — it belongs to the --dark/--light
 * toggle rules below. Setting it in this same (0,2,0) rule would outrank
 * their bare (0,1,0) `.prime-logo__img--light { display: none; }`, showing
 * both variants stacked at once (exactly the regression this comment is
 * warning the next edit away from).
 */
.prime-logo .prime-logo__img {
  block-size: var(--logo-h);
  inline-size: auto;
}

/* Shown/hidden by default; the has-hero/menu/footer rules further down
   override these for the contexts where the light variant takes over. */
.prime-logo__img--dark { display: block; }
.prime-logo__img--light { display: none; }

/* On navy: swap which variant is shown. */
.prime-menu__top .prime-logo__img--dark,
.prime-footer .prime-logo__img--dark,
.prime-has-hero .prime-nav:not(.is-solid) .prime-logo__img--dark { display: none; }

.prime-menu__top .prime-logo__img--light,
.prime-footer .prime-logo__img--light,
.prime-has-hero .prime-nav:not(.is-solid) .prime-logo__img--light { display: block; }

/* The footer's lockup sits on its own, so it can be a size larger. */
.prime-footer .prime-logo__img { block-size: var(--logo-h-lg); }

/* ---- Nav links ---------------------------------------------------------- */
.prime-navlinks {
  display: flex;
  gap: 30px;
  font-size: var(--fs-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  list-style: none;
  transition: color var(--dur-slow);
}

.prime-navlinks a {
  padding-block-end: 3px;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur);
}

.prime-navlinks a:hover,
.prime-navlinks .current-menu-item > a,
.prime-navlinks .current_page_item > a,
.prime-navlinks .current-menu-ancestor > a { border-block-end-color: var(--sky); }

.prime-has-hero .prime-nav .prime-navlinks { color: rgba(255, 255, 255, .85); }
.prime-has-hero .prime-nav.is-solid .prime-navlinks { color: var(--navy); }

/* ---- Nav tools (language, cart) ---------------------------------------- */
.prime-navtools {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: var(--fs-nav);
  letter-spacing: var(--track-tight);
}

.prime-langbtn {
  display: inline-block;
  border: 1px solid var(--line);
  background: none;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-nav);
  padding: 7px 13px;
  cursor: pointer;
  color: var(--navy);
  transition: var(--dur);
}

.prime-langbtn:hover {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}

.prime-has-hero .prime-nav .prime-langbtn {
  border-color: rgba(255, 255, 255, .4);
  color: var(--on-navy);
}

.prime-has-hero .prime-nav .prime-langbtn:hover {
  background: var(--sky);
  border-color: var(--sky);
  color: var(--navy-deep);
}

.prime-has-hero .prime-nav.is-solid .prime-langbtn {
  border-color: var(--line);
  color: var(--navy);
}

.prime-cart-link { white-space: nowrap; }
.prime-has-hero .prime-nav .prime-cart-link { color: var(--on-navy); }
.prime-has-hero .prime-nav.is-solid .prime-cart-link { color: var(--navy); }

/* ---- Burger ------------------------------------------------------------- */
.prime-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
  flex-direction: column;
  gap: 5px;
}

.prime-burger span {
  display: block;
  inline-size: 24px;
  block-size: 1.5px;
  background: var(--navy);
  transition: var(--dur);
}

.prime-has-hero .prime-nav .prime-burger span { background: var(--paper); }
.prime-has-hero .prime-nav.is-solid .prime-burger span { background: var(--navy); }

/* ---- Full-screen menu --------------------------------------------------- */
.prime-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--navy-deep);
  color: var(--on-navy);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-menu), visibility var(--dur-menu);
}

.prime-menu.is-open { opacity: 1; visibility: visible; }

.prime-menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px var(--wrap-pad);
  border-block-end: 1px solid rgba(255, 255, 255, .12);
  flex: none;
}

.prime-menu__top .prime-logo { color: var(--on-navy); }

.prime-menu__close {
  background: none;
  border: 1px solid var(--on-navy-line-strong);
  color: var(--on-navy);
  inline-size: 42px;
  block-size: 42px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: var(--dur);
}

.prime-menu__close:hover {
  background: var(--sky);
  border-color: var(--sky);
  color: var(--navy-deep);
}

.prime-menu__body {
  flex: 1;
  overflow-y: auto;
  padding: 30px var(--wrap-pad) var(--sp-9);
}

/* Search */
.prime-menu__search {
  display: flex;
  margin-block-end: var(--sp-8);
  border: 1px solid rgba(255, 255, 255, .24);
}

.prime-menu__search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--on-navy);
  font-size: var(--fs-lead);
  padding: 15px var(--sp-4);
}

.prime-menu__search input::placeholder { color: rgba(255, 255, 255, .45); }

.prime-menu__search input:focus {
  outline: none;
  background: rgba(255, 255, 255, .05);
}

.prime-menu__search button {
  background: var(--sky);
  border: none;
  color: var(--navy-deep);
  padding-inline: 22px;
  cursor: pointer;
  font-size: var(--fs-lead);
}

/* Primary links */
.prime-menu__links {
  list-style: none;
  margin-block-end: var(--sp-9);
}

.prime-menu__links li { border-block-end: 1px solid rgba(255, 255, 255, .1); }

.prime-menu__links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 19px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: var(--fw-thin);
  letter-spacing: .06em;
  transition: var(--dur);
}

.prime-menu__links a:hover {
  color: var(--sky);
  padding-inline-start: 10px;
}

.prime-menu__num {
  font-size: var(--fs-body-lg);
  color: rgba(255, 255, 255, .35);
  font-family: var(--body);
}

/* Section head inside the menu */
.prime-menu__head {
  font-size: var(--fs-sm);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sky);
  margin-block-end: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Category shortcuts */
.prime-menu__cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-block-end: var(--sp-9);
}

.prime-menu__cat {
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 13px 14px;
  font-size: var(--fs-body-sm);
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: .28s;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}

.prime-menu__cat:hover {
  border-color: var(--sky);
  background: var(--sky-wash);
  color: var(--on-navy);
}

.prime-menu__cat b {
  font-weight: var(--fw-normal);
  color: var(--sky);
  font-size: var(--fs-nav);
}

/* Language segmented control */
.prime-seg {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, .24);
  margin-block-end: var(--sp-8);
}

.prime-seg a,
.prime-seg button {
  background: none;
  border: none;
  color: var(--on-navy-softer);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--track-tight);
  padding: 11px 22px;
  cursor: pointer;
  transition: .28s;
}

.prime-seg .is-on {
  background: var(--sky);
  color: var(--navy-deep);
}

/* Menu footer */
.prime-menu__foot {
  border-block-start: 1px solid rgba(255, 255, 255, .12);
  padding-block-start: var(--sp-6);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, .65);
}

.prime-menu__foot a:hover { color: var(--sky); }

.prime-menu__social {
  display: flex;
  gap: 18px;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--track-tight);
}

/* ---- Page head (dark banner above inner pages) -------------------------- */
.prime-pagehead {
  background: var(--navy);
  color: var(--on-navy);
  padding-block: 58px 52px;
}

.prime-crumb {
  font-size: var(--fs-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-navy-faint);
  margin-block-end: 18px;
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}

.prime-crumb a:hover { color: var(--sky); }

.prime-pagehead h1 {
  font-weight: var(--fw-thin);
  font-size: var(--fs-page-title);
  letter-spacing: .01em;
  color: var(--on-navy);
}

.prime-pagehead p {
  color: var(--on-navy-soft);
  margin-block-start: 14px;
  max-inline-size: 540px;
}

/* ---- Prose (About, Contact, Privacy Policy, Terms, Logo Design — Phase 10) */
.prime-main { padding-block: var(--sp-10) var(--sp-12); }

.prime-prose {
  max-inline-size: 760px;
  margin-inline: auto;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.prime-prose > * + * { margin-block-start: var(--sp-5); }

.prime-prose h2 {
  font-weight: var(--fw-light);
  font-size: var(--fs-section);
  color: var(--ink);
  margin-block-start: var(--sp-10);
}

.prime-prose h2:first-child { margin-block-start: 0; }

.prime-prose h3 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-lead);
  letter-spacing: var(--track-tight);
  color: var(--ink);
  margin-block-start: var(--sp-8);
}

.prime-prose ul,
.prime-prose ol {
  padding-inline-start: 1.2em;
}

.prime-prose li + li { margin-block-start: var(--sp-2); }

.prime-prose a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.prime-prose a:hover { color: var(--sky); }

.prime-prose strong { color: var(--ink); font-weight: var(--fw-medium); }

.prime-prose .prime-lead {
  font-size: var(--fs-lead);
  color: var(--ink);
}

/* Contact/logo-design detail rows (icon-label pattern, matching the reference's card system) */
.prime-prose__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.prime-prose__card {
  border: 1px solid var(--line);
  padding: var(--sp-6);
}

.prime-prose__card h3 { margin-block-start: 0; }

.prime-prose__card p { color: var(--ink-faint); font-size: var(--fs-body); }

@media (max-width: 760px) {
  .prime-prose__grid { grid-template-columns: 1fr; }
}

/* ---- Footer ------------------------------------------------------------- */
.prime-footer {
  background: var(--navy);
  color: var(--on-navy);
  padding-block: 70px var(--sp-7);
}

.prime-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--sp-9);
  padding-block-end: 48px;
  border-block-end: 1px solid var(--on-navy-line);
}

.prime-footer h4 {
  font-family: var(--body);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-logo);
  text-transform: uppercase;
  color: var(--sky);
  margin-block-end: 17px;
  font-weight: var(--fw-normal);
}

.prime-footer ul {
  list-style: none;
  font-size: var(--fs-body);
}

.prime-footer li {
  margin-block-end: 10px;
  color: var(--on-navy-soft);
}

.prime-footer li a:hover { color: var(--sky); }

.prime-footer .prime-logo {
  color: var(--on-navy);
  margin-block-end: var(--sp-4);
}

.prime-footer__blurb {
  color: var(--on-navy-softer);
  font-size: var(--fs-body);
  max-inline-size: 290px;
}

.prime-footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-block-start: var(--sp-6);
  font-size: var(--fs-nav);
  color: var(--on-navy-faint);
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ---- Breakpoints -------------------------------------------------------- */
@media (max-width: 1000px) {
  /* The burger opens a JS-driven overlay, so the inline links are only safe to
     hide once JS has confirmed itself (see the prime-js flag in header.php). */
  .prime-js .prime-navlinks { display: none; }
  .prime-js .prime-burger { display: flex; }

  .prime-navlinks {
    gap: 18px;
    font-size: var(--fs-sm);
    flex-wrap: wrap;
  }
  .prime-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

@media (max-width: 560px) {
  .prime-footer__grid { grid-template-columns: 1fr; }
  .prime-menu__cats { grid-template-columns: 1fr; }
  .prime-menu__links a { font-size: 23px; }
}

/* ---- WooCommerce's default price colour ---------------------------------
 *
 * WooCommerce ships prices in its own olive-yellow (#958e09) — visible on the
 * shop cards, the single-product price and the related-products grid. Nothing
 * in the Prime palette is yellow, so it read as a stray third colour next to
 * the navy and sky (Reem, 2026-09-05: "change any yellow color to light blue
 * from prime brand color").
 *
 * The selectors have to out-specify WooCommerce's own, which look like
 * `.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products
 * li.product .price` — `:where()` contributes nothing, so that lands at
 * (0,4,2). Leading with `body` here puts these at (0,4,3) and wins without
 * resorting to !important.
 */
body.woocommerce ul.products li.product .price,
body.woocommerce-page ul.products li.product .price,
body.woocommerce div.product p.price,
body.woocommerce div.product span.price,
body.woocommerce-page div.product p.price,
body.woocommerce-page div.product span.price,
body.woocommerce .woocommerce-Price-amount,
body.woocommerce-page .woocommerce-Price-amount {
  color: var(--sky);
}

/* The sale badge uses the same olive on this install. */
body.woocommerce span.onsale,
body.woocommerce-page span.onsale {
  background: var(--sky);
  color: var(--navy-deep);
}