/* ============ Round 9: the product categories (30 Oct 2026) ============
   Nikola: a "Products" entry in the menu that opens fertilizers, grass seed, Mosscontrol and the sprayer (also in the phone menu), the seeds and Mosscontrol on the
   home page, and a new category of products. Four parts, one per place they appear:
     1  the desktop menu: the Products link and its panel (Front/Layout.php productsMenu, refresh.js watchProductsMenu)
     2  the phone menu: the four categories as plain large words (Layout.php header(); the styles are the old menu's)
     3  the shop: the category buttons above the line chips (Shop/ShopCatalog.php categoryChips, shop.js)
     4  the home page: "More for your lawn", one card per category (Blocks/ProductRange.php; the swipe row on a phone is carousel.js)
   Icons are the fine-line Hugeicons of Shop/ProductCategories.php. Colours come from the earth-tone tokens of components.css. Only transform and opacity animate. */

/* ---- 1. desktop menu ------------------------------------------------------------------------------------------------------------ */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-dd-caret { flex: none; width: 11px; height: 11px; opacity: .7; transition: transform var(--dur-base) var(--ease-out); }
.nav-dd.is-open .nav-dd-caret, .nav-dd:has(:focus-visible) .nav-dd-caret { transform: rotate(180deg); }
@media (hover: hover) { .nav-dd:hover .nav-dd-caret { transform: rotate(180deg); } }

.nav-dd-panel {
  position: absolute; z-index: 70; top: calc(100% + 12px); left: 50%; width: 372px; margin-left: -186px; padding: 8px;
  border-radius: 22px; background: #fff; box-shadow: var(--elev-4), 0 0 0 1px rgba(75, 52, 37, .1);
  opacity: 0; visibility: hidden; transform: translate3d(0, 6px, 0);
  /* closing waits a moment (the visibility step is delayed), so the pointer can cross the gap to the panel */
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* the bridge between the link and the panel */
.nav-dd.is-open .nav-dd-panel, .nav-dd:has(:focus-visible) .nav-dd-panel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (hover: hover) { .nav-dd:hover .nav-dd-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }

.nav-links .nav-dd-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-links .nav-dd-panel li { margin: 0; padding: 0; }
.nav-links .nav-dd-panel a {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 16px; font-size: 15px; font-weight: 500; line-height: 1.25;
  color: var(--ink-2, #232c26); text-decoration: none; white-space: normal;
}
.nav-dd-ic {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--moss-soft); color: var(--green-ink, #1d3a2c); --hi-w: 1.5;
}
.nav-dd-ic svg { width: 24px; height: 24px; }
.nav-dd-txt { display: grid; gap: 1px; min-width: 0; }
.nav-dd-txt b { font-weight: 600; font-size: 15.5px; letter-spacing: -.005em; }
.nav-dd-txt small, .nav-dd-all small { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.nav-links .nav-dd-panel a.nav-dd-all {
  justify-content: space-between; margin-top: 6px; padding: 12px 14px 12px 16px; background: var(--sand-soft); color: var(--green-ink, #1d3a2c);
}
.nav-dd-all span { display: grid; gap: 1px; }
.nav-dd-all b { font-weight: 600; font-size: 15px; }
.nav-dd-all svg { flex: none; width: 20px; height: 20px; --hi-w: 1.6; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .nav-links .nav-dd-panel a:hover { background: var(--sand-soft); color: var(--green-ink, #1d3a2c); }
  .nav-links .nav-dd-panel a.nav-dd-all:hover { background: var(--sand); }
  .nav-dd-all:hover svg { transform: translate3d(3px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dd-panel, .nav-dd-caret, .nav-dd-all svg { transition: none; }
}

/* ---- 2. phone menu: nothing here. The categories are large words like Quiz and Soil analysis (round5-menu.css .md-big), no icons and no cards (owner, 31 Oct 2026) ---- */

/* ---- 3. the shop: category buttons ------------------------------------------------------------------------------------------------ */
/* the buttons themselves (a segmented control with a sliding thumb) are round10-filters.css */
.shop-cat-intro { margin: -4px 0 16px; max-width: 62ch; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.shop-cat-ic { display: inline-grid; place-items: center; flex: none; color: var(--green-ink, #1d3a2c); --hi-w: 1.6; }
.shop-cat-ic svg { width: 19px; height: 19px; }
/* the line tabs (Basic, Pro, Specialist, Elixir) describe fertilizers only: under another category the row steps aside (round10-filters.css) */
/* a card whose product has no photo yet: the category icon, large and quiet, instead of an empty frame */
.pc-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--moss); opacity: .5; pointer-events: none; }
.pc-noimg svg { width: 72px; height: 72px; --hi-w: 1.1; }

/* ---- 4. the home page: "More for your lawn" ---------------------------------------------------------------------------------------- */
.pg-range { padding-block: clamp(40px, 6vw, 84px); }
.rng-grid { display: grid; grid-template-columns: repeat(var(--rng-n, 3), minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin-top: 28px; }
.rng-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px var(--card-line), var(--elev-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .rng-card:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 0 0 1px var(--card-hover-line), var(--elev-3); } }
.rng-pic { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #fbf5e4 0%, var(--sand-soft) 60%, #ecdfba 100%); }
/* two cards share the row on a wide screen (the sprayer has its own section): the pictures are a little wider than tall, so the cards do not grow tall */
@media (min-width: 1001px) { .rng-grid:has(> :nth-child(2):last-child) .rng-pic { aspect-ratio: 16 / 10; } }
.rng-pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rng-pic.is-photo img { object-fit: cover; object-position: 50% 28%; }
/* the Mosscontrol photo is the top of a tall bag: show the logo and the name (about 35 to 85 percent of its height), not the black above them */
.rng-mosscontrol .rng-pic.is-photo img { object-position: 50% 70%; }
.rng-pic.is-cutout img { inset: 8% 10% 6%; width: 80%; height: 86%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(43, 30, 21, .22)); }
.rng-seeds .rng-pic.is-cutout img { inset: 4% 14% 4%; width: 72%; height: 92%; }
/* the category's icon sits in the heading, in front of the name (31 Oct 2026, owner: where the text is, not in the corner of the picture); as tall as the name's first line */
.rng-body h3 { display: flex; align-items: flex-start; gap: .4em; }
.rng-ic { flex: none; display: grid; align-items: center; height: 1.15em; color: var(--green-deep, #2f7a55); --hi-w: 1.6; }
.rng-ic svg { display: block; width: 1em; height: 1em; }
.rng-flag {
  position: absolute; top: 20px; right: 16px; z-index: 2; padding: 4px 11px; border-radius: 999px; background: var(--clay-soft); color: #7a3a1b; font: 600 12.5px / 1.3 var(--font-sans), sans-serif;
}
.rng-body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.rng-body h3 { margin: 0; font: 600 clamp(21px, 1.8vw, 25px) / 1.15 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.02em; color: var(--green-ink, #1d3a2c); }
.rng-stretch { display: block; margin: -11px 0; padding: 11px 0; color: inherit; text-decoration: none; }   /* 44 px tall on its own; the margin keeps the title where it was */
.rng-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 28px; }   /* the whole card is the link */
.rng-text { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.rng-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; }
.rng-facts b { font: 600 21px / 1.2 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.015em; color: var(--ink-2, #232c26); }
.rng-facts span { font-size: 14px; color: var(--text-muted); }
.rng-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 15px; color: var(--green-ink, #1d3a2c); }
.rng-link svg { width: 20px; height: 20px; --hi-w: 1.7; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .rng-card:hover .rng-link svg { transform: translate3d(4px, 0, 0); } }
.rng-card:has(.rng-stretch:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 721px) and (max-width: 1000px) {
  .rng-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rng-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rng-grid > :last-child:nth-child(odd) .rng-pic { aspect-ratio: 16 / 7; }
}
@media (max-width: 720px) {
  .rng-grid[data-snap] { --snap-w: 82%; --snap-gap: 14px; margin-top: 18px; }
  .rng-body { padding: 18px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rng-card, .rng-link svg { transition: none; }
  .rng-card:hover { transform: none; }
}

/* ---- 6. a wide screen: the grass seed, Mosscontrol and the sprayer are the three columns of ONE sheet -------------------------------------------------
   (31 Oct 2026, owner: "those two products together with that sprayer in one section, not like this": two tall cards and a separate sprayer section below
   them). One white sheet, a hairline between the columns, a square tile for each product, then its name, a sentence, the price and the way on; the price and
   the link line up across the columns. A tablet and a phone keep the separate cards above (a swipe row on a phone). */
@media (min-width: 1001px) {
  .pg-range .rng-grid { gap: 0; padding: 14px; border-radius: 34px; background: #fff; box-shadow: var(--elev-1); }
  .pg-range .rng-card { overflow: visible; padding: 14px 14px 18px; border-radius: 24px; background: transparent; box-shadow: none; transition: background-color var(--dur-base) var(--ease-out); }
  .pg-range .rng-pic { aspect-ratio: 1 / 1; border-radius: 22px; }
  .pg-range .rng-flag { top: 34px; right: 32px; }
  .pg-range .rng-body { padding: 22px 8px 4px; }
  .pg-range .rng-text { flex: 1 1 auto; margin-bottom: 6px; }
}
@media (min-width: 1001px) and (hover: hover) {
  .pg-range .rng-card:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--sand-soft) 42%, transparent); }
}