/* ==========================================================================
   ENG HOME Redesign — Phase 1: tokens & global shell
   ==========================================================================
   Source of truth: DESIGN_SYSTEM.md (extracted from design-reference/
   ballina-e-re.html) and REDESIGN_PLAN.md Phase 1 ("Add one namespaced
   stylesheet implementing design tokens, typography, container, focus,
   buttons, forms, breadcrumbs, alerts, header/navigation/mobile drawer,
   mini-cart shell, and footer.").

   This is the single additive layer for this phase. It does not delete or
   edit any existing enghome-*.css file. All rules are scoped under the
   existing body.enghome-body class (present on every storefront page) per
   REDESIGN_PLAN.md's cascade risk control. It is linked exactly once, as
   the very last stylesheet in the document, at the end of
   common/footer.twig (after every <link> in <head> and after every inline
   <style> block that page emits) — so it always keeps the last word in the
   cascade without needing a second, fragile duplicate <link> and without
   touching legacy files. Later phases replace individual !important
   overrides here as they migrate each page family properly (REDESIGN_PLAN.md
   Phase 9).
   ========================================================================== */

/* ---- Design tokens (DESIGN_SYSTEM.md → Foundations → Color tokens / Typography / Layout) ---- */
:root{
  color-scheme:light;
  --paper:#FFFFFF;
  --soft:#F5F2ED;
  --ink:#14110E;
  --ink-2:#4B443C;
  --muted:#7C746A;
  --line:#E6E2DC;
  --line-strong:#CFC8BE;
  --clay:#8A5A3B;
  --sale:#9C3B2C;

  --f-disp:"Newsreader",Georgia,"Times New Roman",serif;
  --f-ui:"Manrope",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --egrd-gut:24px;
  --egrd-max:1280px;
  --egrd-rhythm:118px;
}
@media(max-width:860px){
  :root{--egrd-rhythm:68px;--egrd-gut:18px}
}

/* ---- Shared header-height token (item 4: product/header overlap) ----
   .eg-premium-header is position:sticky (enghome.css), so at rest it
   reserves its own space and nothing sits under it. The overlap only shows
   up on hash/anchor navigation (e.g. a direct #tab-review URL, a page
   refresh while a tab hash is present, or the review-count link jumping to
   `#tab-review`): the browser's native anchor scroll ignores the sticky
   header and can land the target's first line right under it. These values
   mirror the header's actual rendered height per breakpoint
   (enghome-design-system-v308.css: 82px desktop, 68px <=700px) instead of
   an arbitrary large margin, and are consumed via scroll-margin-top below
   and by any future breakpoint-specific offset need. */
:root{--eg-header-h:82px}
@media(max-width:700px){:root{--eg-header-h:68px}}
/* Item 6: the description tab rendered admin HTML at the full width of the
   tabs card, which reads poorly at wide desktop widths. Cap it to a
   comfortable measure and let images/tables still use the full card. */
body.enghome-body #product-product #tab-description{
  max-width:75ch;
}
body.enghome-body #product-product #tab-description :is(p,li){
  line-height:1.75;
}
body.enghome-body #product-product #tab-description :is(img,table,iframe){
  max-width:100%;
}

/* Item 7: legacy enghome.css forces `.egp-related-controls{display:flex}`
   with !important, which would otherwise defeat the plain [hidden]
   attribute used to keep the prev/next arrows off until there's real
   overflow to scroll. */
body.enghome-body #product-product .egp-related-controls[hidden]{display:none!important}
body.enghome-body #product-product .egp-related-controls button:disabled{
  opacity:.35!important;cursor:default!important;box-shadow:none!important;transform:none!important;
}
body.enghome-body #product-product .egp-related-empty{
  padding:32px 4px;color:var(--muted);font-family:var(--f-ui);font-size:14px;
}

body.enghome-body #product-product .egp-tabs-section,
body.enghome-body #product-product .tab-pane,
body.enghome-body #product-product #tab-description,
body.enghome-body #product-product #tab-specification,
body.enghome-body #product-product #tab-review,
body.enghome-body #product-product .egp-related-section,
body.enghome-body #product-product #product{
  scroll-margin-top:calc(var(--eg-header-h) + 18px);
}

/* ---- Container primitive (available for later phases) ---- */
.egrd-container{
  width:100%;
  max-width:var(--egrd-max);
  margin:0 auto;
  padding:0 var(--egrd-gut);
  box-sizing:border-box;
}

/* ---- Typography primitives (opt-in utility classes; do not force sitewide
   heading fonts yet — that is scoped per page family in later phases) ---- */
body.enghome-body .egrd-eyebrow{
  font-family:var(--f-ui);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
body.enghome-body .egrd-heading{
  font-family:var(--f-disp);
  font-weight:200;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}
body.enghome-body .egrd-heading-hero{font-size:clamp(42px,6.4vw,88px);line-height:1.02;letter-spacing:-.015em}
body.enghome-body .egrd-heading-section{font-size:clamp(29px,3.5vw,46px);line-height:1.08}

/* ---- Focus (DESIGN_SYSTEM.md → Controls and Interaction → Focus) ----
   Overrides the sitewide focus-visible rule already set by
   enghome-design-system-v308.css (a translucent 3px outline) with the
   documented 2px clay outline / 3px offset. */
body.enghome-body :is(.egrd-home, .eg-premium-header, .eghx-overlay) :focus-visible{
  outline:2px solid var(--clay)!important;
  outline-offset:3px!important;
}

/* ---- Buttons (utility classes; additive, does not touch existing .eg-btn-* /
   .eg2-* classes used by page-specific work outside this phase) ---- */
body.enghome-body .egrd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 30px;border-radius:2px;border:1px solid var(--ink);
  font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  cursor:pointer;text-decoration:none;
}
body.enghome-body .egrd-btn:hover{background:var(--ink);color:var(--paper)}
body.enghome-body .egrd-btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
body.enghome-body .egrd-btn-dark:hover{background:transparent;color:var(--ink)}
body.enghome-body .egrd-btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
body.enghome-body .egrd-btn-outline:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
body.enghome-body .egrd-btn-ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.45)}
body.enghome-body .egrd-btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ==========================================================================
   Header, navigation & mobile drawer shell
   ==========================================================================
   Targets the existing .eg-premium-header (common/header.twig) and .eghx-*
   mega-menu markup (common/menu.twig) as rendered today. No markup, route,
   AJAX selector, or JS behavior changes — only color/type/border chrome, so
   data-eghx-* / data-eg-* hooks used by the existing scripts keep working
   exactly as before. !important is required here to win over the equally
   scoped (body.enghome-body …) !important rules already shipped in
   enghome-header-core.css and enghome-design-system-v308.css; this file is
   loaded after both, so it takes the final say per the cascade note above.
   enghome-premium-v2.css forces a solid #fff background and border:0 on
   .eg-premium-header for the homepage only, via `body:has(.eg-home-premium)`
   — which ties in specificity with `body.enghome-body`, so the background/
   border-bottom rule below is guarded with :not(:has(...)) to avoid winning
   that tie and silently undoing the homepage's solid/borderless header
   (same reasoning as the footer guard below). Height is untouched by this
   layer, so v2's 88px homepage header height is unaffected either way. */
body.enghome-body:not(:has(.eg-home-premium)) .eg-premium-header{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
}

/* Exact 24px / 18px (<=860px) container gutter + 1280px max-width for the
   header row, replacing the legacy ~22px width-calc formula so the header
   matches the reference's `.hdr-in{max-width:var(--max);padding:0 var(--gut)}`
   exactly at every width (DESIGN_SYSTEM.md → Layout → gutter/max-width).
   Guarded away from the homepage: enghome-premium-v2.css sets its own
   `.eg-header-inner{width:min(1380px,calc(100% - 64px));height:88px}` for
   `body:has(.eg-home-premium)`, which ties in specificity with
   `body.enghome-body …` (see the header-background and footer comments
   above) — that stylesheet loads earlier, so without this guard the plain
   `width` property here would silently win the tie by source order alone
   and shrink the homepage header row from its intended 1380px down to
   1280px on wide viewports. */
body.enghome-body:not(:has(.eg-home-premium)) .eg-header-inner{
  width:100%!important;
  max-width:var(--egrd-max)!important;
  padding:0 var(--egrd-gut)!important;
  box-sizing:border-box!important;
}

/* Header row layout & wordmark (DESIGN_SYSTEM.md → Header → ".hdr-in"/".hdr-mark").
   The legacy stack centered the wordmark with `position:absolute;left:50%`,
   which takes it out of normal flow entirely — at wider desktop widths the
   flat category nav (added below) is wide enough to visually run under
   that fixed dead-center point, producing the reported wordmark/navigation
   overlap. The reference itself never does this: `.hdr-in{display:flex}`
   with `.hdr-mark{margin:0 auto}` is a real flex sibling of the nav and
   tools, so it always occupies its own box and can never sit on top of
   them. Reproducing that flex structure here (rather than absolute
   centering) is the actual fix — not just a width/breakpoint tweak. */
body.enghome-body .eg-premium-header .eg-header-inner{
  display:flex!important;
  align-items:center!important;
  gap:20px!important;
}
body.enghome-body .eg-premium-header .eg-header-left-actions{
  flex:0 1 auto!important;min-width:0!important;
  display:flex!important;align-items:center!important;
}
body.enghome-body .eg-premium-header .eg-nav-wrap{
  display:flex!important;align-items:center!important;min-width:0!important;
}
body.enghome-body .eg-premium-header .eg-logo-link{
  position:static!important;flex:0 0 auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;
  margin:0 auto!important;padding:0!important;transform:none!important;
}
body.enghome-body .eg-premium-header .eg-header-actions{
  flex:0 0 auto!important;min-width:0!important;
}
body.enghome-body .eg-premium-header .eg-wordmark{
  font-family:var(--f-ui);font-weight:800;font-size:18px;
  letter-spacing:.3em;text-indent:.3em;white-space:nowrap;color:inherit;
}

/* Real ENG HOME logo (item 1). Two variants share the .eg-logo-img hook
   that older header stylesheets already size — see enghome-header-final.css
   and enghome-design-system-v308.css, both loaded earlier. v308 forces an
   espresso-tint filter on every .eg-logo-img; both variants below opt out
   of it explicitly so the light SVG stays white (readable over the hero)
   and the dark PNG keeps its native ink black (readable on the white
   header), instead of both collapsing to the same brown silhouette. */
body.enghome-body .eg-premium-header .eg-logo-img{
  display:block!important;
  width:200px!important;height:auto!important;max-width:100%!important;
  object-fit:contain!important;filter:none!important;
}
body.enghome-body .eg-premium-header .eg-logo-img--light{display:none!important}
@media(max-width:900px){
  body.enghome-body .eg-premium-header .eg-logo-img{width:144px!important}
}
@media(max-width:380px){
  body.enghome-body .eg-premium-header .eg-logo-img{width:126px!important}
}
/* Homepage hero only, before the header picks up its scrolled/opaque state
   (footer.twig adds .eg-header-scrolled past 12px of scroll): show the
   white wordmark instead of the ink one. .egrd-home is common/home.twig's
   own <main> class, so this never matches any other page. */
body.enghome-body:has(.egrd-home) .eg-premium-header:not(.eg-header-scrolled) .eg-logo-img--dark{display:none!important}
body.enghome-body:has(.egrd-home) .eg-premium-header:not(.eg-header-scrolled) .eg-logo-img--light{display:block!important}
@media(max-width:940px){
  body.enghome-body .eg-premium-header .eg-wordmark{font-size:16px}
}

/* Visible desktop navigation (DESIGN_SYSTEM.md → Header → ".hdr-nav"): flat
   top-level category links, shown only above the reference's 940px nav
   breakpoint. Below it, the existing eghx mega-menu burger (menu.twig)
   remains the sole entry point — unchanged markup, routes, and JS. */
body.enghome-body .eg-flat-nav{display:none}
@media(min-width:941px){
  body.enghome-body .eg-flat-nav{
    display:flex!important;gap:26px;align-items:center;
    font-family:var(--f-ui);font-size:13.5px;font-weight:500;letter-spacing:.01em;
  }
  body.enghome-body .eg-flat-nav a{
    position:relative;padding:4px 0;color:var(--ink);opacity:.9;text-decoration:none;
  }
  body.enghome-body .eg-flat-nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
  }
  body.enghome-body .eg-flat-nav a:hover{opacity:1}
  body.enghome-body .eg-flat-nav a:hover::after{transform:scaleX(1)}
  body.enghome-body .eg-premium-header .eghx-trigger{display:none!important}

  /* OFERTAT (or any future "ofert*" category) reads as a promo destination,
     not a plain nav link — clay-accent treatment (not a solid loud block,
     per explicit past feedback that a solid pill "ruined the whole look").
     Strengthened 2026-09-10 per explicit follow-up request ("make it a bit
     stronger") — bolder weight, wider letter-spacing, and the underline is
     now always on instead of only appearing on hover/current, so it reads
     as permanently promotional rather than a plain link that happens to
     react on hover. Still text-only, no fill/background. */
  body.enghome-body .eg-flat-nav-offer{
    color:var(--clay)!important;opacity:1!important;font-weight:800!important;letter-spacing:.03em!important;
  }
  body.enghome-body .eg-flat-nav-offer::after{background:var(--clay)!important;transform:scaleX(1)!important}
}

/* Plain search/account/cart treatment (DESIGN_SYSTEM.md → Header →
   ".hdr-tools"): flat inline icon+label links, no pill/box/shadow chrome.
   The label is always visible (the legacy circular buttons only revealed
   it as a hover tooltip), and hides at the same 940px breakpoint as the
   nav, matching the reference's own `.hdr-tools .hdr-label` rule. */
body.enghome-body .eg-action-btn{
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:var(--ink)!important;
  position:static!important;transform:none!important;
  font-family:var(--f-ui)!important;font-size:13.5px!important;font-weight:500!important;
  transition:color .25s ease!important;
}
body.enghome-body .eg-action-btn:hover,
body.enghome-body .eg-action-btn:focus{
  border-color:transparent!important;
  background:transparent!important;
  color:var(--clay)!important;
  transform:none!important;
  box-shadow:none!important;
}
/* Correction pass (item 1): mobile browsers paint their own translucent
   tap-highlight rectangle behind a tapped link/button unless it's opted
   out — over this header's cream/paper background that default reads as a
   visible brown-ish box "behind" the Search/Account/Cart label that lingers
   until the next tap. None of the .eg-action-btn rules across the theme's
   stylesheets ever reset it. Also pin :active to the same transparent
   treatment as :hover/:focus so no earlier stylesheet's leftover active-state
   background can show through either. */
body.enghome-body .eg-action-btn,
body.enghome-body .eghx-trigger{
  -webkit-tap-highlight-color:transparent!important;
}
body.enghome-body .eg-action-btn:active{
  background:transparent!important;border-color:transparent!important;box-shadow:none!important;
}
body.enghome-body .eg-action-icon{
  width:auto!important;height:auto!important;font-size:inherit!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
body.enghome-body .eg-action-icon svg{width:17px!important;height:17px!important}
body.enghome-body .eg-action-label{
  display:inline!important;position:static!important;opacity:1!important;visibility:visible!important;
  transform:none!important;white-space:nowrap!important;
}
@media(max-width:940px){
  body.enghome-body .eg-action-label{display:none!important}
}
/* Between the 940px nav cutoff and ~1180px, seven live category links plus
   full search/account/cart labels can genuinely outgrow the 1280px
   container's available width (real translated category names vary from
   the reference's sample copy). Nav visibility and the burger cutoff stay
   fixed at the documented 940px breakpoint; only these optional text
   labels tighten first, icon buttons remain fully functional. */
@media(min-width:941px) and (max-width:1180px){
  body.enghome-body .eg-action-label{display:none!important}
  body.enghome-body .eg-premium-header .eg-header-inner{gap:14px!important}
  body.enghome-body .eg-flat-nav{gap:16px!important;font-size:13px!important}
}

/* Mobile burger / "OFERTAT" mega-menu trigger (<=940px only). Previously a
   navy (#13233d) pill, then briefly shrunk to a bare 22x22 icon with no
   background — under the 44px minimum touch target required by item 2/8 and
   with no visible affordance. Restyled with the shared espresso/bronze
   tokens instead of either legacy state. */
body.enghome-body .eghx-trigger{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  width:auto!important;min-width:44px!important;height:44px!important;min-height:44px!important;
  padding:0 16px!important;margin:0!important;
  background:var(--clay)!important;border:1px solid var(--clay)!important;border-radius:999px!important;
  color:var(--paper)!important;box-shadow:none!important;
  transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,transform .15s ease!important;
}
body.enghome-body .eghx-trigger-label{
  display:inline!important;font-family:var(--f-ui)!important;font-size:12.5px!important;font-weight:600!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;white-space:nowrap!important;color:inherit!important;
}
body.enghome-body .eghx-trigger-glyph{
  width:18px!important;height:18px!important;stroke:currentColor!important;stroke-width:1.8!important;flex:0 0 auto!important;
}
body.enghome-body .eghx-trigger:hover{
  background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important;
  box-shadow:0 10px 22px rgba(20,17,14,.18)!important;transform:none!important;
}
body.enghome-body .eghx-trigger:active{transform:scale(.97)!important}
body.enghome-body .eghx-trigger:focus-visible{outline:2px solid var(--clay)!important;outline-offset:3px!important}
body.enghome-body .eghx-trigger[aria-expanded="true"]{
  background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important;
}
@media(max-width:380px){
  body.enghome-body .eghx-trigger{padding:0!important;width:44px!important;min-width:44px!important}
  body.enghome-body .eghx-trigger-label{display:none!important}
}

/* Active-state indicator for /ofertat (item 2): a tiny same-origin-safe
   script (footer.twig) compares each flat-nav link's own href — already the
   dynamic `category.href` OpenCart renders for the OFERTAT category — to
   the current URL and marks it aria-current="page". No hardcoded /ofertat
   path lives in CSS/JS; it only ever matches what the server actually
   linked to. */
body.enghome-body .eg-flat-nav a[aria-current="page"]{
  color:var(--clay)!important;opacity:1!important;font-weight:700!important;
}
body.enghome-body .eg-flat-nav a[aria-current="page"]::after{transform:scaleX(1)!important;background:var(--clay)!important}
/* Mini-cart shell: the header cart control + its clay pill count
   (DESIGN_SYSTEM.md → Header and navigation → "clay pill count"). Sized to
   the reference's `.hdr-cart b` exactly and placed inline after the label,
   not as an absolute-positioned dot, so it reads as a genuine item count. */
body.enghome-body .eg-cart-badge{
  position:static!important;
  min-width:19px!important;height:19px!important;width:auto!important;
  padding:0 5px!important;margin:0!important;
  border-radius:99px!important;border:0!important;
  background:var(--clay)!important;color:#fff!important;
  font-family:var(--f-ui)!important;font-size:11px!important;font-weight:600!important;
  line-height:19px!important;text-align:center!important;box-shadow:none!important;
}
body.enghome-body .eg-cart-btn.eg-cart-has-items .eg-cart-badge{display:inline-block!important}

/* Mega-menu overlay: chrome only (colors/type/borders), not the interior
   grid geometry, to keep the existing hover/positioning JS behavior intact */
body.enghome-body .eghx-desktop{
  border-radius:4px!important;
  border-color:var(--line)!important;
  box-shadow:0 24px 60px rgba(20,17,14,.16)!important;
}
body.enghome-body .eghx-head{background:rgba(255,255,255,.98)!important;border-bottom-color:var(--line)!important}
body.enghome-body .eghx-head span{color:var(--clay)!important}
body.enghome-body .eghx-head strong,
body.enghome-body .eghx-mobile-brand strong,
body.enghome-body .eghx-mobile-heading strong{
  font-family:var(--f-disp)!important;
  font-weight:300!important;
  letter-spacing:-.01em!important;
  color:var(--ink)!important;
}
body.enghome-body .eghx-row:hover,
body.enghome-body .eghx-row.is-active{background:var(--soft)!important;color:var(--ink)!important}
body.enghome-body .eghx-row.is-offer .eghx-name{color:var(--sale)!important}
body.enghome-body .eghx-all{color:var(--ink)!important}
body.enghome-body .eghx-mobile-top,
body.enghome-body .eghx-mobile-head{background:var(--paper)!important;border-bottom-color:var(--line)!important}
body.enghome-body .eghx-mobile-brand span,
body.enghome-body .eghx-mobile-heading span,
body.enghome-body .eghx-mobile-section{color:var(--muted)!important}
body.enghome-body .eghx-mobile-top .eghx-close,
body.enghome-body .eghx-back{background:var(--soft)!important;color:var(--ink)!important}
/* Correction pass (item 3): a bare, unscoped `.eg-filter-check-name{
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}` rule in
   enghome.css truncates long manufacturer/filter names on the category
   filter panel. enghome-commerce.css only adds `overflow-wrap:anywhere` for
   this element, which never actually cancels ellipsis truncation because
   `white-space`/`overflow` are the properties that gate it and neither was
   reset. Let names wrap fully instead. */
body.enghome-body #product-category .eg-filter-check-name{
  overflow:visible!important;text-overflow:clip!important;white-space:normal!important;
  overflow-wrap:break-word!important;line-height:1.35!important;
}

/* Live search results panel (header inline search + mobile search panel) */
body.enghome-body .eg-live-search-results{
  border:1px solid var(--line)!important;
  border-radius:2px!important;
  background:var(--paper)!important;
  box-shadow:0 18px 40px rgba(20,17,14,.12)!important;
}
body.enghome-body .eg-live-item:hover{background:var(--soft)!important}
body.enghome-body .eg-live-all{color:var(--clay)!important}


/* Homepage: authoritative reference geometry; isolated from internal pages. */
body.enghome-body:has(.egrd-home){padding-top:0!important;background:var(--paper)!important}
body.enghome-body .egrd-home{font:400 16px/1.6 var(--f-ui);color:var(--ink);background:var(--paper)}
body.enghome-body .egrd-home *{box-sizing:border-box}
body.enghome-body .egrd-home a{color:inherit;text-decoration:none}
body.enghome-body .egrd-home img{max-width:100%;display:block}
body.enghome-body .egrd-home .wrap{width:100%;max-width:var(--egrd-max);margin:0 auto;padding:0 var(--egrd-gut)}
body.enghome-body .egrd-home .eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin:0;
}

body.enghome-body .egrd-home /* ─────────── HERO ─────────── */
.hero{position:relative;height:min(84vh,780px);min-height:520px;overflow:hidden;background:#221a15}
body.enghome-body .egrd-home .hero video,body.enghome-body .egrd-home .hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.enghome-body .egrd-home .hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,14,.46) 0%,rgba(20,17,14,.10) 38%,rgba(20,17,14,.62) 100%);
}
body.enghome-body .egrd-home .hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:64px}
body.enghome-body .egrd-home .hero-in .eyebrow{color:rgba(255,255,255,.78)}
body.enghome-body .egrd-home .hero h1{
  font-family:var(--f-disp);font-weight:200;font-size:clamp(42px,6.4vw,88px);line-height:1.02;
  letter-spacing:-.015em;color:#fff;margin:18px 0 0;max-width:15ch;text-wrap:balance;
}
body.enghome-body .egrd-home .hero h1 em{font-style:italic;font-weight:300}
body.enghome-body .egrd-home .hero p.lead{color:rgba(255,255,255,.82);max-width:44ch;margin:20px 0 0;font-size:16.5px;font-weight:300}
body.enghome-body .egrd-home .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
body.enghome-body .egrd-home .btn{
  display:inline-flex;align-items:center;gap:12px;padding:15px 30px;border-radius:2px;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:#fff;color:var(--ink);border:1px solid #fff;transition:background .25s,color .25s,border-color .25s;
}
body.enghome-body .egrd-home .btn:hover{background:transparent;color:#fff}
body.enghome-body .egrd-home .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
body.enghome-body .egrd-home .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
body.enghome-body .egrd-home .hero-meta{
  position:absolute;right:var(--egrd-gut);bottom:66px;z-index:2;text-align:right;
  color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
/* "Scroll to discover" hint — bottom-center of the full-height hero. A
   thin vertical line (matching the 1px .rule dividers used throughout
   the rest of the page) with a small dot that travels down and fades,
   looping — quieter than a bouncing chevron, reads as an invitation to
   scroll rather than a UI control demanding attention. */
body.enghome-body .egrd-home .hero-scroll{
  position:absolute;left:50%;bottom:28px;z-index:2;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:none;border:0;padding:4px;cursor:pointer;
  color:rgba(255,255,255,.82);transition:opacity .3s ease,color .2s ease;
}
body.enghome-body .egrd-home .hero-scroll:hover{color:#fff}
body.enghome-body .egrd-home .hero-scroll-label{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
body.enghome-body .egrd-home .hero-scroll-line{position:relative;width:1px;height:34px;background:rgba(255,255,255,.32)}
body.enghome-body .egrd-home .hero-scroll-dot{
  position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:#fff;animation:egHeroScrollDot 1.8s ease-in-out infinite;
}
@keyframes egHeroScrollDot{
  0%{transform:translateY(-6px);opacity:0}
  35%{opacity:1}
  100%{transform:translateY(34px);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  body.enghome-body .egrd-home .hero-scroll-dot{animation:none;opacity:1;transform:translateY(14px)}
}
@media(max-width:860px){
  body.enghome-body .egrd-home .hero{height:auto;min-height:0}
  body.enghome-body .egrd-home .hero-in{padding-block:130px 46px;justify-content:flex-start}
  body.enghome-body .egrd-home .hero-meta{display:none}
  body.enghome-body .egrd-home .hero-scroll{display:none}
  body.enghome-body .egrd-home .hero h1{max-width:none}
  body.enghome-body .egrd-home .btn{flex:1 1 auto;justify-content:center}
}

/* ─────────── ATMOSFERA (editorial photo band) ─────────── */
body.enghome-body .egrd-home .story-band{position:relative;height:min(64vh,620px);min-height:380px;overflow:hidden}
body.enghome-body .egrd-home .story-media{position:absolute;inset:0}
body.enghome-body .egrd-home .story-media img{width:100%;height:100%;object-fit:cover}
body.enghome-body .egrd-home .story-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,17,14,.6) 0%,rgba(20,17,14,.16) 46%,rgba(20,17,14,0) 68%);
}
body.enghome-body .egrd-home .story-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:460px;padding:0 var(--egrd-gut)}
body.enghome-body .egrd-home .story-copy .eyebrow{color:rgba(255,255,255,.78)}
body.enghome-body .egrd-home .story-copy h2{
  font-family:var(--f-disp);font-weight:200;font-size:clamp(28px,3.6vw,44px);line-height:1.12;
  letter-spacing:-.01em;color:#fff;margin:14px 0 0;max-width:14ch;text-wrap:balance;
}
body.enghome-body .egrd-home .story-copy .lead{color:rgba(255,255,255,.85);margin:18px 0 0;font-size:15.5px;font-weight:300;max-width:38ch}
@media(max-width:700px){
  body.enghome-body .egrd-home .story-band{height:auto;min-height:0}
  body.enghome-body .egrd-home .story-media{position:relative;height:78vw}
  body.enghome-body .egrd-home .story-band::after{display:none}
  body.enghome-body .egrd-home .story-copy{position:relative;z-index:auto;max-width:none;height:auto;padding:26px var(--egrd-gut) 0}
  body.enghome-body .egrd-home .story-copy .eyebrow{color:var(--ink-2)}
  body.enghome-body .egrd-home .story-copy h2{color:var(--ink);max-width:none}
  body.enghome-body .egrd-home .story-copy .lead{color:var(--ink-2)}
}

body.enghome-body .egrd-home /* ─────────── SECTION FURNITURE ─────────── */
section{padding-block:var(--egrd-rhythm)}
body.enghome-body .egrd-home .band{background:var(--soft)}
body.enghome-body .egrd-home .sec-head{display:flex;align-items:flex-end;gap:28px;margin-bottom:44px}
body.enghome-body .egrd-home .sec-head h2{
  font-family:var(--f-disp);font-weight:200;font-size:clamp(29px,3.5vw,46px);line-height:1.08;
  letter-spacing:-.01em;margin:9px 0 0;max-width:20ch;
}
body.enghome-body .egrd-home .sec-head .rule{flex:1;height:1px;background:var(--line);margin-bottom:14px}
body.enghome-body .egrd-home .sec-more{
  flex:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--ink);transition:color .25s,border-color .25s;
}
body.enghome-body .egrd-home .sec-more:hover{color:var(--clay);border-color:var(--clay)}
@media(max-width:700px){
  body.enghome-body .egrd-home .sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px}
  body.enghome-body .egrd-home .sec-head .rule{display:none}
  body.enghome-body .egrd-home .sec-more{padding-bottom:3px}
}

body.enghome-body .egrd-home /* ─────────── KATEGORITË ─────────── */
.cat-lead{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body.enghome-body .egrd-home .cat-rest{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
body.enghome-body .egrd-home .cat{display:block;position:relative;overflow:hidden;background:var(--soft)}
body.enghome-body .egrd-home .cat .frame{aspect-ratio:4/5;display:grid;place-items:center;padding:34px;overflow:hidden}
body.enghome-body .egrd-home .cat-rest .frame{aspect-ratio:1/1;padding:24px}
body.enghome-body .egrd-home .cat img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
body.enghome-body .egrd-home .cat:hover img{transform:scale(1.045)}
body.enghome-body .egrd-home .cat-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 18px 18px}
body.enghome-body .egrd-home .cat-rest .cat-cap{padding:14px 14px 15px}
body.enghome-body .egrd-home .cat-cap h3{font-family:var(--f-disp);font-weight:300;font-size:22px;margin:0;letter-spacing:-.005em}
body.enghome-body .egrd-home .cat-rest .cat-cap h3{font-size:17px;min-height:1.3em}
body.enghome-body .egrd-home .cat-cap span{font-size:11.5px;color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:860px){
  body.enghome-body .egrd-home .cat-lead{grid-template-columns:1fr 1fr;gap:14px}
  body.enghome-body .egrd-home .cat-lead .cat:first-child{grid-column:1/-1}
  body.enghome-body .egrd-home .cat-lead .cat:first-child .frame{aspect-ratio:16/10}
  body.enghome-body .egrd-home .cat-rest{grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
}

body.enghome-body .egrd-home /* ─────────── OFERTAT ─────────── */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
body.enghome-body .egrd-home .offer{background:var(--paper);display:flex;flex-direction:column;height:100%}
body.enghome-body .egrd-home .offer .frame{aspect-ratio:1/1;background:var(--soft);display:grid;place-items:center;padding:0;overflow:hidden}
body.enghome-body .egrd-home .offer img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
body.enghome-body .egrd-home .offer:hover img{transform:scale(1.05)}
body.enghome-body .egrd-home .offer-body{padding:18px 22px 24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;flex:1}
body.enghome-body .egrd-home .offer-body .kicker{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
body.enghome-body .egrd-home .offer-body h3{font-size:15px;font-weight:500;line-height:1.45;margin:0;flex:1;min-height:2.8em}
body.enghome-body .egrd-home .price-row{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums}
body.enghome-body .egrd-home .price{font-size:20px;font-weight:700;letter-spacing:-.01em}
body.enghome-body .egrd-home .price-old{font-size:12px;font-weight:400;color:var(--muted);text-decoration:line-through}
body.enghome-body .egrd-home .tag{
  align-self:flex-start;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sale);border:1px solid currentColor;padding:3px 8px;border-radius:1px;
}
@media(max-width:980px){body.enghome-body .egrd-home .offers{grid-template-columns:1fr 1fr;gap:14px}}

body.enghome-body .egrd-home /* ─────────── PRODUKTET ─────────── */
.grid-p{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}
body.enghome-body .egrd-home .p-card{display:flex;flex-direction:column;gap:14px}
body.enghome-body .egrd-home .p-frame{aspect-ratio:1/1;background:var(--soft);display:grid;place-items:center;padding:0;overflow:hidden;position:relative}
body.enghome-body .egrd-home .p-frame img{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:normal;transition:transform .75s cubic-bezier(.2,.7,.2,1)}
body.enghome-body .egrd-home .p-card:hover .p-frame img{transform:scale(1.055)}
body.enghome-body .egrd-home .p-brand{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
body.enghome-body .egrd-home .p-name{font-size:14.5px;font-weight:500;line-height:1.5;margin:0;min-height:2.9em}
body.enghome-body .egrd-home .p-price{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
body.enghome-body .egrd-home .p-meta{display:flex;flex-direction:column;gap:5px}
@media(max-width:980px){body.enghome-body .egrd-home .grid-p{grid-template-columns:1fr 1fr;gap:26px 14px}}

body.enghome-body .egrd-home /* ─────────── DYQANET ─────────── */
.stores{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
body.enghome-body .egrd-home .stores-media{aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
body.enghome-body .egrd-home .stores-media img{width:100%;height:100%;object-fit:cover}
body.enghome-body .egrd-home .stores h2{font-family:var(--f-disp);font-weight:200;font-size:clamp(28px,3.4vw,44px);line-height:1.1;margin:14px 0 0;letter-spacing:-.01em}
body.enghome-body .egrd-home .stores p.lead{color:var(--ink-2);margin:18px 0 0;max-width:46ch;font-weight:300}
body.enghome-body .egrd-home .store-list{margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
body.enghome-body .egrd-home .store-list li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
body.enghome-body .egrd-home .store-list .nm{font-size:14.5px;font-weight:500}
body.enghome-body .egrd-home .store-list .nm small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:2px;letter-spacing:.02em}
body.enghome-body .egrd-home .store-list .hr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
body.enghome-body .egrd-home .store-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
body.enghome-body .egrd-home .btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
body.enghome-body .egrd-home .btn-dark:hover{background:transparent;color:var(--ink)}
body.enghome-body .egrd-home .btn-line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
body.enghome-body .egrd-home .btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:900px){body.enghome-body .egrd-home .stores{grid-template-columns:1fr;gap:30px}}

body.enghome-body .egrd-home /* ─────────── BESIMI ─────────── */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:0}
body.enghome-body .egrd-home .trust-in{display:grid;grid-template-columns:repeat(4,1fr)}
body.enghome-body .egrd-home .trust-item{padding:34px 26px;border-right:1px solid var(--line)}
body.enghome-body .egrd-home .trust-item:last-child{border-right:0}
body.enghome-body .egrd-home .trust-item h3{font-size:13.5px;font-weight:600;margin:0 0 6px;letter-spacing:.01em}
body.enghome-body .egrd-home .trust-item p{margin:0;font-size:13px;color:var(--muted);line-height:1.55}
@media(max-width:860px){
  body.enghome-body .egrd-home .trust-in{grid-template-columns:1fr 1fr}
  body.enghome-body .egrd-home .trust-item{padding:24px 18px;border-bottom:1px solid var(--line)}
  body.enghome-body .egrd-home .trust-item:nth-child(2n){border-right:0}
  body.enghome-body .egrd-home .trust-item:nth-last-child(-n+2){border-bottom:0}
}

body.enghome-body .egrd-home /* ─────────── FAQ ─────────── */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
body.enghome-body .egrd-home .faq-list{border-top:1px solid var(--line)}
body.enghome-body .egrd-home .faq-item{border-bottom:1px solid var(--line)}
body.enghome-body .egrd-home .faq-q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-ui);font-size:16px;font-weight:500;color:var(--ink);line-height:1.5;
}
body.enghome-body .egrd-home .faq-q .ic{flex:none;width:13px;height:13px;position:relative;margin-top:6px}
body.enghome-body .egrd-home .faq-q .ic::before,body.enghome-body .egrd-home .faq-q .ic::after{content:"";position:absolute;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
body.enghome-body .egrd-home .faq-q .ic::before{left:0;right:0;top:6px;height:1px}
body.enghome-body .egrd-home .faq-q .ic::after{top:0;bottom:0;left:6px;width:1px}
body.enghome-body .egrd-home .faq-item.open .faq-q .ic::after{transform:scaleY(0)}
body.enghome-body .egrd-home .faq-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.7,.2,1)}
body.enghome-body .egrd-home .faq-a p{margin:0 0 24px;color:var(--ink-2);font-weight:300;max-width:62ch;padding-right:34px}
body.enghome-body .egrd-home .faq-side p{color:var(--ink-2);font-weight:300;margin:16px 0 0;max-width:34ch}
body.enghome-body .egrd-home .faq-side h2{font-family:var(--f-disp);font-weight:200;font-size:clamp(28px,3.4vw,44px);line-height:1.1;margin:12px 0 0;letter-spacing:-.01em}
@media(max-width:900px){body.enghome-body .egrd-home .faq-grid{grid-template-columns:1fr;gap:30px}}

/* Add-to-cart / wishlist controls on the "Produktet" grid — not present in
   the static reference (its p-card is a plain link), added here to preserve
   OpenCart's cart.add()/wishlist.add() AJAX contract per REDESIGN_PLAN.md,
   styled to match the reference's restrained control language. */
body.enghome-body .egrd-home .p-actions{display:flex;align-items:center;gap:10px;margin-top:2px}
body.enghome-body .egrd-home .p-actions button{
  appearance:none;-webkit-appearance:none;flex:1;
  border:1px solid var(--line-strong);border-radius:2px;background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 12px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
body.enghome-body .egrd-home .p-actions button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
body.enghome-body .egrd-home .p-actions button:disabled{opacity:.45;cursor:not-allowed}
body.enghome-body .egrd-home .p-actions button[aria-label]{flex:none;width:40px;padding:10px 0;text-align:center;font-size:14px}


/* Final shared header geometry. Keep the logo in flow alongside navigation. */
body.enghome-body .eg-premium-header{
  position:fixed!important;inset:0 0 auto!important;height:76px!important;min-height:76px!important;
  padding:0!important;color:var(--ink)!important;z-index:1000!important;
  transition:background .35s ease,border-color .35s ease,color .35s ease;
}
body.enghome-body .eg-premium-header .eg-header-inner{
  height:76px!important;min-height:76px!important;gap:28px!important;
  max-width:1280px!important;width:100%!important;padding:0 var(--egrd-gut)!important;margin:0 auto!important;
}
body.enghome-body .eg-premium-header .eg-header-actions{display:flex!important;gap:18px!important;position:static!important}
body.enghome-body .eg-premium-header .eg-logo-link{color:inherit!important;min-width:max-content!important}
body.enghome-body .eg-premium-header .eg-action-btn,
body.enghome-body .eg-premium-header .eghx-trigger,
body.enghome-body .eg-premium-header .eg-flat-nav a{color:inherit!important}
body.enghome-body .eg-premium-header .eg-action-label{
  background:none!important;padding:0!important;border:0!important;box-shadow:none!important;
  font-size:13.5px!important;line-height:1.6!important;color:inherit!important;
}
body.enghome-body .eg-premium-header .eg-action-label::after{display:none!important}
body.enghome-body .eg-flat-nav{white-space:nowrap;flex-wrap:nowrap!important}
body.enghome-body:has(.egrd-home) .eg-premium-header:not(.egrd-solid){
  background:transparent!important;border-bottom-color:transparent!important;color:#fff!important;backdrop-filter:none!important;
}
body.enghome-body:has(.egrd-home) .eg-premium-header.egrd-solid{backdrop-filter:blur(14px)}
body.enghome-body .eg-premium-header .eg-header-search{
  position:absolute!important;top:76px!important;right:24px!important;left:auto!important;
  width:min(440px,calc(100% - 48px))!important;max-width:none!important;
  background:var(--paper)!important;color:var(--ink)!important;margin:0!important;
}
/* Correction pass — search overlay positioning (item 1). enghome.css ships an
   older inline-search system on this SAME element
   (`.eg-header-actions > .eg-header-search.eg-inline-search`, plus its
   `.eg-inline-search-open` variant) with 4–5 class-selectors — higher
   specificity than the 3-class rule above, so despite loading later this
   file was losing that fight: the legacy `top:50%;right:calc(100% - 46px)`
   geometry actually rendered (vertically centered in the icon row instead of
   below the trigger, misaligned, on a 0-width `overflow:visible` flex
   container whose circular submit button could visibly peek out to the
   side). These selectors match/exceed that specificity so this file's
   intended geometry — the one header.twig's positionSearchPanel() expects —
   actually applies. `right`/`left` are deliberately not !important so that
   script can still anchor the panel to the real search-toggle button. */
body.enghome-body .eg-header-actions > .eg-header-search.eg-inline-search{
  position:absolute!important;top:calc(100% + 12px)!important;
  right:24px;left:auto;
  transform:none!important;transform-origin:initial!important;
  width:min(440px,calc(100% - 48px))!important;max-width:none!important;height:auto!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  padding:14px!important;margin:0!important;gap:8px!important;border-radius:2px!important;
  background:var(--paper)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;box-shadow:0 18px 40px rgba(20,17,14,.12)!important;
  z-index:1001!important;
  transition:opacity .18s ease,visibility .18s ease!important;
}
body.enghome-body.eg-inline-search-open .eg-header-actions > .eg-header-search.eg-inline-search{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
}
body.enghome-body .eg-mobile-search-panel-v102{top:76px!important;color:var(--ink)!important;background:var(--paper)!important}
@media(min-width:941px){
  body.enghome-body .eg-premium-header .eg-action-icon{display:none!important}
}
@media(min-width:941px) and (max-width:1180px){
  body.enghome-body .eg-premium-header .eg-header-inner{gap:18px!important}
  body.enghome-body .eg-premium-header .eg-flat-nav{gap:14px!important;font-size:12px!important}
  body.enghome-body .eg-premium-header .eg-action-icon{display:inline-flex!important}
}
@media(max-width:940px){
  body.enghome-body .eg-premium-header .eg-header-inner{gap:18px!important}
  body.enghome-body .eg-premium-header .eg-flat-nav{display:none!important}
  body.enghome-body .eg-premium-header .eghx-trigger{display:inline-flex!important;min-width:22px!important;width:22px!important;height:22px!important}
  body.enghome-body .eg-premium-header .eg-header-search{display:none!important}
  body.enghome-body .eg-premium-header .eg-header-actions form.eg-header-search,
  body.enghome-body .eg-premium-header form.eg-header-search.eg-inline-search{
    display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
  body.enghome-body.eg-mobile-search-panel-open .eg-mobile-search-panel-v102{display:flex!important;position:fixed!important;left:18px!important;right:18px!important;width:auto!important;z-index:999999!important}
  body.enghome-body .eg-premium-header .eg-action-btn{width:auto!important;min-width:17px!important;height:24px!important}
}
/* enghome-header-core.css's mobile search rules (v99–v102) only run up to
   900px, while header.twig's own toggle script and this file's nav/burger
   breakpoint both use 940px — leaving a 901–940px gap where the trigger
   toggled a class no visible CSS responded to (the desktop inline panel
   stayed closed because the script treated the width as mobile; the fixed
   mobile panel stayed force-hidden because it's only shown ≤900px). Mirror
   the ≤900px mobile-panel regime across that gap so the trigger is never a
   dead click at 768px-class tablet widths near the boundary. */
@media(min-width:901px) and (max-width:940px){
  body.enghome-body .eg-premium-header .eg-header-actions form.eg-header-search,
  body.enghome-body .eg-premium-header form.eg-header-search.eg-inline-search{
    display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
  body.enghome-body .eg-mobile-search-panel-v102{display:none!important;position:fixed!important;left:18px!important;right:18px!important;top:88px!important;z-index:999999!important;}
  body.enghome-body.eg-mobile-search-panel-open .eg-mobile-search-panel-v102{display:flex!important;}
}
/* Warm navigation surfaces, including the overlay moved to body by menu.js. */
body.enghome-body .eghx-overlay{background:rgba(20,17,14,.22)!important}
body.enghome-body :is(.eghx-mobile,.eghx-mobile-body,.eghx-view){background:var(--soft)!important;color:var(--ink)!important}
body.enghome-body :is(.eghx-row,.eghx-arrow,.eghx-close){color:var(--ink)!important;border-color:var(--line)!important}
body.enghome-body .eghx-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
body.enghome-body .eghx-row.is-active{box-shadow:inset 3px 0 0 var(--clay)!important}
/* Long live catalog names and prices must wrap within their grid tracks. */
body.enghome-body .egrd-home :is(.cat,.offer,.p-card,.stores>div,.faq-grid>div){min-width:0}
body.enghome-body .egrd-home :is(h1,h2,h3,p){overflow-wrap:break-word}
body.enghome-body .egrd-home :is(.price-row,.p-actions){flex-wrap:wrap}
body.enghome-body .egrd-home .btn{white-space:normal;text-align:center;line-height:1.6;box-shadow:none}
body.enghome-body .egrd-home .cat-cap h3{min-width:0;line-height:1.3}
body.enghome-body .egrd-home .frame img,
body.enghome-body .egrd-home .p-frame img{min-height:0;min-width:0}
body.enghome-body .egrd-home .p-name{font-family:var(--f-ui)}
@media(max-width:600px){
  body.enghome-body .egrd-home .cat-cap{flex-wrap:wrap;gap:4px;padding:14px}
  body.enghome-body .egrd-home .offer-body{padding:16px 14px 20px}
  body.enghome-body .egrd-home .p-actions{gap:6px}
  body.enghome-body .egrd-home .p-actions button{padding:10px 6px;letter-spacing:.03em}
}
@media(prefers-reduced-motion:reduce){
  body.enghome-body :is(.egrd-home,.eg-premium-header,.eghx-overlay) *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Storefront completion: shared reference typography and restrained surfaces. */
body.enghome-body{
  --eg-ink:var(--ink);--eg-ink-soft:var(--ink-2);--eg-muted:var(--muted);
  --eg-cream:var(--soft);--eg-ivory:#faf8f4;--eg-line:var(--line);
  --eg-radius-xl:4px;--eg-radius-lg:4px;--eg-radius-md:2px;
  background:var(--paper)!important;font-family:var(--f-ui)!important;
}
body.enghome-body :is(h1,h2,.egp-title,.ega-title,.eg-cart-voyage-title){
  font-family:var(--f-disp)!important;font-style:normal!important;font-weight:300!important;
  letter-spacing:-.015em!important;line-height:1.15!important;overflow-wrap:anywhere;
}
body.enghome-body :is(input,select,textarea,button,.btn,.breadcrumb){font-family:var(--f-ui)!important}
body.enghome-body :is(main,[id^="account-"],[id^="product-"],[id^="checkout-"],[id^="information-"],#error-not-found){min-width:0}
body.enghome-body :is(.well,.panel,.ega-panel,.ega-dashboard-card,.egp-gallery-card,.egp-info-card,.eg-cart-items-card,.eg-cart-summary-card,.eg-voyage-panel,.egc-form-card){
  border-color:var(--line)!important;border-radius:4px!important;box-shadow:none!important;
}
body.enghome-body :is(.form-control,.ega-input-wrap input,.eg-voyage-field input,.eg-voyage-field select){
  background:var(--paper)!important;color:var(--ink)!important;border:1px solid var(--line-strong)!important;
  border-radius:2px!important;box-shadow:none!important;max-width:100%;min-width:0;
}
body.enghome-body :is(input,select,textarea):focus{outline:2px solid var(--clay)!important;outline-offset:2px}
body.enghome-body :is(.btn-primary,.eg-btn-primary,.ega-btn-primary){background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important;border-radius:2px!important;box-shadow:none!important}
body.enghome-body :is(.btn-default,.btn-secondary){background:var(--soft)!important;color:var(--ink)!important;border-color:var(--line-strong)!important;border-radius:2px!important;box-shadow:none!important}
body.enghome-body :is(.breadcrumb,.egp-breadcrumb){display:flex;flex-wrap:wrap;gap:8px;background:transparent!important;color:var(--muted)!important;overflow-wrap:anywhere}
body.enghome-body .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
body.enghome-body table{border-collapse:collapse;border-color:var(--line)!important}
body.enghome-body :is(th,td){border-color:var(--line)!important}
body.enghome-body th{background:var(--soft)!important;color:var(--ink)!important}
body.enghome-body .alert{border-radius:2px!important;box-shadow:none!important;overflow-wrap:anywhere}
body.enghome-body :is(.product-thumb,.enghome-product-card){border-radius:2px!important;box-shadow:none!important;border-color:var(--line)!important}
body.enghome-body :is(.eg-sale-mini-frame,.eg-sale-mini-frame span){background:var(--soft)!important;color:var(--clay)!important;box-shadow:none!important;animation:none!important;border-radius:2px!important}
body.enghome-body .eg-sale-mini-frame::before{display:none!important}

/* Equal side tracks keep the wordmark on the viewport centerline. */
body.enghome-body .eg-premium-header .eg-header-inner{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  gap:20px!important;max-width:none!important;
}
body.enghome-body .eg-premium-header .eg-header-actions{justify-self:end;gap:14px!important}
body.enghome-body .eg-premium-header .eg-logo-link{margin:0!important;justify-self:center}
body.enghome-body .eg-premium-header :is(.eg-action-btn,.eghx-trigger){
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  color:inherit!important;transform:none!important;padding:0!important;min-width:32px!important;height:44px!important;
}
body.enghome-body .eg-premium-header .eg-action-icon{background:transparent!important;box-shadow:none!important;border:0!important}
body.enghome-body .eg-premium-header .eg-action-icon svg{width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important}
body.enghome-body .eg-premium-header .eg-flat-nav{gap:clamp(8px,1.3vw,22px)!important;font-size:12px!important;white-space:normal!important}
body.enghome-body .eg-premium-header .eg-flat-nav a{white-space:normal!important;line-height:1.3!important}
body.enghome-body .egrd-home .hero :is(h1,h1 span,h1 em){
  color:#fffaf1!important;-webkit-text-fill-color:#fffaf1!important;font-family:var(--f-disp)!important;
  font-weight:300!important;font-style:normal!important;text-shadow:0 2px 22px rgba(20,17,14,.25);
}
body.enghome-body .egrd-home .hero{padding-block:0!important}
body.enghome-body .egrd-home .hero video{height:100%!important}

/* Content-bottom modules have an intrinsic image height and a no-JS fallback. */
body.enghome-body .egrd-home > .swiper-viewport{
  height:auto!important;min-height:0!important;max-width:var(--egrd-max);margin:36px auto!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--soft)!important;
}
body.enghome-body .egrd-home .swiper-container{height:auto!important;min-height:0!important}
body.enghome-body .egrd-home .swiper-slide{height:auto!important;min-height:0!important}
body.enghome-body .egrd-home .swiper-slide img{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;opacity:1!important;visibility:visible!important}
body.enghome-body .egrd-home .swiper-container:not(.swiper-container-horizontal) .swiper-slide{flex-shrink:0;width:100%}
body.enghome-body .egrd-home .swiper-container:not(.swiper-container-horizontal) ~ :is(.swiper-pager,.swiper-pagination){display:none}
body.enghome-body .egrd-home .swiper-wrapper{min-height:0!important}
@media(min-width:941px){
  body.enghome-body .eg-premium-header .eg-flat-nav{display:flex!important}
  body.enghome-body .eg-premium-header .eghx-trigger{display:none!important}
}
@media(min-width:941px) and (max-width:1180px){
  body.enghome-body .eg-premium-header .eg-action-label{display:none!important}
  body.enghome-body .eg-premium-header .eg-header-inner{gap:12px!important}
  body.enghome-body .eg-premium-header .eg-wordmark{font-size:16px!important;letter-spacing:.2em!important}
}
@media(max-width:940px){
  body.enghome-body .eg-premium-header .eg-header-inner{gap:8px!important;padding-inline:18px!important}
  body.enghome-body .eg-premium-header .eg-header-actions{gap:4px!important}
  body.enghome-body .eg-premium-header .eg-action-label{display:none!important}
  body.enghome-body .eg-premium-header .eg-action-icon{display:inline-flex!important}
  body.enghome-body .eg-premium-header .eg-wordmark{font-size:15px!important;letter-spacing:.18em!important;text-indent:.18em!important}
  body.enghome-body .eg-voyage-panel{grid-template-columns:minmax(0,1fr)!important;min-height:0!important}
  body.enghome-body :is(.eg-voyage-left,.eg-voyage-right){padding:24px!important;min-width:0!important}
  body.enghome-body .eg-voyage-right{border-left:0!important;border-top:1px solid var(--line)!important}
}
@media(max-width:600px){
  body.enghome-body :is(.eg-voyage-grid,.eg-cart-voyage-grid){grid-template-columns:minmax(0,1fr)!important}
  body.enghome-body :is(.eg-voyage-pay-methods,.eg-voyage-steps){gap:8px!important}
  body.enghome-body .eg-voyage-step{font-size:11px!important;flex-wrap:wrap}
  body.enghome-body :is(.eg-voyage-pay-card span,.eg-voyage-left,.eg-voyage-right){padding:16px!important}
  body.enghome-body :is(.form-control,.eg-voyage-field input,.eg-voyage-field select){font-size:16px!important}
  body.enghome-body :is(.buttons,.input-group){max-width:100%;flex-wrap:wrap}
  body.enghome-body :is(.btn,.egp-title,.product-thumb h4){white-space:normal!important;overflow-wrap:anywhere}
  body.enghome-body .egrd-home .p-actions button{min-height:44px}
}
/* Match the specificity of legacy page-local display styles. */
body.enghome-body :is(#product-product,#product-category,#product-search,#product-special,#checkout-cart,#checkout-checkout,#account-login,#account-register,#account-account,#account-wishlist,#product-compare,#information-contact,#information-information,#common-success,#error-not-found) :is(h1,h2){
  font-family:var(--f-disp)!important;font-weight:300!important;font-style:normal!important;letter-spacing:-.015em!important;
}
body.enghome-body .egrd-home .swiper-slide img{min-height:0!important;max-height:none!important;filter:none!important}
body.enghome-body .egrd-home .swiper-slide a{height:auto!important}
body.enghome-body .egrd-home .swiper-container:not(.swiper-container-horizontal) .swiper-slide:not(:first-child){display:none}
@media(max-width:430px){
  body.enghome-body .eg-premium-header .eg-wordmark{font-size:14px!important;letter-spacing:.12em!important;text-indent:.12em!important}
  body.enghome-body .eg-premium-header .eg-header-actions{gap:2px!important}
  body.enghome-body .eg-premium-header .eg-header-inner{gap:4px!important}
}

/* ---- Account panel & Cart drawer overlays ----
   Both are anchored to their own header trigger (account/cart icons), align
   from the right per DESIGN_SYSTEM.md header rules, respect the single-
   overlay-open contract via EngHomeCloseOtherOverlays (common/header.twig),
   and share the same backdrop, transition length, and focus-visible ring as
   the rest of the shell. Cart is always a right-side drawer (mobile
   requirement); account is a compact right-aligned dropdown that becomes a
   right-side drawer at the same width the mega-menu goes full-screen. */
body.enghome-body .eg-panel-backdrop{
  position:fixed;inset:0;z-index:2147483090;background:rgba(20,17,14,.32);
  opacity:0;transition:opacity .25s ease;
}
body.enghome-body .eg-panel-backdrop.is-show{opacity:1}
body.enghome-body :is(.eg-account-panel,.eg-cart-drawer){
  position:fixed;top:var(--eg-header-h);right:12px;width:min(410px,calc(100% - 24px));height:auto;max-height:calc(100dvh - var(--eg-header-h) - 12px);z-index:2147483100;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:-18px 18px 48px rgba(20,17,14,.16);
  display:flex;flex-direction:column;font-family:var(--f-ui);
  transform:translateX(100%);opacity:0;visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s ease,visibility .28s ease;
}
body.enghome-body :is(.eg-account-panel,.eg-cart-drawer).is-open{
  transform:translateX(0);opacity:1;visibility:visible;
}
body.enghome-body :is(.eg-account-panel,.eg-cart-drawer)[hidden]{display:none}
body.enghome-body .eg-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--line);flex:none;
}
body.enghome-body .eg-panel-head strong{font-family:var(--f-disp);font-weight:400;font-size:19px;letter-spacing:-.01em}
body.enghome-body .eg-panel-close{
  width:44px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);
  font-size:20px;line-height:1;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
body.enghome-body .eg-panel-close:hover{background:var(--soft);border-color:var(--line-strong)}
body.enghome-body .eg-panel-close:active{transform:scale(.94)}
body.enghome-body .eg-panel-body{padding:22px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
body.enghome-body .eg-panel-lead{margin:0 0 6px;color:var(--muted);font-size:13.5px;line-height:1.6}
body.enghome-body .eg-panel-link{
  display:flex;align-items:center;min-height:44px;padding:12px 4px;border-bottom:1px solid var(--line);
  color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none;transition:color .2s ease,padding-left .2s ease;
}
body.enghome-body .eg-panel-link:hover{color:var(--clay);padding-left:8px}
body.enghome-body .eg-panel-link-primary{font-weight:600}
body.enghome-body .eg-panel-link-muted{color:var(--muted)}
body.enghome-body .eg-cart-drawer{height:calc(100dvh - var(--eg-header-h) - 12px)}
body.enghome-body .eg-cart-drawer-body{padding:18px 22px 22px;overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column;gap:14px}
body.enghome-body .eg-cart-drawer-items{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:14px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
body.enghome-body .eg-cart-drawer-items .eg-cart-item{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:7px 14px;align-items:start;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
body.enghome-body .eg-cart-drawer-items .eg-cart-item-image{grid-row:1/span 3;width:72px;height:72px}
body.enghome-body .eg-cart-drawer-items .eg-cart-item-image img{width:72px;height:72px;object-fit:cover;object-position:center;background:var(--soft);border-radius:1px}
body.enghome-body .eg-cart-drawer-items .eg-cart-item-info{min-width:0}
body.enghome-body .eg-cart-drawer-items .eg-cart-item-title{display:block;color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none;line-height:1.4;overflow-wrap:normal;word-break:normal}
body.enghome-body .eg-cart-drawer-items .eg-cart-item-actions{grid-column:2;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
body.enghome-body .eg-cart-drawer-qty{color:var(--muted);font-size:12px;white-space:nowrap}
body.enghome-body .eg-cart-drawer-items .eg-cart-remove-btn{
  min-height:32px;padding:0 10px;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper);
  color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
body.enghome-body .eg-cart-drawer-items .eg-cart-remove-btn:hover{background:var(--sale);color:#fff;border-color:var(--sale)}
body.enghome-body .eg-cart-drawer-items .eg-cart-item-prices{grid-column:2;display:flex;justify-content:flex-start;gap:10px;font-size:13px;color:var(--muted)}
body.enghome-body .eg-cart-drawer-items .eg-item-total-price{color:var(--ink);font-weight:600}
body.enghome-body .eg-cart-drawer-totals{flex:0 0 auto;background:var(--paper)}
body.enghome-body .eg-cart-drawer-totals .eg-cart-total-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line)}
body.enghome-body .eg-cart-drawer-totals .eg-cart-total-final{color:var(--ink);font-weight:700;font-size:16px}
body.enghome-body .eg-cart-drawer-actions{display:flex;flex:0 0 auto;flex-direction:column;gap:10px;padding-top:2px}
body.enghome-body :is(.eg-panel-loading,.eg-panel-empty,.eg-panel-error){
  padding:36px 4px;text-align:center;color:var(--muted);font-size:14px;line-height:1.6;
}
body.enghome-body :is(.eg-panel-empty,.eg-panel-error){display:flex;flex-direction:column;align-items:center;gap:14px}
body.enghome-body .eg-panel-error{color:var(--sale)}
@media(max-width:480px){
  body.enghome-body :is(.eg-account-panel,.eg-cart-drawer){right:0;width:100%;max-width:440px;border-right:0;border-left:0}
  body.enghome-body .eg-cart-drawer-body{padding-right:18px;padding-left:18px}
}
@media(prefers-reduced-motion:reduce){
  body.enghome-body :is(.eg-panel-backdrop,.eg-account-panel,.eg-cart-drawer,.eg-panel-close,.eg-panel-link,.eg-cart-drawer-items .eg-cart-remove-btn){transition:none!important}
}

/* ---- /ofertat (product/special) discovery-family parity ----
   ControllerProductSpecial doesn't expose manufacturer/price/stock filter
   data the way product/category does (it only supports sort+limit), so this
   reuses the same result-count + sort + limit toolbar pattern as
   category/search without fabricating a filter sidebar with no backing
   data. Card/grid styling already comes from the shared enghome-commerce.css
   .eg-commerce layer (same as category/search/product), so only the
   breadcrumb/toolbar/empty-state chrome needs its own rules here. */
body.enghome-body #product-special.eg-offers-page{padding:36px 0 64px}
body.enghome-body #product-special .eg-offers-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;color:var(--muted);font-size:12px}
body.enghome-body #product-special .eg-offers-breadcrumb a{color:var(--muted);text-decoration:none}
body.enghome-body #product-special .eg-offers-breadcrumb a:hover{color:var(--clay)}
body.enghome-body #product-special .eg-offers-toolbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;
  margin:0 0 28px;padding:28px 30px;border:1px solid var(--line);border-radius:4px;background:var(--soft);
}
body.enghome-body #product-special .eg-offers-eyebrow{display:block;margin:0 0 8px;font:600 10.5px/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
body.enghome-body #product-special .eg-offers-heading h1{margin:0;font-family:var(--f-disp);font-weight:300;font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
body.enghome-body #product-special .eg-offers-count{margin:8px 0 0;color:var(--muted);font-size:13.5px}
body.enghome-body #product-special .eg-offers-controls{display:flex;flex-wrap:wrap;gap:16px}
body.enghome-body #product-special .eg-offers-controls label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
body.enghome-body #product-special .eg-offers-controls select{
  min-height:44px;min-width:190px;padding:0 14px;border:1px solid var(--line-strong);border-radius:2px;
  background:var(--paper);color:var(--ink);font:500 13px/1 var(--f-ui);
}
body.enghome-body #product-special #compare-total{display:inline-block;margin:0 0 18px;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;text-decoration:underline;text-underline-offset:3px}
body.enghome-body #product-special #compare-total:hover{color:var(--clay)}
body.enghome-body #product-special .eg-offers-empty{
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:70px 20px;text-align:center;
  border:1px solid var(--line);border-radius:4px;background:var(--soft);color:var(--muted);
}
body.enghome-body #product-special .eg-offers-empty-icon{font-size:34px;color:var(--clay)}
body.enghome-body #product-special .eg-offers-empty h2{margin:0;font-family:var(--f-disp);font-weight:300;font-size:26px;color:var(--ink)}
body.enghome-body #product-special .eg-offers-empty p{margin:0;max-width:44ch}
@media(max-width:700px){
  body.enghome-body #product-special .eg-offers-toolbar{flex-direction:column;align-items:flex-start;padding:20px}
  body.enghome-body #product-special .eg-offers-controls{width:100%}
  body.enghome-body #product-special .eg-offers-controls label{flex:1;min-width:0}
  body.enghome-body #product-special .eg-offers-controls select{width:100%;min-width:0}
}
