/* ============================================================
MENU PARITY — Restore old production product-card styles.
Scoped to product cards ONLY.
Product cards = [class*="gradient-card"][class*="flex-col"]
(cart items also use gradient-card but WITHOUT flex-col,
so they are excluded automatically).
Loaded AFTER the Vite bundle CSS, so !important overrides stick.
Works WITH menu-parity.js (DOM normalization) and as a
standalone CSS fallback if JS has not run yet.
FINAL CORRECTION (2026-09-12):
- Product-name typography is pinned to the OLD production
evidence (bundle index-CnP9qaR6.js + index-Bped6NQU.css):
font-family inherited from the GLOBAL stack (NOT Daniela
Butters, which old production used only for the logo),
font-weight 600 (font-semibold), text-lg 18px, line-height
1.25 (leading-tight), letter-spacing normal.
- Mobile quantity/weight is REQUIRED to stay visible in every
card (old production showed "259 шт.", "16 шт.", "500 гр",
"1 кг", ...). Visibility is forced with display/visibility/
opacity so no bundle rule or line-clamp can hide it.
============================================================ */
/* ----------------------------------------------------------
1. PRODUCT NAME — OLD PRODUCTION EVIDENCE
Old bundle card h3 classes (index-CnP9qaR6.js, TA card):
font-semibold text-foreground text-lg leading-tight
flex-1 mr-2
=> font-weight 600, font-size 18px (text-lg, SAME on
mobile — old bundle has NO sm:/md: size override),
line-height 1.25 (leading-tight), letter-spacing normal
(no tracking-* class on the card h3).
font-family: NOT set on the card h3 -> it INHERITS the
global stack from Tailwind preflight `html,:host`:
ui-sans-serif, system-ui, sans-serif, "Apple Color
Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto
Color Emoji".
DanielaButters is used by OLD production ONLY for the
"Salat Chita" logo via inline style fontFamily, never for
product names.
New bundle: text-sm sm:text-base leading-snug line-clamp-2
---------------------------------------------------------- */
#menu [class*="gradient-card"][class*="flex-col"] h3.font-semibold {
font-family: inherit !important; /* global stack above */
font-size: 1.125rem !important; /* text-lg = 18px */
font-weight: 600 !important; /* font-semibold */
line-height: 1.25 !important; /* leading-tight */
letter-spacing: normal !important; /* no tracking-* in old */
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
display: block !important; /* undo -webkit-box */
}
/* ----------------------------------------------------------
2. PRICE BADGE — old: bg-[#444c00], white text, small badge
Matches the price span in BOTH DOM shapes:
a) before JS: inside the original price+weight row
b) after JS: inside the name+price row
---------------------------------------------------------- */
#menu [class*="gradient-card"][class*="flex-col"] span.shrink-0 {
background-color: #444c00 !important;
color: #ffffff !important;
padding: 2px 10px !important;
border-radius: 6px !important; /* ~rounded-md */
font-size: 0.875rem !important; /* text-sm = 14px */
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
line-height: 1.25rem !important;
width: auto !important;
flex: 0 0 auto !important;
}
/* ----------------------------------------------------------
3. WEIGHT / QUANTITY — old: p.text-sm.text-muted-foreground
New bundle: inline span.text-xs.truncate sharing a row
a) before JS: allow the parent row to wrap so weight
drops onto its own line, and un-truncate it.
---------------------------------------------------------- */
#menu [class*="gradient-card"][class*="flex-col"]
.flex.items-center.justify-between {
flex-wrap: wrap !important;
}
#menu [class*="gradient-card"][class*="flex-col"]
span.truncate.text-muted-foreground {
flex-basis: 100% !important;
width: 100% !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
font-size: 0.875rem !important; /* text-sm = 14px */
margin-top: 4px !important;
}
/* b) after JS: the weight is a real ; keep muted like old */
#menu [class*="gradient-card"][class*="flex-col"]
p.text-sm.text-muted-foreground {
margin-bottom: 0.75rem !important; /* mb-3 (old prod) */
}
/* ----------------------------------------------------------
4. PLUS BUTTON — old: 40×40 round (rounded-full)
New bundle: w-9 h-9 sm:w-10 sm:h-10 (square corners)
---------------------------------------------------------- */
#menu [class*="gradient-card"][class*="flex-col"]
button[class*="bg-[#444c00]"] {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
border-radius: 50% !important; /* rounded-full */
}
/* ----------------------------------------------------------
5. MOBILE 768px and under — old production overrides:
card position relative, price absolute bottom-left,
+ button absolute bottom-right.
---------------------------------------------------------- */
@media (max-width: 768px) {
/* Card wrapper → relative + bottom padding for pinned elements */
#menu [class*="gradient-card"][class*="flex-col"] {
position: relative !important;
padding-bottom: 56px !important;
}
/* Price badge → bottom-left */
#menu [class*="gradient-card"][class*="flex-col"] span.shrink-0 {
position: absolute !important;
bottom: 10px !important;
left: 12px !important;
z-index: 2;
margin: 0 !important;
}
/* Weight → MUST STAY VISIBLE on mobile (old production showed
quantity/weight in every card: "259 шт.", "16 шт.",
"500 гр", "1 кг", etc. — the catalog value is used verbatim,
no unit is invented).
IMPORTANT: an earlier report claimed "Mobile <=768px: weight
hidden" — that is WRONG. The rules below force it visible,
un-truncated, un-ellipsized, on its own readable line. The
absolute price badge (bottom-left) and + button (bottom-right)
live inside the 56px bottom padding zone and never overlap
this in-flow line. */
#menu [class*="gradient-card"][class*="flex-col"]
span.truncate.text-muted-foreground {
display: block !important; /* must be visible */
visibility: visible !important;
opacity: 1 !important;
font-size: 0.875rem !important; /* 14px readable */
white-space: normal !important; /* allow wrap */
overflow: visible !important;
text-overflow: clip !important;
flex-basis: 100% !important;
width: 100% !important;
margin-top: 4px !important;
}
#menu [class*="gradient-card"][class*="flex-col"]
p.text-sm.text-muted-foreground {
display: block !important; /* must be visible */
visibility: visible !important;
opacity: 1 !important;
margin-bottom: 0.75rem !important; /* mb-3 */
}
/* + button container → bottom-right */
#menu [class*="gradient-card"][class*="flex-col"]
.flex.justify-end {
position: absolute !important;
bottom: 8px !important;
right: 8px !important;
z-index: 2;
padding: 0 !important;
margin: 0 !important;
}
}
/* ----------------------------------------------------------
6. PRODUCT MODAL — old production (RA modal) header held ONLY
the close button +
; it did NOT show weight /
minimum-order text right under the h2 (weight text lived
further down in the body, and the quantity/price footer
controls matched the new bundle). The new bundle renders
inside the
modal header; hide it (JS hides it too).
---------------------------------------------------------- */
#menu .fixed.inset-0 .border-b p.text-sm.text-muted-foreground {
display: none !important;
}
/* ----------------------------------------------------------
7. PRODUCT MODAL h2 — OLD PRODUCTION EVIDENCE (index-CnP9qaR6.js):
h2 class "text-2xl font-bold text-foreground pr-10"
=> 24px / 700 / line-height 2rem, font-family inherited
from the same global stack (no font-family on the h2).
New bundle: text-xl (20px) + leading-snug (1.375).
Restore old size + leading; footer/quantity controls are
left untouched (they already match old production).
---------------------------------------------------------- */
#menu .fixed.inset-0 h2 {
font-family: inherit !important;
font-size: 1.5rem !important; /* text-2xl = 24px */
font-weight: 700 !important; /* font-bold */
line-height: 2rem !important; /* text-2xl leading */
}