/* ============================================================
   Bridge — reconcile the WP block-theme chrome with the carried
   Soojuskeskus storefront CSS. Loaded LAST so it wins.
   The storefront sections own their width via .container; we strip
   WP's root padding / constrained max-width so they go full-bleed.
   ============================================================ */

/* Drop root-padding-aware side padding — sections center via .container. */
.wp-site-blocks {
  padding-left: 0;
  padding-right: 0;
}

/* Full-bleed is now block-native: homepage section groups carry align:full, so
   the old .sk-storefront wrapper rules are gone (the class was never emitted). */

/* Design system surface is pure white (never warm/sepia). */
body {
  background: var(--paper);
  color: var(--ink);
}

/* WP admin bar should not hide the sticky header. */
.admin-bar .header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}

/* ============================================================
   Native core-block reconciliation — sections rebuilt from
   core blocks (group/image/heading/paragraph/buttons) keep the
   mockup classNames; these rules bridge WP's block wrappers
   (figure margins, button markup, block-flow gaps) back to the
   bespoke design-system CSS so parity holds while staying editable.
   ============================================================ */

/* core/image used as the full-bleed hero background. */
.hero-editorial-photo.wp-block-image { margin: 0; }
.hero-editorial .hero-editorial-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 30% center;
}

/* Bespoke flex/grid owns spacing — drop WP block-flow margins on hero rail cells. */
.hero-editorial-rail > *,
.hero-editorial-rail p,
.hero-editorial-meta .stat p { margin: 0; }

/* ----- Hero = core/cover: width via constrained group, 2-col via core/columns -----
   Width is now block-native (no CSS cap): the cover inner-container is full width,
   the .hero-editorial-frame group is a CONSTRAINED group (caps content to
   contentSize 1240 in editor AND front), and core/columns gives the copy|rail
   2-col. So this matches in the editor without depending on this stylesheet. */
.hero-editorial .wp-block-cover__inner-container { padding: 0; }
/* hero-editorial-shell = constrained group (caps to 1240 natively, editor+front);
   hero-editorial-frame = block-level grid for copy | rail. */
.hero-editorial-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: end;
}
@media (max-width: 980px) {
  .hero-editorial-frame { grid-template-columns: 1fr; gap: 32px; }
}

/* eyebrow style variation, on the dark hero → light */
.hero-editorial .hero-editorial-copy .is-style-eyebrow { color: rgba(255, 255, 255, 0.75); }

/* CTA sizing (look comes from theme.json primary + is-style-ghost-light) */
.hero-editorial-copy .ctas,
.hero-editorial-copy .ctas .wp-block-button { margin: 0; }
.hero-editorial-copy .ctas .wp-block-button__link { font-size: 15px; padding: 14px 22px; line-height: 1; }

/* stat custom blocks in the dark hero meta — white + hairline dividers */
.hero-editorial .hero-editorial-meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  padding-top: 14px;
}
.hero-editorial .hero-editorial-meta .wp-block-soojuskeskus-stat {
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-editorial .hero-editorial-meta .wp-block-soojuskeskus-stat:first-child { border-left: 0; padding-left: 0; }
.hero-editorial .hero-editorial-meta .wp-block-soojuskeskus-stat:last-child { padding-right: 0; }
.hero-editorial .hero-editorial-meta .wp-block-soojuskeskus-stat .num { color: #fff; }
.hero-editorial .hero-editorial-meta .wp-block-soojuskeskus-stat .lbl { color: rgba(255, 255, 255, 0.65); }

/* ============================================================
   Responsive grids (RAM) — repeat(auto-fit, minmax()) replaces fixed
   column counts + media breakpoints. Loaded last, so it supersedes the
   carried fixed grids AND their @media overrides at equal specificity.
   Gaps use the design-system spacing presets.
   ============================================================ */
.svc-editorial .grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wp--preset--spacing--20);
}
.featured-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wp--preset--spacing--20);
}
/* ============================================================
   Portfolio Query Loop — bespoke-only reconciliation. Grid (post-template +
   specs), spacing/blockGap, padding and photo aspect-ratio are NATIVE block
   settings now; what remains here is what blocks can't express: post-block
   margin resets, overlay container, stack chips, link colors.
   ============================================================ */
.portfolio-strip .case-card { height: 100%; position: relative; }

/* photo: featured-image margin reset + full width; aspect-ratio + object-fit are native */
.portfolio-strip .case-photo .wp-block-post-featured-image { margin: 0; }
.portfolio-strip .case-photo .wp-block-post-featured-image img { display: block; width: 100%; }
.portfolio-strip .case-photo .wp-block-post-terms.case-tag { margin: 0; }
.portfolio-strip .case-photo .case-tag a { color: inherit; text-decoration: none; }
.portfolio-strip .case-year { margin: 0; }

/* body: meta line, title link, paragraph margin resets */
.portfolio-strip .case-meta { margin: 0; }
.portfolio-strip .case-title { margin: 0; }
.portfolio-strip .case-title a { color: inherit; text-decoration: none; }
/* whole card clickable (prototype article onClick) — stretched link on the title
   anchor. Hover no longer recolors the title: design hover = border + translateY +
   photo scale only (storefront.css), no title recolor. */
.portfolio-strip .case-title a::after { content: ""; position: absolute; inset: 0; }

/* stack chips via core/post-terms (each term renders as an <a>) */
.portfolio-strip .case-stack { margin: 0; }
.portfolio-strip .case-stack .wp-block-post-terms__separator { display: none; } /* drop the comma/space separator → chips spaced by flex gap only */
.portfolio-strip .case-stack a {
  text-decoration: none;
  font-size: 11px; font-family: var(--font-mono);
  color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 2px 8px;
}

/* specs cells (.k label / .v value bound) replace the original dl/dt/dd */
.portfolio-strip .case-specs .k {
  margin: 0; font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.portfolio-strip .case-specs .v { margin: 0; font-size: 14px; color: var(--ink); font-weight: 600; }

/* foot brand / cta */
.portfolio-strip .case-foot .case-brand,
.portfolio-strip .case-foot .case-cta { margin: 0; }

/* ============================================================
   Native header — core/site-logo + core/navigation + core/search
   reconciled to the storefront design (.utilbar / .header live in
   storefront.css). Replaces the old custom-HTML nav + non-functional
   mobile drawer; core/navigation gives an editable menu + native mobile.
   ============================================================ */
/* logo */
.header .wp-block-site-logo { line-height: 0; }
.header .wp-block-site-logo img { height: 36px; width: auto; display: block; }

/* row: logo | nav | actions(right) */
.header .actions { margin-left: auto; }

/* nav links — gap (blockGap) + font-size (sm) + weight (500) are NATIVE block
   settings now (header.html), editable in the inspector. CSS keeps bespoke only. */
.header-nav .wp-block-navigation__container { align-items: center; }
.header-nav .wp-block-navigation-item__content {
  color: var(--ink-2);
  text-decoration: none;
  padding: 0;
}
.header-nav .wp-block-navigation-item__content:hover { color: var(--ink); }
/* design-system stroked chevron (--ic-chevron), the same glyph as the mobile drawer.
   Drawn as a MASK; flipped on open by swapping the mask IMAGE (down→up), never by a
   transform — a transform on a masked element is what dropped it out of Chrome's GPU
   compositor (the old "chevron disappears on hover"); an image swap never does. */
.header-nav .wp-block-navigation__submenu-icon {
  margin-left: 6px; margin-top: -1px; padding: 0; min-width: 0; flex: 0 0 auto;
  width: 12px; height: 12px; background: transparent; color: var(--ink-3); border: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.header-nav .wp-block-navigation__submenu-icon svg { display: none; }
.header-nav .wp-block-navigation__submenu-icon::before {
  content: ""; display: block; width: 11px; height: 11px; border: 0;
  background: var(--ink-3);
  -webkit-mask: var(--ic-chevron) center / contain no-repeat;
  mask: var(--ic-chevron) center / contain no-repeat;
}
:root { --ic-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3l10 9 10-9'/%3E%3C/svg%3E"); }
:root { --ic-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11l10-9 10 9'/%3E%3C/svg%3E"); }
/* flip to the up-chevron while the dropdown is open (hover / keyboard focus-within)
   — a mask-image swap, no transform (see note above). */
.header-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon::before,
.header-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-icon::before {
  -webkit-mask-image: var(--ic-chevron-up);
  mask-image: var(--ic-chevron-up);
}

/* submenu dropdown */
.header-nav .wp-block-navigation__submenu-container {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--sh-2);
  padding: 8px;
  min-width: 230px;
}
.header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 7px 10px;
  font-weight: 400;
  color: var(--ink-2);
  border-radius: var(--r-1);
}
.header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* search field — single definition lives in the "Header 1:1" block below */
.header-search { margin: 0; }

/* utilbar phone icon */
.utilbar .item.phone::before {
  content: "";
  width: 12px; height: 12px;
  margin-right: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M5 4h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M5 4h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z'/></svg>") center/contain no-repeat;
  display: inline-block;
}

/* nav submenu: label + chevron inline (li renders <a> + <button> + <ul>) */
.header-nav .wp-block-navigation-item { display: flex; align-items: center; }
.header-nav .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
  border: 0; padding: 0; min-width: 0; color: var(--ink-3);
}
.header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { display: block; }

/* submenu item: label + chevron in a ROW (core stacks them column); submenu <ul>
   stays absolute so it still drops below. And keep nav centered, not stretched. */
.header-nav .wp-block-navigation-item.has-child { flex-direction: row; }
.header-nav { align-self: center; }
.header .row > .wp-block-site-logo, .header .row > .actions { align-self: center; }

/* nav links: natural height, vertically centered in the header row (no fixed
   --header-h hack). The active underline sits a fixed distance under the label
   (see --sk-underline rules) — universal across menu + tabs. */
.header-nav .wp-block-navigation-item__content { align-self: center; height: auto; min-height: 0; }
.header-nav .wp-block-navigation__submenu-icon { align-self: center; }

/* primary CTA nav item — red pill ("Küsi pakkumist"). The one action-signal in
   the header: overrides the ink-2 link colour + suppresses the active underline. */
.header-nav .nav-cta { align-items: center; }
/* Selector must out-specify the full-height top-level rule below (line ~385,
   0,4,0 `.container > .item > .content { height: --header-h }`) — hence the
   5-class chain, so the pill keeps its own 38px height, not the 72px row. */
.header-nav .wp-block-navigation__container > .nav-cta.wp-block-navigation-item > .wp-block-navigation-item__content {
  display: inline-flex; align-items: center; align-self: center;
  height: 38px; padding: 0 16px; line-height: 1;
  border-radius: var(--r-pill);
  background: var(--brand-500); color: #fff; font-weight: 600; white-space: nowrap;
}
.header-nav .wp-block-navigation__container > .nav-cta.wp-block-navigation-item > .wp-block-navigation-item__content:hover { background: var(--brand-600); color: #fff; }
.header-nav .wp-block-navigation__container > .nav-cta.wp-block-navigation-item > .wp-block-navigation-item__content::after { display: none; }

/* "Küsi pakkumist" CTA pinned to the far right of the header row (desktop). A
   separate instance from the mobile-drawer link — hidden on mobile, where the
   drawer carries it. Same red pill as the in-nav CTA. */
.header-cta { margin: 0; align-self: center; }
.header-cta .wp-block-button__link {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: var(--r-pill); background: var(--brand-500); color: #fff;
  font-weight: 600; font-size: 13px; line-height: 1; white-space: nowrap;
}
.header-cta .wp-block-button__link:hover { background: var(--brand-600); color: #fff; }
@media (max-width: 1199px) { .header .header-cta.wp-block-buttons { display: none; } }
/* narrow tablet: the verbose promo line makes the utilbar wrap to two rows —
   drop it so it stays one line (it returns above 860px). */
@media (max-width: 860px) { .utilbar .item.dot { display: none; } }

/* Section gutter on mobile/tablet. The alignfull sections over-break ~16px past
   each viewport edge (symmetric), which eats the .container's padding and lets
   content touch the screen edges. Cap the container to the viewport minus a
   16px gutter each side and let margin:auto centre it — robust to the exact
   over-break. (Desktop keeps the 1240px max-width + centred gutter.) */
@media (max-width: 1199px) {
  .container { max-width: calc(100vw - 32px); padding-left: 0; padding-right: 0; }
}

/* the drawer logo is cloned in on open and stays in the DOM after close — hide
   it unless the drawer is open (the .is-menu-open rule re-shows it). */
.header-nav .sk-drawer-brand { display: none; }

/* mobile: hide the desktop search pill (secondary; nav collapses to the
   core/navigation hamburger overlay). */
@media (max-width: 1199px) {
  .header-search { display: none; }
}

/* mobile/tablet hamburger (core open button can render unsized). WP only
   collapses the menu at its own ~782px breakpoint, so up to the tablet width we
   also force the inline horizontal menu to the hamburger + drawer. */
@media (max-width: 1199px) {
  .header .wp-block-navigation__responsive-container-open {
    display: flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; color: var(--ink); background: transparent; border: 0;
  }
  .header .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; fill: currentColor; }
  .header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}

/* the header's backdrop-filter makes it the containing block for the fixed nav
   overlay, trapping the drawer inside the 71px header box. Drop it on mobile
   (solid header) so the overlay is viewport-fixed and goes full-screen. */
@media (max-width: 1199px) {
  .header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* mobile: hamburger FIRST, left of the logo (prototype Header.jsx menu-btn order) */
@media (max-width: 1199px) {
  .header-nav { order: -1; margin-left: 0; }
  .header .actions { margin-left: auto; }
}

/* ---- Header 1:1 with mockup ---- */
/* remove header→content gap: the root blockGap adds margin-block-start to the
   top-level block after the header (<main> on page/single/archive templates;
   bare post-content on a few) — zero it so the hero sits flush under the header. */
.wp-site-blocks > main { margin-block-start: 0; }
.wp-site-blocks > .wp-block-post-content { margin-block-start: 0; padding-left: 0; padding-right: 0; }

/* search field — white rounded rect (mockup .search: 320×38, r-2, icon left, grey) */
.header-search .wp-block-search__inside-wrapper {
  position: relative;
  display: flex; align-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--white);
  padding: 0 12px 0 34px;
  width: 320px; height: 38px; max-width: 100%;
}
.header-search .wp-block-search__inside-wrapper::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; background: var(--ink-4);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.5-4.5'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.5-4.5'/></svg>") center/contain no-repeat;
}
.header-search .wp-block-search__input { flex: 1; border: 0; background: transparent; outline: none; font-size: var(--fs-sm); padding: 0; min-height: 0; height: 100%; }

/* account + cart icon buttons (core/button, label hidden, CSS mask icon) */
.header .actions .header-icons { margin: 0; }
.header .actions .header-icons .wp-block-button__link {
  background: transparent; color: var(--ink-2); border: 0; box-shadow: none;
  padding: 9px; min-width: 0; border-radius: var(--r-1); /* 9px + 18px glyph = 36px hit area (prototype .icon-btn) */
  font-size: 0; line-height: 0; position: relative;
}
.header .actions .header-icons .wp-block-button__link:hover { background: var(--paper-2); color: var(--ink); }
.header .header-icons .icon-btn .wp-block-button__link::before,
.header .header-icons .wp-block-button__link::before {
  content: ""; display: block; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat;
}
.header .icon-account .wp-block-button__link { --ic: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-7 8-7s8 3 8 7'/></svg>"); }
/* (dead .icon-cart rules removed — cart is wp:soojuskeskus/mini-cart, badge = .sk-minicart__badge) */

/* active nav item — brand underline */
.header-nav .current-menu-item > .wp-block-navigation-item__content,
.header-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content { color: var(--ink); position: relative; }
.header-nav .current-menu-item > .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--brand-500);
}
/* Inside the dropdown a 2px underline floating under a padded row reads badly —
   drop it there and mark the active child with a brand label on the same tinted
   row the hover uses (consistent, no stray line). */
.header-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content::after { content: none; }
.header-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
  color: var(--brand-500); background: var(--paper-2); font-weight: 500;
}

/* active = native current-menu-item only (hardcoded className:"active" removed from
   header.html; front-page fallback filter — see functions.php sk_nav_mark_current). */

/* ============================================================
   Header 1:1 — desktop parity + mobile drawer (impl:header handoff).
   Drawer-only nav items (search, KKK/Kontakt, Tootekategooriad,
   Avariiliin/address foot) carry .sk-mob-only in header.html —
   prototype shows them only in the mobile drawer (Header.jsx).
   ============================================================ */
/* pillar links (Tooted / Teenused) — prototype .header nav a.pillar */
.header-nav .pillar > .wp-block-navigation-item__content { color: var(--ink); font-weight: 600; }

@media (min-width: 1200px) {
  /* mobile-only items NEVER render inline on desktop */
  .header-nav .sk-mob-only { display: none !important; }

  /* full-height top-level links, active underline on the header's bottom edge
     (prototype: .header nav a { height: var(--header-h) }, a.active::after bottom:-1px) */
  .header-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    height: var(--header-h); display: inline-flex; align-items: center;
  }
  .header-nav .current-menu-item > .wp-block-navigation-item__content::after { bottom: -1px; }
}

@media (max-width: 1199px) {
  /* ============================================================
     Mobile drawer — design system (Header.jsx + mobile.css .mobile-drawer*):
     a left side-panel over a dark backdrop, compact rows, search on top,
     contact foot pinned. WP renders a full-screen overlay, so retarget parts:
       container          → dark backdrop
       .responsive-close  → the left panel (paper, 360px, scrolls)
       .responsive-dialog → flex column so the foot pins to the bottom
       .sk-drawer-brand   → logo head (injected by the wp_footer script)
     ============================================================ */
  /* !important: WP core's `.wp-block-navigation:not(.has-background) …:not(
     .disable-default-overlay)` paints the overlay opaque #fff at (0,5,0) — beats
     a plain selector. The dark wash lets the dimmed page show beside the panel. */
  .header-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(4, 24, 40, 0.5) !important;
  }
  .header-nav .is-menu-open .wp-block-navigation__responsive-close {
    position: fixed; inset: 0 auto 0 0; margin: 0; padding: 0;
    width: min(86vw, 360px); max-width: 360px;
    background: var(--paper); overflow-y: auto;
    box-shadow: 0 0 0 1px rgba(4,24,40,0.04), 32px 0 60px -16px rgba(4,24,40,0.18);
  }
  .header-nav .is-menu-open .wp-block-navigation__responsive-dialog {
    display: flex; flex-direction: column; min-height: 100%;
  }

  /* head: cloned logo (injected by the wp_footer JS) + close button */
  .header-nav .is-menu-open .sk-drawer-brand {
    display: flex; align-items: center; padding: 16px 20px;
    border-bottom: 1px solid var(--line);
  }
  .header-nav .is-menu-open .sk-drawer-brand img { height: 30px; width: auto; display: block; }
  .header-nav .is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute; top: 14px; right: 14px; margin: 0;
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2); background: transparent; border-radius: var(--r-2);
  }
  .header-nav .is-menu-open .wp-block-navigation__responsive-container-close:hover { background: var(--paper-2); color: var(--ink); }
  .header-nav .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 18px; height: 18px; }

  /* content + list: compact column, no gaps (rows stack tight like the design) */
  .header-nav .is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    padding: 0; gap: 0; align-items: stretch;
  }
  .header-nav .is-menu-open .wp-block-navigation__container {
    display: flex; flex-direction: column; flex: 1; gap: 0;
    padding: 10px 0 0; margin: 0; align-items: stretch;
    width: 100%; max-width: none; align-self: stretch;  /* WP centres the list at
       ~279px; stretch it edge-to-edge so rows align with the logo/search (20px) */
    order: 1;  /* WP sets order:-1 on the list, which shoves the search below it;
                  restore search-on-top (design mobile-drawer-search) */
  }
  .header-nav .is-menu-open .sk-drawer-search { order: 0; }

  /* top-level rows — mobile-drawer-nav a (16px/500, 13/20 padding, chevron right,
     active = 3px brand left border, not the desktop underline) */
  .header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    width: 100%; display: block; align-self: stretch;
  }
  .header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 13px 20px; font-size: 16px; font-weight: 500; color: var(--ink);
    border-left: 3px solid transparent; height: auto; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
  }
  .header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { background: var(--paper-2); }
  .header-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content { border-left-color: var(--brand-500); }
  .header-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content::after { display: none; }

  /* Tooted / Teenused (.pillar) — accordion: tap the chevron to reveal the
     nested categories/services (like the desktop dropdown). Collapsed by default;
     the wp_footer JS toggles .sk-sub-open (WP submenu interactivity is dead). The
     label link (Tooted → /shop/) still navigates; the chevron only toggles. */
  .header-nav .is-menu-open .pillar.wp-block-navigation-item { position: relative; }
  .header-nav .is-menu-open .pillar.wp-block-navigation-item > .wp-block-navigation__submenu-container { display: none; }
  .header-nav .is-menu-open .pillar.sk-sub-open.wp-block-navigation-item > .wp-block-navigation__submenu-container {
    display: block; position: static; visibility: visible; opacity: 1;
    height: auto; width: auto; min-width: 0; inset: auto; overflow: visible;
    border: 0; box-shadow: none; background: var(--paper-2); padding: 4px 0 8px; margin: 0;
  }
  .header-nav .is-menu-open .pillar > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 9px 20px 9px 36px; font-size: 14px; font-weight: 400; color: var(--ink-2);
    border-left: 0; width: 100%; justify-content: flex-start; min-height: 0;
  }
  .header-nav .is-menu-open .pillar > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--brand-500); background: transparent; }
  /* chevron — design-system stroked chevron (--ic-chevron) as a MASK, pinned to the
     right of the label ROW. The button is absolute inside the pillar; CAPPING its
     height to the row (not top:0/bottom:0, which centres over the whole pillar) keeps
     it on the label instead of drifting to the vertical middle when the accordion
     opens tall — that drift was the reported "chevron disappears". On open the mask
     swaps down→up — a token swap, NOT a transform (a transform on a masked element
     drops out in Chrome's GPU compositor: the other "chevron vanishes" failure). */
  .header-nav .is-menu-open .pillar.wp-block-navigation-item > .wp-block-navigation__submenu-icon {
    position: absolute; right: 18px; top: 0; height: 48px;  /* 48px = the label row (13px×2 pad + line) */
    display: flex; align-items: center; justify-content: center;  /* a drawer rule hides it — restore */
    width: 16px; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent;
  }
  .header-nav .is-menu-open .pillar.wp-block-navigation-item > .wp-block-navigation__submenu-icon::before {
    width: 14px; height: 14px; border: 0; background: var(--ink-3);
    -webkit-mask: var(--ic-chevron) center / contain no-repeat;
    mask: var(--ic-chevron) center / contain no-repeat;
  }
  .header-nav .is-menu-open .pillar.sk-sub-open.wp-block-navigation-item > .wp-block-navigation__submenu-icon::before {
    -webkit-mask-image: var(--ic-chevron-up);
    mask-image: var(--ic-chevron-up);
  }

  /* In the drawer "Küsi pakkumist" is a plain nav link like every other row
     (design mockup mobile-drawer-nav has no CTA button) — neutralise the desktop
     red pill here. 6-class chain out-specifies both the pill rule (0,5,0) and the
     generic drawer-link rule (0,5,0). */
  .header-nav .is-menu-open .wp-block-navigation__container > .nav-cta.wp-block-navigation-item > .wp-block-navigation-item__content {
    margin: 0; padding: 13px 20px; width: 100%; height: auto;
    display: flex; justify-content: flex-start; align-items: center;
    background: transparent; color: var(--ink); font-weight: 500;
    border-left: 3px solid transparent; border-radius: 0;
  }
  .header-nav .is-menu-open .wp-block-navigation__container > .nav-cta.wp-block-navigation-item > .wp-block-navigation-item__content:hover { background: transparent; color: var(--brand-500); }

  /* drawer search — prototype .mobile-drawer-search (white pill, 40px, icon left) */
  .header-nav .is-menu-open .sk-drawer-search .wp-block-search__inside-wrapper {
    position: relative; display: flex; align-items: center;
    margin: 14px 20px 4px; padding: 0 14px 0 38px; height: 40px; width: auto;
    background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-2);
  }
  .header-nav .is-menu-open .sk-drawer-search .wp-block-search__inside-wrapper::before {
    content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; background: var(--ink-4);
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.5-4.5'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.5-4.5'/></svg>") center/contain no-repeat;
  }
  .header-nav .is-menu-open .sk-drawer-search .wp-block-search__input {
    flex: 1; border: 0; background: transparent; outline: none;
    font-size: 14px; color: var(--ink); padding: 0; min-height: 0; height: 100%;
  }

  /* drawer foot — prototype .mobile-drawer-foot (paper-2, phone icon, muted row) */
  .header-nav .is-menu-open .sk-drawer-foot { margin-top: auto; background: var(--paper-2); padding-top: 10px; }
  .header-nav .is-menu-open .wp-block-navigation__container > .sk-drawer-foot > .wp-block-navigation-item__content {
    padding: 6px 20px; font-size: 13px; color: var(--ink); font-weight: 500;
    display: flex; justify-content: flex-start; align-items: center; gap: 8px;
    border-left: 0; width: 100%;  /* out-specify the space-between top-level rule */
  }
  .header-nav .is-menu-open .sk-drawer-foot > .wp-block-navigation-item__content::before {
    content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: var(--brand-500);
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M5 4h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M5 4h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z'/></svg>") center/contain no-repeat;
  }
  .header-nav .is-menu-open .sk-drawer-foot-muted { background: var(--paper-2); padding-bottom: 12px; }
  /* address row — same type as the phone row (uniform per client request, not the
     design's muted 12px/ink-3) + a map-pin icon matching the phone icon. */
  .header-nav .is-menu-open .wp-block-navigation__container > .sk-drawer-foot-muted > .wp-block-navigation-item__content {
    padding: 6px 20px; font-size: 13px; color: var(--ink); font-weight: 500;
    display: flex; justify-content: flex-start; align-items: center; gap: 8px;
    border-left: 0; width: 100%;
  }
  .header-nav .is-menu-open .sk-drawer-foot-muted > .wp-block-navigation-item__content::before {
    content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: var(--brand-500);
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>") center/contain no-repeat;
  }
  /* contact rows are info, not menu links — no hover highlight */
  .header-nav .is-menu-open .wp-block-navigation__container > .sk-drawer-foot > .wp-block-navigation-item__content:hover,
  .header-nav .is-menu-open .wp-block-navigation__container > .sk-drawer-foot-muted > .wp-block-navigation-item__content:hover {
    background: transparent;
  }
}

/* ---- header polish: consistent fonts + uniform icon sizes ---- */
/* utilbar items are <p> now (don't inherit .utilbar 12px) → set explicitly */
.utilbar .item { font-size: var(--fs-xs); margin: 0; line-height: 1; }
/* action icons 18px (search icon stays 16px per mockup) */
.header .header-icons .icon-btn .wp-block-button__link::before { width: 18px; height: 18px; }

/* unify header action icons + badges (account / wishlist / cart): same glyph
   size (18px), same wrapper (8px padding → 34px), same badge size & level,
   same hover (paper-2 background, ink color — not the brand-red heart) */
.header .sk-wish-link { width: auto; height: auto; padding: 9px; color: var(--ink-2); border-radius: var(--r-1); }
.header .sk-wish-link:hover { background: var(--paper-2); color: var(--ink); }
.header .sk-wish-ico { width: 18px; height: 18px; }
/* tighten the icon cluster (account/wishlist/cart) while keeping search apart */
.header .actions { gap: 4px; }
.header .actions .header-search { margin-right: 10px; }

/* unified icon-button radius (account / wishlist / cart) */
.header .actions .header-icons .wp-block-button__link,
.header .sk-wish-link,
.header .sk-minicart__toggle { border-radius: var(--r-2); }

/* ---- global smooth transitions for interactive elements ---- */
a, button, summary, label, input, select, textarea,
.wp-element-button, .wp-block-button__link, .btn, [class*="__btn"], [class*="__toggle"],
.header-nav .wp-block-navigation-item__content,
.header-nav .wp-block-navigation__submenu-icon, .header-nav .wp-block-navigation__submenu-icon svg,
.sk-wish-btn, .sk-swatch, .sk-qty-btn,
.woocommerce-MyAccount-navigation a, .pdp-details ul.wc-tabs.tabs li a,
.footer a, .nf-cat a {
  transition:
    color var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}

/* dropdown chevron flips when its submenu opens (desktop hover/focus-within above;
   mobile .sk-sub-open tap-toggle below). Both swap the mask IMAGE (down→up) rather
   than rotating — a `transform` on a masked element drops the mask in Chrome's GPU
   compositor, making the chevron vanish on hover; an image swap never does. */
.header .sk-wish-count {
  position: absolute; top: 0; right: 0; transform: translate(25%, -25%);
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  background: var(--brand-500); color: #fff; font-size: 10px; line-height: 16px;
  font-weight: 600; text-align: center; border-radius: 999px; font-family: var(--font-mono);
}

/* ============================================================
   Shop / catalog listing — product cards to the ProductCard.jsx
   mockup (.pcard). Targets the WooCommerce Product Collection block
   (li.wc-block-product). WC default is centered/borderless → make
   it a left-aligned bordered card.
   ============================================================ */
/* results count + sort header */
.wc-block-product-results-count, .woocommerce-result-count { font-size: 13px; color: var(--ink-3); }
.wp-block-woocommerce-product-collection-sort select,
.woocommerce-ordering select {
  font-size: 13px; color: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--r-2); padding: 6px 28px 6px 10px; background-color: #fff;
}

/* grid gap to mockup (WC keeps its responsive columns-N grid) */
.woocommerce .wc-block-product-template { gap: 16px; }

/* Homepage featured collection (shop-entry): the front page has no .woocommerce
   ancestor, so re-apply the grid gap here + top spacing below the category chips. */
.shop-featured { margin-top: 28px; }
.shop-featured .wc-block-product-template { gap: 16px; }

/* active/selected filter chips — live in the results-head row (left of sort),
   above the catalog. Dark pills with × (mockup .chip.on). */
.shop-archive .results-head .wc-block-product-filters { background: transparent; padding: 0; flex: 1 1 auto; min-width: 0; }
.shop-archive .results-head .wc-block-product-filter-removable-chips,
.shop-archive .results-head .wc-block-product-filter-removable-chips__items {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.shop-archive .results-head .wc-block-product-filter-removable-chips__item {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 11px; margin: 0;
  font-size: 12px; line-height: 1.2; background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; list-style: none;
}
.shop-archive .results-head .wc-block-product-filter-removable-chips__remove-icon { width: 14px; height: 14px; fill: currentColor; }
/* stable results-head height: the chips + "Tühjenda" clear appear only when a
   filter is active — take them out of flow (absolute, left) so they overlay the
   row instead of growing it and pushing the product grid down (jump). Sort stays
   right. */
.shop-archive .results-head { position: relative; min-height: 40px; }
.shop-archive .results-head > .wc-block-product-filters { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; flex: 0 0 auto; }
.shop-archive .results-head .wp-block-woocommerce-product-filter-active { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0; }
.shop-archive .results-head .wp-block-woocommerce-product-filter-active > * { flex: 0 0 auto; margin: 0; }
/* hide the redundant "Tühjenda" clear in the results-head — a chip's × removes
   its filter and the sidebar "Lähtesta" clears all. */
.shop-archive .results-head .wp-block-woocommerce-product-filter-clear-button { display: none !important; }
.shop-archive .results-head > :last-child { margin-left: auto; }

/* filters reset ("Lähtesta") in the sidebar head — absolute (only while visible)
   so it overlays right of the "Filtrid" title instead of growing the row when a
   filter becomes active, which was pushing the filter list down (jump). */
.shop-archive .filters-head { position: relative; }
/* align with the "Filtrid" title (top:0, not centred — the title has an 8px
   margin-bottom that would otherwise drop the reset below it). */
.shop-archive .filters-head > .wp-block-woocommerce-product-filter-active:not([hidden]) {
  position: absolute; right: 0; top: -3px; line-height: inherit;
}
.shop-archive .filters-head .wp-block-buttons,
.shop-archive .filters-head .wp-block-button { margin: 0; }

/* card */
.wc-block-product-template li.wc-block-product {
  margin: 0; padding: 0; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-2);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.wc-block-product-template li.wc-block-product:hover { border-color: var(--line-3); box-shadow: var(--sh-2); }

/* image — square white area (full-bleed top), bottom divider */
.wc-block-product-template li.wc-block-product .wc-block-components-product-image {
  margin: 0; border-bottom: 1px solid var(--paper-2);
}
.wc-block-product-template li.wc-block-product .wc-block-components-product-image img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain !important;
  padding: 14px; box-sizing: border-box; background: var(--white);
}

/* title — left, padded (WP preset font-size class is !important → override) */
.wc-block-product-template li.wc-block-product .wp-block-post-title {
  text-align: left; padding: 14px 14px 0; margin: 0;
  font-family: var(--font-sans); font-size: 15px !important; font-weight: 600; color: var(--ink);
  line-height: 1.3; min-height: 2.6em;
}
.wc-block-product-template li.wc-block-product .wp-block-post-title a { color: inherit; text-decoration: none; }

/* price — left, mono */
.wc-block-product-template li.wc-block-product .wc-block-components-product-price {
  text-align: left; padding: 6px 14px 0; margin: 0; color: var(--ink); font-weight: 600;
}
.wc-block-product-template li.wc-block-product .wc-block-components-product-price,
.wc-block-product-template li.wc-block-product .wc-block-components-product-price__value {
  font-family: var(--font-mono); font-size: 18px;
}
.wc-block-product-template li.wc-block-product .wc-block-components-product-price del { color: var(--ink-4); font-weight: 400; font-size: 14px; }
.wc-block-product-template li.wc-block-product .wc-block-components-product-price ins { text-decoration: none; }

/* add-to-cart — primary (red), full width, card foot */
.wc-block-product-template li.wc-block-product .wc-block-components-product-button {
  margin: 14px; margin-top: auto; text-align: left; max-width: none;
}
.wc-block-product-template li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-sm); line-height: 1;
  padding: 11px 16px; border-radius: var(--r-2); border: 1px solid transparent;
  background: var(--brand-500); color: #fff; box-shadow: none; text-decoration: none; text-align: center;
}
.wc-block-product-template li.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover { background: var(--brand-600); color: #fff; }
/* "View cart" link that appears after add */
.wc-block-product-template li.wc-block-product .added_to_cart {
  display: block; text-align: center; margin: 0 14px 14px; font-size: 12px; color: var(--ink-2); text-decoration: underline;
}

/* sale flash badge — top-left, design pill */
.wc-block-product-template li.wc-block-product .onsale {
  position: absolute; top: 10px; left: 10px; right: auto; margin: 0; z-index: 1;
  min-height: 0; min-width: 0; padding: 2px 8px; line-height: 1.6;
  background: var(--brand-500); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 500; font-family: var(--font-sans);
}

/* ============================================================
   Shop archive layout — Listing.jsx mockup: breadcrumb + category
   head + two-column shell (filters sidebar 260px | grid).
   ============================================================ */
.shop-archive { padding-block: 24px 64px; }

/* WooCommerce breadcrumbs (shop / PDP / category) — unified with the .crumbs
   trail used in page heroes: 12px ink-3, /-separator, constrained to the content
   width (tame the block's alignwide + has-small-font-size), link hover matching
   .crumbs. One rule set for every WC breadcrumb context, not per-screen. */
.wp-block-woocommerce-breadcrumbs,
.wp-block-woocommerce-breadcrumbs.has-small-font-size,
.woocommerce-breadcrumb { font-size: 12px; color: var(--ink-3); }
.wp-block-woocommerce-breadcrumbs,
.wp-block-woocommerce-breadcrumbs.alignwide {
  padding: 16px 0; margin-inline: auto;
  max-width: var(--wp--style--global--content-size, 1240px);
}
.woocommerce-breadcrumb a { color: var(--ink-3); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* category head — banner: title block (left) + meta count (right) */
.shop-archive .lst-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 16px 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.shop-archive .lst-head-main { flex: 1 1 60%; min-width: 0; }
.shop-archive .lst-head-meta { flex: 0 0 auto; }
.shop-archive .lst-head-meta .wc-block-product-results-count {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); margin: 0;
}
.shop-archive .lst-eyebrow { margin: 0 0 6px; }
.shop-archive .lst-head .wp-block-query-title,
.shop-archive .lst-head h1 {
  text-align: left; font-family: var(--font-sans); font-size: 32px; font-weight: 700;
  line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.shop-archive .wp-block-term-description,
.shop-archive .lst-sub { font-size: 14px; color: var(--ink-3); margin: 8px 0 0; max-width: 62ch; line-height: 1.5; }

/* two-column shell */
.shop-archive .lst-shell { gap: 32px; align-items: flex-start; margin: 0; }
.shop-archive .lst-sidebar { flex-basis: 260px !important; flex-grow: 0; }
.shop-archive .lst-main { flex-basis: 0; flex-grow: 1; min-width: 0; }

/* ---- filters sidebar ---- */
.lst-sidebar .filters-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }

/* Filters are inline at ALL widths (no "Filtreeri tooteid" overlay toggle) so
   the category list is always visible — on mobile the sidebar column stacks
   above the grid. Hides the overlay chrome for both the sidebar filters and
   the active-chips bar. */
.shop-archive .wc-block-product-filters__open-overlay,
.shop-archive .wc-block-product-filters__overlay-header,
.shop-archive .wc-block-product-filters__overlay-footer { display: none !important; }
.shop-archive .wc-block-product-filters__overlay,
.shop-archive .wc-block-product-filters__overlay-wrapper,
.shop-archive .wc-block-product-filters__overlay-dialog,
.shop-archive .wc-block-product-filters__overlay-content {
  position: static !important; inset: auto !important; width: auto !important;
  height: auto !important; max-width: none !important; transform: none !important;
  background: transparent !important; box-shadow: none !important; padding: 0 !important; display: block !important;
}

/* filter groups */
.lst-sidebar .wp-block-woocommerce-product-filter-taxonomy,
.lst-sidebar .wp-block-woocommerce-product-filter-attribute,
.lst-sidebar .wp-block-woocommerce-product-filter-status {
  padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0;
}
/* group title — flex row with a chevron affordance (design Filters.jsx .group h4 +
   span.chev; prototype has no collapse JS, so this is affordance-only). */
.lst-sidebar .filter-group-title {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 10px;
}
.lst-sidebar .filter-group-title::after {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto; background: var(--ink-3);
  -webkit-mask: var(--ic-chevron) center / contain no-repeat; mask: var(--ic-chevron) center / contain no-repeat;
}

/* WC wraps each filter's options in a <fieldset> (default browser border) → reset */
.lst-sidebar fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

/* ============================================================
   Product page (PDP) — PDP.jsx layout: gallery | info, then details.
   ============================================================ */
.pdp-screen { padding-block: 8px 56px; }
/* PDP breadcrumb uses the unified WC breadcrumb rules above (12px/ink-3, constrained). */
.pdp-hero { gap: 56px; align-items: flex-start; margin-bottom: 8px; }
.pdp-info { display: flex; flex-direction: column; gap: 18px; }

/* ---- PDP gallery → design system (PdpGallery in PDP.jsx) ----
   Native WooCommerce gallery restyled: main image in a white bordered card
   (1/1, padding, centered), thumbs as a left column when present, zoom as a
   36×36 bordered button. Keeps WC's flexslider/zoom/lightbox JS intact. */
.pdp-gallery { position: relative; }
.pdp-gallery .onsale,
.pdp-gallery .wc-block-components-product-sale-badge { display: none !important; }

.pdp-gallery .woocommerce-product-gallery { position: relative; float: none; width: 100%; margin: 0; }
.pdp-gallery .woocommerce-product-gallery__wrapper {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2);
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  padding: 48px; overflow: hidden;
}
.pdp-gallery .woocommerce-product-gallery__image,
.pdp-gallery .woocommerce-product-gallery__image > a {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0;
}
.pdp-gallery .woocommerce-product-gallery__image img,
.pdp-gallery .woocommerce-product-gallery .wp-post-image {
  width: auto; max-width: 100%; max-height: 100%; object-fit: contain; margin: 0;
}
/* zoom trigger → design pill-less 36×36 bordered button, top-right */
.pdp-gallery .woocommerce-product-gallery__trigger {
  top: 16px; right: 16px; left: auto; width: 36px; height: 36px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-2);
  color: var(--ink-2); opacity: 1; box-shadow: none; z-index: 3;
}
/* product badge on the gallery ("Uus" etc. from sk_badge), top-left as in design */
/* pill styles only — absolute positioning now lives on the .pdp-gallery-badges wrapper */
.pdp-gallery .pdp-gallery-badge {
  margin: 0;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px; line-height: 1.6;
}
/* badges wrapper: two pills top-left over the main image (PDP.jsx 67-70) */
.pdp-gallery .pdp-gallery-badges {
  position: absolute; top: 16px; left: 16px; z-index: 3; display: flex; gap: 6px; margin: 0;
}
/* multi-photo gallery: thumbs column (76px) + gap 12 pushes badges off the main image */
.pdp-gallery:has(.flex-control-thumbs) .pdp-gallery-badges { left: calc(76px + 12px + 16px); }
/* second pill ("2026 mudel") — white outline (sk_badge_2) */
.pdp-gallery .pdp-gallery-badge.is-light { background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); }
.pdp-gallery .pdp-gallery-badge:empty { display: none; }

/* thumbnails (multi-image galleries) → left column of 76px bordered squares */
.pdp-gallery .woocommerce-product-gallery:has(.flex-control-thumbs) {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start;
}
.pdp-gallery .woocommerce-product-gallery:has(.flex-control-thumbs) .flex-viewport,
.pdp-gallery .woocommerce-product-gallery:has(.flex-control-thumbs) > .woocommerce-product-gallery__wrapper { grid-column: 2; grid-row: 1; }
.pdp-gallery .flex-control-thumbs {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.pdp-gallery .flex-control-thumbs li { margin: 0; width: 76px; }
.pdp-gallery .flex-control-thumbs img {
  width: 76px; height: 76px; object-fit: contain; padding: 8px; cursor: pointer; opacity: 0.92;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2);
}
.pdp-gallery .flex-control-thumbs img.flex-active,
.pdp-gallery .flex-control-thumbs img:hover { border-color: var(--ink); opacity: 1; }

/* brand eyebrow */
.pdp-info .pdp-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 500; margin: 0; }
.pdp-info .pdp-eyebrow a { color: inherit; text-decoration: none; }
/* title */
.pdp-info .pdp-title { font-family: var(--font-sans); font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 6px 0 0; }

/* energy + sku row */
.pdp-info .pdp-subrow { gap: 14px; align-items: center; margin: 0; }
.pdp-info .pdp-energy {
  display: inline-flex; align-items: center; color: #fff; margin: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  background: var(--energy-aaa); padding: 2px 9px 2px 7px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}
.pdp-info .pdp-energy:empty { display: none; }
.pdp-info .wc-block-components-product-sku { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin: 0; }

/* short description */
.pdp-info .wc-block-components-product-summary,
.pdp-info p.wp-block-post-excerpt__excerpt { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; }
.pdp-info .wp-block-post-excerpt { margin: 0; }

/* price block */
.pdp-price-block { padding-top: 16px; border-top: 1px solid var(--line); }
.pdp-price-row { gap: 14px; align-items: baseline; flex-wrap: wrap; margin: 0; }
.pdp-price-row .wc-block-components-product-price,
.pdp-price-row .wc-block-components-product-price__value {
  font-family: var(--font-mono); font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.01em;
}
.pdp-price-row .wc-block-components-product-price__regular { font-size: 18px; color: var(--ink-4); font-weight: 400; }
.pdp-vat { font-size: 13px; color: var(--ink-3); margin: 0; }
.pdp-monthly { font-size: 13px; color: var(--ink-2); margin: 0; }
.pdp-monthly:empty { display: none; }
.pdp-stock { font-size: 13px; color: var(--success); display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pdp-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pdp-stock:empty { display: none; }
.pdp-availability { gap: 14px; align-items: center; margin: 8px 0 0; }
.pdp-delivery { font-size: 13px; color: var(--ink-3); margin: 0; padding-left: 14px; border-left: 1px solid var(--line-2); }
.pdp-install { margin-top: 2px; }
.pdp-install .wp-block-button, .pdp-install .wp-block-button__link { width: 100%; }
.pdp-install .wp-block-button__link { background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-2); font-size: 14px; font-weight: 600; padding: 11px 16px; }
/* wrench glyph before "Lisa paigaldus" (PDP.jsx 213) */
.pdp-install .wp-block-button__link::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  background: currentColor; -webkit-mask: var(--ic-wrench) center / contain no-repeat; mask: var(--ic-wrench) center / contain no-repeat;
}
.pdp-install .wp-block-button__link:hover { background: var(--paper-2); border-color: var(--line-3); }

/* add-to-cart form: qty stepper + button */
.pdp-info .wc-block-add-to-cart-form,
.pdp-info form.cart { display: flex; gap: 12px; align-items: stretch; margin: 0; }

/* qty stepper (−/+) — built by qty-stepper.js, styled to match design SkQty */
.pdp-info form.cart .quantity { flex: 0 0 auto; }
.pdp-info form.cart .quantity.sk-qty {
  display: inline-flex; align-items: stretch; height: 48px;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: #fff; overflow: hidden;
}
.pdp-info form.cart .sk-qty-btn {
  width: 42px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.pdp-info form.cart .sk-qty-btn:hover { background: var(--paper-2); }
.pdp-info form.cart .sk-qty-btn:disabled { color: var(--ink-4); cursor: not-allowed; }
.pdp-info form.cart .quantity.sk-qty .qty {
  width: 52px; height: auto; min-height: 0; text-align: center;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0;
  background: transparent; font-family: var(--font-mono); font-size: 15px; -moz-appearance: textfield;
}
.pdp-info form.cart .quantity.sk-qty .qty::-webkit-outer-spin-button,
.pdp-info form.cart .quantity.sk-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-info form.cart .single_add_to_cart_button,
.pdp-info form.cart button[type="submit"] {
  flex: 1; min-height: 48px; background: var(--brand-500); color: #fff; border: 1px solid transparent;
  border-radius: var(--r-2); font-family: var(--font-sans); font-weight: 600; font-size: 15px; cursor: pointer;
  padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pdp-info form.cart .single_add_to_cart_button:hover { background: var(--brand-600); }
/* cart icon before the CTA label (design SkIcon name="cart") */
.pdp-info form.cart .single_add_to_cart_button::before {
  content: ""; display: inline-block; width: 18px; height: 18px; flex: 0 0 auto;
  margin-right: 8px; vertical-align: -3px; background: currentColor;
  -webkit-mask: var(--ic-cart) center / contain no-repeat; mask: var(--ic-cart) center / contain no-repeat;
}
:root { --ic-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5' fill='black' stroke='none'/%3E%3Ccircle cx='17' cy='20' r='1.5' fill='black' stroke='none'/%3E%3Cpath d='M3 4h2l2.5 12h11l2-8H6'/%3E%3C/svg%3E"); }

/* cart row: add-to-cart form (grows) + wishlist heart (fixed), aligned at the
   CTA baseline so the heart lines up with the add-to-cart button on both
   simple (one-row form) and variable (tall form) products. */
.pdp-info .pdp-cart-row { align-items: flex-end; }
.pdp-info .pdp-cart-row > .wp-block-woocommerce-add-to-cart-form { flex: 1 1 auto; min-width: 0; }
.pdp-info .pdp-cart-row > .sk-wish--button { flex: 0 0 auto; }
/* the block wrapper is itself flex; make the inner <form> fill it so the CTA
   spans the full width and the heart sits flush beside the button. */
.pdp-info .pdp-cart-row .wp-block-add-to-cart-form > form { flex: 1 1 auto; width: 100%; }
/* variable form: the add-to-cart row (qty + CTA + relocated heart) spans the
   full form width; CTA grows, heart sits flush beside it on the same baseline. */
.pdp-info form.variations_form .single_variation_wrap { width: 100%; }
.pdp-info form.variations_form .woocommerce-variation-add-to-cart {
  display: flex; gap: 12px; align-items: stretch; flex-wrap: nowrap; width: 100%;
}
/* heart relocated by qty-stepper.js into the add-to-cart row (simple + variable) */
.pdp-info form.cart .sk-wish--button { flex: 0 0 auto; }

/* variable product: single price per variant — hide the top range price block */
.pdp-info .pdp-price-block.sk-hidden-for-variable { display: none; }

/* variable product: the form wraps swatches + price + the qty/button row.
   Keep the form itself block; only the add-to-cart sub-wrap is the flex row. */
.pdp-info form.variations_form { display: block; }
.pdp-info form.variations_form .woocommerce-variation-add-to-cart {
  display: flex; gap: 12px; align-items: stretch; margin: 16px 0 0;
}
/* native select + reset link hidden once swatches take over */
.pdp-info form.sk-has-swatches table.variations,
.pdp-info form.sk-has-swatches .reset_variations { display: none; }
/* selected-variation price / availability block */
.pdp-info .single_variation { margin-top: 14px; }
.pdp-info .single_variation .woocommerce-variation-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdp-info .single_variation .price { font-family: var(--font-mono); font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1; }
/* variation järelmaks line injected by variation-swatches.js (PDP.jsx 188-190) */
.pdp-info .single_variation .woocommerce-variation-price .sk-monthly { font-size: 13px; color: var(--ink-2); }
.pdp-info .single_variation .woocommerce-variation-price .sk-monthly .sk-monthly-val { color: var(--ink); font-weight: 600; }
/* native WC tax suffix (woocommerce_price_display_suffix) — shown inline after the
   amount in every price HTML once taxes are enabled. Tuned to design (small, muted). */
.pdp-info .woocommerce-price-suffix { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
/* availability row: per-variant stock (green dot) + injected delivery label */
.pdp-info .single_variation .woocommerce-variation-availability { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 0; }
.pdp-info .single_variation .stock { font-size: 13px; color: var(--success); display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pdp-info .single_variation .stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pdp-info .single_variation .stock.out-of-stock { color: var(--stock-out); }
.pdp-info .single_variation .stock.available-on-backorder { color: var(--stock-order); }
/* delivery label injected by variation-swatches.js (value from sk_delivery meta) */
.pdp-info .single_variation .sk-deliv {
  font-size: 13px; color: var(--ink-3);
  padding-left: 14px; border-left: 1px solid var(--line-2);
}

/* swatch grid — kW · model · price buttons (design: ink-selected) */
.sk-swatch-field { margin: 0; }
.sk-swatch-label { display: block; margin: 0 0 8px; }
.sk-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sk-swatch {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  padding: 12px 14px; background: #fff; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-2); font-family: inherit;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.sk-swatch:hover { border-color: var(--line-3); }
.sk-swatch.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.sk-swatch.is-oos { opacity: 0.45; cursor: not-allowed; }
.sk-sw-kw { font-size: 15px; font-weight: 600; }
.sk-sw-model { font-size: 11px; opacity: 0.55; }
.sk-swatch.is-active .sk-sw-model { opacity: 0.7; }
.sk-sw-price { font-size: 12px; font-weight: 500; margin-top: 2px; }

/* trust strip */
.pdp-trust { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper-2); margin-top: 4px; gap: 0; overflow: hidden; }
.pdp-trust .wp-block-column { padding: 12px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.pdp-trust .wp-block-column:last-child { border-right: 0; }
.pdp-trust-t::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: var(--ink); -webkit-mask: var(--pdp-ico) center / contain no-repeat; mask: var(--pdp-ico) center / contain no-repeat; }
.pdp-trust .wp-block-column:nth-child(1) { --pdp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.pdp-trust .wp-block-column:nth-child(2) { --pdp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); }
.pdp-trust .wp-block-column:nth-child(3) { --pdp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.pdp-trust-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }
.pdp-trust-s { font-size: 11px; color: var(--ink-3); margin: 2px 0 0; padding-left: 26px; }

/* Mini trust strip — reused on cart + checkout (soojuskeskus/trust-mini). */
.trust-mini { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper-2); margin-top: clamp(24px, 4vw, 40px); gap: 0; overflow: hidden; }
.trust-mini .wp-block-column { padding: 12px 16px; border-right: 1px solid var(--line); }
.trust-mini .wp-block-column:last-child { border-right: 0; }
.trust-mini-t { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }
.trust-mini-s { font-size: 11px; color: var(--ink-3); margin: 2px 0 0; }

/* details tabs (Kirjeldus / Arvustused) + readable description typography.
   Imported descriptions carry junk classes from the old site (JsGRdQ, _04xlpA,
   para-style-body) — inert here; we style the panel generically so all products
   read cleanly without touching content. */
.pdp-details { margin-top: 8px; }

/* tab bar — uniform-size links, active = bold + underline, no padding on the
   links, flush to the content edge (no side inset). */
.pdp-details ul.wc-tabs.tabs,
.pdp-details .wp-block-woocommerce-product-details__tabs {
  display: flex; flex-wrap: wrap; gap: 28px; list-style: none;
  margin: 0; padding: 0 !important; border: 0 !important;
}
.pdp-details ul.wc-tabs.tabs li { margin: 0; padding: 0; border: 0 !important; background: transparent !important; }
.pdp-details ul.wc-tabs.tabs li::before { content: none; }
.pdp-details ul.wc-tabs.tabs li a {
  position: relative; display: inline-block; padding: 0 !important; font-size: 15px; font-weight: 500;
  color: var(--ink-3); text-decoration: none; border: 0 !important; background: transparent !important;
}
.pdp-details ul.wc-tabs.tabs li a:hover { color: var(--ink); }
.pdp-details ul.wc-tabs.tabs li.active a { color: var(--ink); font-weight: 600; }
.pdp-details ul.wc-tabs.tabs li.active a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--brand-500); }
/* Gap tabs → panel content: WooCommerce core sets `ul.tabs { margin: 0 0 1.618em }`
   and `.panel { padding: 0 }` at (0,4,2)/(0,4,1) — higher than our .pdp-details
   rules, so panel padding is dead. The real lever is the ul's bottom margin;
   override it with !important (can't out-specify WC core cleanly). */
.pdp-details ul.wc-tabs.tabs { margin-bottom: 44px !important; }
/* no side padding on the panels — content flush to the left edge */
.pdp-details .woocommerce-Tabs-panel { margin: 0; padding: 0 0 24px; }

/* panel — hide the redundant in-panel <h2> (the tab already labels it), keep a
   comfortable reading measure, lead the first paragraph. */
.pdp-details .woocommerce-Tabs-panel--description { max-width: 72ch; }
.pdp-details .woocommerce-Tabs-panel--description > h2 { display: none; }
.pdp-details .woocommerce-Tabs-panel--description p {
  font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px;
}
/* description bullet lists — brand check marker (matches .pg-checklist), not the default disc */
.pdp-details .woocommerce-Tabs-panel--description ul { list-style: none; margin: 2px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pdp-details .woocommerce-Tabs-panel--description ul li { position: relative; padding-left: 27px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pdp-details .woocommerce-Tabs-panel--description ul li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; background: var(--brand-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pdp-details .woocommerce-Tabs-panel--description > p:first-of-type {
  font-size: 17px; line-height: 1.6; color: var(--ink);
}
.pdp-details .woocommerce-Tabs-panel--description a { color: var(--brand-500); }

/* "Tooteleht" (and any trailing PDF) link → outline chip */
.pdp-details .woocommerce-Tabs-panel--description > p:last-child a {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 9px 16px; border: 1px solid var(--line-2); border-radius: var(--r-2);
  font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.pdp-details .woocommerce-Tabs-panel--description > p:last-child a:hover { border-color: var(--ink-3); }
.pdp-details .woocommerce-Tabs-panel--description > p:last-child a span { text-decoration: none !important; }

/* "Tehnilised andmed" — grouped spec table (PDP.jsx SPECS_PDP). */
/* Block flow (not flex) so groups get a real gap ABOVE the heading while the
   heading still hugs its own table — a uniform flex gap glued each new group to
   the previous table's last row. */
.pdp-details .pdp-specs { display: block; }
.pdp-specs-group { margin: 30px 0 0; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.pdp-specs-group:first-child { margin-top: 0; }
.pdp-specs-table { width: 100%; border-collapse: collapse; margin: 2px 0 0; }
.pdp-specs-table tr { border-bottom: 1px solid var(--paper-2); }
.pdp-specs-table tr:last-child { border-bottom: none; }
.pdp-specs-table th { text-align: left; font-weight: 400; padding: 11px 0; font-size: 14px; color: var(--ink-2); width: 46%; vertical-align: top; }
.pdp-specs-table td { padding: 11px 0; font-size: 14px; color: var(--ink); font-weight: 500; font-family: var(--font-mono); vertical-align: top; }

/* ── Arvustused — WooCommerce review (comment) form, matched to the site forms ── */
.pdp-details #reviews .woocommerce-noreviews { margin: 0 0 20px; font-size: 14px; color: var(--ink-3); }
.pdp-details #reviews .comment-reply-title { display: block; margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }
.pdp-details #reviews .comment-reply-title small { font-weight: 400; }
.pdp-details .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; margin: 20px 0 0; }
.pdp-details .comment-form > * { margin: 0; }
.pdp-details .comment-notes,
.pdp-details .comment-form-rating,
.pdp-details .comment-form-comment,
.pdp-details .comment-form-cookies-consent,
.pdp-details .form-submit { grid-column: 1 / -1; }
.pdp-details .comment-notes { font-size: 13px; color: var(--ink-3); }
.pdp-details .comment-form label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.pdp-details .comment-form .required { color: var(--brand-500); }
.pdp-details .comment-form input[type="text"],
.pdp-details .comment-form input[type="email"],
.pdp-details .comment-form select,
.pdp-details .comment-form textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-2);
  transition: border-color .15s, box-shadow .15s;
}
.pdp-details .comment-form input:focus,
.pdp-details .comment-form select:focus,
.pdp-details .comment-form textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(200,34,43,0.12); }
.pdp-details .comment-form textarea { resize: vertical; min-height: 120px; }
.pdp-details .comment-form select { cursor: pointer; max-width: 240px; }
.pdp-details .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.pdp-details .comment-form-cookies-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--brand-500); }
.pdp-details .comment-form-cookies-consent label { margin: 0; font-size: 12px; font-weight: 400; color: var(--ink-3); line-height: 1.45; }
.pdp-details .form-submit { margin-top: 2px; }
.pdp-details .comment-form .submit { width: auto; padding: 12px 26px; font-size: 14px; font-weight: 600; color: #fff; background: var(--brand-500); border: 0; border-radius: var(--r-pill); box-shadow: none; cursor: pointer; }
.pdp-details .comment-form .submit:hover { background: var(--brand-600); color: #fff; }
/* rating: label on its own line (top), stars as an inline row below */
.pdp-details .comment-form-rating label { display: block; margin: 0 0 8px; }
.pdp-details .comment-form-rating .stars { display: inline-flex; margin: 0; }
/* brand-red stars — form selector + displayed review ratings (empty stars stay light) */
.pdp-details .star-rating { color: var(--brand-500); }
.pdp-details .star-rating::before { color: var(--line-2); }
.pdp-details .star-rating span::before { color: var(--brand-500); }
.pdp-details .comment-form-rating p.stars a::before { color: var(--brand-500); }

/* PDP details sidebar — callback card + downloads (PDP.jsx side panel) */
.pdp-detailcols { gap: clamp(24px, 3vw, 40px); align-items: flex-start; margin-top: clamp(44px, 5vw, 64px); }
.pdp-aside { display: flex; flex-direction: column; gap: 16px; }
.pdp-aside-card { border: 1px solid var(--line); border-radius: var(--r-2); padding: 20px; background: #fff; }
.pdp-callback { background: var(--paper-2); }
.pdp-aside-t { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.pdp-callback .pdp-aside-t { display: flex; align-items: center; gap: 10px; }
.pdp-callback .pdp-aside-t::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pdp-aside-s { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0 0 12px; }
.pdp-aside-phone { font-family: var(--font-mono); font-size: 15px; margin: 0 0 12px; }
.pdp-aside-phone a { color: var(--ink); text-decoration: none; }
.pdp-callback-cta { margin: 0; }
.pdp-callback-cta .wp-block-button { width: 100%; }
.pdp-callback-cta .wp-block-button__link { display: block; width: 100%; text-align: center; }
.pdp-downloads .pdp-dl-list { list-style: none; margin: 0; padding: 0; }
.pdp-downloads .pdp-dl-list li { border-top: 1px solid var(--line); margin: 0; }
.pdp-downloads .pdp-dl-list li:first-child { border-top: 0; }
.pdp-downloads .pdp-dl-list a { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.pdp-downloads .pdp-dl-list a:hover { color: var(--ink); }
/* (download-icon ::before removed — prototype rows are name left, mono size right only, no glyph) */
.pdp-downloads .dl-name { flex: 1; }
.pdp-downloads .dl-size { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* ============================================================
   PDP 1:1 additions (impl:pdp handoff) — eyebrow brand·category row,
   native rating row, energy (heat/cool) + SCOP/SEER row, swatch header.
   ============================================================ */
:root { --ic-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }

/* eyebrow: brand + category on one baseline row (PDP.jsx 123 "Daikin · Õhk-õhk…") */
.pdp-info .pdp-eyebrow-row { gap: 6px; align-items: baseline; margin: 0; }
.pdp-eyebrow-row .pdp-eyebrow-cat::before { content: "· "; }

/* rating row (star brand + score + "(N arvustust)") then hairline then SKU */
.pdp-info .pdp-subrow .wc-block-components-product-rating { font-size: 13px; color: var(--ink-3); margin: 0; }
.pdp-info .pdp-subrow .wc-block-components-product-rating__stars { color: var(--brand-500); }
.pdp-info .pdp-subrow .wc-block-components-product-rating a { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.pdp-info .pdp-subrow .wp-block-woocommerce-product-rating:not(:empty) + .wc-block-components-product-sku { padding-left: 14px; border-left: 1px solid var(--line-2); }

/* energy row: chip A+++ + "küte" + chip A++ + "jahutus" + divider + SCOP/SEER */
.pdp-info .pdp-energyrow { gap: 10px; align-items: center; margin: 0; }
.pdp-energy-lbl { font-size: 12px; color: var(--ink-3); margin: 0; }
.pdp-energyrow p.pdp-energy:empty + .pdp-energy-lbl { display: none; }
.pdp-scopseer { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }
.pdp-scopseer::before { font-family: var(--font-sans); font-weight: 400; color: var(--ink-2); }
.pdp-scop::before { content: "SCOP "; }
.pdp-seer::before { content: "SEER "; }
.pdp-scopseer:empty { display: none; }
.pdp-energyrow .pdp-scop { padding-left: 14px; border-left: 1px solid var(--line-2); }

/* swatch header: label (left) + "Kuidas valida…" helper link (right) */
.sk-swatch-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; }
.sk-swatch-head .sk-swatch-label { margin: 0; }
.sk-swatch-guide { font-size: 12px; color: var(--brand-500); text-decoration: none; cursor: pointer; }

/* ============================================================
   Login / My Account — Account.jsx ("Sisene" + "Loo konto" cards).
   ============================================================ */
.woocommerce-account .wp-block-post-title { display: block; font-size: clamp(28px, 4vw, 32px); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 4px; }
.woocommerce-account .account-sub { font-size: 14px; color: var(--ink-3); margin: 0 0 26px; }
.woocommerce-account .wp-block-post-content { margin-top: 0; }
/* WC's woocommerce-blocktheme.css constrains `.woocommerce-account main .woocommerce`
   to max-width:1000px (specificity 0,2,1). Beat it with a higher-specificity
   selector so account forms use the full content container width (1192). */
.woocommerce-account main.wp-block-group .woocommerce { max-width: none; }
/* title is a direct main child (sits in root-padding box) — pin to contentSize
   so it lines up at the same left edge (x44/1192) as the content + header. */
.woocommerce-account main .wp-block-post-title { max-width: var(--wp--style--global--content-size, 1192px); }

/* login + register side by side as cards */
.woocommerce-account .u-columns.col2-set {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px; align-items: start; margin: 8px 0 40px;
}
/* WC adds a clearfix ::before/::after on .col2-set — they become grid items and
   shift the columns. Remove them so only .col-1 / .col-2 are grid items. */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after { content: none; display: none; }
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 { width: auto; float: none; margin: 0; }
/* single login (registration off) — full container width */
.woocommerce-account .woocommerce > .woocommerce-form-login { max-width: none; }

/* card shell */
.woocommerce-account .col-1,
.woocommerce-account .col-2,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; padding: 28px;
}
.woocommerce-account .col-2, .woocommerce-account .woocommerce-form-register { background: var(--paper-2); }
.woocommerce-account .u-columns .col-1 .woocommerce-form-login,
.woocommerce-account .u-columns .col-2 .woocommerce-form-register { border: 0; padding: 0; background: transparent; }

/* headings */
.woocommerce-account .u-columns h2,
.woocommerce-account .woocommerce > h2 {
  font-family: var(--font-sans); font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 16px;
}

/* fields */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .woocommerce-form__row { margin: 0 0 16px; }
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .woocommerce-form__label {
  display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px;
}
.woocommerce-account input.woocommerce-Input,
.woocommerce-account input.input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"] {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: var(--r-2);
  padding: 11px 14px; font-size: 14px; font-family: var(--font-sans); color: var(--ink); background: #fff;
}
.woocommerce-account input:focus { outline: none; border-color: var(--ink-3); }
.woocommerce-account .required { color: var(--brand-500); border: 0; }
.woocommerce-account .password-input { display: block; position: relative; }
.woocommerce-account .show-password-input { position: absolute; right: 12px; top: 12px; }

/* submit buttons (primary red) + remember inline */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button {
  background: var(--brand-500); color: #fff; border: 1px solid transparent; border-radius: var(--r-2);
  padding: 12px 22px; font-family: var(--font-sans); font-weight: 500; font-size: 15px; cursor: pointer;
}
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover { background: var(--brand-600); }
.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; font-size: 13px; color: var(--ink-2); font-weight: 400;
}
.woocommerce-account .woocommerce-form-login__rememberme input { accent-color: var(--ink); width: 14px; height: 14px; margin: 0; }
.woocommerce-account .lost_password a,
.woocommerce-account .woocommerce-LostPassword a { color: var(--brand-500); font-size: 13px; text-decoration: none; }
.woocommerce-account .woocommerce-privacy-policy-text p { font-size: 12px; color: var(--ink-3); }

/* logged-in: horizontal tab bar (Account.jsx) instead of a sidebar */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: block; max-width: none; }
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after { content: none; display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation { margin: 0 0 28px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow: visible; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border: 0; margin: 0; padding: 0; display: flex; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: inline-block; padding: 12px 16px; margin-bottom: -1px; color: var(--ink-3); text-decoration: none; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--brand-500); background: transparent; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-content { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--brand-500); }

/* orders / downloads tables — framed as a design-system card */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table {
  width: 100%; font-size: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden;
  border-collapse: separate; border-spacing: 0;
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 500; padding: 12px 16px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-table td { padding: 16px; border-bottom: 1px solid var(--paper-2); color: var(--ink-2); vertical-align: middle; }
.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account .woocommerce-table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-account .woocommerce-orders-table tbody tr:hover td { background: var(--paper-2); }
.woocommerce-account .woocommerce-orders-table th:first-child, .woocommerce-account .woocommerce-orders-table td:first-child { padding-left: 20px; }
.woocommerce-account .woocommerce-orders-table th:last-child, .woocommerce-account .woocommerce-orders-table td:last-child { padding-right: 20px; }
.woocommerce-account .woocommerce-orders-table__cell-order-number a { color: var(--ink); font-weight: 600; text-decoration: none; }
.woocommerce-account .woocommerce-orders-table__cell-order-status { color: var(--ink); font-weight: 500; }
.woocommerce-account .woocommerce-orders-table .woocommerce-button.button {
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-2);
  padding: 7px 14px; font-size: 13px; color: var(--ink); font-weight: 500; text-decoration: none; display: inline-block;
}
.woocommerce-account .woocommerce-orders-table .woocommerce-button.button:hover { border-color: var(--ink-3); }
/* order status colored pill (Account.jsx StatusBadge) */
.sk-order-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; }
.sk-order-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sk-order-status--processing, .sk-order-status--pending { background: var(--info-bg); color: var(--info); }
.sk-order-status--on-hold { background: var(--warning-bg); color: var(--warning); }
.sk-order-status--completed { background: var(--success-bg); color: var(--success); }
.sk-order-status--cancelled, .sk-order-status--failed, .sk-order-status--refunded { background: var(--paper-3); color: var(--ink-3); }

/* dashboard intro */
.woocommerce-account .woocommerce-MyAccount-content > p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }

/* addresses overview — billing + shipping cards */
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0; }
.woocommerce-account .woocommerce-Address { border: 1px solid var(--line); border-radius: var(--r-2); padding: 20px 22px; background: #fff; }
.woocommerce-account .woocommerce-Address header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.woocommerce-account .woocommerce-Address h3,
.woocommerce-account .woocommerce-Address .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address .woocommerce-Address-title h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.woocommerce-account .woocommerce-Address .edit { font-size: 13px; color: var(--brand-500); text-decoration: none; }
.woocommerce-account .woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--ink-2); }

/* edit-account / edit-address forms — two-up rows + section spacing */
.woocommerce-account .woocommerce-EditAccountForm fieldset,
.woocommerce-account .woocommerce-address-fields { border: 0; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-EditAccountForm legend { font-size: 14px; font-weight: 600; color: var(--ink); margin: 18px 0 10px; padding: 0; }
.woocommerce-account .woocommerce-EditAccountForm .clear,
.woocommerce-account .woocommerce-address-fields .clear { display: none; }

/* forms framed as a design-system card (white, line border, 4px radius) */
.woocommerce-account .woocommerce-MyAccount-content form.edit-account,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content form.edit-account.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-form-login,
.woocommerce-account .woocommerce-MyAccount-content form.lost_reset_password,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-account .woocommerce-MyAccount-content form.edit-address {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); padding: clamp(20px, 3vw, 28px);
}
/* edit-account: name fields two-up; rest full width */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row { margin: 0 0 16px; }
.woocommerce-account .woocommerce-EditAccountForm > p.woocommerce-form-row { max-width: none; }
.woocommerce-account .woocommerce-EditAccountForm > p.form-row-first,
.woocommerce-account .woocommerce-EditAccountForm > p.form-row-last { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
.woocommerce-account .woocommerce-EditAccountForm > p.form-row-first { margin-right: 14px; }
.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"] { margin-top: 4px; }

/* ============================================================
   Cart page — Cart.jsx: items (left) + order-summary card (right).
   ============================================================ */
.woocommerce-cart .wp-block-post-title {
  font-family: var(--font-sans); font-size: 32px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 20px;
}
/* items table */
.wc-block-cart-items { border: 0; }
.wc-block-cart-items__header { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--ink-4); border-bottom: 1px solid var(--line); }
.wc-block-cart-items__row { border-bottom: 1px solid var(--paper-2); }
.wc-block-cart-item__product .wc-block-components-product-name { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.wc-block-cart-item__prices .wc-block-components-product-price__value,
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-formatted-money-amount { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

/* qty selector */
.wc-block-components-quantity-selector { border: 1px solid var(--line-2); border-radius: var(--r-2); }

/* order-summary sidebar card */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper-2); padding: 24px; }
.wc-block-cart__totals-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--ink-4); font-weight: 600; }
.wc-block-components-totals-item { font-size: 14px; color: var(--ink-2); }
.wc-block-components-totals-item__value { font-family: var(--font-mono); color: var(--ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 16px; font-weight: 600; color: var(--ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--ink); }

/* coupon input */
.wc-block-components-totals-coupon__input .wc-block-components-text-input input,
.wc-block-components-totals-coupon__input input { border: 1px solid var(--line-2); border-radius: var(--r-2); }

/* checkout button — primary red */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container a,
.wc-block-cart__submit-container .wc-block-components-button {
  background: var(--brand-500); color: #fff; border-radius: var(--r-2); font-weight: 500; border: 0;
}
.wc-block-cart__submit-button:hover { background: var(--brand-600); }

/* checkbox-list options — flush rows (drop WC's default boxed container) */
.lst-sidebar .wp-block-woocommerce-product-filter-checkbox-list,
.lst-sidebar .wc-block-product-filter-checkbox-list,
.lst-sidebar .wc-block-product-filter-checkbox-list__items {
  border: 0 !important; padding: 0 !important; margin: 0; background: transparent !important;
  max-height: none !important; overflow: visible !important; list-style: none; box-shadow: none !important;
}
.lst-sidebar .wc-block-product-filter-checkbox-list__item { margin: 0; padding: 4px 0; }
.lst-sidebar .wc-block-product-filter-checkbox-list__label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lst-sidebar .wc-block-product-filter-checkbox-list__text {
  font-size: 13px; color: var(--ink-2); line-height: 1.3;
}
.lst-sidebar .wc-block-product-filter-checkbox-list__input { accent-color: var(--brand-500); width: 14px; height: 14px; }
.lst-sidebar .wc-block-product-filter-checkbox-list__count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
}
.lst-sidebar .wc-block-product-filter-checkbox-list__show-more { font-size: 12px; color: var(--brand-500); }

/* price slider */
.lst-sidebar .wc-block-product-filter-price-slider { margin-top: 6px; }
.lst-sidebar .wc-block-product-filter-price-slider__range { accent-color: var(--brand-500); }

/* active / removable chips */
.lst-sidebar .wc-block-product-filter-removable-chips__item {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; margin: 0 6px 6px 0;
  font-size: 12px; border: 1px solid var(--ink); background: var(--ink); color: #fff; border-radius: 999px;
}

/* ---- results head (count + sort) ---- */
.shop-archive .results-head { margin-bottom: 16px; gap: 12px; }
.shop-archive .wc-block-product-results-count { font-size: 13px; color: var(--ink-3); margin: 0; }
.shop-archive .wc-block-catalog-sorting select,
.shop-archive .wc-block-sort-select__select {
  font-size: 13px; color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--r-2); padding: 6px 28px 6px 10px; background-color: #fff;
}
/* sort icon before the select (Listing.jsx 45, ink-2 14px) */
:root { --ic-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h5'/%3E%3C/svg%3E"); }
.shop-archive .wc-block-catalog-sorting { display: inline-flex; align-items: center; gap: 8px; }
.shop-archive .wc-block-catalog-sorting::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: var(--ink-2);
  -webkit-mask: var(--ic-sort) center / contain no-repeat; mask: var(--ic-sort) center / contain no-repeat;
}

/* "Lähtesta" (filters head) + "Tühjenda" (results head) reset buttons — WC renders
   them as pill wp-element-buttons; design .reset = transparent text link (brand-500 12px). */
.shop-archive .wc-block-product-filter-clear-button { margin: 0; }
.shop-archive .wc-block-product-filter-clear-button .wp-block-button__link {
  background: transparent; border: 0; color: var(--brand-500); font-size: 12px; font-weight: 400;
  padding: 0; box-shadow: none; cursor: pointer;
}
.shop-archive .wc-block-product-filter-clear-button .wp-block-button__link:hover { text-decoration: underline; }
.shop-archive .results-head .chips-reset { margin-left: 4px; }

/* ============================================================
   Enriched product card — full ProductCard.jsx data:
   brand eyebrow · specs · energy chip · stock · €/kuu · badges.
   ============================================================ */
.wc-block-product-template li.wc-block-product { position: relative; }

/* corner badges over the image (design .corner): stacked pills top-left.
   new = ink "Uus" (sk_badge), sale = brand "−N%" (soojuskeskus/sale-percent). */
.wc-block-product-template li.wc-block-product .pcard-corner {
  position: absolute; top: 10px; left: 10px; z-index: 2; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.wc-block-product-template li.wc-block-product .pcard-badge-new,
.wc-block-product-template li.wc-block-product .pcard-badge-sale {
  margin: 0; padding: 2px 8px; border-radius: 999px; line-height: 1.6;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
}
.wc-block-product-template li.wc-block-product .pcard-badge-new { background: var(--ink); color: #fff; }
.wc-block-product-template li.wc-block-product .pcard-badge-sale { background: var(--brand-500); color: #fff; }
.wc-block-product-template li.wc-block-product .pcard-badge-new:empty,
.wc-block-product-template li.wc-block-product .pcard-badge-sale:empty { display: none; }
/* empty corner (no badges) must not sit as a clickable 20px box over the image */
.wc-block-product-template li.wc-block-product .pcard-corner:not(:has(p:not(:empty))) { display: none; }

/* brand eyebrow */
.wc-block-product-template li.wc-block-product .pcard-brand {
  padding: 14px 14px 0; margin: 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-4); font-weight: 500;
}
.wc-block-product-template li.wc-block-product .pcard-brand a { color: inherit; text-decoration: none; }
.wc-block-product-template li.wc-block-product .pcard-brand:empty { display: none; }

/* name sits tight under the brand eyebrow */
.wc-block-product-template li.wc-block-product .pcard-name.wp-block-post-title { padding-top: 6px; }

/* specs (mono) */
.wc-block-product-template li.wc-block-product .pcard-specs {
  padding: 0; margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
}
/* specs row: energy chip + specs text on one line (energy moved off the meta-row) */
.wc-block-product-template li.wc-block-product .pcard-specs-row {
  padding: 6px 14px 0; gap: 8px; align-items: center; flex-wrap: wrap;
}
.wc-block-product-template li.wc-block-product .pcard-specs:empty { display: none; }

/* meta row: energy chip + stock */
.wc-block-product-template li.wc-block-product .pcard-meta-row {
  padding: 10px 14px 0; margin: 0; gap: 10px; align-items: center;
}
.wc-block-product-template li.wc-block-product .pcard-energy {
  margin: 0; display: inline-flex; align-items: center; color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  background: var(--energy-aaa); padding: 2px 9px 2px 7px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}
.wc-block-product-template li.wc-block-product .pcard-energy:empty { display: none; }

/* stock chip (sk_stock meta) — green dot + label */
.wc-block-product-template li.wc-block-product .pcard-stock {
  margin: 0; padding: 0; font-size: 12px; color: var(--success);
  display: inline-flex; align-items: center; gap: 6px;
}
.wc-block-product-template li.wc-block-product .pcard-stock::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block;
}
.wc-block-product-template li.wc-block-product .pcard-stock:empty { display: none; }

/* foot: price column (left) + add-to-cart (right) */
.wc-block-product-template li.wc-block-product .pcard-foot {
  padding: 12px 14px 14px; margin-top: auto; gap: 10px; align-items: flex-end;
}
.wc-block-product-template li.wc-block-product .pcard-price-col .wc-block-components-product-price { padding: 0; margin: 0; }
.wc-block-product-template li.wc-block-product .pcard-price-col .wc-block-components-product-price__regular {
  color: var(--ink-4); font-weight: 400; font-size: 13px;
}
.wc-block-product-template li.wc-block-product .pcard-monthly {
  margin: 2px 0 0; padding: 0; font-size: 11px; color: var(--ink-3); font-family: var(--font-sans);
}
.wc-block-product-template li.wc-block-product .pcard-monthly:empty { display: none; }

/* button inside foot — auto width (not full-width), aligned to price baseline */
.wc-block-product-template li.wc-block-product .pcard-foot .wc-block-components-product-button { margin: 0; flex: 0 0 auto; }
.wc-block-product-template li.wc-block-product .pcard-foot .wc-block-components-product-button .wp-block-button__link {
  width: auto; white-space: nowrap;
}

/* Mobile: match the design's 2-column product grid (design mobile.css
   .featured-grid / .results-grid = 1fr 1fr, ≤720px). The WC product-collection
   "columns-4 __responsive" grid otherwise keeps 3–4 shrunk columns down to
   ~168px cards — cramped, and too narrow for the price + add-to-cart foot. The
   block exposes only a single `columns` value (no per-breakpoint control), so a
   CSS grid override is the supported responsive extension point. */
@media (max-width: 720px) {
  .wc-block-product-template.wc-block-product-template__responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Narrow mobile: even at 2 columns a ~170px card can't fit the price +
   add-to-cart side-by-side (the WC product-button is wider than the design's
   compact sm button), so the button overflows and clips. Stack: price on top,
   full-width button below — a clean tap target. (At 521–720px the 2-col cards
   are ≥256px, so the foot stays side-by-side and fits.) Lives in bridge.css
   because bridge loads after mobile.css and owns the WC product-card layer. */
@media (max-width: 520px) {
  .wc-block-product-template li.wc-block-product .pcard-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .wc-block-product-template li.wc-block-product .pcard-foot .wc-block-components-product-button .wp-block-button__link {
    width: 100%;
  }
}

/* ============================================================
   Custom mini-cart drawer (soojuskeskus/mini-cart) — 1:1 with
   the design-system CartDrawer.jsx. Reads/mutates via WC Store API.
   ============================================================ */
.sk-minicart { display: inline-flex; align-items: center; }
.sk-minicart__toggle {
  position: relative; background: transparent; border: 0; padding: 9px; margin: 0;
  color: var(--ink-2); border-radius: var(--r-1); cursor: pointer; line-height: 0;
}
.sk-minicart__toggle:hover { background: var(--paper-2); color: var(--ink); }
.sk-minicart__icon {
  display: block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ic-cart) center/contain no-repeat; mask: var(--ic-cart) center/contain no-repeat;
}
.sk-minicart__badge {
  position: absolute; top: 0; right: 0; transform: translate(25%, -25%);
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  background: var(--brand-500); color: #fff; font-size: 10px; line-height: 16px;
  font-weight: 600; text-align: center; border-radius: 999px; font-family: var(--font-mono);
}
.sk-minicart__badge[hidden] { display: none; }

/* scrim + drawer */
.sk-minicart__scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(4, 36, 59, 0.32);
  opacity: 0; transition: opacity 200ms var(--ease-out);
}
.sk-minicart__scrim.is-open { opacity: 1; }
.sk-minicart__scrim[hidden] { display: none; }
.sk-minicart__drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; z-index: 71;
  background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 280ms var(--ease-out);
}
.sk-minicart__drawer.is-open { transform: translateX(0); box-shadow: -12px 0 40px rgba(4, 36, 59, 0.18); }

/* head */
.sk-minicart__head { padding: 18px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.sk-minicart__head-l { display: flex; align-items: baseline; gap: 8px; }
.sk-minicart__title { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--ink); }
.sk-minicart__count { font-size: 12px; color: var(--ink-3); }
.sk-minicart__close { background: transparent; border: 0; cursor: pointer; color: var(--ink-2); width: 28px; height: 28px; padding: 0; line-height: 0; }
.sk-minicart__close::before { content: ""; display: inline-block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ic-x) center/contain no-repeat; mask: var(--ic-x) center/contain no-repeat; }

/* body + items */
.sk-minicart__body { flex: 1; overflow-y: auto; }
.sk-minicart__items { padding: 4px 0; }
.sk-minicart__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--paper-2); align-items: start; }
.sk-minicart__item-img { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; }
.sk-minicart__item-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sk-minicart__item-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-minicart__item-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sk-minicart__item-price { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; }

/* qty stepper + remove */
.sk-minicart__qty { display: flex; align-items: center; gap: 10px; }
.sk-minicart__stepper { display: inline-flex; align-items: center; height: 28px; border: 1px solid var(--line-2); border-radius: var(--r-1); overflow: hidden; }
.sk-minicart__qbtn { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; color: var(--ink-2); font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.sk-minicart__qbtn:hover:not(:disabled) { background: var(--paper-2); }
.sk-minicart__qbtn:disabled { opacity: 0.35; cursor: default; }
.sk-minicart__qv { min-width: 30px; text-align: center; font-size: 12px; font-family: var(--font-mono); color: var(--ink); }
.sk-minicart__rm { background: transparent; border: 0; cursor: pointer; color: var(--ink-3); padding: 4px; line-height: 0; }
.sk-minicart__rm:hover { color: var(--brand-500); }
.sk-minicart__rm::before { content: ""; display: inline-block; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ic-trash) center/contain no-repeat; mask: var(--ic-trash) center/contain no-repeat; }
.sk-minicart.is-busy .sk-minicart__items { opacity: 0.55; pointer-events: none; }

/* footer */
.sk-minicart__foot { border-top: 1px solid var(--line); padding: 20px 16px; background: var(--paper-2); display: flex; flex-direction: column; gap: 12px; }
.sk-minicart__foot[hidden] { display: none; }
.sk-minicart__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.sk-minicart__row--muted { font-size: 11px; color: var(--ink-3); }
.sk-minicart__row--total { align-items: baseline; padding-top: 8px; border-top: 1px solid var(--line); }
.sk-minicart__row--total > span:first-child { font-size: 14px; font-weight: 600; color: var(--ink); }
.sk-minicart__total { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--ink); }
.sk-minicart__subtotal { font-family: var(--font-mono); color: var(--ink); }
.sk-minicart__checkout, .sk-minicart__viewcart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-2); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-sm); text-decoration: none; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.sk-minicart__checkout { background: var(--brand-500); color: #fff; border: 1px solid transparent; padding: 12px 16px; }
/* These CTAs are <a> styled as buttons, so the global a:not(.wp-element-button):hover
   (dark-red text + underline, specificity 0,2,1) beat .sk-minicart__checkout:hover
   (0,2,0) and painted the label the same dark-red as the bg — "Vormista tellimus"
   vanished on hover. The a. prefix ties specificity; bridge loads after tokens so it
   wins by order. Pin the white label + soften the hover to a gentle lift, not a darken. */
a.sk-minicart__checkout:hover { background: var(--brand-500); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(4, 36, 59, 0.18); }
.sk-minicart__viewcart { background: #fff; color: var(--ink); border: 1px solid var(--line-2); padding: 11px 16px; }
a.sk-minicart__viewcart:hover { background: #fff; color: var(--ink); border-color: var(--line-3); text-decoration: none; transform: translateY(-1px); }
.sk-minicart__pay { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.sk-minicart__pay-icon { width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ic-shield) center/contain no-repeat; mask: var(--ic-shield) center/contain no-repeat; display: inline-block; }

/* empty state */
.sk-minicart__empty { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sk-minicart__empty[hidden] { display: none; }
.sk-minicart__empty-icon { width: 56px; height: 56px; border-radius: 999px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.sk-minicart__empty-icon::before { content: ""; display: inline-block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ic-cart) center/contain no-repeat; mask: var(--ic-cart) center/contain no-repeat; }
.sk-minicart__empty-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.sk-minicart__empty-text { font-size: 13px; color: var(--ink-2); max-width: 30ch; margin: 0; line-height: 1.5; }
.sk-minicart__empty-btn { background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 9px 14px; font-size: var(--fs-sm); text-decoration: none; }

/* mask icon data-URIs — on both the block and the portaled drawer/scrim */
.sk-minicart, .sk-minicart__drawer, .sk-minicart__scrim {
  --ic-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 4h2l2.5 12h11l2-8H6'/%3E%3C/svg%3E");
  --ic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ic-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13'/%3E%3C/svg%3E");
  --ic-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E");
}

/* mobile: drawer full-ish width */
@media (max-width: 480px) { .sk-minicart__drawer { width: 100vw; } }

/* mini-cart notice (added / error / stock) — design-system flash */
.sk-minicart__notice { margin: 12px 20px 0; padding: 10px 12px; border-radius: var(--r-2); font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.sk-minicart__notice[hidden] { display: none; }
.sk-minicart__notice.is-success { background: var(--success-bg); color: var(--success); }
.sk-minicart__notice.is-success::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.sk-minicart__notice.is-error { background: #FCEBEB; color: var(--brand-600); }
.sk-minicart__notice.is-error::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16v.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16v.5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Content width is one number: theme.json contentSize (1192px) == the design's
   `.container` content (--container 1240 − 2×--gutter 24). So the native block
   `constrained` layout (header, shop, PDP, cart, checkout) and the legacy
   `.container`/section frames (homepage, footer) land on the SAME content width
   and left edge — no staircase, no per-element overrides. No width hack here. */

/* ============================================================
   404 (not found) + search results — on-brand, design-system tokens
   ============================================================ */
.nf-screen { padding: clamp(48px, 8vw, 96px) 0; }
.nf-inner { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.nf-code { color: var(--brand-500); margin: 0; }
.nf-title { font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 10px 0 0; }
.nf-text { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 48ch; margin: 12px 0 0; }
.nf-search { width: 100%; max-width: 440px; margin: 26px auto 0; }
.nf-actions { justify-content: center; gap: 12px; margin-top: 20px; }
.nf-pop-label { margin: 40px 0 0; }
.nf-cats { justify-content: center; gap: 8px; margin-top: 12px; }
.nf-cat { margin: 0; }
.nf-cat a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 13px; color: var(--ink-2); background: #fff; }
.nf-cat a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

.search-screen { padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 8vw, 96px); }
.srch-head { max-width: 720px; }
.srch-title { font-size: clamp(26px, 4vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 6px 0 0; }
.srch-form { max-width: 520px; margin: 20px 0 0; }
.srch-results { margin-top: clamp(24px, 4vw, 40px); }
.srch-list { display: flex; flex-direction: column; }
.srch-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.srch-item-t { font-size: 18px; font-weight: 600; margin: 0; line-height: 1.3; }
.srch-item-t a { color: var(--ink); }
.srch-item-t a:hover { color: var(--brand-600); }
.srch-item-x { font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 6px 0 0; }
/* pager pills — shared by search results and the shop archive (functional extra,
   not in Listing.jsx; only renders once the catalog exceeds one page) */
.srch-pager,
.shop-archive .wp-block-query-pagination { margin-top: 28px; gap: 8px; }
.srch-pager .wp-block-query-pagination-numbers .page-numbers,
.shop-archive .wp-block-query-pagination-numbers .page-numbers { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); color: var(--ink-2); font-family: var(--font-mono); font-size: 13px; }
.srch-pager .wp-block-query-pagination-numbers .page-numbers.current,
.shop-archive .wp-block-query-pagination-numbers .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.srch-empty { max-width: 560px; padding: clamp(40px, 8vw, 72px) 0; }
.srch-empty-t { font-size: 24px; font-weight: 600; margin: 0; }
.srch-empty-x { font-size: 15px; color: var(--ink-3); margin: 8px 0 16px; }

/* core/search styling shared by the 404 + search-results forms */
.nf-search .wp-block-search__inside-wrapper,
.srch-form .wp-block-search__inside-wrapper { border: 1px solid var(--line-2); border-radius: var(--r-2); overflow: hidden; background: #fff; padding: 0; }
.nf-search input.wp-block-search__input,
.srch-form input.wp-block-search__input { border: 0; padding: 12px 14px; font-size: 15px; font-family: var(--font-sans); background: transparent; }
.nf-search input.wp-block-search__input:focus,
.srch-form input.wp-block-search__input:focus { outline: none; }
.nf-search .wp-block-search__button,
.srch-form .wp-block-search__button { background: var(--brand-500); color: #fff; border: 0; margin: 0; padding: 0 18px; font-weight: 500; font-size: 14px; cursor: pointer; }
.nf-search .wp-block-search__button:hover,
.srch-form .wp-block-search__button:hover { background: var(--brand-600); }

/* ============================================================
   Footer — native-block reconciliation (impl:footer handoff).
   Legal + contact lines are core/paragraph (prototype uses <span>), so the global
   p element rule (colors_and_type.css) overrides the inherited .footer typography;
   re-bind them to the prototype's muted legal + 0.85-opacity contact.
   ============================================================ */
.footer .legal p { margin: 0; font-size: 12px; color: var(--ink-4); }
.footer .brandcol .contact p { margin: 0; color: rgba(246, 244, 239, 0.85); max-width: none; }

/* ============================================================
   Cookie consent banner (GDPR) — fixed, design tokens
   ============================================================ */
/* compact card pinned bottom-LEFT (right side is reserved for the chat-bot) */
.sk-cookie { position: fixed; left: 16px; right: auto; bottom: 16px; z-index: 9999; width: 340px; max-width: calc(100vw - 32px); margin: 0; background: var(--navy-400); color: #fff; border-radius: var(--r-3); padding: 18px 20px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), var(--sh-pop); }
.sk-cookie[hidden] { display: none; }
.sk-cookie__text { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.85); }
.sk-cookie__text a { color: #fff; text-decoration: underline; }
.sk-cookie__actions { display: flex; gap: 10px; justify-content: flex-end; }
.sk-cookie__btn { padding: 9px 18px; border-radius: var(--r-2); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; font-family: var(--font-sans); }
.sk-cookie__decline { background: transparent; color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.28); }
.sk-cookie__decline:hover { color: #fff; border-color: rgba(255,255,255,0.55); }
.sk-cookie__accept { background: var(--brand-500); color: #fff; }
.sk-cookie__accept:hover { background: var(--brand-400); }

/* ============================================================
   Checkout (classic) — form (left) + sticky order summary (right)
   ============================================================ */
/* (no H1 on the checkout page — prototype Checkout.jsx has none; the .wp-block-post-title rule was dead) */
/* the WooCommerce/theme default caps .woocommerce at max-width:1000px + left-
   aligns it — that left the checkout 1000px wide, shoved to the left of the
   1192 content column (dead space on the right). Pin it to the content width,
   centred, so the form, notices and stepper all line up on 1192. */
/* checkout on the site CONTENT width (1240 container − 2×24 gutter = 1192) so the
   stepper, breadcrumb, notices and form line up with the header content and other
   pages (the 1240 container edge sat 24px left of the inset header content). */
.woocommerce-checkout .checkout-screen > * { max-width: 1192px; margin-inline: auto; }
.woocommerce-checkout main.wp-block-group .woocommerce { max-width: 1192px; margin-inline: auto; }
.woocommerce-checkout .checkout-steps-wrap { margin-top: clamp(20px, 2.4vw, 32px); }
.woocommerce-checkout form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
/* two independent columns — inc/checkout.php wraps left (details + «3 Maksmine»
   + payment) and right (summary + trust). Each column stacks on its own, so the
   sticky summary no longer couples its rows to the tall contact form (which had
   dropped the summary box far below its heading). */
.woocommerce-checkout .checkout-main-col { grid-column: 1; min-width: 0; }
/* the summary column IS the card — heading, review table and trust all sit
   inside its border (the heading used to float above the box). */
.woocommerce-checkout .checkout-summary-col { grid-column: 2; position: sticky; top: 24px; align-self: start; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper-2); padding: 22px; }
.woocommerce-checkout #order_review_heading { margin: 0 0 16px; font-size: 18px; font-weight: 600; color: var(--ink); }
.woocommerce-checkout #order_review { border: 0; background: transparent; padding: 0; container-type: inline-size; }
.woocommerce-checkout .checkout-trust { margin-top: 16px; }
/* contact + payment framed as cards ("1 Kontaktandmed" / "3 Maksmine") */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #payment { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); padding: 22px; }
/* The prototype checkout (Checkout.jsx) has no "create account" option — it is
   guest checkout only. Classic WC still prints its .woocommerce-account-fields
   ("Loo konto?") after the billing card, orphaned between the two section cards;
   hide it so the flow matches the design. Guest checkout is unaffected (the
   createaccount box just stays unchecked/absent). */
.woocommerce-checkout .woocommerce-account-fields { display: none; }
/* WooCommerce renders <h3>Billing details</h3> INSIDE .woocommerce-billing-fields,
   so "1 Kontaktandmed" sits inside its card. "3 Maksmine" is emitted by
   woocommerce_review_order_before_payment as a sibling right BEFORE #payment, so it
   would sit outside the payment card. Join heading + #payment into one visual card
   (heading = top cap, #payment = body) with pure CSS — no markup/hook change, so the
   AJAX order-review refresh that replaces #payment stays intact. */
.woocommerce-checkout .sk-payment-heading {
  margin: 24px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-2) var(--r-2) 0 0;
  padding: 22px 22px 0;
}
.woocommerce-checkout #payment {
  margin-top: 0;
  border-top: 0;
  border-radius: 0 0 var(--r-2) var(--r-2);
  padding-top: 16px;
}
@media (max-width: 860px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout .checkout-main-col,
  .woocommerce-checkout .checkout-summary-col { grid-column: 1; position: static; }
}
/* section headings */
.woocommerce-checkout h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; margin: 0 0 8px; }
/* fields */
.woocommerce-checkout .form-row { margin: 0 0 14px; }
/* the billing/shipping field-wrappers ship as a grid with odd narrow tracks, so
   the half-width fields collapsed to ~130px with big gaps. Force a clean 2-col
   grid: paired fields (name, postcode|city, phone|email) sit side by side, wide
   fields (country, street, county) span the whole row. Same rules for the
   «Saada teisele aadressile?» shipping form. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row { float: none; width: auto; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first { grid-column: 1; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last { grid-column: 2; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
/* pair postcode|city and phone|email by field id — id specificity survives the
   client-side address-i18n rewrite that forces address fields to form-row-wide.
   Desktop only; the mobile rule below stacks every field to one column. */
@media (min-width: 641px) {
  .woocommerce-checkout #billing_postcode_field,
  .woocommerce-checkout #shipping_postcode_field,
  .woocommerce-checkout #billing_phone_field { grid-column: 1 / 2; }
  .woocommerce-checkout #billing_city_field,
  .woocommerce-checkout #shipping_city_field,
  .woocommerce-checkout #billing_email_field { grid-column: 2 / 3; }
}
.woocommerce-checkout .form-row label { display: block; font-size: 13px; color: var(--ink-3); margin: 0 0 6px; }
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection { width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 11px 13px; font-size: 15px; font-family: var(--font-sans); background: #fff; color: var(--ink); box-sizing: border-box; }
/* focus + control accent = brand red, per the design system (.input:focus →
   brand-500 border + brand-100 glow) and the PDP form. Was grey --ink-3 / navy. */
.woocommerce .woocommerce-checkout .form-row input.input-text:focus,
.woocommerce .woocommerce-checkout .form-row textarea:focus,
.woocommerce .woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--open .select2-selection,
.woocommerce-checkout .select2-container--focus .select2-selection { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-100); }
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] { accent-color: var(--brand-500); }
.woocommerce-checkout abbr.required { color: var(--brand-500); border: 0; text-decoration: none; }
/* select2 country box: match the 47px text-input height. select2 stacks its own
   __rendered padding on top of our .select2-selection padding, ballooning the box
   to ~72px — flex-center the value and drop the internal padding instead. */
.woocommerce-checkout .select2-container--default .select2-selection--single { height: 47px; display: flex; align-items: center; padding: 0 13px; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: normal; flex: 1 1 auto; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; }
/* align the "Eesti" text with the other fields' 13px inset — the __rendered inner
   padding survives class selectors, so pin it by field id. */
.woocommerce-checkout #billing_country_field .select2-selection__rendered,
.woocommerce-checkout #shipping_country_field .select2-selection__rendered { padding-left: 0; padding-right: 18px; }
/* order review table — table-layout:fixed so content wraps instead of pushing
   the table wider than the card (was overflowing the right padding); kill Woo's
   default -1px right margin too. */
.woocommerce-checkout-review-order-table { width: 100%; max-width: 100%; table-layout: fixed; margin: 0 0 20px; font-size: 14px; border-collapse: collapse; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 9px 0; text-align: left; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.woocommerce-checkout-review-order-table .amount, .woocommerce-checkout-review-order-table bdi { font-family: var(--font-mono); color: var(--ink); }
.woocommerce-checkout-review-order-table .order-total th { font-size: 15px; color: var(--ink); }
.woocommerce-checkout-review-order-table .order-total .amount { font-size: 20px; font-weight: 700; }
/* Summary reads as clean stacked sections, not a spreadsheet: the prototype
   summary (Checkout.jsx 341-388) has no "Toode | Vahesumma" column header, and
   every amount sits flush right in a space-between row. */
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total td { text-align: right; }
/* payment + place order */
/* payment card bg/border/radius/padding come from the shared billing/#payment card
   rule in the grid block above; only reset the legacy top margin here. */
.woocommerce-checkout #payment { margin-top: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; list-style: none; margin: 0 0 14px; }
/* RadioCard payment methods (Checkout.jsx 259-323) */
.woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 8px; padding: 14px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-2); }
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border: 2px solid var(--ink); padding: 13px; }
.woocommerce-checkout #payment ul.payment_methods label { font-size: 14px; font-weight: 600; color: var(--ink); }
.woocommerce-checkout #payment div.payment_box { margin-top: 10px; padding: 16px; background: var(--paper-2); border-radius: var(--r-2); font-size: 12px; color: var(--ink-3); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order button#place_order { width: 100%; background: var(--brand-500); color: #fff; border: 0; border-radius: var(--r-2); padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer; }
.woocommerce-checkout #payment .place-order button#place_order:hover { background: var(--brand-600); }

/* ============================================================
   Thank-you / order-received (ThankYou.jsx) — centered, green check
   ============================================================ */
:root { --ic-check-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.woocommerce-order { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) 0; }
.woocommerce-order .woocommerce-thankyou-order-received {
  text-align: center; font-size: clamp(26px, 4vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
  background: var(--success-bg); border: 0; border-radius: var(--r-4); padding: 32px 24px 28px; margin: 0 0 24px;
}
.woocommerce-order .woocommerce-thankyou-order-received::before { content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: var(--ic-check-w) center / 36px no-repeat, var(--success); }
/* default Woo order-overview chips hidden — prototype shows a single order-number
   chip with "Kopeeri" (rendered by inc/checkout.php as .ty-chip). */
.woocommerce-order ul.woocommerce-order-overview { display: none; }
.woocommerce-order h2 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 24px 0 12px; }
.woocommerce-order .woocommerce-table--order-details { width: 100%; font-size: 14px; border-collapse: collapse; }
.woocommerce-order .woocommerce-table--order-details th, .woocommerce-order .woocommerce-table--order-details td { padding: 10px 0; text-align: left; border-bottom: 1px solid var(--line); }
.woocommerce-order .woocommerce-table--order-details .amount, .woocommerce-order .woocommerce-table--order-details bdi { font-family: var(--font-mono); color: var(--ink); }
.woocommerce-order .woocommerce-customer-details { margin-top: 24px; }
.woocommerce-order .woocommerce-customer-details address { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 16px 18px; }

/* ============================================================
   Cart / Checkout / Thank-you 1:1 (impl:cart-checkout handoff).
   Markup lives in patterns/checkout-steps.php, patterns/cart-addon.php,
   templates/page-cart.html and the plugin's inc/checkout.php hooks.
   ============================================================ */
/* icon masks used by this layer (--ic-cart / --ic-check-w / --ic-wrench are defined
   elsewhere; shield + trash promoted from the .sk-minicart scope to :root). */
:root {
  --ic-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E");
  --ic-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13'/%3E%3C/svg%3E");
  --ic-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
  --ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M5 4h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E");
  --ic-arrowl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
}

/* ---- checkout step indicator (Checkout.jsx 93-120; patterns/checkout-steps.php) ---- */
.checkout-steps-wrap { padding: 8px 0 24px; }
.checkout-steps { display: flex; align-items: center; gap: 16px; }
.checkout-steps .step { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.checkout-steps .step.is-done, .checkout-steps .step.is-current { color: var(--ink); }
.checkout-steps .step.is-current { font-weight: 600; }
.checkout-steps .step .num { width: 28px; height: 28px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.checkout-steps .step.is-current .num { background: var(--ink); border: 0; color: #fff; }
.checkout-steps .step.is-done .num { background: var(--success); border: 0; color: transparent; background-image: var(--ic-check-w); background-position: center; background-size: 14px; background-repeat: no-repeat; }
.checkout-steps .step:not(:last-of-type)::after { content: ""; width: 60px; height: 1px; background: var(--line-2); }
.checkout-steps-note { margin: 0 0 0 auto; font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.checkout-steps-note::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ic-shield) center / contain no-repeat; mask: var(--ic-shield) center / contain no-repeat; }

/* ---- numbered section headings (1 Kontaktandmed / 2 Tarneviis / 3 Maksmine) ---- */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.sk-payment-heading, .sk-ship-head td { display: flex; align-items: center; }
.woocommerce-checkout .woocommerce-billing-fields > h3::before,
.sk-payment-heading .num, .sk-ship-head .num {
  width: 28px; height: 28px; flex: 0 0 auto; margin-right: 10px; border-radius: 999px;
  background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.woocommerce-checkout .woocommerce-billing-fields > h3::before { content: "1"; }

/* ---- contact fields: help text + newsletter (Checkout.jsx 132-158) ---- */
.woocommerce-checkout .form-row .description { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.woocommerce-checkout .sk-newsletter { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.woocommerce-checkout .sk-newsletter input { accent-color: var(--brand-500); width: 14px; height: 14px; }
/* frame the optional «Saada teisele aadressile?» toggle + order-notes so nothing
   floats loose between the numbered contact / payment cards. */
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); padding: 18px 22px; margin-top: 16px; }
.woocommerce-checkout .woocommerce-shipping-fields h3 { margin: 0; }
.woocommerce-checkout .woocommerce-shipping-fields h3 label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.woocommerce-checkout .woocommerce-shipping-fields h3 input { width: 16px; height: 16px; accent-color: var(--brand-500); }
.woocommerce-checkout .woocommerce-shipping-fields .shipping_address { margin-top: 16px; }
.woocommerce-checkout .woocommerce-additional-fields .form-row { margin: 0; }
@media (max-width: 640px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row { grid-column: 1 / -1; }
}

/* ---- shipping methods as RadioCards + note (Checkout.jsx 168-249) ---- */
.sk-ship-head td { padding-top: 18px; font-size: 15px; font-weight: 600; color: var(--ink); border-bottom: 0; }
/* Classic WC renders the shipping row as <th>Shipment</th><td>options</td>, 50/50 in
   the fixed-layout review table — so the English "Shipment" label duplicates our
   "2 Tarneviis" heading and the RadioCards get squeezed into the 156px value column.
   Break the row out of the table cell model so the cards span the full summary width,
   and drop the label. CSS-only → survives the update_order_review AJAX re-render. */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { display: block; }
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th { display: none; }
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { display: block; width: 100%; padding: 0; border-bottom: 0; }
/* display:block drops the td to the table's left edge, but table-layout:fixed still
   caps the anonymous cell at the 156px value column. #order_review is a query
   container (container-type:inline-size), so 100cqi = the review-table width — the
   RadioCard list overflows the capped cell to span the full summary, responsively. */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals #shipping_method { width: 100cqi; }
.woocommerce-checkout ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout ul#shipping_method li { display: block; margin: 0 0 8px; padding: 14px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-2); }
.woocommerce-checkout ul#shipping_method li:has(input:checked) { border: 2px solid var(--ink); padding: 13px; }
.woocommerce-checkout ul#shipping_method label { display: inline; font-size: 14px; font-weight: 600; color: var(--ink); }
.woocommerce-checkout ul#shipping_method .amount { font-family: var(--font-mono); color: var(--ink-2); }
.sk-ship-note td { font-size: 12px; color: var(--ink-3); border-bottom: 0; padding-top: 2px; }

/* ---- order review line items: thumb 56px + qty badge (Checkout.jsx 349-372) ---- */
.woocommerce-checkout-review-order-table td.product-name { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.sk-review-thumb { position: relative; width: 56px; height: 56px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); display: flex; align-items: center; justify-content: center; padding: 4px; }
.sk-review-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sk-review-qty { position: absolute; top: -6px; right: -6px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 500; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.sk-review-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.woocommerce-checkout-review-order-table .product-quantity { display: none; }

/* ---- checkout sidebar trust box (Checkout.jsx 389-402) ---- */
.checkout-trust { margin-top: 12px; padding: 14px 18px; background: var(--paper-2); border-radius: var(--r-2); display: flex; flex-direction: column; gap: 6px; }
.checkout-trust .ct-i { margin: 0; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.checkout-trust .ct-i::before { content: ""; width: 14px; height: 14px; flex: none; background: #04243B; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
/* per-icon mask-image must be scoped under .checkout-trust to match the base
   rule's (0,2,1) specificity — otherwise the base `mask:` shorthand above
   (which resets mask-image to none) wins and every icon renders as a solid
   #04243B square instead of the masked line-icon. */
.checkout-trust .ct-shield::before { -webkit-mask-image: var(--ic-shield); mask-image: var(--ic-shield); }
.checkout-trust .ct-truck::before { -webkit-mask-image: var(--ic-truck); mask-image: var(--ic-truck); }
.checkout-trust .ct-phone::before { -webkit-mask-image: var(--ic-phone); mask-image: var(--ic-phone); }

/* ---- thank-you / order-received (ThankYou.jsx 21-174) ---- */
.ty-intro { max-width: 52ch; margin: 10px auto 0; text-align: center; font-size: 16px; color: var(--ink-2); }
.ty-intro strong { color: var(--ink); }
.ty-chip { margin: 16px auto 0; padding: 12px 20px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-2); display: flex; width: fit-content; align-items: center; gap: 14px; }
.ty-chip-no { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.ty-copy { background: transparent; border: 0; padding: 0; color: var(--brand-500); cursor: pointer; font-size: 12px; font-weight: 500; }
.ty-cards { max-width: 800px; margin: 44px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ty-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); padding: 20px 24px; }
.ty-card-hd { display: flex; align-items: center; gap: 10px; }
.ty-badge { width: 32px; height: 32px; border-radius: var(--r-2); flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; }
.ty-badge.is-omniva { background: #E30613; }
.ty-badge.is-courier { background: var(--brand-50); }
.ty-badge.is-courier::before { content: ""; width: 16px; height: 16px; background: var(--brand-500); -webkit-mask: var(--ic-truck) center / contain no-repeat; mask: var(--ic-truck) center / contain no-repeat; }
.ty-badge.is-pay { background: var(--ink); }
.ty-card-t { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; }
.ty-card-t small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.ty-card-t small.ty-paid { color: var(--success); }
.ty-row { margin: 0; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.ty-row .mono { font-weight: 600; color: var(--ink); }
.ty-muted { color: var(--ink-3); font-weight: 400; }
.woocommerce-order .woocommerce-order-details { max-width: 800px; margin: 16px auto 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); padding: 0; position: relative; }
.woocommerce-order-details__title { font-size: 14px; font-weight: 600; padding: 14px 20px; border-bottom: 1px solid var(--line); margin: 0; }
.ty-count { position: absolute; top: 16px; right: 20px; font-size: 12px; color: var(--ink-3); }
.woocommerce-order td.woocommerce-table__product-name { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; }
.sk-ty-thumb { width: 64px; height: 64px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); display: flex; align-items: center; justify-content: center; padding: 6px; }
.sk-ty-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.woocommerce-order .woocommerce-table--order-details tfoot { background: var(--paper-2); }
.woocommerce-order tfoot .woocommerce-Price-amount { font-family: var(--font-mono); }
.woocommerce-order tfoot tr:last-child th { font-size: 14px; font-weight: 600; }
.woocommerce-order tfoot tr:last-child .amount { font-size: 20px; font-weight: 700; }
.ty-actions { max-width: 800px; margin: 32px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ty-back { color: var(--brand-500); font-size: 14px; font-weight: 500; text-decoration: none; }
.ty-btns { display: flex; gap: 10px; }
.ty-btns a { border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 10px 16px; font-size: 14px; color: var(--ink); text-decoration: none; background: #fff; }

/* ---- cart page: title count + below-row (continue / clear) + empty guard ---- */
.cart-screen .wp-block-post-title { display: flex; align-items: baseline; gap: 12px; }
/* Cart: breadcrumbs, title and the cart block all align to the 1240 site
   container. WC's blocktheme CSS caps .woocommerce children at 1000px and the
   constrained layout stops at 1192 — beat both with higher specificity. */
.woocommerce-cart .cart-screen > .wp-block-post-title,
.woocommerce-cart .cart-screen > .wp-block-woocommerce-breadcrumbs,
.woocommerce-cart .cart-screen > .woocommerce-breadcrumb,
.woocommerce-cart .cart-screen > nav.woocommerce-breadcrumb,
.woocommerce-cart .cart-screen > .wp-block-post-content,
.woocommerce-cart main.wp-block-group .woocommerce {
  max-width: 1240px; margin-inline: auto;
}
.cart-count { font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.cart-below { padding-top: 20px; }
.continue-shopping { margin: 0; }
.continue-shopping a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); text-decoration: none; }
.continue-shopping a:hover { color: var(--ink-2); }
.continue-shopping a::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic-arrowl) center / contain no-repeat; mask: var(--ic-arrowl) center / contain no-repeat; }
.sk-clear-cart { background: transparent; border: 0; padding: 0; color: var(--ink-3); font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.sk-clear-cart::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ic-trash) center / contain no-repeat; mask: var(--ic-trash) center / contain no-repeat; }
body.sk-cart-empty .cart-addon, body.sk-cart-empty .cart-below, body.sk-cart-empty .trust-mini { display: none; }

/* ---- cart upsell "Lisa paigaldus" (Cart.jsx 227-241; patterns/cart-addon.php) ---- */
.cart-addon { margin-top: 32px; background: var(--paper-2); border: 1px dashed var(--line-2); border-radius: var(--r-2); padding: 20px; display: flex; gap: 16px; align-items: center; }
.cart-addon-ico { width: 56px; height: 56px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); position: relative; }
.cart-addon-ico::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: #04243B; -webkit-mask: var(--ic-wrench) center / contain no-repeat; mask: var(--ic-wrench) center / contain no-repeat; }
.cart-addon-txt { flex: 1; }
.cart-addon-t { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.cart-addon-s { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.cart-addon-price { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--ink-2); }
.cart-addon-cta { margin: 0; }

/* ---- empty cart state (Cart.jsx 118-164; seeded into the cart block) ---- */
.cart-empty { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 72px 24px; text-align: center; }
.cart-empty-ico { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); position: relative; }
.cart-empty-ico::after { content: ""; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; background: var(--ink-3); -webkit-mask: var(--ic-cart) center / contain no-repeat; mask: var(--ic-cart) center / contain no-repeat; }
.cart-empty-t { font-size: 24px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.cart-empty-s { font-size: 14px; color: var(--ink-2); max-width: 42ch; margin: 0 auto; }
.cart-empty-ctas { margin-top: 22px; }
.cart-empty-cats { margin: 24px auto 0; padding-top: 24px; border-top: 1px solid var(--line); max-width: 600px; }
.cart-empty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 8px; margin-top: 12px; }
.cart-empty-cat { margin: 0; }
.cart-empty-cat a { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); text-decoration: none; text-align: left; }
.cart-empty-cat strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.cart-empty-cat .mono { font-size: 11px; color: var(--ink-3); }