/* ========================================================================== ticketonline.kaufen — Shop-Shell (Stufe 1 "Neue Haut, gleiche Logik") Handgeschrieben, kein Framework. Farben/Fonts/Formen kommen als Tokens (--ep-*) aus ThemeCss::rootVars(ThemeTokens::resolve('ticketonline')) im ; hier stehen nur Layout-Tokens und die Shop-Komponenten (shop-*). Wird in der Minify-Gruppe cssshop NACH bootstrap.min.css und VOR ticket-bridge.css/shop-cart.css geladen: Bootstrap-Defaults werden darum gezielt auf body.shop-body ueberschrieben. Reihenfolge: Tokens · Basis · Header · Drawer · Brotkrumen · Startseite (Week, Chips, Featured, Grid, Trust, SEO) · Footer · Legacy-Bruecke · Cookie-Bar · toTop/Overlay · Utilities · Motion/Print ========================================================================== */ /* ---------- Layout-Tokens (Farb-/Font-Tokens setzt ThemeCss) ---------- */ :root { --ep-container: 1180px; --ep-gutter: clamp(16px, 3vw, 32px); --ep-header-h: 64px; --ep-section-y: clamp(32px, 6vw, 64px); --ep-gap: clamp(14px, 2.5vw, 24px); --ep-border-w: 1px; --ep-tap: 44px; --shop-radius: 14px; --shop-radius-sm: 10px; --shop-tint: #E3F4F4; --shop-tint-2: #6DC4C7; --shop-pink: var(--ep-accent, #B3007D); --shop-pink-soft: #FBE7F3; --shop-poster-bg: linear-gradient(160deg, var(--shop-tint-2), var(--ep-primary, #1F6F72) 70%); --shop-shadow: 0 1px 2px rgba(20,32,31,.05), 0 12px 32px -18px rgba(20,32,31,.25); } /* ---------- Basis ---------- */ /* Bootstrap 3 setzt html auf 10px — rem-Angaben in shop-cart.css/Bridge rechnen mit 16px */ html.shop-html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ep-header-h) + 12px); } html.shop-html.shop-drawer-open { overflow: hidden; } /* border-box fuer alles im Theme — nicht auf Bootstrap verlassen (Bundle kann fehlen/spaeter laden) */ body.shop-body, body.shop-body *, body.shop-body *::before, body.shop-body *::after { box-sizing: border-box; } body.shop-body { margin: 0; background: var(--ep-bg); color: var(--ep-text); font-family: var(--ep-font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* Element-Resets mit Spezifitaet 0 (:where), damit jede Komponentenregel (.shop-logo img, .shop-nav-link, .shop-btn ...) sie ohne Kampf ueberschreibt. Vorher gewann body.shop-body img (0,1,2) gegen .shop-logo img (0,1,1) -> das Logo lief mit max-width:100% des eingeklappten Flex-Items auf SVG-Originalbreite. */ :where(body.shop-body) a { color: var(--ep-primary); text-decoration: none; } :where(body.shop-body) a:hover, :where(body.shop-body) a:focus { color: var(--ep-primary-hover); } :where(body.shop-body) img, :where(body.shop-body) svg { max-width: 100%; } :where(body.shop-body) img { height: auto; } body.shop-body :focus-visible { outline: 3px solid var(--ep-focus); outline-offset: 2px; border-radius: 4px; } :where(body.shop-body) button { font: inherit; color: inherit; } /* Kopfzeile darf nie breiter als der Viewport werden */ .shop-header-in > * { min-width: 0; } .shop-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .shop-skip { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 10px 14px; background: var(--ep-primary); color: var(--ep-on-primary) !important; border-radius: var(--shop-radius-sm); font-weight: 700; } .shop-skip:focus { top: 8px; } .shop-wrap { width: 100%; max-width: var(--ep-container); margin-inline: auto; padding-inline: var(--ep-gutter); } .shop-main { min-height: 50vh; } .shop-icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; flex: none; } #debug:empty { display: none; } /* Display-Schrift fuer Shop-Ueberschriften (Bootstrap setzt h1-h3 Groessen/Margins) */ body.shop-body .shop-start h1, body.shop-body .shop-start h2, body.shop-body .shop-start h3, .shop-drawer-title, .shop-footer h2, .shop-price .val { font-family: var(--ep-font-display); font-weight: var(--ep-display-weight, 800); letter-spacing: var(--ep-display-tracking, -.02em); color: var(--ep-text); margin: 0; line-height: 1.1; text-wrap: balance; } /* ---------- Header ---------- */ .shop-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ep-surface) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: var(--ep-border-w) solid var(--ep-line); } @supports not (background: color-mix(in srgb, red, blue)) { .shop-header { background: var(--ep-surface); } } .shop-header-in { display: flex; align-items: center; gap: 12px; min-height: var(--ep-header-h); padding-block: 10px; } .shop-logo { display: inline-flex; align-items: center; min-height: var(--ep-tap); flex: none; } .shop-logo img { height: 34px; width: auto; max-width: min(42vw, 180px); } .shop-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--ep-bg); border: var(--ep-border-w) solid var(--ep-line); border-radius: 999px; padding: 0 14px; height: 42px; color: var(--ep-muted); transition: border-color .15s, box-shadow .15s; } .shop-search:focus-within { border-color: var(--ep-primary); box-shadow: 0 0 0 3px var(--ep-primary-soft); } .shop-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ep-text); outline: none; padding: 0; height: 100%; -webkit-appearance: none; } .shop-search input::placeholder { color: var(--ep-muted); opacity: 1; } .shop-search input::-webkit-search-cancel-button { -webkit-appearance: none; } .shop-nav { display: none; } .shop-nav-list, .shop-nav-sublist, .shop-drawer-list, .shop-drawer-sub ul { list-style: none; margin: 0; padding: 0; } .shop-nav-list { display: flex; align-items: center; gap: 4px; } .shop-nav-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--ep-tap); padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ep-text) !important; cursor: pointer; white-space: nowrap; list-style: none; } .shop-nav-link::-webkit-details-marker, .shop-drawer-sub summary::-webkit-details-marker, .shop-user-btn::-webkit-details-marker { display: none; } .shop-nav-link:hover, .shop-nav-sub[open] > .shop-nav-link, .shop-nav-link[aria-current="page"] { background: var(--shop-tint); color: var(--ep-primary) !important; } .shop-nav-caret { width: 14px; height: 14px; transition: transform .15s; } .shop-nav-sub[open] > summary .shop-nav-caret { transform: rotate(180deg); } .shop-nav-sub { position: relative; } .shop-nav-sublist { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 240px; max-width: min(92vw, 420px); background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--shop-radius); box-shadow: var(--shop-shadow); padding: 8px; max-height: min(70vh, 520px); overflow-y: auto; } .shop-nav-sublist-right { left: auto; right: 0; } .shop-nav-sublist a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: var(--shop-radius-sm); color: var(--ep-text); font-size: 14px; font-weight: 500; } .shop-nav-sublist a:hover, .shop-nav-sublist a:focus, .shop-nav-sublist a[aria-current="page"] { background: var(--shop-tint); color: var(--ep-primary); } .shop-nav-sublist a small { color: var(--ep-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; } .shop-nav-events { min-width: 320px; } .shop-nav-empty { padding: 10px 12px; color: var(--ep-muted); font-size: 14px; } .shop-header-actions { display: flex; align-items: center; gap: 8px; flex: none; } .shop-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0; border: var(--ep-border-w) solid var(--ep-line); border-radius: 999px; background: var(--ep-surface); color: var(--ep-text) !important; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; } .shop-icon-btn:hover { border-color: var(--ep-primary); color: var(--ep-primary) !important; } .shop-icon-btn .shop-icon { width: 20px; height: 20px; } .shop-user-name { display: none; } .shop-user-menu .shop-nav-sublist { top: calc(100% + 8px); } @media (min-width: 600px) { .shop-user-name { display: inline; } .shop-login-btn, .shop-user-btn { padding: 0 14px 0 10px; } } @media (min-width: 960px) { .shop-nav { display: block; } .shop-burger { display: none; } .shop-search { max-width: 400px; } .shop-header-in { gap: 18px; } .shop-logo img { height: 38px; } } /* ---------- Drawer (mobil) ---------- */ .shop-drawer { position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0 var(--ep-gutter) var(--ep-gutter); border: 0; border-left: var(--ep-border-w) solid var(--ep-line); background: var(--ep-surface); color: var(--ep-text); box-shadow: var(--ep-shadow-lg); overflow-y: auto; } .shop-drawer::backdrop { background: rgba(20,32,31,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .shop-drawer:not([open]) { display: none; } .shop-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--ep-header-h); background: var(--ep-surface); border-bottom: var(--ep-border-w) solid var(--ep-line); margin-bottom: 8px; } .shop-drawer-title { font-size: 18px; } .shop-drawer-list > li > a, .shop-drawer-sub summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; font-size: 17px; font-weight: 600; color: var(--ep-text); border-bottom: 1px solid var(--ep-line); cursor: pointer; list-style: none; } .shop-drawer-sub summary { justify-content: space-between; } .shop-drawer-sub[open] summary .shop-nav-caret { transform: rotate(180deg); } .shop-drawer-sub ul { padding: 4px 0 8px 12px; border-bottom: 1px solid var(--ep-line); } .shop-drawer-sub ul a { display: block; padding: 9px 4px; font-size: 15px; color: var(--ep-text); } .shop-drawer-sub ul a small { color: var(--ep-muted); margin-left: 6px; } .shop-drawer a[aria-current="page"] { color: var(--ep-primary); } .shop-drawer-legal { margin: 18px 0 0; font-size: 13px; color: var(--ep-muted); } @media (min-width: 960px) { .shop-drawer, .shop-drawer[open] { display: none; } } /* ---------- Brotkrumen ---------- */ .shop-crumbs { background: var(--ep-surface); border-bottom: var(--ep-border-w) solid var(--ep-line); font-size: 13px; } .shop-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; min-height: 40px; align-items: center; color: var(--ep-muted); } .shop-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ep-line-strong); } .shop-crumbs a { color: var(--ep-muted); } .shop-crumbs a:hover { color: var(--ep-primary); } .shop-crumbs [aria-current="page"] { color: var(--ep-text); font-weight: 600; } /* ---------- Startseite: Kopf + Chips ---------- */ .shop-week { padding: 26px 0 8px; } .shop-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ep-primary); } body.shop-body .shop-week h1 { font-size: clamp(30px, 6vw, 46px); margin-top: 6px; } .shop-lead { margin: 10px 0 0; max-width: 62ch; color: var(--ep-muted); font-size: 15px; } .shop-chips { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .shop-chips::-webkit-scrollbar { display: none; } .shop-chip { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: var(--ep-border-w) solid var(--ep-line); background: var(--ep-surface); font-size: 13px; font-weight: 600; color: var(--ep-text); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .shop-chip:hover { border-color: var(--ep-primary); color: var(--ep-primary); } .shop-chip[aria-pressed="true"] { background: var(--ep-text); color: var(--ep-surface); border-color: var(--ep-text); } /* ---------- Startseite: Top-Event ---------- */ .shop-featured { margin: 14px 0 28px; display: grid; grid-template-columns: 1fr; background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--shop-radius); overflow: hidden; box-shadow: var(--shop-shadow); } .shop-featured-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--shop-poster-bg); overflow: hidden; } .shop-featured-media img, .shop-poster-img { display: block; width: 100%; height: 100%; object-fit: cover; } .shop-poster-tag { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.94); color: var(--ep-text); font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; } .shop-featured-body { padding: 18px var(--ep-gutter) 22px; display: grid; gap: 10px; align-content: center; } body.shop-body .shop-featured-body h2 { font-size: clamp(22px, 3.2vw, 32px); } .shop-featured-body h2 a { color: inherit; } .shop-featured-body h2 a:hover { color: var(--ep-primary); } .shop-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ep-muted); font-size: 14px; } .shop-meta > span { display: inline-flex; align-items: center; gap: 6px; } .shop-meta b { color: var(--ep-text); font-weight: 700; } .shop-meta .shop-icon { color: var(--ep-primary); } .shop-featured-desc { margin: 0; color: var(--ep-muted); font-size: 14px; max-width: 58ch; } .shop-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .shop-price .from { font-size: 13px; color: var(--ep-muted); } .shop-price .val { font-size: 22px; font-variant-numeric: tabular-nums; } .shop-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: var(--shop-pink-soft); color: var(--shop-pink); line-height: 1.4; } .shop-badge-float { position: absolute; top: 8px; left: 8px; } .shop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; background: var(--ep-primary); color: var(--ep-on-primary) !important; font-weight: 700; font-size: 15px; border: 0; cursor: pointer; transition: background .15s; } .shop-btn:hover, .shop-btn:focus { background: var(--ep-primary-hover); } .shop-btn.ghost { background: transparent; color: var(--ep-text) !important; border: var(--ep-border-w) solid var(--ep-line); } .shop-link-btn { background: none; border: 0; padding: 0; color: var(--ep-primary); font-weight: 700; cursor: pointer; text-decoration: underline; } @media (min-width: 900px) { .shop-featured { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } /* Top-Karte: fester Ausschnitt statt Originalhoehe (Hochformat-Plakate machten die Karte 900px hoch) */ .shop-featured-media { aspect-ratio: 4 / 3; min-height: 360px; } .shop-featured-media img { object-position: 50% 20%; } .shop-featured-body { padding: 28px 32px; } } /* ---------- Startseite: Raster ---------- */ .shop-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 6px 0 12px; } body.shop-body .shop-sec-h h2 { font-size: 20px; } .shop-count { font-size: 13px; font-weight: 700; color: var(--ep-primary); } .shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; padding-bottom: 28px; } .shop-card { min-width: 0; } .shop-card-link { display: grid; gap: 7px; color: var(--ep-text); } .shop-card-link:hover, .shop-card-link:focus { color: var(--ep-text); text-decoration: none; } .shop-poster { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--shop-poster-bg); box-shadow: var(--shop-shadow); transition: transform .2s, box-shadow .2s; } /* 06.09.2026: einheitlich 16:10 fuer ALLE Karten (vorher 2:3 fuer Hochformat-Plakate -> unruhiges Raster aus gemischten Kartenhoehen). Hochformate werden wie frueher auf einen Ausschnitt beschnitten; Ausschnitt leicht nach oben, weil Plakattitel meist im oberen Drittel sitzen. */ .shop-poster, .shop-poster.is-wide { aspect-ratio: 16 / 10; } .shop-poster:not(.is-wide) .shop-poster-img { object-position: 50% 20%; } .shop-card-link:hover .shop-poster { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(20,32,31,.35); } .shop-date { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-primary); margin-top: 3px; } body.shop-body .shop-card h3 { font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .shop-card-link:hover h3 { color: var(--ep-primary); } .shop-card .where { font-size: 13px; color: var(--ep-muted); overflow-wrap: anywhere; } .shop-card .p { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .shop-grid [hidden], .shop-featured[hidden] { display: none !important; } .shop-empty { margin: -8px 0 28px; padding: 16px; background: var(--ep-surface); border: var(--ep-border-w) dashed var(--ep-line-strong); border-radius: var(--shop-radius); color: var(--ep-muted); text-align: center; } .shop-empty-state { margin: 14px 0 28px; padding: 32px var(--ep-gutter); background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--shop-radius); text-align: center; } body.shop-body .shop-empty-state h2 { font-size: 22px; margin-bottom: 8px; } @media (min-width: 900px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 24px; } .shop-grid.is-filtered { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- Startseite: Vertrauen + Stimmen ---------- */ .shop-trust { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 8px 0 28px; } .shop-trust > div, .shop-review { background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: 12px; padding: 14px; font-size: 13px; color: var(--ep-muted); line-height: 1.4; margin: 0; } .shop-trust > div > b { display: block; color: var(--ep-text); font-size: 15px; margin-bottom: 3px; font-family: var(--ep-font-display); font-weight: 700; } .shop-review { border-left: 3px solid var(--shop-tint-2); } .shop-review p { margin: 0 0 6px; color: var(--ep-text); font-size: 14px; } .shop-review footer { font-size: 12px; font-weight: 700; color: var(--ep-muted); } .shop-review footer::before { content: "— "; } @media (min-width: 720px) { .shop-trust { grid-template-columns: repeat(3, 1fr); } } /* ---------- Startseite: SEO-Text ---------- */ .shop-seo { display: grid; grid-template-columns: 1fr; gap: 24px 40px; padding: 8px 0 var(--ep-section-y); border-top: var(--ep-border-w) solid var(--ep-line); margin-top: 8px; padding-top: 28px; color: var(--ep-muted); font-size: 14px; } body.shop-body .shop-seo h2 { font-size: 18px; margin-bottom: 8px; } .shop-seo p { margin: 0 0 10px; line-height: 1.6; } .shop-seo a { font-weight: 600; } @media (min-width: 800px) { .shop-seo { grid-template-columns: 1fr 1fr; } } /* ---------- Footer ---------- */ .shop-footer { border-top: var(--ep-border-w) solid var(--ep-line); background: var(--ep-surface); color: var(--ep-muted); font-size: 14px; margin-top: var(--ep-section-y); } .shop-footer-in { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-block: 32px 20px; } .shop-footer-brand { grid-column: 1 / -1; } .shop-footer-brand img { height: 30px; width: auto; } .shop-footer-brand p { margin: 10px 0 0; max-width: 40ch; } body.shop-body .shop-footer h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-text); margin-bottom: 10px; font-weight: 700; } .shop-footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .shop-footer-nav a { color: var(--ep-muted); display: inline-block; padding: 3px 0; } .shop-footer-nav a:hover { color: var(--ep-primary); } .shop-footer-cond p { margin: 0; } .shop-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding-block: 14px 22px; border-top: var(--ep-border-w) solid var(--ep-line); font-size: 12px; } .shop-footer-bottom a { color: var(--ep-muted); } @media (min-width: 800px) { .shop-footer-in { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } .shop-footer-brand { grid-column: auto; } } /* ---------- Legacy-Inhalte (cart.php, meinkonto, impressum ...) ---------- */ /* Bootstrap-Seiten laufen ueber ticket-bridge.css (body.ep-with-base). Hier nur Rahmen: Container-Breite, Abstaende, alte Skin-Klassen auf Tokens. */ body.shop-inner .shop-main { padding-block: 20px var(--ep-section-y); } body.shop-inner .shop-legacy { padding-inline: 0; max-width: none; } body.shop-inner .shop-legacy > .container, body.shop-inner .shop-legacy .container { width: 100%; max-width: var(--ep-container); padding-inline: var(--ep-gutter); margin-inline: auto; } body.shop-inner .shop-legacy .content, body.shop-inner .shop-legacy .nicepad { padding-block: 8px; } body.shop-inner .shop-legacy h1.big { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 6px 0 18px; } body.shop-inner .shop-legacy .bg.colored, body.shop-inner .shop-legacy .bg.colored.softed50 { background: var(--shop-tint); color: var(--ep-primary); padding: 2px 8px; border-radius: 6px; } body.shop-inner .shop-legacy .white_bg { background: transparent; } body.shop-inner .shop-legacy .margin_30, body.shop-inner .shop-legacy .margin_60 { padding-block: 12px; } body.shop-inner .shop-legacy address { line-height: 1.6; } body.shop-inner .shop-legacy .dl-horizontal dt { text-align: left; } body.shop-inner .shop-legacy .main_title { text-align: left; margin-bottom: 16px; } body.shop-inner .shop-legacy .main_title h2 span { color: var(--ep-primary); } body.shop-inner .shop-legacy .btn.white { background: var(--ep-surface); color: var(--ep-text); border-color: var(--ep-line-strong); } body.shop-inner .shop-legacy .banner { background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--shop-radius); color: var(--ep-text); padding: 20px; } body.shop-inner .shop-legacy .banner.colordark { background: var(--ep-primary); color: var(--ep-on-primary); } body.shop-inner .shop-legacy .banner.colordark .colorsoft { color: var(--shop-tint); } body.shop-inner .shop-legacy .feature_home { background: var(--ep-surface); border: var(--ep-border-w) solid var(--ep-line); border-radius: var(--shop-radius); padding: 18px; margin-bottom: 16px; } body.shop-inner .shop-legacy .feature_home i { display: none; } body.shop-inner .shop-legacy .list_order { list-style: none; padding: 0; } body.shop-inner .shop-legacy .list_order li span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ep-primary); color: var(--ep-on-primary); margin-right: 8px; font-weight: 700; font-size: 13px; } body.shop-inner .shop-legacy .modal { z-index: 1060; } body.shop-inner .shop-legacy .modal-backdrop { z-index: 1055; } body.shop-inner .shop-legacy .table-responsive { overflow-x: auto; } body.shop-inner .shop-legacy .hidden-xs.info, body.shop-inner .shop-legacy .visible-xs.info { display: none; } /* ---------- Cookie-Bar (jquery.cookiebar) ---------- */ body.shop-body #cookie-bar { background: var(--ep-text); color: var(--ep-surface); padding: 12px var(--ep-gutter) calc(12px + env(safe-area-inset-bottom)); line-height: 1.45; font-size: 14px; text-align: left; box-shadow: 0 -8px 30px -16px rgba(0,0,0,.4); } body.shop-body #cookie-bar.fixed { z-index: 70; } body.shop-body #cookie-bar p { max-width: var(--ep-container); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } body.shop-body #cookie-bar a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; margin: 0; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ep-surface); background: rgba(255,255,255,.12); } body.shop-body #cookie-bar .cb-enable { background: var(--ep-primary); color: var(--ep-on-primary); margin-left: auto; } body.shop-body #cookie-bar .cb-enable:hover { background: var(--shop-tint-2); color: var(--ep-text); } body.shop-body #cookie-bar .cb-disable { background: transparent; border: 1px solid rgba(255,255,255,.4); } body.shop-body #cookie-bar .cb-policy { background: transparent; text-decoration: underline; padding-inline: 4px; } @media (max-width: 480px) { body.shop-body #cookie-bar a { display: inline-flex; max-width: none; margin: 0; } body.shop-body #cookie-bar .cb-enable { margin-left: 0; } } /* ---------- toTop / Overlay / Preloader (functions.js) ---------- */ #toTop.shop-totop { display: none; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: var(--ep-border-w) solid var(--ep-line); background: var(--ep-surface); color: var(--ep-text); box-shadow: var(--shop-shadow); cursor: pointer; } #toTop.shop-totop .shop-icon { width: 20px; height: 20px; } #toTop.shop-totop:hover { color: var(--ep-primary); border-color: var(--ep-primary); } #overlay.shop-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(20,32,31,.45); } #overlay.shop-overlay .page-loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ep-surface); color: var(--ep-text); border-radius: var(--shop-radius); padding: 22px 24px; max-width: min(92vw, 420px); box-shadow: var(--ep-shadow-lg); text-align: center; } #overlay.shop-overlay .page-loader p { margin: 0; } #preloader { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(255,255,255,.75); } #preloader .page-loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ep-surface); border-radius: var(--shop-radius); padding: 22px 24px; box-shadow: var(--ep-shadow-lg); text-align: center; } .loading-logo { display: block; width: 36px; height: 36px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid var(--shop-tint); border-top-color: var(--ep-primary); animation: shop-spin .8s linear infinite; } @keyframes shop-spin { to { transform: rotate(360deg); } } /* ---------- Motion / Print ---------- */ @media (prefers-reduced-motion: reduce) { html.shop-html { scroll-behavior: auto; } .shop-poster, .shop-nav-caret, .shop-chip, .shop-btn, .shop-search { transition: none; } .loading-logo { animation: none; } } @media print { .shop-header, .shop-drawer, .shop-footer, .shop-chips, #toTop, #cookie-bar, .shop-skip, .shop-crumbs { display: none !important; } body.shop-body { background: #fff; color: #000; } .shop-poster, .shop-featured { box-shadow: none; } }