/* ============================================================
PIOS Desktop — "Ember" stylesheet (desktop redesign)
Direction: docs/design-direction-desktop.md
Tokens: css/desktop/tokens.css (loads before this file)
Operator colors (cache/styles2.css) load AFTER this file and
stay authoritative on the contract selectors.
Sections are added per work package:
[WP2] shell: header, nav, footer, page grid
[WP3] product list elements
[WP4] order rail: cart, order form
[WP5] extras popup + upsell nudges
[WP6] checkout modal + fragments
[WP7] static/feedback/jobs/404
box-sizing is applied per redesigned component, never globally
(legacy table layout depends on content-box).
============================================================ */
/* ---- fonts (self-hosted, OFL; vendored in /fonts) ---- */
@font-face {
font-family: 'Bricolage Grotesque';
src: url('../../fonts/bricolage-grotesque-var-latin.woff2') format('woff2-variations');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
/* ============================================================
[WP2] SHELL — page frame, header, nav, footer
============================================================ */
/* two-column grid (content + order rail) is owned by tee.css (.mMenuC2 grid,
360px rail); the superseded desktop.css copy was removed in WP6.2. This
child rule stays — it pins every child to column 1 inside that grid. */
.mMenuC2 > * { min-width: 0; grid-column: 1; }
.mMenuC2 > #orderBox {
grid-column: 2;
grid-row: 1 / span 9; /* rail's containing block spans the whole left column (sticky) */
width: auto;
float: none;
position: sticky;
top: var(--pd-sp-3);
}
/* ---- main nav: flex row instead of floats; display face;
colors stay operator-owned (ml/mlh/mbg rows load after us) ---- */
.mMenuC .mLinksBox {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--pd-sp-1);
padding: 0 var(--pd-sp-2);
}
.mMenuC .mLink {
float: none;
margin: 0;
padding: 9px 14px;
font-family: var(--pd-font-display);
font-size: var(--pd-fs-m);
font-weight: 650;
letter-spacing: 0.01em;
line-height: var(--pd-lh-tight);
border-radius: var(--pd-r-s) var(--pd-r-s) 0 0;
text-decoration: none;
transition: background-color var(--pd-t-fast) var(--pd-ease),
color var(--pd-t-fast) var(--pd-ease);
}
.mMenuC .mLink:active { transform: scale(0.97); }
.mLinksBox .mLink:focus-visible,
#footer a:focus-visible {
outline: none;
box-shadow: var(--pd-focus-ring);
border-radius: var(--pd-r-s);
}
/* ---- footer: quiet hairline strip ---- */
#footer {
clear: both;
margin-top: var(--pd-sp-6);
border-top: 1px solid var(--pd-line);
padding: var(--pd-sp-4) 0 var(--pd-sp-5);
}
#footer .mMenuC {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pd-sp-2) var(--pd-sp-5);
}
#footer a {
float: none !important;
margin: 0 !important;
padding: 4px 6px !important;
font-size: var(--pd-fs-s);
text-decoration: none;
border-radius: var(--pd-r-s);
transition: color var(--pd-t-fast) var(--pd-ease);
}
/* ---- motion guardrails (shell-wide) ---- */
@media (prefers-reduced-motion: reduce) {
.mMenuC .mLink,
#footer a { transition-duration: 0ms; }
.mMenuC .mLink:active { transform: none; }
}
/* ============================================================
[WP3] PRODUCT LIST ELEMENTS — .p-row/.p-price markup
Colors on the contract selectors (pbg/pbpn/pbpd/pbp/pbpmo,
hc on h2) come from the operator layer that loads after us;
this section owns shape, type, spacing and motion only, plus
token DEFAULTS that the operator layer may repaint.
============================================================ */
/* ---- separator: the menu-card register ---- */
#productsBox .seperator {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--pd-sp-4);
margin: var(--pd-sp-6) 0 var(--pd-sp-3);
padding-bottom: var(--pd-sp-2);
border-bottom: 1px solid var(--pd-line);
}
#productsBox .seperator:first-child,
#productsBox .sep_nth2 + .seperator { margin-top: var(--pd-sp-4); }
#productsBox .seperator h2 {
font-family: var(--pd-font-display);
font-weight: 750;
font-size: var(--pd-fs-xl);
line-height: var(--pd-lh-tight);
letter-spacing: var(--pd-track-display);
text-transform: none;
margin: 0;
}
#productsBox .seperator header p {
margin: var(--pd-sp-1) 0 0;
max-width: 62ch;
font-size: var(--pd-fs-s);
line-height: 1.45;
}
#productsBox .seperator .right {
display: flex;
gap: var(--pd-sp-2);
flex: none;
}
#productsBox .seperator .right span {
position: static;
display: block;
min-width: 72px;
padding: 3px 8px;
text-align: center;
font-family: var(--pd-font-num);
font-size: var(--pd-fs-xs);
font-weight: 600;
border-radius: var(--pd-r-s);
}
/* image separator: banner keeps its inline height/background; text sits on a scrim */
#productsBox .seperator_img {
display: block;
position: relative;
border-bottom: none;
border-radius: var(--pd-r-m);
overflow: hidden;
background-size: cover !important;
}
#productsBox .seperator_img header {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--pd-sp-3) var(--pd-sp-4);
background: linear-gradient(to top, rgba(10,10,12,0.72), rgba(10,10,12,0));
}
#productsBox .seperator_img .right { display: none; }
/* ---- product row (no-photo list) ---- */
#productsBox .products {
/* clear: legacy _S photo tiles float in pairs; as full-width blocks the
articles would otherwise paint their background OVER the floats */
clear: both;
border-radius: var(--pd-r-s);
margin-bottom: 6px;
transition: background-color var(--pd-t-fast) var(--pd-ease);
}
#productsBox .html_block { clear: both; }
.products .p-row {
display: flex;
align-items: center;
gap: var(--pd-sp-4);
padding: var(--pd-sp-3) var(--pd-sp-4);
}
.p-info { flex: 1 1 auto; min-width: 0; }
.p-info b {
display: block;
font-size: var(--pd-fs-m);
font-weight: 600;
line-height: 1.3;
}
.p-info .p-des {
margin: 2px 0 0;
font-size: var(--pd-fs-s);
line-height: 1.45;
color: inherit;
opacity: 0.75;
}
.p-info sup { position: relative; top: 1px; padding: 0 2px; font-size: 8px; }
/* signature: the dish number as scan anchor */
.p-num {
font-family: var(--pd-font-num);
font-variant-numeric: tabular-nums;
font-weight: 800;
color: var(--pd-accent);
padding-right: 2px;
}
/* ---- price control (the primary CTA of the menu page) ---- */
.p-price { flex: none; }
.p-price a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 76px;
min-height: 40px;
padding: 6px 14px;
border-radius: var(--pd-r-pill);
font-family: var(--pd-font-num);
font-variant-numeric: tabular-nums;
font-size: var(--pd-fs-base);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
background: var(--pd-surface-2); /* default; operator pbp repaints */
color: var(--pd-ink); /* default; operator pbp repaints */
transition: background-color var(--pd-t-fast) var(--pd-ease),
color var(--pd-t-fast) var(--pd-ease),
transform var(--pd-t-fast) var(--pd-ease);
}
.p-price a:active { transform: scale(0.96); }
.p-price a:focus-visible {
outline: none;
box-shadow: var(--pd-focus-ring);
}
/* size label inside a photo-tile price pill */
.p-price a b {
font-size: var(--pd-fs-xs);
font-weight: 400;
line-height: 1.1;
opacity: 0.8;
}
.p-price a .p2 { display: block; }
/* ---- photo cards (.productsWI): price row pinned bottom-right ---- */
.productsWI { border-radius: var(--pd-r-m); }
.productsWI .p-row {
position: absolute;
right: 8px;
bottom: 8px;
display: flex;
justify-content: flex-end;
gap: 6px;
z-index: 4;
}
.productsWI .p-price a { min-height: 44px; }
/* ---- operator HTML block ---- */
#productsBox .html_block { margin: var(--pd-sp-4) 0; }
/* ============================================================
[WP4] ORDER RAIL — voucher, cart, order form
Operator rows (fbg/ffbg on the frames, cibg/ciText on cart
items, ibbg/ibt on inputs, bbg/bt on buttons, fhc/ftc/fta on
rail text) repaint colors after us; we own shape and rhythm.
============================================================ */
#orderBox,
#orderBox * { box-sizing: border-box; }
#orderBox {
border-radius: var(--pd-r-m);
padding: var(--pd-sp-3);
}
#orderBox .formBlock { border-radius: var(--pd-r-s); }
/* rail section titles in the display face */
.oBoxTitle {
font-family: var(--pd-font-display);
font-size: var(--pd-fs-l);
font-weight: 700;
letter-spacing: var(--pd-track-display);
text-transform: none;
padding: var(--pd-sp-2) 0;
}
/* ---- voucher: single-row input + button ---- */
#voucherBox form { display: flex; gap: var(--pd-sp-2); }
#voucherBox #voucherCode { flex: 1 1 auto; min-width: 0; }
/* ---- cart list (markup frozen; shape only) ---- */
#cart ul { list-style: none; margin: 0; padding: 0; }
#cart li.item {
border-radius: var(--pd-r-s);
padding: var(--pd-sp-2) var(--pd-sp-3);
margin-bottom: var(--pd-sp-2);
}
#cart li.item > p:first-child {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--pd-sp-2);
margin: 0 0 2px;
}
#cart li.item .preprice,
#cart li.item .price {
font-family: var(--pd-font-num);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#cart li.item ul li {
display: flex;
align-items: baseline;
gap: var(--pd-sp-2);
font-size: var(--pd-fs-s);
padding: 2px 0;
}
#cart button,
#cart .delCartExtra {
cursor: pointer;
border: none;
border-radius: var(--pd-r-s);
padding: 4px 10px;
font-size: var(--pd-fs-xs);
font-weight: 600;
transition: background-color var(--pd-t-fast) var(--pd-ease),
transform var(--pd-t-fast) var(--pd-ease);
}
#cart button:active { transform: scale(0.96); }
/* totals rows: reserve space, tabular figures, no layout jumps */
#discount_wrapper, #sPledgeB, #sCostsB, #fPrice {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--pd-sp-2);
padding: var(--pd-sp-1) var(--pd-sp-2);
font-variant-numeric: tabular-nums;
}
#discount_wrapper.hidden { display: none; }
#sPledgeB, #sCostsB { font-size: var(--pd-fs-s); white-space: nowrap; }
#fPrice {
margin-top: var(--pd-sp-2);
padding-top: var(--pd-sp-2);
border-top: 1px solid var(--pd-line);
font-size: var(--pd-fs-m);
font-weight: 700;
}
/* ---- order form controls ---- */
#orderForm .fBox { margin-bottom: var(--pd-sp-2); }
#orderForm .fBox p { margin: 0 0 3px; font-size: var(--pd-fs-s); }
#orderForm input[type="text"],
#orderForm input[type="password"],
#orderForm textarea,
#orderForm select,
#voucherBox input[type="text"] {
width: 100%;
padding: 9px 10px;
border: 1px solid var(--pd-line);
border-radius: var(--pd-r-s);
font-family: var(--pd-font-body);
font-size: var(--pd-fs-base);
transition: border-color var(--pd-t-fast) var(--pd-ease),
box-shadow var(--pd-t-fast) var(--pd-ease);
}
#orderForm input:focus-visible,
#orderForm textarea:focus-visible,
#orderForm select:focus-visible,
#voucherBox input:focus-visible {
outline: none;
border-color: var(--pd-accent);
box-shadow: var(--pd-focus-ring);
}
#orderForm textarea { resize: vertical; min-height: 72px; }
#orderForm label.error {
display: block;
font-size: var(--pd-fs-xs);
color: var(--pd-err);
padding-top: 2px;
}
/* Anrede: separate pills (never restyle as a joined buttonset) */
.fBoxradio { margin-bottom: var(--pd-sp-2); }
.fBoxradio > p { margin: 0 0 3px; font-size: var(--pd-fs-s); }
.fBoxradio label {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 var(--pd-sp-2) 0 0;
padding: 7px 14px;
border: 1px solid var(--pd-line);
border-radius: var(--pd-r-pill);
cursor: pointer;
transition: border-color var(--pd-t-fast) var(--pd-ease);
}
.fBoxradio label:has(input:checked) { border-color: var(--pd-accent); }
.fBoxradio input[type="radio"] { accent-color: var(--pd-accent); margin: 0; }
/* opt-in rows */
#orderForm .LXS { display: flex; gap: var(--pd-sp-2); align-items: flex-start; }
#orderForm .LXS input[type="checkbox"] {
flex: none;
width: 16px; height: 16px;
margin-top: 2px;
accent-color: var(--pd-accent);
}
#orderForm .LXS .last { font-size: var(--pd-fs-s); line-height: 1.45; }
/* MOV hint: always reserves its line via min-height when visible */
#orderForm .mov_hint { margin: var(--pd-sp-2) 0 0; font-size: var(--pd-fs-s); }
/* rail CTA family: full-width pill, 48px target — one recipe for the
order CTA and the voucher button (colors stay operator-owned via the
button[type="submit"] rule in cache/styles2.css) */
#sendOrder,
#sendVoucher {
width: 100%;
min-height: 48px;
border: none;
border-radius: var(--pd-r-pill);
font-family: var(--pd-font-display);
font-size: var(--pd-fs-m);
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: transform var(--pd-t-fast) var(--pd-ease),
filter var(--pd-t-fast) var(--pd-ease);
}
#sendOrder:active,
#sendVoucher:active { transform: scale(0.98); }
#sendOrder:focus-visible,
#sendVoucher:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
#sendOrder.btn_disabled { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
#cart button, .p-price a, #sendOrder, #sendVoucher { transition-duration: 0ms; }
#cart button:active, .p-price a:active, #sendOrder:active, #sendVoucher:active { transform: none; }
}
/* ============================================================
[WP5] UPSELL NUDGES + extras popup refinements
(the popup base look still lives in midnight-desktop.css §5
until WP8 ports it; this section adds the revenue nudges)
============================================================ */
/* price pills that open the extras popup carry a quiet "+" badge */
.p-price a { position: relative; }
.p-price a.has-extras::after {
content: "+";
position: absolute;
top: -5px;
right: -3px;
width: 17px;
height: 17px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--pd-r-pill);
background: var(--pd-accent);
color: var(--pd-on-accent);
font-size: 13px;
font-weight: 700;
line-height: 1;
pointer-events: none;
}
/* row microcopy: tells the guest extras exist before the click */
.p-extras-hint {
display: inline-block;
margin-left: var(--pd-sp-1);
font-size: var(--pd-fs-xs);
font-weight: 600;
opacity: 0.9;
color: var(--pd-accent);
white-space: nowrap;
}
/* ============================================================
[WP7] SECONDARY PAGES — static, feedback, jobs, 404
Text colors on #static/.textColor and #static a stay operator-
owned (tc/lc/lch rows); we own rhythm and typography.
============================================================ */
/* operator-authored Quill HTML gets typographic defaults */
#static {
width: auto;
float: none;
font-size: var(--pd-fs-base);
line-height: var(--pd-lh-body);
padding: var(--pd-sp-4) var(--pd-sp-4) var(--pd-sp-5);
border-radius: var(--pd-r-m);
}
#static h1, #static h2, #static h3 {
font-family: var(--pd-font-display);
letter-spacing: var(--pd-track-display);
line-height: var(--pd-lh-tight);
margin: var(--pd-sp-5) 0 var(--pd-sp-2);
}
#static h1 { font-size: var(--pd-fs-xl); }
#static h2 { font-size: var(--pd-fs-l); }
#static h3 { font-size: var(--pd-fs-m); }
#static p, #static ul, #static ol { margin: 0 0 var(--pd-sp-3); max-width: 72ch; }
#static ul, #static ol { padding-left: 1.4em; }
#static table { border-collapse: collapse; }
#static td, #static th { border: 1px solid var(--pd-line); padding: 6px 10px; }
/* feedback: rating tiles lose the cream chip look, gain list rhythm */
.ratebox {
width: 31%;
box-sizing: border-box;
padding: var(--pd-sp-2) var(--pd-sp-3);
margin: 0 2% var(--pd-sp-3) 0;
border-radius: var(--pd-r-s);
/* dark surface: operator headerCol accent stays readable on it */
background: var(--pd-surface-2);
color: var(--pd-ink);
}
.ratebox p { font-size: var(--pd-fs-s); font-weight: 600; }
/* jobs: Rosario is gone; inherit the body face with sane rhythm */
#jobsform table { border-collapse: collapse; }
#jobsform td { padding: 4px 6px; }
#jobsform input[type="text"], #jobsform textarea {
padding: 8px 10px;
border: 1px solid var(--pd-line);
border-radius: var(--pd-r-s);
font-family: var(--pd-font-body);
}
/* ============================================================
[WP6] CHECKOUT MODAL + AJAX FRAGMENTS
Light legacy panel: colors stay EXPLICIT (light surface + dark
ink from tokens) - never inherited (dark-skin lesson). Fancybox
type:inline measures this node, so the width must be explicit.
============================================================ */
#checkOut {
box-sizing: border-box;
min-width: 480px;
max-width: 480px;
min-height: 190px;
max-height: none;
padding: var(--pd-sp-4);
background: var(--pd-surface-light);
color: var(--pd-ink-on-light);
font-family: var(--pd-font-body);
overflow: hidden;
}
#checkOut .coTitle {
color: var(--pd-err) !important; /* legacy uses !important on the base rule */
font-family: var(--pd-font-display);
font-size: var(--pd-fs-l);
font-weight: 700;
line-height: var(--pd-lh-tight);
padding-bottom: var(--pd-sp-2);
}
#checkOut .coTitle .green { color: var(--pd-ok); }
#coContent h3 {
font-size: var(--pd-fs-base);
line-height: 1.5;
color: var(--pd-ink-on-light);
}
#coContent h3 span {
color: var(--pd-ink-on-light);
background: #FFFFFF;
border: 1px solid var(--pd-line);
border-radius: var(--pd-r-s);
padding: var(--pd-sp-2) var(--pd-sp-3);
font-size: var(--pd-fs-s);
}
#coContent select { font-size: var(--pd-fs-base); padding: 6px 8px; border-radius: var(--pd-r-s); }
#checkOut #aLoader { display: block; margin: var(--pd-sp-3) auto; }
/* popup: required groups flagged up front, not only on failed submit */
#popUpExtras .eDes .e-required {
display: inline-block;
margin-left: var(--pd-sp-2);
padding: 2px 8px;
border-radius: var(--pd-r-pill);
background: var(--pd-accent-soft);
color: var(--pd-accent);
font-size: var(--pd-fs-xs);
font-weight: 700;
vertical-align: middle;
}
/* ============================================================
[WP8/2] PORTS FROM THE RETIRED midnight-desktop.css
Verbatim moves so the retirement is visually neutral. The
midnight :root tokens died with the file; the popup + cookie
blocks keep their var() references via the SCOPED legacy-token
block below (gold palette). Harmonising these to the Ember
--pd-* accents is a separate ticket, pending operator sign-off.
============================================================ */
/* scoped legacy tokens (ex midnight :root) — popup + cookie only */
#popUpExtras,
#cookiedingsbums {
--surface: #1c1c21;
--surface-2: #24242b;
--line: #2c2c34;
--text: #f3f3f5;
--muted: #9a9aa4;
--gold: #f0b24b;
--gold-hi: #ffc76b;
--gold-soft: rgba(240,178,75,.14);
--gold-ring: rgba(240,178,75,.38);
--gold-ink: #1a1206;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--dur-press: 140ms;
}
/* panel rounding utilities (ex midnight): empty stubs in the legacy
base sheet, so these carry the actual radius (#content, WI panels) */
.roundedL, #content.roundedL { border-radius: 14px; }
.roundedS { border-radius: 10px; }
.roundedLL { border-radius: 14px; }
/* generic keyboard focus (ex midnight §1b), unified on the Ember ring.
Component-specific rings above (orderform, nav, price pills) keep
their own rules; .selectBox-dropdown lives in legacy-widgets.css. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible,
.cssbutton:focus-visible,
.mLinksBox .mLink:focus-visible,
#footer a:focus-visible,
.fBoxradio label:focus-within,
a:focus-visible {
outline: none;
border-color: var(--pd-accent);
box-shadow: var(--pd-focus-ring);
}
/* text inputs draw the ring even without a visible border */
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible { box-shadow: var(--pd-focus-ring), 0 0 0 1px var(--pd-accent); }
/* cookie consent bar (consolidated: structure ex styles.css:864-868,
skin ex midnight §2d — the midnight values were the visible winners) */
#cookiedingsbums {
position: fixed;
bottom: 0px;
z-index: 10000;
width: 100%;
font-size: 12px;
line-height: 16px;
text-align: right;
background: var(--surface);
border-top: 1px solid var(--line);
color: var(--text);
}
#cookiedingsbums div { padding: 10px; padding-right: 40px; }
#cookiedingsbums a { color: var(--gold); text-decoration: none; }
#cookiedingsbums a:hover { color: var(--gold-hi); text-decoration: underline; }
#cookiedingsbumsCloser {
position: absolute;
right: 5px;
top: 5px;
padding: 4px;
cursor: pointer;
font: 14px/100% arial, sans-serif;
text-decoration: none;
text-shadow: none;
background: var(--surface-2);
color: var(--muted);
border: 1px solid var(--line);
}
#cookiedingsbumsCloser:hover { color: var(--text); border-color: var(--gold-ring); }
/* ---------------------------------------------------------------------------
Extras popup (#popUpExtras) — ex midnight §5, moved verbatim.
Legacy layout packed 172px inline-block buttons into a 718px shell with 11px
text; the selected-extras bar was a white panel whose white price text was
invisible on dark. Here: a wider modal, a real responsive grid with gaps,
roomy dark-surface option tiles (gold price, gold-ring hover), a dark
selected-extras bar, a gold primary CTA, and breathing room between sections.
Additive only — operator colors from cache/styles2.css keep winning where
they win today (same selectors, no specificity changes).
------------------------------------------------------------------------- */
/* wider, better-padded shell (fancybox sizes the modal to this element's box) */
#popUpExtras { box-sizing: border-box; width: 900px; padding: 20px 24px 24px; }
/* tighten the legacy 10px spacer rhythm inside the modal */
#popUpExtras .free10 { height: 8px; }
/* product header — title reads as the anchor; base price is secondary (muted,
tabular) so the running total below is the one hero number, not a duplicate. */
#popUpExtras #mainProduct { padding-bottom: 8px; }
#popUpExtras #mainProduct p { letter-spacing: -0.01em; line-height: 1.05; }
#popUpExtras #mainProduct #pricePur {
color: var(--muted);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* selected-extras bar: was a white panel (white price text -> invisible).
Dark surface so the running total and removable chips read clearly. */
#popUpExtras #extrasBox {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 10px;
min-height: 40px;
margin: 0 0 6px;
}
#popUpExtras #extrasBox p { padding: 9px 12px; }
/* persistent field label -> the bar reads as "your selection" even when empty,
instead of a blank box; chosen chips flow in after it. */
#popUpExtras #extrasBox p::before {
content: "Ausgewählt";
display: inline-block;
margin-right: 12px;
vertical-align: middle;
color: var(--muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#popUpExtras #extrasBox #priceExtras {
color: var(--text);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
#popUpExtras #extrasBox button.delItemExtra {
height: auto;
padding: 5px 10px;
border-radius: 8px;
background: var(--surface-2);
color: var(--text);
box-shadow: inset 0 0 0 1px var(--line);
}
#popUpExtras #extrasBox button.delItemExtra:hover {
background: var(--gold-soft);
color: var(--gold);
box-shadow: inset 0 0 0 1px var(--gold-ring);
}
/* Summe + CTA — a proper action bar: total on the left, one gold CTA on the
right. Fills the width instead of floating right into dead space. */
#popUpExtras #allPriceBox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 12px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
#popUpExtras #allPriceBox #allPrice {
display: flex;
align-items: baseline;
gap: 8px;
float: none;
height: auto;
margin: 0;
}
#popUpExtras #allPriceBox #allPrice span {
float: none;
margin: 0;
color: var(--muted);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
#popUpExtras #allPriceBox #allPrice p {
float: none;
height: auto;
margin: 0;
font-size: 26px;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
#popUpExtras #allPriceBox #allPrice b { font-weight: 700; }
#popUpExtras #allPriceBox #editNow,
#popUpExtras #allPriceBox #orderNow { float: none; height: auto; margin: 0; }
#popUpExtras #editNow button,
#popUpExtras #orderNow button {
display: inline-flex;
align-items: center;
justify-content: center;
height: auto !important;
padding: 11px 22px !important;
border-radius: 10px;
background: var(--gold);
color: var(--gold-ink);
font-size: 14px;
font-weight: 700;
transition: background var(--dur-press) var(--ease-out),
transform var(--dur-press) var(--ease-out);
}
#popUpExtras #editNow button:hover,
#popUpExtras #orderNow button:hover { background: var(--gold-hi); color: var(--gold-ink); }
#popUpExtras #editNow button:active,
#popUpExtras #orderNow button:active { transform: scale(0.97); }
/* remove the raster cart icon from the CTA (per request) */
#popUpExtras #editNow button .cartSym, #popUpExtras #editNow button .myCart,
#popUpExtras #orderNow button .cartSym, #popUpExtras #orderNow button .myCart { display: none; }
/* group intro heading ("Wünschen Sie zusätzliche Saucen…") — unclamp + space */
#popUpExtras > .eDes { height: auto; margin-top: 4px; }
#popUpExtras > .eDes span { font-size: 18px; padding: 6px 0 10px 2px; }
/* options list -> responsive grid with gaps (was 172px inline-block flow).
NB: target only the DIRECT-child wrapper — a descendant selector would
also hit the
product name inside each button and stretch it. */
#popUpExtras #extrasList { padding: 0 2px; clear: both; }
#popUpExtras #extrasList > p {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px 10px;
width: auto;
padding: 0;
}
/* group separators (Saucen / Extras / Verp. Schale) span the full grid width */
#popUpExtras #extrasList > p > .extra_seperator {
grid-column: 1 / -1;
margin: 12px 0 2px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
#popUpExtras #extrasList > p > .extra_seperator:first-child {
margin-top: 2px;
padding-top: 2px;
border-top: none;
}
#popUpExtras #extrasList > p > .extra_seperator span {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.92;
padding: 0 0 6px;
}
/* option buttons — roomy dark-surface tiles, name left / gold price right */
#popUpExtras #extrasList button.itemExtraList {
display: flex;
align-items: center;
gap: 10px;
width: auto;
height: auto;
min-height: 44px;
margin: 0;
padding: 9px 14px;
font-size: 13px;
line-height: 1.25;
text-align: left;
border-radius: 10px;
background: var(--surface-2);
color: var(--text);
box-shadow: inset 0 0 0 1px var(--line);
transition: background var(--dur-press) var(--ease-out),
color var(--dur-press) var(--ease-out),
box-shadow var(--dur-press) var(--ease-out),
transform var(--dur-press) var(--ease-out);
}
#popUpExtras #extrasList button.itemExtraList:hover {
background: var(--gold-soft);
color: var(--gold);
box-shadow: inset 0 0 0 1px var(--gold-ring);
}
#popUpExtras #extrasList button.itemExtraList:active { transform: scale(0.98); }
#popUpExtras #extrasList button.itemExtraList .l { float: none; margin: 0; min-width: 0; font-weight: 600; }
/* "add" affordance as its own flex item (button::before), not inside the name —
so it stays vertically centred and keeps its own column: a wrapping name hangs
cleanly beside it instead of flowing under it. No emoji; a plain "+" glyph.
Kept off .l so allergen in other names isn't turned into a flex item. */
#popUpExtras #extrasList button.itemExtraList::before {
content: "+";
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid var(--gold-ring);
background: var(--gold-soft);
color: var(--gold);
font-size: 15px;
font-weight: 600;
line-height: 1;
}
#popUpExtras #extrasList button.itemExtraList:hover::before {
background: var(--gold);
color: var(--gold-ink);
border-color: var(--gold);
}
#popUpExtras #extrasList button.itemExtraList .r {
float: none;
margin-left: auto;
flex: 0 0 auto;
color: var(--gold);
font-weight: 700;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#popUpExtras #extrasList button.itemExtraList:hover .r { color: var(--gold-hi); }
/* (WP4) The Fancybox centering rules for #popUpExtras were removed — the modal now
lives in the native