.menu {
width: 100%;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.content-wrapper {
padding-top: 16px;
padding-bottom: 16px;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
.category-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
scroll-margin-top: 120px;
}
.category-header {
align-self: stretch;
/* 16px to line the header's left edge up with the cards below
(.product-grid pads 0 16px) — 28px indented it 12px too far in. */
padding-left: 16px;
padding-right: 16px;
padding-top: 20px;
padding-bottom: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.category-title {
flex: 1 1 0;
opacity: 0.6;
}
.category-title-text {
color: var(--text-primary);
font-size: var(--font-caption);
font-family: var(--font-family);
font-weight: var(--fw-regular);
text-transform: uppercase;
line-height: var(--lh-caption);
word-wrap: break-word;
}
.category-title-count {
color: var(--text-primary);
font-size: var(--font-caption);
font-family: var(--font-family);
font-weight: var(--fw-regular);
line-height: var(--lh-caption);
opacity: 0.6;
margin-left: 4px;
}
/* Row of products: IMPORTANT — wraps so cards go DOWN (2 per row) */
.product-grid {
width: 100%;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 179px;
gap: 12px;
padding: 0 16px 12px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.product-grid::-webkit-scrollbar {
display: none;
}
@media (max-width: 480px) {
.product-grid {
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow-x: hidden;
}
.product-card {
width: 100%;
min-width: 0;
}
}
.product-card {
min-height: 320px;
padding: 8px 8px 16px;
background: var(--surface-1);
border-radius: var(--radius-xl);
outline: 1px var(--border-subtle) solid;
outline-offset: -1px;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
box-sizing: border-box;
flex-shrink: 0;
}
.product-image {
width: 100%;
min-height: 181px;
height: 181px;
background: var(--surface-2);
border-radius: var(--radius-lg);
flex-shrink: 0;
}
.product-details {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
gap: 12px;
padding: 0 8px;
box-sizing: border-box;
flex: 1;
}
.product-text {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1;
}
.product-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
color: var(--text-primary);
font-size: var(--font-heading);
font-family: var(--font-family);
font-weight: var(--fw-semibold);
line-height: var(--lh-heading);
word-wrap: break-word;
}
/* Struck-through original price, shown alongside the discounted price
while a percent promo code is active (see grid.js renderPriceDisplay). */
.product-price-original {
color: var(--text-muted);
font-size: var(--font-body);
font-weight: var(--fw-regular);
text-decoration: line-through;
}
/* Discount badge — a warm gold/bronze pill so the discounted number reads
as a distinct "deal" chip next to the plain struck-through original,
shared by grid cards and .basket-row-price (basket.js reuses this same
class via grid.js's renderPriceDisplay). */
.product-price-discounted {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border-radius: 4px;
/* Eased version of the original 5-stop gradient (cybershoke-gradient,
two-color mode per segment, cubic-bezier(0.65,0,0.35,1)) — same
anchor colors/positions, but each light↔dark transition now lingers
near its endpoint before easing away instead of crossing it linearly,
which is what was reading as banded/harsh. */
background: linear-gradient(230deg, #C5864F -49.97%, #CE8F55 -39.25%, #E2A262 -34.16%, #F6B66E -29.08%, #FFBF74 -18.36%, #F7B66D 4.83%, #E6A35E 15.83%, #D5914F 26.83%, #CD8848 50.02%, #D59150 58.22%, #E6A562 62.11%, #F7BA74 65.99%, #FFC37C 74.19%, #FDBF78 102.85%, #FAB56E 116.45%, #F7AB65 130.06%, #F5A761 158.72%);
/* #372E29 was Lc 41-42 (Non-Text) on the gradient's two darkest stops
(#C5864F, #CD8848) — this near-black warm brown is close to the
ceiling there (even pure #000 only reaches Lc 47-49 on those same
stops, since the stops themselves are too light to go further) while
staying in the same warm hue family instead of jumping to neutral
black. Lands at Lc 76-77 (Body Text) on the lighter stops. */
color: #150F0B;
font-weight: 700;
}
/* The product NAME. grid.js renders text directly in .product-title, so the
body-role styling lives here (the old .product-title-text was never in the
DOM — dead). Secondary grey vs the white .product-price gives price-primary
/ name-secondary hierarchy: --text-secondary (#C4C4C6) on --surface-1 is
Lc −69 (Content Text) — quieter than the white price but still readable. */
.product-title {
width: 100%;
/* --text-name (#B0B2B6, Lc −58): a middle grey that reads clearly BELOW the
white price (was #C4C4C6 at Y 0.55, only +81% below white — the two
blended) without dropping into the dim/hard-to-read range (#A5A7AB felt
too dark). Luminance step to the price roughly doubles. */
color: var(--text-name);
font-size: var(--font-body);
font-family: var(--font-family);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.add-button {
height: 32px;
padding: 8px 12px;
background: var(--surface-2);
overflow: hidden;
border-radius: var(--radius-md);
backdrop-filter: blur(10px);
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
align-self: stretch;
cursor: pointer;
transition: background-color 200ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.add-button:active {
transform: scale(0.97);
}
.add-button.inactive {
justify-content: center;
}
.add-button.inactive .icon-plus {
margin: 0 auto;
}
.add-button.active {
background: var(--accent-soft);
justify-content: space-between;
}
.counter {
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
.counter-text {
color: var(--accent);
font-size: var(--font-body);
font-family: var(--font-family);
font-weight: var(--fw-semibold);
line-height: var(--lh-caption);
transition: color 0.2s ease, transform 0.2s ease;
}
/* Active (when item count > 0) */
.add-button.active .counter-text {
color: var(--accent);
}
/* Bounce effect */
.counter.bump .counter-text {
animation: counter-bounce 0.25s ease;
}
/* Icon styles using CSS mask for color control */
.icon-plus,
.icon-minus {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-secondary); /* default */
transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.icon-plus:active,
.icon-minus:active {
transform: scale(0.8);
}
.add-button.active .icon-plus,
.add-button.active .icon-minus {
color: var(--accent);
}
.icon-plus::before,
.icon-minus::before {
content: "";
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.icon-minus::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.icon-plus::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
@keyframes counter-bounce {
0% {
transform: scale(1);
}
40% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}