/* ============================================================================
   HayWay Export Marketplace — storefront theme
   Ported from the TSIRANI design system. Loaded site-wide after bootstrap.css
   (see extension/hayway/.../common/header.twig). Palette + shared interactive
   classes; bespoke section styling stays inline in the twig templates.
   ============================================================================ */

:root{
  --hay-green:#1e4a29;
  --hay-green-ink:#1c3f24;
  --hay-orange:#f15a0c;
  --hay-orange-lt:#ff9838;
  --hay-orange-dk:#d64f0a;
  --hay-cream:#fbfbf7;
  --hay-cream-warm:#fdf3e6;
  --hay-text:#586a51;
  --hay-text-mut:#7c8a74;
  --hay-border:rgba(30,74,41,.14);
  --hay-header-h:57px;
}

/* ---- Base ---------------------------------------------------------------- */
body{
  font-family:'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--hay-green-ink);
  background:var(--hay-cream);
  margin:0;
}
h1,h2,h3,h4,h5{ font-family:'Archivo Expanded','Archivo',sans-serif; }
a{ text-decoration:none; }
img{ max-width:100%; }

main{ display:block; padding-top:var(--hay-hdr-h, 78px); animation:viewIn .5s cubic-bezier(.2,.7,.2,1) both; }
html.hay-home main{ padding-top:0; }

/* Material Symbols icon font */
.ms{
  font-family:'Material Symbols Outlined';
  font-weight:normal; font-style:normal; font-size:inherit; line-height:1;
  display:inline-block; -webkit-font-smoothing:antialiased; vertical-align:middle;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
}

/* ---- Links / buttons ----------------------------------------------------- */
.lnk{ cursor:pointer; transition:color .18s ease, opacity .18s ease; }
.lnk:hover{ color:var(--hay-orange) !important; }

.btnO{
  position:relative; overflow:hidden; cursor:pointer; border:none;
  transition:background .22s ease, transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
  box-shadow:0 6px 18px -10px rgba(241,90,12,.5);
}
.btnO::before{
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg); pointer-events:none; transition:left .6s ease;
}
.btnO:hover::before{ left:150%; }
.btnO:hover{ background:var(--hay-orange-dk) !important; transform:translateY(-2px); box-shadow:0 16px 28px -10px rgba(241,90,12,.55); }
.btnO:active{ transform:translateY(0); box-shadow:0 4px 12px -8px rgba(241,90,12,.5); }

.btnG{
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
}
.btnG:hover{ background:var(--hay-green) !important; color:#fff !important; transform:translateY(-2px); box-shadow:0 16px 28px -16px rgba(30,74,41,.55); }
.btnG:active{ transform:translateY(0); }

/* ---- Cards / media ------------------------------------------------------- */
.card-hay{
  cursor:pointer;
  position:relative;
  transition:transform .34s cubic-bezier(.2,.7,.2,1), box-shadow .34s ease, border-color .2s;
  box-shadow:0 2px 12px -7px rgba(30,50,20,.18);
}
/* Whole product card is clickable (enters the product): the title link's overlay covers the card,
   while the add-to-cart button sits above it so it still adds to cart (no JS needed). */
.hay-cardlink::after{ content:""; position:absolute; inset:0; z-index:1; }
.card-hay button{ position:relative; z-index:2; }
.card-hay:hover{ transform:translateY(-6px); box-shadow:0 32px 56px -30px rgba(30,50,20,.5); border-color:rgba(30,74,41,.25) !important; }
.zoomwrap{ overflow:hidden; box-shadow:0 18px 40px -30px rgba(30,50,20,.45); }
.card-hay .zoomwrap{ box-shadow:none; }
.zoomwrap img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.bgi{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card-hay:hover .bgi, .card-hay:hover .zoomwrap img, .zoomwrap:hover img{ transform:scale(1.06); }
.ph2{ background:linear-gradient(135deg,#eef3ec,#e3ecdf); position:relative; }

/* ---- Nav pills / tabs ---------------------------------------------------- */
.navpill{ cursor:pointer; transition:color .18s ease; position:relative; }
.navpill:hover{ color:var(--hay-orange); }
.navpill::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:currentColor; opacity:.75; transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.navpill:hover::after{ transform:scaleX(1); }

.tab{ cursor:pointer; transition:color .18s ease, border-color .18s ease; }
.tab:hover{ color:var(--hay-green); }
.tab.caton{ color:var(--hay-green) !important; border-bottom-color:var(--hay-orange) !important; }

.acctnav{
  padding:13px 18px; color:#556552; display:flex; align-items:center; gap:10px;
  border-top:1px solid rgba(30,74,41,.08); cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.acctnav:first-child{ border-top:none; }
.acctnav:hover{ background:rgba(30,74,41,.05); color:var(--hay-green); }
.acctnav.acton{ background:#eef3ec; color:var(--hay-green); font-weight:600; box-shadow:inset 3px 0 0 var(--hay-orange); }

/* ---- Form fields --------------------------------------------------------- */
.fieldi{
  width:100%; padding:13px 15px; border:1px solid rgba(30,74,41,.2); border-radius:3px;
  font:400 15px/1.2 'Archivo',sans-serif; color:var(--hay-green-ink); background:#fff;
  outline:none; transition:border-color .18s ease;
}
.fieldi:focus{ border-color:var(--hay-green); box-shadow:0 0 0 3px rgba(30,74,41,.12); }
.qbtn{ cursor:pointer; user-select:none; transition:color .15s ease; }
.qbtn:hover{ color:var(--hay-orange); }

/* The empty Bootstrap toast container sits top-right (position-fixed) and otherwise
   swallows clicks meant for the mobile burger right under it — let clicks pass through,
   but keep any real toasts (its children) interactive. */
#alert{ pointer-events:none; z-index:60; }
#alert > *{ pointer-events:auto; }

/* ---- Announcement bar — pinned to the very top of every page, above the header,
   never scrolls. Its height (JS-measured, --hay-announce-h) offsets the header + content. */
.hay-announce{ position:fixed; top:0; left:0; right:0; z-index:56; }

/* ---- Important entry notice (admin-managed) ----------------------------- */
html.hay-notice-open{ overflow:hidden; }
.hay-entry-notice{
  position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.hay-entry-notice[hidden]{ display:none; }
.hay-entry-notice.is-visible{ opacity:1; visibility:visible; }
.hay-entry-notice__backdrop{ position:absolute; inset:0; background:rgba(9,24,14,.76); backdrop-filter:blur(7px); }
.hay-entry-notice__dialog{
  position:relative; width:min(600px,100%); background:#fbfbf7; color:#172719; border-top:4px solid var(--hay-orange);
  padding:42px 46px 38px; box-shadow:0 26px 80px rgba(0,0,0,.34); text-align:center; outline:none;
  transform:translateY(14px); transition:transform .24s cubic-bezier(.2,.7,.2,1);
}
.hay-entry-notice.is-visible .hay-entry-notice__dialog{ transform:translateY(0); }
.hay-entry-notice__icon{
  width:52px; height:52px; margin:0 auto 20px; display:grid; place-items:center; background:var(--hay-green); color:#fff;
}
.hay-entry-notice__icon .ms{ font-size:26px; }
.hay-entry-notice__dialog h2{ margin:0 0 14px; color:var(--hay-green); font:700 24px/1.2 'Archivo Expanded',Arial,sans-serif; letter-spacing:-.02em; }
.hay-entry-notice__dialog p{ margin:0 auto; max-width:500px; color:#425044; font-size:16px; line-height:1.65; }
.hay-entry-notice__button{
  margin-top:28px; min-width:150px; border:0; background:var(--hay-orange); color:#fff; padding:13px 24px;
  font:700 12px/1 'Archivo',Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.hay-entry-notice__button:hover{ background:#d94d05; transform:translateY(-1px); }
.hay-entry-notice__button:focus-visible{ outline:3px solid rgba(241,90,12,.28); outline-offset:3px; }
@media (max-width:560px){
  .hay-entry-notice{ padding:14px; }
  .hay-entry-notice__dialog{ padding:32px 22px 28px; }
  .hay-entry-notice__dialog h2{ font-size:20px; }
  .hay-entry-notice__dialog p{ font-size:15px; }
  .hay-entry-notice__button{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .hay-entry-notice,.hay-entry-notice__dialog,.hay-entry-notice__button{ transition:none; }
}

/* Logo firmowe w nagłówku: białe na przezroczystym tle (hero na górze strony głównej),
   czarne gdy nagłówek robi się biały (scroll → .hdr.solid, oraz wszystkie podstrony). */
.hdr .hay-logo-w, .hdr .hay-logo-b{ height:42px; width:auto; display:block; }
.hdr .hay-logo-b{ display:none; }
.hdr.solid .hay-logo-w, html:not(.hay-home) .hdr .hay-logo-w{ display:none; }
.hdr.solid .hay-logo-b, html:not(.hay-home) .hdr .hay-logo-b{ display:block; }
@media (max-width:760px){ .hdr .hay-logo-w, .hdr .hay-logo-b{ height:34px; } }

/* ---- Header -------------------------------------------------------------- */
.hdr{
  position:fixed; top:var(--hay-announce-h, 0px); left:0; right:0; z-index:50;
  --txt:#fbf3e6; --nav:#e7dcc9; --npa:#ff9838; --ico:#f2e9d8; --segoff:#eadfce; --segtrack:rgba(255,255,255,.13); --pad:24px 32px; --logo:25px;
  background-color:transparent;
  transition:background-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
.hdr .hdrinner{ padding:var(--pad); transition:padding .45s cubic-bezier(.2,.7,.2,1); }
.hdr .logo{ color:var(--txt); font-size:var(--logo); transition:color .45s ease, font-size .45s cubic-bezier(.2,.7,.2,1); }
.hdr .navi{ color:var(--nav); transition:color .45s ease; }
.hdr .npa{ color:var(--npa); transition:color .45s ease; }
.hdr .picon{ color:var(--ico); transition:color .45s ease; }
/* Anchor colour reset so the --txt/--nav/--npa/--ico system beats Bootstrap link colours */
.hdr a{ text-decoration:none; }
.hdr a.logo{ color:var(--txt); }
.hdr .navi a{ color:var(--nav); }
.hdr .navi a.npa, .hdr a.npa{ color:var(--npa); }
.hdr a.picon, .hdr .picon{ color:var(--ico); }
.hdr a.picon:hover, .hdr .navi a:hover{ color:var(--hay-orange); }
/* Inner pages: solid colours + background, but keep the FULL header size until scroll
   (so the top bar looks the same on every subpage, then shrinks on scroll). */
html:not(.hay-home) .hdr{
  --txt:#1e4a29; --nav:#556552; --npa:#f15a0c; --ico:#3a4a38; --segoff:#66765d; --segtrack:rgba(30,74,41,.08);
  background-color:rgba(251,251,247,.97); backdrop-filter:blur(10px);
  box-shadow:0 8px 26px -16px rgba(30,50,20,.42);
}
/* Scrolled (JS adds .solid on ANY page): compact + solid. */
.hdr.solid{
  --txt:#1e4a29; --nav:#556552; --npa:#f15a0c; --ico:#3a4a38; --segoff:#66765d; --segtrack:rgba(30,74,41,.08); --pad:11px 32px; --logo:20px;
  background-color:rgba(251,251,247,.97); backdrop-filter:blur(10px);
  box-shadow:0 8px 26px -16px rgba(30,50,20,.42);
}
/* Active nav item (set by hayway.js from the current route) */
.hdr .navi a.hay-nav-on{ color:var(--npa); }
.hdr .navi a.hay-nav-on::after{ transform:scaleX(1); opacity:.85; }

/* Breadcrumb bar (reference style) — on every non-home page, below the header */
.hay-crumb{ border-bottom:1px solid rgba(30,74,41,.1); background:#fff; }
.hay-crumb-in{ max-width:1240px; margin:0 auto; padding:13px 32px; display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--hay-text-mut); flex-wrap:wrap; }
.hay-crumb-back{ display:inline-flex; align-items:center; gap:5px; color:var(--hay-green); font-weight:700; text-decoration:none; cursor:pointer; }
.hay-crumb-back:hover{ color:var(--hay-orange); }
.hay-crumb-back .ms{ font-size:18px; }
.hay-crumb-div{ width:1px; height:14px; background:rgba(30,74,41,.2); }
.hay-crumb-link{ color:var(--hay-text-mut); text-decoration:none; }
.hay-crumb-link:hover{ color:var(--hay-orange); }
.hay-crumb-sep{ font-size:15px; opacity:.5; }
.hay-crumb-cur{ color:var(--hay-green-ink); font-weight:600; }
/* Suppress the native OpenCart breadcrumb — the bar above replaces it everywhere */
ul.breadcrumb{ display:none !important; }

/* ---- Header currency + language switchers (inline, "Variant D") ---------- */
/* Icons (person/cart/burger) sit on the CODE line of the two-line switchers. Bottom-align the
   cluster so nothing floats in the label/code gap; `#header-cart{display:contents}` dissolves the
   cart's wrapper <div> so its link aligns exactly like the person icon (AJAX cart refresh still
   works — it only swaps #header-cart's innerHTML, which display:contents leaves intact). */
.hay-hdr-right{ display:flex; align-items:flex-end; gap:18px; }
#header-cart{ display:contents; }
/* person anchor + cart link only — NOT the burger (a .picon too, but must stay display:none on desktop) */
.hay-hdr-right > a.picon, #header-cart > .cbtn{ display:flex; align-items:center; line-height:1; }
.hay-hdr-switch{ display:flex; align-items:center; gap:22px; }
.hdritem-wrap{ position:relative; }
.hdritem{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.hdritem .lab{ font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--segoff); transition:color .35s ease; white-space:nowrap; }
.hdritem .code{ position:relative; font-size:12px; font-weight:700; letter-spacing:.05em; color:var(--nav); transition:color .2s ease; }
.hdritem:hover .code{ color:var(--hay-orange); }
.hdrbadge{ position:absolute; top:-6px; right:-9px; width:15px; height:11px; border-radius:2px; box-shadow:0 0 0 1.5px var(--segtrack), 0 2px 5px -1px rgba(0,0,0,.35); display:inline-block; }
.hdrdrop{
  position:absolute; top:calc(100% + 12px); right:50%; transform:translateX(50%);
  display:none; flex-direction:column; gap:14px; align-items:center; z-index:70;
}
.hdritem-wrap.open .hdrdrop{ display:flex; }
.hdrdrop .code{ position:relative; font-size:12px; font-weight:700; letter-spacing:.05em; color:var(--nav); text-decoration:none; cursor:pointer; white-space:nowrap; }
.hdrdrop .code:hover, .hdrdrop .code.on{ color:var(--hay-orange); }
/* EUR "flag" = blue field + gold star; national flags are pure CSS gradients (no images) */
/* EUR badge = the actual EU flag (12 gold stars in a ring on reflex blue), inline SVG */
.euflag{ background:#039 url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA0MCI+PHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjMDM5Ii8+PGcgZmlsbD0iI2ZjMCI+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAgNi42NykiIGQ9Ik0wLC0zLjIgLjcyLC0uOTkgMy4wNCwtLjk5IDEuMTYsLjM4IDEuODgsMi41OSAwLDEuMjIgLTEuODgsMi41OSAtMS4xNiwuMzggLTMuMDQsLS45OSAtLjcyLC0uOTlaIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzYuNjcgOC40NSkiIGQ9Ik0wLC0zLjIgLjcyLC0uOTkgMy4wNCwtLjk5IDEuMTYsLjM4IDEuODgsMi41OSAwLDEuMjIgLTEuODgsMi41OSAtMS4xNiwuMzggLTMuMDQsLS45OSAtLjcyLC0uOTlaIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDEuNTUgMTMuMzMpIiBkPSJNMCwtMy4yIC43MiwtLjk5IDMuMDQsLS45OSAxLjE2LC4zOCAxLjg4LDIuNTkgMCwxLjIyIC0xLjg4LDIuNTkgLTEuMTYsLjM4IC0zLjA0LC0uOTkgLS43MiwtLjk5WiIvPjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQzLjMzIDIwKSIgZD0iTTAsLTMuMiAuNzIsLS45OSAzLjA0LC0uOTkgMS4xNiwuMzggMS44OCwyLjU5IDAsMS4yMiAtMS44OCwyLjU5IC0xLjE2LC4zOCAtMy4wNCwtLjk5IC0uNzIsLS45OVoiLz48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MS41NSAyNi42NykiIGQ9Ik0wLC0zLjIgLjcyLC0uOTkgMy4wNCwtLjk5IDEuMTYsLjM4IDEuODgsMi41OSAwLDEuMjIgLTEuODgsMi41OSAtMS4xNiwuMzggLTMuMDQsLS45OSAtLjcyLC0uOTlaIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzYuNjcgMzEuNTUpIiBkPSJNMCwtMy4yIC43MiwtLjk5IDMuMDQsLS45OSAxLjE2LC4zOCAxLjg4LDIuNTkgMCwxLjIyIC0xLjg4LDIuNTkgLTEuMTYsLjM4IC0zLjA0LC0uOTkgLS43MiwtLjk5WiIvPjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwIDMzLjMzKSIgZD0iTTAsLTMuMiAuNzIsLS45OSAzLjA0LC0uOTkgMS4xNiwuMzggMS44OCwyLjU5IDAsMS4yMiAtMS44OCwyLjU5IC0xLjE2LC4zOCAtMy4wNCwtLjk5IC0uNzIsLS45OVoiLz48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMy4zMyAzMS41NSkiIGQ9Ik0wLC0zLjIgLjcyLC0uOTkgMy4wNCwtLjk5IDEuMTYsLjM4IDEuODgsMi41OSAwLDEuMjIgLTEuODgsMi41OSAtMS4xNiwuMzggLTMuMDQsLS45OSAtLjcyLC0uOTlaIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTguNDUgMjYuNjcpIiBkPSJNMCwtMy4yIC43MiwtLjk5IDMuMDQsLS45OSAxLjE2LC4zOCAxLjg4LDIuNTkgMCwxLjIyIC0xLjg4LDIuNTkgLTEuMTYsLjM4IC0zLjA0LC0uOTkgLS43MiwtLjk5WiIvPjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjY3IDIwKSIgZD0iTTAsLTMuMiAuNzIsLS45OSAzLjA0LC0uOTkgMS4xNiwuMzggMS44OCwyLjU5IDAsMS4yMiAtMS44OCwyLjU5IC0xLjE2LC4zOCAtMy4wNCwtLjk5IC0uNzIsLS45OVoiLz48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC40NSAxMy4zMykiIGQ9Ik0wLC0zLjIgLjcyLC0uOTkgMy4wNCwtLjk5IDEuMTYsLjM4IDEuODgsMi41OSAwLDEuMjIgLTEuODgsMi41OSAtMS4xNiwuMzggLTMuMDQsLS45OSAtLjcyLC0uOTlaIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjMuMzMgOC40NSkiIGQ9Ik0wLC0zLjIgLjcyLC0uOTkgMy4wNCwtLjk5IDEuMTYsLjM4IDEuODgsMi41OSAwLDEuMjIgLTEuODgsMi41OSAtMS4xNiwuMzggLTMuMDQsLS45OSAtLjcyLC0uOTlaIi8+PC9nPjwvc3ZnPg==") center/cover no-repeat; }
.flagPL{ background:linear-gradient(#fff 0 50%,#dc143c 50%); }
.flagAM{ background:linear-gradient(#d90012 0 33.33%,#0033a0 33.33% 66.66%,#f2a800 66.66%); }
.flagRU{ background:linear-gradient(#fff 0 33.33%,#0039a6 33.33% 66.66%,#d52b1e 66.66%); }
.flagUA{ background:linear-gradient(#0057b7 0 50%,#ffd700 50%); }
.flagDE{ background:linear-gradient(#000 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66%); }
.flagFR{ background:linear-gradient(to right,#0055a4 0 33.33%,#fff 33.33% 66.66%,#ef4135 66.66%); }
.flagEN{ background:linear-gradient(to right,transparent 43%,#C8102E 43% 57%,transparent 57%),linear-gradient(to bottom,transparent 43%,#C8102E 43% 57%,transparent 57%),linear-gradient(to right,transparent 37%,#fff 37% 63%,transparent 63%),linear-gradient(to bottom,transparent 37%,#fff 37% 63%,transparent 63%),linear-gradient(to bottom right,transparent 45.5%,#C8102E 45.5% 54.5%,transparent 54.5%),linear-gradient(to bottom left,transparent 45.5%,#C8102E 45.5% 54.5%,transparent 54.5%),linear-gradient(to bottom right,transparent 41%,#fff 41% 59%,transparent 59%),linear-gradient(to bottom left,transparent 41%,#fff 41% 59%,transparent 59%),#012169; }

/* ---- Reveal-on-scroll ---------------------------------------------------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes viewIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
@keyframes heroUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }
@keyframes floatBadge{ 0%,100%{transform:rotate(4deg) translateY(0);} 50%{transform:rotate(4deg) translateY(-6px);} }
@keyframes kb{ from{transform:scale(1);} to{transform:scale(1.09);} }
.heroimg{ animation:kb 20s ease-in-out infinite alternate; }

/* Hero slider (admin-managed via Banners) */
.hay-slider{ position:absolute; inset:0; }
.hay-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; pointer-events:none; }
.hay-slide.on{ opacity:1; pointer-events:auto; }
.hay-slider-dots{ position:absolute; bottom:74px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:6; }
.hay-dot{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.45); cursor:pointer; padding:0; transition:width .25s ease, background .25s ease; }
.hay-dot.on{ background:var(--hay-orange); width:24px; border-radius:5px; }
.hay-slider-prev, .hay-slider-next{ position:absolute; top:calc(50% - 40px); z-index:6; background:rgba(12,24,10,.4); border:none; color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
.hay-slider-prev{ left:20px; }
.hay-slider-next{ right:20px; }
.hay-slider-prev:hover, .hay-slider-next:hover{ background:var(--hay-orange); }
.hay-slider-prev .ms, .hay-slider-next .ms{ font-size:26px; }
@media (max-width:760px){ .hay-slider-prev, .hay-slider-next{ display:none; } .hay-slider-dots{ bottom:auto; top:8px; } }

/* Hero copy stagger */
.hay-hero-copy > *{ animation:heroUp .65s cubic-bezier(.2,.7,.2,1) both; }
.hay-hero-copy > *:nth-child(1){ animation-delay:.06s; }
.hay-hero-copy > *:nth-child(2){ animation-delay:.16s; }
.hay-hero-copy > *:nth-child(3){ animation-delay:.26s; }
.hay-hero-copy > *:nth-child(4){ animation-delay:.36s; }

/* ---- Mobile drawer ------------------------------------------------------- */
.mburger{ display:none; }
.hay-drawer{
  position:fixed; top:0; right:0; width:80%; max-width:320px; height:100%;
  background:var(--hay-cream); z-index:71; padding:22px; display:flex; flex-direction:column;
  box-shadow:-12px 0 44px -12px rgba(0,0,0,.45); transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.hay-drawer.open{ transform:none; }
.hay-drawer-ov{ position:fixed; inset:0; z-index:70; background:rgba(20,30,15,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.hay-drawer-ov.open{ opacity:1; pointer-events:auto; }

/* ---- Header cart icon + count badge -------------------------------------- */
.cbtn{ position:relative; display:flex; align-items:center; cursor:pointer; transition:transform .2s ease; }
.cbtn:hover{ transform:translateY(-1px); }
.cbadge{
  position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; padding:0 4px;
  background:var(--hay-orange); color:#fff; font-family:'Archivo',sans-serif; font-size:10px;
  font-weight:700; border-radius:9px; display:flex; align-items:center; justify-content:center;
  line-height:1; box-shadow:0 2px 6px -1px rgba(241,90,12,.5);
}

/* ---- Mobile drawer: currency segmented pill + language rows -------------- */
.hay-drawer-switch{ padding:16px 0; border-bottom:1px solid rgba(30,74,41,.1); }
.hay-drawer-lab{ font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8a9a80; margin-bottom:10px; }
.curseg{ display:inline-flex; gap:2px; padding:3px; background:rgba(30,74,41,.08); border-radius:100px; }
/* W szufladzie mobilnej rząd 6 języków (445px) nie mieści się w panelu (312px) — bez zawijania
   AM jest ucięte, a DE i FR w ogóle poza ekranem (nie do kliknięcia). Zawijamy pigułki. */
.hay-drawer .curseg{ flex-wrap:wrap; border-radius:16px; max-width:100%; }
/* Cena na karcie produktu nigdy nie łamie się w dwie linie ("120" / "zł"). */
.card-hay span[style*="font-size:21px"]{ white-space:nowrap; }
/* Input newslettera w stopce: bez min-width treści — to on rozpychał kolumnę stopki poza ekran. */
.hay-footer-grid form input{ min-width:0; }
.cseg{ display:flex; align-items:center; gap:7px; padding:7px 15px; font-size:12px; font-weight:700; letter-spacing:.02em; color:#66765d; cursor:pointer; border-radius:100px; text-decoration:none; transition:background .2s ease, color .2s ease; }
.cseg.on{ background:var(--hay-orange); color:#fff; box-shadow:0 4px 12px -3px rgba(241,90,12,.55); }
.cseg:not(.on):hover{ color:var(--hay-orange); }
.cflag{ width:17px; height:12px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); flex:none; display:inline-block; }

/* ---- OpenCart integration ------------------------------------------------ */
/* Neutralise Bootstrap alert container position clash with the fixed header */
#alert{ z-index:2000; }
/* Toasts from add-to-cart etc. */
.alert{ border-radius:4px; }

/* ---- Bootstrap primitives, on-brand -------------------------------------- *
   Restyles the default OpenCart/Bootstrap components so pages we do NOT fully
   rewrite (checkout, account sub-pages) still read as the HayWay brand.        */
.hay-page, main#checkout-cart, main#account-account, main .container,
#checkout-checkout, #account-login, #account-register, #account-account { color:#1c3f24; }

.btn-primary{ background:var(--hay-orange); border-color:var(--hay-orange); color:#fff; font-weight:600; letter-spacing:.02em; border-radius:3px; }
.btn-primary:hover, .btn-primary:focus{ background:var(--hay-orange-dk); border-color:var(--hay-orange-dk); color:#fff; }
.btn-secondary{ background:var(--hay-green); border-color:var(--hay-green); border-radius:3px; }
.btn-secondary:hover{ background:var(--hay-green-ink); border-color:var(--hay-green-ink); }
.btn-light{ border:1px solid rgba(30,74,41,.2); border-radius:3px; color:var(--hay-green); }
.btn-light:hover{ background:#eef3ec; color:var(--hay-green); }
.btn-lg{ padding:14px 22px; }

.form-control, .form-select{ border:1px solid rgba(30,74,41,.2); border-radius:3px; padding:11px 14px; color:#1c3f24; }
.form-control:focus, .form-select:focus{ border-color:var(--hay-green); box-shadow:0 0 0 3px rgba(30,74,41,.12); }
.form-label{ font-size:12.5px; font-weight:600; color:#3a4a38; }
.input-group-text{ background:#eef3ec; border-color:rgba(30,74,41,.2); color:#3a4a38; }

a{ color:var(--hay-green); }
a:hover{ color:var(--hay-orange); }

/* Breadcrumb — subtle on-brand bar (replaces Bootstrap slashes) */
.breadcrumb{ --bs-breadcrumb-divider:'›'; font-size:12px; letter-spacing:.01em; padding:0; margin:0 0 20px; list-style:none; display:flex; flex-wrap:wrap; }
.breadcrumb-item{ color:var(--hay-text-mut); }
.breadcrumb-item a{ color:var(--hay-text-mut); text-decoration:none; }
.breadcrumb-item a:hover{ color:var(--hay-orange); }
.breadcrumb-item + .breadcrumb-item::before{ content:var(--bs-breadcrumb-divider); color:rgba(30,74,41,.35); padding:0 9px; }
.breadcrumb-item:last-child, .breadcrumb-item.active{ color:var(--hay-green-ink); font-weight:600; }

/* Centered add-to-cart notification */
#hay-notify{ position:fixed; top:88px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.hay-notify{ pointer-events:auto; display:flex; align-items:center; gap:13px; background:var(--hay-green);
  color:var(--hay-cream-warm); padding:14px 16px 14px 18px; border-radius:7px;
  box-shadow:0 20px 44px -16px rgba(20,40,15,.55); font-size:14px; font-weight:600; max-width:92vw;
  opacity:0; transform:translateY(-14px); transition:opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1); }
.hay-notify.in{ opacity:1; transform:none; }
.hay-notify.err{ background:#a83b28; }
.hay-notify-ic{ color:var(--hay-orange-lt); font-size:22px; }
.hay-notify.err .hay-notify-ic{ color:#ffd8cd; }
.hay-notify-msg{ line-height:1.3; }
.hay-notify-btn{ background:var(--hay-orange); color:#fff; padding:8px 14px; border-radius:3px;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.hay-notify-btn:hover{ background:var(--hay-orange-dk); color:#fff; }
.hay-notify-x{ cursor:pointer; opacity:.65; font-size:18px; }
.hay-notify-x:hover{ opacity:1; }

/* Cart line + summary helpers */
.hay-cart-line{ display:flex; gap:16px; align-items:center; padding:18px; border-bottom:1px solid rgba(30,74,41,.1); }
.hay-cart-line:last-child{ border-bottom:none; }
.hay-qtybox{ display:flex; align-items:center; border:1px solid rgba(30,74,41,.2); border-radius:3px; }
.hay-qtybox input{ width:38px; text-align:center; font-weight:700; border:none; outline:none; background:transparent; font-family:'Archivo',sans-serif; }
.hay-qtybox button{ background:none; border:none; padding:8px 12px; color:#7c8a74; font-size:16px; cursor:pointer; }
.hay-qtybox button:hover{ color:var(--hay-orange); }
.hay-cart-rm{ background:none; border:none; color:#a7b3a0; display:flex; cursor:pointer; padding:4px; }
.hay-cart-rm:hover{ color:var(--hay-orange); }

/* Document pages (Terms / Privacy) */
.hay-doc-body h2{ font-family:'Archivo Expanded',sans-serif; font-weight:600; font-size:20px; color:var(--hay-green-ink); margin:34px 0 10px; }
.hay-doc-body > p:first-child{ color:var(--hay-text-mut); font-size:14px; }
.hay-doc-body p{ margin:0 0 22px; }
.hay-doc-body ul, .hay-doc-body ol{ margin:0 0 22px; padding-left:22px; }
.hay-doc-body li{ margin-bottom:6px; }
.hay-doc-body a{ color:var(--hay-orange); }

/* Stacked account forms (register etc.) */
.hay-form-stack fieldset{ border:none; padding:0; margin:0; }
.hay-form-stack legend{ display:none; }
.hay-form-stack .row.mb-3{ display:block; margin-bottom:16px; }
.hay-form-stack .col-form-label{ display:block; width:100%; text-align:left; padding:0 0 6px; font-size:12.5px; font-weight:600; color:#3a4a38; }
.hay-form-stack .form-control, .hay-form-stack .form-select{ max-width:100%; width:100%; }

/* Account dashboard cards */
.hay-acc-card{ display:flex; align-items:center; gap:14px; padding:20px; border:1px solid var(--hay-border);
  border-radius:5px; background:#fff; color:#1c3f24; text-decoration:none; font-weight:600; font-size:15px;
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease; }
.hay-acc-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -26px rgba(30,50,20,.4);
  border-color:rgba(30,74,41,.25); color:#1c3f24; }
.hay-acc-card .ms{ font-size:26px; color:var(--hay-orange); }

.card{ border:1px solid var(--hay-border); border-radius:5px; }
.card-header{ background:#eef3ec; font-family:'Archivo Expanded',sans-serif; font-weight:600; color:#1c3f24; }
.table > :not(caption) > * > *{ padding:.7rem .75rem; }
.nav-tabs .nav-link{ color:#556552; }
.nav-tabs .nav-link.active{ color:var(--hay-green); border-bottom-color:var(--hay-orange); font-weight:600; }
.page-link{ color:var(--hay-green); }
.page-item.active .page-link{ background:var(--hay-green); border-color:var(--hay-green); }
.alert-success{ background:#eef3ec; border-color:rgba(30,74,41,.2); color:var(--hay-green-ink); }
.price-new, h2 .price-new{ color:var(--hay-green-ink); font-family:'Archivo Expanded',sans-serif; font-weight:700; }
.list-group-item.active{ background:var(--hay-green); border-color:var(--hay-green); }

/* Give native (non-rewritten) content pages breathing room under the fixed header */
main .container, #checkout-cart, #checkout-checkout, #account-login, #account-register,
#account-account, #information-information, #product-search { padding-top:24px; padding-bottom:64px; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1300px){
  .herowrap{ padding-left:82px !important; }
}
@media (max-width:1024px){
  .hay-grid-3{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:760px){
  /* Bezpiecznik: nic nie może wywołać poziomego przewijania (biały pas z prawej). Realne
     przyczyny są naprawione niżej; clip nie tworzy scrollowalnego kontenera (nie psuje sticky). */
  html, body{ overflow-x:clip; }
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .hay-grid-3, .hay-grid-2{ grid-template-columns:1fr !important; }
  main h1{ font-size:28px !important; text-wrap:balance; }
  main h2{ font-size:23px !important; text-wrap:balance; }
  .hdr .hdrinner{ padding:12px 18px !important; }
  .navi{ display:none !important; }
  .mburger{ display:flex !important; align-items:center; }
  /* Hero: treść wycentrowana w pionie (koniec „napisy na samej górze, niżej pusto"). Górny padding
     odsuwa od przyklejonego nagłówka, lewy (46px) robi miejsce na pionowy napis. */
  .hero{ height:auto !important; min-height:88vh; }
  .herowrap{ height:auto !important; min-height:88vh; box-sizing:border-box; justify-content:center;
    padding:calc(var(--hay-hdr-h, 110px) + 10px) 18px 42px 46px !important; }
  /* Pionowy napis (EST · DOLINA ARARAT) zostaje — mniejszy, zaczyna się pod nagłówkiem, a treść
     hero ma lewy margines 46px, więc nic na nic nie nachodzi. */
  [style*="vertical-rl"]{ left:13px !important; top:calc(var(--hay-hdr-h, 110px) + 22px) !important;
    font-size:9px !important; letter-spacing:.3em !important; }
  /* Dymki (#alert, np. „Zapisano adres") — na telefonie pełna szerokość pod nagłówkiem, nie
     przyklejone do prawego górnego rogu. */
  #alert{ left:10px !important; right:10px !important; top:calc(var(--hay-hdr-h, 64px) + 8px) !important; padding:0 !important; }
  #alert .alert{ width:100%; font-size:13px; border-radius:8px; box-shadow:0 12px 30px -14px rgba(12,24,10,.45); }
  /* Kolaż w sekcji „Nasz produkt": na desktopie ma sztywne 500px pod 2 kolumny; na mobile
     musi rosnąć z treścią, inaczej obrazki wylewają się i tekst ląduje na zdjęciu sadu. */
  .pfmedia{ height:auto !important; }
  .pfmedia > .zoomwrap{ height:280px; }
  .pfmedia > div{ grid-template-columns:1fr 1fr !important; grid-template-rows:auto !important; }
  .pfmedia > div .zoomwrap{ height:140px; }
  .uspbar{ position:static !important; background:#1e4a29 !important; backdrop-filter:none !important; }
  .uspgrid{ grid-template-columns:1fr 1fr !important; }
  .uspgrid > div{ border-right:none !important; border-bottom:1px solid rgba(255,220,180,.14); }
  main img{ max-width:100%; }
  /* Stopka: JEDNA kolumna. Przy dwóch kolumna z newsletterem ma min. 225px i wystawała 5px za
     ekran — to było źródło poziomego przewijania na KAŻDEJ podstronie. */
  .hay-footer-grid{ grid-template-columns:1fr !important; gap:26px !important; }
  .hay-footer-grid > div{ min-width:0; }
  .hay-footer-grid p{ max-width:none !important; }
  .hay-footer-grid form{ max-width:340px; }
  /* Pas prawny na dole: trzy linki obok siebie łamały się po 2 linie — układamy w kolumnę. */
  .hay-footer > div:last-child{ flex-direction:column; gap:10px; }
  .hay-footer > div:last-child span{ flex-wrap:wrap; }
  /* Koszyk: linia produktu w 2 rzędach — (1) zdjęcie + pełny tytuł, (2) ilość + cena + usuń.
     Desktopowy jeden rząd ściskał tytuł do 59px, stepper nachodził na tekst, a cena łamała
     się na "240" / "zł". */
  .hay-cart-line{ flex-wrap:wrap; row-gap:12px; }
  .hay-cart-line > div[style*="flex:1"]{ flex:1 1 calc(100% - 96px) !important; }
  .hay-cart-line > div[style*="width:92px"]{ width:auto !important; margin-left:auto; white-space:nowrap; }
  .hay-hdr-switch{ display:none; }
}
/* Tablet only — na telefonie (≤760px) stopka jest JEDNOkolumnowa (reguła wyżej); bez dolnego
   ograniczenia ta reguła stała później w pliku i nadpisywała mobilną, wciskając 2 kolumny. */
@media (min-width:761px) and (max-width:1024px){
  .hay-footer-grid{ grid-template-columns:1fr 1fr !important; }
}

/* Checkout method options — inline & visible (replaces OpenCart's "Choose" button + modal) */
.hay-methods{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.hay-methods-hint{ font-size:13px; color:#6b7d6e; padding:6px 2px; }
.hay-method{ display:flex; align-items:center; gap:12px; border:1.5px solid rgba(30,74,41,.16); border-radius:8px; padding:12px 14px; cursor:pointer; transition:border-color .15s ease, background .15s ease; margin:0; }
.hay-method:hover{ border-color:#ff9838; }
.hay-method input[type="radio"]{ accent-color:#f15a0c; width:18px; height:18px; flex:none; margin:0; }
.hay-method:has(input:checked){ border-color:#f15a0c; background:rgba(241,90,12,.05); }
.hay-method-name{ flex:1; font-weight:600; color:#1c3f24; }
.hay-method-price{ font-weight:700; color:#f15a0c; white-space:nowrap; }
/* Checkout method dropdowns (shipping + payment) — clean, readable, on-brand. */
.hay-select{ width:100%; font-size:15px; font-weight:600; color:#1c3f24; background-color:#fff; border:1.5px solid rgba(30,74,41,.22); border-radius:8px; padding:12px 40px 12px 14px; line-height:1.3; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e4a29'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; transition:border-color .15s ease, box-shadow .15s ease; }
.hay-select:hover{ border-color:#ff9838; }
.hay-select:focus{ outline:none; border-color:#f15a0c; box-shadow:0 0 0 3px rgba(241,90,12,.14); }
.hay-select:disabled{ opacity:.55; cursor:default; background-color:#f6f6f1; }
.hay-select option{ font-weight:600; color:#1c3f24; }

/* ===== Account — bespoke layout (reference TSIRANI) ===== */
.hay-account{ max-width:1100px !important; margin-left:auto !important; margin-right:auto !important; padding:40px 32px 90px !important; }
.hay-acc-head{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.hay-acc-avatar{ width:56px; height:56px; border-radius:50%; background:var(--hay-green); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:22px; flex:none; }
.hay-acc-hi{ font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:26px; color:#1c3f24; margin:0; line-height:1.15; }
.hay-acc-sub{ font-size:13.5px; color:#7c8a74; margin-top:3px; }
.hay-acc-grid{ display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:start; }
.hay-acc-nav{ border:1px solid var(--hay-border); border-radius:5px; overflow:hidden; background:#fff; font-size:14px; }
.hay-acc-main{ min-width:0; }
.hay-acc-h1{ font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:26px; color:#1c3f24; margin:0 0 20px; }
.hay-card{ border:1px solid var(--hay-border); border-radius:5px; padding:28px; background:#fff; margin-bottom:16px; }
.hay-card-title{ font-family:'Archivo Expanded',sans-serif; font-weight:600; font-size:18px; color:#1c3f24; margin:0 0 4px; }
.hay-card-sub{ font-size:13px; color:#7c8a74; margin:0 0 18px; }
.hay-stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.hay-stat{ border:1px solid var(--hay-border); border-radius:5px; padding:18px 20px; background:#fff; }
.hay-stat-n{ font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:26px; color:#1c3f24; }
.hay-stat-l{ font-size:12.5px; color:#7c8a74; margin-top:2px; }
.hay-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:100px; white-space:nowrap; }
.hay-pill .ms{ font-size:14px; }
.hay-pill-warn{ background:#fdeee4; color:#c2560f; }
.hay-pill-ok{ background:#e7f0e0; color:#3a6b2a; }
.hay-pill-mut{ background:#eef1ec; color:#586a51; }
.hay-order-card{ border:1px solid var(--hay-border); border-radius:5px; overflow:hidden; background:#fff; margin-bottom:14px; }
.hay-order-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid rgba(30,74,41,.1); flex-wrap:wrap; }
.hay-order-id{ font-family:'Archivo Expanded',sans-serif; font-weight:700; color:#1c3f24; font-size:15px; }
.hay-order-meta{ font-size:12.5px; color:#7c8a74; margin-top:2px; }
.hay-order-row{ display:flex; align-items:center; gap:14px; padding:14px 20px; }
.hay-order-actions{ display:flex; gap:10px; flex-wrap:wrap; padding:14px 20px; border-top:1px solid rgba(30,74,41,.08); }
.hay-order-actions .btnO, .hay-order-actions .btnG{ font-size:11.5px; padding:10px 16px; }
.hay-addr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.hay-addr-card{ position:relative; border:1px solid var(--hay-border); border-radius:5px; padding:20px; background:#fff; }
.hay-addr-card.def{ border-color:var(--hay-green); }
.hay-addr-badge{ position:absolute; top:14px; right:14px; background:#eef3ec; color:var(--hay-green); font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:100px; }
.hay-addr-name{ font-family:'Archivo Expanded',sans-serif; font-weight:600; font-size:15px; color:#1c3f24; margin-bottom:8px; }
.hay-addr-body{ font-size:13.5px; line-height:1.7; color:#586a51; }
.hay-addr-actions{ display:flex; gap:16px; margin-top:14px; font-size:12.5px; font-weight:600; }
.hay-table{ width:100%; border-collapse:collapse; font-size:14px; }
.hay-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:#7c8a74; font-weight:700; padding:11px 12px; border-bottom:1px solid var(--hay-border); }
.hay-table td{ padding:13px 12px; border-bottom:1px solid rgba(30,74,41,.08); color:#1c3f24; }
.hay-field{ display:grid; gap:6px; font-size:12.5px; font-weight:600; color:#3a4a38; }
.hay-form-grid{ display:grid; gap:16px; }
.hay-form-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hay-otrack{ display:flex; align-items:flex-start; background:#fbfcfa; padding:18px 20px; border-top:1px solid rgba(30,74,41,.08); }
.hay-otrack-step{ flex:1; text-align:center; font-size:11px; color:#586a51; }
.hay-otrack-step .ms{ font-size:22px; display:block; margin:0 auto 4px; }
.hay-empty{ border:1px solid var(--hay-border); border-radius:5px; padding:56px; text-align:center; background:#fff; color:#586a51; }
.hay-empty .ms{ font-size:44px; color:#a7bd99; }
@media (max-width:760px){
  .hay-acc-grid{ grid-template-columns:1fr; }
  .hay-stat-grid{ grid-template-columns:1fr; }
  .hay-addr-grid{ grid-template-columns:1fr; }
  .hay-form-2{ grid-template-columns:1fr; }
}

/* Checkout confirm button (from the payment method templates) — on-brand orange */
#checkout-payment .btn-primary, #checkout-confirm #button-confirm{
  width:100%; background:var(--hay-orange) !important; border:none !important; color:#fff !important;
  padding:14px !important; border-radius:3px !important; font-size:12.5px !important; font-weight:700 !important;
  letter-spacing:.05em; text-transform:uppercase;
}
#checkout-payment .btn-primary:hover, #checkout-confirm #button-confirm:hover{ background:var(--hay-orange-dk) !important; }
#checkout-payment .text-end{ text-align:stretch !important; }

/* Checkout guest/register form — match the branded .fieldi look */
#checkout-checkout .form-control, #checkout-checkout .form-select{
  padding:13px 15px; border:1px solid rgba(30,74,41,.2); border-radius:3px; font-size:15px; color:#1c3f24; background:#fff;
}
#checkout-checkout .form-control:focus, #checkout-checkout .form-select:focus{ border-color:var(--hay-green); box-shadow:0 0 0 3px rgba(30,74,41,.12); }
#checkout-checkout .col-form-label, #checkout-checkout .form-label, #checkout-checkout legend{ font-size:12.5px; font-weight:600; color:#3a4a38; }
#checkout-checkout legend{ font-family:'Archivo Expanded',sans-serif; font-size:15px; color:#1c3f24; border:none; margin-top:6px; }

/* Order tracking timeline (Orders panel) — horizontal inline, like the reference */
.hay-track{ display:flex; align-items:center; padding:16px 20px; background:#fbfcfa; border-top:1px solid rgba(30,74,41,.08); }
.hay-track-step{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12px; font-weight:600; color:#a7b3a0; }
.hay-track-step .ms{ font-size:19px; color:#c4cfbe; }
.hay-track-step.done{ color:#586a51; } .hay-track-step.done .ms{ color:#1e4a29; }
.hay-track-step.cur{ color:#f15a0c; } .hay-track-step.cur .ms{ color:#f15a0c; }
.hay-track-bar{ flex:1; min-width:16px; height:2px; background:rgba(30,74,41,.15); margin:0 8px; }
.hay-track-bar.done{ background:#1e4a29; }
.hay-track-bar.cur{ background:var(--hay-orange); }
.hay-track-cancel{ padding:16px 20px; background:#fbfcfa; border-top:1px solid rgba(30,74,41,.08); font-size:12px; font-weight:700; color:#c2560f; text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:6px; }
@media (max-width:560px){ .hay-track{ flex-wrap:wrap; gap:6px 10px; } .hay-track-bar{ display:none; } }

/* Checkout step indicator (Dane -> Dostawa -> Płatność) */
.hay-steps{ display:flex; align-items:center; max-width:560px; margin:0 0 30px; }
.hay-step{ flex:1; display:flex; flex-direction:column; align-items:center; position:relative; font-size:12.5px; font-weight:600; color:#a7b3a0; z-index:0; }
.hay-step-n{ width:32px; height:32px; border-radius:50%; background:#eef1ec; color:#8a9a83; display:flex; align-items:center; justify-content:center; font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:14px; margin-bottom:7px; position:relative; z-index:1; }
.hay-step::before{ content:''; position:absolute; top:16px; right:50%; width:100%; height:2px; background:rgba(30,74,41,.14); z-index:0; }
.hay-step:first-child::before{ display:none; }
.hay-step.active{ color:#1c3f24; } .hay-step.active .hay-step-n{ background:var(--hay-orange); color:#fff; }
.hay-step.done{ color:#1e4a29; } .hay-step.done .hay-step-n{ background:var(--hay-green); color:#fff; }
.hay-step.done::before, .hay-step.active::before{ background:var(--hay-green); }
.hay-step.done .hay-step-n{ font-size:0; }
.hay-step.done .hay-step-n::after{ content:'check'; font-family:'Material Symbols Outlined'; font-size:19px; line-height:1; -webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }

/* Checkout — improved single page with a real, gated path (Dane → Dostawa → Płatność) */
.hay-checkout{ max-width:1100px; margin:0 auto; padding:40px 32px 90px; }
.hay-checkout-h1{ font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:32px; margin:0 0 20px; color:#1c3f24; }
.hay-co-grid{ display:grid; grid-template-columns:1fr 370px; gap:40px; align-items:start; }
.hay-co-main{ min-width:0; }
.hay-co-aside{ position:sticky; top:96px; }
.hay-co-summary{ border:1px solid rgba(30,74,41,.14); border-radius:5px; padding:22px; background:#fff; }
.hay-costep{ background:#fff; border:1px solid rgba(30,74,41,.14); border-radius:8px; padding:20px 24px 14px; margin-bottom:16px; }
.hay-costep[hidden]{ display:none; }
.hay-costep > div + div{ margin-top:4px; }
.hay-costep legend{ margin-top:2px !important; }
/* --- Czytelna ścieżka kasy: numerowane nagłówki sekcji + stany (zablokowane / zapisane) --- */
.hay-costep-head{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.hay-costep-n{ width:30px; height:30px; border-radius:50%; background:var(--hay-orange); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:14px; flex:0 0 auto; }
.hay-costep-t{ font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:17px; color:#1c3f24; flex:1; min-width:0; }
.hay-costep-state{ font-size:11px; font-weight:700; color:#a7b3a0; letter-spacing:.04em; text-transform:uppercase; text-align:right; }
.hay-costep-state.ok{ color:#1e7a37; }
.hay-costep-state.warn{ color:#c0392b; text-transform:none; letter-spacing:0; font-size:12px; }
/* Brakujące wymagane pole — czerwona ramka, żeby było widać CO blokuje przejście dalej. */
.hay-miss{ border-color:#d9534f !important; background:#fff6f5 !important; }
/* Podpowiedź formatu kodu pocztowego — przyklejona bezpośrednio pod polem, którego dotyczy. */
.hay-pc-hint{ font-size:12px; color:#c0392b; margin-top:5px; font-weight:600; }
.hay-costep-state.ok::before{ content:'check_circle'; font-family:'Material Symbols Outlined'; font-size:15px; vertical-align:-3px; margin-right:4px; font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
.hay-costep.hay-done{ border-color:rgba(30,74,41,.32); }
.hay-costep.hay-done > .hay-costep-head .hay-costep-n{ background:var(--hay-green); font-size:0; }
.hay-costep.hay-done > .hay-costep-head .hay-costep-n::after{ content:'check'; font-family:'Material Symbols Outlined'; font-size:18px; line-height:1; font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; }
.hay-costep.hay-locked > .hay-costep-head .hay-costep-n{ background:#c9d3c4; }
.hay-costep.hay-locked .hay-costep-body{ opacity:.4; pointer-events:none; filter:saturate(.5); }
/* Tytuł sekcji jest w nagłówku — legenda modułu w krokach 2-3 by go dublowała. */
.hay-costep[data-step="2"] .hay-costep-body legend, .hay-costep[data-step="3"] .hay-costep-body legend{ display:none; }
/* Auto-zapis zastępuje ręczne „Dalej” — przyciski zapisu sekcji są niepotrzebne. */
#checkout-checkout #button-register, #checkout-checkout #button-shipping-address, #checkout-checkout #button-payment-address{ display:none !important; }
/* Na kasie sukces potwierdza status na nagłówku sekcji — dymki sukcesu wyłączone (błędy zostają). */
html.hay-co #alert .alert-success{ display:none !important; }
@media (max-width:860px){
  .hay-checkout{ padding:26px 16px 70px; }
  .hay-co-grid{ grid-template-columns:1fr; gap:22px; }
  /* Na mobile podsumowanie (z przyciskiem zamówienia) ma iść POD krokami — najpierw wypełnij
     dane/dostawę/płatność + zgodę, dopiero potem podsumowanie i "Zamawiam". order:0 = kolejność
     źródłowa (kroki są pierwsze). (Wcześniej order:-1 wrzucał podsumowanie nad formularz.) */
  .hay-co-aside{ position:static; order:0; margin-top:6px; }
}