/* Customer Frontend — stable UI layer */
html { scroll-behavior: smooth; }
.customer-app { min-height: 100vh; padding-bottom: 126px; background: #FAFAF8; color: #29252E; }
.customer-hero { max-width: 1180px; margin: 0 auto; padding: 24px 20px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.customer-brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; background:#B8A9E8; color:#30283C; font-size:20px; font-weight:800; box-shadow:0 8px 22px rgba(120,98,170,.16); }
.customer-brand strong,.customer-brand span { display:block; }
.customer-brand strong { font-size:16px; font-weight:800; }
.customer-brand span { margin-top:3px; color:#8A838E; font-size:10px; }
.customer-badge { display:flex; align-items:center; gap:7px; padding:9px 13px; border:1px solid #ECE8F0; border-radius:999px; background:#fff; color:#6E6873; font-size:10px; box-shadow:0 5px 18px rgba(35,30,45,.04); }
.customer-badge i { color:#7A67B7; }
.customer-categories { position:sticky; top:0; z-index:1030; display:flex; gap:8px; overflow-x:auto; max-width:1180px; margin:0 auto; padding:10px 20px; background:rgba(250,250,248,.90); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); border-bottom:1px solid rgba(231,227,235,.82); box-shadow:0 7px 22px rgba(35,30,45,.06); transition:transform .22s ease, opacity .22s ease; scrollbar-width:none; }
.customer-categories::-webkit-scrollbar { display:none; }
.customer-categories.category-hidden { transform:translateY(calc(-100% - 2px)); opacity:.96; }
.customer-categories a { flex:0 0 auto; padding:9px 15px; border:1px solid #E8E4EC; border-radius:999px; background:#fff; color:#6E6873; font-size:13px; transition:all .16s ease; }
.customer-categories a:hover,.customer-categories a:focus { background:#B8A9E8; border-color:#B8A9E8; color:#2E2738; }
.customer-main { max-width:1180px; margin:0 auto; padding:24px 20px 50px; }
.customer-intro { padding:16px 0 26px; }
.eyebrow { display:inline-block; color:#999; font-size:13px; font-weight:800; letter-spacing:.02em; }
.customer-intro h1 { margin:7px 0 6px; font-size:clamp(28px,4vw,42px); line-height:1.15; letter-spacing:-.8px; }
.customer-intro p { max-width:620px; margin:0; color:#817A85; font-size:13px; line-height:1.9; }
.menu-category { scroll-margin-top:74px; padding:24px 0 30px; }
.customer-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px; }
.customer-section-head h2 { margin:4px 0 4px; font-size:20px; }
.customer-section-head p { margin:0; color:#8A838E; font-size:13px; }
.section-count { flex:0 0 auto; padding:6px 10px; border-radius:999px; background:#F2E3C7; color:#6E6E6E; font-size:13px; }
.customer-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.customer-product { min-width:0; overflow:hidden; background:#fff; border:1px solid #ECE8EF; border-radius:22px; box-shadow:0 9px 28px rgba(35,30,45,.055); transition:transform .18s ease, box-shadow .18s ease; }
.customer-product:hover { transform:translateY(-2px); box-shadow:0 16px 35px rgba(35,30,45,.09); }
.customer-product-media { position:relative; height:190px; overflow:hidden; background:#CFEAE0; }
.customer-product-media img { width:100%; height:100%; object-fit:cover; display:block; }
.product-placeholder { width:100%; height:100%; display:grid; place-items:center; color:#397F64; font-size:42px; }
.product-category { position:absolute; top:11px; right:11px; padding:6px 9px; border-radius:999px; background:rgba(255,255,255,.88); backdrop-filter:blur(8px); color:#675A78; font-size:11px; }
.customer-product-body { display:flex; min-height:142px; flex-direction:column; justify-content:space-between; padding:15px; }
.customer-product-body h3 { margin:0 0 5px; font-size:17px; }
.customer-product-body p { margin:0; color:#737373; font-size:13px; line-height:1.8; }
.product-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:15px; }
.product-bottom > strong { white-space:nowrap; font-size:18px; }
.product-bottom > strong small { font-size:9px; color:#8A838E; }
.add-product { min-width:105px; min-height:38px; border:0; }
.product-qty-host { padding:0; background:transparent; }
.customer-qty-control { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:4px 6px; border:1px solid #E3DEE9; border-radius:999px; background:#fff; }
.customer-qty-btn { width:30px; height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#F4F0FA; color:#5D4F7C; font-size:18px; line-height:1; cursor:pointer; transition:background .15s ease, transform .1s ease; }
.customer-qty-btn:hover { background:#E8E0F6; }
.customer-qty-btn:active { transform:scale(.94); }
.customer-qty-value { min-width:20px; text-align:center; font-size:12px; font-weight:800; color:#4D4653; }
.customer-cart { position:fixed; left:20px; right:20px; bottom:18px; z-index:1040; max-width:760px; margin:0 auto; padding:12px 14px; border:1px solid rgba(229,224,235,.95); border-radius:22px; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 22px 55px rgba(35,30,45,.17),0 4px 14px rgba(35,30,45,.08); }
.customer-cart-inner { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.cart-meta { display:flex; align-items:center; gap:10px; min-width:0; }
.cart-meta > div { min-width:0; }
.cart-meta strong,.cart-meta small { display:block; }
.cart-meta strong { font-size:14px; }
.cart-meta small { margin-top:3px; color:#88818C; font-size:15px; white-space:nowrap; }
.cart-count-badge { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; position:relative; border-radius:13px; background:#CFEAE0; color:#000; }
.cart-count-badge b { position:absolute; top:-5px; left:-5px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:999px; background:#29252E; color:#fff; font-size:8px; }
.customer-cart .btn { min-height:40px; white-space:nowrap; }
.customer-cart.has-items:focus-within .cart-items,.customer-cart.has-items:hover
.cart-line,.checkout-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #F0EDF2; }
.cart-line:last-child,.checkout-line:last-child { border-bottom:0; }
.cart-line-info,.checkout-line-info { min-width:0; }
.cart-line-info strong,.cart-line-info small,.checkout-line-info strong,.checkout-line-info span { display:block; }
.cart-line-info strong,.checkout-line-info strong { font-size:11px; }
.cart-line-info small,.checkout-line-info span { margin-top:3px; color:#8B838F; font-size:9px; }
.empty-cart { display:flex; align-items:center; justify-content:center; gap:7px; padding:14px 0; color:#8B838F; font-size:10px; }
.checkout-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.8fr); gap:20px; }
.checkout-section-head { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:10px; }
.checkout-section-head h3 { margin:0; font-size:13px; }
.checkout-section-head span { color:#8B838F; font-size:9px; }
.checkout-line-actions { display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.checkout-line-actions > strong { white-space:nowrap; font-size:11px; }
.checkout-box { padding:15px; margin-bottom:12px; border:1px solid #EEEAF0; border-radius:16px; background:#FBFAFC; }
.checkout-box small { display:block; margin-top:6px; color:#8B838F; font-size:9px; line-height:1.7; }
.checkout-total-box { display:flex; align-items:center; justify-content:space-between; padding:15px; border-radius:16px; background:#F1EDF8; color:#4F426F; }
.checkout-total-box span { font-size:10px; }
.checkout-total-box strong { font-size:17px; }
.customer-modal { border:1px solid #E9E5ED; border-radius:22px; overflow:hidden; box-shadow:0 25px 80px rgba(30,25,40,.18); }
.customer-modal .modal-header,.customer-modal .modal-footer { padding:17px 20px; border-color:#EEEAF0; }
.customer-modal .modal-body { padding:20px; }
.checkout-footer { justify-content:space-between; gap:10px; }
.success-icon { width:64px; height:64px; margin:0 auto 16px; display:grid; place-items:center; border-radius:20px; background:#B8A9E8; color:#30283C; font-size:30px; box-shadow:0 10px 24px rgba(120,98,170,.18); }
.success-ref { display:inline-block; padding:8px 14px; border-radius:999px; background:#F1EDF8; color:#6654A0; font-size:18px; letter-spacing:.5px; }
@media(max-width:991.98px){.customer-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.checkout-layout{grid-template-columns:1fr;}.customer-product-media{height:170px;}}
@media(max-width:600px){.customer-app{padding-bottom:105px}.customer-hero{padding:18px 14px 12px}.customer-main{padding:18px 14px 36px}.customer-categories{padding:9px 14px}.customer-intro h1{font-size:30px;}.customer-product-grid{grid-template-columns:1fr 1fr;gap:9px}.customer-product-media{height:140px}.customer-product-body{min-height:140px;padding:11px}.customer-product-body h3{font-size:15px;}.customer-product-body p{font-size:12px;}.product-bottom{align-items:flex-end}.product-bottom > strong{font-size:10px}.add-product{min-width:0}.customer-qty-control{gap:4px}.customer-qty-btn{width:27px;height:27px}.customer-qty-value{min-width:16px}.customer-cart{left:10px;right:10px;bottom:10px;border-radius:18px}.checkout-footer{flex-direction:column-reverse}.checkout-footer .btn{width:100%}.checkout-line-actions{gap:8px;flex-direction:column;align-items:flex-end}.customer-badge{display:none;}}
/* Customer category navigation: fixed while scrolling, hidden on upward scroll. */
.customer-categories {
position: sticky;
top: 0;
z-index: 1030;
transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease;
}
.customer-categories.category-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: none;
margin: 0;
box-shadow: 0 8px 24px rgba(35, 30, 45, .10);
}
.customer-categories.category-fixed + .customer-main {
padding-top: var(--customer-category-height, 58px);
}
.customer-categories.category-hidden {
transform: translateY(calc(-100% - 2px));
opacity: .98;
pointer-events: none;
}
/* =========================================================
Customer Frontend — UI Step 1
Scope: Customer Frontend UI only.
- Active/selected category state
- Mobile menu-card price/action separation
========================================================= */
/* Selected category in the sticky category navigation. */
.customer-categories a.category-selected,
.customer-categories a[aria-current="true"] {
background: #8FD2B8;
border-color: #8FD2B8;
color: #2E2738;
font-weight: 700;
box-shadow: 0 5px 14px rgba(143, 210, 184, .22);
}
.customer-categories a.category-selected:hover,
.customer-categories a.category-selected:focus,
.customer-categories a[aria-current="true"]:hover,
.customer-categories a[aria-current="true"]:focus {
background: #8FD2B8 !important;
border-color: #8FD2B8 !important;
color: #2E2738 !important;
}
/* Keep the price and action visually independent on small screens. */
@media (max-width: 600px) {
.product-bottom {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 13px;
align-items: stretch;
}
.product-bottom > strong {
display: block;
width: 100%;
min-height: 22px;
font-size: 16px;
line-height: 1.5;
text-align: right;
}
.product-bottom > strong small {
font-size: 9px;
}
.product-bottom > .add-product {
width: 100%;
min-width: 0;
min-height: 36px;
}
.product-bottom > .product-qty-host {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.product-bottom > .product-qty-host .customer-qty-control {
width: 100%;
justify-content: space-between;
}
}
/* Customer category active-state refinement — stable transition */
.customer-categories a {
transition:
background-color .32s ease,
border-color .32s ease,
color .28s ease,
box-shadow .32s ease,
transform .32s ease;
will-change: background-color, border-color, color, box-shadow, transform;
}
.customer-categories a.category-selected,
.customer-categories a[aria-current="true"] {
transform: translateZ(0) scale(1.015);
}
.customer-categories a:not(.category-selected):not([aria-current="true"]) {
transform: translateZ(0) scale(1);
}