/*
Theme Name:   Envo One Child — Rogue Discs
Theme URI:    https://roguediscs.com/
Description:  Rogue Discs redesign. Child theme of Envo One. Rebuilds the storefront
              on the 2022 brand identity (coral + navy + Teko display type) with a
              fluid, responsive layout and a real product grid.
Author:       Benjamim Jossare
Template:     envo-one
Version:      0.4.3
Text Domain:  envo-one-child
*/

/* ------------------------------------------------------------------
   WordPress compatibility — normalises what Envo/WP output so the
   mockup styles below apply unchanged.
   ------------------------------------------------------------------ */
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; align-items: center; }
.main-nav li { margin: 0; }
.main-nav .sub-menu { display: none; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
body.admin-bar .site-header.is-stuck { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header.is-stuck { top: 46px; } }
/* Envo sometimes prints its own container/header — hide it, ours replaces it. */
.envo-one-header, #site-navigation.envo-default { display: none; }

/* Rogue Discs — modern homepage
   Keeps the 2022 brand DNA (coral + navy + Teko display) but rebuilds the page
   on a fluid, responsive layout with a real product grid. */

:root {
  /* brand */
  --coral: #ff6768;
  --coral-600: #f04b4c;
  --coral-050: #fff1f1;
  /* Coral is a light colour: white on it is 2.84:1, well under WCAG AA. These
     two carry the same brand hue into the places coral cannot go on its own —
     --on-coral is text sitting ON a coral fill (6.16:1, and 4.84:1 on the
     darker --coral-600 hover fill), --coral-ink is coral used AS text on a
     light ground (5.87:1 on white, 5.57:1 on --bg). */
  --on-coral: #10192e;
  --coral-ink: #b93330;
  --navy-900: #10192e;
  --navy-800: #17223b;
  --navy-700: #263859;

  /* neutrals */
  --ink: #1c2333;
  --muted: #667085;
  --line: #e6eaf2;
  --surface: #ffffff;
  --bg: #f7f9fd;

  /* shape */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 25, 46, 0.06);
  --shadow: 0 6px 20px rgba(16, 25, 46, 0.08);
  --shadow-lg: 0 18px 48px rgba(16, 25, 46, 0.18);

  --display: "Teko", "Oswald", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1200px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- shared type ---------- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0 0 10px;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.section-title {
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--navy-800);
  margin: 0;
}
.section-sub { color: var(--muted); margin: 6px 0 0; font-size: 15px; }
.link-more {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral-ink);
  white-space: nowrap;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--coral);
  color: var(--on-coral);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 13px 22px;
  transition: background 0.16s, transform 0.16s;
}
.btn:hover { background: var(--coral-600); transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.2); }
.btn-block { width: 100%; }

/* ---------- announcement ---------- */
.announce {
  background: var(--navy-900);
  color: #c9d3e6;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 9px 16px;
}
.announce strong { color: #fff; font-weight: 700; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 25, 46, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 72px;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand .mark { width: 28px; }
.brand .wordmark { width: 140px; }

.main-nav { display: flex; gap: 26px; }
.main-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: #dbe3f2;
  padding: 6px 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transition: transform 0.18s;
}
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after { transform: scaleX(1); }

.header-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.search {
  position: relative;
  width: clamp(180px, 24vw, 320px);
}
.search input {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0 16px 0 40px;
  font-family: var(--body);
  font-size: 14px;
  color: #fff;
}
.search input::placeholder { color: #93a1bd; }
.search svg {
  position: absolute; left: 15px; top: 12px;
  width: 16px; height: 16px; fill: #93a1bd;
}
.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
.icon-btn svg { width: 17px; height: 17px; fill: #fff; }
.cart-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--on-coral);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  padding: 0 5px;
}
.burger { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: url("assets/hero.jpg") 38% 45% / cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,25,46,.92) 0%, rgba(16,25,46,.74) 42%, rgba(16,25,46,.28) 100%);
}
.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(340px, 400px);
  gap: 56px;
  align-items: center;
  min-height: clamp(540px, 66vh, 680px);
  padding-block: 72px;
}
.hero-copy { color: #fff; max-width: 560px; }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(46px, 6vw, 86px);
  font-weight: 700;
  line-height: 0.88;
  text-transform: uppercase;
  margin: 0 0 18px;
  letter-spacing: 0.005em;
}
.hero h1 span { color: var(--coral); }
.hero p {
  font-size: clamp(15px, 1.3vw, 17px);
  color: #c6d0e3;
  margin: 0 0 30px;
  max-width: 470px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-stats {
  display: flex;
  gap: 34px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-stats b {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.hero-stats span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #93a1bd; }

/* finder card */
.finder {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 28px;
}
.finder-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.finder h2 {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--navy-800);
  margin: 0;
}
.finder-reset { font-size: 12px; font-weight: 600; color: var(--muted); }

.flight-row { margin-bottom: 18px; }
.flight-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.flight-top label { font-size: 13px; font-weight: 600; color: var(--ink); }
.flight-val {
  font-size: 12px; font-weight: 700;
  color: var(--coral-ink);
  background: var(--coral-050);
  border-radius: 999px;
  padding: 3px 10px;
}
.track {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: #edf1f8;
  margin-inline: 8px;
}
.track .fill { position: absolute; inset: 0; border-radius: 999px; background: var(--coral); }
.knob {
  position: absolute; top: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--coral);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
}
.finder .btn { margin-top: 8px; }

/* ---------- trust bar ---------- */
.trust {
  background: #fff;
  border-block: 1px solid var(--line);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-block: 22px;
}
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item svg { width: 22px; height: 22px; fill: var(--coral); flex: none; }
.trust-item b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.trust-item span { font-size: 12.5px; color: var(--muted); }

/* ---------- generic section ---------- */
.section { padding-block: clamp(48px, 6vw, 84px); }
.section-tight { padding-block: clamp(36px, 4vw, 56px); }

/* ---------- shop by type ---------- */
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.type-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 20px 20px;
  text-align: center;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d5deee; }
.type-card img { height: 104px; width: auto; margin: 0 auto 16px; object-fit: contain; }
.type-card b {
  display: block;
  font-size: 15px; font-weight: 700;
  color: var(--navy-800);
  margin-bottom: 3px;
}
.type-card span { font-size: 12.5px; color: var(--muted); }

/* ---------- product grid ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.p-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.p-media {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2fa 100%);
  overflow: hidden;
}
.p-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.p-card:hover .p-media img { transform: scale(1.05); }
.p-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--coral);
  color: var(--on-coral);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
}
.p-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.p-brand {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.p-name {
  font-size: 16px; font-weight: 600;
  color: var(--navy-800);
  line-height: 1.3;
  margin: 0 0 12px;
}
.flight-pills { display: flex; gap: 6px; margin-bottom: 14px; }
.pill {
  width: 34px;
  border-radius: var(--r-sm);
  background: #f2f6fd;
  border: 1px solid #e4ebf7;
  text-align: center;
  padding: 5px 0 4px;
}
.pill b { display: block; font-size: 13px; font-weight: 700; line-height: 1; color: var(--navy-800); }
.pill span { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.p-foot { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.p-price { font-size: 17px; font-weight: 700; color: var(--navy-800); }
.p-was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.p-sale { color: var(--coral-ink); }

/* ---------- promo bento ---------- */
.bento {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(2, minmax(190px, 1fr));
  gap: 18px;
}
.promo {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 190px;
}
.promo:first-child { grid-row: span 2; }
.promo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.promo:hover img { transform: scale(1.04); }
.promo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,25,46,0) 30%, rgba(16,25,46,.82) 100%);
}
.promo-text { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 1; }
.promo-kicker {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 6px;
}
.promo-title {
  font-family: var(--display);
  font-size: clamp(30px, 3vw, 50px);
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}
.promo-link { font-size: 13px; font-weight: 600; color: #fff; }
.promo:first-child .promo-title { font-size: clamp(38px, 4vw, 62px); }

/* wide gear banner */
.gear-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 30px;
  background: var(--coral);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 18px;
  padding: 0;
}
.gear-banner > div { padding: 40px 0 40px 44px; }
.gear-banner h3 {
  font-family: var(--display);
  font-size: clamp(34px, 3.6vw, 56px);
  font-weight: 700;
  line-height: 0.92;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}
.gear-banner p { color: rgba(255,255,255,.9); margin: 0 0 20px; max-width: 380px; }
.gear-banner .btn { background: #fff; color: var(--coral-ink); }
.gear-banner .btn:hover { background: var(--navy-800); color: #fff; }
.gear-banner img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }

/* ---------- brand marquee ---------- */
.marquee {
  background: #fff;
  border-block: 1px solid var(--line);
  padding-block: 26px;
  overflow: hidden;
}
.marquee-track { display: flex; gap: 44px; align-items: center; justify-content: space-between; }
.marquee img {
  height: 52px; width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.2s, opacity 0.2s;
}
.marquee img:hover { filter: none; opacity: 1; }

/* ---------- testimonials ---------- */
.testimonials { background: var(--navy-800); color: #fff; }
.testimonials .section-title { color: #fff; }
.testimonials .section-sub { color: #93a1bd; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  padding: 26px 24px;
}
.stars { display: flex; gap: 3px; margin-bottom: 14px; }
.stars svg { width: 15px; height: 15px; fill: #ffb547; }
.quote-card p { font-size: 15px; color: #dbe3f2; margin: 0 0 18px; }
.quote-card cite { font-style: normal; font-size: 13px; font-weight: 700; color: var(--coral); }

/* ---------- blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-media { position: relative; }
.post-media img { width: 100%; height: 200px; object-fit: cover; }
.post-chip {
  position: absolute; top: 14px; left: 14px;
  background: rgba(16, 25, 46, 0.8);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 11px;
}
.post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-date { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.post h3 { font-size: 19px; font-weight: 700; color: var(--navy-800); line-height: 1.25; margin: 0 0 10px; }
.post p { font-size: 14px; color: var(--muted); margin: 0 0 18px; flex: 1; }

/* ---------- newsletter ---------- */
.newsletter { background: var(--coral); }
.newsletter .container {
  padding-block: clamp(40px, 5vw, 64px);
  text-align: center;
}
.newsletter h2 {
  font-family: var(--display);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}
.newsletter p { color: rgba(255, 255, 255, 0.92); margin: 0 auto 26px; max-width: 520px; }
.news-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin-inline: auto;
}
.news-form input {
  flex: 1;
  height: 48px;
  border: 0;
  border-radius: var(--r-sm);
  padding: 0 16px;
  font-family: var(--body);
  font-size: 15px;
}
.news-form .btn { background: var(--navy-800); padding-inline: 26px; }
.news-form .btn:hover { background: var(--navy-900); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: #9fadc7; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 34px;
  padding-block: 56px 44px;
}
.footer-brand .logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand .mark { width: 28px; }
.footer-brand .wordmark { width: 140px; }
.footer-brand p { font-size: 14px; margin: 0 0 20px; max-width: 260px; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  display: grid; place-items: center;
  transition: background 0.16s;
}
.socials a:hover { background: var(--coral); }
.socials svg { width: 16px; height: 16px; fill: #fff; }

.footer-col h4 {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; font-size: 14px; }
.footer-col a:hover { color: #fff; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 20px;
  font-size: 13px;
}
.footer-bottom img { height: 24px; width: auto; }

/* ================= responsive ================= */

@media (max-width: 1080px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .finder { max-width: 460px; }
  .type-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: span 3; }
}

@media (max-width: 900px) {
  .main-nav, .search { display: none; }
  .burger {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
  }
  .burger svg { width: 18px; height: 18px; fill: #fff; }
  .header-inner { height: 64px; gap: 14px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid, .post-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .promo:first-child { grid-row: auto; }
  .gear-banner { grid-template-columns: 1fr; text-align: center; }
  .gear-banner > div { padding: 32px 26px; }
  .gear-banner p { margin-inline: auto; }
  .gear-banner img { min-height: 200px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  .hero .container { min-height: 0; padding-block: 52px; }
  .hero-stats { gap: 22px; }
  .hero-stats b { font-size: 26px; }
  .hero-cta .btn { flex: 1; }
  .type-grid { gap: 12px; }
  .type-card { padding: 18px 12px 14px; }
  .type-card img { height: 88px; }
  .product-grid { gap: 12px; }
  .p-body { padding: 13px 13px 15px; }
  .p-name { font-size: 15px; }
  .pill { width: 30px; }
  .news-form { flex-direction: column; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
}

/* ------------------------------------------------------------------
   Additions for the live theme (not in the static mockup)
   ------------------------------------------------------------------ */

/* Add-to-cart on the product card sits above the card link */
.p-card { position: relative; }
.p-cart {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 10px; padding: 9px 14px; border-radius: var(--r-sm);
  background: var(--coral); color: var(--on-coral); font-weight: 600; font-size: 14px;
  border: 0; cursor: pointer; text-decoration: none; position: relative; z-index: 2;
}
.p-cart:hover { background: var(--coral-600); }
.p-cart.loading { opacity: .6; pointer-events: none; }
.p-cart.added::after { content: " ✓"; }

/* Out of stock */
.p-badge.oos { background: var(--navy-700); }

/* Mobile nav panel */
.main-nav.is-open {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 16px var(--gutter); box-shadow: var(--shadow);
}
.main-nav.is-open ul { flex-direction: column; align-items: flex-start; gap: 14px; }

/* Flight finder: real range inputs layered on the styled track */
.track input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-appearance: none; appearance: none;
  background: transparent; margin: 0; pointer-events: none;
}
.track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--coral);
  cursor: pointer; pointer-events: auto;
}
.track input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--coral);
  cursor: pointer; pointer-events: auto;
}
.track input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* Finder becomes a form */
.finder form { display: contents; }

/* Card is a div with an inner link so the add-to-cart button can sit outside it */
.p-card > .p-link { display: block; color: inherit; text-decoration: none; }
.p-card .p-body { display: flex; flex-direction: column; gap: 8px; }
.p-card .price { font: inherit; }
.p-card .p-price del { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: .9em; }
.p-card .p-price ins { text-decoration: none; }
.p-card .p-cart { margin: 0 16px 16px; }

/* Marquee logos may be wrapped in links when a brand taxonomy exists */
.marquee-track a { display: inline-flex; align-items: center; }

/* Blog headings and dates keep their link colour */
.post-body h3 a, .post-body .link-more { color: inherit; text-decoration: none; }
.post-body h3 a:hover { color: var(--coral-ink); }

/* Finder reset is a real button now */
.finder-reset { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* ------------------------------------------------------------------
   Fixes found testing against the live catalogue
   ------------------------------------------------------------------ */

/* Envo inherits Bootstrap's clearfix — `.container::before/after` become grid
   items and push real content into the wrong column. Neutralise it wherever we
   lay a grid or flex row out on `.container`. */
.hero .container::before,
.hero .container::after,
.footer-bottom .container::before,
.footer-bottom .container::after,
.newsletter .container::before,
.newsletter .container::after,
.trust .container::before,
.trust .container::after { content: none; display: none; }

/* Without flight data the finder is hidden, so the hero is a single column and
   the copy belongs on the dark side of the scrim, not floating right. */
.hero--no-finder .container { grid-template-columns: minmax(0, 640px); }
.hero--no-finder .hero-copy { max-width: none; }

/* ==================================================================
   Shop, category and product pages
   ================================================================== */

.woo-content { min-width: 0; }

/* --- Archive head --- */
.woocommerce-products-header {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.woocommerce-products-header__title,
.woo-content .page-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}
.term-description { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 72ch; }
.term-description p { margin: 0 0 12px; }
.term-description strong { color: var(--ink); }
.term-description img { border-radius: var(--r); margin: 6px auto 14px; display: block; }

/* --- Result count + sorting --- */
.woocommerce-result-count {
  color: var(--muted); font-size: 14px; margin: 0 0 18px; float: none; display: inline-block;
}
.woocommerce-ordering { float: right; margin: 0 0 18px; }
.woocommerce-ordering select {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 9px 34px 9px 12px;
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
.woocommerce-ordering select:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }

/* --- The product grid --- */
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  clear: both;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product,
ul.products li.product {
  /* 100%, not auto: `auto` leaves the item shrink-wrapping inside its grid
     track in shortcode grids, which collapses cards to min-content width. */
  width: 100%; float: none; margin: 0; padding: 0; clear: none;
}
ul.products li.product::before, ul.products li.product::after { content: none; }

/* Category tiles on the shop root */
ul.products li.product-category .p-card,
ul.products li.product-category a {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
ul.products li.product-category a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
ul.products li.product-category img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg); padding: 14px; }
ul.products li.product-category h2 {
  font-family: var(--display); font-size: 20px; text-transform: uppercase;
  letter-spacing: .4px; margin: 0; padding: 14px 16px 18px; color: var(--ink);
}
ul.products li.product-category .count { color: var(--muted); font-weight: 400; }

/* --- Pagination --- */
.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; border: 0;
}
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
.woocommerce-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover { background: var(--coral); border-color: var(--coral); color: var(--on-coral); }

/* --- Sidebar --- */
.envo-sidebar .widget,
#secondary .widget {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px; margin: 0 0 18px;
}
.envo-sidebar .widget-title,
#secondary .widget-title,
.envo-sidebar .widgettitle,
#secondary .widgettitle {
  font-family: var(--display); font-size: 19px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ink); margin: 0 0 12px;
}
.envo-sidebar .widget ul,
#secondary .widget ul { list-style: none; margin: 0; padding: 0; }
.envo-sidebar .widget li,
#secondary .widget li {
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted);
}
.envo-sidebar .widget li:last-child,
#secondary .widget li:last-child { border-bottom: 0; }
.envo-sidebar .widget a,
#secondary .widget a { color: var(--ink); text-decoration: none; }
.envo-sidebar .widget a:hover,
#secondary .widget a:hover { color: var(--coral-ink); }
.envo-sidebar .children,
#secondary .children { padding-left: 12px; border-left: 2px solid var(--line); margin-top: 6px; }

/* --- Single product --- */
.single-product div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
.single-product div.product .woocommerce-product-gallery { float: none; width: auto; }
.single-product div.product .woocommerce-product-gallery__wrapper img { border-radius: var(--r); }
.single-product div.product .summary { float: none; width: auto; margin: 0; }
.single-product .product_title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05;
  text-transform: uppercase; letter-spacing: .5px; color: var(--ink); margin: 0 0 12px;
}
.single-product .summary .price { font-size: 26px; font-weight: 700; color: var(--ink); margin: 0 0 16px; }
.single-product .summary .price del { color: var(--muted); font-weight: 400; font-size: 18px; }
.single-product .summary .price ins { text-decoration: none; color: var(--action, var(--coral-600)); }
.single-product .woocommerce-product-details__short-description { color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.single-product .quantity input[type="number"] {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 10px; width: 84px; font: inherit;
}
.single-product .single_add_to_cart_button,
.woocommerce #respond input#submit, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button {
  background: var(--coral); color: var(--on-coral); border: 0; border-radius: var(--r-sm);
  padding: 13px 24px; font-weight: 700; letter-spacing: .2px; font-size: 15px;
}
.single-product .single_add_to_cart_button:hover,
.woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover { background: var(--coral-600); color: var(--on-coral); }
.single-product .product_meta { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.single-product .product_meta a { color: var(--ink); }

.woocommerce-tabs { grid-column: 1 / -1; margin-top: 12px; }
.woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 -1px; border-bottom: 1px solid var(--line); }
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { content: none; }
.woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.woocommerce-tabs ul.tabs li a {
  display: block; padding: 12px 18px; font-weight: 600; font-size: 14px;
  color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--coral); }
.woocommerce-tabs .panel { padding-top: 22px; color: var(--muted); line-height: 1.7; }
.woocommerce-tabs .panel h2 { font-family: var(--display); text-transform: uppercase; color: var(--ink); }

.related.products, .upsells.products { grid-column: 1 / -1; margin-top: 40px; }
.related.products > h2, .upsells.products > h2 {
  font-family: var(--display); font-size: 30px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ink); margin: 0 0 20px;
}

/* --- Cart / checkout / account: enough to stop them clashing --- */
.woocommerce table.shop_table { border-radius: var(--r); border-color: var(--line); }
.woocommerce table.shop_table th { font-family: var(--display); text-transform: uppercase; letter-spacing: .5px; color: var(--ink); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--coral); }
.woocommerce-error { border-top-color: var(--coral-ink); }

@media (max-width: 1100px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .single-product div.product { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .woocommerce-ordering { float: none; display: block; }
}

/* Equal-height cards: real product names run to two lines, so the price and
   button have to be pinned to the bottom of the card rather than following the
   text. */
/* Do NOT make the <li> a flex box: in shortcode grids the item is not always a
   direct child of ul.products, and a flex box with auto width shrinks to
   min-content — which stacks product names one letter per line. Stretch the
   card to full height instead. */
ul.products li.product { width: 100%; min-width: 0; }
.product-grid .p-card,
ul.products li.product .p-card { display: flex; flex-direction: column; width: 100%; height: 100%; }
.p-card > .p-link { flex: 1 1 auto; display: flex; flex-direction: column; }
.p-card .p-body { flex: 1 1 auto; }
.p-card .p-foot { margin-top: auto; padding-top: 4px; }
.p-card .p-cart { align-self: flex-start; }

/* WooCommerce's own stylesheet floats the gallery and summary at 48% each, which
   fights the grid above and squeezes both columns to half their cell. Match its
   selector strength to undo it. */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.summary,
.woocommerce div.product .summary.entry-summary {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; }
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 0; }
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li { width: 64px; float: none; margin: 0; list-style: none; }
.woocommerce div.product .product_title { overflow-wrap: break-word; }
.woocommerce div.product form.cart { margin-bottom: 18px; }
.woocommerce div.product form.cart .variations { margin-bottom: 14px; }
.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; background: var(--surface);
}

/* Widget product thumbnails: WooCommerce floats these right by default, which
   reads as a mistake next to left-aligned titles. */
.woocommerce ul.product_list_widget li img,
.woocommerce ul.cart_list li img {
  float: left; width: 46px; height: auto; margin: 0 12px 0 0; border-radius: 6px;
}
.woocommerce ul.product_list_widget li,
.woocommerce ul.cart_list li { overflow: hidden; padding: 10px 0; }
.woocommerce ul.product_list_widget li .product-title { display: block; font-weight: 600; color: var(--ink); }
.woocommerce ul.product_list_widget li .woocommerce-Price-amount { color: var(--muted); font-size: 13px; }

/* Product tabs: match WooCommerce's own selector depth so the default grey
   pill tabs give way to the underline style. */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none; border: 0; border-radius: 0; margin: 0; padding: 0; box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 12px 18px; font-weight: 600; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 -1px; }

/* ==================================================================
   Blog, pages, search and 404
   ================================================================== */

/* --- Shared headings --- */
.single-title,
.entry-title,
.error-template h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.05;
  margin: 0 0 10px;
}
.single-title, .error-template h1 { font-size: clamp(32px, 4vw, 52px); }
.entry-title { font-size: clamp(21px, 2vw, 26px); }
.entry-title a { color: inherit; text-decoration: none; }
.entry-title a:hover { color: var(--coral-ink); }

/* --- Post meta --- */
.article-meta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 13px; color: var(--muted); margin: 0 0 14px;
}
.article-meta a { color: var(--muted); text-decoration: none; }
.article-meta a:hover { color: var(--coral-ink); }
.article-meta .posted-date { font-weight: 600; color: var(--ink); }
.article-meta .comments-meta i { display: none; }

/* --- Archive: horizontal post cards --- */
.content-article { margin: 0 0 20px; }
.news-item.archive-item {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-item.archive-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.news-item.archive-item .news-thumb { margin: 0; height: 100%; }
.news-item.archive-item .news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-item.archive-item .news-thumb:empty { display: none; }
.news-item.archive-item .single-head,
.news-item.archive-item .article-meta,
.news-item.archive-item .post-excerpt { padding-inline: 0 22px; }
.news-item.archive-item .single-head { padding-top: 22px; }
.news-item.archive-item .post-excerpt { padding-bottom: 22px; color: var(--muted); line-height: 1.7; }
.news-item.archive-item .post-excerpt p { margin: 0; }

/* A post with no featured image should not leave a dead column */
.news-item.archive-item:not(:has(.news-thumb img)) { grid-template-columns: 1fr; }
.news-item.archive-item:not(:has(.news-thumb img)) .single-head { padding-left: 22px; }
.news-item.archive-item:not(:has(.news-thumb img)) .article-meta,
.news-item.archive-item:not(:has(.news-thumb img)) .post-excerpt { padding-left: 22px; }

/* --- Single post / page --- */
.single-post-content,
.single-page-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 0 30px;
  overflow: hidden;
}
.single-post-content .news-thumb,
.single-page-content .news-thumb { margin: 0 0 24px; }
.single-post-content .news-thumb:empty,
.single-page-content .news-thumb:empty { margin: 0; }
.single-post-content .news-thumb img,
.single-page-content .news-thumb img { width: 100%; height: auto; display: block; }
.single-post-content .single-head,
.single-page-content .single-head,
.single-post-content .article-meta,
.single-page-content .article-meta,
.single-post-content .single-content,
.single-page-content .single-content { padding-inline: 30px; }
.single-post-content .single-head,
.single-page-content .single-head { padding-top: 8px; }

/* --- Long-form typography --- */
.single-content,
.single-entry-summary {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.75;
}
.single-entry-summary p { margin: 0 0 18px; }
.single-entry-summary h2,
.single-entry-summary h3,
.single-entry-summary h4 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink);
  line-height: 1.1;
  margin: 34px 0 12px;
}
.single-entry-summary h2 { font-size: 32px; }
.single-entry-summary h3 { font-size: 26px; }
.single-entry-summary h4 { font-size: 21px; }
.single-entry-summary a { color: var(--coral-ink); text-decoration: underline; text-underline-offset: 2px; }
.single-entry-summary ul,
.single-entry-summary ol { margin: 0 0 18px; padding-left: 22px; }
.single-entry-summary li { margin-bottom: 8px; }
.single-entry-summary img { border-radius: var(--r); height: auto; }
.single-entry-summary blockquote {
  margin: 24px 0; padding: 18px 22px;
  border-left: 4px solid var(--coral);
  background: var(--bg); border-radius: 0 var(--r) var(--r) 0;
  color: var(--ink); font-size: 17px;
}
.single-entry-summary blockquote p:last-child { margin: 0; }
.single-entry-summary table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.single-entry-summary th,
.single-entry-summary td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.single-entry-summary th { background: var(--bg); font-weight: 600; }
.single-entry-summary code {
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-size: .92em;
}

/* Tags / categories under a post */
.tags-links, .cat-links, .entry-footer { font-size: 13px; color: var(--muted); }
.tags-links a, .cat-links a {
  display: inline-block; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; margin: 0 6px 6px 0;
  color: var(--ink); text-decoration: none; font-size: 12px;
}
.tags-links a:hover, .cat-links a:hover { border-color: var(--coral); color: var(--coral-ink); }

/* --- Post pagination --- */
.pagination, .navigation.pagination, .posts-navigation, .post-navigation { margin: 26px 0 0; }
.pagination .page-numbers, .nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; margin-right: 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none;
}
.pagination .page-numbers.current, .pagination .page-numbers:hover,
.nav-links .page-numbers.current, .nav-links .page-numbers:hover {
  background: var(--coral); border-color: var(--coral); color: var(--on-coral);
}

/* --- Sidebar (Envo markup is aside#sidebar) --- */
#sidebar .widget {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px; margin: 0 0 18px;
}
#sidebar .widget-title h3,
#sidebar .widgettitle {
  font-family: var(--display); font-size: 19px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ink); margin: 0 0 12px;
}
#sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
#sidebar .widget li {
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted);
}
#sidebar .widget li:last-child { border-bottom: 0; }
#sidebar .widget a { color: var(--ink); text-decoration: none; }
#sidebar .widget a:hover { color: var(--coral-ink); }
#sidebar .children { padding-left: 12px; border-left: 2px solid var(--line); margin-top: 6px; }

/* --- Search form --- */
.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1 1 auto; margin: 0; }
.search-field, input[type="search"] {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; font: inherit; background: var(--surface); color: var(--ink);
}
.search-field:focus-visible, input[type="search"]:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
.search-submit {
  border: 0; border-radius: var(--r-sm); background: var(--coral); color: var(--on-coral);
  font-weight: 600; padding: 10px 18px; cursor: pointer;
}
.search-submit:hover { background: var(--coral-600); }

/* --- 404 --- */
.error-template {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 56px 30px;
}
.error-details { color: var(--muted); margin: 0 0 22px; }
.error-template .search-form { max-width: 420px; margin: 0 auto; }

/* --- Comments --- */
.comments-area { margin-top: 32px; }
.comments-area .comment-reply-title,
.comments-area .comments-title {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .5px;
  font-size: 26px; color: var(--ink);
}
.comment-list { list-style: none; padding: 0; margin: 0 0 28px; }
.comment-body {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px; margin-bottom: 14px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px; font: inherit; background: var(--surface);
}
.comment-form .submit {
  border: 0; border-radius: var(--r-sm); background: var(--coral); color: var(--on-coral);
  font-weight: 700; padding: 12px 22px; cursor: pointer;
}

@media (max-width: 900px) {
  .news-item.archive-item { grid-template-columns: 1fr; }
  .news-item.archive-item .single-head,
  .news-item.archive-item .article-meta,
  .news-item.archive-item .post-excerpt { padding-inline: 22px; }
  .single-post-content .single-head,
  .single-page-content .single-head,
  .single-post-content .article-meta,
  .single-page-content .article-meta,
  .single-post-content .single-content,
  .single-page-content .single-content { padding-inline: 20px; }
}

/* Envo floats archive articles two-up at 48% with a nth-of-type margin dance.
   The redesign lists them full width as horizontal cards, so undo the float. */
body .content-article,
body:not(.sidebar-off) .content-article,
body:not(.sidebar-off) .content-article:nth-of-type(2n-1),
.sidebar-off .content-article {
  width: 100%;
  float: none;
  clear: both;
  margin: 0 0 20px;
  box-shadow: none;
}

/* Envo styles the archive heading link directly, at a specificity our generic
   .entry-title rule cannot reach. */
.news-item h2.entry-title,
.news-item h2.entry-title a {
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
.news-item h2.entry-title a:hover { color: var(--coral-ink); }
.news-item { margin-bottom: 0; }

/* Archive card: pin the thumbnail down the left and stack head, meta and
   excerpt in the right column, or the meta row drops under the image. */
.news-item.archive-item {
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
}
.news-item.archive-item .news-thumb { grid-column: 1; grid-row: 1 / -1; }
.news-item.archive-item .single-head { grid-column: 2; grid-row: 1; padding: 22px 22px 0 0; }
.news-item.archive-item .article-meta { grid-column: 2; grid-row: 2; padding: 0 22px 0 0; margin: 0 0 10px; }
.news-item.archive-item .post-excerpt { grid-column: 2; grid-row: 3; padding: 0 22px 22px 0; }

/* "Off" is what Envo prints when comments are closed — noise in a listing. */
.news-item.archive-item .comments-meta { display: none; }

/* The generic search-field rule above must not reach the header's own search,
   which is an icon-inset field. */
.header-tools .search input[type="search"],
.header-tools .search input[type="text"] {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 12px 10px 38px;
  border-radius: inherit;
}
.header-tools .search input[type="search"]:focus-visible { outline: none; }

/* Comments are closed site-wide; Envo still prints the word "Off". */
.article-meta .comments-meta { display: none; }

/* ==================================================================
   WooCommerce Blocks (cart and checkout are block-based on this store)
   ================================================================== */

.wp-block-button__link,
.wc-block-components-button:not(.is-link) {
  background-color: var(--coral);
  color: var(--on-coral);
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2px;
  padding: 13px 24px;
}
.wp-block-button__link:hover,
.wc-block-components-button:not(.is-link):hover {
  background-color: var(--coral-600);
  color: var(--on-coral);
}
.wc-block-components-button.is-link { color: var(--coral-ink); }

.wc-block-cart,
.wc-block-checkout { color: var(--ink); }

.wc-block-components-title,
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink);
}
.wc-block-cart__empty-cart__title { font-size: clamp(28px, 3vw, 40px); }

.wc-block-components-sidebar,
.wc-block-components-totals-wrapper,
.wc-block-cart__totals-title ~ * {
  border-radius: var(--r);
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart .wc-block-cart__sidebar > * {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select .wc-block-components-select__container {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--body);
  color: var(--ink);
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
  outline: 2px solid var(--coral);
  outline-offset: 1px;
  box-shadow: none;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title { color: var(--muted); }
.wc-block-components-checkout-step__title {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink);
}

.wc-block-components-product-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.wc-block-components-product-name:hover { color: var(--coral-ink); }
.wc-block-components-product-price__value { color: var(--ink); font-weight: 700; }
.wc-block-components-totals-item__value { color: var(--ink); font-weight: 700; }
.wc-block-cart-item__image img { border-radius: var(--r-sm); }

/* The cross-sell grid Woo drops under an empty cart */
.wc-block-grid__products { gap: 22px; }
.wc-block-grid__product {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 0 16px;
  overflow: hidden;
}
.wc-block-grid__product-image img { width: 100%; }
.wc-block-grid__product-title {
  font-weight: 600; color: var(--ink); padding: 0 14px; font-size: 15px;
}
.wc-block-grid__product-price { padding: 0 14px; color: var(--muted); }
.wc-block-grid__product-add-to-cart { padding: 0 14px; }

/* Block-based cart and checkout render straight into the page with no wrapper
   of their own, so they need the page padding the other templates carry. */
.woocommerce-cart #rd-content,
.woocommerce-checkout #rd-content,
.woocommerce-account #rd-content { padding: 36px 0 64px; }

/* WooCommerce account and form pages */
.woocommerce-account .woocommerce { max-width: 100%; }
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: 11px 0; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--coral-ink); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px; font: inherit; background: var(--surface); color: var(--ink);
}
.woocommerce form .form-row label { font-size: 14px; color: var(--muted); }
.woocommerce h2, .woocommerce h3 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .5px; color: var(--ink);
}

/* WooCommerce notices: Woo absolutely positions the icon, so the box needs the
   left padding back or the icon sits on the first word. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  background: var(--bg);
  border: 1px solid var(--line);
  border-top-width: 3px;
  border-radius: var(--r);
  padding: 15px 18px 15px 48px;
  margin: 0 0 18px;
  list-style: none;
  color: var(--ink);
}
.woocommerce-message { border-top-color: var(--coral); }
.woocommerce-info { border-top-color: var(--navy-700); }
.woocommerce-error { border-top-color: var(--coral-ink); }
.woocommerce-error li { list-style: none; }

/* ------------------------------------------------------------------
   Sidebar category list (WooCommerce Blocks "Product Categories")
   ------------------------------------------------------------------
   451 discs across 50-odd categories, 30 of them brands, render as one flat
   wall. Give the tree real hierarchy, collapse the sub-lists, and cap the
   height so the sidebar cannot outrun the products beside it. */

.wc-block-product-categories-list,
.wc-block-product-categories-list ul { list-style: none; margin: 0; padding: 0; }

.wc-block-product-categories-list--depth-0 { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.wc-block-product-categories-list--depth-0::-webkit-scrollbar { width: 6px; }
.wc-block-product-categories-list--depth-0::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.wc-block-product-categories-list-item { position: relative; }
.wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item {
  border-bottom: 1px solid var(--line);
}
.wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item:last-child { border-bottom: 0; }

.wc-block-product-categories-list-item > a {
  display: inline-block;
  padding: 9px 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
}
.wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item > a { font-weight: 600; }
.wc-block-product-categories-list-item > a:hover { color: var(--coral-ink); }

.wc-block-product-categories-list-item-count {
  color: var(--muted);
  font-size: 12px;
  margin-left: 5px;
}
.wc-block-product-categories-list-item-count::before { content: "("; }
.wc-block-product-categories-list-item-count::after { content: ")"; }

/* Nested levels */
.wc-block-product-categories-list--depth-1,
.wc-block-product-categories-list--depth-2 {
  margin: 0 0 10px 4px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}
.wc-block-product-categories-list--depth-1 .wc-block-product-categories-list-item > a,
.wc-block-product-categories-list--depth-2 .wc-block-product-categories-list-item > a {
  padding: 5px 0;
  font-weight: 400;
  color: var(--muted);
}
.wc-block-product-categories-list--depth-1 .wc-block-product-categories-list-item > a:hover { color: var(--coral-ink); }

/* Collapse toggle, added by js/site.js */
.rd-has-children > a { padding-right: 34px; }
.rd-cat-toggle {
  position: absolute;
  top: 6px;
  right: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font: 600 15px/1 var(--body);
  cursor: pointer;
}
.rd-cat-toggle:hover { border-color: var(--coral); color: var(--coral-ink); }
.rd-has-children.is-collapsed > ul { display: none; }

/* The active category, so you can see where you are */
.wc-block-product-categories-list-item--active > a,
.wc-block-product-categories-list-item.is-current > a { color: var(--coral-ink); font-weight: 700; }

/* Lay each category row out as one flex line — link, count, toggle — with the
   nested list dropping onto its own full-width line beneath. The toggle was
   absolutely positioned and landed on top of the product count. */
.wc-block-product-categories-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: static;
}
.wc-block-product-categories-list-item > a { flex: 1 1 auto; order: 1; padding-right: 6px; }
.rd-has-children > a { padding-right: 6px; }
.wc-block-product-categories-list-item > .wc-block-product-categories-list-item-count { flex: 0 0 auto; order: 2; }
.wc-block-product-categories-list-item > .rd-cat-toggle { order: 3; }
.wc-block-product-categories-list-item > ul { flex: 0 0 100%; order: 4; }

.rd-cat-toggle {
  position: static;
  flex: 0 0 auto;
  margin-left: 10px;
  width: 24px;
  height: 24px;
}

.rd-cat-toggle { padding: 0; flex: 0 0 24px; min-width: 0; line-height: 1; }

/* ------------------------------------------------------------------
   Header dropdowns — the store's real menu is two levels deep
   ------------------------------------------------------------------ */
.main-nav li { position: relative; }
.main-nav ul { flex-wrap: wrap; }
.main-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 232px;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { display: flex; }
.main-nav .sub-menu li { width: 100%; }
.main-nav .sub-menu a {
  display: block;
  padding: 9px 16px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.main-nav .sub-menu a:hover { background: var(--bg); color: var(--coral-ink); }

/* A parent item gets a caret so the dropdown is discoverable.
   It hangs off the <li>, not the <a> — the anchor's ::after is already the
   coral hover underline, and overriding it turned every parent link's underline
   into a stray coral diamond. */
.main-nav .menu-item-has-children { padding-right: 15px; }
.main-nav .menu-item-has-children::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  color: #dbe3f2;
  opacity: .55;
  pointer-events: none;
}
.main-nav.is-open .menu-item-has-children::after { color: var(--muted); }

/* On mobile the panel is already open, so nest rather than float */
.main-nav.is-open .sub-menu {
  display: flex;
  position: static;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--line);
  min-width: 0;
}
.main-nav.is-open .sub-menu a { padding: 6px 0; }

/* ------------------------------------------------------------------
   The front page's own copy, kept for SEO
   ------------------------------------------------------------------ */
.home-copy .home-copy-inner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 4vw, 44px);
  max-width: 100%;
}
.home-copy .single-entry-summary > *:first-child { margin-top: 0; }
.home-copy .single-entry-summary > *:last-child { margin-bottom: 0; }
.home-copy .single-entry-summary h1 {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 16px;
}
/* Category thumbnails inside the copy sit in a row, not stacked full width */
.home-copy .single-entry-summary img { width: auto; max-width: 220px; border-radius: var(--r-sm); }

/* Envo keeps a second, right-hand header menu (About Us, Blog). Render it in
   the same row, separated by a rule. */
.main-nav ul.main-nav-secondary { margin-left: 8px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.16); }
@media (max-width: 900px) {
  .main-nav.is-open ul.main-nav-secondary {
    margin: 10px 0 0; padding: 10px 0 0 0;
    border-left: 0; border-top: 1px solid var(--line);
  }
}

/* The store's menu is nine items wide — give it the room. */
.main-nav ul { gap: 18px; row-gap: 6px; }
.site-header .search { width: clamp(160px, 18vw, 260px); }
.main-nav ul.main-nav-secondary { margin-left: 6px; padding-left: 16px; }

/* Envo draws its own dropdown arrow on the anchor's ::before (inside a media
   query, which is why a flat stylesheet scan misses it). Ours is on the <li>. */
.main-nav .menu-item-has-children > a::before,
.main-nav .menu-item-has-children > a:before { content: none; display: none; }

/* Product shortcodes declare their own column count — honour it instead of
   forcing four. `[products columns="5"]` appears in the homepage copy. */
.woocommerce ul.products.columns-1, ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }
.woocommerce ul.products.columns-2, ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3, ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-5, ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.woocommerce ul.products.columns-6, ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .woocommerce ul.products.columns-5, ul.products.columns-5,
  .woocommerce ul.products.columns-6, ul.products.columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .woocommerce ul.products[class*="columns-"], ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Woo sizes loop items per column count (`.columns-5 li.product { width: … }`),
   which outranks the plain `ul.products li.product` rule above. Match that
   specificity so grid tracks, not Woo's percentages, decide the width. */
.woocommerce ul.products[class*="columns-"] li.product,
ul.products[class*="columns-"] li.product { width: 100%; }

/* The inner scrollbar was landing on top of the product counts and chopping the
   tree in half. With every branch collapsed by default the list is short enough
   to flow naturally, so drop the fixed height and let it size itself. */
.wc-block-product-categories-list--depth-0 {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* Nested rows: continuous rule down the left, separators that span the whole
   row rather than stopping short of the indent. */
.wc-block-product-categories-list--depth-1,
.wc-block-product-categories-list--depth-2 {
  margin: 2px 0 10px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line);
}
.wc-block-product-categories-list--depth-1 > .wc-block-product-categories-list-item,
.wc-block-product-categories-list--depth-2 > .wc-block-product-categories-list-item {
  border-bottom: 1px solid var(--line);
}
.wc-block-product-categories-list--depth-1 > .wc-block-product-categories-list-item:last-child,
.wc-block-product-categories-list--depth-2 > .wc-block-product-categories-list-item:last-child {
  border-bottom: 0;
}
.wc-block-product-categories-list--depth-1 .wc-block-product-categories-list-item > a,
.wc-block-product-categories-list--depth-2 .wc-block-product-categories-list-item > a { padding: 7px 0; }

/* Social icons turn coral on hover; a white glyph on coral is 2.84:1, under the
   3:1 WCAG asks of graphics. Dark glyph on the same coral is 5.5:1. */
.socials a:hover svg { fill: var(--on-coral); }

/* Two controls were still rendering in Envo/Woo defaults because those rules
   are more specific than the generic ones above. */

/* Pagination: Woo styles the current page as span.current inside its own nav —
   it was rendering muted purple on grey (about 2.6:1). */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  background: var(--coral); border-color: var(--coral); color: var(--on-coral);
}

/* Widget search button */
.search-form input.search-submit,
#sidebar .widget input.search-submit,
.widget_search input.search-submit {
  border: 0; border-radius: var(--r-sm);
  background: var(--coral); color: var(--on-coral);
  font-weight: 700; padding: 10px 18px; cursor: pointer;
}
.search-form input.search-submit:hover,
#sidebar .widget input.search-submit:hover,
.widget_search input.search-submit:hover { background: var(--coral-600); color: var(--on-coral); }