/*
Theme Name: Mokasec Retail
Description: Astra child theme for the Mokasec four-category retail storefront.
Author: Mokasec
Template: astra
Version: 1.1.0
Text Domain: convar
Requires PHP: 8.0
*/

:root {
  --cv-bg: #FFFFFF;
  --cv-surface: #FAFAF8;
  --cv-text: #1A1A1A;
  --cv-text-muted: #6B6B6B;
  --cv-accent: #0F6B4F;
  --cv-border: #E3E3E0;
  --cv-radius: 2px;
  --cv-btn-h: 52px;
  --cv-grid-cols: 3;
  --cv-card-w: 384px;
  --cv-image-ratio: 3/4;
  /* System font stack: no webfont file is shipped or fetched, so no
     @font-face, no preload and no swap period is needed. */
  --cv-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --cv-fs-1: 12px;
  --cv-fs-2: 14px;
  --cv-fs-3: 16px;
  --cv-fs-4: 20px;
  --cv-fs-5: 32px;
  --cv-fs-6: 56px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cv-bg);
  color: var(--cv-text);
  font-family: var(--cv-font);
  font-size: var(--cv-fs-3);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--cv-fs-6);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 16px;
}

h2 {
  font-size: var(--cv-fs-5);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
}

h3 {
  font-size: var(--cv-fs-4);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 12px;
}

p {
  margin: 0 0 16px;
}

a {
  color: var(--cv-accent);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--cv-accent);
  outline-offset: 2px;
}

.cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--cv-btn-h);
  padding: 0 32px;
  border: 0;
  border-radius: var(--cv-radius);
  background: var(--cv-accent);
  color: #FFFFFF;
  font-family: var(--cv-font);
  font-size: var(--cv-fs-3);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  box-shadow: none;
  cursor: pointer;
}

.cv-btn:hover,
.cv-btn:focus {
  background: var(--cv-accent);
  color: #FFFFFF;
  text-decoration: none;
  opacity: 0.9;
}

.cv-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(var(--cv-grid-cols), minmax(0, var(--cv-card-w)));
  gap: 24px;
  max-width: 1216px;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
  list-style: none;
}

.cv-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cv-bg);
  box-shadow: none;
}

.cv-card__media {
  display: block;
  width: 100%;
  aspect-ratio: var(--cv-image-ratio);
  overflow: hidden;
  background: var(--cv-surface);
}

.cv-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.cv-card__title {
  margin: 0;
  font-size: var(--cv-fs-3);
  font-weight: 500;
  line-height: 1.4;
}

.cv-card__title a {
  color: var(--cv-text);
}

.cv-card__price {
  font-size: var(--cv-fs-3);
  color: var(--cv-text);
}

.cv-card__quote {
  font-size: var(--cv-fs-3);
  color: var(--cv-text-muted);
}

.cv-archive-header {
  max-width: 1216px;
  margin: 0 auto 32px;
  padding: 48px 8px 0;
}

.cv-archive-intro {
  max-width: 720px;
  font-size: var(--cv-fs-3);
  color: var(--cv-text-muted);
}

.cv-archive-empty {
  max-width: 1216px;
  margin: 0 auto;
  padding: 0 8px 48px;
  font-size: var(--cv-fs-3);
  color: var(--cv-text-muted);
}

.cv-pagination {
  max-width: 1216px;
  margin: 48px auto 0;
  padding: 0 8px;
}

/* Category landing pages: eyebrow, intro slot, card specifications. */

.cv-archive-eyebrow {
  margin: 0 0 12px;
  font-size: var(--cv-fs-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cv-text-muted);
}

.cv-archive-intro__pending {
  margin: 0;
}

.cv-card__specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cv-fs-2);
  color: var(--cv-text-muted);
}

.cv-card__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  line-height: 1.45;
}

.cv-card__spec-label::after {
  content: ":";
}

.cv-card__spec-value {
  color: var(--cv-text);
}

/* Fingerprint landing page: section blocks, grid heading, FAQ, size links. */

.cv-page-sections {
  max-width: 1216px;
  margin: 0 auto 48px;
  padding: 0 8px;
}

.cv-page-section {
  max-width: 720px;
  padding: 24px 0;
  border-top: 1px solid var(--cv-border);
}

.cv-page-section__heading {
  font-size: var(--cv-fs-4);
  line-height: 1.3;
  margin: 0 0 12px;
}

.cv-page-section__body {
  font-size: var(--cv-fs-3);
  color: var(--cv-text-muted);
}

.cv-page-section__body p {
  margin: 0 0 12px;
}

.cv-page-section__body p:last-child {
  margin-bottom: 0;
}

.cv-page-grid-heading {
  max-width: 1216px;
  margin: 0 auto 24px;
  padding: 0 8px;
  font-size: var(--cv-fs-4);
  line-height: 1.3;
}

.cv-faq {
  max-width: 1216px;
  margin: 64px auto 0;
  padding: 0 8px;
}

.cv-faq__heading {
  max-width: 720px;
  font-size: var(--cv-fs-4);
  line-height: 1.3;
  margin: 0 0 16px;
}

.cv-faq__list {
  max-width: 720px;
  margin: 0;
}

.cv-faq__item {
  padding: 20px 0;
  border-top: 1px solid var(--cv-border);
}

.cv-faq__q {
  margin: 0 0 8px;
  font-size: var(--cv-fs-3);
  font-weight: 500;
  color: var(--cv-text);
}

.cv-faq__a {
  margin: 0;
  font-size: var(--cv-fs-3);
  color: var(--cv-text-muted);
}

.cv-faq__a p {
  margin: 0;
}

.cv-related {
  max-width: 1216px;
  margin: 48px auto 64px;
  padding: 0 8px;
}

.cv-related__heading {
  font-size: var(--cv-fs-4);
  line-height: 1.3;
  margin: 0 0 12px;
}

.cv-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cv-fs-3);
}

/* Grid columns: three 384px cards need 1200px of content width. */
@media (max-width: 1247px) {
  .cv-grid {
    grid-template-columns: repeat(2, minmax(0, var(--cv-card-w)));
  }
}

@media (max-width: 879px) {
  .cv-grid {
    /* One column capped at the locked card width: at 414px the content box is
       398px, so an uncapped 1fr column would stretch a card 14px past 384. */
    grid-template-columns: minmax(0, var(--cv-card-w));
  }
}

@media (max-width: 900px) {
  h1 {
    font-size: var(--cv-fs-5);
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: var(--cv-fs-4);
  }
}

/* Single product page: 3:4 media, dual-unit parameter sections, quote path. */

.cv-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  align-items: start;
}

.cv-product__media {
  min-width: 0;
}

.cv-product__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--cv-image-ratio);
  overflow: hidden;
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
}

.cv-product__frame img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

/* W9-T1: pointer-device magnifier on the product frame. Touch devices keep native pinch-zoom. */
@media (hover: hover) and (pointer: fine) {
  .cv-product__frame {
    cursor: zoom-in;
  }

  .cv-product__frame img {
    transition: transform 220ms ease-out;
    transform-origin: center center;
    will-change: transform;
  }

  .cv-product__frame:hover img,
  .cv-product__frame:focus-within img {
    transform: scale(1.9);
  }

  .cv-product__frame img.cv-media-placeholder {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cv-product__frame img {
    transition: none;
  }
}

.cv-product__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.cv-product__thumb {
  aspect-ratio: var(--cv-image-ratio);
  overflow: hidden;
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
}

.cv-product__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.cv-product__summary {
  min-width: 0;
}

.cv-product__title {
  margin: 0 0 8px;
}

.cv-product__sku {
  margin: 0 0 24px;
  font-size: var(--cv-fs-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cv-text-muted);
}

.cv-product__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 24px;
  font-size: var(--cv-fs-4);
}

.cv-product__amount {
  font-weight: 600;
}

.cv-product__currency,
.cv-product__quote {
  font-size: var(--cv-fs-2);
  color: var(--cv-text-muted);
}

.cv-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}

.cv-product__actions .single_add_to_cart_button {
  height: var(--cv-btn-h);
  padding: 0 32px;
  border: 0;
  border-radius: var(--cv-radius);
  background: var(--cv-accent);
  color: #FFFFFF;
  font-family: var(--cv-font);
  font-size: var(--cv-fs-3);
  font-weight: 500;
  line-height: 1;
}

.cv-product__actions .single_add_to_cart_button:hover,
.cv-product__actions .single_add_to_cart_button:focus {
  background: var(--cv-accent);
  color: #FFFFFF;
  opacity: 0.9;
}

.cv-product__intro {
  font-size: var(--cv-fs-3);
  color: var(--cv-text-muted);
}

.cv-btn--outline {
  border: 1px solid var(--cv-accent);
  background: var(--cv-bg);
  color: var(--cv-accent);
}

.cv-btn--outline:hover,
.cv-btn--outline:focus {
  background: var(--cv-bg);
  color: var(--cv-accent);
  text-decoration: none;
}

.cv-product__specs {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.cv-spec {
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  background: var(--cv-bg);
}

.cv-spec__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--cv-btn-h);
  padding: 0 20px;
  font-size: var(--cv-fs-3);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.cv-spec__summary::-webkit-details-marker {
  display: none;
}

.cv-spec__summary::after {
  content: "+";
  font-size: var(--cv-fs-4);
  color: var(--cv-text-muted);
}

.cv-spec[open] .cv-spec__summary::after {
  content: "\2212";
}

.cv-spec__list {
  margin: 0;
  padding: 4px 20px 16px;
}

.cv-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 4px 24px;
  padding: 12px 0;
  border-top: 1px solid var(--cv-border);
}

.cv-spec__label {
  margin: 0;
  font-size: var(--cv-fs-2);
  color: var(--cv-text-muted);
}

.cv-spec__value {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0;
  font-size: var(--cv-fs-3);
  color: var(--cv-text);
}

.cv-spec__imperial {
  color: var(--cv-text-muted);
}

@media (max-width: 900px) {
  .cv-product {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 24px;
  }
}

@media (max-width: 600px) {
  .cv-product__thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cv-spec__row {
    grid-template-columns: 1fr;
  }
}

/* Quote page: inquiry form, status panel, privacy note. */
.cv-inquiry {
  max-width: 640px;
  margin: 40px 0 56px;
}

.cv-inquiry__heading {
  font-size: var(--cv-fs-5);
  margin: 0 0 16px;
}

.cv-inquiry-form__required-note {
  margin: 0 0 24px;
  font-size: var(--cv-fs-2);
  color: var(--cv-text-muted);
}

.cv-inquiry-form__field {
  margin: 0 0 20px;
}

.cv-inquiry-form__label {
  display: block;
  margin: 0 0 6px;
  font-size: var(--cv-fs-2);
  font-weight: 500;
  color: var(--cv-text);
}

.cv-inquiry-form__required-mark {
  color: var(--cv-accent);
}

.cv-inquiry-form__input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  background: var(--cv-bg);
  color: var(--cv-text);
  font-family: var(--cv-font);
  font-size: var(--cv-fs-3);
  line-height: 1.4;
}

.cv-inquiry-form__input:focus {
  border-color: var(--cv-accent);
}

.cv-inquiry-form__textarea {
  min-height: 140px;
  resize: vertical;
}

.cv-inquiry-form__field--error .cv-inquiry-form__input {
  border: 2px solid var(--cv-text);
}

.cv-inquiry-form__error {
  margin: 6px 0 0;
  font-size: var(--cv-fs-2);
  font-weight: 500;
  color: var(--cv-text);
}

.cv-inquiry-form__hint {
  margin: 6px 0 0;
  font-size: var(--cv-fs-1);
  color: var(--cv-text-muted);
}

.cv-inquiry-form__status {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--cv-accent);
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
  font-size: var(--cv-fs-2);
}

.cv-inquiry-form__status--error {
  border-color: var(--cv-text);
}

.cv-inquiry-form__actions {
  margin: 8px 0 0;
}

.cv-inquiry-form__submit {
  width: 100%;
}

.cv-inquiry__privacy {
  margin: 32px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--cv-border);
}

.cv-inquiry__privacy-heading {
  font-size: var(--cv-fs-3);
  margin: 0 0 8px;
}

.cv-inquiry__privacy-body {
  margin: 0;
  font-size: var(--cv-fs-2);
  color: var(--cv-text-muted);
}

@media (min-width: 720px) {
  .cv-inquiry-form__submit {
    width: auto;
    min-width: 240px;
  }
}

/* Layout reservation: a fixed box for every element that can arrive late. */

/* Card title: 2 lines at 16px / 1.4 = 2 x 22.4 = 44.8px. */
.cv-card__title {
  min-height: calc(2 * 1.4 * var(--cv-fs-3));
  overflow-wrap: break-word;
}

/* Touch target for the title link: 44px even when the name is one line. */
.cv-card__title a {
  display: block;
  min-height: 44px;
}

/* Price slot: 16px / 1.6 = 25.6px, the same height for a price and for the
   quote label, so a card that switches between the two never changes height. */
.cv-card__price {
  line-height: 1.6;
  min-height: calc(1.6 * var(--cv-fs-3));
}

/* Specification block: 3 rows at 14px / 1.45 = 3 x 20.3 = 60.9px plus
   2 x 4px gap = 68.9px, which is the tallest card body the renderer allows. */
.cv-card__specs {
  min-height: calc(3 * 1.45 * var(--cv-fs-2) + 2 * 4px);
}

.cv-card__spec-value,
.cv-spec__value {
  overflow-wrap: anywhere;
}

/* Media box: the inline placeholder fills the same frame as a real file, so
   swapping one for the other moves nothing. */
.cv-card__media svg,
.cv-product__frame svg,
.cv-product__thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Breadcrumb bar: 14px / 1.6 = 22.4px, one line; an empty bar keeps no gap. */
.woocommerce-breadcrumb,
.ast-breadcrumbs {
  min-height: calc(1.6 * var(--cv-fs-2));
}

.woocommerce-breadcrumb:empty,
.ast-breadcrumbs:empty {
  min-height: 0;
}

/* Narrow viewports. The 1248px and 880px steps above are unchanged; these
   blocks only refine what sits inside them. Checked widths: 360, 390, 414,
   768, 1024, 1280, 1440. */

@media (max-width: 879px) {
  .cv-archive-header {
    padding-top: 32px;
  }

  /* Pagination and the size-range links keep a 44px tap area. */
  .cv-pagination a.page-numbers,
  .cv-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .cv-related__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Form: one column of full-width fields, 16px inputs so iOS Safari does not
     zoom the page when a field takes focus. */
  .cv-inquiry {
    max-width: 100%;
    margin: 24px 0 40px;
  }

  .cv-inquiry-form__field {
    margin-bottom: 16px;
  }

  .cv-inquiry-form__input {
    font-size: var(--cv-fs-3);
  }

  .cv-inquiry-form__textarea {
    min-height: 120px;
  }

  .cv-spec__summary {
    padding: 0 16px;
  }
}

@media (max-width: 599px) {
  .cv-product {
    padding-left: 12px;
    padding-right: 12px;
  }

  .cv-product__specs {
    gap: 8px;
  }
}

/* ==========================================================================
   Visual layer v1 (2026-11-06) — planes, icons, states.

   Design baseline A is untouched: --cv-bg stays white, --cv-accent stays the
   safety green, the six type steps (12/14/16/20/32/56) are the only sizes used
   here, cards stay 384px wide in the 3-column grid and buttons keep 52px.
   What is added is depth: a header rule, a page-header band, card frames with
   a hover lift, alternating section ground, a footer block, and focus states.
   ========================================================================== */

/* Site header: a 3px brand rule above the bar and a hairline below it. The
   rule is painted on the header element itself so no element is inserted. */
.site-header {
  background: var(--cv-bg);
  border-bottom: 1px solid var(--cv-border);
}

.site-header::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--cv-accent) 0%,
    #2E9C79 55%,
    var(--cv-accent) 100%
  );
}

/* Wordmark: the site title is text, so the brand reads through tracking and
   weight rather than through a logo file. A trailing green full stop gives the
   mark a fixed edge at every width. Step 5 (32px) italic: the slanted stem
   separates the mark from the nav beside it, and the tracking is pulled back
   from 0.14em to 0.10em so the larger size does not read as loose. */
.site-header .site-title a {
  display: inline-block;
  font-size: var(--cv-fs-5);
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cv-text);
}

.site-header .site-title a::after {
  content: ".";
  color: var(--cv-accent);
  /* The tracking above is inherited by the trailing dot, which opened a gap
     wide enough to read as a stray mark; the negative margin pulls it back. */
  letter-spacing: 0;
  margin-left: -0.09em;
}

.site-header .site-title a:hover,
.site-header .site-title a:focus {
  color: var(--cv-accent);
}

/* Page header band: the h1 block gets a ground, a green rule under it and a
   heavier title so the page opens with an edge instead of fading into white. */
.cv-archive-header {
  position: relative;
  padding: 40px 8px 28px;
  border-bottom: 1px solid var(--cv-border);
}

.cv-archive-header::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -1px;
  width: 56px;
  height: 3px;
  background: var(--cv-accent);
}

.cv-archive-title {
  margin: 0;
  font-size: var(--cv-fs-5);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.cv-archive-eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  font-size: var(--cv-fs-1);
  letter-spacing: 0.1em;
  color: var(--cv-accent);
  background: rgba(15, 107, 79, 0.07);
  border-radius: var(--cv-radius);
}

/* Breadcrumb: quiet, tracked, and never louder than the h1 under it. */
.woocommerce-breadcrumb,
.ast-breadcrumbs {
  font-size: var(--cv-fs-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cv-text-muted);
}

/* Shop controls: the result count and the sort select sit on one baseline and
   the select keeps a 44px tap area on touch. */
.woocommerce-result-count {
  font-size: var(--cv-fs-2);
  color: var(--cv-text-muted);
}

.woocommerce-ordering select {
  height: 44px;
  padding: 0 12px;
  font-size: var(--cv-fs-2);
  color: var(--cv-text);
  background: var(--cv-bg);
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
}

/* Cards: a hairline frame, a surface behind the image and a lift on hover. The
   frame is what makes the 3-column grid legible; without it 18 white cards on
   white read as one texture. */
.cv-card {
  position: relative;
  padding: 0 0 4px;
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  background: var(--cv-bg);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cv-card:hover,
.cv-card:focus-within {
  transform: translateY(-4px);
  border-color: #C6D8D0;
  box-shadow: 0 14px 30px rgba(15, 107, 79, 0.10);
}

.cv-card__media {
  background: var(--cv-surface);
  border-bottom: 1px solid var(--cv-border);
}

.cv-card__media img,
.cv-card__media svg {
  transition: transform 0.35s ease;
}

.cv-card:hover .cv-card__media img,
.cv-card:hover .cv-card__media svg {
  transform: scale(1.03);
}

.cv-card__title,
.cv-card__specs,
.cv-card__price,
.cv-card__quote {
  padding-left: 14px;
  padding-right: 14px;
}

.cv-card__title {
  font-weight: 600;
  line-height: 1.35;
}

.cv-card__title a:hover,
.cv-card__title a:focus {
  color: var(--cv-accent);
}

.cv-card__price {
  font-size: var(--cv-fs-4);
  font-weight: 600;
  color: var(--cv-accent);
}

.cv-card__quote {
  padding-bottom: 14px;
  font-size: var(--cv-fs-2);
}

.cv-card__specs {
  padding-bottom: 6px;
}

.cv-card__spec-label {
  font-size: var(--cv-fs-1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cv-text-muted);
}

/* Trust strip: four plain claims on the white ground, split by hairlines. */
.cv-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 1216px;
  margin: 0 auto 28px;
  padding: 0 8px;
}

.cv-trust__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 16px 16px 0;
  border-top: 1px solid var(--cv-border);
}

.cv-trust__item + .cv-trust__item {
  padding-left: 16px;
  border-left: 1px solid var(--cv-border);
}

.cv-trust__icon {
  flex: 0 0 28px;
  height: 28px;
  color: var(--cv-accent);
}

.cv-trust__body {
  min-width: 0;
}

.cv-trust__title {
  margin: 0;
  font-size: var(--cv-fs-2);
  font-weight: 600;
  color: var(--cv-text);
}

.cv-trust__text {
  margin: 2px 0 0;
  font-size: var(--cv-fs-1);
  color: var(--cv-text-muted);
}

/* Product page: the media sits on a framed white panel, the summary beside it
   follows the same rhythm. */
.cv-product__frame {
  background: var(--cv-surface);
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
}

.cv-product__title {
  letter-spacing: -0.01em;
}

.cv-product__amount {
  font-size: var(--cv-fs-5);
  font-weight: 700;
  color: var(--cv-text);
}

.cv-product__sku {
  font-size: var(--cv-fs-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cv-text-muted);
}

/* Section blocks on the landing page: alternating ground and a green bar
   before every heading, so the page reads as bands, not as one column. */
.cv-page-section {
  padding: 28px 0;
}

.cv-page-section:nth-of-type(even) {
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
  background: var(--cv-surface);
}

.cv-page-section__heading {
  position: relative;
  padding-left: 14px;
  font-weight: 600;
}

.cv-page-section__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  background: var(--cv-accent);
  border-radius: var(--cv-radius);
}

/* FAQ rows: framed, with the question carrying the weight. */
.cv-faq__item {
  margin: 0 0 10px;
  padding: 14px 16px;
  background: var(--cv-bg);
  border: 1px solid var(--cv-border);
  border-left: 3px solid var(--cv-accent);
  border-radius: var(--cv-radius);
  transition: box-shadow 0.18s ease;
}

.cv-faq__item:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.cv-faq__q {
  font-weight: 600;
}

/* Spec table: zebra rows and a tracked label column. */
.cv-spec__row:nth-child(odd) {
  background: var(--cv-surface);
}

.cv-spec__row {
  padding: 9px 12px;
  border-radius: var(--cv-radius);
}

.cv-spec__label {
  font-size: var(--cv-fs-1);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cv-text-muted);
}

/* Buttons: the 52px height is locked, so the lift and the shadow carry the
   hover state. */
.cv-btn {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.cv-btn:hover,
.cv-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 107, 79, 0.18);
}

/* Footer block: a deep green plane above the Astra copyright line. This is the
   only dark surface on the site and it exists to close the page. */
.cv-footer {
  margin-top: 64px;
  padding: 48px 0 36px;
  background: #0B3A2C;
  color: #DCEAE3;
}

.cv-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 32px;
  max-width: 1216px;
  margin: 0 auto;
  padding: 0 20px;
}

.cv-footer__brand {
  margin: 0;
  font-size: var(--cv-fs-4);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.cv-footer__brand span {
  color: #5FD3A6;
}

.cv-footer__blurb {
  max-width: 34ch;
  margin: 10px 0 0;
  font-size: var(--cv-fs-2);
  line-height: 1.6;
  color: #B9CFC4;
}

.cv-footer h2 {
  margin: 0 0 12px;
  font-size: var(--cv-fs-1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.cv-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-footer li {
  margin: 0 0 8px;
  font-size: var(--cv-fs-2);
  line-height: 1.5;
  color: #B9CFC4;
}

.cv-footer a {
  color: #CFE3D9;
  text-decoration: none;
}

.cv-footer a:hover,
.cv-footer a:focus {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Copyright line under the footer block: same plane, quieter. */
.site-footer {
  background: #0B3A2C;
  color: #9FBDB0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer a {
  color: #CFE3D9;
}

/* Focus ring: visible on both grounds, never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cv-accent);
  outline-offset: 2px;
}

/* Narrow viewports: the trust strip drops to two columns at 879px and one at
   599px; the footer goes two columns then one. Type steps are unchanged. */
@media (max-width: 879px) {
  .cv-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-trust__item {
    padding-left: 0;
    border-left: 0;
  }

  .cv-trust__item + .cv-trust__item {
    padding-left: 0;
    border-left: 0;
  }

  .cv-trust__item:nth-child(even) {
    padding-left: 16px;
    border-left: 1px solid var(--cv-border);
  }

  .cv-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .cv-archive-header {
    padding-top: 32px;
  }
}

@media (max-width: 599px) {
  .cv-trust {
    grid-template-columns: 1fr;
  }

  .cv-trust__item,
  .cv-trust__item:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .cv-footer__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cv-footer {
    margin-top: 48px;
    padding: 36px 0 28px;
  }

  .cv-card:hover,
  .cv-card:focus-within {
    transform: none;
  }
}


/* Primary navigation: the header previously fell back to a list of every
   published page, so cart and checkout sat next to the catalogue. A real menu
   is assigned in WP; these rules keep its palette on the storefront tokens
   instead of Astra's default blue, and give the bar one type size. */
.site-header .main-header-menu .menu-item > .menu-link {
  font-size: var(--cv-fs-2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cv-text);
}

.site-header .main-header-menu .menu-item > .menu-link:hover,
.site-header .main-header-menu .menu-item > .menu-link:focus,
.site-header .main-header-menu .current-menu-item > .menu-link,
.site-header .main-header-menu .current-menu-ancestor > .menu-link,
.site-header .main-header-menu .current_page_item > .menu-link,
.site-header .main-header-menu .current_page_ancestor > .menu-link {
  color: var(--cv-accent);
}

.site-header .main-header-menu .sub-menu {
  border: 1px solid var(--cv-border);
  border-top: 3px solid var(--cv-accent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
  padding: 6px 0;
}

.site-header .main-header-menu .sub-menu .menu-link {
  font-size: var(--cv-fs-2);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cv-text);
}

/* Astra injects a decorative arrow inside every submenu link; in a dropdown it
   reads as a stray glyph in front of each label, so it is dropped there. The
   top-level toggle arrow is untouched. */
.site-header .main-header-menu .sub-menu .menu-link .ast-icon {
  display: none;
}

.site-header .main-header-menu .sub-menu .menu-link:hover,
.site-header .main-header-menu .sub-menu .current-menu-item > .menu-link {
  color: var(--cv-accent);
  background: var(--cv-surface);
}

/* The quote page is the conversion point; it keeps the accent underline so the
   eye finds it without a second colour or a pill button in the bar. */
.site-header .main-header-menu .menu-item.cv-nav-quote > .menu-link {
  color: var(--cv-accent);
  box-shadow: inset 0 -2px 0 var(--cv-accent);
}

/* ==========================================================================
   Visual layer A+ (2026-11-06) — colour, image, texture.

   Ordered by the supervisor order: P0 hero and palette, P1 category colour and
   the three texture moves, P2 the picture slot. Nothing below changes a locked
   value: the six type steps, the 384px card, the 52px button height and the
   2px radius are the same numbers style.css already used.
   ========================================================================== */

/* Palette, extended under control: three families and no fourth. Green carries
   the brand, steel grey carries the product, brass appears only on a label or
   a bullet. Six new tokens, all registered here. */
:root {
  --cv-deep: #0B3A2C;
  --cv-steel: #2B3A42;
  --cv-steel-light: #8A9BA3;
  --cv-brass: #C9A227;
  --cv-tint: #F4F7F5;
  --cv-accent-soft: #E8F0EC;
}

/* --------------------------------------------------------------------------
   P0-1 · Hero plate
   A full-bleed deep-green plate that opens the shop archive. The two real
   product shots sit on the right as a cut-out duo, so the first screen carries
   a product instead of a paragraph. The dot grid is a CSS gradient, not a file:
   the plate costs one request (the product image) and nothing else.
   -------------------------------------------------------------------------- */
.cv-hero {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient(135deg, #17795A 0%, #0F6B4F 42%, #0B3A2C 100%);
}

.cv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.08;
  pointer-events: none;
}

.cv-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px;
  min-height: 480px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
}

.cv-hero__eyebrow {
  margin: 0 0 14px;
  font-size: var(--cv-fs-1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cv-brass);
}

.cv-hero__title {
  margin: 0 0 18px;
  max-width: 15ch;
  font-size: var(--cv-fs-6);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.cv-hero__sub {
  margin: 0 0 26px;
  max-width: 52ch;
  font-size: var(--cv-fs-3);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.cv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.cv-hero .cv-hero__cta {
  background: #FFFFFF;
  color: var(--cv-deep);
  border: 1px solid #FFFFFF;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.cv-hero .cv-hero__cta:hover,
.cv-hero .cv-hero__cta:focus {
  background: var(--cv-brass);
  border-color: var(--cv-brass);
  color: #1A1A1A;
}

.cv-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--cv-btn-h);
  font-size: var(--cv-fs-3);
  font-weight: 500;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.cv-hero__link:hover,
.cv-hero__link:focus {
  color: #FFFFFF;
  border-bottom-color: var(--cv-brass);
  text-decoration: none;
}

.cv-hero__link span {
  transition: transform 0.18s ease;
}

.cv-hero__link:hover span {
  transform: translateX(4px);
}

.cv-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--cv-fs-1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.cv-hero__facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cv-hero__facts li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--cv-brass);
}

.cv-hero__media {
  position: relative;
}

.cv-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.38));
}

.cv-hero__badge {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 10px;
  font-size: var(--cv-fs-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(11, 58, 44, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

@media (max-width: 900px) {
  .cv-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 320px;
    padding: 36px 20px 40px;
    gap: 28px;
  }

  .cv-hero__title {
    max-width: none;
  }

  .cv-hero__media {
    max-width: 460px;
  }
}

/* --------------------------------------------------------------------------
   P0-2 / P1-3 · Category bands
   The four ranges each own one colour, so the header band tells a visitor which
   shelf they are on before they read the title. Same markup, class per range.
   -------------------------------------------------------------------------- */
.cv-archive-header--mini,
.cv-archive-header--home,
.cv-archive-header--commercial,
.cv-archive-header--large {
  padding: 44px 24px 34px;
  color: #FFFFFF;
  border-bottom: 0;
}

.cv-archive-header--mini {
  background: linear-gradient(135deg, #17795A 0%, #0F6B4F 55%, #0B3A2C 100%);
}

.cv-archive-header--home {
  background: linear-gradient(135deg, #3C515C 0%, #2B3A42 55%, #1B262C 100%);
}

.cv-archive-header--commercial {
  background: linear-gradient(135deg, #C9A227 0%, #8A6D14 55%, #5E4A0C 100%);
}

.cv-archive-header--large {
  background: linear-gradient(135deg, #14503C 0%, #0B3A2C 55%, #062019 100%);
}

.cv-archive-header--mini::after,
.cv-archive-header--home::after,
.cv-archive-header--commercial::after,
.cv-archive-header--large::after {
  background: var(--cv-brass);
}

.cv-archive-header--mini .cv-archive-title,
.cv-archive-header--home .cv-archive-title,
.cv-archive-header--commercial .cv-archive-title,
.cv-archive-header--large .cv-archive-title {
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.cv-archive-header--mini .cv-archive-intro,
.cv-archive-header--mini .cv-archive-intro__pending,
.cv-archive-header--home .cv-archive-intro,
.cv-archive-header--home .cv-archive-intro__pending,
.cv-archive-header--commercial .cv-archive-intro,
.cv-archive-header--commercial .cv-archive-intro__pending,
.cv-archive-header--large .cv-archive-intro,
.cv-archive-header--large .cv-archive-intro__pending {
  color: rgba(255, 255, 255, 0.82);
}

.cv-archive-header--mini .cv-archive-eyebrow,
.cv-archive-header--home .cv-archive-eyebrow,
.cv-archive-header--commercial .cv-archive-eyebrow,
.cv-archive-header--large .cv-archive-eyebrow {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
}

.cv-archive-eyebrow--all {
  color: var(--cv-accent);
}

/* --------------------------------------------------------------------------
   P1-4 · Texture, three moves
   1. Buttons and the card frame carry a one-step gradient and a 1px inner
      highlight, the way a painted steel panel holds light along its top edge.
   2. Header and footer carry a 1px brushed stripe at 4% — enough to read as a
      surface, not enough to read as a pattern.
   3. Dark planes take white text at weight 600 with a 1px shadow, so type on
      green looks struck into the plate rather than floating over it.
   -------------------------------------------------------------------------- */
.cv-btn {
  background: linear-gradient(180deg, #17795A 0%, #0F6B4F 100%);
  border: 1px solid #0B5440;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(15, 107, 79, 0.20);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.cv-btn:hover,
.cv-btn:focus {
  background: linear-gradient(180deg, #1B8663 0%, #11765A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 10px 24px rgba(15, 107, 79, 0.28);
  opacity: 1;
}

.site-header {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(11, 58, 44, 0.035) 0,
    rgba(11, 58, 44, 0.035) 1px,
    transparent 1px,
    transparent 4px
  );
}

.cv-footer {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.04) 0,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 5px
  );
}

.cv-hero__badge,
.cv-band__title,
.cv-footer__brand {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* Card frame: the hairline stays, a surface gradient and an inner highlight are
   added so the frame reads as a panel with an edge instead of a drawn border. */
.cv-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFC 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(11, 58, 44, 0.06);
}

.cv-card:hover,
.cv-card:focus-within {
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 36px rgba(15, 107, 79, 0.16);
}

/* Category chip on the card, in the range colour. Sits over the image corner
   so a visitor can sort a mixed grid by range without reading titles. */
.cv-card__tag {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  font-size: var(--cv-fs-1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #0F6B4F;
}

.cv-card__tag--home {
  background: #2B3A42;
}

.cv-card__tag--commercial {
  background: #8A6D14;
}

.cv-card__tag--large {
  background: #0B3A2C;
}

/* Trust strip: a tinted panel instead of four claims floating on white. */
.cv-trust {
  padding: 20px 16px;
  margin-bottom: 32px;
  background: var(--cv-tint);
  border: 1px solid var(--cv-border);
}

.cv-trust__icon {
  color: var(--cv-accent);
}

/* --------------------------------------------------------------------------
   P1-5 · Closing band
   The grid used to run white into the white gap above the footer. The band
   closes the page on a dark plane and puts the one action we want under it.
   -------------------------------------------------------------------------- */
.cv-band {
  margin: 48px 0 0;
  background: linear-gradient(135deg, #1B262C 0%, #0B3A2C 100%);
  color: #FFFFFF;
}

.cv-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cv-band__title {
  margin: 0 0 8px;
  font-size: var(--cv-fs-5);
  font-weight: 600;
  line-height: 1.2;
  color: #FFFFFF;
}

.cv-band__text {
  margin: 0;
  max-width: 62ch;
  font-size: var(--cv-fs-3);
  color: rgba(255, 255, 255, 0.78);
}

.cv-band .cv-band__cta {
  background: #FFFFFF;
  color: var(--cv-deep);
  border: 1px solid #FFFFFF;
  white-space: nowrap;
}

.cv-band .cv-band__cta:hover,
.cv-band .cv-band__cta:focus {
  background: var(--cv-brass);
  border-color: var(--cv-brass);
  color: #1A1A1A;
}

/* --------------------------------------------------------------------------
   P2-6 · Picture slot
   The placeholder svg now paints its own tint, icon and two-line caption, so it
   only needs to keep filling the 3:4 box the card already reserves.
   -------------------------------------------------------------------------- */
.cv-media-placeholder {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 782px) {
  .cv-archive-header--mini,
  .cv-archive-header--home,
  .cv-archive-header--commercial,
  .cv-archive-header--large {
    padding: 30px 16px 24px;
  }

  .cv-band__inner {
    padding: 32px 20px;
  }
}