/* N2X6 site structure: category pages, filters, ABV badge, home entries. */
.filter-item { display: contents; }
.filter-item.is-hidden { display: none; }

.abv-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  min-width: 46px; height: 28px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--black); border-radius: 14px;
  background: var(--biege); color: var(--black);
  font-family: Bebas Book, Arial, sans-serif; font-size: 18px; line-height: 1; letter-spacing: .06em;
}

.filter-bar {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px var(--h-paddings); background: var(--biege);
  border-top: 1px solid var(--black); border-bottom: 1px solid var(--black);
}
.filter-group { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filter-group::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 40px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--black); border-radius: 999px; background: transparent; color: var(--black);
  font-family: Inter, sans-serif; font-size: 14px; letter-spacing: .04em; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--black); color: var(--white); }
.filter-select-wrap { display: flex; align-items: center; gap: 12px; font-family: Inter, sans-serif; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.filter-select { min-height: 40px; max-width: 100%; padding: 0 12px; border: 1px solid var(--black); border-radius: 0; background: var(--white); color: var(--black); font-family: Inter, sans-serif; font-size: 14px; }
.filter-count { margin: 0; font-family: Inter, sans-serif; font-size: 13px; opacity: .6; }
.filter-empty { padding: 48px var(--h-paddings); text-align: center; font-family: Libre, serif; }
@media (min-width: 992px) {
  .filter-group { flex-wrap: wrap; overflow: visible; }
  .filter-bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
  .filter-count { margin-left: auto; }
}


.zero-kegs { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px var(--h-paddings); background: var(--biege); border: 1px solid var(--black); }
.zero-kegs h2 { margin: 0; }

/* Home */
.home-wineries-cta { display: flex; justify-content: center; padding: 32px var(--h-paddings); background: var(--biege); }

@media (max-width: 767px) {
  .footer-nav { flex-wrap: wrap; justify-content: flex-start; }
}

/* Header: eight items. Mobile-only entries stay out of the desktop row; the logo moves left of the menu on desktop. */
@media (min-width: 992px) {
  .nav-mobile-only { display: none; }
  .navbar-menu { grid-column-gap: 20px; }
  .navbar-logo-c { justify-content: flex-start; padding-left: 72px; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  .navbar-menu { grid-column-gap: 14px; letter-spacing: .06em; }
}

.abv-badge ~ .product-tile-title { box-sizing: border-box; padding-right: 72px; }
@media (min-width: 992px) and (max-width: 1139px) {
  .navbar-logo-c { display: none; }
}

/* Home collection sections: same grid placement as the Webflow export (title row, 3 tiles, catalog tile). */
.home-collection > .product-grid-title { grid-column: span 4; }
.home-collection > .collection-section { grid-column: span 3; }
@media (max-width: 991px) {
  .home-collection > .product-grid-title, .home-collection > .collection-section, .home-collection > .product-tile-c { grid-column: span 2; }
}
.product-tile .hover-vid { display: none; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.product-tile .hover-vid.is-on { display: block; }
.product-tile:has(.hover-vid.is-on) .product-tile-title, .product-tile:has(.hover-vid.is-on) .more-link { color: var(--white); }
@media (min-width: 991px) {
  .home-collection .collection-section .product-tile-c:nth-child(4) { display: none; }
}
@media (max-width: 991px) {
  /* Ten entries in the mobile menu must fit a phone screen; scroll if they still do not. */
  .navbar-menu { overflow-y: auto; padding-bottom: 40px; grid-row-gap: 0; }
  .navbar-menu .navbar-item { padding-top: 13px; padding-bottom: 13px; }
}


/* M3QK: 404 page, PL and EN side by side (stacked on phones). */
.notfound-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

@media screen and (max-width: 767px) {
  .notfound-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* L6KF: section heroes - title centred in the header band, clear of the logo/menu (no dark title glued under the logo). */
.hero-grid.collection > .hero-title { grid-column: 1 / -1; grid-row: 1; }
.hero-title { display: flex; align-items: center; justify-content: center; }
.section.hero.collection:has(.hero-title) { padding-top: 96px; padding-bottom: 32px; }
@media screen and (max-width: 767px) {
  .section.hero.collection:has(.hero-title) { padding-top: 96px; }
}

/* L6KF: product-page hero - the winery logo sits centred and entirely inside the band (Dal Din's square mark used to overflow below it). */
.section.hero.product .hero-grid._3-col > .relative { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.section.hero.product .hero-grid._3-col > .relative > div { display: flex; align-items: center; justify-content: center; max-height: 100%; }
.section.hero.product .hero-grid._3-col .img-100.catalog-img { width: auto; height: auto; max-width: 100%; max-height: 120px; }
.section.hero.product .hero-grid._3-col > .relative .collection-name-fallback { text-align: center; }
@media screen and (max-width: 767px) {
  .section.hero.product { height: 190px; }
  .section.hero.product .hero-grid._3-col .img-100.catalog-img { max-height: 84px; max-width: 60vw; }
}

/* L6KF: the PL/EN list is closed from the first paint (it used to show until interactions.js ran, which is late on image-heavy product pages); still opens on hover/focus without JS. */
@media (min-width: 768px) {
  .navbar:not([data-interactive]) .lang-options { opacity: 0; visibility: hidden; }
  .navbar:not([data-interactive]) .lang-switch:hover .lang-options,
  .navbar:not([data-interactive]) .lang-switch:focus-within .lang-options { opacity: 1; visibility: visible; }
}

/* L6KF p15: header. Inner pages: logo centred + hamburger at every width. Home: full one-line menu while it fits (>=1140), hamburger below. */
.navbar-home .navbar-item { white-space: nowrap; }
@media (min-width: 768px) {
  .navbar:not(.navbar-home) { position: absolute; }
  .navbar:not(.navbar-home) .container { height: 100%; position: static; }
  .navbar:not(.navbar-home) .navbar-logo-c { display: flex; justify-content: center; padding-left: 0; }
  .navbar:not(.navbar-home) .menu-button { display: block; float: right; background-image: url('../images/menu.svg'); background-position: 50%; background-repeat: no-repeat; background-size: auto; width: 48px; height: 100%; padding: 0; position: relative; z-index: 2; }
  .navbar:not(.navbar-home) .menu-button.w--open { background-image: url('../images/menu-close.svg'); }
  .navbar:not(.navbar-home) .navbar-menu { display: flex; flex-flow: column; justify-content: flex-start; align-items: center; background-color: var(--black); position: absolute; top: 100%; left: 0; right: 0; float: none; width: 100%; height: calc(100dvh - 64px); overflow-y: auto; padding-bottom: 40px; grid-row-gap: 0; letter-spacing: .1em; visibility: hidden; transform: translateY(calc(-100% - 64px)); transition: transform 400ms ease, visibility 0s linear 400ms; }
  .navbar:not(.navbar-home)[data-menu-open] .navbar-menu { visibility: visible; transform: translateY(0); transition-delay: 0s; }
  .navbar:not(.navbar-home) .navbar-item { text-align: center; padding-top: 13px; padding-bottom: 13px; }
  .navbar:not(.navbar-home) .nav-mobile-only { display: block; }
  .navbar:not(.navbar-home) .lang-switch { position: relative; top: auto; bottom: 20px; display: flex; flex-flow: column; align-items: center; }
  .navbar:not(.navbar-home) .lang-curr { display: none; }
  .navbar:not(.navbar-home) .lang-options { opacity: 1 !important; visibility: visible !important; flex-flow: row; justify-content: center; align-items: center; grid-column-gap: 20px; border-top: 1px solid var(--white); width: 100%; margin-top: 40px; }
  .navbar:not(.navbar-home) .navbar-item.lang { margin-left: 0; margin-right: 0; }
  html:not(.js) .navbar:not(.navbar-home):not([data-interactive]) { position: relative; background: var(--black); height: auto; }
  html:not(.js) .navbar:not(.navbar-home):not([data-interactive]) .navbar-menu { position: static; visibility: visible; transform: none; height: auto; }
  html:not(.js) .navbar:not(.navbar-home):not([data-interactive]) .menu-button { display: none; }
}
@media (max-width: 767px) {
  .navbar:not(.navbar-home) { position: absolute; }
  .navbar:not(.navbar-home) .container { height: 100%; position: static; }
  .navbar:not(.navbar-home) .navbar-logo-c { display: flex; justify-content: center; padding-left: 0; }
  .navbar:not(.navbar-home) .menu-button { display: block; float: right; background-image: url('../images/menu.svg'); background-position: 50%; background-repeat: no-repeat; background-size: auto; width: 48px; height: 100%; padding: 0; position: relative; z-index: 2; }
  .navbar:not(.navbar-home) .menu-button.w--open { background-image: url('../images/menu-close.svg'); }
  .navbar:not(.navbar-home) .navbar-menu { display: flex; flex-flow: column; justify-content: flex-start; align-items: center; background-color: var(--black); position: absolute; top: 100%; left: 0; right: 0; float: none; width: 100%; height: calc(100dvh - 64px); overflow-y: auto; padding-bottom: 40px; grid-row-gap: 0; letter-spacing: .1em; visibility: hidden; transform: translateY(calc(-100% - 64px)); transition: transform 400ms ease, visibility 0s linear 400ms; }
  .navbar:not(.navbar-home)[data-menu-open] .navbar-menu { visibility: visible; transform: translateY(0); transition-delay: 0s; }
  .navbar:not(.navbar-home) .navbar-item { text-align: center; padding-top: 13px; padding-bottom: 13px; }
  .navbar:not(.navbar-home) .nav-mobile-only { display: block; }
  .navbar:not(.navbar-home) .lang-switch { position: relative; top: auto; bottom: 20px; display: flex; flex-flow: column; align-items: center; }
  .navbar:not(.navbar-home) .lang-curr { display: none; }
  .navbar:not(.navbar-home) .lang-options { opacity: 1 !important; visibility: visible !important; flex-flow: row; justify-content: center; align-items: center; grid-column-gap: 20px; border-top: 1px solid var(--white); width: 100%; margin-top: 40px; }
  .navbar:not(.navbar-home) .navbar-item.lang { margin-left: 0; margin-right: 0; }
  html:not(.js) .navbar:not(.navbar-home):not([data-interactive]) { position: relative; background: var(--black); height: auto; }
  html:not(.js) .navbar:not(.navbar-home):not([data-interactive]) .navbar-menu { position: static; visibility: visible; transform: none; height: auto; }
  html:not(.js) .navbar:not(.navbar-home):not([data-interactive]) .menu-button { display: none; }
}
@media (max-width: 1139px) {
  .navbar.navbar-home { position: absolute; }
  .navbar.navbar-home .container { height: 100%; position: static; }
  .navbar.navbar-home .navbar-logo-c { display: flex; justify-content: center; padding-left: 0; }
  .navbar.navbar-home .menu-button { display: block; float: right; background-image: url('../images/menu.svg'); background-position: 50%; background-repeat: no-repeat; background-size: auto; width: 48px; height: 100%; padding: 0; position: relative; z-index: 2; }
  .navbar.navbar-home .menu-button.w--open { background-image: url('../images/menu-close.svg'); }
  .navbar.navbar-home .navbar-menu { display: flex; flex-flow: column; justify-content: flex-start; align-items: center; background-color: var(--black); position: absolute; top: 100%; left: 0; right: 0; float: none; width: 100%; height: calc(100dvh - 64px); overflow-y: auto; padding-bottom: 40px; grid-row-gap: 0; letter-spacing: .1em; visibility: hidden; transform: translateY(calc(-100% - 64px)); transition: transform 400ms ease, visibility 0s linear 400ms; }
  .navbar.navbar-home[data-menu-open] .navbar-menu { visibility: visible; transform: translateY(0); transition-delay: 0s; }
  .navbar.navbar-home .navbar-item { text-align: center; padding-top: 13px; padding-bottom: 13px; }
  .navbar.navbar-home .nav-mobile-only { display: block; }
  .navbar.navbar-home .lang-switch { position: relative; top: auto; bottom: 20px; display: flex; flex-flow: column; align-items: center; }
  .navbar.navbar-home .lang-curr { display: none; }
  .navbar.navbar-home .lang-options { opacity: 1 !important; visibility: visible !important; flex-flow: row; justify-content: center; align-items: center; grid-column-gap: 20px; border-top: 1px solid var(--white); width: 100%; margin-top: 40px; }
  .navbar.navbar-home .navbar-item.lang { margin-left: 0; margin-right: 0; }
  html:not(.js) .navbar.navbar-home:not([data-interactive]) { position: relative; background: var(--black); height: auto; }
  html:not(.js) .navbar.navbar-home:not([data-interactive]) .navbar-menu { position: static; visibility: visible; transform: none; height: auto; }
  html:not(.js) .navbar.navbar-home:not([data-interactive]) .menu-button { display: none; }
}

/* T9VR: cells of the two-column product/O nas grid always fill their grid row (no black gaps at 720-1000 px); O nas photos (4:5) cover their cell. */
.product-page-grid { align-items: stretch; }
.product-page-grid > * { min-width: 0; }
.product-page-grid > .product-description, .product-page-grid > .product-gallery { align-self: stretch; }
.product-page-grid > .product-description > .product-description-mod { flex: 1 1 auto; }
.product-page-grid > .product-description > .biege-bg:has(> .image-about) { position: relative; flex: 1 1 auto; width: 100%; aspect-ratio: 4 / 5; min-height: 0; min-width: 0; }
.image-about { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.nav-sep { height: 1px; width: 64px; background: rgba(255, 255, 255, .35); margin: 6px 0; }
/* T9VR: long card names must never widen the product grid (overflow at ~1024 px). */
.product-grid > *, .product-tile-c { min-width: 0; }
.product-tile-title, .more-tile__name { overflow-wrap: anywhere; }
/* T9VR: Opakowania hero - phone video over the same-framed image; image only on desktop and with reduced motion. */
.nak-video { display: none; }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .nak-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
}
@media (min-width: 768px) { .section.hero.collection[data-collection="nakpack"] .hero-img { object-position: 88% 50%; } }

/* H4LG: owner SVG logos. One colour and one height per row, centred in their cells, no plates. */
.logo-row { --logo-h: 52px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--biege); border-top: 1px solid var(--black); }
.logo-row__item { position: relative; display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 28px 24px; box-sizing: border-box; overflow: hidden; transition: background-color .3s ease; }
/* grid lines live inside each tile, above its own background, so a hovered tile's background can never cover a neighbour's line */
.logo-row__item::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--black); pointer-events: none; }
.logo-row__item img { display: block; height: calc(var(--logo-h) * var(--k, 1)); width: auto; max-width: 100%; object-fit: contain; transition: transform .3s ease; }
/* Hover: only inside the tile - the cell and the grid lines never move; background 4% darker, logo 1.05x. No effect on phones / touch. */
@media (hover: hover) and (min-width: 768px) {
  .logo-row__item:hover, .logo-row__item:focus-visible { background-color: color-mix(in srgb, var(--biege) 96%, #000); }
  .logo-row__item:hover img, .logo-row__item:focus-visible img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .logo-row__item, .logo-row__item img { transition: none; } }
/* Vinco is a fine line drawing: thicken it a hair so it reads as black as the other logos. */
.logo-row__item[data-logo="vinco"] img { filter: drop-shadow(0 0 .3px #000) drop-shadow(0 0 .3px #000); }
@media (max-width: 991px) { .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .logo-row__item { min-height: 110px; padding: 20px 14px; } .logo-row { --logo-h: 40px; } }
.wineries-grid { display: flex; flex-wrap: wrap; justify-content: center; padding: 1px; background: var(--biege); }
.wineries-grid > * { flex: 0 0 25%; outline: 1px solid var(--black); outline-offset: -.5px; min-width: 0; box-sizing: border-box; }
@media (max-width: 991px) { .wineries-grid > * { flex-basis: 33.333%; } }
@media (max-width: 767px) { .wineries-grid > * { flex-basis: 50%; } }
.wineries-grid .collection-logo, .catalog-img-c .collection-logo { width: auto; max-width: 70%; height: 56px; object-fit: contain; }
.hero-logo { display: flex; align-items: center; justify-content: flex-start; }
.hero-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 120px; }
.section.hero.product .hero-grid._3-col .hero-logo { justify-content: center; }
.block-title { border-top: 1px solid var(--black); }
.block-title h2 { margin: 0; }
.product-producer { margin: 8px 0 16px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.product-producer a { color: inherit; }

/* H4LG: owner hero loop (Montesel). The still image is the poster; the video fades in over it. Light picture: soft dark veil so the white logo and menu read. */
.owner-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.owner-hero-video.is-playing { opacity: 1; }
.section.hero.collection[data-hero-light] > .hero-overlay { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .3) 100%); }
.catalog-img-c.is-light .overlay-black { opacity: .42; }

/* H4LG: the cookie banner grid had six columns for three cells - the empty ones showed as a dark square at the bottom right. */
@media (min-width: 768px) {
  .cookies-container .product-grid.cookies { grid-template-columns: 96px minmax(0, 1fr) 220px; max-width: 1100px; height: auto; }
}
/* Z4DB-02: the banner became visible on a first visit (it used to sit below the fold); on phones the six webflow columns squeezed the text, so stack it. */
@media (max-width: 767px) {
  .cookies-container .product-grid.cookies { grid-template-columns: minmax(0, 1fr); height: auto; max-height: calc(100vh - 24px); overflow-y: auto; }
  .cookies-container .biege-bg.center { padding: 16px var(--h-paddings); }
}

/* H4LG: Kegi menu item with sub-items (Kegi / Bag-in-Box / RTD). Desktop one-line menu: drop-down on hover or focus; hamburger menu: the sub-items sit under Kegi. */
.nav-group { position: relative; display: flex; flex-direction: column; align-items: center; }
.nav-sub { display: flex; flex-direction: column; align-items: center; }
.nav-sub__item { font-size: .86em; opacity: .8; padding-top: 6px !important; padding-bottom: 6px !important; }
@media (min-width: 1140px) {
  .navbar.navbar-home .nav-group { align-items: stretch; }
  .navbar.navbar-home .nav-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 150px; padding: 8px 14px; background: rgba(0, 0, 0, .86); opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 5; }
  .navbar.navbar-home .nav-group:hover .nav-sub, .navbar.navbar-home .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; }
  .navbar.navbar-home .nav-sub__item { white-space: nowrap; opacity: 1; font-size: 1em; }
}
@media (max-width: 1139px) { .nav-sub__item { padding-top: 5px !important; padding-bottom: 5px !important; } }

/* H4LG: footer - copyright, logo and menu in one row; legal links, social links and the company line centred below, links aligned like the menu. */
.footer-grid .footer-second-nav { grid-column: 1 / -1; flex-wrap: wrap; padding-top: 0; }
.footer-social { grid-column: 1 / -1; justify-content: center; }
.social-links { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.social-links a { display: inline-flex; width: 30px; height: 30px; color: inherit; opacity: .85; transition: opacity .2s; }
.social-links a:hover, .social-links a:focus-visible { opacity: 1; }
.social-links svg { width: 100%; height: 100%; }
.contact-social { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 0 72px; text-align: center; }
.contact-social p { margin: 0; }
.footer-company { grid-column: 1 / -1; margin: 0; text-align: center; opacity: .75; line-height: 1.5; }
.legal-text h2 { margin-top: 1.6em; }
.legal-updated { opacity: .65; }

/* H4LG: three machines / packaging models per row (no empty fourth cell); catalog button under the machines; large logo in the Draft Machine / Opakowania header. */
.product-grid.border.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .product-grid.border.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.catalog-below { display: flex; justify-content: center; padding: 40px var(--h-paddings); background: var(--biege); border: 1px solid var(--black); border-top: 0; }
.section.hero.collection[data-collection="draft-machine"] .hero-logo img, .section.hero.collection[data-collection="nakpack"] .hero-logo img { max-height: 230px; max-width: min(520px, 90%); }
@media (max-width: 767px) { .section.hero.collection[data-collection="draft-machine"] .hero-logo img, .section.hero.collection[data-collection="nakpack"] .hero-logo img { max-height: 120px; } }
.section.hero.collection[data-collection="draft-machine"] .hero-grid.collection > .relative, .section.hero.collection[data-collection="nakpack"] .hero-grid.collection > .relative { grid-column: 1 / -1; justify-self: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.block-logo-title { display: flex; align-items: center; gap: 16px; margin: 0; }
.block-logo { display: block; height: 36px; width: auto; }
.block-logo-title span { font-family: Bebas, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: 28px; line-height: 1; }
.wineries-grid .catalog-img-c { aspect-ratio: 16 / 10; min-height: 190px; border-radius: 0; }
.wineries-grid .product-tile-c, .wineries-grid .product-tile { display: flex; flex-direction: column; }

/* H4LG: hero cross - same lines as the live site, but pixel-snapped: a 1px box at a half-pixel position (odd window height / width) can be dropped by the GPU compositor next to the playing hero video, leaving only one line. Borders never vanish; round() keeps the position on whole pixels (older browsers keep 50%). */
.hero-overlay.line-h { top: round(down, 50%, 1px); height: 0; background: none; border-top: 1px solid var(--white); z-index: 1; }
.hero-overlay.line-v { left: round(down, 50%, 1px); width: 0; background: none; border-left: 1px solid var(--white); z-index: 1; }

/* H4LG: Winnice cards and winery headers - larger logos, soft darkening under the logo (35-45 %), no plates. */
.wineries-grid .catalog-img-c .collection-logo { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 60%; max-height: 45%; object-fit: contain; }
.wineries-grid .catalog-img-c .collection-logo.is-tall { height: 45%; max-width: 60%; }
.wineries-grid .catalog-img-c .overlay-black, .wineries-grid .catalog-img-c.is-light .overlay-black { opacity: 1; background-color: transparent; background-image: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .4) 35%, rgba(0, 0, 0, .18) 100%); }
.hero-logo { position: relative; }
/* R7FX: the darkening is clipped to the header so it cannot widen the page (was scrollWidth 415 at 375). */
.section.hero.collection { overflow-x: clip; }
.hero-logo::before { content: ""; position: absolute; inset: -36px -60px; background: radial-gradient(closest-side, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.hero-logo img { position: relative; max-height: 170px; }
@media (max-width: 767px) { .hero-logo img { max-height: 100px; } }

/* R7FX2: age gate on phones - the 800x400 two-column box clipped the text (overflow hidden, max-height 400px). One column, no photo (it was also the LCP element), text wraps and the gate scrolls if the screen is short. */
@media (max-width: 599px) {
  #ageBanner { overflow-y: auto; align-items: safe center; padding: 12px 0; box-sizing: border-box; }
  .product-grid._18-banner { grid-template-columns: 1fr; max-height: none; max-width: calc(100vw - 24px); height: auto; grid-template-rows: auto auto; align-content: start; margin: auto; overflow: visible; }
  .biege-bg._18-img { min-height: 0; display: flex; justify-content: center; align-items: center; padding: 12px 0 0; }
  ._18-img .img-100 { display: none; }
  ._18-text { color: var(--black); font-size: 3.5rem; line-height: 1.1; }
  .biege-bg._18-question { min-height: 0; gap: 20px; }
  .biege-bg._18-question .stack-ext { flex: none; }
  .biege-bg._18-question h2 { overflow-wrap: anywhere; }
}

/* R7FX3: home sections below the first screen are not rendered (and their lazy images not fetched) until they approach the viewport; "auto" remembers the real height after the first render. */
.section.hero ~ .section { content-visibility: auto; contain-intrinsic-size: auto 1400px; }