/* ==========================================================================
   home-smart.css — the smart homepage (inc/home-smart.php, v1.2.108).
   Loaded on the front page only, after main.css / woocommerce.css / card-d3.css
   / mega-banner.css / hero-polish.css (enqueue priority 30).

   What this sheet changes is LAYOUT, not the product card: the cards keep the
   approved card-d3.css / main.css .home-rail recipe. Four things live here:
     1. shelves as one swipe row (phones, tablets) / one row with arrows (desktop)
     2. the "Poe lemmikud" / "Sinu jaoks" tabs
     3. the "Nädala pakkumine" spotlight card
     4. the compact phone top (MEGA cards in one row, value props as chips)
   Every block is switched by a class the PHP prints only when its owner toggle
   is on, so a toggle OFF leaves the old rules in charge untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · `hidden` must win.
   There is no global [hidden] rule in this theme, and main.css gives
   .home-section__more `display:inline-flex` (0,1,0) — which beats the browser's
   own [hidden]{display:none}. The script hides the "Vaata kõiki" link, the
   arrows, the tab list and the "why" line with the attribute, so restate it here
   for everything inside these sections.
   -------------------------------------------------------------------------- */
.og-shelf[hidden],
.og-shelf [hidden],
.og-spot [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   1 · Swipe rows
   Row geometry is driven by four custom properties so the three breakpoints
   only change numbers, never mechanics:
     --og-cols   cards visible (fractional = the next card peeks)
     --og-gaps   whole gaps inside that width (calc() has no floor())
     --og-gap    gap between cards
     --og-bleed  how far the row runs past the container edge (phone/tablet)
   Card width = (row width − gaps × gap) / cols.
   -------------------------------------------------------------------------- */
.og-shelf {
  --og-cols: 2.15;
  --og-gaps: 2;
  --og-gap: var(--space-12, 12px);
  --og-bleed: 18px; /* = main.css:496 phone container gutter */
}
@media (min-width: 768px) {
  .og-shelf { --og-cols: 3.3; --og-gaps: 3; --og-gap: var(--space-16, 16px); --og-bleed: var(--space-24, 24px); }
}
@media (min-width: 1024px) {
  .og-shelf { --og-cols: 5; --og-gaps: 4; --og-bleed: 0px; }
}

.og-shelf__viewport { position: relative; }

/* The row itself. Phones and tablets: every swipe shelf, including the old
   fallback rails front-page.php prints when a smart shelf is switched off.
   Desktop: only shelves that HAVE arrows (the viewport) — a fallback rail has no
   arrows, so on a mouse-driven screen it keeps its original 5-column grid rather
   than becoming a row nobody can see is scrollable.

   !important on grid-template-columns beats main.css:549-550
   `.home-rail .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important }`
   (0,2,1); these selectors are (0,3,1) / (0,4,1). `none` hands every card to
   grid-auto-columns. display stays grid (woocommerce.css:88 forces it with
   !important) — a column-flow grid keeps align-items:stretch, so every card in a
   row is one height exactly as in the old grid. */
@media (max-width: 1023px) {
  .home-rail.og-shelf--swipe ul.products,
  .home-rail.og-shelf--swipe .woocommerce ul.products {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--og-gaps) * var(--og-gap)) / var(--og-cols));
    gap: var(--og-gap);
    align-items: stretch;
    /* The row bleeds to the screen edge and the padding brings the first card
       back to the gutter: content box = container width, so the percentage above
       is still a share of what the shopper sees. Vertical padding is room for the
       card's hover lift and shadow, which overflow-x:auto would otherwise clip;
       the negative block margins give that room back to the layout. */
    margin: calc(-1 * var(--space-8, 8px)) calc(-1 * var(--og-bleed)) calc(-1 * var(--space-16, 16px));
    padding: var(--space-8, 8px) var(--og-bleed) var(--space-16, 16px);
    scroll-padding-inline: var(--og-bleed);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .home-rail.og-shelf--swipe ul.products::-webkit-scrollbar { display: none; }
  .home-rail.og-shelf--swipe ul.products > li.product { scroll-snap-align: start; min-width: 0; }
}
@media (min-width: 1024px) {
  .home-rail.og-shelf--swipe .og-shelf__viewport ul.products {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--og-gaps) * var(--og-gap)) / var(--og-cols));
    gap: var(--og-gap);
    align-items: stretch;
    margin: calc(-1 * var(--space-8, 8px)) 0 calc(-1 * var(--space-16, 16px));
    padding: var(--space-8, 8px) 0 var(--space-16, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .home-rail.og-shelf--swipe .og-shelf__viewport ul.products::-webkit-scrollbar { display: none; }
  .home-rail.og-shelf--swipe .og-shelf__viewport ul.products > li.product { scroll-snap-align: start; min-width: 0; }
}

/* Arrows — desktop only. The script reveals them (removes `hidden`) only when the
   open row really overflows, and disables the one at an end. */
.og-shelf__arrow { display: none; }
@media (min-width: 1024px) {
  .og-shelf__arrow:not([hidden]) {
    position: absolute; top: 38%; z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0;
    transform: translateY(-50%);
    border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-circle, 50%);
    background: var(--surface, #ffffff); color: var(--slate-dark, #1e293b);
    box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .45);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease, visibility .18s ease;
  }
  .og-shelf__arrow--prev { left: -18px; }
  .og-shelf__arrow--next { right: -18px; }
  .og-shelf__arrow:not([hidden]):hover { background: var(--green, #047857); border-color: var(--green, #047857); color: #ffffff; }
  .og-shelf__arrow:focus-visible { outline: 2px solid var(--green, #047857); outline-offset: 3px; }
  /* At an end the arrow leaves the tab order too (visibility), not just the eye. */
  .og-shelf__arrow:disabled { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* --------------------------------------------------------------------------
   2 · Tabs
   A segmented row of pills. Selected = dark FILL, not a colour shift on the same
   outline, so the state reads without colour vision. Weight stays 600 on every
   pill so selecting one never nudges its neighbours sideways.
   -------------------------------------------------------------------------- */
.og-shelf .home-section__head--row:has(+ .og-shelf__tabs:not([hidden])),
.og-shelf .home-section__head--row:has(+ .og-foryou__why:not([hidden])) { margin-bottom: var(--space-16, 16px); }

.og-shelf__tabs {
  display: flex; gap: var(--space-8, 8px);
  margin: 0 0 var(--space-20, 20px); padding: 2px 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.og-shelf__tabs::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) {
  .og-shelf__tabs { margin-inline: calc(-1 * var(--og-bleed)); padding-inline: var(--og-bleed); scroll-padding-inline: var(--og-bleed); }
}

.og-shelf__tab {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin: 0; padding: 0 var(--space-20, 20px);
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-pill, 999px);
  background: var(--surface, #ffffff); color: var(--slate-600, #475569);
  font-family: var(--font-body, "DM Sans", system-ui, sans-serif);
  font-size: 14.5px; font-weight: var(--fw-semibold, 600); line-height: 1; white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.og-shelf__tab:hover { border-color: var(--slate-300, #cbd5e1); color: var(--slate-dark, #1e293b); }
.og-shelf__tab[aria-selected="true"] {
  background: var(--slate-dark, #1e293b); border-color: var(--slate-dark, #1e293b); color: #ffffff;
  box-shadow: 0 8px 18px -12px rgba(15, 23, 42, .7);
}
.og-shelf__tab:focus-visible { outline: 2px solid var(--green, #047857); outline-offset: 2px; }

/* A panel is focusable (tabindex=0, WAI-ARIA tabs); give it the same ring. */
.og-shelf__panel:focus-visible { outline: 2px solid var(--green, #047857); outline-offset: 4px; border-radius: var(--radius-16, 16px); }

/* "Sinu jaoks" — the one sentence saying why these products are here. */
.og-foryou__why { margin: 0 0 var(--space-16, 16px); color: var(--slate-500, #64748b); font-size: var(--fs-sm, 14px); line-height: 1.5; }

/* Loading skeleton: the same row geometry as the real cards, so the section does
   not change height when they arrive. aspect-ratio is the measured card ratio at
   375px on 2026-09-13 (cards 147px wide, 397–423px tall with the button → ≈ .37);
   it scales with the card width at every breakpoint. */
.og-shelf__skeleton {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--og-gaps) * var(--og-gap)) / var(--og-cols));
  gap: var(--og-gap);
  margin: 0; padding: 0; list-style: none; overflow: hidden;
}
@media (max-width: 1023px) {
  .og-shelf__skeleton { margin-inline: calc(-1 * var(--og-bleed)); padding-inline: var(--og-bleed); }
}
/* The ready section also shows the "why" line and the two tabs, which the loading
   state cannot know yet. Measured at 375px: loading 569px, ready 662px — a 93px
   jump. This placeholder holds that room (a text bar + two pill bars) so the
   cards land where the skeleton was. If "Sarnased" turns out empty the tabs stay
   hidden and the section shrinks instead of growing, which moves nothing below
   it upward past the reader. */
.og-foryou[data-og-state="loading"] .og-shelf__viewport::before {
  content: ""; display: block;
  height: 80px; margin: -2px 0 var(--space-20, 20px);
  background-image:
    linear-gradient(#eef2f6, #eef2f6),
    linear-gradient(#eef2f6, #eef2f6),
    linear-gradient(#eef2f6, #eef2f6);
  background-size: 62% 14px, 152px 44px, 104px 44px;
  background-position: 0 2px, 0 36px, 160px 36px;
  background-repeat: no-repeat;
}
.og-shelf__skeleton li {
  aspect-ratio: var(--og-card-ratio, .37);
  border-radius: var(--radius-16, 16px);
  background: linear-gradient(100deg, #eef2f6 30%, #f8fafc 50%, #eef2f6 70%);
  background-size: 240% 100%;
  animation: og-skeleton 1.5s ease-in-out infinite;
}
@keyframes og-skeleton {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* --------------------------------------------------------------------------
   3 · "Nädala pakkumine"
   Calm on purpose: one large product, the real price, the real saving, "Laos".
   Nothing blinks or pulses — the MEGA hero above already carries the page's only
   motion, and a deal that shouts next to a deal that shouts is two deals nobody
   believes.
   -------------------------------------------------------------------------- */
.og-spot__card {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-20, 20px);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06));
  overflow: hidden;
}
@media (min-width: 768px) {
  .og-spot__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* The picture frame: the same soft panel the homepage already frames product
   photos with (main.css:372 .home-cat__media), so an imported photo with its own
   background still sits clean. The image is absolutely placed inside a box whose
   size never depends on the image — no CLS, no stretched photo. */
.og-spot__media {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #f6f8fb 0%, var(--muted, #f1f5f9) 100%);
}
@media (min-width: 768px) {
  .og-spot__media { aspect-ratio: auto; min-height: 340px; }
}
@media (min-width: 1024px) {
  .og-spot__media { min-height: 400px; }
}
.og-spot__media img {
  position: absolute; inset: var(--space-20, 20px);
  width: calc(100% - 2 * var(--space-20, 20px)); height: calc(100% - 2 * var(--space-20, 20px));
  max-width: none; object-fit: contain;
  transition: transform .35s ease;
}
.og-spot__card:hover .og-spot__media img { transform: scale(1.03); }

.og-spot__pct {
  position: absolute; top: var(--space-16, 16px); left: var(--space-16, 16px); z-index: 1;
  padding: var(--space-8, 8px) var(--space-12, 12px);
  border-radius: var(--radius-12, 12px);
  background: linear-gradient(140deg, var(--danger, #ef4444), var(--danger-dark, #b91c1c));
  color: #ffffff;
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-size: 20px; font-weight: var(--fw-bold, 700); line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 12px 24px -12px rgba(185, 28, 28, .8);
}

.og-spot__body {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--space-12, 12px);
  padding: var(--space-20, 20px);
  min-width: 0;
}
@media (min-width: 768px) {
  .og-spot__body { padding: var(--space-32, 32px) var(--space-40, 40px); }
}
.og-spot__body > * { margin: 0; }

.og-spot__name {
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-size: clamp(20px, 2.4vw, 28px); font-weight: var(--fw-bold, 700); line-height: 1.2; letter-spacing: -.015em;
  text-wrap: balance;
}
.og-spot__name a { color: var(--slate-dark, #1e293b); text-decoration: none; }
.og-spot__name a:hover { color: var(--green, #047857); }

.og-spot__rating { display: flex; align-items: center; gap: var(--space-8, 8px); font-size: var(--fs-sm, 14px); }
.og-spot__rating .star-rating { float: none; margin: 0; }
.og-spot__reviews { color: var(--slate-500, #64748b); font-size: var(--fs-sm, 14px); }

.og-spot__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4, 4px) var(--space-12, 12px);
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-size: clamp(28px, 3.2vw, 36px); font-weight: var(--fw-bold, 700); line-height: 1.1;
  color: var(--slate-dark, #1e293b); font-variant-numeric: tabular-nums;
}
.og-spot__price del { order: 2; font-size: 18px; font-weight: var(--fw-medium, 500); color: var(--slate-500, #64748b); }
.og-spot__price ins { order: 1; text-decoration: none; color: var(--price-sale, #b91c1c); }

/* The saving chip is the MEGA card's .ogmb-save (mega-banner.css:224) at a larger
   size — same colours, so "Säästad" means one thing on this page. */
.og-spot__save {
  padding: 7px var(--space-12, 12px);
  border-radius: var(--radius-pill, 999px);
  background: #d1fae5; color: #065f46;
  font-size: var(--fs-sm, 14px); font-weight: var(--fw-bold, 700); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.og-spot__stock {
  display: inline-flex; align-items: center; gap: var(--space-8, 8px);
  color: var(--green, #047857); font-size: var(--fs-sm, 14px); font-weight: var(--fw-semibold, 600);
}
.og-spot__stock::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-circle, 50%); background: currentColor; }
.og-spot__ends { color: var(--slate-600, #475569); font-size: var(--fs-sm, 14px); }

.og-spot__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8, 8px) var(--space-16, 16px); margin-top: var(--space-8, 8px) !important; width: 100%; }
/* The spotlight is not inside .woocommerce or .product-card, so neither the shop's
   button recipe nor the card's reaches it — its primary action is styled here. */
.og-spot__actions a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8, 8px);
  min-height: 52px; padding: 0 var(--space-32, 32px);
  border: 0; border-radius: var(--radius, 12px);
  background: var(--green, #047857); color: #ffffff;
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-size: var(--fs-md, 16px); font-weight: var(--fw-bold, 700); line-height: 1;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-green, 0 10px 26px -10px rgba(5,150,105,.5));
  transition: background-color .18s ease, transform .18s ease;
}
.og-spot__actions a.button:hover { background: var(--green-dark, #035e43); color: #ffffff; transform: translateY(-1px); }
.og-spot__actions a.button:focus-visible { outline: 2px solid var(--green, #047857); outline-offset: 3px; }
.og-spot__actions a.button.loading { opacity: .7; }
.og-spot__actions a.added_to_cart { font-weight: var(--fw-semibold, 600); color: var(--green, #047857); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 767px) {
  .og-spot__actions a.button { flex: 1 1 100%; width: 100%; }
}

/* --------------------------------------------------------------------------
   4 · Compact phone top (show_home_compact_top) — below 768px only.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* MEGA cards: one swipe row instead of a 2×2 block. (0,3,0) beats
     mega-banner.css:232-233 `.ogmb-strip[data-count="3"]` (0,2,0).
     Top padding is room for .ogmb-flag, which sits 8px above each card
     (mega-banner.css:263) and overflow-x:auto would otherwise clip. */
  .home-hero.home-hero--compact .ogmb-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--space-12, 12px)) / 2.15);
    gap: var(--space-12, 12px);
    margin-inline: -18px;
    /* 16px, not 12: the flag also tilts (ogmbTilt), and a rotated corner rises
       past its -8px offset. Measured at 12px it touched the clip edge exactly. */
    margin-top: var(--space-16, 16px);
    padding: var(--space-16, 16px) 18px var(--space-40, 40px);
    scroll-padding-inline: 18px;
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .home-hero.home-hero--compact .ogmb-strip::-webkit-scrollbar { display: none; }
  .home-hero.home-hero--compact .ogmb-strip[data-count="2"] { grid-auto-columns: calc((100% - var(--space-12, 12px)) / 2); }
  .home-hero.home-hero--compact .ogmb-card { scroll-snap-align: start; min-width: 0; }

  /* Value props: four chips in a 2×2 grid. The headings carry the whole promise
     ("Pakiautomaadi tarne", "Turvaline makse", "14 päeva tagastus", "Järelmaks ja
     osamaksed"); the sentence under each stays in the page for screen readers and
     search engines, it just stops taking a phone screen of height. */
  .home-props--compact .home-props__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8, 8px); padding-block: var(--space-16, 16px); }
  .home-props--compact .home-prop { align-items: center; gap: 10px; padding: 10px var(--space-12, 12px); border-radius: var(--radius-12, 12px); box-shadow: none; min-height: 60px; }
  .home-props--compact .home-prop:hover { transform: none; }
  .home-props--compact .home-prop__icon { width: 34px; height: 34px; border-radius: 10px; }
  .home-props--compact .home-prop__icon svg { width: 22px; height: 22px; }
  .home-props--compact .home-prop__title { font-size: 13.5px; line-height: 1.25; }
  .home-props--compact .home-prop__text {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* --------------------------------------------------------------------------
   Motion safety
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .og-shelf__skeleton li { animation: none; }
  .og-shelf__tab,
  .og-shelf__arrow,
  .og-spot__media img,
  .og-spot__actions a.button { transition: none; }
  .og-spot__card:hover .og-spot__media img,
  .og-spot__actions a.button:hover { transform: none; }
}

/* ==========================================================================
   v1.2.109 — packages 1 + 2 of the 2026-09-13 benchmark
   (inc/home-sections.php and the story lines in inc/home-smart.php)
   ========================================================================== */

/* --- Story line under a shelf heading, and the sale-end line on a card --- */
.og-lead { margin: 6px 0 0; max-width: 62ch; color: var(--slate-500, #64748b); font-size: 15px; line-height: 1.45; }
.og-card-until { display: block; margin-top: 4px; font-size: 12px; font-weight: var(--fw-semibold, 600); line-height: 1.3; color: var(--slate-600, #475569); }

/* --- "Avasta valikut" tiles --- */
.og-tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12, 12px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .og-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16, 16px); } }
.og-tiles__grid > li { min-width: 0; }
.og-tile {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--surface, #ffffff); color: inherit; text-decoration: none;
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-16, 16px); overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.og-tile:hover { border-color: rgba(4, 120, 87, .35); box-shadow: var(--shadow-card-hover, 0 14px 32px -14px rgba(15,23,42,.22)); transform: translateY(-2px); }
.og-tile:focus-visible { outline: 2px solid var(--green, #047857); outline-offset: 3px; }
/* The same soft frame the homepage uses for product photos (main.css .home-cat__media). */
/* 16:10, not 4:3 — measured at 1280 px the 4:3 tiles made the block 907 px tall. */
.og-tile__media { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(160deg, #f6f8fb 0%, var(--muted, #f1f5f9) 100%); }
.og-tile__media img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); max-width: none; object-fit: contain; transition: transform .3s ease; }
.og-tile:hover .og-tile__media img { transform: scale(1.04); }
.og-tile__badge { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 9px; border-radius: var(--radius-pill, 999px); background: var(--green, #047857); color: #ffffff; font-size: 11px; font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; }
.og-tile__body { display: flex; flex-direction: column; gap: 2px; padding: 10px var(--space-12, 12px) var(--space-12, 12px); }
.og-tile__name {
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif); font-size: 15px; font-weight: var(--fw-bold, 700); line-height: 1.25; color: var(--slate-dark, #1e293b);
  min-height: 2.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.og-tile__count { font-size: 13px; color: var(--slate-500, #64748b); font-variant-numeric: tabular-nums; }
.og-tile--season { border-color: rgba(4, 120, 87, .28); }
.og-tile--season .og-tile__media { background: linear-gradient(160deg, #ecfdf5 0%, #d1fae5 100%); }
.og-tile--season .og-tile__count { color: var(--green, #047857); font-weight: var(--fw-semibold, 600); }
.og-tile--cheap .og-tile__media { background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%); }
@media (min-width: 768px) { .og-tile__name { font-size: 16px; } .og-tile__body { padding: var(--space-12, 12px) 14px 14px; } }

/* --- Linked service cards (the four props) --- */
a.home-prop.home-prop--link { color: inherit; text-decoration: none; position: relative; padding-right: 36px; }
a.home-prop.home-prop--link::after { content: "\2192"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--green, #047857); font-weight: var(--fw-bold, 700); transition: transform .18s ease; }
a.home-prop.home-prop--link:hover::after { transform: translate(3px, -50%); }
a.home-prop.home-prop--link:focus-visible { outline: 2px solid var(--green, #047857); outline-offset: 3px; }
@media (max-width: 767px) {
  .home-props--compact a.home-prop.home-prop--link { padding-right: 28px; }
  .home-props--compact a.home-prop.home-prop--link::after { right: 10px; }
}

/* --- Season module ---
   A full-bleed tint behind the container breaks the run of white shelves. isolation
   makes the z-index:-1 layer paint inside this section, above the page ground. */
.og-season { position: relative; isolation: isolate; }
.og-season::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%); border-block: 1px solid rgba(4, 120, 87, .12); }
.og-season__intro { max-width: 640px; margin-bottom: var(--space-20, 20px); }
.og-season__intro .eyebrow { margin-bottom: 8px; }
.og-season__text { margin: 10px 0 0; color: var(--slate-600, #475569); font-size: 16px; line-height: 1.55; }
.og-season__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 var(--space-24, 24px); padding: 0; list-style: none; }
@media (min-width: 768px) { .og-season__cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.og-season__cats > li { min-width: 0; }
.og-season__cat { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px; background: var(--surface, #ffffff); border: 1px solid rgba(4, 120, 87, .16); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
.og-season__cat:hover { border-color: rgba(4, 120, 87, .4); box-shadow: 0 10px 22px -16px rgba(15, 23, 42, .35); }
.og-season__cat:focus-visible { outline: 2px solid var(--green, #047857); outline-offset: 2px; }
.og-season__img { position: relative; flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--muted, #f1f5f9); overflow: hidden; }
.og-season__img img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); max-width: none; object-fit: contain; }
.og-season__label { min-width: 0; display: flex; flex-direction: column; }
.og-season__name { font-size: 14px; font-weight: var(--fw-bold, 700); line-height: 1.25; color: var(--slate-dark, #1e293b); overflow-wrap: anywhere; }
.og-season__count { font-size: 12.5px; color: var(--slate-500, #64748b); font-variant-numeric: tabular-nums; }

/* --- "Kuidas osta" --- */
.og-help__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .og-help__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16, 16px); } }
.og-help__step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; padding: var(--space-16, 16px); background: var(--surface, #ffffff); border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-16, 16px); }
.og-help__num { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-circle, 50%); background: rgb(4 120 87 / .1); color: var(--green, #047857); font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif); font-size: 17px; font-weight: var(--fw-bold, 700); }
.og-help__title { font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif); font-size: 16px; line-height: 1.3; color: var(--slate-dark, #1e293b); }
.og-help__text { margin: 0; color: var(--slate-600, #475569); font-size: 14px; line-height: 1.5; }
.og-help__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: var(--space-16, 16px) 0 0; color: var(--slate-600, #475569); font-size: 15px; }
.og-help__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green, #047857); font-weight: var(--fw-semibold, 600); }

/* --- Rendering cost (benchmark rec 12) ---
   Below-the-fold shelves skip layout and paint until they near the viewport. Paint
   containment clips at the section's padding box; these sections ARE the container,
   so the row bleed, card shadows and desktop arrows all stay inside it. The season
   module is left out on purpose: its full-bleed tint lives outside its box. */
.og-shelf.og-fav, .og-shelf.og-new, .og-help { content-visibility: auto; contain-intrinsic-size: auto 640px; }

@media (prefers-reduced-motion: reduce) {
  .og-tile, .og-tile__media img, .og-season__cat, a.home-prop.home-prop--link::after { transition: none; }
  .og-tile:hover, .og-tile:hover .og-tile__media img { transform: none; }
}

/* --- Phone: keep the richer page short ---
   Measured 2026-09-13 at 375 px with the new sections as stacked grids: tiles
   1 055 px, season 843 px, help 752 px — the page grew from 8.0 to 11.6 screens.
   Each becomes a sideways row, the pattern the shelves above already taught. */
@media (max-width: 767px) {
  /* Tiles: two rows that swipe sideways (four columns, 2.3 visible). */
  .og-tiles__grid {
    grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--space-12, 12px)) / 2.3);
    margin-inline: -18px; padding: 4px 18px 10px; scroll-padding-inline: 18px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .og-tiles__grid::-webkit-scrollbar { display: none; }
  .og-tiles__grid > li { scroll-snap-align: start; }
  .og-tile__media { aspect-ratio: 16 / 10; }
  .og-tile__name { font-size: 14px; }

  /* Season categories: one row of chips instead of a 2 x 2 block. */
  .og-season__cats {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%;
    margin-inline: -18px; padding: 2px 18px 4px; scroll-padding-inline: 18px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .og-season__cats::-webkit-scrollbar { display: none; }
  .og-season__cats > li { scroll-snap-align: start; }
  .og-season__text { font-size: 15px; }

  /* Help: the three steps as one row, read left to right. */
  .og-help__steps {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    margin-inline: -18px; padding: 2px 18px 4px; scroll-padding-inline: 18px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .og-help__steps::-webkit-scrollbar { display: none; }
  .og-help__step { scroll-snap-align: start; padding: 12px 14px; grid-template-columns: 34px minmax(0, 1fr); }
  .og-help__num { width: 34px; height: 34px; font-size: 15px; }
  .og-help__contact { gap: 0 16px; font-size: 14px; }
}