/*
Theme Name: Alloververse
Theme URI: https://alloververse.com
Author: Alloververse
Description: Bespoke WooCommerce theme for Alloververse. Lagoon design system - light, high-contrast, cool blue, with a single warm accent reserved for promotions.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: Proprietary
Text Domain: alloververse
*/

/* ==========================================================================
   1. Fonts (self-hosted, no third-party requests)
   ========================================================================== */
/* One typeface for the whole site. Two similar sans faces read as an
   inconsistency rather than a pairing, so hierarchy comes from weight
   (200 for large headlines, 800 for the emphasised word, 400-650 for text)
   across a single variable file.
   The family name is namespaced on purpose: WooCommerce registers its own
   "Inter" face, and sharing a name lets the plugin's copy win. */
@font-face {
  font-family: 'Alloververse';
  src: url('assets/fonts/manrope-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */
:root {
  /* Lagoon palette */
  --av-paper:      #F4FAFC;
  --av-surface:    #FFFFFF;
  --av-sunken:     #E7F2F7;
  --av-ink:        #0B3242;
  --av-ink-2:      #3C5D6C;
  --av-muted:      #6B8794;
  --av-line:       #DDEAF0;
  --av-line-2:     #C7DCE6;
  --av-blue:       #0E7FA8;
  --av-blue-dark:  #0A6183;
  --av-blue-soft:  #8FD3E8;
  --av-sand:       #E8CFA3;

  /* Warm accent, reserved for promotions only */
  --av-sun:        #FFE05C;
  --av-sun-ink:    #3D3000;

  --av-success:    #1F7A55;
  --av-danger:     #B3321F;

  /* Type */
  --av-display: 'Alloververse', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --av-body: 'Alloververse', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --av-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --av-f-xs:  12px;
  --av-f-sm:  14px;
  --av-f-base:16px;
  --av-f-md:  18px;
  --av-f-lg:  22px;
  --av-f-xl:  clamp(26px, 3vw, 32px);
  --av-f-2xl: clamp(32px, 4.4vw, 46px);
  --av-f-3xl: clamp(38px, 6vw, 68px);

  /* Space */
  --av-s1: 4px;  --av-s2: 8px;  --av-s3: 12px; --av-s4: 16px;
  --av-s5: 24px; --av-s6: 32px; --av-s7: 48px; --av-s8: 64px; --av-s9: 96px;

  --av-radius: 3px;
  --av-radius-lg: 6px;
  --av-wrap: 1280px;
  --av-shadow: 0 1px 2px rgba(11, 50, 66, .05), 0 10px 24px -18px rgba(11, 50, 66, .45);
  --av-header-h: 68px;
}

/* ==========================================================================
   3. Reset and base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x on body alone propagates to the viewport and stops clipping
   anything, so it has to be set on html as well to actually hold. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--av-paper);
  color: var(--av-ink);
  font-family: var(--av-body);
  font-size: var(--av-f-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--av-blue); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--av-blue-soft); color: var(--av-ink); }

h1, h2, h3, h4 {
  font-family: var(--av-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }

.av-wrap { width: 100%; max-width: var(--av-wrap); margin: 0 auto; padding: 0 var(--av-s5); }
.av-section { padding: var(--av-s8) 0; }
.av-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.av-skip { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 18px; background: var(--av-ink); color: #fff; }
.av-skip:focus { left: 8px; top: 8px; }

/* Shared eyebrow label */
.av-eyebrow {
  font-family: var(--av-body);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--av-blue);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-s2);
  font-family: var(--av-body);
  font-size: var(--av-f-sm);
  font-weight: 650;
  letter-spacing: .01em;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--av-radius);
  background: var(--av-blue);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.av-btn:hover { background: var(--av-blue-dark); }
.av-btn--ghost { background: transparent; border-color: var(--av-line-2); color: var(--av-ink); }
.av-btn--ghost:hover { background: var(--av-surface); border-color: var(--av-blue); color: var(--av-blue); }
.av-btn--sun { background: var(--av-sun); color: var(--av-sun-ink); }
.av-btn--sun:hover { background: #FFD62F; }
.av-btn--block { width: 100%; }
.av-btn--lg { padding: 16px 34px; font-size: var(--av-f-base); }

/* ==========================================================================
   5. Announcement + header
   ========================================================================== */
.av-announce {
  background: var(--av-sun);
  color: var(--av-sun-ink);
  font-size: var(--av-f-xs);
  font-weight: 650;
  letter-spacing: .04em;
  text-align: center;
  padding: 8px var(--av-s4);
}
.av-announce a { text-decoration: underline; text-underline-offset: 2px; }

.av-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--av-line);
}
.av-header__inner {
  height: var(--av-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-s5);
}
.av-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.av-logo svg { display: block; }

.av-nav { display: flex; align-items: center; gap: var(--av-s6); }
.av-nav a {
  font-size: var(--av-f-sm);
  font-weight: 500;
  color: var(--av-ink-2);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.av-nav a:hover,
.av-nav .current-menu-item > a { color: var(--av-blue); border-bottom-color: var(--av-blue); }

.av-tools { display: flex; align-items: center; gap: var(--av-s4); }
.av-iconbtn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid transparent;
  border-radius: var(--av-radius);
  background: transparent;
  cursor: pointer;
  position: relative;
  color: var(--av-ink);
}
.av-iconbtn:hover { background: var(--av-sunken); }
.av-cart__count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid; place-items: center;
  background: var(--av-blue);
  color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.av-cart__count:empty { display: none; }
.av-burger { display: none; }

/* Mobile drawer */
.av-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 340px);
  background: var(--av-surface);
  border-left: 1px solid var(--av-line);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  z-index: 80;
  padding: var(--av-s5);
  display: flex;
  flex-direction: column;
  gap: var(--av-s5);
  overflow-y: auto;
}
.av-drawer.is-open { transform: none; }
.av-drawer a { font-size: var(--av-f-md); font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--av-line); }
.av-scrim {
  position: fixed; inset: 0;
  background: rgba(11, 50, 66, .38);
  opacity: 0; visibility: hidden;
  transition: opacity .26s ease, visibility .26s;
  z-index: 70;
}
.av-scrim.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   6. All-over print motif
   ========================================================================== */
/* The brand idea is repetition, so the pattern is a real component rather
   than decoration bolted on. Rendered with gradients so it costs no request. */
.av-pattern {
  background-color: var(--av-sunken);
  background-image:
    radial-gradient(circle at 20% 25%, var(--av-blue-soft) 0 3px, transparent 3.5px),
    radial-gradient(circle at 70% 65%, var(--av-blue-soft) 0 3px, transparent 3.5px),
    radial-gradient(circle at 45% 85%, var(--av-sand) 0 2.5px, transparent 3px),
    radial-gradient(circle at 90% 15%, var(--av-sand) 0 2.5px, transparent 3px);
  background-size: 54px 54px;
}

/* ==========================================================================
   7. Hero
   ========================================================================== */
.av-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--av-line); }
.av-hero__bg { position: absolute; inset: 0; opacity: .55; }
.av-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--av-s7);
  align-items: center;
  padding: var(--av-s9) 0;
}
/* align-items must stay stretch: flex-start sizes children to max-content,
   which lets the headline run past the viewport on narrow screens. */
.av-hero__copy { display: flex; flex-direction: column; gap: var(--av-s4); align-items: stretch; }
.av-hero h1 { font-size: var(--av-f-3xl); font-weight: 250; letter-spacing: -.035em; max-width: 12ch; }
.av-hero h1 strong { font-weight: 800; }
.av-hero__sub { font-size: var(--av-f-md); color: var(--av-ink-2); max-width: 44ch; }
.av-hero__cta { display: flex; flex-wrap: wrap; gap: var(--av-s3); padding-top: var(--av-s2); justify-content: flex-start; }
.av-hero__art {
  aspect-ratio: 1 / .82;
  border-radius: var(--av-radius-lg);
  border: 1px solid var(--av-line);
  background: var(--av-surface);
  box-shadow: var(--av-shadow);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.av-hero__art svg { width: 58%; }

/* ==========================================================================
   8. Section headings
   ========================================================================== */
.av-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--av-s5);
  margin-bottom: var(--av-s6);
}
.av-head__text { display: flex; flex-direction: column; gap: var(--av-s2); }
.av-head h2 { font-size: var(--av-f-xl); font-weight: 300; letter-spacing: -.03em; }
.av-head h2 strong { font-weight: 800; }
.av-head__link { font-size: var(--av-f-sm); font-weight: 600; color: var(--av-blue); white-space: nowrap; }
.av-head__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   9. Category tiles
   ========================================================================== */
.av-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--av-s4); }
.av-tile {
  position: relative;
  border-radius: var(--av-radius-lg);
  border: 1px solid var(--av-line);
  overflow: hidden;
  min-height: 210px;
  display: flex;
  align-items: flex-end;
  padding: var(--av-s5);
  transition: border-color .18s ease, transform .18s ease;
}
.av-tile:hover { border-color: var(--av-blue); transform: translateY(-2px); }
.av-tile__bg { position: absolute; inset: 0; opacity: .8; }
.av-tile__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--av-surface);
  border-radius: var(--av-radius);
  padding: 10px 16px;
  font-family: var(--av-display);
  font-weight: 700;
  font-size: var(--av-f-sm);
  letter-spacing: -.01em;
  box-shadow: var(--av-shadow);
}
.av-tile__count {
  font-family: var(--av-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--av-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   10. Product grid and card
   ========================================================================== */
.av-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--av-s5) var(--av-s4);
}
.av-card { display: flex; flex-direction: column; gap: 10px; }
.av-card__media {
  position: relative;
  aspect-ratio: 3 / 3.4;
  border-radius: var(--av-radius-lg);
  overflow: hidden;
  background: var(--av-sunken);
  border: 1px solid var(--av-line);
}
.av-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.av-card:hover .av-card__media img { transform: scale(1.035); }
.av-card__ph { width: 100%; height: 100%; display: grid; place-items: center; }
.av-card__ph svg { width: 62%; }
.av-card__flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.av-flag {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--av-radius);
  background: var(--av-ink);
  color: #fff;
}
.av-flag--sale { background: var(--av-sun); color: var(--av-sun-ink); }
/* Clamp to two lines so prices sit on the same baseline across a row
   however long the product name runs. */
.av-card__title {
  font-size: var(--av-f-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--av-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}
.av-card__price { font-size: var(--av-f-sm); font-weight: 700; color: var(--av-blue); font-variant-numeric: tabular-nums; }
.av-card__price del { color: var(--av-muted); font-weight: 500; margin-right: 6px; }
.av-card__price ins { text-decoration: none; }

/* ==========================================================================
   11. Value props
   ========================================================================== */
.av-props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--av-s4);
  border-top: 1px solid var(--av-line);
  border-bottom: 1px solid var(--av-line);
  padding: var(--av-s6) 0;
}
.av-prop { display: flex; gap: var(--av-s3); align-items: flex-start; }
.av-prop svg { flex-shrink: 0; color: var(--av-blue); margin-top: 2px; }
.av-prop b { display: block; font-size: var(--av-f-sm); font-weight: 650; }
.av-prop span { font-size: var(--av-f-xs); color: var(--av-muted); line-height: 1.5; }

/* ==========================================================================
   12. Newsletter
   ========================================================================== */
.av-news {
  border-radius: var(--av-radius-lg);
  border: 1px solid var(--av-line);
  overflow: hidden;
  position: relative;
  padding: var(--av-s8) var(--av-s5);
  text-align: center;
}
.av-news__bg { position: absolute; inset: 0; opacity: .5; }
.av-news__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--av-s4); }
.av-news h2 { font-size: var(--av-f-lg); font-weight: 300; }
.av-news h2 strong { font-weight: 800; }
.av-news p { font-size: var(--av-f-sm); color: var(--av-ink-2); max-width: 48ch; }
.av-news__form { display: flex; gap: var(--av-s2); width: min(100%, 440px); }
.av-news__form input {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid var(--av-line-2);
  border-radius: var(--av-radius);
  background: var(--av-surface);
  font-size: var(--av-f-sm);
}
.av-news__form input:focus { border-color: var(--av-blue); outline: none; }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.av-footer { background: var(--av-surface); border-top: 1px solid var(--av-line); padding: var(--av-s8) 0 var(--av-s5); }
.av-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--av-s6);
  padding-bottom: var(--av-s7);
  align-items: start;
}
.av-footer__about { display: flex; flex-direction: column; gap: var(--av-s3); max-width: 38ch; }
.av-footer__desc { font-size: var(--av-f-xs); color: var(--av-muted); line-height: 1.6; }
.av-footer__contact {
  font-size: 13px;
  line-height: 1.8;
  font-style: normal;
  color: var(--av-ink-2);
}
.av-footer__contact strong { color: var(--av-ink); font-weight: 650; }
.av-footer__contact a { color: var(--av-blue); }
.av-footer__contact a:hover { text-decoration: underline; text-underline-offset: 2px; }
.av-footer__hours { color: var(--av-muted); font-size: var(--av-f-xs); }
.av-footer__note {
  font-size: var(--av-f-xs);
  line-height: 1.65;
  color: var(--av-ink-2);
  background: var(--av-sunken);
  border-radius: var(--av-radius);
  padding: 12px 14px;
}
.av-footer__note strong { color: var(--av-ink); font-weight: 700; }
.av-fcol h3 {
  font-family: var(--av-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--av-muted);
  margin-bottom: var(--av-s3);
}
.av-fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.av-fcol a { font-size: var(--av-f-sm); color: var(--av-ink-2); }
.av-fcol a:hover { color: var(--av-blue); }
.av-footer__base {
  border-top: 1px solid var(--av-line);
  padding-top: var(--av-s4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-s3);
  font-size: var(--av-f-xs);
  color: var(--av-muted);
}
.av-pay { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.av-pay__card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 32px;
  background: var(--av-surface);
  border: 1px solid var(--av-line);
  border-radius: 4px;
  /* A hairline card behind each mark keeps four different logo shapes
     reading as one considered row rather than four pasted images. */
  box-shadow: 0 1px 1px rgba(11, 50, 66, .04);
}
.av-pay__card svg { width: 38px; height: auto; }

/* ==========================================================================
   14. Shop archive
   ========================================================================== */
.av-shop { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--av-s7); align-items: start; }
.av-filters { position: sticky; top: calc(var(--av-header-h) + 16px); display: flex; flex-direction: column; gap: var(--av-s5); }
.av-filters h3 {
  font-family: var(--av-body);
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--av-muted); margin-bottom: var(--av-s3);
}
.av-filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.av-filters a { font-size: var(--av-f-sm); color: var(--av-ink-2); }
.av-filters a:hover { color: var(--av-blue); }
.av-shop__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--av-s3); padding-bottom: var(--av-s5); margin-bottom: var(--av-s5);
  border-bottom: 1px solid var(--av-line);
}
.av-shop__count { font-size: var(--av-f-sm); color: var(--av-muted); }

.av-pager { display: flex; gap: 6px; justify-content: center; padding-top: var(--av-s7); }
.av-pager .page-numbers {
  min-width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--av-line);
  border-radius: var(--av-radius);
  font-size: var(--av-f-sm); font-weight: 600;
  background: var(--av-surface);
}
.av-pager .page-numbers.current { background: var(--av-blue); border-color: var(--av-blue); color: #fff; }
.av-pager a.page-numbers:hover { border-color: var(--av-blue); color: var(--av-blue); }

/* ==========================================================================
   15. Single product
   ========================================================================== */
.av-pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--av-s7); align-items: start; }
.av-pdp__gallery { display: flex; flex-direction: column; gap: var(--av-s3); }
.av-pdp__main {
  aspect-ratio: 1 / 1.1;
  border-radius: var(--av-radius-lg);
  border: 1px solid var(--av-line);
  background: var(--av-sunken);
  overflow: hidden;
}
.av-pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.av-pdp__main .av-card__ph svg { width: 55%; }
.av-pdp__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.av-pdp__thumbs img {
  width: 68px; height: 78px; object-fit: cover;
  border: 1px solid var(--av-line); border-radius: var(--av-radius); cursor: pointer;
}
.av-pdp__thumbs img:hover { border-color: var(--av-blue); }

.av-pdp__info { display: flex; flex-direction: column; gap: var(--av-s4); position: sticky; top: calc(var(--av-header-h) + 16px); }
.av-pdp__info h1 { font-size: var(--av-f-2xl); font-weight: 300; letter-spacing: -.03em; }
.av-pdp__price { font-size: var(--av-f-lg); font-weight: 800; color: var(--av-blue); font-variant-numeric: tabular-nums; }
.av-pdp__price del { font-size: var(--av-f-md); color: var(--av-muted); font-weight: 400; margin-right: 8px; }
.av-pdp__price ins { text-decoration: none; }
.av-pdp__desc { font-size: var(--av-f-sm); color: var(--av-ink-2); line-height: 1.7; }
.av-pdp__meta { font-size: var(--av-f-xs); color: var(--av-muted); border-top: 1px solid var(--av-line); padding-top: var(--av-s4); }

.av-trust { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--av-line); padding-top: var(--av-s4); }
.av-trust div { display: flex; gap: 10px; align-items: center; font-size: var(--av-f-xs); color: var(--av-ink-2); }
.av-trust svg { color: var(--av-blue); flex-shrink: 0; }

/* WooCommerce form bits, restyled to the system */
.woocommerce-variation-add-to-cart, .av-pdp__info form.cart { display: flex; flex-direction: column; gap: var(--av-s3); }
.av-pdp__info .quantity input {
  width: 74px; padding: 12px; text-align: center;
  border: 1px solid var(--av-line-2); border-radius: var(--av-radius);
}
.av-pdp__info table.variations { width: 100%; border-collapse: collapse; }
.av-pdp__info table.variations th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--av-muted); padding: 10px 0 4px;
}
.av-pdp__info table.variations td { padding-bottom: 10px; }
.av-pdp__info select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--av-line-2); border-radius: var(--av-radius);
  background: var(--av-surface);
}
/* WooCommerce skins its buttons at `.woocommerce button.button.alt`, which
   outranks any single-class selector here. Doubling the class matches that
   specificity and wins on source order, so no !important is needed. */
.woocommerce a.button.button,
.woocommerce button.button.button,
.woocommerce input.button.button,
.woocommerce #respond input#submit.submit,
.av-pdp__info.av-pdp__info button.single_add_to_cart_button {
  font-family: var(--av-body);
  font-size: var(--av-f-sm);
  font-weight: 650;
  line-height: 1.4;
  padding: 13px 26px;
  background: var(--av-blue);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--av-radius);
  cursor: pointer;
  transition: background .18s ease;
}
.woocommerce a.button.button:hover,
.woocommerce button.button.button:hover,
.woocommerce input.button.button:hover,
.av-pdp__info.av-pdp__info button.single_add_to_cart_button:hover {
  background: var(--av-blue-dark);
  color: #fff;
}
.av-pdp__info.av-pdp__info button.single_add_to_cart_button {
  width: 100%;
  font-size: var(--av-f-base);
  font-weight: 700;
  padding: 16px 28px;
}
/* Secondary Woo buttons (update cart, apply coupon) should not compete with
   the primary action. */
.woocommerce button.button.button[name="update_cart"],
.woocommerce button.button.button[name="apply_coupon"] {
  background: transparent;
  border-color: var(--av-line-2);
  color: var(--av-ink);
}
.woocommerce button.button.button[name="update_cart"]:hover,
.woocommerce button.button.button[name="apply_coupon"]:hover {
  background: var(--av-surface);
  border-color: var(--av-blue);
  color: var(--av-blue);
}

/* ==========================================================================
   16. Generic content pages
   ========================================================================== */
.av-page { max-width: 760px; margin: 0 auto; padding: var(--av-s8) 0; }
.av-page h1 { font-size: var(--av-f-2xl); font-weight: 300; letter-spacing: -.03em; margin-bottom: var(--av-s5); }
.av-prose { font-size: var(--av-f-base); color: var(--av-ink-2); line-height: 1.75; display: flex; flex-direction: column; gap: var(--av-s4); }
.av-prose h2 { font-size: var(--av-f-lg); color: var(--av-ink); margin-top: var(--av-s4); }
.av-prose h3 { font-size: var(--av-f-md); color: var(--av-ink); }
.av-prose a { color: var(--av-blue); text-decoration: underline; text-underline-offset: 2px; }
.av-prose ul, .av-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.av-prose table { width: 100%; border-collapse: collapse; font-size: var(--av-f-sm); }
.av-prose th, .av-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--av-line); }
.av-scroll-x { overflow-x: auto; }

.av-empty { text-align: center; padding: var(--av-s9) var(--av-s5); display: flex; flex-direction: column; align-items: center; gap: var(--av-s4); }
.av-empty h1 { font-size: var(--av-f-2xl); font-weight: 300; }
.av-empty p { color: var(--av-muted); max-width: 46ch; }

/* ==========================================================================
   16b. WooCommerce Cart and Checkout blocks
   Cart and checkout are block-rendered, so they ignore the classic
   `.woocommerce .button` selectors entirely and need their own pass.
   ========================================================================== */
.wc-block-components-button:not(.is-link) {
  font-family: var(--av-body);
  font-size: var(--av-f-sm);
  font-weight: 650;
  background: var(--av-blue);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--av-radius);
  padding: 14px 26px;
  transition: background .18s ease;
}
/* The submit control is an anchor styled as a button, so it inherits the
   link underline unless it is cleared on both the element and its label. */
.wc-block-components-button:not(.is-link),
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
  text-decoration: none;
}
.wc-block-components-button:not(.is-link):hover { background: var(--av-blue-dark); color: #fff; }
.wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: #fff; }
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { width: 100%; }

.wc-block-components-title,
.wp-block-woocommerce-cart .wp-block-heading {
  font-family: var(--av-display);
  letter-spacing: -.02em;
}
.wc-block-components-product-name { color: var(--av-ink); font-weight: 600; }
.wc-block-components-product-name:hover { color: var(--av-blue); }
.wc-block-components-sale-badge {
  background: var(--av-sun);
  color: var(--av-sun-ink);
  border-radius: var(--av-radius);
  font-weight: 750;
}
.wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; }
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  border-radius: var(--av-radius);
}

/* WooCommerce notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none;
  margin: 0 0 var(--av-s5);
  padding: 14px 18px;
  border-radius: var(--av-radius);
  font-size: var(--av-f-sm);
  border: 1px solid var(--av-line);
  background: var(--av-surface);
}
.woocommerce-message { border-left: 3px solid var(--av-success); }
.woocommerce-info { border-left: 3px solid var(--av-blue); }
.woocommerce-error { border-left: 3px solid var(--av-danger); }

/* ==========================================================================
   17. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .av-hero__inner { grid-template-columns: 1fr; gap: var(--av-s6); padding: var(--av-s8) 0; }
  .av-hero__art { max-width: 460px; }
  .av-shop { grid-template-columns: 1fr; gap: var(--av-s5); }
  .av-filters { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--av-s5); }
  .av-pdp { grid-template-columns: 1fr; gap: var(--av-s6); }
  .av-pdp__info { position: static; }
  .av-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--av-s5); }
}

@media (max-width: 860px) {
  .av-nav { display: none; }
  .av-burger { display: grid; }
  .av-section { padding: var(--av-s7) 0; }
  .av-wrap { padding: 0 var(--av-s4); }
}

@media (max-width: 560px) {
  :root { --av-header-h: 60px; }
  .av-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--av-s5) var(--av-s3); }
  .av-hero h1 { max-width: none; }
  .av-hero__cta { width: 100%; }
  .av-hero__cta .av-btn { flex: 1; }
  .av-footer__cols { grid-template-columns: 1fr; }
  .av-head { flex-direction: column; align-items: flex-start; gap: var(--av-s3); }
  .av-news { padding: var(--av-s7) var(--av-s4); }
  .av-news__form { flex-direction: column; }
  /* Full-height tiles are a lot of empty pattern on a phone. */
  .av-tile { min-height: 128px; padding: var(--av-s4); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}