/* ============================================================================
   AVANTE — VISUAL LAYER
   Loaded last. This is what turns the structure into the approved design:
   lavender ground, ambient light, real glass, the full type scale and rhythm.
   ============================================================================ */

:root{
  /* Type scale — the mockup scale, enforced */
  --t-hero:    clamp(44px, 4.4vw, 64px);
  --t-section: clamp(28px, 2.2vw, 34px);
  --t-card:    18px;
  --t-body:    17px;
  --t-price:   26px;
  --t-meta:    15px;   /* absolute floor — nothing smaller anywhere */
  --t-util:    0.875;      /* ratio, not a length: see the note where it is used */

  /* Rhythm */
  --sp-section: 88px;
  --sp-section-m: 56px;
  --sp-gap:     24px;
  --sp-card:    28px;
  --sp-head:    32px;
  --wrap:       1280px;
  --gutter:     24px;

  /* Glass */
  --glass-bg:     rgba(255,255,255,.68);
  --glass-brd:    rgba(255,255,255,.9);
  --glass-shadow: 0 8px 28px rgba(46,26,94,.07);
}

/* ---------------------------------------------------------------- GROUND -- */
/* The page is NOT white. Cards are white glass on top of a lavender ground —
   that contrast is what makes them read. */
body.home,
body.page-template-elementor_header_footer.home{ background:#F2EFF8; }

body.home .elementor,
body.home #avs-main,
body.home .site-content,
body.home .ast-container{ background:transparent; }

/* Sections alternate the lavender ground with the lighter ground. */
body.home .elementor > .e-con:nth-child(odd),
body.home .elementor > .elementor-section:nth-child(odd){ background:#F2EFF8; }
body.home .elementor > .e-con:nth-child(even),
body.home .elementor > .elementor-section:nth-child(even){ background:#FBFAFD; }

/* Every section: real rhythm, real gutters, nothing touching an edge. */
body.home .elementor > .e-con,
body.home .elementor > .elementor-section{
  padding-top:var(--sp-section);
  padding-bottom:var(--sp-section);
  position:relative;
  overflow:visible;
}
body.home .e-con-inner,
body.home .elementor-container{
  max-width:var(--wrap)!important;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ------------------------------------------------------------- TYPE SCALE -- */
body.home{ font-size:var(--t-body); line-height:1.6; }
body.home p, body.home li{ font-size:var(--t-body); line-height:1.6; }

.avs-slide-h{
  font-size:var(--t-hero)!important;
  line-height:1.08!important;
  font-weight:600;
  letter-spacing:-.025em;
  margin:0 0 20px;
  max-width:15ch;              /* the mockup headline wraps to two lines */
}
.avs-bento h2, .avs-sit h2, .avs-rail-head h2, .avs-rev h2,
.avs-guides h2, .avs-paed-copy h2, .avs-find h2, .avs-reo h2, .avs-prev h2{
  font-size:var(--t-section)!important;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.02em;
  margin:0 0 var(--sp-head);
}
.avs-guides h2{ margin-bottom:8px; }
.avs-guides-sub{ margin-bottom:var(--sp-head); font-size:var(--t-body); }

.avs-pcard-name, .avs-guide h3, .avs-sit-t, .avs-bento-t, .avs-strip-n{
  font-size:var(--t-card)!important; font-weight:600; line-height:1.35;
}
.avs-strip-n{ font-size:var(--t-meta)!important; }
.avs-pcard-price{ font-size:var(--t-price)!important; font-weight:700; line-height:1.2; }
.avs-pcard-price small{ font-size:var(--t-meta)!important; font-weight:500; }
.avs-pcard-meta, .avs-pcard-stars, .avs-pcard-cmp, .avs-sit-b,
.avs-rev-hist li, .avs-bento-t small, .avs-doc-list small{
  font-size:var(--t-meta)!important;
}
.avs-util-items li{ font-size:0.875rem; }
.avs-util a{ font-size:inherit; }

/* ------------------------------------------------------------ HERO WASH -- */
.avs-hero{ position:relative; padding:0; }
.avs-hero-wash{
  position:absolute; inset:-40px -50vw -40px -50vw;
  background:linear-gradient(115deg,#E9DFF6 0%,#F3E8F5 38%,#FBEEDC 72%,#FDF0DD 100%);
  z-index:0; pointer-events:none;
}
.avs-hero > *:not(.avs-hero-wash){ position:relative; z-index:1; }
.avs-hero-grid{ gap:40px; padding-block:56px; }
.avs-slide-copy p{ font-size:19px; line-height:1.6; max-width:38ch; margin-bottom:28px; }
/* the photograph sits on the wash and is tinted by it */
.avs-slide-media .avs-life,
.avs-slide-media img{ opacity:.92; }

/* --------------------------------------------------------- AMBIENT GLOWS -- */
/* Large, soft, clearly visible pools of light — this is what makes the page
   feel lit rather than printed. */
.avs-bento, .avs-rail{ position:relative; }
.avs-bento::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-260px; right:-280px; width:1100px; height:1100px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.16) 0%, transparent 68%);
  filter:blur(70px);
}
.avs-rail::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-180px; left:-300px; width:1000px; height:1000px; border-radius:50%;
  background:radial-gradient(circle, rgba(168,143,208,.20) 0%, transparent 68%);
  filter:blur(70px);
}
.avs-bento > *, .avs-rail > *{ position:relative; z-index:1; }

/* -------------------------------------------------------------- GLASS -- */
/* Only reads as glass because there is colour behind it. */
.avs-pcard, .avs-guide, .avs-spec, .avs-rev-card, .avs-rev-agg,
.avs-sit-grid a, .avs-reo-col, .avs-prev-list li, .avs-prev-top,
.avs-trust, .avs-rail-strip a, .avs-find, .avs-hero-assure, .avs-bento-bar{
  background:var(--glass-bg)!important;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid var(--glass-brd)!important;
  border-radius:24px;
  box-shadow:var(--glass-shadow);
}
.avs-pcard, .avs-guide, .avs-reo-col, .avs-sit-grid a, .avs-rev-card, .avs-rev-agg{
  padding:var(--sp-card);
}
/* Text keeps solid backing — glass is for surfaces, never behind paragraphs. */
.avs-pcard-media{ background:rgba(255,255,255,.85); border-radius:18px; }

/* -------------------------------------------------------- CATEGORY TILES -- */
.avs-bento-grid{ gap:var(--sp-gap); }
.avs-bento-big, .avs-bento-mid{
  background:linear-gradient(150deg,#EDE6F7 0%,#F6EFF7 60%,#FBF1E2 100%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:var(--glass-shadow);
  padding:var(--sp-card);
}
.avs-bento-pill{ background:rgba(255,255,255,.82); font-size:var(--t-meta); }
.avs-bento-bar{ margin-top:var(--sp-gap); }
.avs-bento-bar a{ font-size:var(--t-meta); min-height:68px; }

/* ------------------------------------------------------- PAEDIATRIC BAND -- */
.avs-paed{
  background:linear-gradient(100deg,#F7EFF8 0%,#FBF0E4 55%,#FDF3E2 100%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:var(--glass-shadow);
  padding:var(--sp-card);
  gap:40px;
  margin:0;
}
.avs-paed-copy p{ font-size:var(--t-body); }

/* ------------------------------------------------- LIFESTYLE PLACEHOLDERS -- */
/* A gradient reads as "image pending". A product cut-out reads as a finished
   design that looks wrong — so these slots never show a cut-out. */
.avs-life{
  position:relative; width:100%; border-radius:20px; overflow:hidden;
  background:linear-gradient(135deg,#E4D8F3 0%,#EFE4F2 42%,#FBE9CF 78%,#FDF1DE 100%);
  display:grid; place-items:center; min-height:220px;
  border:1px solid rgba(255,255,255,.75);
}
.avs-life span{
  font-size:var(--t-meta); font-weight:600; letter-spacing:.02em;
  color:#7A5E9E; text-align:center; padding:0 16px; opacity:.85;
}
.avs-life::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%);
}
.avs-life--hero{ min-height:380px; aspect-ratio:4/3; }
.avs-life--reel{ min-height:100%; height:100%; border-radius:0; }
.avs-life--paediatric{ min-height:290px; }
.avs-life--guide{ min-height:190px; border-radius:16px; }
.avs-life-img{ width:100%; height:auto; border-radius:20px; }

/* --------------------------------------------------------- LINE ICONS -- */
.avs-sit-ico{ display:grid; place-items:center; width:56px; height:56px; }
.avs-lineicon{ width:40px; height:40px; color:var(--violet-500); }
.avs-sit-grid{ gap:var(--sp-gap); }
.avs-sit-grid a{ min-height:186px; gap:14px; }

/* -------------------------------------------------------------- RHYTHM -- */
.avs-rail-grid{ gap:var(--sp-gap); }
.avs-rail-head{ margin-bottom:var(--sp-head); }
.avs-guides-grid, .avs-rev-grid, .avs-reo{ gap:var(--sp-gap); }
.avs-hero-assure{ margin-top:32px; padding:20px 28px; gap:12px 36px; }
.avs-hero-assure li{ font-size:var(--t-meta); }
.avs-trust li{ min-height:84px; font-size:var(--t-meta); }
.avs-find{ padding:40px; }
.avs-pay{ padding:36px 40px; border-radius:24px; }
.avs-pay-note{ font-size:var(--t-meta); }

/* Amber is for actions only — never a section ground, border or heading. */
.avs-cta, .single_add_to_cart_button, .checkout-button,
.avs-news button, .avs-spec .avs-cta{ background:var(--amber-500)!important; color:#3D2600!important; }

/* -------------------------------------------------------------- MOBILE -- */
@media (max-width:767px){
  body.home .elementor > .e-con,
  body.home .elementor > .elementor-section{
    padding-top:var(--sp-section-m); padding-bottom:var(--sp-section-m);
  }
  :root{ --sp-card:22px; --sp-head:24px; }
  .avs-hero-grid{ padding-block:36px; gap:28px; }
  .avs-slide-h{ max-width:none; }
  .avs-life--hero{ min-height:260px; }
}
@media (prefers-reduced-motion:reduce){ .avs-hero-wash{ transition:none; } }

/* ------------------------------------------------- EMPTY SECTION COLLAPSE -- */
/* A rail with nothing to show must take no vertical space at all. */
.avs-empty-section{ display:none; }
body.home .e-con:has(.avs-empty-section),
body.home .elementor-section:has(.avs-empty-section){ display:none!important; }
/* fallback for engines without :has() */
body.home .elementor-widget:has(.avs-empty-section){ display:none!important; }

/* ------------------------------------------------- FEATURED ROW OF FIVE -- */
/* The approved design shows five across on desktop, on one line. */
.avs-rail-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
@media (max-width:1200px){ .avs-rail-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){  .avs-rail-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){  .avs-rail-grid{ grid-template-columns:1fr; } }
/* tighter internals so five fit comfortably */
.avs-pcard{ padding:20px; gap:6px; }
.avs-pcard-name{ font-size:16px!important; }
.avs-pcard-price{ font-size:22px!important; }
.avs-pcard-add{ padding:12px 14px; font-size:15px; }

/* ------------------------------------------------------ HERO PROPORTIONS -- */
/* The photograph carries the hero — it should be substantial, as in the mockup. */
.avs-hero-grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,.78fr); }
.avs-slide{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:36px; align-items:center; }
.avs-life--hero{ min-height:440px; aspect-ratio:auto; height:100%; }
.avs-slide-media{ min-height:440px; display:flex; }
.avs-slide-media > a{ display:flex; width:100%; }
@media (max-width:1024px){
  .avs-slide{ grid-template-columns:1fr; }
  .avs-life--hero, .avs-slide-media{ min-height:300px; }
}

/* ==========================================================================
   SPEC CORRECTIONS — measured against the brief and brought to the numbers
   ========================================================================== */

/* Card internal padding is 28px per spec; five still fit at 1280px. */
.avs-pcard{ padding:28px 22px; }
.avs-guide, .avs-reo-col, .avs-sit-grid a, .avs-rev-card, .avs-rev-agg,
.avs-prev-list li{ padding:28px; }

/* Card / product title 18px, price 26px */
.avs-pcard-name{ font-size:18px!important; line-height:1.35; }
.avs-pcard-price{ font-size:26px!important; line-height:1.2; }

/* Utility strip. Deliberately smaller than body copy, but expressed in rem so the
   site's own A/A/A control still moves it. Pinned in px it stayed at 14px at every
   setting, which left the support phone number unreadable for the readers most
   likely to want it. */
body.home .avs-util .avs-util-items li,
.avs-util .avs-util-items li{ font-size:0.875rem!important; line-height:1.4; }
body.home .avs-util .avs-util-items li a,
.avs-util .avs-util-items li a{ font-size:inherit!important; line-height:1.4; }

/* The phone number is the one thing in this strip a reader may need to act on,
   so it gets a real target rather than a 20px line of text. */
.avs-util .avs-util-call a{
  display:inline-flex; align-items:center; min-height:48px; padding:0 12px;
  margin:-4px 0 -4px 2px; border-radius:var(--radius-sm,14px);
  font-weight:700; text-decoration:underline; text-underline-offset:3px;
  /* 1em, not rem and not inherit: both of those kept landing on 14px here, while
     em resolves against this anchor's own inherited context, which is the list
     item the A/A/A control already scales correctly. */
  font-size:1em!important;
}
.avs-util .avs-util-call a:hover{ background:rgba(255,255,255,.14); }

/* The three text-size buttons are the site's accessibility control. They were
   44px, under our own 48px floor. */
.avs-util-size button{
  min-width:48px; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* On a phone this strip was 140px of a 221px header, three lines of text before
   the reader saw a single product. The shipping and card lines are repeated in
   the trust row further down every product page, so on small screens the strip
   keeps only the phone number. */
@media (max-width:767px){
  /* One row, not three. Phone on the left, the text-size control on the right. */
  .avs-util .avs-util-in{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; flex-wrap:nowrap; padding-top:0; padding-bottom:0;
  }
  .avs-util .avs-util-items{
    justify-content:flex-start; flex-wrap:nowrap; margin:0; gap:0; flex:1 1 auto;
  }
  .avs-util .avs-util-items li:not(.avs-util-call){ display:none; }
  .avs-util .avs-util-call .avs-util-calllabel{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .avs-util .avs-util-call a{ white-space:nowrap; }
  .avs-util-size{ flex:0 0 auto; margin:0; }
  /* The 48px floor holds, but the buttons' own horizontal padding pushed the row
     5px past the viewport. Fixed square targets keep the floor and the fit. */
  .avs-util-size{ gap:2px; }
  .avs-util-size button{
    min-width:48px; min-height:48px; width:48px; padding-left:0; padding-right:0;
  }
  .avs-util .avs-util-in{ padding-left:12px; padding-right:12px; }
}
/* 320px phones: the same row was 354px wide, the one place the site still
   scrolled sideways. Tighter padding and 40px-wide (still 48px-tall) buttons. */
@media (max-width:374px){
  .avs-util .avs-util-items li{ padding:0 6px; }
  .avs-util .avs-util-call a{ padding:0 6px; }
  .avs-util-size{ gap:0; }
  .avs-util-size button{ min-width:40px; width:40px; }
  .avs-util .avs-util-in{ padding-left:8px; padding-right:8px; }
}

/* Content column is 1280px with 24px gutters */
body.home .elementor > .e-con > .e-con-inner,
body.home .e-con-inner,
body.home .elementor-container{ max-width:1280px!important; width:100%!important; }
body.home .elementor > .e-con{ --content-width:1280px; }

/* ==========================================================================
   15px FLOOR — the brief allows nothing smaller anywhere on the page
   ========================================================================== */
body.home #avs-main small,
body.home #avs-main cite,
body.home #avs-main legend,
body.home #avs-main figcaption,
.avs-reel-item figcaption,
.avs-reel-handle,
.avs-pay-d,
.avs-rev-who, .avs-rev-vb, .avs-rev-card cite,
.avs-bento-t small, .avs-bento-bar small,
.avs-doc-list small, .avs-pcard-price small,
.avs-prev-list footer, .avs-prev-list footer *,
.avs-rev-form label, .avs-rev-guard,
.avs-sug-t small{
  font-size:15px!important;
  line-height:1.45;
}
.avs-reel-handle{ font-size:15px!important; }

/* ==========================================================================
   CONTENT COLUMN — a true 1280px box with 24px gutters
   ========================================================================== */
body.home .elementor > .e-con{
  --content-width:1280px;
  max-width:none;
  padding-inline:0!important;
}
body.home .elementor > .e-con > .e-con-inner{
  max-width:1280px!important;
  width:100%!important;
  margin-inline:auto;
  padding-inline:24px!important;
  box-sizing:border-box;
}

/* Elementor's kit still caps the outer container at 1200px; the box must be
   full-bleed so the section ground runs edge to edge and the inner column is 1280. */
body.home .elementor > .e-con{
  width:100%!important;
  max-width:100%!important;
  --width:100%;
}

/* Astra's content wrapper caps at 1200px, which was silently constraining every
   Elementor container. The homepage must be full-bleed so section grounds and
   glows run edge to edge; the 1280px column is set on .e-con-inner instead. */
body.home .site-content > .ast-container,
body.home .ast-container,
body.home #primary,
body.home #avs-main,
body.home .entry-content,
body.home .elementor{
  max-width:100%!important;
  width:100%!important;
  padding-left:0!important;
  padding-right:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.home .site-content{ padding:0!important; }

/* ==========================================================================
   LIFESTYLE PHOTOGRAPHY IS IN — hero becomes a full-bleed photographic band
   ========================================================================== */
.avs-hero{
  position:relative;
  min-height:560px;
  display:flex; align-items:center;
  isolation:isolate;
}
.avs-hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center right;
  opacity:0; transition:opacity .7s ease;
}
.avs-hero-bg.is-active{ opacity:.92; }   /* the wash tints the photograph */
.avs-hero-wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg,
      rgba(233,223,246,.94) 0%,
      rgba(243,232,245,.72) 30%,
      rgba(251,238,220,.34) 62%,
      rgba(253,240,221,.20) 100%);
}
.avs-hero > .avs-hero-grid{ position:relative; z-index:2; width:100%; }
.avs-hero-grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr);
  gap:40px; align-items:center;
  max-width:1280px; margin-inline:auto; padding:64px 24px;
}
.avs-hero-stage{ position:relative; min-width:0; }
.avs-slide{ display:none; }
.avs-slide.is-active{ display:block; }
.avs-slide-copy{ max-width:19ch; }
.avs-slide-copy p{ max-width:34ch; }
.avs-slide-h{ text-shadow:0 1px 0 rgba(255,255,255,.5); }
.avs-slide-shop{
  display:inline-flex; align-items:center; min-height:44px; margin-top:14px;
  font-size:15px; font-weight:600; color:var(--indigo-900); text-decoration:underline;
  text-underline-offset:3px;
}
/* the assurance bar sits under the photographic band */
.avs-hero-assure{ max-width:1280px; margin:0 auto; }

/* Reel panel now shows a real 9:16 poster */
.avs-reel-frame{ max-height:560px; }
.avs-life--reel{ display:none; }
.avs-reel-item .avs-life-img{ width:100%; height:100%; object-fit:cover; border-radius:0; }

/* Situation line icons supplied as PNG */
.avs-sit-png{ width:56px; height:56px; object-fit:contain; }
.avs-sit-ico{ width:56px; height:56px; }

/* Paediatric photograph */
.avs-paed-media .avs-life-img{ border-radius:18px; width:100%; height:100%;
  object-fit:cover; max-height:320px; }
.avs-paed-media{ min-height:0; }

/* Guide headers */
.avs-guide-media{ display:block; }
.avs-guide-media .avs-life-img{ width:100%; height:190px; object-fit:cover; border-radius:16px; }

/* Category tiles carry the supplied gradient wash behind the product photo */
.avs-bento-big, .avs-bento-mid{
  background-size:cover!important; background-position:center!important;
}

@media (max-width:1024px){
  .avs-hero{ min-height:0; }
  .avs-hero-grid{ grid-template-columns:1fr; padding:44px 24px; }
  .avs-hero-bg{ background-position:center; }
  .avs-hero-wash{ background:linear-gradient(160deg,
      rgba(233,223,246,.95) 0%, rgba(243,232,245,.86) 45%, rgba(253,240,221,.62) 100%); }
  .avs-slide-copy{ max-width:none; }
}

/* ---- HERO LAYOUT CORRECTION -------------------------------------------- */
/* display:flex made the assurance bar a sibling of the grid and collapsed the
   photographic band. The hero is a stack: photo band, then the assurance bar. */
.avs-hero{ display:block!important; min-height:0; }
.avs-hero-grid{
  min-height:600px;
  align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.52fr);
  gap:48px;
}
/* Keep the subject clear of the reel panel on the right. */
.avs-hero-bg{ background-position:62% center; }
.avs-hero-bg.is-active{ opacity:1; }

/* Wash: strong enough on the left for the headline to read, clear on the right
   so the photograph is plainly visible. */
.avs-hero-wash{
  background:linear-gradient(100deg,
      rgba(233,223,246,.97) 0%,
      rgba(238,228,246,.90) 22%,
      rgba(246,236,240,.55) 42%,
      rgba(251,238,220,.18) 62%,
      rgba(253,240,221,.10) 100%);
}
.avs-slide-copy{ max-width:17ch; }
.avs-slide-copy p{ max-width:30ch; }

/* The reel is a glass card floating over the photograph. */
.avs-reel{ justify-self:end; width:min(300px,100%); }
.avs-reel-frame{
  aspect-ratio:9/16; max-height:none; height:auto;
  box-shadow:0 18px 46px rgba(46,26,94,.24);
  border:3px solid rgba(255,255,255,.9);
}
.avs-reel-more{ color:var(--indigo-900); }

/* Assurance bar sits below the photographic band, full width. */
.avs-hero-assure{
  margin:0 auto; max-width:1280px; width:calc(100% - 48px);
  transform:translateY(-28px); position:relative; z-index:3;
}

@media (max-width:1024px){
  .avs-hero-grid{ min-height:0; grid-template-columns:1fr; gap:28px; }
  .avs-reel{ justify-self:center; }
  .avs-hero-assure{ transform:none; margin-top:20px; }
}

/* ---- HERO BACKGROUND FIX ------------------------------------------------
   An earlier rule — .avs-hero > *:not(.avs-hero-wash){position:relative} —
   was also catching .avs-hero-bg, forcing it back to relative and collapsing
   it to zero height, so the photograph never painted. Restore it explicitly. */
.avs-hero > .avs-hero-bg{
  position:absolute!important;
  inset:0!important;
  height:auto!important;
  width:auto!important;
  z-index:0!important;
}
.avs-hero > .avs-hero-wash{ z-index:1!important; }
.avs-hero > .avs-hero-grid{ z-index:2!important; }

/* The Instagram link sits over the photograph — give it its own backing so it
   stays legible whatever is behind it. */
.avs-reel-more{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px; padding:8px 16px; margin-top:10px;
  align-self:center; text-decoration:none;
  box-shadow:0 4px 14px rgba(46,26,94,.10);
}
.avs-reel-more:hover{ background:#fff; }

/* Telephone numbers are the fallback for anyone who cannot finish online, which on
   this site is a real share of the audience. Wherever one appears in running text
   it still gets a full target rather than a 20px line of type. */
a[href^="tel:"]{
  display:inline-flex; align-items:center; min-height:48px;
  padding:0 4px; text-underline-offset:3px;
}

/* ============================================================================
   HEADER SEARCH — Ajax Search Pro instance 1
   The plugin generates its own stylesheet from the instance options, and that
   sheet is keyed on the instance id, so a handful of properties below carry
   !important. Everything else wins on ordinary specificity.
   ============================================================================ */

/* ---- the field itself ---- */
.avs-head-search .asp_w_container{ width:100%; }
.avs-head-search .asp_w.asp_m{
  border-radius:var(--pill);
  transition:none;
}
/* One ring round the whole pill, not a square box drawn inside a round one. */
.avs-head-search .asp_w.asp_m:focus-within{
  outline:var(--focus);
  outline-offset:2px;
}
.avs-head-search .asp_w .proinput input.orig:focus,
.avs-head-search .asp_w .proinput input.orig:focus-visible{
  outline:none;
  box-shadow:none;
}
.avs-head-search .asp_w .proinput input.orig::placeholder{ color:var(--ink-subtle); opacity:1; }
.avs-head-search .asp_w .probox .promagnifier{ margin:2px; cursor:pointer; }
.avs-head-search .asp_w .probox .promagnifier:focus-visible{
  outline:var(--focus); outline-offset:2px;
}
.avs-head-search .asp_w .probox .proclose{ cursor:pointer; }

/* ---- the dropdown ---- */
/* The results box is appended to <body>, so it cannot be scoped to the header. */
div.asp_w.asp_r.vertical{ padding:0 !important; overflow:hidden; }

/* Photograph left, name and facts stacked to its right. */
div.asp_r.vertical .results .item .asp_content{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  grid-template-areas:"img title" "img meta";
  column-gap:16px;
  row-gap:4px;
  align-content:center;
  padding:12px 16px !important;
  min-height:48px;
}
div.asp_r.vertical .results .item .asp_res_image_url{ grid-area:img; align-self:center; }
/* The photographs are cut-outs on white, so the picture area is given its own white
   tile. Otherwise the highlighted row shows a bare white square behind the product. */
div.asp_r.vertical .results .item .asp_image{
  width:84px !important; height:84px !important; margin:0 !important;
  background:#fff; border-radius:10px; overflow:hidden;
}
div.asp_r.vertical .results .item .asp_content h3{ grid-area:title; align-self:end; }
div.asp_r.vertical .results .item .etc{ display:none; }
div.asp_r.vertical .results .item .asp_res_text{ grid-area:meta; align-self:start; }

/* Price, category and stock read as three separate facts, not one run of text. */
.avs-sr-meta{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:4px 18px; font-size:17px; line-height:1.45;
}
.avs-sr-price{ font-weight:700; color:var(--indigo-900); font-size:18px; }
.avs-sr-cat{ color:var(--ink-muted); }
.avs-sr-stock{ font-weight:600; }
.avs-sr-in{ color:var(--success-ink); }
.avs-sr-wait{ color:var(--amber-ink); }
.avs-sr-out{ color:var(--danger-ink); }

/* Whole row is the target, and it shows where the keyboard is. The arrow keys move
   ASP's own .hovered class and leave focus in the field, so the row needs a shape
   cue as well as a tint: colour alone is not a signal this audience can rely on. */
div.asp_r.vertical .results .item{ cursor:pointer; }
div.asp_r.vertical .results .item.hovered,
div.asp_r.vertical .results .item:focus-within{
  background:var(--lavender);
  box-shadow:inset 6px 0 0 0 var(--violet-500);
}
div.asp_r.vertical .results .item.hovered .asp_content h3 a{ text-decoration:underline; text-underline-offset:3px; }
div.asp_r .results .item .asp_res_url:focus-visible{ outline:none; }
/* Each row is now a tab stop in its own right, so it needs a ring as well as the
   tint. The links inside it are not stops any more, hence the ring on the row. */
div.asp_r.vertical .results .item:focus-visible{ outline:var(--focus); outline-offset:-3px; }

/* Why a row is here, when the words that matched are not in its name. Quiet, but
   still 17px, because it is the line that explains an otherwise odd looking result. */
/* Two lines, not one: cut to a single line it ended mid word ("At 18 lb it is a...")
   and lost the very fact it was there to give. */
.avs-sr-why{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  margin-top:2px; font-size:17px; line-height:1.4;
  color:var(--ink-muted); overflow:hidden;
}
.avs-sr-why b{ font-weight:700; color:var(--ink); }

/* Spoken, never seen: the result count for a screen reader. */
.avs-live{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---- did you mean ---- */
div.asp_r .asp_nores{ padding:14px 16px 12px !important; }
div.asp_r .asp_nores .asp_nores_header{ font-size:17px; line-height:1.5; }
div.asp_r .asp_nores .asp_nores_kw_suggestions{ margin-top:4px; font-size:17px; }
div.asp_r .asp_nores .asp_keyword{
  display:inline-flex; align-items:center; min-height:48px;
  padding:0 4px !important; margin-left:4px;
  text-decoration:underline; text-underline-offset:4px;
  cursor:pointer;
}
div.asp_r .asp_nores .asp_keyword:focus-visible{
  outline:var(--focus); outline-offset:2px; border-radius:6px;
}

/* ---- see all results ---- */
div.asp_r p.showmore{ margin:0; }
div.asp_r p.showmore a{
  min-height:48px; display:flex !important; align-items:center; justify-content:center;
  gap:6px;  /* flex eats the space before the count span, so put it back */
  padding:12px 16px !important; text-decoration:none;
}
div.asp_r p.showmore a:hover{ text-decoration:underline; }
div.asp_r p.showmore a:focus-visible{ outline:var(--focus); outline-offset:-3px; }

/* ---- small screens ---- */
@media (max-width:640px){
  div.asp_r.vertical .results{ max-height:60vh !important; overflow-y:auto !important; }
  div.asp_r.vertical .results .item .asp_content{
    grid-template-columns:64px minmax(0,1fr);
    column-gap:12px; padding:10px 12px !important;
  }
  div.asp_r.vertical .results .item .asp_image{ width:64px !important; height:64px !important; }
  .avs-sr-meta{ gap:2px 14px; }
}

/* Astra sets its own navigation link size, which lands at 14.5px on the home page.
   The site's own token calls 15px the floor, and a navigation label is the first
   thing a reader has to read. */
.avs-nav .menu-link,
.ast-builder-menu .menu-link,
.main-header-menu .menu-link{ font-size:var(--t-meta,15px); }

/* Two stragglers below the site's own 15px floor: a footer line at 12px and the
   card badge at 13px. Astra's nav needs the higher specificity its own builder
   markup forces. */
.avs-foot .avs-foot-hsa, .avs-foot-hsa{ font-size:var(--t-meta,15px); }
.avs-badge{ font-size:var(--t-meta,15px); }
.ast-builder-menu-1 .main-header-menu .menu-link,
.site-header .menu-link,
nav .menu-link{ font-size:var(--t-meta,15px)!important; }