/* Project E — Nav Menu drawer. * * Same two rules as the minicart sheet: * * 1. No literal brand colour. Everything paints from the custom properties the * PHP writes onto the drawer root, so the admin's four pickers restyle the * whole thing and an optimiser stripping the inline block still leaves a * presentable menu (the fallbacks below). * 2. The scoped reset is not optional — the drawer is injected into a themed * page, and an Elementor kit styling bare `button`/`a` will otherwise decide * the padding, colour and border-radius of every row. The reset carries * !important at zero specificity (:where), so the theme loses to it and our * own component rules below still win against the reset. */ .pe-nm, .pe-nm-toggle { --pe-nm-w: 380px; --pe-nm-bg: #ffffff; --pe-nm-ink: #16110f; --pe-nm-accent: #111111; --pe-nm-line: #ececec; --pe-nm-row: 54px; --pe-nm-fs: 17px; --pe-nm-img: 40px; --pe-nm-ink-2: #6f6764; --pe-nm-tint: rgba(0, 0, 0, .045); --pe-nm-dur: .32s; --pe-nm-ease: cubic-bezier(.4, 0, .2, 1); } /* Derived tones, so a dark drawer gets a light tint rather than a black smear. */ @supports (color: color-mix(in srgb, #000 50%, #fff)) { .pe-nm, .pe-nm-toggle { --pe-nm-ink-2: color-mix(in srgb, var(--pe-nm-ink) 62%, var(--pe-nm-bg)); --pe-nm-tint: color-mix(in srgb, var(--pe-nm-ink) 7%, transparent); } } /* --- Scoped reset --- */ :where(.pe-nm) button, :where(.pe-nm) a, :where(.pe-nm-bar) a, :where(.pe-nm-bar) button, :where(.pe-nm-toggle) { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font: inherit !important; line-height: 1.35 !important; color: inherit !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important; border-radius: 0 !important; min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .pe-nm, .pe-nm * { box-sizing: border-box; } .pe-nm .pe-nm-svg, .pe-nm-toggle .pe-nm-svg { flex: 0 0 auto !important; max-width: none !important; display: block; } /* Trigger glyph: size and colour set from the backend, because the button sits on the theme's own header and a 24px near-black glyph is the wrong answer on half of them. Unset --pe-nm-ico-color inherits, which is what every install did before these existed. */ .pe-nm-toggle .pe-nm-svg { width: var(--pe-nm-ico, 24px) !important; height: var(--pe-nm-ico, 24px) !important; } .pe-nm-toggle .pe-nm-toggle__ico { color: var(--pe-nm-ico-color, inherit) !important; } .pe-nm-toggle .pe-nm-toggle__text { color: var(--pe-nm-ico-color, inherit) !important; } /* --- Trigger --- */ .pe-nm-toggle { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-width: 44px !important; min-height: 44px !important; padding: 8px !important; border-radius: 10px !important; color: inherit !important; cursor: pointer; vertical-align: middle; transition: background var(--pe-nm-dur) var(--pe-nm-ease); } .pe-nm-toggle:hover, .pe-nm-toggle:focus-visible { background: var(--pe-nm-tint) !important; } .pe-nm-toggle__text { font-size: var(--pe-nm-fs); font-weight: 600; } /* Admin-only shortcode warning. */ .pe-nm-warn { display: inline-block; padding: 6px 10px; border-radius: 6px; background: #fff4e5; color: #8a5300; font-size: 13px; } /* --- Shell --- * Below the minicart's layer on purpose: if a shopper opens the cart while the * menu is open, the cart is the thing they are acting on. */ .pe-nm { position: fixed; inset: 0; z-index: 2147481000; visibility: hidden; direction: inherit; font-family: inherit; transition: visibility var(--pe-nm-dur); } .pe-nm.is-open { visibility: visible; } /* The drawer is appended to , but a builder container can still sit in between and flip the direction under it — state it outright. */ .pe-nm--rtl { direction: rtl; } .pe-nm:not(.pe-nm--rtl) { direction: ltr; } .pe-nm-scrim { position: absolute; inset: 0; background: rgba(17, 17, 17, .42); -webkit-backdrop-filter: blur(4px) saturate(1.05); backdrop-filter: blur(4px) saturate(1.05); opacity: 0; pointer-events: none; transition: opacity var(--pe-nm-dur) var(--pe-nm-ease); } .pe-nm.is-open .pe-nm-scrim { opacity: 1; pointer-events: auto; } /* Physical anchor + translateX: transforms are physical in both directions, so this behaves identically under RTL and LTR. */ .pe-nm-drawer { position: absolute; top: 0; bottom: 0; width: var(--pe-nm-w); max-width: 92vw; display: flex; flex-direction: column; background: var(--pe-nm-bg); color: var(--pe-nm-ink); overflow: hidden; transition: transform var(--pe-nm-dur) var(--pe-nm-ease); will-change: transform; } .pe-nm--right .pe-nm-drawer { right: 0; transform: translateX(100%); box-shadow: -14px 0 48px rgba(0, 0, 0, .22); } .pe-nm--left .pe-nm-drawer { left: 0; transform: translateX(-100%); box-shadow: 14px 0 48px rgba(0, 0, 0, .22); } .pe-nm.is-open .pe-nm-drawer { transform: translateX(0); } body.pe-nm-active { overflow: hidden; } /* Duplicated in minicart.css on purpose — either module can be on alone. */ html.pe-sb-stable { scrollbar-gutter: stable; } /* --- Header --- */ .pe-nm-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); min-height: 64px; } .pe-nm-heading { font-size: calc(var(--pe-nm-fs) + 2px); font-weight: 700; color: var(--pe-nm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pe-nm-heading:empty { display: none; } .pe-nm-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } .pe-nm .pe-nm-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; border-radius: 10px !important; color: var(--pe-nm-ink) !important; cursor: pointer; transition: background .16s ease; } .pe-nm .pe-nm-btn:hover, .pe-nm .pe-nm-btn:focus-visible { background: var(--pe-nm-tint) !important; } /* An author `display` beats the [hidden] attribute — restate it. */ .pe-nm .pe-nm-btn[hidden] { display: none !important; } /* --- Panels --- * Siblings rather than nested lists: a nested list inherits its parent's * transform and scroll offset, which is what makes most off-canvas scripts jump * on the second level. */ .pe-nm-view { position: relative; flex: 1 1 auto; overflow: hidden; } .pe-nm-panel { position: absolute; inset: 0; margin: 0; padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)); list-style: none; background: var(--pe-nm-bg); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; visibility: hidden; transition: transform var(--pe-nm-dur) var(--pe-nm-ease), visibility var(--pe-nm-dur); } /* Waiting one step deeper: LTR from the right, RTL from the left. */ .pe-nm-panel { transform: translateX(100%); } .pe-nm--rtl .pe-nm-panel { transform: translateX(-100%); } .pe-nm-panel.is-active { transform: translateX(0); visibility: visible; } /* The panel you came from, parked just off-frame so the push reads as depth. */ .pe-nm-panel.is-parked { transform: translateX(-22%); visibility: hidden; } .pe-nm--rtl .pe-nm-panel.is-parked { transform: translateX(22%); } /* --- Rows --- */ .pe-nm-item { position: relative; margin: 0; padding: 0; list-style: none; } .pe-nm-item::after { content: ""; display: block; height: 1px; margin-inline: 22px; background: var(--pe-nm-line); } .pe-nm .pe-nm-row { display: flex !important; align-items: center; gap: 12px; width: 100% !important; min-height: var(--pe-nm-row) !important; padding: 10px 22px !important; font-size: var(--pe-nm-fs) !important; font-weight: 500 !important; line-height: 1.35 !important; color: var(--pe-nm-ink) !important; text-align: start; cursor: pointer; transition: background .16s ease, color .16s ease; } .pe-nm .pe-nm-row:hover, .pe-nm .pe-nm-row:focus-visible { background: var(--pe-nm-tint) !important; } .pe-nm .pe-nm-row:active { background: var(--pe-nm-tint) !important; } .pe-nm-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .pe-nm-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--pe-nm-ink-2); margin-inline-start: auto; } .pe-nm-arrow .pe-nm-svg { width: 20px; height: 20px; } /* The glyphs point "forward" in RTL; mirror them for an LTR store. */ .pe-nm:not(.pe-nm--rtl) .pe-nm-arrow .pe-nm-svg, .pe-nm:not(.pe-nm--rtl) .pe-nm-back .pe-nm-svg { transform: scaleX(-1); } .pe-nm-media { flex: 0 0 auto; display: inline-flex; } .pe-nm-media img { display: block; width: var(--pe-nm-img); height: var(--pe-nm-img); max-width: none; object-fit: var(--pe-nm-fit, contain); border-radius: 8px; } .pe-nm-item.is-current > .pe-nm-row { color: var(--pe-nm-accent) !important; font-weight: 700 !important; } .pe-nm-item--all > .pe-nm-row { color: var(--pe-nm-ink-2) !important; font-weight: 500 !important; } /* --- Focus --- */ .pe-nm :focus-visible, .pe-nm-toggle:focus-visible { outline: 2px solid var(--pe-nm-accent); outline-offset: -3px; border-radius: 8px; } @media (max-width: 480px) { .pe-nm-drawer { max-width: 100vw; width: min(var(--pe-nm-w), 100vw); } } /* --- Deals strip --- * A third flex child of the drawer, below .pe-nm-view, so it holds still while * the panels slide: the store's offers belong to the store, not to the level * you happen to be on. Capped in height and scrollable inside itself, because * how many promos run at once is the merchant's decision and the menu has to * stay the taller half of the drawer no matter what they choose. */ .pe-nm-deals { flex: 0 0 auto; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--pe-nm-bg); border-top: 1px solid var(--pe-nm-line); box-shadow: 0 -10px 22px rgba(0, 0, 0, .05); } .pe-nm-deals__t { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: max(12px, calc(var(--pe-nm-fs) - 4px)); font-weight: 700; color: var(--pe-nm-ink-2); } .pe-nm-deals__ico { display: inline-flex; line-height: 0; } .pe-nm-deals__ico .pe-nm-svg { width: 15px; height: 15px; } .pe-nm-deals__list { display: flex; flex-wrap: wrap; gap: 8px; /* Two full rows plus a deliberate sliver of a third: enough of a chip shows to read as "there is more", and the strip's footprint stays the same no matter how many promos are running. Wrapping rather than a horizontal rail, so a long Hebrew badge is read in full instead of being ellipsed. */ max-height: 106px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* Set by the script only while something is still below — a fade over a list that has nothing left to show would just look like a broken last row. */ .pe-nm-deals__list.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%); } /* Colours are the rule's own, so only shape and rhythm are decided here. The 0,2,1 specificity is deliberate: an Elementor kit styling `a` with !important outranks a plain class, exactly as it does on the minicart chip. */ .pe-nm a.pe-nm-deal, .pe-nm a.pe-nm-deal:link, .pe-nm a.pe-nm-deal:visited, .pe-nm a.pe-nm-deal:hover, .pe-nm a.pe-nm-deal:focus { display: inline-flex !important; align-items: center; gap: 6px; max-width: 100%; min-height: 40px !important; padding: 8px 14px !important; border-radius: 999px !important; background: var(--pe-nm-deal-bg, #111111) !important; color: var(--pe-nm-deal-fg, #ffffff) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; text-decoration: none !important; cursor: pointer; /* Badge colours are the merchant's, and either end of the range loses its edge: a near-white badge dissolves into a light drawer, a near-black one into a dark drawer. The ring is drawn in the chip's own text colour, which is the one value guaranteed to contrast with its fill, so it separates the pill in both directions without touching the merchant's palette. */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08) !important; transition: transform .15s var(--pe-nm-ease), opacity .15s var(--pe-nm-ease); } @supports (color: color-mix(in srgb, #000 50%, #fff)) { .pe-nm a.pe-nm-deal, .pe-nm a.pe-nm-deal:link, .pe-nm a.pe-nm-deal:visited, .pe-nm a.pe-nm-deal:hover, .pe-nm a.pe-nm-deal:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent) !important; } } .pe-nm a.pe-nm-deal:hover, .pe-nm a.pe-nm-deal:focus-visible { opacity: .92; transform: translateY(-1px); } .pe-nm a.pe-nm-deal:active { transform: translateY(0); } .pe-nm-deal__txt { overflow-wrap: anywhere; } .pe-nm-deal .pe-nm-svg { width: 14px; height: 14px; opacity: .8; } /* The glyph points "forward" in RTL; mirror it for an LTR store. */ .pe-nm:not(.pe-nm--rtl) .pe-nm-deal .pe-nm-svg { transform: scaleX(-1); } /* The shared ring is inset and painted in the accent colour — on a filled chip that lands inside the fill and disappears. Ring the pill from outside. */ .pe-nm a.pe-nm-deal:focus-visible { outline: 2px solid var(--pe-nm-ink); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .pe-nm, .pe-nm-scrim, .pe-nm-drawer, .pe-nm-panel, .pe-nm .pe-nm-row, .pe-nm .pe-nm-btn, .pe-nm a.pe-nm-deal, .pe-nm-toggle { transition: none !important; } } /* ========================================================================== Card template — .pe-nm--cards (mobile accordion) + .pe-nm-bar (desktop) -------------------------------------------------------------------------- One card component, two containers. Every rule that touches a button or a link carries !important, because the scoped reset above is !important at zero specificity — it has to be, to beat the theme. Same convention as .pe-nm-row; drop the !important and the control silently renders with no padding at all. Tints and rules are derived from the merchant's own --pe-nm-accent with color-mix, so they land correctly on a light or a dark palette instead of being a fixed grey that fails on one of them. ========================================================================== */ /* Card mode opens wider than the classic drawer: the panel carries a two-column image grid, and the stock 380px leaves the cards cramped. Scoped to .pe-nm--cards so the sliding-panel drawer already live on other sites keeps the width its merchant configured. Above the bar breakpoint the toggle is display:none, so this only ever applies on mobile. */ .pe-nm--cards .pe-nm-drawer { width: 90vw; max-width: 90vw; } /* The drawer's view is overflow:hidden because the sliding panels are absolutely positioned inside it and each scrolls itself. The accordion is a single tall flow child instead, so in this template the view has to be the scroller — and min-height:0 is required with it: a flex child defaults to min-height:auto, refuses to shrink below its content, and overflow-y never engages. Without both lines, a long menu is simply unreachable past the fold. */ .pe-nm--cards .pe-nm-view { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .pe-nm--cards .pe-nm-acc, .pe-nm-bar .pe-nm-bar__list { list-style: none; margin: 0; padding: 0; } /* ---------- mobile: accordion ---------- */ .pe-nm--cards .pe-nm-acc__item { border-bottom: 1px solid var(--pe-nm-line); } .pe-nm--cards .pe-nm-acc__item:last-child { border-bottom: 0; } /* Mixed toward the drawer's own background, not toward transparent, and only 3%. The accent is frequently near-black (#111 is the shipped default), so mixing a percentage of it over transparent produced flat grey rather than a brand tint — which is exactly how it read on a store using the default palette. */ .pe-nm--cards .pe-nm-acc__item.is-open { background: color-mix(in srgb, var(--pe-nm-accent) 3%, var(--pe-nm-bg)); } .pe-nm .pe-nm-acc__row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; padding: 16px 20px !important; color: var(--pe-nm-ink) !important; font-size: var(--pe-nm-fs-top, var(--pe-nm-fs)) !important; line-height: 1.35 !important; text-align: start; cursor: pointer; } .pe-nm--cards .pe-nm-acc__chev { flex: 0 0 auto; display: inline-flex; transition: transform .22s ease; } .pe-nm--cards .pe-nm-acc__item.is-open .pe-nm-acc__chev { transform: rotate(180deg); } /* height is animated from 0 to the measured scrollHeight by nav-menu.js */ .pe-nm--cards .pe-nm-acc__body { overflow: hidden; height: 0; transition: height .26s ease; } .pe-nm--cards .pe-nm-acc__body[hidden] { display: block; } .pe-nm--cards .pe-nm-acc__inner { padding: 4px 20px 18px; } @media (prefers-reduced-motion: reduce) { .pe-nm--cards .pe-nm-acc__body, .pe-nm--cards .pe-nm-acc__chev { transition: none; } } /* ---------- the card grid (shared by both modes) ---------- */ .pe-nm-cards { list-style: none; margin: 0; padding: 0; display: grid; /* --pe-nm-col-m is only written when a mobile picture width is set, and is never below the card minimum — so unset, this is the grid it always was. */ grid-template-columns: repeat(auto-fill, minmax(var(--pe-nm-col-m, var(--pe-nm-cardmin, 130px)), 1fr)); gap: 12px 40px; } .pe-nm-card { position: relative; min-width: 0; } /* The hairline between columns sits in the gutter, not on the card, so it never appears at the grid's outer edge. */ .pe-nm-card + .pe-nm-card::before { content: ""; position: absolute; inset-block: 25%; inset-inline-start: -20px; width: 1px; background: color-mix(in srgb, var(--pe-nm-accent) 12%, transparent); } .pe-nm .pe-nm-card__link, .pe-nm-bar .pe-nm-card__link { display: block !important; color: var(--pe-nm-ink) !important; text-align: center; } /* The picture box. Every value below is optional in the admin and falls back to the look the template shipped with (8px corners, transparent, contain). */ .pe-nm-card__media { display: block; aspect-ratio: var(--pe-nm-ratio, 3 / 2); overflow: hidden; border-radius: var(--pe-nm-card-radius, 8px); background: var(--pe-nm-card-bg, transparent); } /* 0,2,1 plus !important on the two that matter: the menubar sits inside an Elementor header, and `.elementor img { height:auto }` ties a single class — height:auto there would quietly turn every "cover" back into a letterbox. */ .pe-nm-cards .pe-nm-card__media img { width: 100% !important; height: 100% !important; max-width: none; object-fit: var(--pe-nm-card-fit, var(--pe-nm-fit, contain)); border-radius: 0; display: block; } /* Box size per device. Width is capped at the column and centred in it (the column keeps room for the title). A height that is set wins over the aspect ratio, because width is always definite here; left at auto, the ratio rules. */ .pe-nm--cards .pe-nm-card__media { width: min(100%, var(--pe-nm-img-m, 100%)); height: var(--pe-nm-img-h-m, auto); margin-inline: auto; } .pe-nm-bar .pe-nm-card__media { width: min(100%, var(--pe-nm-img-d, 100%)); height: var(--pe-nm-img-h-d, auto); margin-inline: auto; } .pe-nm-card__title { display: block; margin-top: 8px; font-size: var(--pe-nm-fs-card, calc(var(--pe-nm-fs) - 3px)); font-weight: 500; line-height: 1.45; } .pe-nm-card.is-current > .pe-nm-card__link .pe-nm-card__title { color: var(--pe-nm-accent); } /* A child with no picture is just a centred label. It carried a border at first; with several in a row that reads as a grid of empty boxes, which is worse than plain text. */ .pe-nm .pe-nm-card--noimg .pe-nm-card__link, .pe-nm-bar .pe-nm-card--noimg .pe-nm-card__link { padding: 10px 6px !important; } .pe-nm-card--noimg .pe-nm-card__title { margin-top: 0; } /* level 3 — plain links under their card */ .pe-nm-sub { list-style: none; margin: 6px 0 0; padding: 0; text-align: center; } .pe-nm .pe-nm-sub a, .pe-nm-bar .pe-nm-sub a { display: block !important; padding: 3px 0 !important; color: var(--pe-nm-ink) !important; /* Level 3 is supporting detail under a card, not a peer of its title — it should read as quiet. .72 was heavy enough to compete with the card name. */ opacity: .55; font-size: var(--pe-nm-fs-sub, calc(var(--pe-nm-fs) - 4px)) !important; } .pe-nm .pe-nm-sub a:hover, .pe-nm .pe-nm-sub a:focus-visible, .pe-nm-bar .pe-nm-sub a:hover, .pe-nm-bar .pe-nm-sub a:focus-visible { opacity: 1; text-decoration: underline !important; } /* display:table rather than block — centred by the auto margins, but still only as wide as its own text, so the whole row is not a click target. */ .pe-nm .pe-nm-viewall, .pe-nm-bar .pe-nm-viewall { display: table !important; margin: 20px auto 0 !important; color: var(--pe-nm-accent) !important; font-size: var(--pe-nm-fs-all, calc(var(--pe-nm-fs) - 3px)) !important; text-decoration: underline !important; } /* ---------- desktop: menubar ---------- */ .pe-nm-bar { display: none; /* the breakpoint rule printed by enqueue() turns this on */ position: relative; background: var(--pe-nm-bg); color: var(--pe-nm-ink); } .pe-nm-bar, .pe-nm-bar * { box-sizing: border-box; } .pe-nm-bar__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 clamp(12px, 2vw, 34px); } /* static, so the full-width panel below can anchor to the bar itself */ .pe-nm-bar__item { position: static; } .pe-nm-bar .pe-nm-bar__link { display: inline-flex !important; align-items: center; gap: 6px; padding: 14px 2px !important; border-bottom: 2px solid transparent !important; color: var(--pe-nm-ink) !important; /* --pe-nm-fs-* are written per container only when set: the bar carries the desktop sizes and the drawer the mobile ones, so one rule serves both and an unset size keeps the offset from --pe-nm-fs it always had. */ font-size: var(--pe-nm-fs-top, var(--pe-nm-fs)) !important; line-height: 1.3 !important; white-space: nowrap; } .pe-nm-bar .pe-nm-bar__item.is-current > .pe-nm-bar__link, .pe-nm-bar .pe-nm-bar__item.is-open > .pe-nm-bar__link { border-bottom-color: var(--pe-nm-accent) !important; color: var(--pe-nm-accent) !important; } /* Plain items had no hover state at all — only parents reacted, by opening. */ .pe-nm-bar .pe-nm-bar__link:hover, .pe-nm-bar .pe-nm-bar__link:focus-visible { color: var(--pe-nm-accent) !important; } .pe-nm-bar__chev { display: inline-flex; transition: transform .18s ease; } .pe-nm-bar__item.is-open .pe-nm-bar__chev { transform: rotate(180deg); } /* The panel has its own palette (the PHP always writes all three, falling back to the bar's), re-pointed onto the shared names so the card grid inside needs no second set of rules. Width: nav-menu.js stretches it to the viewport when data-mega-width="full"; inset-inline:0 is the "as wide as the bar" layout and the no-JS fallback. Height: a long menu inside a fixed header can never be scrolled into view by the page, so the panel scrolls itself. The script tightens 75vh further when the panel starts low enough that 75vh would run past the bottom edge. */ .pe-nm-bar__panel { --pe-nm-bg: var(--pe-nm-panel-bg, #ffffff); --pe-nm-ink: var(--pe-nm-panel-ink, #16110f); --pe-nm-accent: var(--pe-nm-panel-accent, #111111); position: absolute; inset-inline: 0; top: 100%; z-index: 60; max-height: 75vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; background: var(--pe-nm-bg); color: var(--pe-nm-ink); border-top: 1px solid var(--pe-nm-line); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .35); } .pe-nm-bar__panel[hidden] { display: none; } .pe-nm-bar__inner { max-width: 1280px; margin: 0 auto; padding: 26px 24px 30px; text-align: center; } /* With a desktop picture width set, every column is exactly max(picture, card minimum) — smaller logos then fit more per row instead of floating in 200px columns. Unset, it is the original 130–200px track. */ .pe-nm-bar__inner .pe-nm-cards { grid-template-columns: repeat(auto-fit, minmax(var(--pe-nm-col-d, var(--pe-nm-cardmin, 130px)), var(--pe-nm-col-d, 200px))); justify-content: center; gap: 16px 40px; } /* A full-width panel drops the 1280px strip: columns keep their size and more of them fit per row, so a wide screen shows 14 brands a row instead of 7 with the sides left empty. The grid stays centred as a block. */ .pe-nm-bar[data-mega-width="full"] .pe-nm-bar__inner { max-width: none; padding-inline: clamp(24px, 3vw, 64px); } @media (prefers-reduced-motion: reduce) { .pe-nm-bar__chev { transition: none; } }