/* store-home.css — homepage-only presentation layer, rebuilt clean
 * 2026-09-05 to a written technical spec (semantic per-section blocks,
 * explicit target geometry at the 935px reference width, explicit
 * breakpoints) instead of another patch pass over the previous
 * iteration. Loaded only when $isStoreHome (index.php) — every other
 * page's CSS is unaffected. Site-wide header/footer identity lives in
 * store-header.css. Uses the --martines-* tokens + --font-display serif
 * from store-tokens.css (additive — --color-brand-* / .btn-primary
 * elsewhere on the site are untouched) and the self-hosted serif from
 * store-home-fonts.css.
 *
 * Breakpoints (spec section R): desktop ≥900px (935px, the reference's
 * own width, must stay in this branch), tablet ≤899.98px, mobile
 * ≤575.98px.
 */

/* ============ A. Page architecture / shell ============ */
/* 2026-09-07: overflow-x:clip briefly moved to body/<main> and back.
   The general concern ("clip can't fix an element's own box overflowing
   ITS ancestors") is real, but doesn't apply here anymore: the rule
   below already fixes .store-home's OWN box to exactly match the
   viewport (width:100vw + margin-inline:calc(50% - 50vw) -- confirmed
   live, .store-home's own rect is left:0/right:viewport-width, no
   self-overflow left to correct). The remaining overflow source is
   different: children of .store-home (the coffee rail/equipment
   carousel arrows, intentionally positioned a few px outside the shell)
   sticking out past .store-home's own edges -- exactly the case
   overflow-x:clip on THIS element is supposed to handle, and does.
   <main> (Bootstrap's own col-12, gutter-inset, narrower than the true
   viewport) was tried instead per a specific suggestion and made things
   worse: it clipped .store-home's full-bleed content at main's own
   (narrower) edge, cutting off real text/arrows that are deliberately
   escaping main's gutter via the breakout below -- reverted. */
.store-home { color: var(--martines-text); background: var(--martines-bg); overflow-x: clip; }
.store-home-empty { padding: 2rem; border: 1px dashed var(--martines-border); border-radius: 14px; color: var(--martines-muted); background: #fff; text-align: center; }

/* Full-bleed breakout: .store-home renders inside index.php's shared
   Bootstrap <div class="container"> (the same one listing pages use for
   their sidebar layout), which caps at max-width:720px between the 768
   and 992px breakpoints — at the reference's own 935px width that left
   only 720px of real content width (108px dead margin per side,
   measured live). This breaks .store-home out to the full viewport
   without touching .container itself.
   2026-09-07: the old position:relative;left:50%;right:50%;margin:-50vw
   combination didn't account for the scrollbar's own width -- vw is the
   full viewport including the scrollbar gutter on this browser/OS,
   while the page's real clientWidth excludes it (measured live: 1440
   vs 1425 at desktop), so the box rendered 15px too wide and started at
   left:-7px, producing document.documentElement.scrollWidth >
   clientWidth and a real horizontal scrollbar. Switched to the
   margin-only breakout pattern (width:100vw + margin-inline:calc(50% -
   50vw), no position/left/right) -- NOTE: width:100% alone was tried
   first and is wrong here, it resolves against .store-home's own
   parent (the Bootstrap <main class="col-12"> inside .container, capped
   at max-width:1320px at this viewport per store-framework.css), not
   the true viewport, which left the whole homepage ~120px narrower than
   the page and visibly short of the right edge -- confirmed live before
   correcting to width:100vw. overflow-x:clip above is a hard guarantee
   against any residual sub-pixel overflow regardless. */
.store-home {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* B. Global width system — 2026-09-05: explicit override to a tight 8px
   side margin (min(100% - 16px, 1280px) -- at 935px reference, shell is
   919px wide, 8px each side) so every section sharing this one class
   (coffee rail, specialty, origin, equipment, business, recently-viewed,
   manufacturers) gets real, consistent width/alignment from a single
   rule, instead of a per-section scoped override each picking its own
   subtraction value.
   2026-09-08: briefly raised 1280 -> 1480px for the wide-desktop density
   fix, then reverted back to 1280 the same day -- the wider default was
   changing how laptop-width screens (1440 in particular) looked, and
   the explicit instruction was to leave laptop exactly as it was and
   only widen for real wide/big monitors. All of that widening now lives
   behind the >=1600px override below instead, gated by a real
   breakpoint rather than baked into the default. */
.store-home-shell { width: min(100% - 16px, 1280px); margin-inline: auto; }
/* 2026-09-08: coffee rail/specialty/origin/equipment share ONE wider
   shell cap (1680px), but ONLY from 1600px up -- below that they use
   the 1280px default above same as before this task, so laptop widths
   (1024-1440ish) are back to exactly how they looked before any of
   today's changes. At/above 1600px they widen together (kept as one
   shared value, not 4 different ones, so they stay mutually
   left-edge-aligned with each other -- including the coffee rail
   copy/specialty heading alignment established earlier this session).
   Manufacturers/business stay on the 1280px default at every width
   since they don't gain more real items. Each section's own
   grid-template-columns/nth-child reveal rules below are gated at this
   same 1600px point, so the extra columns/cards and the extra shell
   room always arrive together. */
@media (min-width: 1600px) {
  .store-home-coffee-rail-section .store-home-shell,
  .store-home-specialty .store-home-shell,
  .store-home-equipment .store-home-shell,
  #store-home-origin .store-home-shell {
    width: min(100% - 16px, 1680px);
  }
}

.store-home-eyebrow { margin: 0 0 10px; color: var(--martines-orange); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.store-home-section-heading h2 { margin: 0; color: var(--martines-green); font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.1; }
.store-home-section-heading p { margin: 6px 0 0; color: var(--martines-muted); font-size: 12px; }
/* Bean-and-line divider — a recurring motif under a heading/eyebrow
   block in the reference. Pure CSS, no image asset. */
.store-home-divider { display: flex; align-items: center; gap: 8px; width: 160px; height: 10px; margin: 10px 0; }
.store-home-divider span { display: block; width: 40px; height: 1px; background: var(--martines-orange); opacity: .6; }
.store-home-divider i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--martines-orange); flex: 0 0 auto; }
.store-home-section-heading .store-home-divider { margin-inline: auto; }

/* Reusable buttons — homepage-only variants, kept separate from
   .btn-primary/.btn-outline-primary (those stay indigo everywhere else
   on the site). Small radius (3-5px), not a full pill. */
.store-btn-primary, .store-btn-outline, .store-btn-forest {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 18px; border-radius: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.store-btn-primary svg, .store-btn-outline svg, .store-btn-forest svg { flex: 0 0 auto; width: 13px; height: 13px; }
/* Primary CTAs (hero's "РАЗГЛЕДАЙ КАФЕТАТА", why-us's "НАУЧИ ПОВЕЧЕ ЗА
   НАС", coffee rail's "ВИЖ ВСИЧКИ КАФЕТА" below) -- 2026-09-06:
   explicit palette scopes "PRIMARY CTA buttons/main actionable elements"
   to --coffee-caramel, so these are overridden straight onto it rather
   than riding the shared --martines-orange/-green aliases (which now
   default to the small-label and heading/price roles instead). Hover
   darkens onto --coffee-burnish -- the palette gives no explicit "dark
   caramel" token, and burnish is already an authoritative deeper, more
   red-leaning warm tone, so reusing it here stays inside the given
   7-color system instead of inventing a new shade. */
.store-btn-primary { background: var(--coffee-caramel); border-color: var(--coffee-caramel); color: #fff; }
.store-btn-primary:hover { background: var(--coffee-burnish); border-color: var(--coffee-burnish); color: #fff; }
.store-btn-outline { background: transparent; border-color: var(--martines-border); color: var(--martines-text); }
/* Generic secondary/outline hover fill -- burnish (secondary emphasis),
   not the primary caramel. */
.store-btn-outline:hover { background: var(--coffee-burnish); border-color: var(--coffee-burnish); color: var(--martines-bg); }
.store-btn-forest { background: var(--coffee-caramel); border-color: var(--coffee-caramel); color: var(--martines-bg); }
.store-btn-forest:hover { background: var(--coffee-burnish); border-color: var(--coffee-burnish); }

/* Generic section wrapper — every section below sits in the shell.
   2026-09-07: margin-top:28px -> padding-block:60px (margin removed),
   per explicit instruction, so every section sharing this class
   (coffee rail, specialty, origin, equipment, manufacturers) gets an
   equal, symmetric gap from its own padding instead of a one-sided
   margin that only ever showed up above it. Hero/"Защо Martines?"/
   Business don't use this shared class (each has its own fixed-height
   layout tuned separately this session) and are intentionally left on
   their existing spacing here -- ping if those should also move onto
   this same rhythm. */
/* 2026-09-07: 60px -> 44px, per explicit instruction to tighten the
   gap between sections a little.
   2026-09-08: 44px -> 32px, same instruction, one more pass. */
.store-home-section { padding-block: 32px; }

/* ============ H. Hero — target ~350-360px at 935px (raised from the
   previous ~320-335px 2026-09-05: content geometry was already close to
   reference, this pass only adds vertical breathing room via min-height,
   not per-element padding) ============ */
/* --hero-gutter: the shared left offset for every left-column element
   (eyebrow/H1/divider/desc/buttons/benefits), so they all sit on the
   same vertical line. 76px = the middle of the reference's own measured
   75-80px. */
/* min-height raised 230 -> 357: the copy column's own content (eyebrow
   through benefits) already needs ~332px, so 230 was never actually the
   governing value -- this pass's whole effect is min-height going from
   "below content" to "above content by +25px", which .store-home-hero-
   copy's existing justify-content:center then distributes as extra space
   above the eyebrow and below the benefits row (equally, matching the
   reference's own added vertical air) rather than embedded as new
   padding inside any one element. */
.store-home-hero { position: relative; min-height: 377px; overflow: hidden; background: var(--martines-bg-soft); --hero-gutter: 76px; }
/* Media is absolutely positioned (not a grid column with height:100%)
   because a percentage height only resolves against a *definite* parent
   height, and an auto-sized grid row isn't one — a grid-column version
   let the hero photo's own intrinsic aspect ratio dictate the row height
   instead of the other way round. Absolute positioning ties the media
   strictly to .store-home-hero-inner's own height.
   2026-09-05 correction: the reference confines ALL hero content (copy
   AND the 4 benefits) to one left column (~50-55% wide), with the photo
   filling a real right column (~45-50%) -- not the earlier structure,
   which kept the benefits outside/after the copy column as a separate
   near-full-width row. Benefits now live INSIDE .store-home-hero-copy
   (see index.php), and this column is widened to 52% to hold them.
   left:38% on the media (not a plain right-side width%, and narrower
   than the 52% copy column) is the deliberate "TEXT -> FADE -> IMAGE"
   effect the reference also shows: the photo itself starts a bit inside
   the nominal left-column boundary and is masked by the ::before
   gradient below, rather than the image's own box starting exactly
   where it becomes visually solid. */
/* display:flex (align-items:stretch by default) so .store-home-hero-copy
   actually fills this box's full height -- without it, copy was only as
   tall as its own content, leaving a dead gap between copy's real bottom
   edge and .store-home-hero-inner's (min-height-driven) bottom edge that
   the benefits row's margin-top:auto could never reach, since that auto
   margin only redistributes space INSIDE copy's own box. */
.store-home-hero-inner { position: relative; z-index: 1; min-height: 377px; display: flex; }
/* justify-content:flex-start (not center): eyebrow..buttons stack from
   the top, and .store-home-hero-benefits' own margin-top:auto pushes the
   benefits row down to the bottom of this column -- not centered as a
   single block, per the 2026-09-05 correction. */
.store-home-hero-copy { position: relative; z-index: 2; width: 52%; display: flex; flex-direction: column; justify-content: flex-start; padding: 24px 16px 6px var(--hero-gutter); }
/* 2026-09-08: max-width added (wide-desktop density fix) -- width:52%
   of the hero's own full-bleed 100vw box grows without limit on wide
   monitors (H1/desc already have their OWN tighter max-widths below, so
   the actual text never stretched, but the benefits row and the
   column's own padding/gutter did keep growing, reading as an
   oversized, sparse hero on ultrawide). 670px matches this column's own
   real width at 1280px viewport (52% * 1280 = 665.6px) almost exactly.
   Gated behind >=1600px (moved off unconditional the same day) so
   laptop widths (1280-1440ish) keep growing uncapped exactly as they
   did before this task -- only real wide/big monitors get capped. The
   hero's own background image (.store-home-hero-media) is
   intentionally NOT capped here -- stays full-bleed, per explicit
   instruction. */
@media (min-width: 1600px) {
  .store-home-hero-copy { max-width: 670px; }
}
.store-home-hero-eyebrow { margin: 0 0 8px; color: var(--martines-orange); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* 2 lines via 2 real block-level + white-space:nowrap spans
   (store_t('home.hero_title_line1'/'_accent'/'_suffix', ...) in
   index.php), each one sealed as a single visual line by design rather
   than left to the browser's own wrap point — nowrap means a 3rd line
   can never appear regardless of font-size, and max-width is
   deliberately wider than the 41% copy column so the (real, unshortened)
   BG text can extend into the image's faded-in left edge at a real
   36px+ size, matching how the reference's own H1 visually overlaps that
   transition zone instead of stopping dead at the column boundary.
   font-family is the hero-only 'Store Display Hero' SemiBold face (see
   store-home-fonts.css) -- every OTHER homepage heading still resolves
   font-weight:600 against the shared 'Store Display' family, which only
   has a Bold (700) face, so this stays a hero-only visual change. */
/* text-shadow: a soft cream glow, not a hard clip fix -- the tail of
   line 1 ("...изпечено") deliberately extends into the photo's already-
   fading-in right edge (that overlap is the point), but a dark part of
   the machine can still sit directly behind a letter there depending on
   viewport width; the glow keeps it legible without pulling the text
   back or reducing the bleed. */
.store-home-hero h1 { max-width: 480px; margin: 0; color: var(--martines-text); font-family: 'Store Display Hero', Georgia, 'Times New Roman', serif; font-size: 40px; font-weight: 600; line-height: 1.12; letter-spacing: -.005em; text-shadow: 0 0 14px var(--martines-bg-soft), 0 0 6px var(--martines-bg-soft); }
.store-home-hero-title-line1, .store-home-hero-title-line2 { display: block; white-space: nowrap; }
/* Headline brand-accent word ("specialty") -- large, prominent emphasis,
   same tier as a primary CTA rather than a small label, so it takes
   caramel directly instead of the shared --martines-orange (now the
   small-label/eyebrow default, crema). */
.store-home-hero-accent { color: var(--coffee-caramel); }
/* Divider — hero-only markup (index.php), not the shared .store-home-
   divider component (also used by coffee-rail/origin, which must stay
   untouched): a line, a small inline coffee-bean ornament, a line. */
.store-home-hero-divider { display: flex; align-items: center; gap: 10px; width: 210px; margin: 10px 0; color: var(--martines-orange); }
.store-home-hero-divider span { display: block; flex: 1 1 auto; height: 1px; background: var(--martines-orange); opacity: .55; }
.store-home-hero-divider svg { flex: 0 0 auto; width: 20px; height: 12.5px; }
.store-home-hero-desc { max-width: 340px; margin: 0; color: var(--martines-muted); font-size: 14px; line-height: 1.45; }
/* nowrap (not the earlier wrap) -- like the H1, this row is deliberately
   allowed to overflow past the 41% copy column's own width rather than
   wrap to a 2nd line: the column is intentionally narrow (see the gutter/
   split correction above) and buttons still need to sit on one row. */
.store-home-hero-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: nowrap; }
/* Hero-only overrides: wider horizontal padding than the shared button
   classes' default (18px each side) to hit the reference's own measured
   ~165-175px / ~125-135px widths, plus a thin orange/tan secondary
   border instead of the shared .store-btn-outline's neutral one --
   scoped here, not on the shared classes (.store-btn-primary is also
   used by the why-us section, .store-btn-outline by nothing else right
   now but shouldn't default to a hero-specific color). */
/* Font-size/icon-size trimmed here too (not just padding): the shared
   button classes' own 11px text + 13px icon at ANY reasonable padding
   already total ~200px for this specific BG label -- narrower than the
   reference's own measured ~127-170px range requires shrinking the
   content itself a little, not just the padding around it. */
.store-home-hero-actions .store-btn-primary { padding-inline: 14px; font-size: 10px; }
.store-home-hero-actions .store-btn-primary svg, .store-home-hero-actions .store-home-hero-cta-secondary svg { width: 12px; height: 12px; }
/* Secondary CTA ("ЗА БИЗНЕСА") -- burnish, not the primary caramel. */
.store-home-hero-actions .store-home-hero-cta-secondary.store-btn-outline { padding-inline: 14px; font-size: 10px; border-color: var(--coffee-burnish); color: var(--martines-text); }
.store-home-hero-actions .store-home-hero-cta-secondary.store-btn-outline:hover { background: var(--coffee-burnish); border-color: var(--coffee-burnish); color: #fff; }
/* Image layer: left:28% + right:0 makes the media box itself much wider
   than the "visible" ~59-60% split the reference shows — see the
   ::before gradient below, which is what actually pushes the solid,
   unfaded image out to that point. object-fit:cover crops it, no
   border-radius so it bleeds flush to .store-home's own edge. */
/* 2026-09-07: left edge pulled ~100px further left than the 38% column
   split (calc, not a smaller %, so it's a real fixed px shift at any
   viewport) -- the raw image box now starts under the text-adjacent
   zone earlier, giving the fade less width to cover before real
   texture/contrast, without moving .store-home-hero-copy (text column)
   at all. */
.store-home-hero-media { position: absolute; top: 0; left: calc(38% - 100px); right: 0; bottom: 0; overflow: hidden; }
.store-home-hero-media picture, .store-home-hero-bg { display: block; width: 100%; height: 100%; }
.store-home-hero-bg { object-fit: cover; object-position: center 38%; }
/* Cream-to-transparent fade, relative to the media box's OWN width (38%
   to 100% of hero = 62% wide, ~580px at 935px reference).
   2026-09-06: a single linear-gradient (even a wide one) always reads as
   a straight, geometric wipe -- "LEFT PANEL | IMAGE" with a ruler-edge --
   because every point along the seam fades at the exact same rate. Per
   explicit instruction, replaced with 3 offset radial-gradient "mist"
   blobs (different vertical position/reach each, so the boundary bulges
   unevenly instead of running as one straight line), painted on top of
   a wide linear-gradient base that supplies the overall left-to-right
   falloff. The radials also don't line up with the linear layer's own falloff
   rate, so the visible edge of "solid cream" vs. "image peeking through"
   never sits at one consistent x-position top-to-bottom. Base color is
   the site's own --martines-bg token (#f3eae0), not a separate literal,
   so it always tracks the real background exactly. */
/* 2026-09-07 (2nd pass): still too soft/long per direct feedback against
   a real reference -- explicit-sized ellipses this time (not implicit
   farthest-corner sizing) for tighter control over each blob's own
   reach, stops pulled in so full opacity holds longer near the text
   (protects readability) then drops off faster once it starts, and nothing
   past ~56% on the linear base so the machine on the right stays fully
   contrasty (previous passes had faint residual wash further right). Three
   blobs at different positions/reach (not lined up with the linear
   layer's own rate) keep the seam itself irregular -- texture starts
   peeking through earlier in some rows than others, never one straight
   x-position top-to-bottom. */
.store-home-hero-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 62% at 8% 28%, var(--martines-bg) 0%, rgba(243,234,224,.96) 24%, rgba(243,234,224,.68) 44%, rgba(243,234,224,.18) 64%, rgba(243,234,224,0) 78%),
    radial-gradient(ellipse 40% 72% at 16% 78%, rgba(243,234,224,.94) 0%, rgba(243,234,224,.70) 30%, rgba(243,234,224,.24) 55%, rgba(243,234,224,0) 74%),
    radial-gradient(ellipse 30% 48% at 27% 42%, rgba(243,234,224,.44) 0%, rgba(243,234,224,.20) 42%, rgba(243,234,224,0) 68%),
    linear-gradient(90deg, var(--martines-bg) 0%, rgba(243,234,224,.98) 12%, rgba(243,234,224,.82) 24%, rgba(243,234,224,.50) 36%, rgba(243,234,224,.16) 46%, rgba(243,234,224,0) 56%);
}
/* Decorative contour/topographic line-art hook (spec: subtle background
   art around the copy area and along the image edge). No such asset
   exists anywhere in this project (checked uploads/site and the repo,
   and the legacy Martines catalog on the "ns" server, for any contour/
   topo/botanical/line-art file) -- left un-rendered rather than
   fabricated. .store-home-hero already has position:relative, so
   dropping in a real asset later is a single added rule, e.g.:
   .store-home-hero::before { content:''; position:absolute; inset:0;
   background:url(...) no-repeat; opacity:.15; pointer-events:none; } */
/* Benefits: 2026-09-05 correction — nested INSIDE .store-home-hero-copy
   (index.php), not a separate near-full-width row after it, per the
   reference's own structure: all hero content (copy AND the 4 benefits)
   lives in the left column, the photo occupies only the right column.
   width:100% fills the copy column's own content box (no separate
   max-width/gutter-padding hack needed now that it's a real child of
   that column). Real title/desc text wraps to 2 lines at this width in
   the reference itself, so height is min-height (content-driven) rather
   than a fixed height that could flex-shrink-clip a wrapped 2nd line the
   way an earlier equipment-card bug once did (fixed by flex-shrink:0
   there; avoided here from the start by not fixing a height at all). */
/* 2026-09-05: no more border-top (was reading as a divider mid-column),
   and margin-top:auto (not a fixed value) pushes this row to the very
   bottom of the left column -- .store-home-hero-copy is a flex column
   with justify-content:flex-start now (not center), so everything above
   (eyebrow..buttons) stacks from the top and this auto margin absorbs
   whatever space is left, however much that is at any hero height. */
.store-home-hero-benefits {
  width: 100%; display: grid; grid-template-columns: repeat(4, 1fr);
  margin: auto 0 0; padding: 0;
}
.store-home-hero-benefits li {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px;
  padding: 6px 6px 6px 0; border-left: 1px solid rgba(90, 65, 45, .12);
}
.store-home-hero-benefits li:first-child { padding-left: 0; border-left: 0; }
.store-home-hero-benefit-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--martines-orange); }
.store-home-hero-benefit-icon svg { width: 24px; height: 24px; }
.store-home-hero-benefit-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.store-home-hero-benefit-title { color: var(--martines-green); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; }
/* 4th benefit ("Устойчиво бъдеще"/Sustainable future) is explicitly a
   sustainability claim -- plantation, per the palette, instead of the
   other 3 benefits' generic noir/crema. */
.store-home-hero-benefits li:nth-child(4) .store-home-hero-benefit-icon,
.store-home-hero-benefits li:nth-child(4) .store-home-hero-benefit-title { color: var(--coffee-plantation); }
.store-home-hero-benefit-desc { color: var(--martines-muted); font-size: 9.5px; font-weight: 400; line-height: 1.25; }

/* ============ I. Coffee rail ("Нашите кафета") — 2026-09-05 real fix:
   the product photos are square (934x934 source), but the item box was
   190x300 (portrait) -- object-fit:contain doesn't change an element's
   layout box, only how the image content is scaled *inside* it, so a
   square image in a portrait box renders width-constrained (190x190)
   with ~55px of dead letterbox space above AND below on every single
   item. That's the "huge empty space, thumbnail-looking bags" bug, not
   the section's height. Fix: a square item box (no wasted space by
   construction) sized to fill the section, height driven by real
   content again (no artificial min-height), gaps tightened so the rail
   reads as dense/packed rather than spaced out. ============ */
/* 2026-09-05 restructure: arrows are now real grid items of
   .store-home-coffee-rail itself -- [prev][copy][track-wrap][next] --
   instead of absolutely positioned against the section/viewport edges.
   That means they sit right next to the actual content (beside the text
   block, right after the last visible product) at any shell width,
   with no hardcoded offset guessing. track-wrap is 1fr (takes whatever
   space is left after the arrows + copy column), which is also what
   lets the rail size itself to the available width rather than a fixed
   guess. */
/* copy is a FIXED px width (211px), not a %: at 20% it was narrow enough
   to force the real description text to wrap onto an extra line, growing
   .store-home-coffee-rail-copy's own height and, with it, the whole
   section's height as an unwanted side effect -- 211px is the known
   width where it still wraps to the same line count as before. gap is
   small (8px) for the copy<->track and track<->next-arrow spacing; the
   prev-arrow<->copy spacing is kept at the wider value the alignment
   fix needs via its own margin below, decoupled from this gap so
   tightening it doesn't undo that alignment. */
/* 2026-09-05: copy no longer shares row space with the arrows -- just
   copy|track now, so copy's left edge lands flush with the shell's own
   edge, exactly matching the specialty section's heading below it
   (explicit instruction: ignore the arrows for this, they can shift). */
/* 2026-09-08: padding 40px -> 28px (was already bigger than the shared
   .store-home-section's own 44px->32px, kept the same proportional cut)
   -- tightens the overall gap around the coffee rail to match the other
   sections' tighter rhythm, per explicit instruction. */
.store-home-coffee-rail {
  position: relative; display: grid; grid-template-columns: 280px 1fr;
  align-items: center; gap: 24px; padding: 28px 0;
}
.store-home-coffee-rail-copy { grid-column: 1; }
.store-home-coffee-rail-track-wrap { grid-column: 2; }
/* Arrows are absolutely positioned overlays now, not grid items -- they
   don't consume row space or affect copy's position at all. */
/* Real constraint found: the shared shell now has only an 8px side
   margin (see .store-home-shell above), which isn't enough room for a
   28px arrow to sit fully outside the text/track without being clipped
   by the viewport edge -- confirmed via screenshot, the previous -18px/
   -36px offsets pushed the arrows partly or entirely off-screen.
   Repositioned to sit in real available space instead: prev in the
   copy<->track gap, next just inside the shell's own right edge. */
/* 2026-09-07: -8px (the previous pass) kept the arrow fully on-screen
   at the tightest 8px-margin case, but sits close enough to overlap the
   copy text there (copy has no left padding beyond the shell margin, so
   text starts right at the same x the arrow does). Pulled back out to
   -28px, symmetric on both sides, per explicit instruction -- a real,
   visible gap from the text at the common 8px-margin widths (small
   sliver of the arrow itself goes off-canvas there, same "small sliver"
   trade-off already accepted earlier this session for this exact
   shell-margin constraint), while sitting comfortably clear of
   everything at wider viewports (e.g. 1440px, where the shell's own
   margin is 80px). */
.store-home-coffee-rail-arrow-prev { position: absolute; left: -34px; top: 50%; transform: translateY(-50%); }
.store-home-coffee-rail-arrow-next { position: absolute; right: -34px; top: 50%; transform: translateY(-50%); }
/* Scoped overrides on the shared .store-home-eyebrow/.store-home-section-
   heading h2/.store-home-divider classes (also used by specialty/origin/
   business/why, all untouched) -- this rail's own copy column only.
   color:orange re-asserted explicitly: .store-home-coffee-rail-copy p
   below (meant for the description paragraph) has higher specificity
   (class+element vs..store-home-eyebrow's class alone) and was silently
   winning over .store-home-eyebrow's own orange, since the eyebrow is
   also a <p> -- real bug, confirmed via computed style (eyebrow was
   rendering as --martines-muted instead of --martines-orange). */
.store-home-coffee-rail-copy .store-home-eyebrow { margin-bottom: 10px; font-size: 12px; color: var(--martines-orange); }
.store-home-coffee-rail-copy h2 { margin-bottom: 12px; font-size: 30px; white-space: nowrap; }
.store-home-coffee-rail-copy .store-home-divider { margin: 18px 0; }
/* No line-clamp -- the real, complete description text wraps naturally
   instead of being cut off mid-sentence. */
.store-home-coffee-rail-copy p { margin: 14px 0 28px; color: var(--martines-muted); font-size: 15px; line-height: 1.6; max-width: 280px; }
/* .store-btn-forest is used nowhere else in the codebase (only this CTA),
   so it's safe to size up directly rather than needing a scoped selector. */
.store-home-coffee-rail-copy .store-btn-forest { height: 48px; padding-inline: 26px; font-size: 12.5px; }
/* min-width:0 -- without it, a grid item's default min-width is its
   content's own intrinsic size, which for a wide flex track would force
   this 1fr column (and the whole grid) wider than the shell instead of
   actually clipping/scrolling the overflow inside it. */
.store-home-coffee-rail-track-wrap { position: relative; overflow: hidden; min-width: 0; }
/* flex + overflow-x:auto (real scroll, not a shrink-to-fit grid) --
   store-home.js's prev/next arrows already compute their scroll step
   from the actual first-item width via track.scrollBy(), so this is the
   layout that JS was written for. Small gap for a dense/packed rail,
   not spaced-out thumbnails. */
.store-home-coffee-rail-track {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.store-home-coffee-rail-track::-webkit-scrollbar { display: none; }
/* 2026-09-08: real product name added above the image, per explicit
   instruction -- was a pure image-only item (no text at all). The item
   itself is a flex column now (title row, then image); the image gets
   its own dedicated wrapper (.store-home-coffee-rail-item-image) sized
   250x250 exactly like before, so the bag itself doesn't shrink to make
   room for the title -- the item just grows taller instead, matching
   this whole session's "keep the image size constant" rule for every
   other section's own image. */
/* 2026-09-08: border added around the whole item (image + title
   together), matching the same #d9d9d9 used by the origin/equipment
   cards. Width grows 250px -> 274px (250px image + 12px padding each
   side, box-sizing:border-box so 274px is the real outer/bordered
   width) so the image itself stays exactly 250px, same "keep the
   image size constant" rule as everywhere else -- the border just
   wraps a frame around it instead of shrinking it. padding-top stays
   14px (was added just before this, to push the content down a
   little); left/right/bottom now 12px, matching the equipment card's
   own padding convention. */
/* 2026-09-08: 274px -> 234px (image 250px -> 210px below, same 24px
   padding budget) -- explicit instruction to tighten so 4 items are
   visible in the track-wrap's own ~960px width at the common 1280px
   viewport (was fitting 3 + a sliver of the 4th: 3*274+16=838, a 4th
   needed another 282px past that). 4*234 + 3*8 gap = 960px, fits
   exactly. */
/* 2026-09-08: was a single <a> (whole card one link); a cart CTA added
   next to the price (see below) needs its own separate link (nested
   <a> isn't valid HTML), so this became an <article> instead, with the
   image/title each their own <a> now, same structure
   .store-home-specialty-card already uses. */
/* 2026-09-08: background rgba(255,255,255,.5) added, matching
   .store-home-specialty-card exactly -- explicit instruction to give
   every card this same light, semi-translucent surface so it visually
   stands apart from the beige page background instead of the beige
   just showing straight through the bordered box (as it did before
   this, with no background of its own at all). */
.store-home-coffee-rail-item {
  display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto;
  box-sizing: border-box; width: 234px; padding: 14px 12px 12px;
  border: 1px solid #d9d9d9; background: rgba(255, 255, 255, .5);
}
/* 2026-09-08: real price added, between the image and the title, per
   explicit instruction -- same green/weight as every other product
   price on the homepage (.store-home-specialty-price etc.). Sits in a
   row with the cart CTA (added right after, same instruction) instead
   of standing alone. */
.store-home-coffee-rail-item-footer { display: flex; align-items: center; justify-content: center; gap: 10px; }
.store-home-coffee-rail-item-price { color: var(--martines-green); font-size: 16px; font-weight: 700; }
/* 2026-09-08: cart CTA added next to the price, explicitly "like the
   button on the section below" -- same exact look/size as
   .store-home-specialty-cta (caramel circle-ish square, same cart
   glyph), reused verbatim rather than inventing a second style. */
.store-home-coffee-rail-item-cta { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 4px; background: var(--coffee-caramel); color: var(--martines-bg); text-decoration: none; transition: background var(--transition-fast); flex: 0 0 auto; }
.store-home-coffee-rail-item-cta svg { width: 16px; height: 16px; }
.store-home-coffee-rail-item-cta:hover { background: var(--coffee-burnish); }
/* font-size 12px -> 15px, per explicit instruction. */
.store-home-coffee-rail-item-title {
  color: var(--martines-text); font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center;
  text-decoration: none;
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
/* Square, matching the real source image aspect ratio exactly -- no
   letterboxing, no wasted space, the whole box is visible bag.
   2026-09-08: 250px -> 210px, per explicit instruction (see the item's
   own rule above) to fit 4 visible at the common 1280px viewport. */
.store-home-coffee-rail-item-image { display: block; width: 210px; height: 210px; text-decoration: none; }
.store-home-coffee-rail-item-image picture, .store-home-coffee-rail-item-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Base arrow look (size/shape/hover) -- position is set per-arrow above
   (position:absolute, relative to .store-home-coffee-rail) since the
   copy column's left edge needs to match the specialty section's
   heading below it exactly, which the arrows no longer factor into. */
.store-home-coffee-rail-arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--martines-border); background: #fff;
  color: var(--martines-green); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast);
}
.store-home-coffee-rail-arrow svg { width: 13px; height: 13px; }
.store-home-coffee-rail-arrow:hover { background: var(--martines-green); color: var(--martines-bg); }

/* ============ J. Specialty espresso — 2026-09-05 scaled up to match the
   coffee rail: ~306px total (was ~172px), same shell width (899px at
   935px reference, scoped to this section only) and the same 28px
   vertical gap to the section above/below (already the shared
   .store-home-section base's own margin-top -- unchanged). Height comes
   from real content (bigger card/image), not padding. ============ */
/* No h2 rule here anymore -- the section's H2 was removed (2026-09-05),
   the eyebrow alone now carries the heading text. color:orange
   re-asserted explicitly: .store-home-section-heading p (elsewhere in
   this file, meant for a description paragraph under other sections'
   headings) has higher specificity than .store-home-eyebrow alone and
   was silently winning since the eyebrow is also a <p> -- same real bug
   as the coffee rail's eyebrow, confirmed via computed style. */
.store-home-specialty .store-home-eyebrow { margin-bottom: 4px; color: var(--martines-orange); }
/* Real bug: the heading wrapper had no margin-bottom at all, so the card
   grid sat flush against it with zero gap. 2026-09-06: briefly scaled
   this whole section up (26px heading gap, 335-343px card) to chase a
   377px section-height target shared with the hero; reverted in full,
   height included, per explicit instruction -- this section keeps its
   own, shorter, real-content-driven height instead of being padded/
   enlarged out to match. */
.store-home-specialty .store-home-section-heading { margin-bottom: 18px; }
.store-home-specialty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* 2026-09-08: wide-desktop density fix -- a 4th real specialty product
   (42 real active products qualify, confirmed live, nowhere near a
   ceiling) instead of stretching 3 cards across the wider 1680px shell
   above. Moved from an original 1400px breakpoint to 1600px the same
   day -- 1400 landed inside typical laptop widths (1440 in particular)
   and changed their layout, which the explicit instruction said to
   leave untouched; 1600px matches the shell's own >=1600px widen point
   above, so the 4th column only ever appears together with the extra
   room for it. */
@media (min-width: 1600px) {
  .store-home-specialty-grid { grid-template-columns: repeat(4, 1fr); }
}
/* 2026-09-08: the 4th real card (LIMIT raised 3->4 in index.php) is
   always in the DOM now, but the grid only grows a 4th column at
   1600px above. Without this, every width below that (including
   mobile/tablet, which must stay untouched) orphaned that 4th card
   onto a half-empty second row. Hide it by default, reveal it exactly
   where the column switch above also happens. */
.store-home-specialty-grid > *:nth-child(4) { display: none; }
@media (min-width: 1600px) {
  .store-home-specialty-grid > *:nth-child(4) { display: grid; }
}
.store-home-specialty-card {
  display: grid; grid-template-columns: 130px 1fr; min-height: 258px;
  /* 2026-09-08: fixed height:230px -> height:258px (room for a 2-line
     clamp) -> min-height:258px (this revision) -- the spec value below
     now shows the full real text with no truncation at all, so the
     card can no longer have a hard ceiling; it grows for whichever
     card's "Вкус" value genuinely needs more lines. CSS Grid's default
     align-items:stretch then equalizes every card in that row to the
     tallest one, so the grid still reads as one even row, not jagged.
     258px keeps every card at its previous height when nothing needs
     to grow. Mobile already used height:auto (899.98px override
     below), unaffected either way. */
  border: 1px solid var(--martines-border); background: rgba(255, 255, 255, .5);
}
.store-home-specialty-image { align-self: center; height: 195px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.store-home-specialty-image picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.store-home-specialty-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.store-home-specialty-body { min-width: 0; padding: 16px; display: flex; flex-direction: column; }
.store-home-specialty-category { margin-bottom: 4px; color: var(--martines-orange); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.store-home-specialty-body h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.2; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.store-home-specialty-body h3 a { color: var(--martines-text); text-decoration: none; }
.store-home-specialty-specs { display: flex; flex-direction: column; gap: 6px; margin: 0 0 auto; font-size: 11px; }
/* 2026-09-08: was a single-line flex row with dd forced to
   white-space:nowrap + text-overflow:ellipsis -- cut real values like
   "Ягода, касис, мед, къпина, panela, тъмен шоколад" off mid-word on
   one line. A follow-up stacked label above value on its own line,
   still clamped to 2 lines with an ellipsis safety net -- explicit
   correction: label and value belong on the same line ("Вкус: Ягода,
   касис, ..."), wrapping normally onto as many lines as the real text
   actually needs, with NO ellipsis/truncation anywhere, ever. dt/dd
   are inline now (not flex) so they flow together like a sentence;
   dd's own small margin-inline-start stands in for the space the flex
   gap used to provide (there's no literal space between </dt> and
   <dd> in the PHP source). */
.store-home-specialty-specs dt { display: inline; margin: 0; color: var(--martines-muted); font-weight: 600; }
.store-home-specialty-specs dd { display: inline; margin: 0 0 0 4px; color: var(--martines-text); font-weight: 700; }
.store-home-specialty-footer { margin-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.store-home-specialty-price { color: var(--martines-green); font-size: 18px; font-weight: 700; }
/* 2026-09-08: real per-variant weight next to the price ("20.04 €
   / 250 гр.") -- lighter/smaller than the price itself so it reads as
   a detail, not a second price. */
.store-home-specialty-price-weight { color: var(--martines-muted); font-size: 11px; font-weight: 600; }
/* Add-to-cart CTA icon -- caramel/burnish (primary actionable element),
   not the shared heading/price noir. */
.store-home-specialty-cta { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 4px; background: var(--coffee-caramel); color: var(--martines-bg); text-decoration: none; transition: background var(--transition-fast); flex: 0 0 auto; }
.store-home-specialty-cta svg { width: 16px; height: 16px; }
.store-home-specialty-cta:hover { background: var(--coffee-burnish); }

/* ============ K. Why Martines — 2026-09-06: target ~same height as the
   hero (377px live). Width: full-bleed like .store-home-hero (100vw via
   .store-home's own breakout, NO .store-home-shell/.store-shell wrapper)
   per explicit instruction that this section should span the site's
   full width the same way the hero does, not be capped by the shared
   content-shell classes every other section uses.
   2026-09-07: margin-top:28px -> padding-block:60px (margin removed),
   matching .store-home-section's own rhythm (coffee rail/specialty/
   origin/equipment/manufacturers) so every homepage section now shares
   the same vertical spacing mechanism. The inner grid below keeps its
   own min-height:377px untouched -- the image still renders at its
   real, full 377px height (object-fit:cover, height:100% of the grid
   cell), the new 60px top/bottom padding only adds outer breathing
   room around that inner block, same as it does for the shared
   .store-home-section sections. ============ */
/* 2026-09-08: 44px -> 32px, matching .store-home-section's own tighter
   rhythm (same instruction, one more pass). */
.store-home-why { padding-block: 32px; background: var(--martines-bg); }
.store-home-why-inner {
  position: relative; display: grid; grid-template-columns: 35% 65%;
  align-items: stretch; min-height: 377px; overflow: hidden;
}
.store-home-why-media { position: relative; overflow: hidden; }
.store-home-why-media picture, .store-home-why-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.store-home-why-bg { object-position: 62% 35%; }
.store-home-why-media-placeholder { width: 100%; height: 100%; background: radial-gradient(circle at 35% 30%, var(--martines-bg-alt), var(--martines-green) 130%); }
/* Fade from the image into the copy background -- "IMAGE -> FADE ->
   TEXT", no hard vertical edge. 2026-09-07: same sharper/organic
   multi-layer treatment as the hero's own fade, mirrored -- this
   image sits on the LEFT with text on the RIGHT (hero is the reverse),
   so the axis points left (not right) and every blob's x-position is
   mirrored (92%/84%/73% here vs. hero's 8%/16%/27%) so the protected,
   fully-opaque zone sits against the text edge (now the right side of
   the box) instead of the left. */
.store-home-why-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 62% at 95% 28%, var(--martines-bg) 0%, rgba(243,234,224,.96) 24%, rgba(243,234,224,.68) 44%, rgba(243,234,224,.18) 64%, rgba(243,234,224,0) 78%),
    radial-gradient(ellipse 40% 72% at 88% 78%, rgba(243,234,224,.94) 0%, rgba(243,234,224,.70) 30%, rgba(243,234,224,.24) 55%, rgba(243,234,224,0) 74%),
    radial-gradient(ellipse 30% 48% at 77% 42%, rgba(243,234,224,.44) 0%, rgba(243,234,224,.20) 42%, rgba(243,234,224,0) 68%),
    linear-gradient(to left, var(--martines-bg) 0%, rgba(243,234,224,.98) 12%, rgba(243,234,224,.82) 24%, rgba(243,234,224,.50) 36%, rgba(243,234,224,.16) 46%, rgba(243,234,224,0) 56%);
}
/* No max-width caps on the copy block or its paragraphs: each of the 4
   requested lines (2 per paragraph, broken via the explicit \n + nl2br
   in the i18n strings) must render on one line each, not wrap again.
   Column width + padding sized against the real live-measured text
   width (563px, the longest of the 4 lines at this font/size, measured
   via getBoundingClientRect -- canvas-estimated width undershot the
   real DOM width) so available content width clears it with headroom.
   2026-09-07: left/right padding rebalanced (16/16 -> 28/4, same 32px
   total) to pull the text a little further right, per explicit
   instruction -- redistributing the existing padding instead of adding
   more keeps the available content width exactly what it was (the text
   was already right at the edge of fitting on one line each, zero
   spare width to give up). */
.store-home-why-copy { display: flex; flex-direction: column; justify-content: center; padding: 24px 4px 24px 28px; }
.store-home-why-copy h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.22; }
.store-home-why-copy h2 span { display: block; }
.store-home-why-title-line1 { color: var(--martines-text); }
/* "...е печено след вашата поръчка" is a roast-related message -- burnish,
   per the palette, rather than the shared small-label crema. */
.store-home-why-title-line2 { color: var(--coffee-burnish); }
.store-home-why-copy p { margin: 0 0 12px; color: var(--martines-muted); font-size: 13px; line-height: 1.55; white-space: nowrap; }
.store-home-why-copy .btn { margin-top: 8px; align-self: flex-start; }

/* ============ L. Origin regions — target ~170px. 2026-09-06: briefly
   scaled this whole section up (card 100px -> 301-311px, bigger heading
   gap/type) to chase a 377px section-height target shared with the
   hero; reverted in full, height included, per explicit instruction --
   this section keeps its own, shorter, real-content-driven height
   instead of being padded/enlarged out to match. ============ */
.store-home-origin-heading { text-align: left; }
.store-home-origin-heading .store-home-divider { margin-inline: 0; }
/* Real bug, same root cause as the coffee rail's/specialty's own eyebrow
   fix earlier this session: .store-home-section-heading p (below, meant
   for a description paragraph under other sections' headings) has
   higher specificity than .store-home-eyebrow alone and was silently
   winning since the eyebrow is also a <p> -- rendering muted gray
   instead of orange. Re-asserted explicitly here. */
.store-home-origin-heading .store-home-eyebrow { color: var(--martines-orange); }
/* 2026-09-06: background was a literal #fff, not the section's own foam
   tone -- per the authoritative palette's explicit "section/background:
   foam" for this section, switched to the shared token instead of a
   hardcoded white. */
/* 2026-09-06: cards used to share one outer border + border-left
   dividers with zero gap, so all 4 sat visually fused together. Real
   gap between them now (each card gets its own full border instead of
   the shared divider pattern), and height nudged up a little. */
/* 2026-09-08: wide-desktop density fix -- capped at its own max-width
   (close to the card size the 4 cards already had at the old 1280px
   shell cap) and centered within the section's own shell, so the
   cards stay the same size instead of stretching to fill it. A 5th
   real card (Rwanda, next-ranked region by real product count after
   Kenya, now has a real sourced photo too -- see
   $homeOriginImageOverrides in index.php) is allowed in at a
   wide-enough breakpoint below; below that this stays 4 cards exactly
   as before, and Colombia/Peru/Ethiopia/Kenya remain the only regions
   shown at any narrower width. Still only regions with a REAL sourced
   photo are ever shown -- no fabricated imagery. */
.store-home-origin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1264px; margin-inline: auto; background: transparent; }
/* 5th card hidden until the breakpoint below (mirrors the specialty/
   equipment "hide extra card until its own column-count breakpoint"
   pattern) so mobile/tablet and narrower desktop keep exactly 4 cards. */
.store-home-origin-grid > *:nth-child(5) { display: none; }
@media (min-width: 1600px) {
  .store-home-origin-grid {
    grid-template-columns: repeat(5, 1fr);
    /* 2026-09-08 (later): explicit instruction -- widen this section to
       match Equipment's width exactly, not just stop it from
       stretching. Drops the narrower inner cap entirely here (was
       1480px) so the grid fills the section's own shell, which just
       joined the shared 1680px group above -- same right edge as
       Equipment's cards from this breakpoint up. Cards go from ~285px
       to ~325px; still nowhere near "4 cards stretched across the
       whole screen". */
    max-width: none;
  }
  .store-home-origin-grid > *:nth-child(5) { display: grid; }
}
.store-home-origin-card {
  display: grid; grid-template-columns: 55% 45%; height: 116px;
  /* light gray placeholder, per explicit instruction (was #f1e8df) */
  border: 1px solid #d9d9d9; text-decoration: none; overflow: hidden;
  transition: background var(--transition-fast);
}
/* --martines-bg-soft now aliases to the same flat foam as --martines-bg
   (2026-09-06 palette change), so it stopped giving this hover any real
   contrast. A faint plantation wash keeps a visible hover state while
   staying inside the authoritative palette (plantation is this section's
   own "origin emphasis" color already used for the region name). */
.store-home-origin-card:hover { background: rgba(6, 61, 32, .06); }
.store-home-origin-text { min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: center; }
/* Origin region name -- plantation, per the palette's explicit "origin"
   role, rather than the shared heading/price noir. */
.store-home-origin-name { color: var(--coffee-plantation); font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.2; }
.store-home-origin-count { margin-top: 2px; color: var(--martines-muted); font-size: 10px; }
/* Clickable secondary link ("ВИЖ ПРОДУКТИТЕ") -- burnish (secondary
   emphasis/action), not the shared passive-label crema. */
.store-home-origin-link { margin-top: 6px; color: var(--coffee-burnish); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
/* 2026-09-07: same sharper/organic fade family as the hero and "Защо
   Martines?" -- image on the right, text on the left, same axis as the
   hero (not mirrored), just scaled down for this card's own small box
   (~103x116px at the 935px reference) -- 2 blobs instead of 3, tighter
   percentages so the fade doesn't visually eat the whole card. */
.store-home-origin-image { display: block; position: relative; height: 100%; overflow: hidden; background: var(--martines-bg-alt); }
.store-home-origin-image::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 12% 26%, var(--martines-bg) 0%, rgba(243,234,224,.92) 26%, rgba(243,234,224,.5) 48%, rgba(243,234,224,0) 68%),
    radial-gradient(ellipse 50% 70% at 16% 76%, rgba(243,234,224,.88) 0%, rgba(243,234,224,.42) 34%, rgba(243,234,224,0) 62%),
    linear-gradient(to right, var(--martines-bg) 0%, rgba(243,234,224,.9) 14%, rgba(243,234,224,.5) 27%, rgba(243,234,224,.15) 40%, rgba(243,234,224,0) 52%);
}
.store-home-origin-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ M. Equipment — 2026-09-06: scaled up (card 145px -> ~333px,
   mostly via a bigger product image) so the section's real content
   reaches the hero's own height (377px), instead of leaving blank space
   via min-height. ============ */
/* Real bug, same root cause as the coffee rail's/specialty's own eyebrow
   fix earlier this session: .store-home-section-heading p (meant for a
   description paragraph under other sections' headings) has higher
   specificity than .store-home-eyebrow alone and was silently winning
   since the eyebrow is also a <p> -- rendering muted gray instead of
   orange. Re-asserted explicitly here. */
.store-home-equipment .store-home-eyebrow { color: var(--martines-orange); }
/* Real bug: the heading wrapper had no margin-bottom at all, so the card
   grid sat flush against the H2 ("Подбрано за професионалисти") with
   zero gap -- confirmed live (heading.bottom === wrap.top exactly). */
.store-home-equipment .store-home-section-heading { margin-bottom: 18px; }
/* 2026-09-08: real horizontal-scroll carousel (was a CSS Grid with
   column-count breakpoints + nth-child hide/reveal, from back when this
   rail's arrows were purely decorative -- see index.php's own comment
   at this section). Same mechanism as the coffee rail's track: flex row,
   fixed-width cards, overflow-x:auto, store-home.js's now-generalized
   prev/next handler drives it via track.scrollBy(). A wider shell (the
   >=1600px group above, unchanged) still means more of the 6 real cards
   are simultaneously visible without even needing the arrow -- same as
   the coffee rail already does -- so no column-count breakpoints are
   needed to get that; the arrow now covers the rest. */
.store-home-equipment-grid {
  display: flex; gap: 11px;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.store-home-equipment-grid::-webkit-scrollbar { display: none; }
/* 2026-09-06: border added around each product, same color as the
   origin cards' border. Padding added so the image/text don't touch
   the new border edges; height stays 333px (the section's own carefully
   tuned total, 377px, is unchanged) because the image already has
   flex-shrink:1 (see below) and absorbs the padding's extra vertical
   space automatically instead of needing the card to grow. */
/* light gray placeholder, per explicit instruction (was #f1e8df) */
/* width:300px (was an implicit grid 1fr) -- fixed now that the grid
   above is a real scroll track, not a column grid; matches this card's
   own previous ~307px width at the 1280px reference viewport almost
   exactly, so it doesn't suddenly look like a different product size. */
.store-home-equipment-card { flex: 0 0 auto; width: 300px; height: 333px; padding: 12px; border: 1px solid #d9d9d9; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Without flex-shrink:0, the flex column shrinks these below their
   content height to fit the card height — that silently truncated the
   2-line-clamped title mid-line instead of rendering it in full. The
   image box shrinks instead so the fixed text rows keep their real
   height. */
.store-home-equipment-card > * { flex-shrink: 0; }
.store-home-equipment-image { flex-shrink: 1; min-height: 0; }
/* height on this element alone isn't enough to cap the <img> — its real
   DOM parent is <picture> (AVIF/WebP/JPEG <source> markup), which has no
   CSS of its own and is sized by its own content by default (no
   definite height), so max-height:100% on the <img> resolves against
   that indeterminate height and silently falls back to no constraint at
   all. Explicitly sizing <picture> to width/height:100% closes the
   chain — confirmed live before this fix as a real, reproducible bug
   (two of four images rendered oversized, overlapping the heading above
   and the price/name below), not a screenshot artifact. 2026-09-06:
   height bumped 100px -> 260px along with the rest of the card's type,
   so the extra card height (145 -> 333) goes into a bigger product
   photo, not blank space. */
.store-home-equipment-image { height: 260px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 10px; }
.store-home-equipment-image picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.store-home-equipment-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.store-home-equipment-title { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.store-home-equipment-title a { color: var(--martines-text); text-decoration: none; }
.store-home-equipment-price { color: var(--martines-green); font-size: 14px; font-weight: 700; }
/* Clickable secondary link ("УВЕДОМИ МЕ ЗА НАЛИЧНОСТ") -- burnish. */
.store-home-equipment-notify { display: block; margin-top: 4px; color: var(--coffee-burnish); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; }
.store-home-equipment-notify:hover { text-decoration: underline; }
.store-home-equipment-wrap { position: relative; }
/* 2026-09-06: matched to the coffee rail's own arrow (.store-home-
   coffee-rail-arrow) -- same size/hover style and the same left/right
   offsets, per explicit instruction. */
.store-home-equipment-arrow {
  position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--martines-border); background: #fff;
  color: var(--martines-green); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast);
  transform: translateY(-50%);
}
.store-home-equipment-arrow svg { width: 13px; height: 13px; }
.store-home-equipment-arrow:hover { background: var(--martines-green); color: var(--martines-bg); }
/* 2026-09-07: re-matched again to the coffee rail's own arrows, which
   were pulled back in from -48/-14 to -8/-8 -- see that rule's own
   comment for the full reasoning (the old values put the arrow fully
   outside the viewport across nearly the whole common desktop width
   range once overflow-x:clip started actually enforcing it). */
/* 2026-09-07: re-matched again to the coffee rail's own arrows, pulled
   back out to -28px (was -8px, too close/overlapping the text). */
.store-home-equipment-arrow-prev { left: -34px; }
.store-home-equipment-arrow-next { right: -34px; }

/* ============ N. Business — 2026-09-06: scaled up (icon/title/desc all
   bigger, description unclamped to 3 lines, more section padding) so
   the section's real content reaches the hero's own height (377px),
   instead of leaving blank space via min-height.
   2026-09-07: margin-top:28px + padding:45px 0 -> padding-block:60px
   (margin removed), matching every other homepage section's shared
   60px rhythm instead of its own one-off 45px value. ============ */
/* 2026-09-08: 44px -> 32px, matching .store-home-section's own tighter
   rhythm (same instruction, one more pass). */
.store-home-business { padding-block: 32px; background: var(--martines-bg-alt); }
.store-home-business-heading { text-align: left; margin-bottom: 30px; }
.store-home-business-heading .store-home-eyebrow { margin-bottom: 4px; line-height: 1.1; }
.store-home-business-heading h2 { font-size: 26px; line-height: 1.15; }
.store-home-business-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
/* 2026-09-06: icon moved to the left of the title/description/link
   instead of stacked above them -- grid with the icon spanning all 3
   text rows in its own column, rather than the old block flow. */
.store-home-business-item {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start;
  padding-inline: 24px; border-right: 1px solid var(--martines-border);
}
.store-home-business-item:last-child { border-right: 0; }
.store-home-business-item:first-child { padding-left: 0; }
.store-home-business-icon { grid-column: 1; grid-row: 1 / span 3; color: var(--martines-orange); }
.store-home-business-icon svg { width: 36px; height: 36px; }
.store-home-business-item h3, .store-home-business-item p, .store-home-business-item a { grid-column: 2; }
.store-home-business-item h3 { margin: 0 0 8px; color: var(--martines-text); font-size: 18px; font-weight: 700; line-height: 1.25; }
/* Last item ("Обучения и курсове"/Training & courses) is coffee
   education content -- plantation, per the palette, instead of the
   other 3 items' generic crema/noir. */
.store-home-business-item:last-child .store-home-business-icon,
.store-home-business-item:last-child h3 { color: var(--coffee-plantation); }
.store-home-business-item p { margin: 0 0 10px; color: var(--martines-muted); font-size: 13px; line-height: 1.5; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
/* Clickable secondary link ("НАУЧИ ПОВЕЧЕ") -- burnish, uniform across
   all 4 items (the 4th item's icon/title alone carry the plantation
   "education" tint below, not this shared action link). */
.store-home-business-item a { color: var(--coffee-burnish); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; }
.store-home-business-item a:hover { text-decoration: underline; }

/* ============ O. Blog — architecture reserved, no fake content. Target
   ~190px WHEN real content exists; renders nothing at all otherwise
   (see index.php — no blog/news/article table exists anywhere in this
   project's database, confirmed live). ============ */
.store-home-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.store-home-blog-card { display: grid; grid-template-columns: 40% 60%; height: 120px; overflow: hidden; text-decoration: none; }
.store-home-blog-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-home-blog-body { padding: 0 0 0 12px; display: flex; flex-direction: column; justify-content: center; }
.store-home-blog-tag { color: var(--martines-orange); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.store-home-blog-title { margin: 4px 0; color: var(--martines-text); font-family: var(--font-display); font-size: 13px; font-weight: 600; line-height: 1.25; }
.store-home-blog-excerpt { margin: 0; color: var(--martines-muted); font-size: 10px; line-height: 1.4; }
/* Clickable secondary link -- burnish. */
.store-home-blog-link { margin-top: 6px; color: var(--coffee-burnish); font-size: 9px; font-weight: 700; text-transform: uppercase; }

/* ============ Product cards used by the generic featured/bestseller/
   promo rails (empty on this catalog today, kept for when they aren't) ============ */
.store-home-product-card { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--martines-border); border-radius: 6px; background: #fff; transition: transform var(--transition-fast); }
.store-home-product-card:hover { transform: translateY(-3px); }
.store-home-product-image-link { display: block; background: var(--martines-bg); }
.store-home-product-image { width: 100%; height: 150px; display: block; object-fit: contain; object-position: center; }
.store-home-product-body { min-width: 0; padding: 14px; display: flex; flex: 1 1 auto; flex-direction: column; text-align: center; }
.store-home-product-category { margin-bottom: 6px; color: var(--martines-orange); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.store-home-product-title { margin: 0 0 8px; display: -webkit-box; overflow: hidden; font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.store-home-product-title a { color: var(--martines-text); text-decoration: none; }
.store-home-product-footer { display: flex; flex: 1 1 auto; align-items: center; flex-direction: column; gap: 10px; text-align: center; }
.store-home-product-price { color: var(--martines-green); font-size: 15px; font-weight: 700; }
/* "Виж продукта" outline button -- burnish, consistent with the other
   small secondary clickable links on the homepage (origin/equipment/
   business/blog), not the shared heading/price noir. */
.store-home-product-cta { margin-top: auto; font-weight: 700; border-radius: 4px; border-color: var(--coffee-burnish); color: var(--coffee-burnish); }
.store-home-product-cta:hover { background: var(--coffee-burnish); border-color: var(--coffee-burnish); color: var(--martines-bg); }

/* ============ Recently viewed / manufacturers (kept, real, small) ============ */
.store-home-recent-scroller { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.store-home-recent-card { flex: 0 0 110px; border-radius: 4px; background: #fff; border: 1px solid var(--martines-border); overflow: hidden; text-decoration: none; }
.store-home-recent-image { display: block; width: 110px; height: 110px; background: var(--martines-bg); }
.store-home-recent-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.store-home-recent-title { display: -webkit-box; overflow: hidden; padding: 6px 8px; color: var(--martines-text); font-size: 11px; font-weight: 600; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.store-home-manufacturer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.store-home-manufacturer-tile { display: flex; align-items: center; justify-content: center; height: 60px; padding: 10px; border-radius: 4px; background: #fff; border: 1px solid var(--martines-border); filter: grayscale(1); opacity: .72; }
.store-home-manufacturer-tile:hover { filter: none; opacity: 1; }
.store-home-manufacturer-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ============ R. Responsive ============ */
@media (max-width: 899.98px) {
  .store-home-shell { width: min(100% - 48px, 1180px); }

  /* Below desktop, copy stacks above media in normal flow — media goes
     back to a static, explicitly-heighted block instead of absolutely
     filling .store-home-hero-inner (which is what desktop needs to keep
     the photo's intrinsic aspect ratio from dictating the row height). */
  /* display:block (not the desktop flex) -- media goes back to
     position:static below, so as a flex item it would otherwise sit
     beside copy in a row instead of stacking under it. */
  .store-home-hero-inner { min-height: 0; display: block; }
  .store-home-hero { min-height: 0; }
  .store-home-hero-copy { position: static; width: auto; padding: 28px 24px 20px; }
  /* Desktop deliberately lets each title line overflow past the copy
     column into the image's fade zone (white-space:nowrap + max-width
     wider than the column) -- below desktop the column is full-width
     again, so that's not needed and, left in place, was
     clipping "Професионално изпечено" outright at mobile widths where a
     single nowrap line is wider than the viewport itself. Real bug, not
     a design choice -- caught via a direct scrollWidth-vs-clientWidth
     check on the line span. */
  .store-home-hero-title-line1, .store-home-hero-title-line2 { white-space: normal; }
  .store-home-hero h1 { max-width: 100%; }
  .store-home-hero-actions { flex-wrap: wrap; }
  .store-home-hero-media { position: static; width: auto; height: 240px; }
  .store-home-hero-media::before { background: none; }

  /* Single column -- copy and track-wrap (in that source order) just
     stack normally, same as the arrows being out of the grid flow
     entirely (position:absolute) at every breakpoint now. */
  .store-home-coffee-rail { grid-template-columns: 1fr; row-gap: 14px; }
  .store-home-coffee-rail-copy, .store-home-coffee-rail-track-wrap { grid-column: 1; }
  /* Copy stacks above the track here, so centering the arrows on the
     whole (taller, stacked) block -- the desktop rule -- would land them
     over the copy/CTA button instead of the image row. Anchor from the
     bottom (the track is the last block) instead. */
  /* left:284px (the desktop copy<->track gap position) doesn't apply
     once copy stacks full-width above the track -- reset both arrows to
     the row's own left/right edges. */
  .store-home-coffee-rail-arrow-prev { top: auto; bottom: 24px; left: 4px; transform: none; }
  .store-home-coffee-rail-arrow-next { top: auto; bottom: 24px; right: 4px; transform: none; }
  /* Square (matches the real source image aspect ratio -- see the
     desktop rule's own comment), not the old 160x250 portrait box.
     2026-09-08: the item's own width covers the 150px image plus the
     same 12px/side padding the desktop border rule added (box-sizing:
     border-box, same as desktop) -- 174px, not 150px, so the image
     doesn't poke out past the border on the sides; the fixed height
     moved onto the item's own image wrapper, added alongside the new
     title row above it. */
  .store-home-coffee-rail-item { width: 174px; }
  .store-home-coffee-rail-item-image { width: 150px; height: 150px; }

  .store-home-specialty-grid { grid-template-columns: 1fr; }
  .store-home-specialty-card { grid-template-columns: 110px 1fr; height: auto; min-height: 110px; }

  .store-home-why-inner { grid-template-columns: 1fr; min-height: 0; }
  .store-home-why-media { height: 220px; }
  .store-home-why-media::after { background: none; }
  .store-home-why-copy { max-width: none; padding: 24px; }

  .store-home-origin-grid { grid-template-columns: repeat(2, 1fr); }

  /* 2026-09-08: explicit display:grid override -- the base rule became a
     horizontal-scroll flex track (real carousel arrows, see that rule's
     own comment), but mobile/tablet keep their own real 2-column grid
     layout exactly as before, not a scroll row; width:auto/flex:auto
     un-does the desktop rule's fixed 300px card width so each card fills
     its own grid cell like it always did here. */
  .store-home-equipment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; overflow-x: visible; }
  .store-home-equipment-card { flex: auto; width: auto; }
  /* 2026-09-08: the desktop scroll track (base rule above) carries all 6
     real items now (LIMIT raised for the wide-desktop density fix, out
     of scope for mobile/tablet); keep mobile/tablet at exactly the 4
     they always had instead of a 3rd grid row appearing here. */
  .store-home-equipment-grid > *:nth-child(n+5) { display: none; }

  .store-home-business-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .store-home-business-item { border-right: 0; border-top: 1px solid var(--martines-border); padding-top: 14px; }
  .store-home-business-item:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .store-home-business-item:nth-child(odd) { padding-left: 0; }

  .store-home-blog-grid { grid-template-columns: 1fr; }
  .store-home-manufacturer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575.98px) {
  .store-home-shell { width: min(100% - 32px, 1180px); }
  .store-home-hero-media { height: 200px; }
  /* 4 fixed columns at a fixed 55px height left no room for real labels
     like "Доставка с Econt" at this width — 2x2 with auto height lets
     each cell wrap onto two lines without clipping. */
  .store-home-hero-benefits { grid-template-columns: repeat(2, 1fr); }
  .store-home-hero-benefits li { height: auto; min-height: 50px; padding: 8px 10px; font-size: 10px; }
  .store-home-hero-benefits li:nth-child(3) { border-left: 0; }
  .store-home-hero-benefits li:nth-child(-n+2) { border-bottom: 1px solid var(--martines-border); }
  /* 2026-09-08: 130px image + same 12px/side padding = 154px, same
     border-box reasoning as the 899.98px breakpoint above. */
  .store-home-coffee-rail-item { width: 154px; }
  .store-home-coffee-rail-item-image { width: 130px; height: 130px; }
  .store-home-origin-grid { grid-template-columns: 1fr; }
  .store-home-equipment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; overflow-x: visible; }
  .store-home-equipment-card { flex: auto; width: auto; }
  .store-home-business-grid { grid-template-columns: 1fr; }
  .store-home-business-item { border-top: 1px solid var(--martines-border); padding: 14px 0 0; }
  .store-home-business-item:first-child { border-top: 0; padding-top: 0; }
  .store-home-manufacturer-grid { grid-template-columns: repeat(2, 1fr); }
  .store-home-product-image { height: 130px; }
}

/* 2026-09-08 (later still): explicit request -- on a real wide monitor,
   headings/hero copy read a little small even though nothing is
   "stretched" (viewing distance is naturally further back on a big
   screen than on a laptop). Bumped a handful of heading/marketing-copy
   sizes ~10% here, gated behind the same >=1600px point as everything
   else above -- laptop widths keep their original sizes. Deliberately
   does NOT touch any text living inside a product card (specialty/
   origin/equipment card titles, prices, specs, etc.) -- those sit in
   fixed-height grid cells with -webkit-line-clamp tuned to an exact
   line count, and this exact "font-size bumped without adjusting the
   box" mistake already caused a real overflow bug earlier this session
   (see the homepage-martines-rebuild memory) -- not worth revisiting
   for a "little bigger" ask that was never about the cards.
   Placed at the very end of the file on purpose: every rule this
   overrides (.store-home-hero h1, .store-home-coffee-rail-copy h2,
   etc.) is a plain unconditional single-class selector defined earlier
   in the file, same specificity as this media query's own selectors --
   CSS resolves equal-specificity ties by source order, so this block
   has to come after all of them to actually win. Confirmed live: an
   earlier attempt placed near the top of the file silently lost every
   one of these overrides to the later unconditional rule. */
@media (min-width: 1600px) {
  .store-home-eyebrow { font-size: 11px; }
  .store-home-section-heading h2 { font-size: 27px; }
  .store-home-section-heading p { font-size: 13px; }
  .store-home-hero-eyebrow { font-size: 12px; }
  .store-home-hero h1 { font-size: 44px; }
  .store-home-hero-desc { font-size: 15px; }
  .store-home-coffee-rail-copy .store-home-eyebrow { font-size: 13px; }
  .store-home-coffee-rail-copy h2 { font-size: 33px; }
  .store-home-coffee-rail-copy p { font-size: 16px; }
  .store-home-why-copy h2 { font-size: 29px; }
  .store-home-business-heading h2 { font-size: 29px; }
}