/*
Theme Name:   iFix (Astra Child)
Theme URI:    https://kung.la/ifix
Description:  Child theme for iFix. Carries the iFix design system: OKLCH token
              palette with measured contrast pairs, fluid type scale, and the
              component classes that Elementor containers reference by name.
Author:       iFix
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* ============================================================
   ASTRA / ELEMENTOR BRIDGE
   The design system below assumes it owns the page box. These
   rules stop the parent theme and the builder from adding a
   second layer of padding, width, or type on top of it.
   Pages opt in per-page via Astra's own "Full Width / Stretched"
   content layout, so nothing here fights Astra globally.
   ============================================================ */

/* Elementor containers ship with their own padding and max-width.
   NOTE: a bare `.e-con { padding: 0 }` does NOT work here. Elementor
   declares `.e-con { padding: var(--padding-*) }` at the same (0,1,0)
   specificity and its stylesheet loads after this one, so the tie goes
   to Elementor. The real reset lives in the Elementor bridge at the
   bottom of this file, keyed on `.e-con.<design-class>` (0,2,0). */
.elementor-widget-container {
  padding: 0;
}
.e-con > .wrap,
.e-con-inner > .wrap {
  width: 100%;
}

/* Elementor sets --container-max-width globally; let full-bleed
   sections (hero glow, inverted CTA band) actually reach the edge. */
.elementor-section-full_width > .elementor-container,
.e-con.e-con--full {
  max-width: none;
}

/* Astra prints a page title and entry header on every page. The
   landing page carries its own H1 inside the hero. */
.ifix-no-title .entry-header,
.ifix-no-title .ast-single-entry-banner {
  display: none;
}

/* Astra's content wrapper adds vertical padding that doubles up
   with --section-y on builder pages. */
.ast-page-builder-template .site-content > .ast-container,
.ast-page-builder-template .entry-content {
  padding: 0;
  margin: 0;
  max-width: none;
}

/* ============================================================
   TOKENS
   Colors are authored in OKLCH. Every foreground/background
   pair below was measured (WCAG 2 + APCA) in light theme,
   dark theme and inside the inverted band.
   ============================================================ */
:root{
  color-scheme:light;

  /* --- surfaces --- */
  --bg:            oklch(1 0 0);
  --surface:       oklch(0.975 0.003 265);
  --surface-2:     oklch(0.955 0.004 265);
  --line:          oklch(0.895 0.006 265);   /* structural separators only */
  --line-strong:   oklch(0.83 0.008 265);

  /* --- foreground --- */
  --fg:            oklch(0.22 0.012 265);    /* 17.3:1 on --bg  */
  --fg-muted:      oklch(0.52 0.012 265);    /*  5.5:1 on --bg, 5.1:1 on --surface */

  /* --- brand: one meaning — "this is the primary action / iFix accent" --- */
  --brand:         oklch(0.773 0.218 149);   /* fill only            */
  --on-brand:      oklch(0.22 0.06 149);     /*  9.0:1 on --brand    */
  --brand-ink:     oklch(0.50 0.16 149);     /*  5.6:1 on --bg — brand as text/icon  */
  --brand-wash:    oklch(0.96 0.04 149);     /*  5.0:1 under --brand-ink            */

  /* --- non-brand accents --- */
  --star:          oklch(0.64 0.15 75);      /* 3.4:1 on --bg — decorative, never sole cue */

  /* --- decorative only ---------------------------------------
     These two hues exist to make glows and the rotating card
     ring read as light rather than as a flat tint. They never
     carry meaning and never sit behind text, so they are
     exempt from the contrast rules above.                      */
  --glow-a:        oklch(0.80 0.20 149);     /* brand green */
  --glow-b:        oklch(0.75 0.15 220);     /* cyan        */

  /* --- focus ------------------------------------------------
     Deliberately neutral, not brand green: a green ring beside
     a green button is the one pairing the brand color cannot
     survive (2.7:1). The neutral clears 9:1 against every
     surface AND every control fill in this palette.
     Re-declared on each inverted surface.                     */
  --focus:         oklch(0.22 0.012 265);

  /* --- elevation (depth = shadow, never a border) --- */
  --shadow-1: 0 1px 2px oklch(0.22 0.012 265 / .06), 0 1px 1px oklch(0.22 0.012 265 / .04);
  --shadow-2: 0 4px 12px oklch(0.22 0.012 265 / .07), 0 1px 3px oklch(0.22 0.012 265 / .06);
  --shadow-3: 0 12px 32px oklch(0.22 0.012 265 / .10), 0 2px 8px oklch(0.22 0.012 265 / .06);
  --img-outline: oklch(0 0 0 / .1);          /* pure black in light, pure white in dark */

  /* --- type scale (rem, so it honours the user's text size) --- */
  --text-micro: 0.8125rem;  /* 13px — uppercase labels           */
  --text-caption:0.875rem;  /* 14px — captions                   */
  --text-ui:    0.9375rem;  /* 15px — dense UI                   */
  --text-body:  1.0625rem;  /* 17px — body, and every input      */
  --text-lead:  1.25rem;    /* 20px                              */
  --text-h3:    1.375rem;   /* 22px — card headings              */
  --text-h2:    clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  --text-h1:    clamp(2.125rem, 1.2rem + 3.9vw, 3.75rem);
  --text-stat:  clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);

  /* --- radii: outer = inner + padding --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 24px;   /* = --r-md (12) + card gutter (12) */
  --r-pill: 999px;

  /* --- rhythm --- */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --measure: 34rem;              /* ~66 characters at 16px */
  --section-y: clamp(4rem, 8vw, 7rem);
}

/* Inverted band inside the light page. Re-declares every token
   it uses so nothing (including the focus ring) inherits a
   value that was only verified against a light surface. */
.invert{
  color-scheme:dark;
  --bg:          oklch(0.145 0.011 265);
  --surface:     oklch(0.185 0.012 265);
  --surface-2:   oklch(0.225 0.013 265);
  --line:        oklch(0.30 0.012 265);
  --line-strong: oklch(0.38 0.012 265);
  --fg:          oklch(0.97 0.004 265);      /* 18.2:1 */
  --fg-muted:    oklch(0.76 0.010 265);      /*  9.2:1 */
  --brand-ink:   oklch(0.80 0.20 149);       /* 11.4:1 */
  --brand-wash:  oklch(0.28 0.07 149);
  --star:        oklch(0.82 0.17 80);
  --focus:       oklch(0.97 0.004 265);
  --img-outline: oklch(1 0 0 / .1);
  --shadow-1: 0 1px 2px oklch(0 0 0 / .5);
  --shadow-2: 0 4px 12px oklch(0 0 0 / .5);
  --shadow-3: 0 12px 32px oklch(0 0 0 / .55);
  background:var(--bg);
  color:var(--fg);
}

/* ============================================================
   DECORATION — glows and the rotating card ring
   Glows are static: they read as light without spending a
   permanently running animation. The only motion here is the
   ring, and it runs solely while a card is hovered or focused,
   never idle and never off-screen.
   ============================================================ */
@property --spin{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--spin:360deg}}

/* Soft field of light. Always behind content, never behind text
   at a strength that could affect contrast. */
/* overflow:hidden contains the glow, which is deliberately wider
   than its section — without it the blur would push the page into
   horizontal scroll at narrow widths and at large text sizes. */
.glow{position:relative;isolation:isolate;overflow:hidden}
.glow::before{
  content:"";position:absolute;z-index:-1;
  inset-block-start:var(--glow-top,-10%);
  inset-inline-start:50%;
  translate:-50% 0;
  width:min(60rem,120%);aspect-ratio:2/1;
  border-radius:50%;
  background:
    radial-gradient(closest-side, oklch(from var(--glow-a) l c h / .30), transparent 70%) 35% 50%/70% 100% no-repeat,
    radial-gradient(closest-side, oklch(from var(--glow-b) l c h / .20), transparent 70%) 70% 40%/60% 90% no-repeat;
  filter:blur(60px);
  pointer-events:none;
}
@supports not (color: oklch(from red l c h)){
  .glow::before{
    background:
      radial-gradient(closest-side, oklch(0.80 0.20 149 / .30), transparent 70%) 35% 50%/70% 100% no-repeat,
      radial-gradient(closest-side, oklch(0.75 0.15 220 / .20), transparent 70%) 70% 40%/60% 90% no-repeat;
  }
}

/* Conic ring drawn in the card's own border box via a mask, so
   it needs no extra wrapper and cannot disturb the concentric
   radii. Idle opacity is 0; only hover/focus reveals it. */
.ring{position:relative}
.ring::after{
  content:"";position:absolute;inset:0;z-index:2;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--spin),
    transparent 0deg,
    var(--glow-a) 55deg,
    var(--glow-b) 110deg,
    transparent 165deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity 400ms cubic-bezier(0.2,0,0,1);
  pointer-events:none;
}
.ring:hover::after,
.ring:focus-within::after{opacity:1}

/* The ring is decoration, so hover also carries a non-motion
   cue (lift + glow) that survives reduced motion entirely. */
.ring{
  transition-property:box-shadow,translate;
  transition-duration:300ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1);
}
.ring:hover,
.ring:focus-within{
  box-shadow:var(--shadow-3), 0 0 32px -8px oklch(0.80 0.20 149 / .35);
}

@media (prefers-reduced-motion: no-preference){
  .ring:hover::after,
  .ring:focus-within::after{animation:spin 4s linear infinite}
  .ring:hover,
  .ring:focus-within{translate:0 -3px}
}
@media (forced-colors: active){
  .glow::before,.ring::after{display:none}
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--text-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  text-underline-position:from-font;
  /* Last resort only: long runs (nbsp-joined phone numbers, the
     display heading) break rather than push the page sideways at
     extreme text sizes. Normal wrapping is unaffected. */
  overflow-wrap:break-word;
}

h1,h2,h3{
  line-height:1.12;
  letter-spacing:-0.025em;
  font-weight:680;
  text-wrap:balance;
}
p{text-wrap:pretty}

img{max-width:100%;height:auto;display:block}
svg{display:block}
ul,ol{list-style:none;padding:0}

a{color:inherit;text-decoration:none}
a:not([class]){
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-underline-offset:0.15em;
  text-decoration-skip-ink:auto;
}

::selection{background:var(--brand-wash);color:var(--fg)}

/* One focus rule for the whole page. --focus is redefined on
   every inverted surface, so the ring is always verified
   against what is actually behind it. */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}
@media (forced-colors: active){
  :focus-visible{outline:2px solid CanvasText}
}

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

/* Screen-reader-only text that is not a focusable control */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.skip-link{
  position:absolute;inset-block-start:0;inset-inline-start:var(--gutter);
  z-index:200;
  transform:translateY(-120%);
  background:var(--fg);color:var(--bg);
  padding:0.75rem 1.25rem;
  border-radius:0 0 var(--r-md) var(--r-md);
  font-weight:600;
}
.skip-link:focus{transform:translateY(0)}

/* ============================================================
   BUTTONS
   Exactly one meaning per fill. --brand fills only the
   "get in touch" primary action; everything else is neutral.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  min-height:2.75rem;                       /* 44px touch target */
  padding:0.6875rem 1.25rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font:inherit;font-size:var(--text-ui);font-weight:600;
  letter-spacing:-0.005em;
  cursor:pointer;
  text-align:center;
  transition-property:background-color,border-color,color,box-shadow,scale;
  transition-duration:150ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1);
}
.btn svg{width:1.125rem;height:1.125rem;flex:none;stroke-width:1.75}

/* Each hover state declares a plain fallback first, so browsers
   without relative color syntax still get a visible change. */
.btn--primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-1)}
.btn--primary:hover{
  background:oklch(0.723 0.202 149);
  background:oklch(from var(--brand) calc(l - 0.05) c h);
  box-shadow:var(--shadow-2);
}

.btn--solid{background:var(--fg);color:var(--bg);box-shadow:var(--shadow-1)}
.btn--solid:hover{
  background:oklch(0.30 0.012 265);
  background:oklch(from var(--fg) calc(l + 0.08) c h);
  box-shadow:var(--shadow-2);
}

.btn--quiet{background:var(--bg);color:var(--fg);border-color:var(--line-strong)}
.btn--quiet:hover{background:var(--surface-2);border-color:var(--fg-muted)}

.btn--sm{min-height:2.5rem;padding:0.5rem 1rem;font-size:var(--text-ui)}

@media (prefers-reduced-motion: no-preference){
  .btn:active{scale:0.96}
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky;inset-block-start:0;z-index:100;
  background:var(--bg);                     /* opaque fallback: never a see-through bar */
  background:oklch(from var(--bg) l c h / 0.85);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  padding-inline-start:env(safe-area-inset-left);
  padding-inline-end:env(safe-area-inset-right);
}
.nav{
  display:flex;align-items:center;gap:1rem;
  min-height:3rem;
}
.wordmark{
  font-size:1.375rem;font-weight:700;letter-spacing:-0.03em;
  display:inline-flex;align-items:baseline;
}
.wordmark b{color:var(--brand-ink);font-weight:inherit}

/* Two stacked pins. At this size the pair reads as one block
   beside the wordmark rather than as two separate labels. */
.nav-places{
  display:none;
  flex-direction:column;gap:0.125rem;
  font-size:var(--text-micro);font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  line-height:1.25;
  color:var(--fg-muted);
  padding-inline-start:0.75rem;
  margin-inline-start:0.75rem;
  border-inline-start:1px solid var(--line);   /* structural: separates two identities */
}
.nav-places li{display:flex;align-items:center;gap:0.3125rem}
.nav-places svg{width:0.6875rem;height:0.875rem;flex:none;fill:currentColor;color:var(--brand-ink)}

.nav-spacer{flex:1}

.nav-toggle{
  display:inline-flex;align-items:center;gap:0.5rem;
  min-height:2.75rem;padding:0.5rem 0.875rem;
  background:none;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  color:var(--fg);font:inherit;font-size:var(--text-ui);font-weight:600;
  cursor:pointer;
}
.nav-toggle svg{width:1.125rem;height:1.125rem;stroke-width:1.75}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

.nav-menu{
  display:none;
  position:absolute;inset-inline:var(--gutter);inset-block-start:calc(100% + 0.5rem);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  padding:0.75rem;
}
.nav-menu[data-open]{display:block}
.nav-menu ul{display:flex;flex-direction:column;gap:0.125rem}
.nav-menu a{
  display:block;padding:0.75rem 0.875rem;
  border-radius:var(--r-md);              /* 12 + 12 gutter = 24 outer */
  font-size:var(--text-body);font-weight:500;
  text-decoration:none;
}
.nav-menu a:hover{background:var(--surface-2)}

.nav-cta{display:none}

@media (min-width: 56rem){
  .nav-toggle{display:none}
  .nav-places{display:inline-flex}
  .nav-menu{
    display:block;position:static;inset:auto;
    background:none;border:0;box-shadow:none;padding:0;
  }
  .nav-menu ul{flex-direction:row;gap:0.25rem}
  .nav-menu a{padding:0.5rem 0.75rem;font-size:var(--text-ui);color:var(--fg-muted)}
  .nav-menu a:hover{color:var(--fg);background:var(--surface-2)}
  .nav-cta{display:inline-flex}
}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{scroll-margin-block-start:5.5rem}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.5rem,5vw,3.5rem)}

.eyebrow{
  font-size:var(--text-micro);font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--brand-ink);
  margin-block-end:0.75rem;
}
/* 44rem, not 38: the longest heading on the page needs 639px on one
   line and 38rem capped it at 608px, breaking it across two. The lead
   paragraph below keeps its own 34rem measure, so only headings use
   the extra width. */
.section-head{max-width:44rem;margin-block-end:clamp(2rem,4vw,3rem)}
.section-head h2{font-size:var(--text-h2)}
.section-head p{
  font-size:var(--text-lead);color:var(--fg-muted);
  margin-block-start:0.875rem;max-width:var(--measure);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,7vw,5rem);
  background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 100%);
  border-block-end:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,5vw,3.5rem);
  align-items:center;
}
.hero h1{font-size:var(--text-h1);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--brand-ink)}
.hero-lead{
  font-size:var(--text-lead);color:var(--fg-muted);
  margin-block:1.25rem 2rem;max-width:var(--measure);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:0.75rem}

.hero-badges{
  display:flex;flex-wrap:wrap;
  gap:0.75rem 1.75rem;
  /* the end value matters: Astra's `ol,ul{margin:0 0 1.5em 3em}` otherwise leaves
     22px under the list, which pushes the hero row's centre off the copy's centre */
  margin-block:2.5rem 0;
  font-size:var(--text-ui);
}
.hero-badges li{display:flex;align-items:center;gap:0.5rem;font-weight:500}
.hero-badges svg{width:1.125rem;height:1.125rem;flex:none;color:var(--brand-ink);stroke-width:1.75}

/* Grid items default to min-width:auto, so their min-content size
   becomes the track's floor and the layout refuses to shrink past
   it. Reset it on every content grid. */
.hero-grid > *,
.places > *,
.cats > *,
.steps > *,
.services > *,
.foot-grid > *{min-width:0}
.hero-figure{justify-self:center;max-width:min(34rem,100%)}
/* Elementor ships `.elementor.elementor .e-con > .elementor-widget{max-width:100%}`
   at (0,3,0) and loads after this sheet, so the cap above is ignored on the
   landing page and the hero art fills its whole grid column. Four classes only
   *ties* it and loses on load order, so this needs five. */
.elementor .e-con > .elementor-widget.hero-figure.hero-figure{max-width:min(34rem,100%)}
.hero-figure img{
  width:100%;
  /* No drop-shadow. `filter:drop-shadow` follows the alpha channel, so on the
     old transparent PNG it shadowed the devices; the current art is an opaque
     JPEG on white, where the same filter shadows the *rectangle* and draws a
     grey box edge across the white page. Restore it only if the art goes back
     to a cut-out PNG. */
  /* The old PNG was not centred inside its own canvas and needed
     transform:translateX(1.6%) to put its ink on the axis. The current file is
     cropped to its own ink, so box-centring is already optical centring. */
}
@media (min-width: 56rem){
  .hero-grid{grid-template-columns:1.05fr 0.95fr}
  /* justify-self stays `center` from the base rule: since the art is capped at
     23rem it no longer fills the column, and `end` left it hugging the page
     gutter with all the slack piled between the two columns. */
}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--bg);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);          /* depth = shadow, not a border */
  overflow:hidden;
  display:flex;flex-direction:column;
}
/* --- locations --- */
.places{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,3vw,2rem)}
@media (min-width: 48rem){ .places{grid-template-columns:1fr 1fr} }

.place-photo{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  outline:1px solid var(--img-outline);outline-offset:-1px;
}
.place-body{padding:clamp(1.25rem,3vw,1.75rem);display:flex;flex-direction:column;flex:1}
.place-body h3{font-size:var(--text-h3)}
.place-kicker{font-size:var(--text-ui);color:var(--fg-muted);margin-block-start:0.25rem}

.rating{
  display:inline-flex;align-items:center;gap:0.375rem;
  font-size:var(--text-ui);color:var(--fg-muted);
  margin-block-start:0.75rem;
  font-variant-numeric:tabular-nums;
}
.rating svg{width:0.9375rem;height:0.9375rem;color:var(--star);fill:currentColor}

/* Two aligned columns: icon + term on the left, value on the right.
   A <dl> wrapper <div> may only contain dt/dd, so each .place-row is
   display:contents and contributes its dt/dd straight to the grid,
   which keeps every label and value on one shared pair of columns. */
.place-rows{
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:clamp(1.25rem, 3vw, 2rem);
  row-gap:1rem;
  align-items:start;
  margin-block:1.5rem 1.75rem;
}
.place-row{display:contents}
.place-row > dt{
  display:flex;align-items:center;gap:0.5625rem;
  font-size:var(--text-caption);font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--fg-muted);
  padding-block-start:0.125rem;
}
.place-row > dt svg{
  flex:none;
  width:1.25rem;height:1.25rem;color:var(--fg-muted);stroke-width:1.75;
}
.place-row dd{font-size:var(--text-body);line-height:1.5;min-width:0}
.place-row a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:0.2em}
.place-row a:hover{text-decoration-color:currentColor}
/* Phone numbers are single-line, so inline-block lifts them to a
   24px target. The address must stay inline so it can still wrap. */
.place-row dd a[href^="tel:"]{display:inline-block;padding-block:0.25rem}

.hours{
  display:grid;grid-template-columns:auto 1fr;
  gap:0.125rem 1.25rem;
  font-size:var(--text-ui);
  font-variant-numeric:tabular-nums;
}
.hours dt{
  font-size:var(--text-ui);font-weight:500;
  letter-spacing:normal;text-transform:none;
  color:var(--fg-muted);margin:0;
}
.hours dd{white-space:nowrap}

.place-actions{display:flex;flex-wrap:wrap;gap:0.75rem;margin-block-start:auto}

/* --- categories --- */
.cats{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,3vw,1.5rem)}
@media (min-width: 48rem){
  .cats{grid-template-columns:1fr 1fr}
  .cat--wide{grid-column:1/-1}
  .cat--wide .cat-inner{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;align-items:center}
}

.cat{
  background:var(--bg);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  padding:12px;                        /* 12 + inner 12 = 24 outer radius */
}
.cat-inner{height:100%}
.cat-head{padding:calc(1.5rem - 12px) 0.75rem 1.5rem}
.cat-icon{
  width:2.75rem;height:2.75rem;
  display:grid;place-items:center;
  border-radius:var(--r-md);
  background:var(--brand-wash);color:var(--brand-ink);
  margin-block-end:1rem;
}
.cat-icon svg{width:1.375rem;height:1.375rem;stroke-width:1.75}
.cat-head h3{font-size:var(--text-h3)}
.cat-head p{font-size:var(--text-ui);color:var(--fg-muted);margin-block-start:0.5rem;max-width:34ch}

.cat-links{display:flex;flex-direction:column;gap:0.125rem}
.cat-link{
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
  min-height:2.75rem;
  padding:0.75rem 0.875rem;
  border-radius:var(--r-md);
  font-size:var(--text-ui);font-weight:500;
  background:var(--surface);
  transition-property:background-color,color;
  transition-duration:150ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1);
}
.cat-link:hover{background:var(--brand-wash);color:var(--fg)}
.cat-link > span{display:inline-flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.cat-link svg{width:1rem;height:1rem;flex:none;color:var(--fg-muted);stroke-width:2}
.cat-link:hover svg{color:var(--brand-ink)}
.tag{
  font-size:var(--text-micro);font-weight:700;
  letter-spacing:0.03em;
  padding:0.125rem 0.4375rem;border-radius:var(--r-sm);
  background:var(--brand);color:var(--on-brand);
  white-space:nowrap;
}

/* --- process --- */
.steps{
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.25rem,3vw,1.5rem);
  counter-reset:step;
}
@media (min-width: 48rem){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{
  background:var(--bg);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  padding:clamp(1.5rem,3vw,1.75rem);
}
.step::before{
  counter-increment:step;content:counter(step);
  display:grid;place-items:center;
  width:2rem;height:2rem;
  border-radius:var(--r-pill);
  background:var(--brand-wash);color:var(--brand-ink);
  font-size:var(--text-ui);font-weight:700;
  font-variant-numeric:tabular-nums;
  margin-block-end:1.125rem;
}
.step h3{font-size:var(--text-lead)}
.step p{font-size:var(--text-ui);color:var(--fg-muted);margin-block-start:0.5rem}

/* --- services --- */
.services{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,3vw,1.5rem)}
@media (min-width: 34rem){ .services{grid-template-columns:1fr 1fr} }
@media (min-width: 64rem){ .services{grid-template-columns:repeat(4,1fr)} }
.service{
  padding-block-start:1.25rem;
  border-block-start:2px solid var(--line-strong);
}
.service h3{
  font-size:var(--text-lead);
  display:flex;align-items:center;gap:0.5rem;
}
.service h3 svg{width:1.125rem;height:1.125rem;flex:none;color:var(--brand-ink);stroke-width:1.75}
.service p{font-size:var(--text-ui);color:var(--fg-muted);margin-block-start:0.5rem}

/* --- insurance --- */
/* The padding lives on the text column, not the panel, so the photo
   can sit flush against the panel's top, right and bottom edges.
   overflow:hidden is what gives it the panel's 24px corner. */
.insurance{
  display:grid;grid-template-columns:1fr;
  gap:0;align-items:center;
  border-radius:var(--r-lg);
  padding:0;
  overflow:hidden;
  background:var(--brand-wash);
}
.insurance-body{padding:clamp(1.75rem,4vw,3rem)}
@media (min-width: 56rem){
  /* Second track holds the photo now, not the button. */
  .insurance{grid-template-columns:1.15fr minmax(0, 24rem)}
}
.insurance h2{font-size:clamp(1.5rem,1.1rem + 1.5vw,2rem)}
.insurance p{margin-block-start:0.875rem;max-width:var(--measure);color:var(--fg)}

/* The button sits under the copy on the text side, so it reads as the
   end of that column rather than as a separate element beside it. */
.insurance-actions{margin-block-start:1.75rem}
/* Elementor ships `.elementor img{border-radius:0}` at (0,1,1); the
   container class here clears it without !important. */
.e-con .insurance-figure{
  width:100%;
  height:auto;
  border-radius:0;                    /* the panel's own clip rounds it */
  outline:0;
}
@media (min-width: 56rem){
  /* Fills the column's full height beside the copy. min-height keeps a
     sensible crop when the text column is the shorter of the two. */
  .e-con .insurance-figure{
    align-self:stretch;
    height:100%;
    min-height:17rem;
    object-fit:cover;
  }
}

/* --- brands: static text, deliberately not styled like controls --- */
.brand-list{
  display:flex;flex-wrap:wrap;
  gap:0.5rem 1.75rem;
  font-size:var(--text-ui);color:var(--fg-muted);
}

/* --- final CTA --- */
.final{text-align:center}
.final h2{font-size:var(--text-h2)}
.final p{
  font-size:var(--text-lead);color:var(--fg-muted);
  margin:1rem auto 2rem;max-width:32rem;
}
.final-actions{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center}
.final-actions .btn{font-variant-numeric:tabular-nums}

/* ============================================================
   FOOTER
   ============================================================ */
/* No padding-block here: .site-primary-footer-wrap and
   .site-below-footer-wrap inside carry their own, and declaring it
   on both doubled the footer's top and bottom space. */
.site-footer{
  background:var(--surface);
  /* No rules anywhere in the footer: the --surface band already separates it
     from the page, and Astra's own two (main row + below-footer row) are off
     in astra-settings (`hb-footer-main-sep`, `hbb-footer-main-sep`), not CSS. */
}
.foot-grid{
  display:grid;grid-template-columns:1fr;
  gap:2.5rem;
  margin-block-end:2.5rem;
}
@media (min-width: 34rem){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (min-width: 64rem){ .foot-grid{grid-template-columns:1.3fr 1fr 1fr 0.9fr} }

.foot-about p{
  font-size:var(--text-ui);color:var(--fg-muted);
  margin-block-start:0.875rem;max-width:32ch;
}

/* Shared footer column heading */
.foot-h{
  font-size:var(--text-micro);font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--fg-muted);
  margin-block-end:0.875rem;
}

.foot-col ul{display:flex;flex-direction:column;gap:0.125rem}
.foot-col a{
  display:inline-block;
  padding-block:0.4375rem;                 /* keeps 24px+ targets without a visible box */
  font-size:var(--text-ui);
  text-decoration:none;
}
.foot-col a:hover{
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-underline-offset:0.2em;
}

/* --- footer location blocks --- */
.foot-place .foot-h{
  display:flex;align-items:center;gap:0.375rem;
  color:var(--fg);
}
.foot-place .foot-h svg{width:0.6875rem;height:0.875rem;flex:none;fill:currentColor;color:var(--brand-ink)}
/* Child combinators throughout: the nested hours <dl> must not
   inherit the outer list's flex column. */
.foot-place > dl{display:flex;flex-direction:column;gap:0.75rem;font-size:var(--text-ui)}
.foot-place > dl > div > dt{
  font-size:var(--text-micro);font-weight:700;
  letter-spacing:0.07em;text-transform:uppercase;
  color:var(--fg-muted);
  margin-block-end:0.0625rem;
}
.foot-place > dl > div > dd{color:var(--fg);line-height:1.5}
.foot-place a{text-decoration:none}
.foot-place a:hover{
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-underline-offset:0.2em;
}
.foot-place a[href^="tel:"]{
  display:inline-block;padding-block:0.25rem;   /* lifts to a 24px target */
  font-variant-numeric:tabular-nums;
}
.foot-hours{
  display:grid;grid-template-columns:auto 1fr;
  gap:0.0625rem 0.875rem;
  font-variant-numeric:tabular-nums;
}
.foot-hours dt{
  font-size:var(--text-ui);font-weight:500;
  letter-spacing:normal;text-transform:none;
  color:var(--fg-muted);margin:0;
}
.foot-hours dd{white-space:nowrap}

/* --- social --- */
.foot-mail{margin-block-start:0.75rem;font-size:var(--text-ui)}
.foot-mail a{text-decoration:none;display:inline-block;padding-block:0.25rem}
.foot-mail a:hover{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:0.2em}
.foot-social{
  display:flex;gap:0.5rem;
  margin-block-start:1.25rem;
}
.foot-social a{
  display:grid;place-items:center;
  width:2.75rem;height:2.75rem;              /* full 44px target */
  border-radius:var(--r-pill);
  color:var(--fg-muted);
  background:var(--bg);
  box-shadow:var(--shadow-1);
  transition-property:color,box-shadow,scale;
  transition-duration:150ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1);
}
.foot-social a:hover{color:var(--brand-ink);box-shadow:var(--shadow-2)}
.foot-social svg{width:1.25rem;height:1.25rem;fill:currentColor}
@media (prefers-reduced-motion: no-preference){
  .foot-social a:active{scale:0.96}
}

.foot-bottom{
  border-block-start:1px solid var(--line);
  padding-block-start:1.5rem;
  display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;
  justify-content:space-between;
  font-size:var(--text-caption);color:var(--fg-muted);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   ASTRA HEADER / FOOTER BRIDGE
   The design system above was authored against hand-written
   markup (.site-header, .nav-menu, .site-footer). Astra's
   Header/Footer Builder emits its own class names, so this
   block re-points the same tokens at Astra's structure.
   Nothing here introduces a new value: every declaration
   pulls from the tokens already defined above.

   Astra's default container is 1200px, which is exactly the
   75rem of .wrap, so widths already agree; only the gutter
   and the vertical rhythm need restating.
   ============================================================ */

/* ---------- header shell ---------- */
#masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
}
#masthead .ast-primary-header-bar {
  background: var(--bg);
  background: oklch(from var(--bg) l c h / 0.85);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
}
#masthead .ast-primary-header-bar .ast-container {
  padding-inline: var(--gutter);
}
#masthead .ast-builder-grid-row {
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
}

/* The wordmark and the location pins sit as one block on the
   left, matching the source's flex order. */
.ast-header-html-1 .ast-builder-html-element,
.ast-header-html-2 .ast-builder-html-element {
  display: flex;
  align-items: center;
}
.ast-header-html-1 .wordmark {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
  color: var(--fg);
}

/* Below 56rem the pin pair is hidden, so its Astra wrapper must
   go too or it still claims grid space. */
@media (max-width: 55.999rem) {
  .ast-header-html-2 { display: none; }
}

/* ---------- primary menu ---------- */
.main-header-menu > .menu-item > .menu-link {
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md);
  font-size: var(--text-ui);
  font-weight: 500;
  line-height: 1.55;
  color: var(--fg-muted);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
              color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link {
  color: var(--fg);
  background: var(--surface-2);
}
.main-header-menu .sub-menu {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  padding: 0.75rem;
}

/* Astra's mobile disclosure panel, styled as the source's
   .nav-menu popover. */
.ast-mobile-header-wrap .main-header-menu,
.ast-hfb-header .ast-mobile-popup-drawer .main-header-menu {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: 0.75rem;
}
.ast-mobile-header-wrap .main-header-menu .menu-link {
  padding: 0.75rem 0.875rem;
  border-radius: var(--r-md);
  font-size: var(--text-body);
  color: var(--fg);
}
.menu-toggle.main-header-menu-toggle {
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: none;
  color: var(--fg);
  font-size: var(--text-ui);
  font-weight: 600;
}

/* ---------- header CTA ---------- */
.ast-header-button-1 .ast-custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-1);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
}
.ast-header-button-1 .ast-custom-button:hover {
  background: oklch(0.723 0.202 149);
  background: oklch(from var(--brand) calc(l - 0.05) c h);
  box-shadow: var(--shadow-2);
  color: var(--on-brand);
}
@media (prefers-reduced-motion: no-preference) {
  .ast-header-button-1 .ast-custom-button:active { scale: 0.96; }
}
@media (max-width: 55.999rem) {
  .ast-header-button-1 { display: none; }
}

/* ---------- footer ---------- */
.site-footer,
.site-primary-footer-wrap {
  background: var(--surface);
}
.site-primary-footer-wrap {
  padding-block: clamp(4rem, 7.5vw, 5.5rem) 2.75rem;
}
.site-primary-footer-wrap .ast-container,
.site-below-footer-wrap .ast-container {
  padding-inline: var(--gutter);
}
.site-primary-footer-wrap .ast-builder-grid-row {
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 64rem) {
  .site-primary-footer-wrap .ast-builder-grid-row {
    grid-template-columns: 1.3fr 1fr 1fr 0.9fr;
  }
}

/* The custom-HTML footer column carries its own <h2 class="foot-h">
   inside the markup, so Astra's widget title above it is hidden.
   Scoped to widget_custom_html on purpose: the site-links column is a
   nav_menu widget whose widget title IS its column heading. */
.site-footer .widget_custom_html .widget-title {
  display: none;
}
.site-footer .widget {
  margin-block-end: 0;
}

/* Footer menu column, matching .foot-col. Astra emits this list as
   #astra-footer-menu with .ast-flex, which lays the items out in a
   row; the design wants the stacked column. */
#astra-footer-menu {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}
#astra-footer-menu > .menu-item {
  width: 100%;
  margin: 0;
}
#astra-footer-menu > .menu-item > .menu-link {
  display: inline-block;
  padding-block: 0.4375rem;
  padding-inline: 0;
  font-size: var(--text-ui);
  line-height: 1.55;
  color: var(--fg);
  background: none;
}
#astra-footer-menu > .menu-item > .menu-link:hover {
  color: var(--fg);
  background: none;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

/* The definition values in the two location columns pick up the
   browser's default dd indent once Astra's stylesheet re-asserts it,
   so restate the design's flush-left alignment. */
.site-footer .foot-place dd,
.site-footer .foot-place dl,
.site-footer .foot-hours dd {
  margin-inline-start: 0;
}

/* Bottom bar = .foot-bottom */
.site-below-footer-wrap {
  background: var(--surface);
  padding-block: 0 2.5rem;
  padding-block-end: max(2.5rem, env(safe-area-inset-bottom));
}
/* No border here: .site-below-footer-wrap already carries one, and
   the two stacked read as a double rule. */
.site-below-footer-wrap .ast-builder-grid-row {
  padding-block-start: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--text-caption);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.site-below-footer-wrap .ast-builder-grid-row .ast-builder-layout-element {
  width: 100%;
}
.site-below-footer-wrap .ast-footer-copyright > p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  margin: 0;
}

/* ============================================================
   ELEMENTOR CONTAINER BRIDGE (landing page)
   The landing page is built from Elementor containers that carry
   the design's own class names. Elementor gives every container
   display:flex and a 20px gap, and every widget a bottom margin;
   all three would fight the layout rules above. Reset them at
   .e-con specificity so the design's own rules win without
   !important, then restate the few layouts that are not block.
   ============================================================ */
.e-con.hero,
.e-con.section,
.e-con.wrap,
.e-con.invert,
.e-con.section-head {
  display: block;
  gap: 0;
}
.e-con.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  /* `.hero-grid{align-items:center}` is dead on the landing page: Elementor's
     `.elementor-element:where(.e-con-full,.elementor-widget){align-items:var(--align-items)}`
     is also (0,1,0) — `:where()` adds nothing — and loads later, so it resolves
     to `initial` (stretch) and the art gets top-aligned in a full-height row. */
  align-items: center;
}
.e-con.e-flex.hero-actions,
.e-con.e-flex.final-actions {
  display: flex;
  /* Elementor's own `.e-con.e-flex` sets --flex-direction:column at the
     same (0,2,0) specificity and frontend.min.css loads after the child
     sheet, so it won both the longhand and the custom property. Matching
     .e-flex as well takes this to (0,3,0), which wins on specificity
     rather than on load order. */
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.e-con.e-flex.final-actions { justify-content: center; }

/* Elementor's inter-widget rhythm; the design supplies its own. */
.e-con .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* A heading widget set to the `p` tag renders .elementor-heading-title,
   which .section-head p would otherwise restyle as the section lead.
   Let the .eyebrow wrapper's inherited values through instead. */
.section-head .eyebrow .elementor-heading-title {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  margin: 0;
  max-width: none;
}

/* ---------- buttons as Elementor widgets ----------
   The wrapper class lands on .elementor-element, so the token styles
   are re-pointed at the <a> Elementor actually renders. Label and
   link stay editable in the builder. */
.ifix-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6875rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  transition-property: background-color, border-color, color, box-shadow, scale;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.ifix-btn--primary .elementor-button {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-1);
}
.ifix-btn--primary .elementor-button:hover {
  background: oklch(0.723 0.202 149);
  background: oklch(from var(--brand) calc(l - 0.05) c h);
  box-shadow: var(--shadow-2);
  color: var(--on-brand);
}
.ifix-btn--quiet .elementor-button {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--line-strong);
}
.ifix-btn--quiet .elementor-button:hover {
  background: var(--surface-2);
  border-color: var(--fg-muted);
  color: var(--fg);
}
.final-actions .elementor-button { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .ifix-btn .elementor-button:active { scale: 0.96; }
}

/* The hero image is an image widget so it stays swappable from the
   Media Library; the design's figure rules reach the <img> inside. */
.hero-figure .elementor-widget-container { line-height: 0; }

/* ---------- reclaim typography from Elementor's kit and Astra ----------
   Elementor's generated page CSS styles .elementor-widget-heading
   .elementor-heading-title at (0,2,0) with the default kit's Roboto and
   #6EC1E4, and Astra adds .elementor-widget-heading h1.elementor-heading
   -title (0,2,1) for line-height. Both outrank the design's own `h1` and
   `.hero h1` rules and both load after the child stylesheet, so the design
   values are restated here one notch higher. The kit's default colour and
   font schemes are also switched off at source, so this is a belt-and
   -braces layer rather than the only defence. */
.e-con .elementor-widget-heading .elementor-heading-title {
  font-family: inherit;
  color: var(--fg);
}
.e-con .elementor-widget-heading h1.elementor-heading-title,
.e-con .elementor-widget-heading h2.elementor-heading-title,
.e-con .elementor-widget-heading h3.elementor-heading-title {
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 680;
  text-wrap: balance;
}
.e-con.hero .elementor-widget-heading h1.elementor-heading-title {
  font-size: var(--text-h1);
  max-width: 16ch;
}
.e-con.hero .elementor-widget-heading h1.elementor-heading-title em {
  font-style: normal;
  color: var(--brand-ink);
}
.e-con .section-head .elementor-widget-heading h2.elementor-heading-title,
.e-con.invert .elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--text-h2);
}

/* The eyebrow is a heading widget rendered with the `p` tag, so it needs
   its own restatement rather than inheriting through the wrapper. */
.e-con .section-head .eyebrow p.elementor-heading-title {
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-ink);
  line-height: 1.55;
  max-width: none;
}

/* Text editors: Elementor sets colour on the same element that carries our
   own class, so the tie goes to Elementor on load order. State each case. */
.e-con .elementor-widget-text-editor {
  font-family: inherit;
  color: var(--fg);
}
.e-con .hero-lead.elementor-widget-text-editor,
.e-con .section-head .elementor-widget-text-editor,
.e-con.invert .elementor-widget-text-editor {
  color: var(--fg-muted);
  font-size: var(--text-lead);
}

/* Buttons: Elementor paints background-color from the kit accent. */
.e-con .ifix-btn .elementor-button { font-family: inherit; }
.e-con .ifix-btn--primary .elementor-button {
  background-color: var(--brand);
  color: var(--on-brand);
}
.e-con .ifix-btn--primary .elementor-button:hover {
  background-color: oklch(0.723 0.202 149);
  background-color: oklch(from var(--brand) calc(l - 0.05) c h);
}
.e-con .ifix-btn--quiet .elementor-button {
  background-color: var(--bg);
  color: var(--fg);
  border-color: var(--line-strong);
}
.e-con .ifix-btn--quiet .elementor-button:hover {
  background-color: var(--surface-2);
  border-color: var(--fg-muted);
}

/* ============================================================
   REPORTED-ISSUE FIXES
   Six defects, three root causes.

   (a) Elementor declares padding, margin and max-width on `.e-con`
       at (0,1,0) and loads after this stylesheet, so every earlier
       `.e-con { ... }` reset tied and lost. That is why the page
       hugged the left edge (`.wrap`'s margin-inline:auto never
       applied) and why stray 10px padding appeared everywhere.
       Everything below is keyed on `.e-con.<design-class>` (0,2,0).

   (b) Astra drives menu, link and footer colours from its own
       --ast-global-color-* palette, whose defaults are blue.
       Those variables are re-pointed at the design tokens once,
       on `:root:root` (0,2,0) so they outrank Astra's own `:root`.

   (c) Astra underlines links inside .entry-content, which caught
       the buttons and the category rows. Underlines are switched
       off and then restored only where the design asks for them.
   ============================================================ */

/* ---------- (a) containers: padding, margin, centring ---------- */
.e-con.hero,
.e-con.section,
.e-con.invert,
.e-con.wrap,
.e-con.section-head,
.e-con.hero-grid,
.e-con.e-flex.hero-actions,
.e-con.e-flex.final-actions {
  padding: 0;
  margin-block: 0;
}

/* The single container rule that centres the whole page. */
.e-con.wrap {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section rhythm, restated above Elementor's padding variables. */
.e-con.section { padding-block: var(--section-y); }
.e-con.section.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.e-con.hero { padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2rem, 4.5vw, 3.25rem); }
.e-con.invert { padding-block: var(--section-y); }
.e-con.wrap.section.final { padding-block: 0; }

/* ---------- header: no bar padding, aligned to the page grid ---------- */
#masthead .ast-primary-header-bar {
  padding-block: 0;
}
/* Match .wrap exactly so the wordmark lines up with the H1 below it. */
#masthead .ast-primary-header-bar .ast-container {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Vertical centring for every header element, which is what left the
   wordmark, the location pins and the CTA on three different baselines. */
#masthead .ast-builder-grid-row,
#masthead .site-header-primary-section-left,
#masthead .site-header-primary-section-right,
#masthead .ast-builder-layout-element {
  align-items: center;
}
/* Astra pads each builder element; the design spaces them itself. */
#masthead .ast-header-html-1,
#masthead .ast-header-html-2,
#masthead .ast-header-button-1 {
  padding-inline: 0;
}

/* ---------- logo + location pins ---------- */
.ast-header-html-1 .wordmark {
  font-size: 1.75rem;
  line-height: 1;
  align-items: center;
}
.ast-header-html-1 .ast-builder-html-element,
.ast-header-html-2 .ast-builder-html-element {
  display: flex;
  align-items: center;
  line-height: 1;
}
.ast-header-html-1 .ast-builder-html-element > p { margin: 0; }
/* Restore the design's divider between the wordmark and the pin pair. */
.ast-header-html-2 .nav-places {
  margin-inline-start: 0.875rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 1px solid var(--line);
}

/* ---------- (b) re-point Astra's palette at the design tokens ---------- */
:root:root {
  --ast-global-color-0: #007A28;   /* accent-ink: links */
  --ast-global-color-1: #181B20;   /* ink: hover / active */
  --ast-global-color-2: #181B20;   /* headings */
  --ast-global-color-3: #656970;   /* body / muted */
  --ast-global-color-4: #FFFFFF;   /* page ground */
  --ast-global-color-5: #F6F7F9;   /* surface */
  --ast-global-color-6: #EFF0F3;   /* surface-2 */
  /* Astra uses slot 7 as its "subtle background" (hairlines, dividers),
     not as ink. Mapping it to the ink token turned the header hairline
     near-black. It belongs on the line token. */
  --ast-global-color-7: #DADCE0;   /* line */
  --ast-global-color-8: #EFF0F3;   /* surface-2 */
}
/* Astra's own inline block sets these at (0,2,0); match it and add the
   design's intent so hover reads as ink-on-surface, never blue. */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
#astra-footer-menu > .menu-item > .menu-link {
  color: var(--fg-muted);
}
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link {
  color: var(--fg);
  background: var(--surface-2);
}
#astra-footer-menu > .menu-item > .menu-link,
.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap .ast-footer-copyright span {
  color: var(--fg-muted);
}
.site-footer .foot-place a,
.site-footer .foot-mail a,
.site-footer .foot-about a { color: var(--fg); }

/* ---------- (c) underlines only where the design asks ---------- */
.entry-content a,
.e-con a,
.site-footer a {
  text-decoration: none;
}
/* Addresses and phone numbers stay underlined: they are the one place
   the design uses an underline to mark a real destination. */
.e-con .place-row a,
.e-con .place-row dd a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}
.e-con .place-row a:hover { text-decoration-color: currentColor; }
.site-footer .foot-place a:hover,
.site-footer .foot-mail a:hover,
#astra-footer-menu > .menu-item > .menu-link:hover {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

/* The design zeroes margins with `* { margin: 0 }` (0,0,0), which Astra's
   element-level `ul { margin-bottom: 1.5em }` (0,0,1) outranks. Inside the
   header and footer HTML elements that trailing 18px made each list taller
   than its content, so centring the flex item left the visible list sitting
   9px above the wordmark's baseline. */
.ast-header-html-1 ul,
.ast-header-html-2 ul,
.ast-header-html-1 ol,
.ast-header-html-2 ol,
.site-footer .foot-place dl,
.site-footer .foot-col ul,
.site-footer .foot-about p:last-child {
  margin-block: 0;
}

/* The header rule above no longer declares a bottom border, but Astra
   draws its own via inline `.ast-primary-header-bar { border-bottom-width:
   1px }`. Removing our declaration only exposed Astra's, so the border is
   switched off explicitly. #masthead (1,1,0) clears Astra's (0,1,0). */
#masthead .ast-primary-header-bar,
#masthead .main-header-bar {
  border-block-end: 0;
}

/* ============================================================
   PRICE CHECKER  (Hinnakiri page, shortcode [ifix_price_checker])
   Markup rendered by wp-content/novamira-sandbox/ifix-price-checker.php
   ============================================================ */
/* .card doubles the class so this outranks Astra's
   .entry-content[data-ast-blocks-layout] > * width rule. */
.ifix-pc.card{
  max-width:40rem;
  margin-inline:auto;
  padding:clamp(1.25rem, 1rem + 2vw, 2rem);
  gap:1.25rem;
}
/* .btn sets display:inline-flex, which would otherwise beat the
   UA [hidden] rule and keep the CTA visible before a model is chosen. */
.ifix-pc__cta[hidden]{display:none}
.ifix-pc__pickers{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:34rem){
  .ifix-pc__pickers{grid-template-columns:1fr 1fr}
}
.ifix-pc__field{display:flex;flex-direction:column;gap:0.375rem;min-width:0}
.ifix-pc__label{
  font-size:var(--text-micro);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.ifix-pc__select{
  width:100%;
  min-height:2.75rem;                       /* 44px touch target */
  padding:0.5rem 2.75rem 0.5rem 0.875rem;
  font:inherit;font-size:var(--text-body);color:var(--fg);
  background-color:var(--surface);
  border:1px solid var(--line-strong);      /* structure, not elevation */
  border-radius:var(--r-sm);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23656970' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.875rem center;
  background-size:1rem;
  cursor:pointer;
}
.ifix-pc__select:hover:not(:disabled){border-color:var(--fg-muted)}
.ifix-pc__select:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ifix-pc__select:disabled{
  color:var(--fg-muted);
  background-color:var(--surface-2);
  cursor:not-allowed;
}
.ifix-pc__hint{margin:0;color:var(--fg-muted)}
.ifix-pc__list{list-style:none;margin:0;padding:0}
.ifix-pc__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:0.6875rem 0.125rem;
  border-top:1px solid var(--line);         /* structural separator */
}
.ifix-pc__list li:first-child{border-top:0}
.ifix-pc__service{min-width:0}
.ifix-pc__price{
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ifix-pc__cta{width:100%}
.ifix-pc__note{
  margin:0;
  text-align:center;
  font-size:var(--text-caption);
  color:var(--fg-muted);
}

/* ============================================================
   LANDING PAGE CORRECTIONS
   Four defects, grouped by cause rather than by section.
   ============================================================ */

/* ---- (1) UA list and description-list indents -----------------
   Astra leaves the browser's own indent on <ul>, <ol> and <dd>.
   The landing markup uses those elements as plain layout
   containers, so the indent pushed their contents right of the
   column edge: the hero badges, the process cards, the brand
   list, and every address value in a location card. The footer's
   own <dl> was already reset; this is the rest of them. */
.e-con .hero-badges,
.e-con .steps,
.e-con .brand-list{
  padding-inline-start:0;
  margin-inline-start:0;
}
.place-row dd{
  margin-inline-start:0;          /* term and value share one left edge */
}

/* The opening-hours grids set their own 1-2px row gap. The UA's
   bottom margin on <dd> was adding 14px on top of it, so the day
   rows drifted apart and the hours block outgrew the address and
   phone blocks beside it. */
.site-footer .foot-hours dd,
.hours dd{
  margin-block:0;
}

/* ---- (2) section heads --------------------------------------
   The Elementor bridge zeroes margin-block on .e-con.section-head
   to strip Elementor's own spacing. That also removed the design's
   gap below the head, leaving eyebrow, heading and lead touching
   each other and the content beneath. Restate all three. */
.e-con.section-head{
  margin-block-end:clamp(2.5rem, 5vw, 3.5rem);
}
/* Elementor ships `.e-con .elementor-widget.elementor-widget{margin-block-end:0}`,
   a doubled class at (0,3,0) loaded after this sheet. The extra class here
   clears it on specificity rather than with !important. */
.e-con .section-head > .eyebrow.elementor-widget{
  margin-block-end:0.875rem;
}
.e-con .section-head > .elementor-widget-text-editor{
  margin-block-start:1.25rem;
}

/* ---- (3) services: space instead of rules -------------------
   The 2px hairline over each service read as a table border. The
   column gap carries the separation on its own. */
.e-con.section:has(.services){
  padding-block:clamp(4rem, 8vw, 6rem);
}
.e-con .services{
  gap:clamp(2rem, 4vw, 3rem);
}
.e-con .service{
  border-block-start:0;
  padding-block-start:0;
}

/* ---- (4) footer --------------------------------------------- */

/* .foot-about p (0,1,1) outranked .wordmark (0,1,0) and flattened
   the footer wordmark to the 14px body size. */
.site-footer .foot-about .wordmark{
  font-size:1.75rem;
  line-height:1.1;
  color:var(--fg);
  margin-block:0 1rem;
}

/* One rhythm between address, phone and hours. The tap padding on
   the link is cancelled by an equal negative margin, so the target
   stays 24px+ while the spacing comes from the list gap alone. */
/* Child combinator throughout: .foot-hours is a second <dl> nested
   inside the hours <dd>, and a descendant selector would space its
   day rows apart by the same 20px. */
.site-footer .foot-place > dl{
  gap:1.25rem;
}
.site-footer .foot-place > dl > div > dd{
  margin-block-end:0;
}
.site-footer .foot-place > dl > div > dd > a{
  margin-block:-0.4375rem;
}

/* ---- (5) centred section heads -------------------------------
   Every section head is centred in the column, lead paragraph
   included. The hero is deliberately excluded: it keeps its
   left-aligned split layout. */
.e-con .section-head{
  margin-inline:auto;
  text-align:center;
}
.e-con .section-head p{
  margin-inline:auto;      /* the lead is width-capped, so it needs centring too */
}

/* ---- (6) services call to action ---------------------------- */
.e-con .services-actions{
  display:flex;flex-wrap:wrap;
  gap:0.75rem;
  justify-content:center;
  margin-block-start:clamp(2rem, 4vw, 3rem);
}

/* ============================================================
   ONE CONTENT COLUMN
   Header, landing sections, page content and both footer rows
   now resolve to the same column: min(75rem, 100% - 2*gutter),
   centred. Previously the header and .wrap capped the *box* at
   75rem and then padded inward, so their content ran 32px
   narrower per side than an ordinary page's, and the header
   wordmark sat 32px right of the footer wordmark. Capping the
   box at column + gutters lines all four up, and gives the
   footer rows the side gutter they had none of on small screens.
   ============================================================ */
#masthead .ast-primary-header-bar .ast-container,
#content .ast-container,
.site-primary-footer-wrap .ast-builder-grid-row,
.site-below-footer-wrap .ast-builder-grid-row{
  max-width:calc(75rem + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* .wrap sits inside #content's container, which now carries the
   gutter, so it only needs the cap. Padding here would double it. */
.e-con.wrap{
  max-width:75rem;
  padding-inline:0;
}

/* ---- location cards: tighter --------------------------------
   The address <dl> carried the UA's 24px top and 28px bottom
   block margins on top of the heading's own 20px, leaving about
   50px of dead space above the rows. One rhythm instead. */
.place-body{
  padding:clamp(1.125rem, 2.5vw, 1.5rem);
}
.place-body h3{
  margin-block-end:1rem;
}
.place-rows{
  margin-block:0;
}
.place-actions{
  margin-block-start:1.5rem;
}

/* Astra caps both footer rows from its own inline CSS with an
   attribute selector at (0,3,0), which outranked the shared column
   rule above and left the footer content 32px inside the header's.
   Match it from inside .site-footer to win on weight, not order. */
.site-footer .site-primary-footer-wrap[data-section] .ast-builder-grid-row,
.site-footer .site-below-footer-wrap[data-section] .ast-builder-grid-row{
  max-width:calc(75rem + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Each below-footer section is a flex item that shrank to its own
   content, so the copyright row had no free space and space-between
   could not push the privacy link to the opposite edge. */
.site-below-footer-wrap .site-footer-section{
  flex:1 1 100%;
}

/* ============================================================
   FULL-BLEED SECTIONS ON BUILDER PAGES
   The hero and the closing CTA are edge-to-edge bands in the
   source design, but Astra's content container capped them at
   the column width, so both rendered as boxes with white margins.
   On builder pages the container stops constraining and the
   column moves onto .wrap, which is where the source design put
   it. Ordinary pages keep the capped container. No 100vw here:
   viewport units include the scrollbar and would introduce a
   horizontal scroll.
   ============================================================ */
.elementor-page #content .ast-container{
  max-width:none;
  padding-inline:0;
}
.elementor-page .e-con.wrap{
  max-width:calc(75rem + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---- brand logo wall ----------------------------------------
   Logos vary from 5:1 to 1:1, so each cell centres its image
   against a shared max height rather than a shared width.
   Grayscale keeps fourteen competing brand palettes from
   fighting the one accent colour on the page. */
.e-con .brand-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.25rem, 3vw, 2.25rem);
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
@media (min-width: 34rem){ .e-con .brand-grid{grid-template-columns:repeat(4, 1fr)} }
@media (min-width: 48rem){ .e-con .brand-grid{grid-template-columns:repeat(5, 1fr)} }
@media (min-width: 64rem){ .e-con .brand-grid{grid-template-columns:repeat(7, 1fr)} }

.e-con .brand-grid li{
  display:grid;
  place-items:center;
  min-width:0;
}
/* Each image carries its own width inline, derived from the artwork's
   ink area, so height follows from the aspect ratio. A shared
   max-height here would undo that normalisation. */
.e-con .brand-grid img{
  display:block;
  height:auto;
  max-width:100%;
  filter:grayscale(1);
  opacity:0.6;
}

/* ============================================================
   INNER PAGES
   Everything that is not the builder-built landing: Astra prints
   the page title above the content, and each page opens with a
   lead paragraph. Both are centred so they read as one block.
   ============================================================ */
.entry-header .entry-title{
  text-align:center;
  font-size:clamp(2.125rem, 1.5rem + 2.4vw, 3rem);
  line-height:1.12;
  letter-spacing:-0.025em;
  text-wrap:balance;
  max-width:44rem;
  margin-inline:auto;
  margin-block-end:0;
}
.entry-header{
  margin-block:clamp(2.5rem, 5vw, 4rem) 0;
}
/* Class doubled: Astra caps every direct child of .entry-content with
   `[data-ast-blocks-layout] > *` at (0,2,0), which would otherwise
   stretch the lead to the full content width. */
.entry-content .page-lead.page-lead{
  text-align:center;
  text-wrap:pretty;
  font-size:1.1875rem;   /* a notch under --text-lead; the token is shared with the landing page */
  color:var(--fg-muted);
  max-width:var(--measure);
  margin-inline:auto;
  margin-block:1.25rem clamp(2.5rem, 5vw, 3.5rem);
}
/* A centred heading that introduces a group further down the page. */
.page-section-head{
  text-align:center;
  margin-block:clamp(2.5rem, 5vw, 3.5rem) clamp(1.75rem, 3.5vw, 2.5rem);
}
.page-section-head h2{
  font-size:var(--text-h2);
  max-width:44rem;
  margin-inline:auto;
}

/* ---- services grid ------------------------------------------
   Nine cards, so a grid rather than alternating full-width rows:
   at this count a zigzag reads as filler. Each card opens with a
   placeholder panel sized to the final image's 16:10 box, so
   dropping real photos in later will not reflow the page. */
/* Scoped to .entry-content so it clears Astra's own list indent,
   which is set at (0,1,1) and would push the cards off the column. */
.entry-content .svc-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.5rem, 3vw, 2rem);
  list-style:none;
  margin:0;
  padding:0;
}
@media (min-width: 34rem){ .entry-content .svc-grid{grid-template-columns:repeat(2, 1fr)} }
@media (min-width: 64rem){ .entry-content .svc-grid{grid-template-columns:repeat(3, 1fr)} }
.entry-content .svc-grid > *{min-width:0}

.svc-card{
  display:flex;flex-direction:column;
  background:var(--bg);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
/* The icon is drawn from CSS rather than markup: SVG in post_content
   is stripped by kses for anyone without unfiltered_html, so a
   placeholder built that way would silently vanish on the next edit. */
.svc-media{
  aspect-ratio:16 / 10;
  background-color:var(--surface-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656970' stroke-width='1.5'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.75'/%3E%3Cpath d='M21 16l-5-5-6.5 6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:2rem;
}
.svc-body{padding:clamp(1.25rem, 3vw, 1.5rem)}
.svc-body h3{font-size:var(--text-h3);text-wrap:balance}
.svc-body p{
  font-size:var(--text-ui);
  color:var(--fg-muted);
  margin-block-start:0.5rem;
}

/* ---- locations page -----------------------------------------
   Reuses the landing's location cards; only the page-level
   rhythm differs. */
.page-places{margin-block-end:clamp(2.5rem, 5vw, 3.5rem)}

/* ============================================================
   CONTACT FORM  (shortcode [ifix_contact_form])
   Markup from wp-content/novamira-sandbox/ifix-contact-form.php
   ============================================================ */
/* .card doubles the class so this outranks Astra's
   .entry-content[data-ast-blocks-layout] > * width rule. */
.ifix-cf.card{
  max-width:44rem;
  margin-inline:auto;
  padding:clamp(1.25rem, 1rem + 2vw, 2rem);
  gap:1.25rem;
}
.ifix-cf__form{display:flex;flex-direction:column;gap:1.25rem}

/* Off-screen rather than display:none: some bots skip hidden inputs. */
.ifix-cf__hp{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;
}

.ifix-cf__places{border:0;padding:0;margin:0;min-width:0}
.ifix-cf__places legend{
  padding:0;
  font-size:var(--text-micro);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-muted);
  margin-block-end:0.625rem;
}
.ifix-cf__choices{display:flex;flex-wrap:wrap;gap:0.75rem}
.ifix-cf__choice{
  display:inline-flex;align-items:center;gap:0.5rem;
  min-height:2.75rem;                       /* 44px target */
  padding:0.5rem 1rem;
  border:1px solid var(--line-strong);      /* structure, not elevation */
  border-radius:var(--r-pill);
  font-size:var(--text-ui);font-weight:500;
  cursor:pointer;
  transition-property:background-color,border-color;
  transition-duration:150ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1);
}
.ifix-cf__choice:hover{background:var(--surface)}
.ifix-cf__choice:has(input:checked){
  background:var(--brand-wash);
  border-color:var(--brand-ink);
}
.ifix-cf__choice:has(input:focus-visible){
  outline:2px solid var(--focus);
  outline-offset:3px;
}
.ifix-cf__choice input{accent-color:var(--brand-ink);margin:0}

.ifix-cf__grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width: 34rem){
  .ifix-cf__grid{grid-template-columns:1fr 1fr}
}
.ifix-cf__field{display:flex;flex-direction:column;gap:0.375rem;min-width:0}
.ifix-cf__field label{
  font-size:var(--text-micro);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.ifix-cf__req{color:var(--brand-ink)}
.ifix-cf__field input,
.ifix-cf__field textarea{
  width:100%;
  min-height:2.75rem;
  padding:0.625rem 0.875rem;
  font:inherit;font-size:var(--text-body);color:var(--fg);
  background-color:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
}
.ifix-cf__field textarea{resize:vertical;line-height:1.55}
.ifix-cf__field input:hover,
.ifix-cf__field textarea:hover{border-color:var(--fg-muted)}
.ifix-cf__field input:focus-visible,
.ifix-cf__field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ifix-cf__field input::placeholder,
.ifix-cf__field textarea::placeholder{color:var(--fg-muted)}

.ifix-cf__submit{align-self:flex-start}

.ifix-cf__note.ifix-cf__note{   /* doubled for the same reason as .ifix-nl__lead */
  margin:0;
  font-size:var(--text-caption);
  color:var(--fg-muted);
}
.ifix-cf__ok,
.ifix-cf__err{
  margin:0;
  padding:0.875rem 1rem;
  border-radius:var(--r-md);
  font-size:var(--text-ui);
}
.ifix-cf__ok{background:var(--brand-wash);color:var(--fg)}
.ifix-cf__err{background:var(--surface-2);color:var(--fg)}

/* ============================================================
   ROUND OF POLISH
   ============================================================ */

/* ---- header nav: breathing room between items --------------- */
#primary-site-navigation-desktop .main-header-menu{
  column-gap:0.75rem;
}

/* ---- category link rows: same rhythm in every card ---------- */
.cat-links{gap:0.5rem}

/* ---- button hover ------------------------------------------
   Astra's `a:hover, a:focus{color:var(--ast-global-color-1)}` was
   repainting button text dark on hover, which on the ink-filled
   button meant dark on dark. Each variant now states its own hover
   colour, so nothing is left for Astra's rule to claim. */
.btn--solid:hover,
.btn--solid:focus-visible{
  background:var(--brand);
  color:var(--on-brand);
}
.btn--primary:hover,
.btn--primary:focus-visible{
  color:var(--on-brand);
}
.btn--quiet:hover,
.btn--quiet:focus-visible{
  color:var(--fg);
}

/* ---- mobile menu -------------------------------------------
   Astra's dropdown panel is a 180px sliver of 23px rows. It now
   fills the screen below the header, with each item a real target. */
@media (max-width: 55.999rem){
  .ast-mobile-header-content{
    min-height:calc(100dvh - 5rem);
    max-height:calc(100dvh - 5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:1.25rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
    background:var(--bg);
    box-shadow:var(--shadow-3);
  }
  .ast-mobile-header-content .main-header-menu{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    padding:0;
    background:none;
    border-radius:0;
  }
  .ast-mobile-header-content .main-header-menu > .menu-item{width:100%}
  /* Six classes deliberately: Astra sets display and padding from
     `.ast-header-break-point .main-navigation ul .menu-item .menu-link`
     (0,4,1) and the colour from a (0,5,0) inline rule. Anything lighter
     leaves the link inline-block, unpadded and grey. */
  .ast-header-break-point .ast-mobile-header-content .main-navigation .main-header-menu > .menu-item > .menu-link{
    display:flex;
    align-items:center;
    width:100%;
    min-height:3.5rem;                 /* fat target, well past the 44px floor */
    padding:0.875rem 1.25rem;
    border-radius:var(--r-md);
    background:var(--surface);
    font-size:var(--text-lead);
    font-weight:600;
    line-height:1.3;
    color:var(--fg);
  }
  .ast-header-break-point .ast-mobile-header-content .main-navigation .main-header-menu > .menu-item > .menu-link:hover,
  .ast-header-break-point .ast-mobile-header-content .main-navigation .main-header-menu > .menu-item.current-menu-item > .menu-link{
    background:var(--brand-wash);
    color:var(--fg);
  }
  /* The trigger is a 33px glyph; give it the same 44px target as
     everything else in the header. */
  .menu-toggle.main-header-menu-toggle{
    min-width:2.75rem;
    justify-content:center;
  }
}


/* --- Small screens read larger, not smaller (owner request 2026-08) --- */
@media (max-width: 48rem){
  :root{
    --text-caption: 0.9375rem;
    --text-ui: 1rem;
    --text-body: 1.125rem;
  }
}


/* ============================================================
   PRICE CHECKER v2 - search on top, brand tiles, model columns
   ============================================================ */

.ifix-pc__search{display:flex;flex-direction:column;gap:0.375rem}
.ifix-pc__searchbox{position:relative}
.ifix-pc__searchbox svg{
  position:absolute;inset-inline-start:0.875rem;inset-block-start:50%;
  translate:0 -50%;
  width:1.25rem;height:1.25rem;color:var(--fg-muted);stroke-width:1.75;
  pointer-events:none;
}
.ifix-pc__searchbox input{
  width:100%;min-height:3rem;
  padding:0.625rem 1rem 0.625rem 2.75rem;
  font:inherit;font-size:var(--text-body);color:var(--fg);
  background:var(--surface);
  border:1px solid var(--line-strong);      /* structure, not elevation */
  border-radius:var(--r-sm);
}
.ifix-pc__searchbox input:hover{border-color:var(--fg-muted)}
.ifix-pc__searchbox input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ifix-pc__searchbox input::placeholder{color:var(--fg-muted)}

.ifix-pc__panel{transition:opacity 0.15s ease}
.ifix-pc__panel.is-fading{opacity:0}
.ifix-pc__panel[hidden]{display:none}

.ifix-pc__panel-title{font-size:var(--text-h3);margin:0 0 1rem}
.ifix-pc__panel-title:focus{outline:none}
.ifix-pc__panel-title:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ifix-pc__panel-head{display:flex;align-items:center;gap:0.875rem;margin-block-end:1rem}
.ifix-pc__panel-head .ifix-pc__panel-title{margin:0}

.ifix-pc__back{
  display:inline-flex;align-items:center;gap:0.375rem;
  min-height:2.25rem;padding:0.25rem 0.875rem 0.25rem 0.625rem;
  font:inherit;font-size:var(--text-ui);font-weight:600;color:var(--fg-muted);
  background:var(--surface);border:0;border-radius:var(--r-pill);
  cursor:pointer;
}
.ifix-pc__back:hover{color:var(--fg);background:var(--surface-2)}
.ifix-pc__back:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ifix-pc__back svg{width:1rem;height:1rem;stroke-width:2}

/* The tiles are grouped by device family, so this is the stack of groups
   and .ifix-pc__brand-grid is the grid inside each one. */
.ifix-pc__brands{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.ifix-pc__brand-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));
  gap:0.75rem;
}
.ifix-pc__brand{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;
  min-height:5.5rem;padding:1rem 0.75rem;
  font:inherit;color:var(--fg);
  background:var(--surface);border:0;border-radius:var(--r-md);
  cursor:pointer;
  transition:box-shadow 0.15s ease, translate 0.15s ease, background-color 0.15s ease;
}
.ifix-pc__brand:hover{background:var(--bg);box-shadow:var(--shadow-2);translate:0 -2px}
.ifix-pc__brand:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ifix-pc__brand-mark{font-size:var(--text-lead);font-weight:680;letter-spacing:-0.02em}
.ifix-pc__brand-count{font-size:var(--text-caption);color:var(--fg-muted)}

.ifix-pc__models{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  gap:0.25rem 0.75rem;
}
.ifix-pc__models li{margin:0}
.ifix-pc__model{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0.0625rem;
  width:100%;min-height:2.75rem;padding:0.5rem 0.75rem;
  font:inherit;font-size:var(--text-ui);font-weight:500;color:var(--fg);text-align:start;
  background:none;border:0;border-radius:var(--r-sm);
  cursor:pointer;
}
.ifix-pc__model:hover{background:var(--surface)}
.ifix-pc__model:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ifix-pc__model-brand{font-size:var(--text-caption);color:var(--fg-muted);font-weight:400}

.ifix-pc__cta{margin-block-start:1.25rem}

@media (prefers-reduced-motion: reduce){
  .ifix-pc__panel,
  .ifix-pc__brand{transition:none}
  .ifix-pc__brand:hover{translate:none}
}

/* ============================================================
   SUBPAGE HERO - full-bleed green wash band under the header.
   Text left, device visual right; the Hinnakiri variant swaps
   the visual for the price checker and owns the first viewport.
   Doubled class beats the entry-content child width cap.
   ============================================================ */
.page-hero.page-hero{
  max-width:none;
  width:100vw;
  margin:0 calc(50% - 50vw) var(--section-y);
  background:var(--brand-wash);
}
.page-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
  padding-block:clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero h1{
  font-size:clamp(2.125rem, 1.5rem + 2.4vw, 3rem);
  line-height:1.12;
  letter-spacing:-0.025em;
  text-wrap:balance;
  margin:0;
}
/* On the wash the muted grey loses contrast; the lead reads in full ink
   and left-aligned, unlike the centered lead on plain pages. */
.page-hero .page-lead.page-lead{
  text-align:start;
  color:var(--fg);
  max-width:var(--measure);
  margin:1rem 0 0;
}
.page-hero__media{display:flex;justify-content:center}
.page-hero__media svg{
  width:min(100%, 17rem);
  height:auto;
  color:var(--brand-ink);
}

/* --- Hinnakiri: split hero that fills the viewport ----------- */
.page-hero--checker{margin-block-end:0}
.page-hero--checker .page-hero__grid{
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  align-items:start;
  min-height:calc(100svh - 5rem);
  align-content:center;
}
.page-hero--checker .page-hero__text{
  position:sticky;
  top:7rem;
}
.page-hero__checker-title{
  font-size:var(--text-h2);
  line-height:1.12;
  letter-spacing:-0.025em;
  text-wrap:balance;
  margin:0 0 1.5rem;
}

@media (max-width: 56rem){
  .page-hero__grid,
  .page-hero--checker .page-hero__grid{
    grid-template-columns:1fr;
    gap:1.75rem;
    min-height:0;
    padding-block:clamp(2rem, 6vw, 3rem);
  }
  .page-hero--checker .page-hero__text{position:static}
  .page-hero__media svg{width:min(60%, 13rem)}
}
/* Pages that open with a hero disable the Astra title; the leftover
   empty .entry-header otherwise still spends its top margin. */
.entry-header:not(:has(*)){display:none}


/* ============================================================
   ROUND 2 (2026-08-07)
   ============================================================ */

/* ---- hero pages: the h1 lives in the hero ------------------
   Keyed on the hero itself rather than Astra's per-page meta,
   because saving the page in the editor can reset that meta and
   bring the duplicate title back. */
article:has(.page-hero) .entry-header{display:none}

/* ---- one content edge on inner pages -----------------------
   Three different left edges were in play: the hero's .wrap at
   72px, Astra's centered block cap at 40px, and .svc-grid at 0
   (its own `margin:0` cancelled Astra's auto centering). Every
   direct child of the content now takes the same geometry as
   .wrap, so one edge runs down the page. The hero opts out: it
   is full-bleed and carries its own .wrap inside. */
.entry-content > *:not(.page-hero){
  max-width:75rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---- consistent air before the footer on every subpage ----- */
.entry-content{padding-block-end:var(--section-y)}
.entry-content > :last-child{margin-block-end:0}
/* except when a full-height hero is the whole page: its wash
   should meet the footer with no white gap. */
.entry-content:has(> .page-hero--checker:last-child){padding-block-end:0}

/* ---- Teenused service photos ------------------------------- */
.svc-media:has(img){background-image:none}
.svc-media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  outline:1px solid var(--img-outline);outline-offset:-1px;
}

/* ---- price checker: hover text ------------------------------
   Astra styles every bare <button> and its `button:hover` (0,1,1)
   was repainting these tiles' label white on white. Each state
   now states its own colour at (0,2,0). */
.ifix-pc__brand:hover,
.ifix-pc__brand:focus-visible,
.ifix-pc__model:hover,
.ifix-pc__model:focus-visible,
.ifix-pc__back:hover,
.ifix-pc__back:focus-visible{
  color:var(--brand-ink);
}
.ifix-pc__brand:hover .ifix-pc__brand-count,
.ifix-pc__model:hover .ifix-pc__model-brand{color:var(--fg-muted)}

/* ---- price checker: brand tiles carry real logos ------------
   The logos are pre-trimmed to their ink box (see the module), so a
   single contain box renders every mark at a consistent optical size:
   wide wordmarks run to the width, square symbols to the height. */
.ifix-pc__brand{gap:0.125rem}
.ifix-pc__brand-logo-box{
  display:grid;place-items:center;
  width:100%;height:2.75rem;
  margin-block-end:0.25rem;
}
/* Absolute cap, not a percentage: as a stretched flex/grid child the
   box's own height is not a resolvable containing block here.
   Wordmarks are width-bound and cap at 1.5rem tall; a square mark that
   only ran 1.5rem would read far smaller than a wordmark beside it, so
   the tall-format logos get their own cap. */
.ifix-pc__brand-logo{
  max-width:100%;max-height:1.5rem;
  width:auto;height:auto;
  object-fit:contain;
}
.ifix-pc__brand-logo-box[data-logo="xiaomi"] .ifix-pc__brand-logo{
  max-height:2.75rem;
}

/* ---- Hinnakiri: heading sits over the widget, not beside ---- */
.page-hero__checker-title{
  font-size:var(--text-h3);
  text-align:center;
  text-wrap:balance;
  max-width:40rem;
  margin:0 auto 1rem;
}

/* ---- Kontakt: form rides in the hero, same split as Hinnakiri */
.page-hero--form .page-hero__grid{
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  align-items:start;
  align-content:center;
}
.page-hero--form .page-hero__text{position:sticky;top:7rem}
.page-hero--form .ifix-cf.card{margin-inline:auto}

@media (max-width: 56rem){
  .page-hero--form .page-hero__grid{grid-template-columns:1fr}
  .page-hero--form .page-hero__text{position:static}
}

/* ---- mobile menu: the CTA fills the empty panel space -------
   Astra now renders button-1 inside the mobile popup as well;
   the panel is a column so the button can sit at its foot. */
@media (max-width: 55.999rem){
  /* Astra wins the `display` cascade on this panel from its own stylesheet,
     so the column layout is forced. It is scoped to the open state via the
     toggle's .toggled class: the closed panel is hidden with display:none,
     and an unscoped !important here would pin it permanently open. */
  #masthead:has(.menu-toggle.toggled) .ast-mobile-header-content{
    display:flex!important;
    flex-direction:column;
  }
  .ast-mobile-header-content .ast-header-button-1{
    margin-block-start:auto;
    padding-block-start:1.5rem;
    width:100%;
  }
  /* Astra's button anchor is inline, so a width:100% on the inner
     .ast-custom-button would resolve against its shrink-to-fit width. */
  .ast-mobile-header-content .ast-builder-button-wrap,
  .ast-mobile-header-content .ast-custom-button-link{
    display:block;
    width:100%;
  }
  .ast-mobile-header-content .ast-header-button-1 .ast-custom-button{
    width:100%;
    min-height:3.25rem;
    font-size:var(--text-body);
  }
}

/* ============================================================
   ROUND 3 (2026-08-07)
   ============================================================ */

/* ---- price checker lists: kill the inherited list indent ----
   Astra ships `.entry-content ul, .entry-content ol{padding-left:20px}`
   at (0,1,1), which outranks the module's own `.ifix-pc__list{padding:0}`
   (0,1,0). The rows sat 20px right of the card's own content edge, so
   the price table never lined up with the search field above it.
   Doubled class = (0,2,0), and unscoped so it holds anywhere. */
.ifix-pc__list.ifix-pc__list,
.ifix-pc__models.ifix-pc__models{
  padding-inline-start:0;
}

/* ---- brand tiles: more room around the mark ----------------- */
.ifix-pc__brand{
  min-height:6.5rem;
  padding:1.25rem 1.125rem;
}

/* ---- share the selected device ------------------------------ */
.ifix-pc__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;
  margin-block-start:1.25rem;
}
.ifix-pc__actions .ifix-pc__cta{width:auto;flex:1 1 14rem;margin-block-start:0}
.ifix-pc__share{
  display:inline-flex;align-items:center;gap:0.5rem;
  min-height:2.75rem;padding:0.5rem 1.125rem;
  font:inherit;font-size:var(--text-ui);font-weight:600;
  color:var(--fg-muted);
  background:var(--surface);border:0;border-radius:var(--r-pill);
  cursor:pointer;
}
.ifix-pc__share:hover{color:var(--brand-ink);background:var(--surface-2)}
.ifix-pc__share:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ifix-pc__share svg{width:1.125rem;height:1.125rem;stroke-width:1.75;flex:none}
.ifix-pc__share.is-done{color:var(--brand-ink)}
.ifix-pc__share[hidden]{display:none}

/* ---- location cards: sentence-case labels -------------------
   The uppercase micro-label reads as imported UI chrome next to
   Estonian body copy. Same two-column grid, but the label is now
   quiet sentence case and the value carries the emphasis. */
.place-row > dt{
  align-items:baseline;
  font-size:var(--text-ui);
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  color:var(--fg-muted);
  padding-block-start:0;
}
.place-row > dt svg{
  width:1.125rem;height:1.125rem;
  align-self:center;
}
.place-row dd{font-weight:500}
.place-rows{row-gap:0.875rem}
/* The tel: link keeps its 44px touch target via padding, which pushed
   the phone number below its own label. Pull the box back up by the
   same amount so the text sits on the label's line. */
.place-row dd a[href^="tel:"]{
  margin-block-start:-0.25rem;
}

/* ============================================================
   ROUND 4 (2026-08-07)
   ============================================================ */

/* ---- footer: no shouting, and readable at arm's length -----
   Column order is set in astra-settings (about | links | Keila |
   Haapsalu); the track widths follow that order. */
.site-primary-footer-wrap .ast-builder-grid-row{
  grid-template-columns:1.3fr 0.9fr 1fr 1fr;
}
.foot-h{
  font-size:var(--text-body);
  font-weight:600;
  letter-spacing:normal;
  text-transform:none;
  color:var(--fg);
}
.foot-place > dl > div > dt{
  font-size:var(--text-ui);
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
}
.foot-place > dl,
.foot-col a,
.foot-mail,
.foot-about p,
.foot-hours dt{
  font-size:var(--text-body);
}
.site-below-footer-wrap .ast-builder-grid-row{
  font-size:var(--text-ui);
}

/* ---- mobile header: shorter bar, larger marks -------------- */
@media (max-width: 55.999rem){
  /* Astra sets the 80px from its header-height setting. */
  #masthead .site-primary-header-wrap{min-height:3.75rem}
  #masthead .ast-builder-grid-row{min-height:0}
  .ast-header-html-1 .wordmark{font-size:2rem}
  .menu-toggle.main-header-menu-toggle{
    min-height:3rem;min-width:3rem;
    padding:0.5rem;
  }
  /* Astra sizes this icon from
     [data-section="section-header-mobile-trigger"] .ast-button-wrap
     .mobile-menu-toggle-icon .ast-mobile-svg at (0,4,0). */
  #masthead .menu-toggle.main-header-menu-toggle .mobile-menu-toggle-icon .ast-mobile-svg{
    width:1.75rem;height:1.75rem;
  }
  /* panel height follows the shorter bar */
  .ast-mobile-header-content{
    min-height:calc(100dvh - 3.75rem);
    max-height:calc(100dvh - 3.75rem);
  }
}

/* ---- mobile hero: no illustration, tighter stack ----------- */
@media (max-width: 56rem){
  .hero-figure{display:none}
  .e-con.hero-grid{gap:1.25rem}
  .e-con .hero-lead{margin-block:0.75rem 1.5rem}
  .hero-badges{margin-block-start:1.5rem;gap:0.625rem 1.25rem}
}

/* ---- category and service copy sizes up -------------------- */
.cat-head p{font-size:var(--text-body)}
.cat-link{font-size:var(--text-body)}
.service h3{font-size:var(--text-h3)}
.service p{font-size:var(--text-body)}

/* ---- insurance panel: photo leads ------------------------- */
.insurance-figure{order:-1}
@media (min-width: 56rem){
  .insurance{grid-template-columns:minmax(0, 24rem) 1.15fr}
}

/* ---- brand grid: one optical size for every mark -----------
   The logos are pre-trimmed to their ink box (ifix-brand-logos.php),
   so a single contain box lines them all up. Square marks would read
   far smaller than a wordmark at the same height, so they run taller. */
.e-con .brand-grid img{
  width:auto;height:auto;
  max-width:88%;max-height:1.75rem;
  object-fit:contain;
}
.e-con .brand-grid img[data-logo="xiaomi"],
.e-con .brand-grid img[data-logo="hp"]{
  max-height:2.75rem;
}

/* ---- closing CTA: the lead is centred with everything else -
   `.final` alone (0,1,0) lost to Elementor's own container rule. */
.e-con.final{text-align:center}

/* ============================================================
   ROUND 5 (2026-08-07)
   ============================================================ */

/* ---- landing "Asukohad": copy left, both cards right --------
   The section head stops being a centred banner and becomes the
   left column; the two cards share the right one, which is what
   shrinks them. Below 64rem it falls back to the stacked layout. */
@media (min-width: 64rem){
  .e-con.places-split{
    display:grid;
    grid-template-columns:minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap:clamp(2rem, 4vw, 3.5rem);
    align-items:start;          /* copy starts level with the cards */
  }
  .e-con.places-split .section-head{
    margin-inline:0;
    margin-block-end:0;
    text-align:start;
    max-width:none;
  }
  .e-con.places-split .places{
    grid-template-columns:1fr 1fr;
    gap:0.875rem;
  }
  /* the cards are narrower now, so their internals tighten up */
  .places-split .place-body{padding:clamp(1rem, 1.6vw, 1.25rem)}
  .places-split .place-rows{
    grid-template-columns:1fr;
    row-gap:0;
  }
  /* Astra leaves a 1em bottom margin on <dd>, which stacked on top of the
     row gap and doubled the space between one field and the next. Spacing
     is owned by the term's top margin instead, so a label sits tight to
     its own value and apart from the next field. */
  .places-split .place-row > dd{margin-block-end:0}
  .places-split .place-row > dt{
    margin-block-start:0.75rem;
    padding-block-end:0.0625rem;
  }
  .places-split .place-row:first-child > dt{margin-block-start:0}
  .places-split .place-actions{gap:0.5rem;margin-block-start:1.125rem}
  .places-split .place-actions .btn{flex:1 1 100%;justify-content:center}
}

/* ---- subpage heroes: centred on small screens --------------- */
@media (max-width: 56rem){
  .page-hero__text{text-align:center}
  .page-hero .page-lead.page-lead{
    text-align:center;
    margin-inline:auto;
  }
}

/* ---- Hinnakiri on mobile: the lead reads after the module ---
   Order only applies once the grid has collapsed to one column,
   so the desktop two-column split is untouched. */
@media (max-width: 56rem){
  /* display:contents dissolves the text wrapper so the h1 and the lead
     become grid items in their own right; `order` on a child of a plain
     block wrapper would do nothing. Reading order becomes
     heading, price checker, explanatory copy. */
  .page-hero--checker .page-hero__text{display:contents}
  .page-hero--checker .page-hero__text h1{order:1}
  .page-hero--checker .page-hero__checker{order:2}
  .page-hero--checker .page-hero__text .page-lead{
    order:3;
    margin-block-start:0.5rem;
  }
}

/* ---- share button centres in the panel on small screens ----- */
@media (max-width: 48rem){
  .ifix-pc__actions{justify-content:center}
  .ifix-pc__share{margin-inline:auto}
}

/* ---- contact form: consent checkboxes ---------------------- */
.ifix-cf__consents{display:flex;flex-direction:column;gap:0.75rem}
.ifix-cf__check{
  display:flex;align-items:flex-start;gap:0.625rem;
  min-height:2.75rem;                    /* 44px target */
  padding-block:0.375rem;
  font-size:var(--text-ui);
  line-height:1.5;
  cursor:pointer;
}
.ifix-cf__check input[type="checkbox"]{
  flex:none;
  width:1.25rem;height:1.25rem;
  margin-block-start:0.1875rem;
  accent-color:var(--brand);
  cursor:pointer;
}
.ifix-cf__check input[type="checkbox"]:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ifix-cf__check a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:0.2em}
.ifix-cf__check a:hover{text-decoration-color:currentColor}
.ifix-cf__captcha[hidden]{display:none}
.ifix-cf__captcha{margin-block-start:0.25rem}

/* ============================================================
   ROUND 6 (2026-08-07)
   ============================================================ */

/* ---- hero: less air, tighter stack ------------------------- */
.hero{
  padding-block:clamp(2rem, 4.5vw, 3.5rem) clamp(2rem, 4.5vw, 3.25rem);
}
.hero-grid,
.e-con.hero-grid{
  gap:clamp(1.5rem, 3.5vw, 2.5rem);
}
.hero-lead,
.e-con .hero-lead{
  margin-block:1rem 1.5rem;
}
.hero-badges{
  margin-block-start:1.75rem;
  gap:0.625rem 1.5rem;
}

/* ---- less run-out under the location cards ------------------ */
.e-con.section:has(.places-split){
  padding-block-end:clamp(2rem, 4vw, 3rem);
}

/* ---- location cards: a little more air between fields ------ */
@media (min-width: 64rem){
  .places-split .place-row > dt{margin-block-start:1.0625rem}
  .places-split .place-row:first-child > dt{margin-block-start:0}
}

/* ============================================================
   CTA PANEL
   One shape, two grounds. The closing call to action carries the
   green wash and is the loud one; the insurance panel steps back
   to neutral grey so the two never compete. Replaces the
   full-bleed inverted band, which read as a black wall.
   ============================================================ */
.cta-panel{
  border-radius:var(--r-lg);
  background:var(--brand-wash);
  text-align:center;
}
/* Elementor's .wrap carries its own inline padding at (0,3,0), and its
   container reset zeroes the radius, so both are restated here. */
.e-con.wrap.cta-panel,
.entry-content > .cta-panel{
  max-width:75rem;
  /* the panel's own padding replaces the wrap's gutter, so the inset
     from the screen edge has to come back as width */
  width:calc(100% - 2 * var(--gutter));
  margin-inline:auto;
  padding:clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  border-radius:var(--r-lg);
}
.cta-panel h2,
.cta-panel .elementor-widget-heading h2.elementor-heading-title{
  font-size:var(--text-h2);
  text-wrap:balance;
  margin:0;
}
.cta-panel p,
.cta-panel .elementor-widget-text-editor{
  font-size:var(--text-lead);
  color:var(--fg);
  max-width:36rem;
  margin-inline:auto;
}
/* the Elementor build gets its gap from widget spacing; the plain
   HTML build on the subpages needs it stated */
.cta-panel h2 + p{margin-block-start:0.875rem}
.cta-panel .cta-actions{
  display:flex;flex-wrap:wrap;gap:0.75rem;
  justify-content:center;
  margin-block-start:1.75rem;
}
/* the Elementor build of this panel keeps its own actions container */
.cta-panel .final-actions{margin-block-start:1.75rem}
.cta-panel .final p{color:var(--fg)}

/* the defekteerimisakt panel steps back to neutral */
.insurance{background:var(--surface)}

/* ============================================================
   2026-08-07 — content width, heading rhythm, e-pood, card links
   ============================================================ */

/* ---- one content width on inner pages ----------------------
   Two gutters were being applied on the way down: #content
   .ast-container capped at 75rem + 2 gutters and padded, and then
   every child of .entry-content capped at 75rem and padded again.
   Subpage content therefore ran 2 gutters narrower than the header
   wordmark and the footer columns, which take the container
   geometry once.

   The gutter moves onto the children, which is where the landing
   page already puts it (.elementor-page #content .ast-container +
   .elementor-page .e-con.wrap do exactly this). It has to be that
   way round rather than stripping the child padding: Astra zeroes
   .ast-container's padding at its own mobile breakpoint, so a
   child with no gutter of its own runs edge to edge on a phone. */
#content .ast-container{
  max-width:none;
  padding-inline:0;
}
.entry-content > *:not(.page-hero){
  max-width:calc(75rem + 2 * var(--gutter));
  padding-inline:var(--gutter);
}
.page-hero > .wrap{
  max-width:calc(75rem + 2 * var(--gutter));
}

/* Restated after the rule above, which would otherwise strip the
   panel's own side padding. The panel now shares the content edge
   with its siblings, so the width calc that inset it is dropped,
   and it gets a section's worth of air above it: on Teenused the
   card grid ran straight into the panel. */
.entry-content > .cta-panel{
  max-width:75rem;
  width:calc(100% - 2 * var(--gutter));
  padding:clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  margin-block-start:var(--section-y);
}

/* ---- service cards: quiet link into the price checker ------
   :hover has to declare color at (0,2,0) or Astra's own
   `a:hover` (0,1,1) keeps it grey. */
.svc-link{
  display:inline-flex;align-items:center;gap:0.375rem;
  margin-block-start:0.875rem;
  font-size:var(--text-ui);font-weight:500;
  color:var(--fg-muted);
}
.svc-link::after{
  content:"\2192";
  line-height:1;
}
.svc-link:hover,
.svc-link:focus-visible{
  color:var(--brand-ink);
}

/* ---- headings: let the big ones breathe --------------------
   1.12 is a display line-height; at these sizes two- and
   three-line headings were closing up. Restated at each of the
   specificities Astra and Elementor already occupy. */
h1{line-height:1.14}
h2{line-height:1.18}
h3{line-height:1.28}
.page-hero h1{line-height:1.14}
.hero h1{line-height:1.14}
.e-con .elementor-widget-heading h1.elementor-heading-title{line-height:1.14}
.e-con .elementor-widget-heading h2.elementor-heading-title{line-height:1.18}
.e-con .elementor-widget-heading h3.elementor-heading-title{line-height:1.28}
.cta-panel h2,
.cta-panel .elementor-widget-heading h2.elementor-heading-title{line-height:1.18}
.insurance h2{line-height:1.18}

/* ---- eyebrows and section heads: more air ------------------ */
.eyebrow{margin-block-end:1.25rem}
.e-con .section-head > .eyebrow.elementor-widget{margin-block-end:1.25rem}
.e-con .section-head > .elementor-widget-text-editor{margin-block-start:1.5rem}
.e-con.section-head{margin-block-end:clamp(3rem, 6vw, 4.5rem)}
.section-head{margin-block-end:clamp(3rem, 6vw, 4.5rem)}

/* ---- E-pood: neutral page that runs into the footer --------
   Both classes are doubled: .page-hero.page-hero sets the wash
   and the section margin at (0,2,0), so a single class loses on
   specificity no matter where it sits in the file. */
.page-hero--muted.page-hero--muted{
  background:var(--surface);
}
.page-hero--flush.page-hero--flush{
  margin-block-end:0;
}
.entry-content:has(> .page-hero--flush:last-child){
  padding-block-end:0;
}

/* ---- newsletter card --------------------------------------
   Shares the contact form's field styles; .card is a flex column
   with a 1.25rem gap, so the heading and lead carry no margin. */
.ifix-nl.card{max-width:36rem}
.ifix-nl__title{
  font-size:var(--text-h3);
  line-height:1.28;
  margin:0;
}
/* Doubled: `.entry-content p{margin-bottom:1.6em}` is (0,1,1) and would otherwise
   hang 24px under the lead *on top of* the card's own 1.25rem flex gap. */
.ifix-nl__lead.ifix-nl__lead{
  font-size:var(--text-ui);
  color:var(--fg-muted);
  margin:0;
}
/* The status slot is an empty <div> until a submission redirects back to it;
   as a flex child it still ate a full gap and pushed the fields down.
   `:empty` does not match it — the PHP leaves a whitespace text node inside —
   so this keys on having no element child, which is true until a message lands.
   The live region itself stays in the DOM either way. */
.ifix-cf__status:not(:has(*)){display:none}


/* ============================================================
   2026-08-07 (b) — landing brand islands, Astra title-gap fix
   ============================================================ */

/* ---- Astra's title margin above a .page-hero ---------------
   Astra emits
   `@media (min-width:1200px){.ast-plain-container.ast-no-sidebar
   #primary{margin-top:60px}}` as *inline dynamic CSS* whenever a
   page's `site-post-title` meta is on. Every subpage puts its h1
   in the hero and hides Astra's own title, so that 60px surfaced
   as a white band above the hero on whichever page last got saved
   in the block editor (page 19, twice now). Keyed on the hero for
   the same reason the .entry-header rule is: the meta silently
   resets on save, the markup does not. (0,3,1) to clear Astra's
   own (0,2,1) regardless of load order. */
.ast-plain-container.ast-no-sidebar #primary:has(.page-hero){
  margin-top:0;
}

/* ---- landing brand islands ---------------------------------
   Same tile idea as the price checker's "Tootjad" grid, one step
   larger: this is a landing section, not a panel inside a card.
   Tile / logo-box / logo run 11rem / 4rem / 2.25rem against the
   checker's 8.5rem / 2.75rem / 1.5rem. The panel is --surface
   with --bg tiles so it reads as an island on the white section;
   the checker is the other way round because it sits on the
   green hero wash. */
.e-con .brand-islands{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem, 3vw, 2.5rem);
}
/* Flex rather than grid because there are seven brands: an auto-fill
   grid leaves the last row's orphans hugging the left edge, while a
   centred flex wrap reads as deliberate (4 + 3 on desktop, 2 per row
   on a phone). The basis is only a wrapping hint; flex-grow is what
   sets the final tile width, so the small end stays well above the
   checker's 8.5rem tile. */
.e-con .brand-islands__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(0.75rem, 1.5vw, 1rem);
  list-style:none;
  margin:0;
  padding:0;
}
.e-con .brand-islands__grid > li{
  display:flex;
  flex:1 1 clamp(7.5rem, 22%, 14rem);
  max-width:16rem;
  min-width:0;
  margin:0;
}
.e-con .brand-island{
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.125rem;
  min-height:9rem;
  padding:1.75rem 1.25rem;
  color:var(--fg);
  background:var(--bg);
  border-radius:var(--r-md);
  text-align:center;
  transition:box-shadow 0.15s ease, translate 0.15s ease, color 0.15s ease;
}
/* declares color, so it beats Astra's own a:hover at (0,1,1) */
.e-con .brand-island:hover{
  box-shadow:var(--shadow-2);
  translate:0 -2px;
  color:var(--brand-ink);
}
.e-con .brand-island:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.e-con .brand-island__logo-box{
  display:grid;place-items:center;
  width:100%;height:4rem;
  margin-block-end:0.5rem;
}
.e-con .brand-island__logo{
  max-width:100%;max-height:2.25rem;
  width:auto;height:auto;
  object-fit:contain;
}
/* square mark: capped at the wordmark height it reads far too small */
.e-con .brand-island__logo-box[data-logo="xiaomi"] .brand-island__logo{
  max-height:4rem;
}
.e-con .brand-island__mark{
  font-size:var(--text-lead);font-weight:680;letter-spacing:-0.02em;
}
.e-con .brand-island__count{font-size:var(--text-caption);color:var(--fg-muted)}
.e-con .brand-island:hover .brand-island__count{color:var(--fg-muted)}
.e-con .brand-islands__foot{
  margin:clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  text-align:center;
  font-size:var(--text-ui);
  color:var(--fg-muted);
}
.e-con .brand-islands__foot strong{color:var(--fg);font-weight:600}
.e-con .brand-islands__foot a{
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-underline-offset:0.2em;
}
.e-con .brand-islands__foot a:hover{
  color:var(--brand-ink);
  text-decoration-color:currentColor;
}

@media (prefers-reduced-motion:reduce){
  .e-con .brand-island{transition:none}
  .e-con .brand-island:hover{translate:none}
}


/* ============================================================
   2026-08-07 (c) — hero h1 cap, Hinnakiri steps + guarantee badge
   ============================================================ */

/* The landing h1 was the one thing in the scale running past the
   subpage h1 (3.75rem vs 3rem), which made the front page read a
   size louder than everything behind it. --text-h1 is used by the
   two .hero heading rules only, so capping the token is the whole
   change. */
:root{
  --text-h1: clamp(2.125rem, 1.2rem + 3.9vw, 3rem);
}

/* ---- Hinnakiri: how it works, beside the checker -----------
   Same icon language as the landing "Vali oma seade" cards
   (2.75rem brand-wash tile, 1.375rem stroked glyph), laid out as
   rows rather than cards because this column is narrow and sits
   next to a live module. An <ol> keeps the order for screen
   readers without printing 1-2-3 on screen. */
.pc-steps{
  display:flex;flex-direction:column;
  gap:clamp(1.25rem, 2.5vw, 1.75rem);
  margin-block:clamp(1.75rem, 3.5vw, 2.5rem) 0;
  list-style:none;
}
/* doubled: Astra's `.entry-content ul, .entry-content ol` sets a
   20px indent at (0,1,1) and would push the icons off the column */
/* .entry-content ol{margin:revert} (0,1,1, inline dynamic CSS) resets the block
   margins above, so the doubled class has to restate them. */
.pc-steps.pc-steps{
  padding-inline-start:0;margin-inline-start:0;
  margin-block:clamp(1.75rem, 3.5vw, 2.5rem) 0;
}
.pc-step{
  display:flex;align-items:flex-start;gap:1rem;
  margin:0;
  text-align:start;      /* the hero text centres on small screens */
}
.pc-step__icon{
  flex:none;
  width:2.75rem;height:2.75rem;
  display:grid;place-items:center;
  border-radius:var(--r-md);
  background:var(--brand-wash);color:var(--brand-ink);
}
/* The landing cards put this tile on white, where --brand-wash reads
   as a tile. The checker hero *is* --brand-wash, so there the tile
   would vanish and leave a bare glyph: flip it to --bg. */
.page-hero .pc-step__icon{background:var(--bg)}
.pc-step__icon svg{width:1.375rem;height:1.375rem;stroke-width:1.75}
.pc-step__body{min-width:0}
.pc-step h3{
  font-size:1.25rem;   /* a notch under --text-h3: these sit beside an icon, not above a section */
  line-height:1.3;
  margin:0;
}
.pc-step p{
  font-size:var(--text-ui);
  color:var(--fg-muted);
  margin-block:0.375rem 0;   /* Astra puts 1.6em under every <p> inside .entry-content */
  max-width:var(--measure);
}

/* ---- guarantee badge, reusing the landing hero treatment ---- */
.page-hero .hero-badges{
  justify-content:flex-start;
  margin-block-start:clamp(1.5rem, 3vw, 2rem);
}
.page-hero .hero-badges.hero-badges{
  padding-inline-start:0;
  margin-inline-start:0;
}

@media (max-width: 56rem){
  /* .page-hero__text is display:contents here, so these are grid
     items in their own right and need their place in the order:
     heading, checker, copy, steps, badge. */
  .page-hero--checker .page-hero__text .pc-steps{order:4}
  .page-hero--checker .page-hero__text .hero-badges{order:5}
  .page-hero--checker .page-hero__text .pc-steps{
    margin-block-start:clamp(1.5rem, 4vw, 2rem);
  }
}

/* ============================================================
   2026-08-26 — real brand mark + per-location pages
   ============================================================ */

/* ---- brand mark in header and footer -----------------------
   Replaces the typographic <b>i</b>Fix wordmark with the logo
   from the media library (attachment 138), inlined so the
   "Fix" half can take currentColor from .wordmark and the mark
   costs no extra request. The "i" keeps the logo's own green:
   that is the brand mark, not a palette token, so it is not
   re-pointed at --brand-ink the way body copy is. */
.wordmark__mark{
  display:block;
  width:auto;
  height:1.75rem;
}
.ast-header-html-1 .wordmark{gap:0}
.site-footer .foot-about .wordmark .wordmark__mark{height:2rem}
@media (min-width:1200px){
  .ast-header-html-1 .wordmark .wordmark__mark{height:2rem}
}

/* ---- location pages: photo rides in the hero media slot ----
   Same split as Kontakt/Hinnakiri, but the right column is a
   real photo rather than an illustration, so it is NOT
   aria-hidden and carries alt text. */
/* Inside the query on purpose: the shared collapse to one column
   lives in `@media (max-width:56rem)` and this rule is appended
   after it, so an unscoped (0,2,0) would keep the phone in two
   columns. */
@media (min-width:56.0625rem){
  .page-hero--place .page-hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}
/* Both hero photos are tall phone shots (the shopfront and the
   entrance), so the frame is portrait and capped rather than
   filling the column: at 1fr the 3:4 crop would run ~760px and
   drive the whole hero taller than the viewport. .page-hero__media
   already centres it. */
.page-hero__photo{
  width:100%;
  max-width:26rem;
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2);
}
.page-hero__photo img{
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  outline:1px solid var(--img-outline);outline-offset:-1px;
}

/* Under 56rem .page-hero__text centres its copy. That reads fine
   for a heading and a lead, but this hero also carries the
   address block, which has to stay ranged left. Both rules are
   (0,2,0)/(0,3,0) and sit after the media query, so they win
   without needing a query of their own. */
.page-hero--place .page-hero__text{text-align:start}
.page-hero--place .page-lead.page-lead{
  text-align:start;
  margin-inline:0;
}
.page-hero--place .place-rows{margin-block:clamp(1.5rem, 3vw, 2rem) 0}
/* Astra leaves 1em under every <dd>, which stacks on .place-rows'
   own row-gap and doubles the space between fields. */
.page-hero--place .place-row > dd{margin-block-end:0}
/* One size down both columns. The shared card treatment sets the
   label a notch smaller than the value; here label and value sit
   side by side as a single reading line, and only colour separates
   them. (0,2,1) clears the (0,1,1) rules it replaces - including
   `.hours dt`, which the child-combinator rule never reached. */
.page-hero--place .place-row > dt,
.page-hero--place .hours,
.page-hero--place .hours dt{font-size:var(--text-body)}
.page-hero--place .place-actions{margin-block-start:1.5rem}

/* ---- two supporting photos under the hero ------------------ */
.place-gallery{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1rem, 2.5vw, 1.5rem);
}
.place-gallery figure{margin:0}
.place-gallery img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  outline:1px solid var(--img-outline);outline-offset:-1px;
}
@media (min-width:48rem){
  .place-gallery{grid-template-columns:1fr 1fr}
}

/* ---- what is done on site ----------------------------------
   Nine labels, not nine cards: Teenused owns the descriptions
   and the photos, and repeating them here would duplicate a
   whole page on two more URLs.
   Only margin-block is set. `.entry-content > *:not(.page-hero)`
   (0,2,0) already gives this <ul> the shared column and gutter
   and already outranks Astra's `.entry-content ul{padding-left:20px}`
   (0,1,1); a `margin:0` or `padding-inline-start:0` here would
   land later at equal weight and take the centring or the mobile
   gutter away with it — the bug .svc-grid had. */
.entry-content .worklist{
  display:grid;
  /* 19rem, not 15: nine items over four tracks leaves a lone
     orphan on the last row. Four tracks need 1216px, one more
     than the 1200px column, so the widest layout is three. */
  grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr));
  column-gap:clamp(1.5rem, 3vw, 2.5rem);
  list-style:none;
  margin-block:0;
}
/* No rules between the rows: the check icons already mark each item, and
   nine hairlines cut the section into strips. Spacing is the padding. */
.worklist li{
  display:flex;align-items:flex-start;gap:0.75rem;
  padding-block:0.5rem;
  font-size:var(--text-body);
  line-height:1.45;
}
.worklist li svg{
  flex:none;
  width:1.25rem;height:1.25rem;
  margin-block-start:0.1875rem;
  color:var(--brand-ink);
  stroke-width:2;
}
.worklist-more{margin-block-start:1.5rem}

/* ---- mobile menu: Asukohad now has children ----------------
   The panel's item styling was written when the menu was flat.
   Astra parks its toggle absolutely at the *top* of the row
   (a 14px sliver straddling the item's rounded top edge) and
   slideToggles the sub-menu with an inline `display`, so the
   open state cannot be styled with a display of its own here -
   the sub-items are spaced with margins instead.
   (0,5,0) clears Astra's own (0,4,1) menu-link rule. */
.ast-header-break-point .ast-mobile-header-content .main-navigation .main-header-menu .menu-item .ast-menu-toggle,
.ast-header-break-point .ast-mobile-header-content .main-navigation .main-header-menu .menu-item .ast-menu-toggle:hover{
  /* .menu-item is the positioning context and it *contains* the
     open sub-menu, so `inset-block:0` would centre the chevron
     over the whole expanded block. Pin it to the parent row
     instead: 3.5rem is that row's min-height, and none of these
     five labels wrap at 320px. */
  inset-block-start:0;
  inset-block-end:auto;
  height:3.5rem;
  inset-inline-end:0;
  display:flex;align-items:center;justify-content:center;
  padding-inline:1.25rem;
  background:none;
  border:0;
  box-shadow:none;          /* Astra ships a 1px drop shadow here */
  border-radius:var(--r-md);
  color:var(--fg-muted);
}
/* Astra prefixes every sub-menu label with a rotated arrow glyph.
   In the panel the indent and the tile already say "child". */
.ast-header-break-point .ast-mobile-header-content .main-header-menu .sub-menu .menu-link > .ast-icon{
  display:none;
}
.ast-header-break-point .ast-mobile-header-content .main-header-menu .sub-menu{
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0.5rem 0 0 0.875rem;
}
.ast-header-break-point .ast-mobile-header-content .main-header-menu .sub-menu > li + li{
  margin-block-start:0.5rem;
}
.ast-header-break-point .ast-mobile-header-content .main-header-menu .sub-menu .menu-link{
  display:flex;align-items:center;
  min-height:3rem;
  padding:0.75rem 1.25rem;
  border-radius:var(--r-md);
  background:var(--surface);
  font-size:var(--text-body);
  font-weight:500;
  color:var(--fg);
}
.ast-header-break-point .ast-mobile-header-content .main-header-menu .sub-menu .current-menu-item > .menu-link{
  background:var(--brand-wash);
}

/* ============================================================
   2026-08-27 — info / legal pages (garantii, müügitingimused,
   tagastus, saatmine)
   ============================================================ */

/* One-column hero on the neutral --surface band: these four pages
   support the shop rather than sell it, so they sit a step quieter
   than the green-wash marketing pages. */
.page-hero--text .page-hero__grid{
  grid-template-columns:minmax(0,1fr);
}
.page-hero--text .page-hero__text{
  max-width:46rem;
  text-align:start;
}
.page-hero--text .page-lead.page-lead{
  text-align:start;
  margin-inline:0;
}

/* The measure goes on the CHILDREN, not on .legal itself. The shared
   `.entry-content > *:not(.page-hero)` rule centres each child inside
   the 75rem column; capping .legal at 46rem would centre that narrower
   box too and push the body copy ~230px right of the hero's h1. Capping
   its children instead keeps one left edge down the whole page. */
.entry-content .legal > *{max-width:46rem}

/* (0,2,1) throughout, to clear Astra's .entry-content p / ul / ol
   rules, which are (0,1,1). */
.entry-content .legal h2{
  font-size:var(--text-h3);
  line-height:1.25;
  text-wrap:balance;
  margin-block:2.75rem 0.75rem;
}
.entry-content .legal > *:first-child{margin-block-start:0}
.entry-content .legal h3{
  font-size:var(--text-body);
  font-weight:600;
  margin-block:1.5rem 0.375rem;
}
.entry-content .legal p{
  margin-block:0 0.875rem;
}
.entry-content .legal ul,
.entry-content .legal ol{
  margin-block:0 0.875rem;
  padding-inline-start:1.5rem;
}
.entry-content .legal li{margin-block-end:0.375rem}
.entry-content .legal li::marker{color:var(--fg-muted)}
.entry-content .legal a{
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-underline-offset:0.2em;
}
.entry-content .legal a:hover{text-decoration-color:currentColor}

/* Company details, ahead of the terms themselves. Each row is a
   display:contents wrapper so every dt/dd lands on the shared pair
   of columns, the same arrangement .place-rows uses. */
.entry-content .legal .legal-meta{
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:clamp(1.25rem, 3vw, 2rem);
  row-gap:0.5rem;
  margin-block:0 2.5rem;
  padding:clamp(1.25rem, 3vw, 1.75rem);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.legal-meta > div{display:contents}
.legal-meta dt{color:var(--fg-muted)}
.legal-meta dd{margin:0}

/* ---- footer columns after the 2026-08-27 rework -------------
   The two location blocks are gone; the footer is now
   about | Lehed | E-pood | Info, i.e. three link columns. */

/* Astra's `ul{margin:0 0 1.5em 3em}` (0,0,1) survived here because the
   existing reset only zeroed the BLOCK margins, so the html-2 column's
   list sat 3em (51px) right of its own heading. The widget columns did
   not show it: Astra's widget CSS already zeroes their margin-left. */
.site-footer .foot-col ul{
  margin-inline:0;
  padding-inline:0;
  list-style:none;
}

/* The site-links column is a nav_menu widget rather than the header
   builder's menu element, so that it can carry a real <h2> title the
   way the other two columns do and still be edited under Appearance >
   Menus. These rules restate .foot-h / .foot-col on the widget markup. */
.site-footer .widget_nav_menu .widget-title{
  font-size:var(--text-body);
  font-weight:600;
  /* .foot-h inherits 1.18 from the shared heading rules; the widget
     title does not, and the 5px taller line pushed this column's links
     4px below its neighbours'. */
  line-height:1.18;
  letter-spacing:normal;
  text-transform:none;
  color:var(--fg);
  margin-block:0 0.875rem;
}
.site-footer .widget_nav_menu ul{
  display:flex;flex-direction:column;
  gap:0.125rem;
  margin:0;
  padding:0;
  list-style:none;
}
.site-footer .widget_nav_menu li{margin:0}
.site-footer .widget_nav_menu a{
  display:inline-block;
  padding-block:0.4375rem;
  font-size:var(--text-body);
  color:var(--fg);
  text-decoration:none;
}
.site-footer .widget_nav_menu a:hover{
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-underline-offset:0.2em;
}

/* ============================================================
   2026-08-27 (b) — hero: white ground, narrower copy column,
   full-bleed art that runs off the right edge on desktop
   ============================================================ */

/* Flat white, no gradient and no closing rule. The art is a white
   product shot that now runs to the viewport edge, so any tint under
   it would draw the photo's own box back onto the page. Both the
   .hero and .e-con.hero forms are restated: the plain class is dead
   on the landing page but still the readable one. */
.hero,
.e-con.hero{
  background:var(--bg);
  border-block-end:0;
}

/* Copy column 10% narrower than the 1.05/0.95 split it replaces, so
   the art starts where the text ends. Inside the query on purpose and
   at the hero's own 56rem breakpoint: the one-column collapse is the
   BASE `.hero-grid{grid-template-columns:1fr}` rule, so an unscoped
   version of this appended later keeps phones in two columns. */
@media (min-width:56rem){
  .hero-grid,
  .e-con.hero-grid{
    grid-template-columns:minmax(0,0.945fr) minmax(0,1.055fr);
  }
}

@media (min-width:56rem){
  /* The art is deliberately wider than its own track and is anchored
     to the track's left edge, so the overflow all goes to the right
     and the hero clips it at the viewport edge. --hero-art-bleed is
     the one dial: it is how far past the track the image runs. */
  .e-con.hero{
    overflow:hidden;
    /* the one dial: how much of the art the right edge eats */
    --hero-art-cut:clamp(6rem, 10vw, 12rem);
  }
  .elementor .e-con > .elementor-widget.hero-figure.hero-figure,
  .hero-figure{
    max-width:none;
    /* Reach the viewport edge first, then overshoot by --hero-art-cut.
       A plain vw bleed does not hold: the content column is capped at
       75rem, so on a 1600px screen the track stops 200px from the edge
       and a fixed 14vw barely cleared it. The max() covers both cases:
       above 1264px the column is centred at 75rem and the gap to the
       viewport is 50vw - 37.5rem; below that the column is the viewport
       minus its gutters and the gap is exactly one gutter. */
    width:calc(100% + max(var(--gutter), 50vw - 37.5rem) + var(--hero-art-cut));
    justify-self:start;
  }
}

/* Under 56rem the hero stacks to one column and the art is shown in
   full: no bleed, no clipping, the whole arrangement inside the
   gutter. It used to be display:none here, from when the art was a
   tall portrait that pushed the buttons off a phone screen. */
@media (max-width:56rem){
  .hero-figure{
    display:block;
    width:100%;
    max-width:100%;
    justify-self:center;
  }
}

/* ============================================================
   2026-08-27 (c) — insurance panel on Hinnakiri, price-checker
   empty state
   ============================================================ */

/* The panel carries its own padding and clips its photo to its own
   rounded edge, so the shared `.entry-content > *:not(.page-hero)`
   gutter would sit INSIDE it and push the photo off that edge. Same
   arrangement .cta-panel uses: the inset from the screen edge comes
   back as width instead. No margin-block-start: the checker hero above
   already carries --section-y. */
.entry-content > .insurance{
  max-width:75rem;
  width:calc(100% - 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:0;
}

/* .insurance-figure's sizing was scoped to .e-con back when the panel
   only existed on the landing page. Unscoped copies so it also works
   inside .entry-content; identical values, so the (0,2,0) .e-con rules
   still winning on the landing changes nothing. `order:-1` is declared
   later at (0,1,0) and is deliberately not restated here. */
.insurance-figure{
  width:100%;
  height:auto;
  border-radius:0;              /* the panel's own clip rounds it */
  outline:0;
}
@media (min-width:56rem){
  .insurance-figure{
    align-self:stretch;
    height:100%;
    min-height:17rem;
    object-fit:cover;
  }
}

/* Empty search result: the hint now sits above a way out. The wrapper
   took the id, because the script only ever toggles `.hidden` on it. */
.ifix-pc__empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
}


/* ==========================================================
   WooCommerce, single product
   ========================================================== */

/* Woo's own wrapper is a bare full-width div, and Astra's .ast-container
   around it is already reset to `max-width:none;padding-inline:0` by the
   shared content-edge rule above, so the product ran edge to edge while
   the header wordmark and the footer columns sat inside the 75rem column.
   Same cap and same gutter as `.entry-content > *`, applied once here.

   Unscoped on purpose (2026-08-28): the shop archive and every product
   category archive render inside this same container and had the same
   edge-to-edge problem. Cart, checkout and account pages do not use it,
   they render inside `.entry-content`, which is already capped. */
.ast-woocommerce-container{
  max-width:calc(75rem + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --- breadcrumb, moved out of the summary onto the full content column ---
   Astra sized and spaced it for the top of the right-hand column. Here it is
   a trail under the header, so it goes quiet and lines up on the content's
   own left edge, above the gallery. */
.ast-woocommerce-container > .woocommerce-breadcrumb{
  margin-block:0 1.75rem;
  padding:0;
  font-size:var(--text-caption);
  line-height:1.5;
  color:var(--fg-muted);
  text-align:start;
}
.ast-woocommerce-container > .woocommerce-breadcrumb a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-underline-offset:0.2em;
}
.ast-woocommerce-container > .woocommerce-breadcrumb a:hover{
  color:var(--fg);
  text-decoration-color:currentColor;
}

/* --- specs, lifted out of the Lisainfo tab and set under the price ---
   Two hairlines rather than a tinted panel: the spec block has to fence
   itself off from the short description without competing with the
   --surface card that sits just below it in the form.
   Label and value share one pair of grid columns, the `.place-rows` idiom. */
.ifix-specs{
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:clamp(1.25rem, 3vw, 2rem);
  row-gap:0.5rem;
  align-items:baseline;
  margin-block:1.25rem 1.5rem;
  padding-block:1.125rem;
  border-block:1px solid var(--line);
}
.ifix-specs dt{
  margin:0;
  font-size:var(--text-ui);
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  color:var(--fg-muted);
}
.ifix-specs dd{
  margin:0;
  min-width:0;
  font-size:var(--text-ui);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* --- "Seotud tooted", inside the add-to-cart form ---
   The checkbox posts with the normal add-to-cart submit, so one click
   puts both items in the cart and the block needs no JavaScript. */
.ifix-bundle{
  margin-block:0 1.25rem;
  padding:0.75rem;
  border-radius:var(--r-lg);
  background:var(--surface);
}
.ifix-bundle__title{
  margin:0.375rem 0.5rem 0.625rem;
  font-size:var(--text-micro);
  font-weight:700;
  line-height:1.18;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.ifix-bundle__item{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.625rem 0.75rem;
  border-radius:var(--r-md);
  background:var(--bg);
  box-shadow:var(--shadow-1);
  cursor:pointer;
  transition:box-shadow 150ms cubic-bezier(0.2,0,0,1);
}
.ifix-bundle__item + .ifix-bundle__item{margin-block-start:0.5rem}
.ifix-bundle__item:hover{box-shadow:var(--shadow-2)}
/* The ring goes on the label, not the 1.125rem checkbox: the whole row is
   the target, so the row is what focus has to outline. */
.ifix-bundle__item:has(:focus-visible){
  outline:2px solid var(--focus);
  outline-offset:3px;
}
/* Ink accent, not --brand: the green fill stays reserved for "Lisa korvi",
   which sits a centimetre below this checkbox. */
.ifix-bundle__check{
  flex:none;
  width:1.125rem;height:1.125rem;
  margin:0;
  accent-color:var(--fg);
}
.ifix-bundle__img{
  flex:none;
  width:2.75rem;height:2.75rem;
  object-fit:cover;
  border-radius:var(--r-sm);
}
.ifix-bundle__body{
  display:flex;flex-direction:column;gap:0.125rem;
  min-width:0;
}
.ifix-bundle__name{font-size:var(--text-ui);font-weight:600;line-height:1.3}
/* One figure now, so it can carry the weight of a fact instead of a
   footnote. It stays a notch under the product name on colour, not size. */
.ifix-bundle__price{
  font-size:var(--text-ui);
  font-weight:600;
  color:var(--fg-muted);
  font-variant-numeric:tabular-nums;
}
.ifix-bundle__price .amount{color:inherit}

/* --- trust badges, under the add-to-cart button ---
   `clear:both` because Woo floats .quantity left inside the same form;
   without it the first badge row wraps around the float. */
.ifix-trust{
  clear:both;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1.25rem;
  margin:1.125rem 0 0;
  padding:0;
}
.ifix-trust li{
  display:flex;
  align-items:center;
  gap:0.4375rem;
  margin:0;
  font-size:var(--text-caption);
  line-height:1.3;
  color:var(--fg-muted);
}
.ifix-trust svg{
  flex:none;
  width:1.125rem;height:1.125rem;
  color:var(--brand-ink);
}

/* The badge row is the last child of form.cart, and Woo gives neither the
   form a bottom margin nor .product_meta a top one, so the category line
   sat flush against the badges. */
.single-product .summary .product_meta{margin-block-start:1.5rem}


/* ==========================================================
   E-SHOP (2026-08-28)

   The mega menu, the E-pood storefront, the product grids, the
   cart drawer, and the WooCommerce pages that were still on
   Astra's stock styling. Everything reads the same tokens as
   the rest of the site; no new values are introduced here.
   ========================================================== */

/* ---------- mega menu ----------------------------------------------
   The panel is a `ul.sub-menu` on purpose: that is the selector Astra's
   mobile `AstraToggleSubMenu` slides open, so the phone needs no script of
   its own and this file must not own `display` there, because Astra writes
   it inline. Desktop is scoped on `body:not(.ast-header-break-point)`
   rather than a media query: that is the exact class Astra sets when its
   mobile header takes over, whatever its breakpoint is configured to. */

.ifix-mega.ifix-mega,
.ifix-mega__list.ifix-mega__list{
  list-style:none;
  margin:0;
  padding:0;
}

/* Astra underlines every link it styles, including inside the header. The
   mega menu is navigation, so its links carry the menu's own affordances
   (hover fill, focus ring) rather than an underline. */
.ifix-mega a,
.ifix-mega a:hover{
  text-decoration:none;
}

.ifix-mega__head{
  display:flex;
  align-items:center;
  gap:0.625rem;
  min-height:2.75rem;
  font-size:var(--text-ui);
  font-weight:700;
  line-height:1.25;
  color:var(--fg);
}
.ifix-mega__icon{
  flex:none;
  display:grid;
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:var(--r-md);
  background:var(--brand-wash);
  color:var(--brand-ink);
}
.ifix-mega__icon svg{width:1.125rem;height:1.125rem;stroke-width:1.75}

.ifix-mega__list a{
  display:flex;
  align-items:center;
  min-height:2.5rem;
  padding:0.375rem 0.625rem;
  border-radius:var(--r-sm);
  font-size:var(--text-ui);
  font-weight:500;
  line-height:1.3;
  color:var(--fg-muted);
  transition:background-color 150ms cubic-bezier(0.2,0,0,1),color 150ms cubic-bezier(0.2,0,0,1);
}
.ifix-mega__list a:hover,
.ifix-mega__list a:focus-visible{
  background:var(--surface);
  color:var(--fg);
}

.ifix-mega__foot a{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  min-height:2.75rem;
  font-size:var(--text-ui);
  font-weight:600;
  color:var(--brand-ink);
}
.ifix-mega__foot svg{width:1rem;height:1rem;flex:none;stroke-width:2}
.ifix-mega__foot a:hover{color:var(--fg)}

/* --- desktop panel --- */
body:not(.ast-header-break-point) .main-header-menu .ifix-has-mega{
  position:relative;
}
/* `!important` on `display` beats any inline `display:none` Astra's mobile
   toggle left behind before a resize: an author !important outranks a
   normal inline style, which is the one direction the cascade allows. */
body:not(.ast-header-break-point) .main-header-menu .ifix-has-mega > .ifix-mega.ifix-mega{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(1.25rem,2.5vw,2.25rem);
  position:absolute;
  inset-block-start:100%;
  inset-inline-end:auto;
  inset-inline-start:50%;
  z-index:120;
  width:min(48rem,calc(100vw - 2 * var(--gutter)));
  margin-block:0;
  /* Centred on its own menu item, not right-aligned to it: E-pood is the first
     item in the menu now, so anchoring the panel's right edge to the item's ran
     it off the left of the screen. `--ifix-mega-shift` is the offset from that
     centre line, written by the header script in ifix-shop.php so the panel can
     never cross the viewport gutter on a narrow laptop; with no JS the default
     is exactly half the panel's own width, i.e. dead centre. */
  margin-inline:var(--ifix-mega-shift, -24rem) 0;
  padding:1.75rem;
  border:0;
  border-radius:var(--r-lg);
  background:var(--bg);
  box-shadow:var(--shadow-3);
  opacity:0;
  visibility:hidden;
  transform:translateY(-0.375rem);
  transition:opacity 150ms cubic-bezier(0.2,0,0,1),
             transform 150ms cubic-bezier(0.2,0,0,1),
             visibility 0s linear 150ms;
}
body:not(.ast-header-break-point) .main-header-menu .ifix-has-mega:hover > .ifix-mega.ifix-mega,
body:not(.ast-header-break-point) .main-header-menu .ifix-has-mega:focus-within > .ifix-mega.ifix-mega{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity 150ms cubic-bezier(0.2,0,0,1),
             transform 150ms cubic-bezier(0.2,0,0,1);
}
body:not(.ast-header-break-point) .ifix-mega__col{
  min-width:0;
}
body:not(.ast-header-break-point) .ifix-mega__head{
  padding-inline:0.625rem;
  margin-block-end:0.5rem;
}
body:not(.ast-header-break-point) .ifix-mega__foot{
  grid-column:1 / -1;
  margin-block-start:1.25rem;
  padding-block-start:1.25rem;
  padding-inline:0.625rem;
  border-block-start:1px solid var(--line);
}

/* --- inside the mobile panel ---
   Astra's own sub-menu chrome (background, borders, indents) is stripped so
   the three groups read as sections of the panel rather than as a dropdown
   floating inside it. */
.ast-header-break-point .ifix-mega.ifix-mega{
  background:none;
  border:0;
  box-shadow:none;
  padding-block:0.5rem;
}
.ast-header-break-point .ifix-mega__col + .ifix-mega__col,
.ast-header-break-point .ifix-mega__foot{
  margin-block-start:0.75rem;
  padding-block-start:0.75rem;
  border-block-start:1px solid var(--line);
}
.ast-header-break-point .ifix-mega__head{
  padding-inline:1.25rem;
}
.ast-header-break-point .ifix-mega__list a{
  min-height:2.75rem;
  padding-inline:1.25rem 1.25rem;
  margin-inline-start:2.875rem;
  border-radius:var(--r-sm);
}
.ast-header-break-point .ifix-mega__foot a{
  padding-inline:1.25rem;
}

/* ---------- header cart ---------------------------------------------
   A quiet pill beside the green CTA: two filled buttons in one corner
   would read as two primary actions. The count is the only brand mark. */
#masthead .ast-site-header-cart .ast-site-header-cart-li > a.cart-container{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.5rem;
  min-width:2.5rem;
  padding:0.5rem 0.6875rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--fg);
  transition:background-color 150ms cubic-bezier(0.2,0,0,1),
             border-color 150ms cubic-bezier(0.2,0,0,1);
}
#masthead .ast-site-header-cart .ast-site-header-cart-li > a.cart-container:hover{
  background:var(--surface-2);
  border-color:var(--fg-muted);
}
#masthead .ast-site-header-cart .ast-addon-cart-wrap{
  display:flex;
  align-items:center;
}
#masthead .ast-site-header-cart .astra-icon{
  position:relative;
  display:inline-flex;
  color:var(--fg);
}
#masthead .ast-site-header-cart .astra-icon svg{
  width:1.25rem;
  height:1.25rem;
  fill:currentColor;
}
/* Astra prints the total through a ::after on the icon. Restyle it into the
   design's badge rather than adding a second counter. */
#masthead .ast-site-header-cart .astra-icon::after{
  content:attr(data-cart-total);
  position:absolute;
  inset-block-start:-0.5rem;
  inset-inline-end:-0.5625rem;
  min-width:1.125rem;
  height:1.125rem;
  padding-inline:0.25rem;
  border-radius:var(--r-pill);
  background:var(--brand-ink);
  color:var(--bg);
  font-size:0.6875rem;
  font-weight:700;
  line-height:1.125rem;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
/* An empty cart needs no badge: the icon already says "cart". */
#masthead .ast-site-header-cart .astra-icon[data-cart-total="0"]::after{
  content:none;
}
#masthead .ast-site-header-cart{
  padding-inline:0;
}

/* ---------- cart drawer ---------------------------------------------
   Astra's flyout, repainted on the site's own surfaces. */
.astra-cart-drawer{
  background:var(--bg);
  color:var(--fg);
}
.astra-cart-drawer .astra-cart-drawer-header{
  border-block-end:1px solid var(--line);
  padding:1.25rem var(--gutter);
  max-height:none;
}
.astra-cart-drawer .astra-cart-drawer-header .astra-cart-drawer-title{
  font-size:var(--text-h3);
  font-weight:700;
  line-height:1.25;
  color:var(--fg);
}
.astra-cart-drawer .astra-cart-drawer-close{
  border:0;
  background:none;
  box-shadow:none;
  color:var(--fg-muted);
  padding:0.5rem;
  min-height:2.75rem;
  min-width:2.75rem;
  border-radius:var(--r-pill);
}
.astra-cart-drawer .astra-cart-drawer-close:hover{
  background:var(--surface-2);
  color:var(--fg);
}
.astra-cart-drawer .woocommerce-mini-cart__total{
  border-block-start:1px solid var(--line);
  padding-block:1rem;
  font-size:var(--text-body);
}
.astra-cart-drawer .woocommerce-mini-cart__total .amount{
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.astra-cart-drawer .woocommerce-mini-cart-item img{
  border-radius:var(--r-sm);
}
.astra-cart-drawer .woocommerce-mini-cart__buttons{
  display:flex;
  flex-direction:column;
  gap:0.625rem;
}
.astra-cart-drawer .woocommerce-mini-cart__buttons .button{
  width:100%;
  margin:0;
}
.astra-mobile-cart-overlay{
  background:oklch(0.22 0.012 265 / 0.45);
}

/* ---------- one content column, every WooCommerce page --------------
   `.ast-woocommerce-container` is a bare full-width div and the shared
   content-edge rule has already reset `#content .ast-container` to
   `max-width:none;padding-inline:0`, so the shop archive and every
   category archive ran 0 to viewport while the header wordmark sat inside
   the 75rem column. Cart, checkout and account render inside
   `.entry-content` instead and are already capped by its own child rule. */
.woocommerce-page .entry-content > .woocommerce{
  min-width:0;
}

/* ---------- shop archive furniture ---------------------------------- */
.woocommerce-products-header{
  margin-block:0 1.5rem;
}
.woocommerce-products-header .woocommerce-products-header__title{
  font-size:var(--text-h1);
  line-height:1.08;
  letter-spacing:-0.02em;
}
.shop-lead,
.woocommerce-products-header .term-description p{
  font-size:1.1875rem;
  line-height:1.55;
  color:var(--fg-muted);
  max-width:46rem;
  margin-block:0.75rem 0;
}

/* Category chips. `auto` scrolling rather than wrapping to three rows on a
   phone: the row is navigation, and a scroll keeps the loop below it in
   view while it is used. */
.shop-nav{
  margin-block:0 1.5rem;
}
.shop-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin:0;
  padding:0;
}
.shop-nav__chip{
  display:inline-flex;
  align-items:center;
  min-height:2.5rem;
  padding:0.4375rem 0.9375rem;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--bg);
  font-size:var(--text-ui);
  font-weight:600;
  line-height:1.2;
  color:var(--fg-muted);
  text-decoration:none;
  transition:background-color 150ms cubic-bezier(0.2,0,0,1),
             border-color 150ms cubic-bezier(0.2,0,0,1),
             color 150ms cubic-bezier(0.2,0,0,1);
}
.shop-nav__chip:hover{
  border-color:var(--line-strong);
  background:var(--surface);
  color:var(--fg);
}
.shop-nav__chip.is-current{
  background:var(--brand-wash);
  border-color:transparent;
  color:var(--brand-ink);
}

/* Result count and the sort dropdown, one quiet row above the grid. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  margin-block:0 1.5rem;
  font-size:var(--text-ui);
  color:var(--fg-muted);
}
.woocommerce .woocommerce-ordering select{
  min-height:2.5rem;
  border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  padding:0.375rem 2.25rem 0.375rem 1rem;
  font-size:var(--text-ui);
  background-color:var(--bg);
  color:var(--fg);
}

/* ---------- product cards -------------------------------------------
   The `.cat` card idiom from the landing page: 12px of padding around a
   12px inner radius, so the outer 24px radius stays true, and depth from
   shadow rather than a border. */
.woocommerce ul.products li.product{
  display:flex;
  flex-direction:column;
  padding:12px;
  border-radius:var(--r-lg);
  background:var(--bg);
  box-shadow:var(--shadow-1);
  transition:box-shadow 150ms cubic-bezier(0.2,0,0,1);
}
.woocommerce ul.products li.product:hover{
  box-shadow:var(--shadow-2);
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
  position:relative;
  display:block;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.woocommerce ul.products li.product img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  margin:0;
  border-radius:0;
}
.woocommerce ul.products li.product .ast-woo-product-category{
  margin-block:0.875rem 0.25rem;
  padding-inline:0.25rem;
  font-size:var(--text-micro);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding:0 0.25rem;
  font-size:var(--text-ui);
  font-weight:600;
  line-height:1.35;
  color:var(--fg);
}
.woocommerce ul.products li.product .price{
  display:block;
  margin-block:0.375rem 0;
  padding-inline:0.25rem;
  font-size:var(--text-body);
  font-weight:700;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.woocommerce ul.products li.product .price del{
  color:var(--fg-muted);
  font-weight:500;
  margin-inline-end:0.375rem;
}
.woocommerce ul.products li.product .price ins{
  text-decoration:none;
}
/* The price is the last thing in the card, so it takes the bottom padding
   the 12px frame does not supply on its own. */
.woocommerce ul.products li.product > *:last-child{
  margin-block-end:0.5rem;
}
.woocommerce ul.products li.product .star-rating{
  margin-block:0.5rem 0;
  margin-inline-start:0.25rem;
  color:var(--star);
}

/* Astra's "on card" add-to-cart, floated over the thumbnail. */
.woocommerce ul.products li.product .ast-on-card-button{
  border-radius:var(--r-pill);
}

/* Sub-category tiles on a parent category archive. */
.woocommerce ul.products li.product-category{
  padding:12px;
}
.woocommerce ul.products li.product-category > a{
  display:flex;
  flex-direction:column;
  height:100%;
}
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title{
  margin-block:0.875rem 0;
  padding-inline:0.25rem;
  font-size:var(--text-ui);
  font-weight:600;
  line-height:1.35;
  color:var(--fg);
}
.woocommerce ul.products li.product-category h2 .count{
  background:none;
  padding:0 0 0 0.375rem;
  color:var(--fg-muted);
  font-weight:500;
}

/* No products yet is the normal state of a shop being filled, so the
   message is a panel rather than a stray line of text. */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-no-products-found > .woocommerce-info{
  border-radius:var(--r-lg);
  border:0;
  border-block-start:0;
  background:var(--surface);
  color:var(--fg);
  padding:1.125rem 1.5rem;
  font-size:var(--text-ui);
}

/* ---------- the E-pood storefront ----------------------------------- */
.shop-section + .shop-section{
  margin-block-start:clamp(3rem,6vw,4.5rem);
}
.shop-home .section-head{
  margin-block-end:clamp(1.75rem,3.5vw,2.5rem);
}
.shop-home .section-head h2{
  font-size:var(--text-h2);
}
.section-head--row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem 1.5rem;
  max-width:none;
}

.shop-groups{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1.25rem,3vw,1.5rem);
}
.shop-groups > *{min-width:0}
.shop-group{
  display:flex;
  flex-direction:column;
  padding:12px;
  border-radius:var(--r-lg);
  background:var(--bg);
  box-shadow:var(--shadow-2);
}
.shop-group__head{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:calc(1.25rem - 12px) 0.75rem 1rem;
}
.shop-group__icon{
  flex:none;
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:var(--r-md);
  background:var(--brand-wash);
  color:var(--brand-ink);
}
.shop-group__icon svg{width:1.375rem;height:1.375rem;stroke-width:1.75}
.shop-group__head h3{
  font-size:var(--text-h3);
  line-height:1.2;
}
.shop-group__list.shop-group__list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.125rem;
  margin:0;
  padding:0;
}
.shop-group__list li{margin:0}
.shop-group__list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  min-height:2.75rem;
  padding:0.625rem 0.875rem;
  border-radius:var(--r-md);
  background:var(--surface);
  font-size:var(--text-ui);
  font-weight:500;
  color:var(--fg);
  text-decoration:none;
  transition:background-color 150ms cubic-bezier(0.2,0,0,1);
}
.shop-group__list a:hover{
  background:var(--brand-wash);
}
.shop-group__n{
  flex:none;
  font-size:var(--text-caption);
  font-weight:600;
  color:var(--fg-muted);
  font-variant-numeric:tabular-nums;
}
.shop-group__list a:hover .shop-group__n{color:var(--brand-ink)}
.shop-group__foot.shop-group__foot{
  margin-block:auto 0;
  padding:0.875rem 0.875rem 0.25rem;
}
.shop-group__foot a{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:var(--text-ui);
  font-weight:600;
  color:var(--brand-ink);
  text-decoration:none;
}
.shop-group__foot svg{width:1rem;height:1rem;flex:none;stroke-width:2}
.shop-group__foot a:hover{color:var(--fg)}

/* Astra indents every list inside .entry-content by 20px and hangs a 1.6em
   margin under every paragraph. Both would break the card's own rhythm. */
.entry-content .shop-group__list.shop-group__list{padding-inline-start:0}
.entry-content .shop-group__foot.shop-group__foot{margin-block-end:0}
.entry-content .shop-nav ul.ifix-nav-reset{padding-inline-start:0}

/* Buttons in a section head are actions, not text: keep Astra's content
   underline off them. */
.shop-home a.btn,
.shop-home a.btn:hover{text-decoration:none}

/* ---------- WooCommerce buttons in the site's own idiom --------------
   Woo and Astra both style bare `.button`, so every rule here carries at
   least three classes to clear `.woocommerce-js a.button` (0,2,1) and
   Astra's inline `.button` (0,1,0). Fill still means one thing: the green
   is on the buy actions only, and everything secondary is the quiet pill. */
.woocommerce a.button.button,
.woocommerce button.button.button,
.woocommerce input.button.button,
.woocommerce .button.wc-forward,
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce #respond input#submit.button,
.astra-cart-drawer .woocommerce-mini-cart__buttons a.button,
.woocommerce-checkout #payment #place_order{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  min-height:2.75rem;
  padding:0.6875rem 1.25rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font:inherit;
  font-size:var(--text-ui);
  font-weight:600;
  letter-spacing:-0.005em;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  text-shadow:none;
  box-shadow:var(--shadow-1);
  transition-property:background-color,border-color,color,box-shadow,scale;
  transition-duration:150ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1);
}

/* --- primary: the buy actions --- */
.woocommerce a.button.add_to_cart_button,
.woocommerce a.button.ast-on-card-button,
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce .button.checkout-button,
.woocommerce a.button.wc-forward,
.astra-cart-drawer .woocommerce-mini-cart__buttons a.button.checkout,
.woocommerce-checkout #payment #place_order{
  background:var(--brand);
  color:var(--on-brand);
  border-color:transparent;
}
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.button.ast-on-card-button:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce .button.checkout-button:hover,
.woocommerce a.button.wc-forward:hover,
.astra-cart-drawer .woocommerce-mini-cart__buttons a.button.checkout:hover,
.woocommerce-checkout #payment #place_order:hover{
  background:oklch(0.723 0.202 149);
  background:oklch(from var(--brand) calc(l - 0.05) c h);
  color:var(--on-brand);
  box-shadow:var(--shadow-2);
}

/* --- quiet: everything that is not the purchase --- */
.woocommerce a.button.wc-backward,
.woocommerce a.button.ast-continue-shopping,
.woocommerce button.button[name="update_cart"],
.woocommerce button.button[name="apply_coupon"],
.woocommerce .cart .button[name="update_cart"],
.astra-cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout){
  background:var(--bg);
  color:var(--fg);
  border-color:var(--line-strong);
  box-shadow:none;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce a.button.ast-continue-shopping:hover,
.woocommerce button.button[name="update_cart"]:hover,
.woocommerce button.button[name="apply_coupon"]:hover,
.astra-cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout):hover{
  background:var(--surface-2);
  color:var(--fg);
  border-color:var(--fg-muted);
}

/* WooCommerce greys a disabled "update cart" out; keep it legible. */
.woocommerce button.button.button:disabled,
.woocommerce button.button.button:disabled[disabled]{
  background:var(--surface);
  color:var(--fg-muted);
  border-color:var(--line);
  opacity:1;
}

@media (prefers-reduced-motion: no-preference){
  .woocommerce a.button.button:active,
  .woocommerce button.button.button:active{scale:0.97}
}

/* The checkout button is the page's one call to action, so it keeps Woo's
   full-width block treatment, sized on the design's scale. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.checkout-button{
  display:flex;
  width:100%;
  min-height:3.25rem;
  padding:0.875rem 1.5rem;
  font-size:var(--text-body);
  margin-block-end:0;
}

/* ---------- cart and checkout tables ---------------------------------
   `border-collapse:separate` is what makes a radius possible at all, and
   the corners then have to be set on the corner cells: `overflow:hidden`
   on a table element does not clip its own cells reliably. */
.woocommerce table.shop_table,
.woocommerce table.woocommerce-table{
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  /* Woo's own `.woocommerce table.shop_table` ships `margin:0 -1px 24px 0`,
     and only the block margins were ever restated here, so every shop table
     on the site hung 1px past the right edge of its own column. */
  margin-block:0 2rem;
  margin-inline:0;
  font-size:var(--text-ui);
  background:var(--bg);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.woocommerce-table th,
.woocommerce table.woocommerce-table td{
  border:0;
  border-block-start:1px solid var(--line);
  padding:1rem 1.25rem;
  vertical-align:middle;
}
.woocommerce table.shop_table thead th,
.woocommerce table.woocommerce-table thead th{
  border-block-start:0;
  background:var(--surface);
  font-size:var(--text-micro);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-muted);
  padding-block:0.875rem;
}
.woocommerce table.shop_table tbody tr:first-child > *,
.woocommerce table.woocommerce-table tbody tr:first-child > *{
  border-block-start:1px solid var(--line);
}
.woocommerce table.shop_table thead + tbody tr:first-child > *{
  border-block-start:1px solid var(--line);
}
/* --- corners ---
   Scoped through the row group, not `tr:first-child`. A bare `tr:first-child`
   is the first row of *its own* section, so it matched the thead row AND the
   first tbody row, and the table came out with a second rounded box nested
   inside the first. Only the table's outermost two rows get radii. */
.woocommerce table.shop_table > thead:first-child > tr:first-child > *:first-child,
.woocommerce table.shop_table > tbody:first-child > tr:first-child > *:first-child,
.woocommerce table.woocommerce-table > thead:first-child > tr:first-child > *:first-child,
.woocommerce table.woocommerce-table > tbody:first-child > tr:first-child > *:first-child{
  border-start-start-radius:var(--r-lg);
}
.woocommerce table.shop_table > thead:first-child > tr:first-child > *:last-child,
.woocommerce table.shop_table > tbody:first-child > tr:first-child > *:last-child,
.woocommerce table.woocommerce-table > thead:first-child > tr:first-child > *:last-child,
.woocommerce table.woocommerce-table > tbody:first-child > tr:first-child > *:last-child{
  border-start-end-radius:var(--r-lg);
}
.woocommerce table.shop_table > tbody:last-child > tr:last-child > *:first-child,
.woocommerce table.shop_table > tfoot:last-child > tr:last-child > *:first-child,
.woocommerce table.woocommerce-table > tbody:last-child > tr:last-child > *:first-child,
.woocommerce table.woocommerce-table > tfoot:last-child > tr:last-child > *:first-child{
  border-end-start-radius:var(--r-lg);
}
.woocommerce table.shop_table > tbody:last-child > tr:last-child > *:last-child,
.woocommerce table.shop_table > tfoot:last-child > tr:last-child > *:last-child,
.woocommerce table.woocommerce-table > tbody:last-child > tr:last-child > *:last-child,
.woocommerce table.woocommerce-table > tfoot:last-child > tr:last-child > *:last-child{
  border-end-end-radius:var(--r-lg);
}

.woocommerce table.shop_table td.product-name a{
  font-weight:600;
  color:var(--fg);
}
.woocommerce table.shop_table td.product-thumbnail img{
  width:4rem;
  height:4rem;
  object-fit:cover;
  border-radius:var(--r-sm);
}
.woocommerce table.shop_table .amount{
  font-variant-numeric:tabular-nums;
}
.woocommerce table.shop_table td.product-remove a.remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border-radius:var(--r-pill);
  color:var(--fg-muted);
  background:none;
}
.woocommerce table.shop_table td.product-remove a.remove:hover{
  background:var(--surface-2);
  color:var(--fg);
}
.woocommerce table.shop_table td.actions{
  background:var(--surface);
  padding-block:1rem;
}
.woocommerce .quantity .qty{
  min-height:2.75rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--bg);
  color:var(--fg);
  font-size:var(--text-ui);
}

/* The totals panel reads as a card, so its own inner table drops the
   second frame it would otherwise draw inside that card. */
.woocommerce .cart_totals,
.woocommerce-checkout-review-order{
  padding:clamp(1.25rem,3vw,1.75rem);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3#order_review_heading{
  font-size:var(--text-h3);
  margin-block:0 1rem;
}
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout-review-order table.shop_table{
  border:0;
  border-radius:0;
  background:none;
  margin-block-end:1.25rem;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td{
  padding-inline:0;
  background:none;
  border-block-start-color:var(--line);
  text-transform:none;
  letter-spacing:normal;
  font-size:var(--text-ui);
}
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td,
.woocommerce-checkout-review-order table.shop_table tfoot tr.order-total th,
.woocommerce-checkout-review-order table.shop_table tfoot tr.order-total td{
  font-size:var(--text-body);
  font-weight:700;
  color:var(--fg);
}

/* Coupon and checkout fields on the same pill/radius scale as the forms
   the rest of the site uses. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container .select2-selection,
.woocommerce .coupon input.input-text{
  min-height:2.75rem;
  padding:0.625rem 0.875rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--bg);
  color:var(--fg);
  font-size:var(--text-body);
}
.woocommerce form .form-row label{
  font-size:var(--text-ui);
  font-weight:600;
  color:var(--fg);
}
.woocommerce form.checkout_coupon,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #payment{
  border-radius:var(--r-lg);
}
.woocommerce-checkout #payment{
  background:var(--surface);
}
.woocommerce-checkout #payment div.payment_box{
  border-radius:var(--r-md);
  background:var(--bg);
}
.woocommerce-checkout #payment div.payment_box::before{
  border-block-end-color:var(--bg);
}

/* --- the stacked table WooCommerce switches to on a phone ---
   Each row becomes its own card, so the row is what carries the radius
   and the frame; the table itself steps out of the way. */
@media (max-width:48rem){
  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody{
    border:0;
    background:none;
    display:block;
  }
  /* The corner rules above round the table's outermost cells. In this stacked
     layout the row itself is the card and carries the radius, so the cells
     must not. Tripling the class and naming the row group clears those rules'
     (0,5,3) rather than reaching for !important; keep both counts ahead of
     them if the corner selectors are ever touched again. */
  .woocommerce table.shop_table_responsive.shop_table_responsive.shop_table_responsive tbody tr > *:first-child,
  .woocommerce table.shop_table_responsive.shop_table_responsive.shop_table_responsive tbody tr > *:last-child,
  .woocommerce table.shop_table_responsive.shop_table_responsive.shop_table_responsive thead tr > *:first-child,
  .woocommerce table.shop_table_responsive.shop_table_responsive.shop_table_responsive thead tr > *:last-child{
    border-radius:0;
  }
  .woocommerce table.shop_table_responsive tr{
    display:block;
    margin-block-end:0.75rem;
    padding:0.25rem 0.875rem;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:var(--bg);
  }
  .woocommerce table.shop_table_responsive tr td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding-inline:0;
    border-block-start:0;
    border-radius:0;
    text-align:end;
  }
  .woocommerce table.shop_table_responsive tr td + td{
    border-block-start:1px solid var(--line);
  }
  .woocommerce table.shop_table_responsive tr td::before{
    font-size:var(--text-micro);
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--fg-muted);
  }
  .woocommerce table.shop_table_responsive tr td.actions{
    display:block;
    background:none;
  }

  /* WooCommerce turns every cell into its own labelled row, which spends a
     full-width row and a divider each on the remove control and the
     thumbnail, two cells that carry no label. Lift the remove into the
     card's corner and let the photo open the card instead. */
  .woocommerce table.shop_table_responsive tr.cart_item{
    position:relative;
    padding-block:0.875rem;
  }
  .woocommerce table.shop_table_responsive tr.cart_item td.product-remove{
    position:absolute;
    inset-block-start:0.75rem;
    inset-inline-end:0.75rem;
    display:block;
    width:auto;
    padding:0;
    border-block-start:0;
  }
  .woocommerce table.shop_table_responsive tr.cart_item td.product-thumbnail{
    display:block;
    border-block-start:0;
    padding-block:0 0.875rem;
  }
  .woocommerce table.shop_table_responsive tr.cart_item td.product-thumbnail::before{
    content:none;
  }
  .woocommerce table.shop_table td.product-thumbnail img{
    width:5rem;
    height:5rem;
  }
}

/* ---------- the landing page's shop block ---------------------------
   The grid is inside an Elementor container, which has no
   `.entry-content` around it, so the shared list resets do not reach it. */
.e-con .ifix-products.ifix-products{
  padding-inline-start:0;
  margin-inline-start:0;
}
.entry-content .ifix-products.ifix-products{
  padding-inline-start:0;
  margin-inline-start:0;
  list-style:none;
}
.woocommerce ul.products.ifix-products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));
  gap:clamp(1rem,2.5vw,1.5rem);
  margin-block:0;
  list-style:none;
}
.woocommerce ul.products.ifix-products li.product{
  width:auto;
  max-width:none;
  margin:0;
  float:none;
}

/* The landing page's shop block: Elementor's container padding and margins
   are stripped the same way every other design container's are. */
.e-con.shop-cta-row{
  /* Not flexbox: Elementor's container is a flex column at a weight this
     cannot reach, and it stretches the button widget to the full track
     width, so there is only ever one item on the line and nothing for
     justify-content to centre. text-align reaches the inline-block button
     inside the widget, which is the thing that actually needs centring. */
  text-align:center;
  padding:0;
  margin-block:clamp(1.75rem,3.5vw,2.5rem) 0;
}

/* Cart, checkout and Minu konto keep Astra's own page title, but it arrived
   centred inside a 704px box while the content below ran the full 75rem
   column, so the H1 sat 250px right of the table under it. Same column, same
   left edge, same size as every other page's H1. The shop archive is not
   covered here and does not need to be: it uses WooCommerce's own
   `.woocommerce-products-header` instead of Astra's entry header. */
.woocommerce-page:not(.single-product) .entry-header{
  max-width:calc(75rem + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.woocommerce-page:not(.single-product) .entry-header .entry-title{
  max-width:none;
  text-align:start;
  font-size:var(--text-h1);
  line-height:1.08;
  letter-spacing:-0.02em;
}
/* Astra's title-enabled pages carry a flat 60px above the content on wide
   screens. On a shop page that reads as a dead band above the heading. */
.woocommerce-page .ast-plain-container.ast-no-sidebar #primary{
  margin-block-start:clamp(2rem, 4vw, 3rem);
}
/* --- cart drawer buttons, at Astra's own weight ---
   Astra colours the flyout's two buttons from its own dynamic CSS at
   (0,5,1) for `a.checkout` and (0,7,0) for everything else in that row,
   both of which outrank the WooCommerce button block above, so both came
   out filled with --ast-global-color-0. Restated here one class heavier.
   The meaning is the same as everywhere else on the site: the green fill
   is on the one action that continues to checkout, nothing else. */
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons a.button.checkout{
  background:var(--brand);
  border-color:transparent;
  color:var(--on-brand);
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons a.button.checkout:hover{
  background:oklch(0.723 0.202 149);
  background:oklch(from var(--brand) calc(l - 0.05) c h);
  border-color:transparent;
  color:var(--on-brand);
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons a.button.button:not(.checkout),
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons a.button.button.ast-continue-shopping{
  background:var(--bg);
  /* Astra zeroes the border width on these at a weight the block above
     cannot reach, so the quiet button needs its outline restated here or
     it reads as plain text. */
  border-width:1px;
  border-style:solid;
  border-color:var(--line-strong);
  color:var(--fg);
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons a.button.button:not(.checkout):hover,
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons a.button.button.ast-continue-shopping:hover{
  background:var(--surface-2);
  border-color:var(--fg-muted);
  color:var(--fg);
}

/* Product names in the drawer are titles, not body copy, and the remove
   control is absolutely positioned over the row's right edge, so the row
   has to leave it room. */
.astra-cart-drawer .woocommerce-mini-cart a,
.astra-cart-drawer .woocommerce-mini-cart a:hover{
  text-decoration:none;
}
.astra-cart-drawer .woocommerce-mini-cart-item{
  padding-inline-end:2rem;
}
.astra-cart-drawer .woocommerce-mini-cart-item > a:not(.remove){
  font-weight:600;
  color:var(--fg);
}
.astra-cart-drawer .woocommerce-mini-cart-item .quantity{
  color:var(--fg-muted);
  font-variant-numeric:tabular-nums;
}
/* WooCommerce prints a glyph from its own icon font in front of every
   notice. The font is not loaded on this site, so each notice opened with a
   tofu box. The panel treatment above is the affordance now, so the glyph
   goes rather than the font being enqueued for one character. */
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-error::before{
  content:none;
}
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error{
  padding-inline-start:1.5rem;
}

/* The review table sits inside a --surface card, so its header row cannot
   also be --surface: it would be invisible. A hairline does the job. */
.woocommerce-checkout-review-order table.shop_table thead th{
  background:none;
  border-block-end:1px solid var(--line);
}

/* ==========================================================
   E-SHOP, ROUND 2 (2026-08-28)
   Less green in the header, the two-price block, and the
   product page's own rhythm.
   ========================================================== */

/* ---------- header: one filled control, not three ----------
   The bar carried a green CTA, a green-outlined cart and a dark-green count
   badge, which read as three competing accents in one corner. The CTA drops
   to the same quiet pill the cart already uses, and the badge takes the
   button green so the one saturated mark in the header is the item count. */
.ast-header-button-1 .ast-custom-button{
  background:var(--bg);
  color:var(--fg);
  border-color:var(--line-strong);
  box-shadow:none;
}
.ast-header-button-1 .ast-custom-button:hover{
  background:var(--surface-2);
  color:var(--fg);
  border-color:var(--fg-muted);
  box-shadow:none;
}
#masthead .ast-site-header-cart .astra-icon::after{
  background:var(--brand);
  color:var(--on-brand);
}

/* The two pins beside the wordmark are part of the logo lockup, not an
   accent. In green they read as a third brand mark competing with the "i". */
.nav-places svg{
  color:var(--fg-muted);
}

/* ---------- breadcrumb ----------
   A trail under the header, not body copy. The links are already the only
   things in the row that are not plain text. */
.ast-woocommerce-container > .woocommerce-breadcrumb a,
.ast-woocommerce-container > .woocommerce-breadcrumb a:hover{
  text-decoration:none;
}
.ast-woocommerce-container > .woocommerce-breadcrumb a:hover{
  color:var(--fg);
}

/* ---------- the two prices ----------
   Online price leads and carries the weight; the counter price sits beside
   it in --fg-muted. No strike-through: it is not a price that expired, it is
   the price in the shops, and a struck figure would say the opposite. */
.ifix-price{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:0.5rem clamp(1.25rem,3vw,2.25rem);
}
.ifix-price__col{
  display:flex;
  flex-direction:column;
  gap:0.1875rem;
  min-width:0;
}
.ifix-price__label{
  font-size:var(--text-micro);
  font-weight:700;
  line-height:1.18;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.ifix-price__value{
  font-size:var(--text-stat);
  font-weight:700;
  line-height:1.1;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.ifix-price__col--store .ifix-price__value{
  color:var(--fg-muted);
  font-weight:600;
}
/* WooCommerce wraps every figure in `.amount`, and its own `del`/`ins`
   treatment is not in play here, but Astra colours `.amount` on its own. */
.ifix-price .amount{
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
  text-decoration:none;
}

/* In a product card the pair has to stay on one line's worth of vertical
   space, so it steps down a size. The cross-sell row used to share this and
   no longer does: it renders the e-shop price alone. */
.woocommerce ul.products li.product .ifix-price__value{
  font-size:var(--text-body);
}
.woocommerce ul.products li.product .ifix-price{
  gap:0.375rem 1rem;
}

/* ---------- single product: breathing room ----------
   Woo gives `form.cart` no bottom margin, so the badges ran straight into
   whatever followed them, and the badges themselves sat tight under the
   button. */
.ifix-trust{
  margin-block-start:1.75rem;
}
.single-product div.product form.cart{
  margin-block-end:2rem;
}
.single-product div.product .summary > *:last-child{
  margin-block-end:0;
}

/* ---------- description ----------
   A section with a real heading, replacing WooCommerce's one-tab strip. Its
   body lines up on the content column's own left edge: the tab panel used to
   indent it, which put the text out of line with the gallery above it. */
.ifix-description{
  margin-block-start:clamp(2.5rem,5vw,3.5rem);
  padding-block-start:clamp(2rem,4vw,2.75rem);
  border-block-start:1px solid var(--line);
}
.ifix-description > h2{
  font-size:var(--text-h2);
  line-height:1.15;
  letter-spacing:-0.015em;
  margin-block:0 1.25rem;
}
.ifix-description__body{
  max-width:46rem;
}
.ifix-description__body > *:first-child{
  margin-block-start:0;
}
.ifix-description__body > *:last-child{
  margin-block-end:0;
}
.ifix-description__body p{
  font-size:var(--text-body);
  line-height:1.6;
  margin-block:0 1rem;
}


/* ==========================================================
   E-SHOP, ROUND 3 (2026-08-28)
   Product page layout (sticky summary, description under the
   gallery), the spec panel, header button alignment, and the
   two WooCommerce rules that were still winning on the cart.
   ========================================================== */

/* ---------- header: two controls, one box ----------
   The cart came out 52px tall starting at y=11 and the CTA 47px starting at
   y=17, because Astra's own customizer padding (15px/30px) outranks the
   button rule further up this file. An id beats it, and an explicit height
   on both is what actually guarantees they match rather than nearly match. */
#masthead .ast-header-button-1 .ast-custom-button,
#masthead .ast-site-header-cart .ast-site-header-cart-li > a.cart-container{
  height:2.75rem;
  min-height:2.75rem;
  padding-block:0;
  line-height:1;
}
#masthead .ast-header-button-1 .ast-custom-button{
  padding-inline:1.375rem;
}
#masthead .ast-site-header-cart .ast-site-header-cart-li > a.cart-container{
  padding-inline:0.875rem;
}
/* Astra leaves this wrapper a block with `line-height:80px`, so the pill
   inside it was laid out on a text baseline and sat 3px above the CTA beside
   it. Making it a flex box takes the baseline out of the equation. */
#masthead .ast-site-header-cart .ast-site-header-cart-li{
  display:flex;
  align-items:center;
  line-height:1;
}

/* ---------- single product ---------- */

/* The breadcrumb sat 56px above the gallery: its own margin plus the empty
   notices wrapper WooCommerce prints on every load. */
.ast-woocommerce-container > .woocommerce-breadcrumb{
  margin-block-end:1.125rem;
}
.single-product .woocommerce-notices-wrapper:not(:has(*)){
  display:none;
}
.single-product div.product{
  margin-block-start:0;
}

.single-product .summary .product_title{
  font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  line-height:1.15;
  letter-spacing:-0.015em;
  margin-block:0 0.875rem;
}

/* One notch down from --text-stat: beside a 32px title, 36px prices read as
   the loudest thing on the page. The clamp tracks the title's own clamp, whose
   floor is 1.5rem: a flat 1.75rem here made the price *larger* than the
   product name on a phone. */
.ifix-price__value{
  font-size:clamp(1.375rem, 1.05rem + 0.9vw, 1.75rem);
}
.single-product .summary .price{
  font-size:clamp(1.375rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight:700;
  color:var(--fg);
  margin-block:0 1.25rem;
}

/* --- the spec panel ---
   Was two hairlines top and bottom, which cut the column into strips. A
   --surface bubble groups the same rows without drawing a single line. */
.ifix-specs{
  margin-block:0 1.5rem;
  padding:1.125rem 1.25rem;
  border:0;
  border-radius:var(--r-lg);
  background:var(--surface);
  row-gap:0.625rem;
}

/* --- trust badges ---
   Three even columns, each stacking its icon over its label and centred, so
   the row reads as three equal promises rather than a wrapped sentence. */
.ifix-trust{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0.75rem 0.5rem;
  margin-block-start:1.75rem;
}
.ifix-trust li{
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0.5rem;
  text-align:center;
}
.ifix-trust svg{
  width:1.5rem;
  height:1.5rem;
}

/* --- the two-column product layout ---
   WooCommerce floats the gallery left and the summary right, which leaves
   anything after them (the description) flowing behind both. A grid puts the
   description in the gallery's own column, which is what makes the summary
   free to stick: it spans both rows, so it stays in view for the whole
   length of the description while the photos and the text scroll past it.

   The min-height guard matters: a summary taller than the viewport cannot be
   scrolled to the bottom once it is stuck, so below that height it goes back
   to scrolling with the page. */
@media (min-width:56.0625rem){
  .single-product div.product{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 0.92fr);
    column-gap:clamp(2rem, 4vw, 3.5rem);
    align-items:start;
  }
  .single-product div.product > .woocommerce-product-gallery{
    grid-column:1;
    grid-row:1;
  }
  .single-product div.product > .summary{
    grid-column:2;
    grid-row:1 / span 2;
  }
  /* The float and the percentage width have to come off, and both are set by
     Astra's inline CSS at (1,4,2):
     `.woocommerce #content .ast-woocommerce-container div.product div.images`.
     An id outranks any number of classes, so the override has to carry one
     too; the doubled class then clears it on class count. Inside the grid the
     track is what sizes these, so the widths are simply released. */
  .single-product #content .ast-woocommerce-container div.product > div.woocommerce-product-gallery.woocommerce-product-gallery,
  .single-product #content .ast-woocommerce-container div.product > div.summary.summary{
    float:none;
    width:auto;
    margin:0;
  }
  .single-product div.product > .ifix-description{
    grid-column:1;
    grid-row:2;
  }
  /* Related and up-sell rows are their own full-width band under both. */
  .single-product div.product > .related,
  .single-product div.product > .up-sells{
    grid-column:1 / -1;
    grid-row:3;
  }
}

@media (min-width:56.0625rem) and (min-height:44rem){
  .single-product div.product > .summary{
    position:sticky;
    /* Astra's header is sticky at 80px, so the offset clears it. */
    inset-block-start:calc(5rem + 1.5rem);
  }
}

/* The description now sits in the gallery's column, so it no longer needs a
   reading measure of its own, and the rule above it would draw across only
   half the page. */
.ifix-description{
  border-block-start:0;
  padding-block-start:0;
  margin-block-start:clamp(2rem, 4vw, 2.75rem);
}
.ifix-description__body{
  max-width:none;
}

/* ---------- product cards ----------
   The category label was competing with the product name: an all-caps label
   at 13px next to a 15px title reads as the heading. Label down, name up. */
.woocommerce ul.products li.product .ast-woo-product-category{
  font-size:0.6875rem;
  letter-spacing:0.07em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:var(--text-body);
  font-weight:600;
  line-height:1.3;
}

/* ---------- cart ----------
   Two WooCommerce rules were still winning here. The table's own radius went
   to `.woocommerce-js .woocommerce table.shop_table` (0,3,1), which left a
   square 1px frame drawn around rounded corner cells; the totals panel's
   padding went to `.woocommerce-cart .cart-collaterals .cart_totals` (0,3,0),
   which is why the card had a radius but no inset. Both are restated one
   class heavier than the rule that was beating them. */
.woocommerce table.shop_table.shop_table.shop_table,
.woocommerce table.woocommerce-table.woocommerce-table.woocommerce-table{
  border-radius:var(--r-lg);
}
.woocommerce-cart .cart-collaterals .cart_totals.cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order.woocommerce-checkout-review-order{
  padding:clamp(1.25rem, 3vw, 1.75rem);
  border-radius:var(--r-lg);
}
/* The panel already frames the totals, so the table inside keeps no radius
   of its own to fight with. */
.woocommerce .cart_totals table.shop_table.shop_table.shop_table,
.woocommerce-checkout-review-order table.shop_table.shop_table.shop_table{
  border-radius:0;
}

/* Cross-sells sit in the same collaterals row as the totals and render as an
   ordinary product grid, so they take the card treatment and a heading that
   matches the panel beside them. */
.woocommerce .cross-sells > h2{
  font-size:var(--text-h3);
  margin-block:0 1.25rem;
}

/* ---------- storefront group cards ----------
   Astra hangs a bottom margin on every h3 inside the content, and flexbox
   centres the *margin* box, so the heading sat visibly above the middle of
   its icon tile. */
.shop-group__head h3,
.ifix-mega__head h3{
  margin:0;
}
.shop-group__head,
.ifix-mega__head{
  align-items:center;
}

/* The category grid now opens the storefront, directly under the hero. */
.shop-section--lead{
  margin-block-start:clamp(2.5rem, 5vw, 3.5rem);
}


/* ========================================================
   Shop pages, final pass (2026-08-28)
   Header-to-content gap, product-summary rhythm, full-width
   card buttons, and the two cart panels.
   ======================================================= */

/* ---------- one gap under the header on every shop page ----------
   The three shop pages opened three different distances under the
   header: the product page 60px (Astra's inline dynamic
   `.ast-plain-container.ast-no-sidebar #primary{margin-top:60px}` over
   1200px, (1,2,0)), the category archive 68px (Astra's own
   `#primary{margin:4em 0}`) and the cart 124px, because the cart also
   has an `.entry-header` and this sheet gives that
   `clamp(2.5rem, 5vw, 4rem)` on top. One value now. The first selector
   carries three classes so it clears the inline rule on class count.
   Scoped to `.woocommerce-page` on purpose: the E-pood storefront
   (page 21) is a normal page with a `.page-hero` and does *not* carry
   that body class, so its own `:has(.page-hero)` rule still owns it. */
.woocommerce-page.ast-plain-container.ast-no-sidebar #primary,
.woocommerce-page.ast-plain-container #primary,
.woocommerce-page #primary{
  margin-block-start:2.5rem;
}

/* The cart, checkout and account pages print a title instead of a
   breadcrumb, and `.entry-header` carries its own top margin on top of
   `#primary`'s. One gap, not two. */
.woocommerce-page .entry-header{
  margin-block-start:0;
}

/* ---------- product summary: title, price, spec panel ----------
   Woo's own `.woocommerce-js div.product .product_title` (0,3,1) and
   `.woocommerce-js div.product p.price` (0,3,2) were still setting
   these margins over this sheet's (0,3,0) rules further up -- `div.product`
   and `p.price` are each a class *and* a type, which is easy to miscount
   as two classes. The visible symptom was a 0.2em gap between the price
   and the spec panel. Doubling the last class clears both. */
.single-product .summary .product_title.product_title{
  margin-block-end:1.25rem;
}
.single-product .summary .price.price{
  margin-block-end:1.75rem;
}
.single-product .summary .ifix-specs{
  margin-block-end:1.75rem;
}

/* ---------- the add-to-cart row ----------
   Woo floats `.quantity` left and leaves the button at its content
   width, which made the primary action on the page 140px wide beside a
   number field. A flex row lets it take the rest of the column. The
   bundle checkbox and the trust badges sit inside the same form -- that
   is what makes the one-click bundle work -- so they are pinned to
   their own full-width lines. */
.single-product div.product form.cart{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.75rem;
}
.single-product div.product form.cart > .ifix-bundle{
  flex:0 0 100%;
  margin-block:0 0.5rem;
}
.single-product div.product form.cart > .ifix-trust{
  flex:0 0 100%;
  margin-block-start:0.75rem;
}
/* Woo's own `.woocommerce-js div.product form.cart div.quantity` is (0,4,3)
   -- `div.product`, `form.cart` and `div.quantity` are each a class *and* a
   type -- and its 1em right margin was holding the button 17px short of the
   column's right edge. Doubling the class clears it. The button's own 15px
   bottom margin goes for the same reason: the row spaces itself with `gap`. */
.single-product div.product form.cart div.quantity.quantity{
  flex:0 0 auto;
  float:none;
  margin:0;
}
.single-product div.product form.cart .button.single_add_to_cart_button.single_add_to_cart_button{
  flex:1 1 12rem;
  margin:0;
}

/* ---------- product cards: one full-width action ----------
   The card button was 140px inside a 261px card, ending nowhere near
   any other edge in the grid. One full-width action per card, on the
   archive, the storefront and the landing block alike. */
.woocommerce ul.products li.product a.button.add_to_cart_button:not(.ast-on-card-button),
.woocommerce ul.products li.product a.button.product_type_variable:not(.ast-on-card-button),
.woocommerce ul.products li.product a.button.added_to_cart{
  display:flex;
  width:100%;
  margin-block-start:0.75rem;
}

/* ---------- the two cart panels ----------
   Astra draws both collaterals as a bordered square box with a tinted
   `<h2>` bar bled to its edges:
   `.woocommerce-cart .cart-collaterals .cart_totals, ... .cross-sells`
   (0,3,0) and `... > h2` (0,3,1). The totals panel had already been
   given this site's rounded `--surface` card, which left its heading
   sitting in a second, slightly different grey band, and the
   cross-sells box beside it kept the square border. Both are one card
   now, and the heading is just a heading. */
.woocommerce-cart .cart-collaterals .cross-sells.cross-sells{
  padding:clamp(1.25rem, 3vw, 1.75rem);
  border:0;
  border-radius:var(--r-lg);
  background:var(--surface);
  margin-block-end:2rem;
}
.woocommerce-cart .cart-collaterals .cart_totals.cart_totals{
  border:0;
}
.woocommerce-cart .cart-collaterals .cart_totals.cart_totals > h2,
.woocommerce-cart .cart-collaterals .cross-sells.cross-sells > h2{
  margin:0 0 1rem;
  padding:0;
  border:0;
  background:none;
  font-size:var(--text-h3);
}

/* ==========================================================
   Brand groups, the notice row, and two [hidden] slips
   (2026-08-28)
   ========================================================== */

/* ---------- the empty state was never hidden ----------
   `.ifix-pc__empty` sets `display:flex`, and any author `display` beats the
   UA's `[hidden]{display:none}` no matter how weak its selector. So the
   "Otsingule ei vastanud ükski mudel" hint rendered under every brand's model
   list, with the `hidden` attribute sitting right there on the element saying
   otherwise. Every other togglable part of this module already carries its
   own `[hidden]` rule; this one was missed. */
.ifix-pc__empty[hidden]{display:none}

/* ---------- brand tiles, one group per device family ----------
   The label is the quiet uppercase micro-label this sheet already uses for
   the shop's price labels and table heads: it names the group without
   competing with the panel's own h3 two lines above it. */
.ifix-pc__group-title{
  margin:0 0 0.625rem;
  font-size:var(--text-micro);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-muted);
}

/* No prices yet. The tile is an outline rather than a filled card so the
   group reads as "these exist, ask us" and not as a row of dead buttons,
   and the logo comes up to full strength on hover like a real tile. */
.ifix-pc__brand--soon{
  background:none;
  border:1px dashed var(--line-strong);
  text-decoration:none;
}
.ifix-pc__brand--soon:hover{
  background:var(--bg);
  border-color:transparent;
}
.ifix-pc__brand--soon .ifix-pc__brand-logo{
  opacity:0.55;
  transition:opacity 0.15s ease;
}
.ifix-pc__brand--soon:hover .ifix-pc__brand-logo{
  opacity:1;
}
.ifix-pc__brand--soon .ifix-pc__brand-count{
  color:var(--brand-ink);
}

/* ---------- the add-to-cart notice ----------
   Woo prints the button first in the source and floats it right, which left
   it and the message on two different baselines inside a tall box. A flex
   row centres them against each other; `order` puts the button back on the
   right without touching the markup, and the message is an anonymous flex
   item (a bare text node), which is exactly why the button is the one that
   has to move. Not applied to `.woocommerce-error`: that one is a `<ul>`,
   and a flex row would lay its messages out side by side. */
/* Scoped to notices that actually carry a button. The coupon toggle is a
   sentence with a link in it, and `justify-content:space-between` pushed the
   question and the link to opposite ends of the panel. */
.woocommerce .woocommerce-message:has(> .button),
.woocommerce .woocommerce-info:has(> .button),
.woocommerce-page .woocommerce-message:has(> .button),
.woocommerce-page .woocommerce-info:has(> .button){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem 1.5rem;
}
.woocommerce .woocommerce-message > .button,
.woocommerce .woocommerce-info > .button,
.woocommerce-page .woocommerce-message > .button,
.woocommerce-page .woocommerce-info > .button{
  order:2;
  flex:none;
  float:none;
  margin:0;
}


/* ---------- cross-sell row: the cart mark ----------
   The row is a `<label>`, so this sits inside the checkbox's own hit
   area and clicking it ticks the box. It is not a second control and
   deliberately not a `<button>`: the one-click bundle works by posting
   with the form's own add-to-cart submit, and a real button here would
   either submit the form early or do nothing at all. It fills in when
   the box is checked, which is the whole feedback the row needs. */
.ifix-bundle__mark{
  flex:none;
  margin-inline-start:auto;
  display:grid;
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:var(--r-pill);
  background:var(--brand-wash);
  color:var(--brand-ink);
  transition:background-color 150ms cubic-bezier(0.2,0,0,1), color 150ms cubic-bezier(0.2,0,0,1);
}
.ifix-bundle__mark svg{
  width:1.125rem;
  height:1.125rem;
}
.ifix-bundle__item:has(.ifix-bundle__check:checked) .ifix-bundle__mark{
  background:var(--brand);
  color:var(--on-brand);
}
@media (prefers-reduced-motion: reduce){
  .ifix-bundle__mark{transition:none}
}

/* ---------- single product: the newest products, under everything ----------
   `.ifix-latest` sits outside `div.product`, so it already has the full
   content column. A hairline is the section boundary: the description above
   it dropped its own rule, and without one the grid reads as part of the
   description's body. */
.ifix-latest{
  margin-block-start:clamp(3rem, 6vw, 4.5rem);
  padding-block-start:clamp(2.5rem, 5vw, 3.5rem);
  border-block-start:1px solid var(--line);
}
.ifix-latest .section-head{
  margin-block-end:clamp(1.75rem, 3.5vw, 2.5rem);
}
.ifix-latest .section-head h2{
  font-size:var(--text-h2);
}

/* `.section-head p` (0,1,1) is the section *lead*, and it was quietly
   restyling the eyebrow paragraph above the heading: --text-lead instead of
   --text-micro, --fg-muted instead of --brand-ink, plus a top margin an
   eyebrow has no use for. Doubling the class clears it. The landing page
   never showed this because Elementor's own markup is matched by
   `.e-con .section-head .eyebrow p.elementor-heading-title` (0,4,1), which
   outranks both -- the storefront's plain `<p class="eyebrow">` was the one
   place the lead rule won. */
.eyebrow.eyebrow{
  font-size:var(--text-micro);
  color:var(--brand-ink);
  margin-block-start:0;
}

/* ==========================================================
   Checkout: the coupon card, the consent boxes, and the
   order panel's borders (2026-08-28)
   ========================================================== */

/* ---------- the coupon prompt and its form, one card ----------
   `.ifix-coupon` (the PHP wrapper) carries the panel now, so the form the
   notice toggles opens *inside* it instead of dropping out underneath. The
   notice and the form both give up their own box. */
.ifix-coupon{
  margin-block-end:clamp(1.5rem, 3vw, 2rem);
  padding:clamp(1.125rem, 2.5vw, 1.5rem);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.ifix-coupon .woocommerce-form-coupon-toggle{
  margin:0;
}
.ifix-coupon .woocommerce-info{
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
}
.ifix-coupon form.checkout_coupon.woocommerce-form-coupon{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.75rem;
  margin:1rem 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
}
.ifix-coupon form.checkout_coupon .form-row{
  float:none;
  width:auto;
  margin:0;
  padding:0;
}
.ifix-coupon form.checkout_coupon .form-row-first{
  flex:1 1 12rem;
}
/* Woo's float clearer; there are no floats left to clear. */
.ifix-coupon form.checkout_coupon .clear{
  display:none;
}

/* ---------- consent boxes above "Esita tellimus" ---------- */
.ifix-consent{
  display:flex;
  flex-direction:column;
  gap:0.625rem;
  margin-block:0 1.25rem;
}
/* `woocommerce_review_order_before_submit` fires *inside* WooCommerce's own
   `.form-row.place-order`, so every rule Woo writes for checkout field labels
   reaches these rows: `.woocommerce form .form-row label` (0,2,1) was forcing
   `display:block` (killing the flex row, and with it the gap between the box
   and its text) and `.woocommerce-js form .form-row label` was making them
   bold 0.9rem at line-height 2. Three classes clears both. */
.woocommerce .ifix-consent .ifix-consent__row{
  display:flex;
  align-items:flex-start;
  gap:0.625rem;
  cursor:pointer;
  font-size:var(--text-ui);
  font-weight:400;
  line-height:1.45;
}
.woocommerce .ifix-consent .ifix-consent__check{
  flex:none;
  width:1.125rem;
  height:1.125rem;
  margin:0.1875rem 0 0;
  accent-color:var(--fg);
}
.ifix-consent__text a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-underline-offset:0.2em;
}
.ifix-consent__text a:hover{
  text-decoration-color:currentColor;
}
/* No colour here on purpose: `.woocommerce form .form-row label .required`
   already paints these, and the block renders inside `.form-row.place-order`,
   so the asterisk matches the billing fields' one for free. This only clears
   the UA's dotted underline on `abbr[title]`. */
.ifix-consent .required{
  border:0;
  text-decoration:none;
}

/* ---------- "Sinu tellimus": one card, not a box inside a box ----------
   Astra draws a 2px square border across the heading and the panel from two
   inline dynamic rules, each at **(2,1,1)**:
   `form #order_review_heading:not(.elementor-widget-woocommerce-checkout-page
   #order_review_heading)` and the same shape for `#order_review`. The `:not()`
   argument contributes its own (1,1,0), which is what makes them so heavy --
   an ordinary three-class rule never had a chance, and this sheet's rounded
   `--surface` panel was being drawn *inside* that square frame with its
   corners cut off. Astra's `padding:0 2em` was also winning, which is why the
   table sat flush against the panel's top edge.

   Beating (2,1,1) needs two ids: `#primary` is the outer one. The heading and
   the panel are separate elements that touch, so the radius is split between
   them and they read as one card, the way the cart's totals panel does. */
#primary .woocommerce form #order_review_heading{
  margin:0;
  padding:clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) 0;
  border:0;
  background:var(--surface);
  border-start-start-radius:var(--r-lg);
  border-start-end-radius:var(--r-lg);
}
#primary .woocommerce form #order_review{
  padding:1rem clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
  border:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--surface);
}

/* ============================================================
   PROMO SLIDER  (.ifix-promo)
   Seasonal campaigns, rendered by [ifix_promo_slider] from the
   sandbox module of the same name. Full size sits under the landing
   hero, the --compact variant sits inside the E-pood content column.

   The peek is the point: the active slide holds the middle and its
   neighbours show a strip on both sides, so the section reads as a
   rail you can move rather than a banner that changes on its own.

   GEOMETRY, and the trap. The peek comes from the track's own inline
   padding, and each slide is flex-basis:100% of the track's CONTENT
   box. Sizing the slide as a percentage of the section instead is
   circular (padding depends on slide width, slide width on padding)
   and collapses the track. --promo-pad carries a percentage that
   resolves against .ifix-promo__viewport in both places it is used,
   the track's padding and the arrows' inset, which is what keeps an
   arrow on the active slide's edge at every width.

   Unscoped on purpose: the landing page is Elementor and has no
   .entry-content wrapper, the E-pood page does.
   ============================================================ */
.ifix-promo{
  --promo-peek:clamp(1rem,4.5vw,5rem);
  --promo-gap:clamp(0.75rem,1.5vw,1.25rem);
  --promo-max:84rem;
  /* Phones size the card by ratio, wider screens by an explicit height.
     A max-block-size on an element that also has an aspect-ratio does
     NOT just clamp the height: the cap is transferred back through the
     ratio into a max-width and the card comes out narrower than its own
     slide (576px cap x 16/9 = a 1024px card in a 1126px track). Set one
     of the two, never a ratio plus a height cap. */
  --promo-ratio:4 / 5;
  --promo-h:auto;
  --promo-pad:max(calc(var(--promo-peek) + var(--promo-gap)),calc((100% - var(--promo-max)) / 2));
}
.ifix-promo--compact{
  --promo-peek:clamp(0.75rem,3vw,2.5rem);
  --promo-max:75rem;
  --promo-ratio:1 / 1;
}
@media (min-width:48rem){
  .ifix-promo{--promo-ratio:auto;--promo-h:clamp(23rem,40vw,37rem)}
  .ifix-promo--compact{--promo-ratio:auto;--promo-h:clamp(14rem,30vw,24rem)}
}

/* Inside the content column the section is a child of .entry-content,
   which gives it the shared 75rem cap and gutter but no rhythm. */
.entry-content > .ifix-promo{margin-block:clamp(2.5rem,5vw,3.5rem) 0}

.ifix-promo__viewport{position:relative}

/* Doubled against Astra's .entry-content ul{padding-left:20px} (0,1,1),
   which would otherwise shift the whole track and put the peek off
   centre on every inner page. */
.ifix-promo__track.ifix-promo__track{
  display:flex;
  gap:var(--promo-gap);
  margin:0;
  padding-block:0;
  padding-inline:var(--promo-pad);
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.ifix-promo__track::-webkit-scrollbar{display:none}

.ifix-promo__slide{
  flex:0 0 100%;
  min-width:0;
  margin:0;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}

.ifix-promo .ifix-promo__card{
  position:relative;
  display:block;
  aspect-ratio:var(--promo-ratio);
  block-size:var(--promo-h);
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--shadow-2);
  color:var(--fg);
  text-decoration:none;
  isolation:isolate;
  transition:box-shadow 150ms cubic-bezier(0.2,0,0,1);
}
/* Declares colour and decoration: Astra's a:hover (0,1,1) is the rule
   being beaten, so a bare .ifix-promo__card:hover would tie. */
.ifix-promo a.ifix-promo__card:hover,
.ifix-promo a.ifix-promo__card:focus-visible{
  color:var(--fg);
  text-decoration:none;
  box-shadow:var(--shadow-3);
}
.ifix-promo a.ifix-promo__card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.ifix-promo .ifix-promo__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  border-radius:0;
  transition:scale 400ms cubic-bezier(0.2,0,0,1);
}
.ifix-promo a.ifix-promo__card:hover .ifix-promo__img{scale:1.03}

.ifix-promo__body{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:0.625rem;
  padding:clamp(1.25rem,3vw,2.5rem);
  padding-block-start:clamp(3rem,14%,7rem);
}
/* The scrim is mixed from the ink and paper tokens rather than written
   as a raw rgba, so it tracks the palette. */
.ifix-promo__card--dark .ifix-promo__body{
  background:linear-gradient(to top,
    color-mix(in oklab,var(--fg) 88%,transparent),
    color-mix(in oklab,var(--fg) 50%,transparent) 45%,
    color-mix(in oklab,var(--fg) 0%,transparent));
  color:var(--bg);
}
.ifix-promo__card--light .ifix-promo__body{
  background:linear-gradient(to top,
    color-mix(in oklab,var(--bg) 92%,transparent),
    color-mix(in oklab,var(--bg) 62%,transparent) 45%,
    color-mix(in oklab,var(--bg) 0%,transparent));
  color:var(--fg);
}
/* No photo: the card is the brand wash and the copy is centred in it. */
.ifix-promo .ifix-promo__card--plain{background:var(--brand-wash)}
.ifix-promo__card--plain .ifix-promo__body{
  inset-block:0;
  justify-content:center;
  background:none;
  color:var(--fg);
  padding-block-start:clamp(1.25rem,3vw,2.5rem);
}

.ifix-promo__eyebrow.ifix-promo__eyebrow{
  margin:0;
  font-size:var(--text-micro);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:inherit;
  opacity:0.85;
}
.ifix-promo__card--light .ifix-promo__eyebrow.ifix-promo__eyebrow,
.ifix-promo__card--plain .ifix-promo__eyebrow.ifix-promo__eyebrow{
  color:var(--brand-ink);
  opacity:1;
}

.ifix-promo__title.ifix-promo__title{
  margin:0;
  max-width:20ch;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.5rem);
  line-height:1.12;
  letter-spacing:-0.025em;
  font-weight:680;
  text-wrap:balance;
  color:inherit;
}
.ifix-promo--compact .ifix-promo__title.ifix-promo__title{
  max-width:26ch;
  font-size:clamp(1.25rem,0.95rem + 1.3vw,1.75rem);
}

.ifix-promo__text.ifix-promo__text{
  margin:0;
  max-width:38ch;
  font-size:var(--text-body);
  line-height:1.55;
  color:inherit;
}
.ifix-promo__btn{margin-block-start:0.5rem}
/* The card is the link, so the button inside it never gets :hover of
   its own. */
.ifix-promo a.ifix-promo__card:hover .btn--primary{
  background:oklch(0.723 0.202 149);
  background:oklch(from var(--brand) calc(l - 0.05) c h);
  box-shadow:var(--shadow-2);
}

/* ---------- arrows ---------- */
.ifix-promo .ifix-promo__arrow{
  position:absolute;
  inset-block-start:50%;
  translate:0 -50%;
  z-index:2;
  display:grid;
  place-items:center;
  inline-size:2.75rem;
  block-size:2.75rem;
  padding:0;
  border:0;
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--fg);
  box-shadow:var(--shadow-2);
  cursor:pointer;
  transition:background-color 150ms cubic-bezier(0.2,0,0,1),box-shadow 150ms cubic-bezier(0.2,0,0,1);
}
.ifix-promo .ifix-promo__arrow:hover{
  background:var(--surface-2);
  color:var(--fg);
  box-shadow:var(--shadow-3);
}
.ifix-promo .ifix-promo__arrow:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ifix-promo .ifix-promo__arrow svg{display:block;inline-size:1.25rem;block-size:1.25rem;fill:none}
.ifix-promo .ifix-promo__arrow--prev{inset-inline-start:calc(var(--promo-pad) + clamp(0.5rem,1.2vw,1rem))}
.ifix-promo .ifix-promo__arrow--next{inset-inline-end:calc(var(--promo-pad) + clamp(0.5rem,1.2vw,1rem))}

/* ---------- dots and pause ---------- */
.ifix-promo__nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.5rem;
  margin-block-start:0.25rem;
}
/* 2.75rem wide and 44px tall including the padding: the bar is 4px, the
   target around it is not. */
.ifix-promo .ifix-promo__dot{
  inline-size:2.75rem;
  padding:1.25rem 0;
  border:0;
  background:none;
  line-height:0;
  cursor:pointer;
}
.ifix-promo .ifix-promo__dot::before{
  content:"";
  display:block;
  block-size:0.25rem;
  border-radius:var(--r-pill);
  background:var(--line-strong);
  transition:background-color 150ms cubic-bezier(0.2,0,0,1);
}
.ifix-promo .ifix-promo__dot:hover::before{background:var(--fg-muted)}
.ifix-promo .ifix-promo__dot[aria-current="true"]::before{background:var(--fg)}
.ifix-promo .ifix-promo__dot:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}

.ifix-promo .ifix-promo__play{
  display:grid;
  place-items:center;
  inline-size:2.75rem;
  block-size:2.75rem;
  padding:0;
  border:0;
  border-radius:var(--r-pill);
  background:none;
  color:var(--fg-muted);
  cursor:pointer;
}
.ifix-promo .ifix-promo__play:hover{background:var(--surface-2);color:var(--fg)}
.ifix-promo .ifix-promo__play:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ifix-promo .ifix-promo__play svg{display:block;inline-size:1rem;block-size:1rem}
.ifix-promo .ifix-promo__play .ifix-promo__icon-play{display:none}
.ifix-promo .ifix-promo__play.is-paused .ifix-promo__icon-pause{display:none}
.ifix-promo .ifix-promo__play.is-paused .ifix-promo__icon-play{display:block}

/* The arrows are vertically centred and the copy sits bottom left, so on
   a short card the prev arrow lands straight on the eyebrow. The body's
   leading padding clears the arrow's own width plus its inset. */
@media (min-width:48rem){
  .ifix-promo__body{padding-inline-start:calc(2.75rem + clamp(0.5rem,1.2vw,1rem) + 1.25rem)}
}

@media (max-width:47.99rem){
  .ifix-promo .ifix-promo__arrow{inline-size:2.5rem;block-size:2.5rem}
  .ifix-promo .ifix-promo__arrow svg{inline-size:1.125rem;block-size:1.125rem}
  /* A phone card is mostly copy: the scrim runs about two thirds of its
     height, so a vertically centred arrow lands on the headline. The
     leading-padding trick used above 48rem would cost too much of a
     320px measure, so the arrows move up into the clear photo instead. */
  .ifix-promo .ifix-promo__arrow{inset-block-start:25%}
  .ifix-promo--compact .ifix-promo__text.ifix-promo__text{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ifix-promo__track.ifix-promo__track{scroll-behavior:auto}
  .ifix-promo .ifix-promo__img{transition:none}
  .ifix-promo a.ifix-promo__card:hover .ifix-promo__img{scale:1}
}

@media (forced-colors:active){
  .ifix-promo__body{background:Canvas;color:CanvasText}
  .ifix-promo .ifix-promo__arrow,
  .ifix-promo .ifix-promo__play{border:1px solid ButtonText}
}
/* ==========================================================
   Cart + checkout: the two lists a visitor actually chooses from
   ---------------------------------------------------------
   Shipping methods and payment methods are the only real controls
   inside the grey summary panel, and Woo renders both as a bare
   radio + label pair floating in running text. They are one
   component here: an option is a rounded `--surface-2` card, the
   radio and the label sit on its left, and the carrier / gateway
   logo is pushed to its right edge so every logo in the list lines
   up on one column. The panel itself is `--surface`, so the card
   is the next step down the neutral ramp rather than a border.
   ========================================================== */

/* -- the Saadetis row is a stack, not a table row --------------------
   `<th>Saadetis</th>` goes above its options instead of beside them, so the
   options get the panel's full width and the logos have an edge to align on.

   The trap: a `tr` set to `display:block` inside a table is still wrapped in
   an anonymous table cell, so it lands in column one at ~300px of a 424px
   panel and the change reads as "nothing happened". The row group has to
   leave the table layout with it. Both totals tables are really key/value
   lists, so the whole group becomes flex rows, and the row separator moves
   from the cells onto the `tr` -- with a gap between the two cells, two cell
   borders stop reading as one line. */
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout-review-order table.shop_table{
  display:block;
  width:100%;
}
.woocommerce .cart_totals table.shop_table > thead,
.woocommerce .cart_totals table.shop_table > tbody,
.woocommerce .cart_totals table.shop_table > tfoot,
.woocommerce-checkout-review-order table.shop_table > thead,
.woocommerce-checkout-review-order table.shop_table > tbody,
.woocommerce-checkout-review-order table.shop_table > tfoot{
  display:block;
}
.woocommerce .cart_totals table.shop_table > * > tr,
.woocommerce-checkout-review-order table.shop_table > * > tr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin:0;
  padding:0;
  border:0;
  border-block-start:1px solid var(--line);
  border-radius:0;
  background:none;
}
#primary .woocommerce .cart_totals table.shop_table > * > tr > *,
#primary .woocommerce-checkout-review-order table.shop_table > * > tr > *{
  display:block;
  min-width:0;
  border-block-start:0;
  text-align:start;
}
#primary .woocommerce .cart_totals table.shop_table > * > tr > td,
#primary .woocommerce-checkout-review-order table.shop_table > * > tr > td{
  text-align:end;
}
/* The responsive cart table repeats each cell's `data-title` as a
   pseudo-element label; the `<th>` beside it is that label already. */
.woocommerce .cart_totals table.shop_table > * > tr > td::before,
.woocommerce-checkout-review-order table.shop_table > * > tr > td::before{
  content:none;
}
.woocommerce .cart_totals table.shop_table > * > tr.woocommerce-shipping-totals,
.woocommerce-checkout-review-order table.shop_table > * > tr.woocommerce-shipping-totals{
  display:block;
}
/* The class is doubled because the row-group rules above carry four type
   selectors and would otherwise win the `text-align` back. */
#primary .woocommerce table.shop_table tr.woocommerce-shipping-totals.woocommerce-shipping-totals > th{
  display:block;
  width:auto;
  padding:1rem 0 0.625rem;
  font-weight:600;
  color:var(--fg);
  text-align:start;
}
#primary .woocommerce table.shop_table tr.woocommerce-shipping-totals.woocommerce-shipping-totals > td{
  display:block;
  width:auto;
  padding:0 0 1rem;
  border-block-start:0;
  text-align:start;
}
/* A totals row with a single cell (Montonio's pickup-point picker) is not a
   label/value pair, so it gets the whole width rather than one flex column. */
#primary .woocommerce .cart_totals table.shop_table > * > tr > td:only-child,
#primary .woocommerce-checkout-review-order table.shop_table > * > tr > td:only-child{
  flex:1 1 100%;
  padding-inline:0;
  text-align:start;
}
/* Woo's small-screen sheet right-aligns every responsive `td` with an
   `!important`, which reaches these two through inheritance. A rule on the
   elements themselves beats an inherited value without needing one back. */
#primary .woocommerce tr.woocommerce-shipping-totals .woocommerce-shipping-destination,
#primary .woocommerce tr.woocommerce-shipping-totals .woocommerce-shipping-calculator{
  text-align:start;
}
.woocommerce tr.woocommerce-shipping-totals .woocommerce-shipping-destination{
  margin-block:0.75rem 0;
  font-size:var(--text-ui);
  line-height:1.45;
  color:var(--fg-muted);
}
.woocommerce tr.woocommerce-shipping-totals .shipping-calculator-button{
  font-size:var(--text-ui);
}

/* -- the option list ------------------------------------------------
   The shipping half of every pair below carries two ids and two classes.
   Astra writes `ul#shipping_method li:not(.elementor-widget-woocommerce-cart
   #shipping_method li)` as inline dynamic CSS, and the `:not()` argument
   contributes its own id, so that rule lands at (2,1,3): it kept the radio
   rows on Woo's 22px text-indent hanging indent no matter how many classes
   were stacked on a single-id selector. `#primary` is the second id, and the
   doubled list class carries the class count past it.
   The payment half is scoped through `#payment` to clear Woo's own
   `#payment ul.payment_methods li img` and friends. */
#primary .woocommerce ul#shipping_method.woocommerce-shipping-methods,
.woocommerce-checkout #payment ul.payment_methods{
  display:grid;
  gap:0.5rem;
  margin:0;
  padding:0;
  border:0;
  list-style:none;
}
#primary .woocommerce ul#shipping_method.woocommerce-shipping-methods > li,
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  /* No `gap` here on purpose. Woo's markup leaves whitespace text nodes
     between the radio, the label and the payment box; each one becomes a
     zero-width anonymous flex item that still takes a gap, which left the
     label -- and with it the logo it pushes right -- 10px short of the
     card's own edge on some rows and flush on others. The spacing is a
     margin on the radio instead. */
  width:100%;
  margin:0;
  padding:0.75rem 0.875rem;
  border:0;
  border-radius:var(--r-md);
  background:var(--surface-2);
  text-align:start;
  text-indent:0;
  list-style:none;
  transition:background-color 150ms cubic-bezier(0.2,0,0,1);
}
#primary .woocommerce ul#shipping_method.woocommerce-shipping-methods > li:hover,
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:hover{
  background:var(--bg);
}
/* The chosen option is the one fact this list has to state at a glance;
   the radio alone is a 13px dot inside a 550px column. */
#primary .woocommerce ul#shipping_method.woocommerce-shipping-methods > li:has(> input:checked),
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(> input:checked){
  background:var(--brand-wash);
}
#primary .woocommerce ul#shipping_method.woocommerce-shipping-methods > li > input[type="radio"],
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]{
  flex:none;
  margin:0;
  margin-inline-end:0.625rem;
}
#primary .woocommerce ul#shipping_method.woocommerce-shipping-methods > li > label,
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label{
  /* `0%` basis, not `auto`: the card row's four scheme logos make the label
     wider than a 375px column, and flexbox breaks lines on base sizes before
     it shrinks anything, so an `auto` basis dropped the label under its own
     radio button on a phone. */
  flex:1 1 0%;
  display:flex;
  align-items:center;
  gap:0.75rem;
  min-width:0;
  margin:0;
  padding:0;
  font-size:var(--text-ui);
  font-weight:500;
  line-height:1.35;
  color:var(--fg);
  cursor:pointer;
}
/* Radio, name and price stay on the left; the logo is the only thing on
   the right, so `margin-inline-start:auto` is what does the aligning --
   the label text is a bare text node on the payment rows, i.e. an
   anonymous flex item that cannot take a margin of its own. */
#primary .woocommerce ul#shipping_method.woocommerce-shipping-methods > li > label img,
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label img{
  flex:none;
  margin:0;
  margin-inline-start:auto;
  width:auto;
  height:auto;
  max-height:1.75rem;
  max-width:min(8rem, 38%);
  object-fit:contain;
  box-shadow:none;
}
#primary .woocommerce ul#shipping_method.woocommerce-shipping-methods > li > label .amount{
  font-weight:700;
  color:var(--fg);
}
/* The gateway's own description and forms drop below the label, inside the
   same card. Woo paints this box #efefef from
   `.woocommerce.woocommerce-checkout #payment div.payment_box` (1,3,1), so it
   takes `#primary` to put it back on `--bg`; the card behind it is the
   grouping now, so the little pointer triangle is noise and goes. */
#primary .woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > .payment_box{
  flex:0 0 100%;
  width:100%;
  margin:0.75rem 0 0;
  padding:0.875rem 1rem;
  border-radius:var(--r-sm);
  background:var(--bg);
  font-size:var(--text-ui);
  line-height:1.45;
  color:var(--fg-muted);
}
#primary .woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > .payment_box::before{
  display:none;
}

/* --------------------------------------------------------------------------
   ORDER RECEIVED / VIEW ORDER                                     2026-09-01

   The thank-you page was drawing every block twice. Astra paints the section
   headings themselves as a box -- `#fbfbfb`, a 1px top/left/right border in
   `#dadce0`, square corners -- from
   `.woocommerce-page.woocommerce-checkout .woocommerce-order
    h2.woocommerce-order-details__title` (0,4,1), which is meant to sit flush
   on top of Woo's own square table. This sheet gives the table a rounded
   `--r-lg` card, so the two never met: a square off-palette band, then a
   rounded card starting under it, on the order table and on both address
   columns. The heading is a heading now and the card underneath is the only
   box. One id clears (0,4,1) outright, the way the rest of the shop CSS in
   this sheet beats Astra's WooCommerce rules.
   -------------------------------------------------------------------------- */
#primary .woocommerce h2.woocommerce-order-details__title,
#primary .woocommerce h2.woocommerce-column__title{
  margin:0 0 1rem;
  padding:0;
  border:0;
  background:none;
  font-size:var(--text-h3);
  line-height:1.18;
  color:var(--fg);
}

/* The overview strip (order number / date / total / payment method). Woo
   floats its items and separates them with a dashed rule, and Astra's
   `.entry-content ul{padding-left:20px}` indented the whole row 20px past the
   table below it, so the page opened on two different left edges. Flex row,
   one gap, and the label/value pair takes the micro-label treatment this site
   uses on every other field list. */
#primary .woocommerce ul.order_details{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem 2.5rem;
  margin:0 0 2rem;
  padding:0;
  list-style:none;
}
/* Woo's float clearfix on the same list: with the row laid out as flex, both
   pseudo-elements become flex items and each takes a full column gap, so the
   strip started 40px in and ran 40px past its last field. */
#primary .woocommerce ul.order_details::before,
#primary .woocommerce ul.order_details::after{
  content:none;
}
#primary .woocommerce ul.order_details li{
  float:none;
  margin:0;
  padding:0;
  border:0;
  font-size:var(--text-micro);
  font-weight:700;
  letter-spacing:0.08em;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--fg-muted);
}
#primary .woocommerce ul.order_details li strong{
  display:block;
  margin-block-start:0.375rem;
  font-size:var(--text-body);
  font-weight:700;
  letter-spacing:normal;
  text-transform:none;
  color:var(--fg);
}

/* The value column right-aligns on the table's own edge. The shipping method
   name is the longest string on the page, and with everything left-aligned it
   was the thing deciding where the two columns split -- so the prices ended up
   floating in the middle of the table instead of lining up under KOKKU. */
#primary .woocommerce table.order_details > thead > tr > th.product-total,
#primary .woocommerce table.order_details > tbody > tr > td.product-total,
#primary .woocommerce table.order_details > tfoot > tr > td{
  text-align:end;
}
#primary .woocommerce table.order_details > tfoot > tr > th{
  font-weight:600;
}
/* A cell that is a figure right-aligns; a cell that is a sentence does not --
   the shipping method carries the pickup point's own address, and a note or a
   payment method is prose too. Right-aligned prose wraps ragged-left, which on
   a phone turned the pickup address into four staggered lines. */
#primary .woocommerce table.order_details > tfoot > tr > td:not(:has(> .woocommerce-Price-amount)),
#primary .woocommerce table.order_details > tfoot > tr > td:has(small.shipped_via){
  text-align:start;
}
#primary .woocommerce table.order_details > tfoot > tr > td small.includes_tax,
#primary .woocommerce table.order_details > tfoot > tr > td small.shipped_via{
  color:var(--fg-muted);
}

/* Address columns. Woo draws them as a 1px box with a 2px bottom and right
   border and a 5px radius, and Astra squares that radius off again; neither
   matches anything else on the site. Same rounded `--surface` panel as the
   rest of the shop, and the two columns become a grid so they end on one line
   whatever their height. `.col2-set` ships a float clearfix, and both of its
   pseudo-elements would otherwise become grid items and push the shipping
   address onto a second row. */
#primary .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.5rem;
}
#primary .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses::before,
#primary .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses::after{
  content:none;
}
#primary .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses > .col-1,
#primary .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses > .col-2{
  float:none;
  width:auto;
  margin:0;
}
#primary .woocommerce .woocommerce-customer-details address{
  padding:clamp(1.25rem, 3vw, 1.75rem);
  border:0;
  border-radius:var(--r-lg);
  background:var(--surface);
  font-style:normal;
  font-size:var(--text-body);
  line-height:1.6;
  color:var(--fg);
}
#primary .woocommerce .woocommerce-customer-details address .woocommerce-customer-details--phone,
#primary .woocommerce .woocommerce-customer-details address .woocommerce-customer-details--email{
  margin-block:0.75rem 0;
  color:var(--fg-muted);
}
@media (max-width:48rem){
  #primary .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   ROUND 24 (2026-09-02) - landing "Asukohad" as two cards
   ============================================================ */

/* Each location is now one card: info left, that location page's own
   portrait hero photo right, and a single "Loe rohkem" link into the
   page instead of the call/map pair. The section head goes back to
   the centred banner above both cards, which means every
   `.places-split` rule earlier in this file is dead - the class is
   off container d367c14. `.card` is already a flex column, so the
   phone layout needs no grid of its own; the info|photo split starts
   at 40rem and the two cards sit side by side from 64rem. */
.places--cards{gap:clamp(1.25rem, 3vw, 2rem)}
.place-card{
  padding:clamp(1.125rem, 2.5vw, 1.75rem);
  gap:clamp(1rem, 2.5vw, 1.5rem);
}
.place-card .place-body{padding:0}
.place-card .place-body h3{margin-block-end:0}

/* Label above value with the icon hanging in its own gutter, so a
   narrow card never has to fit a label column and a value column
   side by side. The indent is the icon (1.125rem) plus its 0.5625rem
   gap, which puts the value on the label's own left edge. */
.place-card .place-rows{
  grid-template-columns:1fr;
  row-gap:0;
  margin-block:1.25rem 0;
}
.place-card .place-row > dt{
  font-weight:700;
  color:var(--fg);
  margin-block-start:1.125rem;
}
.place-card .place-row:first-child > dt{margin-block-start:0}
.place-card .place-row > dt svg{color:var(--brand-ink)}
.place-card .place-row > dd{
  margin-block:0;                 /* Astra leaves 1em under every dd */
  padding-inline-start:1.6875rem;
}
.place-card .place-actions{margin-block-start:1.5rem}

/* The photo is the location page's hero portrait, so it keeps that
   3/4 frame. Full width on a phone it would run ~500px tall, hence
   the cap while the card is still a single column. */
.place-card__photo{
  margin:0;
  align-self:center;   /* a `figure{margin:0}` reset beats an auto margin here */
  max-width:16rem;
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;   /* the img stretches to the figure's height, see below */
}
.place-card__photo img{
  display:block;width:100%;
  aspect-ratio:3/4;object-fit:cover;
  outline:1px solid var(--img-outline);outline-offset:-1px;
}
@media (min-width:40rem){
  .place-card{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 0.8fr);
    align-items:stretch;
  }
  /* The photo fills the card's height: the grid row is the taller of the
     two, so the 3/4 img is its own floor and the text column its ceiling. */
  .place-card__photo{max-width:none;margin-inline:0;align-self:stretch}
}
/* `.places` already goes two-up at 48rem for the Asukohad and Kontakt
   pages, which is too early for a card that also carries a photo. */
@media (min-width:48rem) and (max-width:71.9375rem){
  .places--cards{grid-template-columns:1fr}
  /* One card per row here, so the photo takes a fixed track instead of a
     share of it: 0.8fr of a 1000px card is a 420px portrait. */
  .places--cards .place-card{grid-template-columns:minmax(0, 1fr) 18rem}
}
/* Two cards abreast only once each card can still hold a readable text
   column beside the photo: at 64rem the pair came out 458px wide, which
   left ~220px of text and a sliver of a photo. */
@media (min-width:72rem){
  .places--cards{
    grid-template-columns:1fr 1fr;
    gap:clamp(1.25rem, 2.5vw, 1.75rem);
  }
}