/* ============================================================
   Theme-owned CSS: layout corrections + the top-nav mega menu.

   ---- Full-bleed sections on Direction C pages ----

   main.css gives `main#content` a 1200px max-width, auto margins and
   64px/32px padding. That is correct for the wireframe pages, which are
   single-column documents.

   It is wrong for Direction C. Those pages are built as full-bleed colour
   bands (.hero, .sec-cream, .sec-cyan, .sec-navy) that span the viewport
   and centre their own content with .wrap. Constraining them to a column
   leaves every band floating as a hard-edged rectangle with white gutters
   either side, and adds a 64px white gap under the nav - the "blocky" look.

   Released only for pages flagged .direction-c by the body_class filter in
   functions.php, so the wireframes keep their column.
   ============================================================ */

body.direction-c main#content,
body.theme-droneblocks-2026.direction-c main#content,
body.error404 main#content,
body.theme-droneblocks-2026.error404 main#content,
body.legacy-acf-page main#content,
body.theme-droneblocks-2026.legacy-acf-page main#content {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ============================================================
   Top-nav mega menu.

   Full-width panel under the nav bar, grouped columns, icon + title +
   one-line description per item. Shape follows the current production
   mega-menu, restyled to Direction C.

   Loaded AFTER assets/css/site.css. site.css is generated by
   tools/rc-import.py and gets overwritten on every import, so nothing
   hand-written may live in it - this file is where nav additions go.

   Desktop only by design. site.css hides .nav-links below 980px, so the
   panel disappears with it; the per-page sticky breadcrumb (.sib-tabs)
   is the mobile equivalent and needs no hover.
   ============================================================ */

/* --- Hover geometry -------------------------------------------------
   site.css gives .nav-inner a fixed 72px height and centres its children,
   so a nav item is only as tall as its pill (~37px). The panel, being
   full-bleed, starts at the BOTTOM of the 72px bar. That left ~17px of
   dead space under each pill where the pointer was over neither the item
   nor the panel: hover dropped, the panel went visibility:hidden, and
   because a hidden element is not hit-testable it could not take the
   hover back. Moving the mouse down slowly flickered it.

   Fix: stretch the item to the full height of the bar so its bottom edge
   and the panel's top edge touch. Plain (childless) nav links stay
   centred, so the pills look unchanged. */
.nav-links {
  align-self: stretch;   /* fill the 72px bar */
  align-items: center;   /* but keep plain <a> pills their own height */
}

.nav-links .nav-item {
  align-self: stretch;   /* ...except items with a panel, which fill it */
  display: flex;
  align-items: center;
}

/* The panel is full-bleed, so it anchors to the sticky header rather than
   to the nav item. .nav in site.css is position:sticky, which is already a
   containing block for this. */
.nav {
  position: sticky;
}

.nav-links .nav-item > a.nav-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-caret {
  opacity: .5;
  transition: transform .18s ease, opacity .18s ease;
}

.nav-links .nav-item:hover .nav-caret,
.nav-links .nav-item:focus-within .nav-caret {
  opacity: 1;
  transform: rotate(180deg);
}

.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid rgba(15, 31, 42, .07);
  box-shadow: 0 24px 48px rgba(15, 31, 42, .10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* Insurance on top of the geometry fix: hold `visible` for 200ms after
     the pointer leaves, so the panel stays hit-testable while it fades and
     a brief slip outside it does not dismiss the menu. */
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .2s;
  z-index: 940;
}

.nav-links .nav-item:hover .nav-mega,
.nav-links .nav-item:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}

.nav-mega-grid {
  display: flex;
  gap: 56px;
  padding-top: 34px;
  padding-bottom: 38px;
  align-items: flex-start;
}

.nav-mega-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 0;
  max-width: 380px;
}

.nav-mega-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan, #00A7E1);
  margin: 0 0 12px 2px;
  letter-spacing: .01em;
}

/* Beat site.css's `.nav-links a` pill styling. */
.nav-links .nav-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 12px;
  background: none;
  font-weight: 400;
  font-size: inherit;
  color: inherit;
  transition: background .16s ease;
}

.nav-links .nav-mega-item:hover,
.nav-links .nav-mega-item:focus-visible {
  background: var(--cyan-tint, #e8f6fc);
}

.nav-mega-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 2px;
  color: var(--cyan, #00A7E1);
}

.nav-mega-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.nav-mega-title {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--navy, #003A5D);
  line-height: 1.3;
}

.nav-mega-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #6a8394;
  font-weight: 400;
}

@media (max-width: 1180px) {
  .nav-mega-grid { gap: 32px; }
  .nav-mega-desc { display: none; }   /* titles still readable when tight */
}

@media (prefers-reduced-motion: reduce) {
  .nav-mega,
  .nav-caret {
    transition: none;
  }
}

/* Continuation column of a split group: the heading is repeated to keep the
   columns aligned, but it is not a second heading. Hidden from assistive tech
   in the markup, and invisible here. */
.nav-mega-head-cont {
  visibility: hidden;
}

/* ---- Login + cart, restored from the current production header ---- */

.nav-login {
  font-weight: 600;
  font-size: 15px;
  color: #42586a;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}

.nav-login:hover,
.nav-login:focus-visible {
  background: var(--cyan-tint, #e8f6fc);
  color: var(--navy, #003A5D);
}

.nav-cart {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: var(--navy, #003A5D);
  transition: background .2s, color .2s;
  flex: 0 0 42px;
}

.nav-cart svg { width: 22px; height: 22px; }

.nav-cart:hover,
.nav-cart:focus-visible {
  background: var(--cyan-tint, #e8f6fc);
  color: var(--cyan, #00A7E1);
}

/* The bar is tight at laptop widths once Login and the cart are back.
   Login is the first thing to go - the cart and the two CTAs matter more. */
@media (max-width: 1120px) {
  .nav-login { display: none; }
}

/* ============================================================
   Long-form article typography.

   Applies to anything rendering post_content through the new theme:
   the 128 blog posts, plus pages and programs whose body is not ACF.

   Two things make this necessary rather than cosmetic:

   1. site.css opens with `* { margin:0; padding:0 }`. Direction C pages
      never notice, because they are built from styled sections. Editor
      content does - paragraphs run together with no gap at all.
   2. site.css sets `a { color:inherit; text-decoration:none }`, so links
      inside an article are indistinguishable from body text.

   Nothing here targets Direction C markup, so the designed pages are
   unaffected.
   ============================================================ */

.post-article,
.page-article,
.program-article {
  max-width: 720px;            /* ~68 characters at 18px */
  margin: 0 auto;
  padding: 56px 28px 88px;
}

.post-header,
.page-header,
.program-header {
  margin-bottom: 32px;
}

.post-title,
.page-title,
.program-title {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--navy, #003A5D);
  margin-bottom: 12px;
}

.post-meta {
  font-size: 14px;
  font-weight: 600;
  color: #7b93a3;
}

.post-thumb {
  margin: 0 0 36px;
}

.post-thumb img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

/* ---- the body itself ---- */

.post-content,
.page-content,
.program-content {
  font-size: 18px;
  line-height: 1.72;
  color: #33485a;
}

/* Spacing is applied to the elements themselves, not to direct children.
   Some posts were imported from Squarespace and arrive wrapped in
   <div class="sqs-html-content">, so a `> * + *` rule never reaches the
   paragraphs inside them. */
.post-content p, .page-content p, .program-content p,
.post-content ul, .page-content ul, .program-content ul,
.post-content ol, .page-content ol, .program-content ol,
.post-content figure, .page-content figure, .program-content figure,
.post-content blockquote, .page-content blockquote, .program-content blockquote,
.post-content pre, .page-content pre, .program-content pre,
.post-content table, .page-content table, .program-content table {
  margin-top: 1.15em;          /* rhythm the global reset removed */
}

.post-content .sqs-html-content,
.page-content .sqs-html-content,
.program-content .sqs-html-content {
  margin-top: 1.15em;
}

.post-content > :first-child, .page-content > :first-child, .program-content > :first-child,
.sqs-html-content > :first-child {
  margin-top: 0;
}

/* Imported posts often carry a second <h1> in the body. The page title is
   already the h1, so demote it visually rather than let two compete. */
.post-content h1, .page-content h1, .program-content h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--navy, #003A5D);
  margin-top: 1.9em;
  margin-bottom: .5em;
}

.post-content h2, .page-content h2, .program-content h2,
.post-content h3, .page-content h3, .program-content h3,
.post-content h4, .page-content h4, .program-content h4 {
  color: var(--navy, #003A5D);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin-top: 1.9em;
  margin-bottom: .5em;
}

.post-content h2, .page-content h2, .program-content h2 { font-size: 28px; }
.post-content h3, .page-content h3, .program-content h3 { font-size: 22px; }
.post-content h4, .page-content h4, .program-content h4 { font-size: 19px; }

/* Links have to be visible: site.css strips colour and underline. */
.post-content a, .page-content a, .program-content a {
  color: var(--navy, #003A5D);
  text-decoration: underline;
  text-decoration-color: rgba(0, 167, 225, .55);
  text-underline-offset: 3px;
  font-weight: 600;
}

.post-content a:hover, .page-content a:hover, .program-content a:hover {
  color: var(--cyan, #00A7E1);
  text-decoration-color: var(--cyan, #00A7E1);
}

.post-content ul, .page-content ul, .program-content ul,
.post-content ol, .page-content ol, .program-content ol {
  padding-left: 1.4em;
}

.post-content li + li, .page-content li + li, .program-content li + li {
  margin-top: .45em;
}

.post-content li, .page-content li, .program-content li {
  list-style: revert;          /* the global reset also killed bullets */
}

.post-content img, .page-content img, .program-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.post-content figure, .page-content figure, .program-content figure { margin: 1.8em 0; }

.post-content figcaption, .page-content figcaption, .program-content figcaption {
  font-size: 14px;
  color: #7b93a3;
  margin-top: 10px;
}

.post-content blockquote, .page-content blockquote, .program-content blockquote {
  border-left: 3px solid var(--cyan, #00A7E1);
  padding: 2px 0 2px 22px;
  color: var(--navy, #003A5D);
  font-size: 20px;
  font-weight: 600;
}

.post-content code, .page-content code, .program-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: #eef4f7;
  padding: 2px 6px;
  border-radius: 5px;
}

.post-content pre, .page-content pre, .program-content pre {
  background: var(--navy, #003A5D);
  color: #e8f6fc;
  padding: 20px 22px;
  border-radius: 14px;
  overflow-x: auto;            /* the block scrolls, never the page */
}

.post-content pre code, .page-content pre code, .program-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Wide tables scroll inside their own box rather than pushing the page. */
.post-content table, .page-content table, .program-content table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  font-size: 16px;
}

.post-content th, .page-content th, .program-content th,
.post-content td, .page-content td, .program-content td {
  border-bottom: 1px solid rgba(15, 31, 42, .1);
  padding: 10px 12px;
  text-align: left;
}

.post-content hr, .page-content hr, .program-content hr {
  border: 0;
  border-top: 1px solid rgba(15, 31, 42, .12);
  margin: 2.4em 0;
}

@media (max-width: 620px) {
  .post-article, .page-article, .program-article { padding: 36px 20px 64px; }
  .post-content, .page-content, .program-content { font-size: 17px; }
}

/* ============================================================
   Grade floor callout (#23).

   "Grade 6 is a hard floor for real DEXI-3 flight - state it plainly,
   do not hedge." A purchase-decision fact: buying DEXI-3 for a 4th-grade
   class is a returned order and an unhappy teacher. As plain body text it
   is skimmable, so it gets a quiet amber rule to stop the eye without
   shouting.
   ============================================================ */

.gradefloor {
  font-size: 15.5px;
  line-height: 1.6;
  color: #3d5567;
  background: #fff;
  border: 1px solid rgba(15, 31, 42, .1);
  border-left: 4px solid var(--amber, #ffb000);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 26px;
  max-width: 580px;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(15, 31, 42, .08));
}

.gradefloor strong { color: var(--navy, #003A5D); }

/* site.css strips link colour and underline globally. */
.gradefloor a {
  color: var(--navy, #003A5D);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 167, 225, .55);
  text-underline-offset: 3px;
}

.gradefloor a:hover { color: var(--cyan, #00A7E1); }

/* ============================================================
   404. Built to recover the visit, not to apologise for it.
   ============================================================ */

.is-404 .kicker { color: var(--amber, #ffb000); }

.e404-search {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin-top: 28px;
}

.e404-search input {
  flex: 1 1 auto;
  font: inherit;
  font-size: 16px;
  padding: 13px 18px;
  border: 1px solid rgba(15, 31, 42, .16);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #0f1f2a);
}

.e404-search input:focus {
  outline: 3px solid rgba(0, 167, 225, .35);
  outline-offset: 1px;
  border-color: var(--cyan, #00A7E1);
}

.e404-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.e404-card {
  display: block;
  background: #fff;
  border: 1px solid rgba(15, 31, 42, .1);
  border-radius: 22px;
  padding: 26px 24px;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(15, 31, 42, .08));
  transition: transform .18s ease, box-shadow .2s ease;
}

.e404-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md, 0 14px 38px rgba(15, 31, 42, .12));
}

.e404-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--navy, #003A5D);
  letter-spacing: -.015em;
  margin-bottom: 8px;
}

.e404-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5d7484;
  margin-bottom: 14px;
}

.e404-card .go {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cyan, #00A7E1);
}

.e404-help {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 40px;
  align-items: center;
}

.e404-help-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 1000px) { .e404-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .e404-help { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 540px)  { .e404-grid { grid-template-columns: 1fr; } .e404-search { flex-direction: column; } }

/* ============================================================
   WooCommerce archive pages.

   The shop is a WP Page, so it was rendering inside .page-article and
   inheriting the 720px reading measure meant for prose. A four-column
   product grid inside a reading column is why the store looked cramped
   and left-shifted. Reading measures are for reading.

   Styling below is deliberately minimal - enough that the store reads as
   part of the site rather than as a stock plugin. Restyling checkout is
   still out of scope (#44); this is the browsing surface, which is a
   navigation problem more than a cosmetic one.
   ============================================================ */

body.woocommerce-page main#content,
body.theme-droneblocks-2026.woocommerce-page main#content {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-page .page-article,
body.woocommerce-page .post-article {
  max-width: 1200px;
  padding: 44px 28px 80px;
}

body.woocommerce-page .page-title {
  font-size: clamp(32px, 4.4vw, 46px);
  margin-bottom: 6px;
}

.woocommerce .woocommerce-result-count { color: #6a8394; font-size: 14.5px; }

.woocommerce .woocommerce-ordering select {
  font: inherit;
  font-size: 14.5px;
  padding: 8px 12px;
  border: 1px solid rgba(15, 31, 42, .16);
  border-radius: 999px;
  background: #fff;
}

/* ---- the product grid ---- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }   /* kill the float clearfix */

.woocommerce ul.products li.product {
  width: auto !important;      /* Woo hard-codes percentage widths for floats */
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 31, 42, .1);
  border-radius: 20px;
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(15, 31, 42, .08));
  transition: transform .18s ease, box-shadow .2s ease;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md, 0 14px 38px rgba(15, 31, 42, .12));
}

/* One aspect ratio for every thumbnail: the catalogue mixes white-background
   studio shots with dark in-flight photography, and ragged heights were
   pushing every price and button out of alignment. */
.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f4f8fa;
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 8px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy, #003A5D);
  padding: 0;
  margin-bottom: 10px;
}

/* Woo wraps the image, title and price in ONE anchor, with the button as a
   sibling. So the anchor has to be the flex column, or there is no free space
   for the price to push against and prices land at ragged heights across a row
   whenever the titles differ in length. Which they always do. */
.woocommerce ul.products li.product > a:not(.button) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Pushes price and button to the bottom so they line up across the row
   however long the titles run. */
.woocommerce ul.products li.product .price {
  margin-top: auto;
  padding-top: 6px;
  color: var(--navy, #003A5D);
  font-size: 16px;
  font-weight: 800;
}

/* The struck-through regular price sits on its own line above the sale price.
   Inline, a two-range sale reads as one long unbroken run of digits. */
.woocommerce ul.products li.product .price del,
.flagship-price del {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  opacity: .5;
  margin-bottom: 1px;
}

.woocommerce ul.products li.product .price ins,
.flagship-price ins { text-decoration: none; }

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button {
  display: block;
  margin-top: 14px;
  background: var(--navy, #003A5D);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  transition: background .2s ease;
}

.woocommerce ul.products li.product .button:hover { background: var(--cyan, #00A7E1); }

.woocommerce span.onsale {
  background: var(--cyan, #00A7E1);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  top: 10px;
  left: 10px;
  margin: 0;
}

@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* The struck-through regular price sits on its own line above the sale price.
   Inline, a two-range sale reads as one long unbroken run of digits. */
.woocommerce ul.products li.product .price del,
.flagship-price del {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  opacity: .5;
  margin-bottom: 1px;
}

.woocommerce ul.products li.product .price ins,
.flagship-price ins { text-decoration: none; }

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button {
  display: block;
  margin-top: 14px;
  background: var(--navy, #003A5D);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  transition: background .2s ease;
}

.woocommerce ul.products li.product .button:hover { background: var(--cyan, #00A7E1); }

.woocommerce span.onsale {
  background: var(--cyan, #00A7E1);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  top: 10px;
  left: 10px;
  margin: 0;
}

@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* ---- store landing page: intro, flagship, catalogue heading ---- */

.shop-hero { padding: 64px 0 8px; }
.shop-hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.04; margin: 8px 0 14px; }
.shop-hero .sub { max-width: 680px; font-size: 19px; line-height: 1.55; color: #4a6472; }

.shop-flagship .lead-2 { max-width: 760px; margin-bottom: 34px; }

.flagship-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(15, 31, 42, .1);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 14px 38px rgba(15, 31, 42, .12));
}

.flagship-media { background: #f4f8fa; }
.flagship-media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }

.flagship-body { padding: 40px 40px 44px; align-self: center; }
.flagship-body h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin-bottom: 10px; }
.flagship-price { font-size: 20px; font-weight: 800; color: var(--navy, #003A5D); margin-bottom: 16px; }
.flagship-price del { opacity: .5; font-weight: 500; }
.flagship-price ins { text-decoration: none; }
.flagship-excerpt { color: #4a6472; line-height: 1.6; margin-bottom: 26px; }

.shop-catalogue-head { padding-top: 72px; }
.shop-catalogue-head .big { margin: 0; }

/* The catalogue article keeps the released width but loses the duplicate top
   padding, because the heading section above it already provides the gap. */
body.woocommerce-page .page-article.shop-catalogue { padding-top: 18px; }

@media (max-width: 860px) {
  .flagship-card { grid-template-columns: 1fr; }
  .flagship-body { padding: 30px 26px 34px; }
}

/* ============================================================
   Store landing page.

   Spacing is tighter than the marketing pages on purpose. Those are read top
   to bottom and earn their air; a catalogue is scanned, and a full viewport of
   whitespace between the title and the first product just costs a scroll.
   ============================================================ */

.shop-hero { padding: 44px 0 8px; }
.shop-hero h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.05; margin: 4px 0 12px; }
.shop-hero .sub { max-width: 620px; font-size: 18px; line-height: 1.5; color: #4a6472; margin-bottom: 34px; }

section.pad.shop-featured { padding: 52px 0 56px; }
.shop-featured .kicker { margin-bottom: 10px; }
.shop-featured .big { margin-bottom: 12px; }
.shop-featured .lead-2 { max-width: 720px; margin-bottom: 30px; }

.featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.featured-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 31, 42, .1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(15, 31, 42, .08));
  transition: transform .18s ease, box-shadow .2s ease;
}

.featured-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 14px 38px rgba(15, 31, 42, .12)); }

.featured-media { display: block; background: #f4f8fa; }
.featured-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

.featured-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.featured-body h3 { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
.featured-body h3 a { color: var(--navy, #003A5D); text-decoration: none; }
.featured-body h3 a:hover { color: var(--cyan, #00A7E1); }
.featured-price { font-size: 18px; font-weight: 800; color: var(--navy, #003A5D); margin-bottom: 12px; }
.featured-price del { display: block; font-size: 13.5px; font-weight: 500; opacity: .5; }
.featured-price ins { text-decoration: none; }
.featured-excerpt { color: #4a6472; line-height: 1.55; font-size: 15px; margin-bottom: 20px; }
.featured-cta { margin-top: auto; align-self: flex-start; }

.shop-catalogue-head { padding-top: 52px; }
.shop-catalogue-head .big { margin: 0; }
body.woocommerce-page .page-article.shop-catalogue { padding-top: 14px; }

@media (max-width: 800px) { .featured-grid { grid-template-columns: 1fr; } }


/* ============================================================
   Single product page.

   Everything below fixes WooCommerce's own defaults, which arrive unstyled in
   an unsupported theme: a purple button, an olive price, a quantity field as
   wide as the column, and gallery thumbnails with no gutter between them.
   ============================================================ */

body.single-product .summary p.price,
body.single-product .summary .price {
  color: var(--navy, #003A5D);
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 18px;
}

/* Woo colours the variation price block separately from the summary price, so
   without this the struck-through "was" price came out olive under a navy one. */
body.single-product .summary .price del,
body.single-product .woocommerce-variation-price .price del {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy, #003A5D);
  opacity: .45;
}

body.single-product .summary .price ins,
body.single-product .woocommerce-variation-price .price ins { text-decoration: none; }
body.single-product .woocommerce-variation-price .price { color: var(--navy, #003A5D); font-size: 22px; font-weight: 800; }

body.single-product .woocommerce-product-details__short-description { color: #41596a; line-height: 1.6; }

/* Variations: label above the control, not crammed beside it in a table cell. */
body.single-product table.variations { width: 100%; border: 0; margin: 22px 0 6px; }
body.single-product table.variations tbody,
body.single-product table.variations tr,
body.single-product table.variations th,
body.single-product table.variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
body.single-product table.variations th.label { margin-bottom: 6px; }
body.single-product table.variations th.label label { font-weight: 700; color: var(--navy, #003A5D); }
body.single-product table.variations td.value { margin-bottom: 14px; }

body.single-product div.product form.cart .variations select {
  font: inherit;
  font-size: 15px;
  width: 100%;
  max-width: 340px;
  padding: 11px 14px;
  border: 1px solid rgba(15, 31, 42, .18);
  border-radius: 12px;
  background: #fff;
}

body.single-product .reset_variations { font-size: 13.5px; }

/* Quantity and button on one line. Woo ships them stacked, with the quantity
   field stretched to the full column and the button shrink-wrapped under it. */
body.single-product form.cart:not(.variations_form),
body.single-product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* The legacy stylesheet ships `.qty,.quantity{width:100%!important}`. It is
   still enqueued on product pages because they carry legacy ACF content, so
   these two need !important purely to answer it. Nothing else here does. */
body.single-product .quantity {
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto;
}

body.single-product .quantity input.qty {
  width: 88px !important;
  font: inherit;
  font-size: 16px;
  text-align: center;
  padding: 12px 8px;
  border: 1px solid rgba(15, 31, 42, .18);
  border-radius: 12px;
  background: #fff;
}

/* .alt is on the button, and Woo styles `.woocommerce button.button.alt` at a
   higher specificity than a plain class selector can reach. Matching .alt here
   rather than reaching for !important, which would then have to be fought again
   by anything that legitimately needs to override this later. */
body.single-product button.single_add_to_cart_button.alt,
body.single-product .single_add_to_cart_button {
  background: var(--navy, #003A5D);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 58, 93, .28);
  transition: background .2s ease;
}

body.single-product button.single_add_to_cart_button.alt:hover,
body.single-product .single_add_to_cart_button:hover { background: var(--cyan, #00A7E1); }
body.single-product button.single_add_to_cart_button.alt.disabled,
body.single-product .single_add_to_cart_button.disabled {
  background: var(--navy, #003A5D);
  opacity: .4;
  box-shadow: none;
  cursor: not-allowed;
}

body.single-product .product_meta {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 31, 42, .1);
  font-size: 14px;
  color: #6a8394;
}
body.single-product .product_meta > span { display: block; margin-bottom: 4px; }
body.single-product .product_meta a { color: var(--navy, #003A5D); }

/* Gallery: Woo floats the thumbnails at 25% with no gutter, so they butt up
   against each other in one unbroken strip. */
body.single-product .woocommerce-product-gallery { margin-bottom: 8px; }
body.single-product .woocommerce-product-gallery__wrapper img { border-radius: 16px; }

body.single-product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

body.single-product .flex-control-thumbs li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  list-style: none;
}

body.single-product .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  opacity: .6;
  cursor: pointer;
  transition: opacity .18s ease;
}

body.single-product .flex-control-thumbs img:hover,
body.single-product .flex-control-thumbs img.flex-active { opacity: 1; }

/* Cross-sells sit at the end of the page, after the product's own story, and
   read as a separate section rather than an interruption in it. */
.woocommerce .upsells.products,
.woocommerce .related.products {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(15, 31, 42, .12);
  clear: both;
}

.woocommerce .upsells.products > h2,
.woocommerce .related.products > h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--navy, #003A5D);
  margin-bottom: 24px;
}


/* ============================================================
   "Package Includes" (legacy ACF all-package layout).

   Every selector is scoped under .pkg-section on purpose. This block renders
   inside .post-content on product pages, where the article typography rules
   above it style h3 at 22px with a 1.9em top margin. Those are right for a
   blog post and wrong for a card, and being one class deeper they were winning
   against a bare .pkg-item-title.
   ============================================================ */

.pkg-section { padding: 52px 0 8px; }

.pkg-section .pkg-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--navy, #003A5D);
  margin: 0 0 24px;
  padding: 0;
}

.pkg-section .pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkg-section .pkg-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(15, 31, 42, .1);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0;
  list-style: none;
}

.pkg-section .pkg-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--cyan-tint, #e8f6fc);
  overflow: hidden;
}

.pkg-section .pkg-check img { width: 17px; height: 17px; display: block; object-fit: contain; }
.pkg-section .pkg-body { min-width: 0; }

.pkg-section .pkg-item-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy, #003A5D);
  margin: 0 0 4px;
  padding: 0;
  line-height: 1.35;
}

.pkg-section .pkg-item-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5a7383;
  margin: 0;
  padding: 0;
}

@media (max-width: 780px) { .pkg-section .pkg-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Vertical rhythm.

   Section padding was set per section without anyone measuring what happens
   where two of them meet. A hero closes with 76px of its own padding and the
   section under it opens with 96 or 116, so every page carried a 172px to
   192px band of nothing between the headline block and the first real content.
   On a 1000px viewport that is a fifth of the screen spent on a gap.

   These are pair rules: they only fire where two paddings stack, so a section
   that stands on its own keeps its air.
   ============================================================ */

body.direction-c .hero { padding-bottom: 52px; }

body.direction-c .hero + section.pad,
body.direction-c .hero + section.pad-lg,
body.direction-c .hero + section { padding-top: 56px; }

/* Consecutive full-width bands double up the same way, just less severely. */
body.direction-c section.pad + section.pad { padding-top: 72px; }
body.direction-c section.pad-lg + section.pad-lg { padding-top: 84px; }

/* A hero with no second column leaves the right half of a 1200px wrap empty
   while the copy is squeezed into a 520px measure. Give single-column heroes
   a wider measure so the text sits in the space rather than hugging the edge.
   Two-column heroes keep the narrow measure: they need the room for the card. */
body.direction-c .hero .wrap:not(.hero-grid) .sub { max-width: 780px; }
body.direction-c .hero .wrap:not(.hero-grid) .lede { max-width: 760px; }

@media (max-width: 900px) {
  body.direction-c .hero { padding-bottom: 40px; }
  body.direction-c .hero + section { padding-top: 44px; }
}