/* Shared base of p1.css: the rules every theme has in common. ThemeAssetTagHelper links this file right before the
   theme's own p1.css, so a theme rule wins on equal specificity. A fix for all themes goes here; a theme-only change
   goes into the theme's file (Themes/README.md, "Ortak CSS tabanı"). */

/* Vitrin — P1 "built-in app" package (announcement bar, trust badges, cart drawer, badges, wishlist, quick view,
   sticky add-to-cart, zoom, swatches, info tabs, quantity breaks, bundle offer, newsletter, order progress).
   Values follow the P1Storefront design; colours use the theme tokens from site.css. */
[hidden] { display: none !important; }

/* Announcement bar */
.announce { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 9px 16px; font-size: 14px; }
.announce-track { min-width: 0; text-align: center; }
.announce-msg { margin: 0; }
.announce-nav:hover { opacity: 1; }
.announce-nav:focus-visible { outline: 2px solid var(--sale, var(--accent)); outline-offset: 2px; }
@media (max-width: 560px) { .announce { gap: 8px; } }

/* Badges */
.badge-dark { background: var(--ink); color: #fff; }
.badge-low { background: var(--err-bg); color: var(--err); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.urgency { color: var(--err); font-size: 14px; font-weight: var(--fw-bold, 700); }

/* Product card: badges stacked top-left, heart top-right, quick view at the bottom of the image */
.product-card .media { position: relative; display: block; }
.product-card .media-link { display: block; }
.product-card .card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(100% - 64px); pointer-events: none; }
.card-fav { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 1; }
.fav-btn { width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--panel-bg, #fff); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.fav-btn:hover { color: var(--action, var(--brand)); }
.fav-btn[aria-pressed=true] { color: var(--action, var(--brand)); }
.fav-btn[aria-pressed=true] svg { fill: currentColor; }
.fav-btn:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }
.product-card:hover .qv-btn, .product-card:focus-within .qv-btn { opacity: 1; transform: none; }
.qv-btn:hover { background: var(--ink); color: #fff; }
.qv-btn:focus-visible { opacity: 1; transform: none; outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }

/* Trust badges */
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 20px; }
.trust li { display: flex; align-items: flex-start; gap: 10px; }
.trust-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--surface); color: var(--action, var(--brand)); display: inline-flex; align-items: center; justify-content: center; }
.trust-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; }
.trust-text span { color: var(--muted); }
.trust--inline { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--line); padding-top: 16px; }
/* .trust-strip is the layout's footer section only; the list inside carries .trust--strip. */
.trust-strip { border-top: 1px solid var(--line); margin-top: 64px; }
.trust-strip + .benefits { margin-top: 0; }
.trust-strip .trust { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 24px 0; }

/* Drawer + modal shells */
.drawer, .modal { position: fixed; inset: 0; z-index: 60; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--panel-bg, #fff); display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.12); transform: translateX(100%); transition: transform .25s ease; outline: none; }
.drawer.open .drawer-panel { transform: none; }
.drawer-slot { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.drawer-loading { padding: 20px; }
.drawer-content { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow-y: auto; }
/* Sections keep their height and the panel scrolls (otherwise suggestions collapse to nothing). */
.drawer-content > * { flex-shrink: 0; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel-bg, #fff); z-index: 1; }
.drawer-close, .modal-close { width: 44px; height: 44px; border: 0; background: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.drawer-close:hover, .modal-close:hover { background: var(--surface); }
.drawer-close:focus-visible, .modal-close:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }
.drawer-alert { margin: 12px 20px 0; }
.drawer-empty { padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--ink); }
.drawer-ship { padding: 14px 20px; background: var(--p1-soft); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.drawer-lines { list-style: none; margin: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.drawer-line { display: flex; gap: 12px; }
.drawer-line .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drawer-line .name { font-weight: var(--fw-bold, 700); }
.drawer-line.unavailable .thumb { opacity: .5; }
.line-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; margin-top: 6px; }
/* The line total never breaks inside the amount; under pressure it moves to its own right-aligned line. */
.line-row > b { white-space: nowrap; margin-left: auto; }
.line-row .mini-qty { flex-shrink: 0; }
.mini-qty button:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: -2px; }
.mini-qty span { min-width: 40px; text-align: center; font-weight: var(--fw-semibold, 600); font-size: 15px; white-space: nowrap; }
.drawer-line form { margin: 0; }
.drawer-remove { border: 0; background: none; padding: 4px 0; color: var(--muted); font: var(--fw-semibold, 600) 13px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.drawer-remove:hover { color: var(--err); }
.drawer-suggest { padding: 12px 20px; border-top: 1px solid var(--line); }
.drawer-suggest ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.drawer-suggest li { display: flex; gap: 8px; align-items: center; }
.drawer-suggest form { margin: 0; }
.sg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.drawer-foot { margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 0; background: var(--panel-bg, #fff); }
.drawer-foot .r { display: flex; justify-content: space-between; gap: 12px; }
.drawer-foot .discount { color: var(--ok); font-size: 14px; }
/* Display currency other than TL: charged in TL + approximate amount (Shared/_ChargeCurrencyNote). */
.drawer-foot .charge-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.drawer-foot .charge-note b { color: var(--ink); }
.drawer-foot .charge-approx { display: block; white-space: nowrap; }
.drawer-view { text-align: center; }
.drawer-content.busy { opacity: .6; pointer-events: none; }
body.no-scroll { overflow: hidden; }

.modal { display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-close { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(255,255,255,.9); }

/* Quick view */
.qv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 28px; }
.qv-img { aspect-ratio: 1 / 1; border-radius: var(--radius); }
.qv-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qv-info .price { font-size: 28px; }
.qv-form { gap: 16px; }
.qv-form .buy-row .btn { flex: 1; min-width: 160px; }
.qv-loading { padding: 48px; text-align: center; }
@media (max-width: 720px) { .qv { grid-template-columns: 1fr; padding: 20px; gap: 16px; } .qv-img { max-height: 320px; } }

/* Swatches */
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 999px; margin-right: 8px; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.pill input:checked + span .swatch { border-color: rgba(255,255,255,.7); }
/* Product card: colour dots under the name; second image on hover (desktop pointers only, overlaid: no layout shift) */
.card-swatches { display: flex; align-items: center; gap: 4px; min-height: 16px; }
.card-swatches .swatch { width: 14px; height: 14px; margin: 0; }
.card-swatches .more { font-size: 12px; color: var(--muted); margin-left: 2px; }
.ph.has-hover-img { position: relative; }
.ph .hover-img { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
@media (hover: none), (pointer: coarse) { .ph .hover-img { display: none; } }
@media (hover: hover) and (pointer: fine) { .product-card:hover .ph .hover-img { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ph .hover-img { transition: none; } }

/* Product page: zoom, lightbox, info tabs, quantity breaks, bundle, sticky add-to-cart */
.main-img[data-zoom] img[data-main-image] { transition: transform .15s ease; }
.main-img.zooming { cursor: zoom-out; }
.main-img.zoomable { cursor: zoom-in; }
.main-img.zooming img[data-main-image] { transform: scale(2); }
.zoom-open { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255,255,255,.95); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; }
.zoom-open:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }
.pdp-fav { top: 12px; right: 12px; }
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(20,18,16,.94); display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: pinch-zoom; }
.lightbox .modal-close { position: fixed; top: 12px; right: 12px; }
@media (prefers-reduced-motion: reduce) { .main-img[data-zoom] img[data-main-image] { transition: none; } }

.content-tabs { margin: 0 0 14px; border-top: 1px solid var(--line); }
.content-tab { border-bottom: 1px solid var(--line); }
.content-tab > summary { cursor: pointer; font-weight: var(--fw-bold, 700); color: var(--ink); min-height: 52px; display: flex; align-items: center; list-style: none; }
.content-tab > summary::-webkit-details-marker { display: none; }
.content-tab > summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--muted); }
.content-tab[open] > summary::after { content: "−"; }
.content-tab .rich { padding-bottom: 16px; }

.qty-breaks { display: flex; flex-direction: column; gap: 8px; }
.qty-breaks table { border-collapse: collapse; font-size: 15px; width: 100%; }
.qty-breaks td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.qty-breaks tr:last-child td { border-bottom: 0; }
.qty-breaks td.num { text-align: right; font-weight: var(--fw-semibold, 600); }
.qty-breaks .badge { font-size: 12px; padding: 3px 8px; margin-left: 6px; }

/* "Birlikte al" (Shared/Components/BundleOffer): product rows (image, name, variant choices, price), total, button, hint.
   The box itself (border, radius, padding) and the image size come from the theme's p1.css. */
.bundle-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.bundle-head h2 { margin: 0; }
.bundle-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--brand-soft, var(--accent-soft, var(--p1-soft))); color: var(--brand); font-size: 13px; font-weight: var(--fw-bold, 700); }
.bundle-form { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.bundle-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bundle-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.bundle-thumb { display: block; width: 56px; height: 56px; overflow: hidden; flex: none; }
.bundle-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bundle-item-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bundle-item-name { font-weight: var(--fw-semibold, 600); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.bundle-item-name:hover { text-decoration: underline; }
.bundle-item-name:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }
.bundle-item-price { white-space: nowrap; font-weight: var(--fw-semibold, 600); }
.bundle-choice { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bundle-choice legend { padding: 0; margin: 0 0 6px; }
.bundle-opts { gap: 6px; }
.bundle-opts .pill span { min-height: 44px; padding: 0 14px; font-size: 14px; }
.bundle-opts .pill input:disabled + span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.bundle-choice select { max-width: 100%; min-height: 44px; }
.bundle-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; }
.bundle-total b { font-size: 20px; white-space: nowrap; }
.price-strike { text-decoration: line-through; margin-left: 6px; }
.bundle-button { width: 100%; }
.bundle-hint { margin: -6px 0 0; }
@media (max-width: 480px) {
  /* Narrow screens: the price stays at the right of the name (a line of its own left a gap under the image and lost the
     product it belongs to); the choices wrap inside the narrower middle column. */
  .bundle-item { gap: 10px; }
  .bundle-item-price { grid-column: 3; grid-row: 1; }
}
/* A very narrow middle column (the quick view on a phone, ~127px): tighter pills, so a short size row (S M L) keeps to one
   line instead of leaving its last pill alone on a second one. */
.bundle-item-body { container: bundle-item / inline-size; }
@container bundle-item (max-width: 160px) {
  .bundle-opts { gap: 4px; }
  .bundle-opts .pill span { padding: 0 10px; }
}

.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--panel-bg, #fff); border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(0,0,0,.06); transform: translateY(100%); transition: transform .2s ease; }
.sticky-atc.show { transform: none; }
.sticky-atc-row { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.sticky-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-variant { font-weight: 400; }
.sticky-price { font-size: 20px; font-weight: var(--fw-semibold, 600); white-space: nowrap; }
body.has-sticky-atc .wa-float { bottom: 96px; }
@media (max-width: 560px) { .sticky-thumb, .sticky-name { display: none; } .sticky-atc-row .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .sticky-atc { transition: none; } }

.nl-image { height: 110px; border-radius: 0; }
.nl-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.nl-consent { font-size: 13px; gap: 8px; }
.nl-consent input { width: 18px; height: 18px; }
.nl-status:empty { display: none; }
.nl-status { font-size: 14px; }
.nl-modal .modal-close { top: 6px; right: 6px; }

/* Order progress (Alındı → Hazırlanıyor → Kargoda / Hazır → Teslim) */
.order-progress { display: flex; flex-direction: column; gap: 10px; }
.steps { list-style: none; margin: 0; padding: 8px 0; display: flex; justify-content: space-between; position: relative; }
.step { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 13px; color: var(--muted); }
.step .dot { width: 24px; height: 24px; border-radius: 999px; background: var(--line); }
.step.done .dot, .step.current .dot { background: var(--action, var(--brand)); }
.step.done, .step.current { color: var(--ink); }
.step.current .step-label { font-weight: var(--fw-bold, 700); }
.ship-line { font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }

/* Premium package: promotion countdown, delivery estimate, back-to-top, scroll reveal, countdown banner section */
.countdown svg { flex-shrink: 0; }
.delivery-eta { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: var(--fw-semibold, 600); color: var(--ok); }
.delivery-eta svg { flex-shrink: 0; }
/* Floating button stack offsets (on body: the footer reserves the same space on small screens). */
body { --to-top-base: 20px; --to-top-wa: 0px; }
.to-top { position: fixed; right: 20px; bottom: calc(var(--to-top-base) + var(--to-top-wa)); z-index: 44; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-bg, #fff); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--action, var(--brand)); }
.to-top:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }
body:has(.wa-float) { --to-top-wa: 68px; }
body.has-sticky-atc, body:has([data-cookie-bar]) { --to-top-base: 96px; }
/* Small screens: the button (and the sticky add-to-cart bar) would sit on the last footer lines (ETBİS, newsletter consent)
   at the end of the page; the footer ends with that much empty space instead. */
@media (max-width: 900px) { .site-footer { padding-bottom: calc(var(--to-top-base) + var(--to-top-wa) + 56px); } }
/* Phones: a smaller button closer to the edge covers less of the cards and text it floats over. */
@media (max-width: 720px) { .to-top { right: max(10px, env(safe-area-inset-right, 0px)); width: 40px; height: 40px; opacity: 0; } .to-top.show { opacity: .92; } }
.reveal.revealed { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
.pb-countdown p { opacity: .85; }
.pb-countdown-side { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pb-countdown .countdown { background: var(--panel-bg, #fff); font-size: 18px; padding: 10px 18px; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* Compare: toggle on product cards / product page and the floating tray (premium.js shows them while the browser list is usable) */
.cmp-btn { position: absolute; top: 8px; right: 8px; z-index: 1; width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--panel-bg, #fff); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.cmp-btn[hidden] { display: none; }
.cmp-btn::before { content: ""; position: absolute; inset: -4px; } /* 44px touch target */
.card-fav ~ .cmp-btn { top: 52px; }
.cmp-btn:hover { color: var(--action, var(--brand)); }
.cmp-btn[aria-pressed=true] { background: var(--action, var(--brand)); color: #fff; }
.cmp-btn:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }
.pdp-cmp { top: 12px; right: 12px; }
.pdp-fav ~ .pdp-cmp { top: 56px; }
.cmp-tray[hidden] { display: none; }
.cmp-tray-count { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-bold, 700); color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-tray-count svg { color: var(--action, var(--brand)); }
.cmp-tray-clear { width: 44px; height: 44px; border-radius: 999px; border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cmp-tray-clear:hover { background: var(--surface); color: var(--ink); }
.cmp-tray-clear:focus-visible, .cmp-tray .btn:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }

/* Product page: collapsed order note (summary is a 44px touch target). */
.line-note > summary { cursor: pointer; padding: 10px 0; font-size: 14px; font-weight: 600; }
.line-note > summary .muted { font-weight: 400; }
.line-note .field { margin-top: 4px; }

/* Photo field of the review and return request forms (_PhotoPickerRow, photo-picker.js): previews + dashed "Ekle" tile. */
.photo-picker { display: flex; flex-direction: column; gap: 8px; }
.photo-picker-row { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-picker-previews { display: contents; }
.photo-picker-preview { position: relative; width: 88px; height: 88px; border-radius: var(--radius-sm, 10px); overflow: hidden; background: var(--surface); }
.photo-picker-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-picker-preview button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.photo-picker-preview button:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }
.photo-picker-add { position: relative; width: 88px; height: 88px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px dashed var(--field, var(--line)); border-radius: var(--radius-sm, 10px); color: var(--action, var(--brand)); font-size: 13px; font-weight: var(--fw-semibold, 600); cursor: pointer; }
.photo-picker-add[hidden] { display: none; }
.photo-picker-add:hover { border-color: var(--action, var(--brand)); }
.photo-picker-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photo-picker-add:focus-within { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 2px; }

/* "/ kg · KDV dahil": the separator goes with the unit; a named variant has no unit suffix (Format.UnitSuffix). */
[data-unit]:empty + .vat-sep, [data-qv-unit]:empty + .vat-sep { display: none; }

/* Menu button: hamburger while closed, × while the menu is open (Shared/_Header; site.js sets aria-expanded). */
.menu-toggle .i-close, .menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: inline; }

/* Mega menu (desktop): as many tracks as columns actually rendered (HeaderMenu data-cols; link-less categories share one
   column), so fewer columns spread over the panel instead of leaving an empty track before the promo tile (4 columns or
   more keep the theme's grid). Link-less category titles carry an arrow: they are links too. */
@media (min-width: 901px) {
  .mega-cols[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
  .mega-cols[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-cols[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-col-leaves .mega-col-title::after { content: "→"; content: "→" / ""; margin-left: 8px; letter-spacing: 0; }
}

/* Scroll reveal never hides content on paper (premium.js also reveals all on beforeprint). */
@media print { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }