at 1100px, sized for the old form-centric admin/account pages. The rebuilt storefront layouts (homeLayout, productsLayout, etc.) were designed for a wider page and use their own flexible grids (auto-fill/minmax) to size product cards — squeezed into 1100px they have no room to lay out 4+ columns and every card ends up shrunk. Widen the non-narrow container so those grids have the space they were designed for; .container.narrow (login, etc.) is a higher-specificity rule and keeps its own 460px cap untouched. */ .container{ max-width:2000px; } /* ---- Theme-aware overrides for the legacy style.css design system ---- Pages not yet rebuilt in the new branded layout (account, admin, login, support, track-order, static pages, etc.) still use style.css's .card/.field/.btn/table system, which was hardcoded light-only — toggling to dark mode flipped the page background but left these white cards floating on it, unstyled-looking. This makes that shared system respond to the light/dark toggle like the rest of the site, using the same theme variables, without changing its layout. A full faithful-port rebuild of those individual pages (matching their real React source) is separate, later work. */ .card{ background:var(--surface); border-color:var(--border); color:var(--text); } .card h1, .card h2, .card h3{ color:var(--text); } label{ color:var(--text2); } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], textarea, select{ background:var(--surface2); color:var(--text); border-color:var(--border); } input:disabled, select:disabled, textarea:disabled{ opacity:.65; } .btn{ background:var(--primary); color:#111827; } .btn:hover{ filter:brightness(.92); } .btn.secondary{ background:var(--surface2); border-color:var(--border); color:var(--text); } table{ color:var(--text); } th, td{ border-color:var(--border); } th{ color:var(--text2); } .muted{ color:var(--text2); } .site-header, .site-footer{ background:var(--surface); border-color:var(--border); color:var(--text); } /* ============================================================ Navbar (styles/navbar.css) ============================================================ */ .navbar{ display:flex; flex-direction:column; gap:14px; padding:15px 5%; background:var(--surface); position:sticky; top:0; z-index:1000; border-bottom:1px solid var(--surface2); } .navTop{ display:flex; align-items:center; justify-content:space-between; gap:20px; } .navLogo{ display:flex; align-items:center; gap:15px; text-decoration:none; } .navLogo img{ width:60px; height:60px; object-fit:contain; } .navLogo h2{ color:var(--primary); margin:0; } .navLogo p{ margin:0; color:var(--text); font-size:14px; } .searchBox{ margin-left:250px; width:60%; display:flex; gap:10px; position:relative; } .searchBox input{ flex:1; padding:16px 24px; border:none; border-radius:30px; font-size:17px; outline:none; background:var(--surface2); color:var(--text); } .searchBoxBtn{ padding:0 22px; border:none; border-radius:30px; background:var(--primary); color:#111827; font-size:18px; cursor:pointer; transition:.2s; flex-shrink:0; } .searchBoxBtn:hover{ opacity:.9; } .searchBox input::placeholder{ color:var(--text2); } /* In light mode, --surface2 is a near-white #f8f8f8 which left the search box and the Products toolbar's dropdowns barely distinguishable from the page background. A visibly grey shade + thin border here (light mode only — dark mode already has good contrast) makes them read clearly as input fields. */ body.light .searchBox input, body.light .toolbar input, body.light .toolbar select{ background:#e6e6e6; border:1px solid #d0d0d0; } .navbar nav{ display:flex; gap:25px; } .navbar nav a{ color:var(--text); text-decoration:none; font-weight:500; transition:.3s; } .navbar nav a:hover{ color:var(--primary); } .navActions{ display:flex; gap:12px; margin-left:30px; align-items:center; } .navActions button{ background:var(--primary); color:#111; padding:12px 18px; border:none; border-radius:8px; font-weight:bold; cursor:pointer; transition:.25s; } .navActions button:hover{ transform:translateY(-2px); } .dashSwitcher{ position:relative; } .dashHamburgerBtn{ width:44px; height:44px; border-radius:10px; background:var(--surface2); color:var(--text); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; flex-shrink:0; } .dashHamburgerBtn svg{ width:22px; height:22px; } .dashHamburgerBtn:hover{ border-color:var(--primary); background:var(--primary); color:#111827; } .dashSwitcherMenu{ position:absolute; top:calc(100% + 8px); left:0; background:var(--surface); border:1px solid var(--surface2); border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.25); display:flex; flex-direction:column; min-width:180px; overflow:hidden; z-index:1100; } .dashSwitcherMenu a{ background:transparent; color:var(--text); border:none; padding:12px 16px; text-align:left; font-weight:500; cursor:pointer; transition:.2s; text-decoration:none; display:block; } .dashSwitcherMenu a:hover{ background:var(--surface2); transform:none; } .dashSwitcherMenu a.dashActive{ color:var(--primary); font-weight:bold; } .vatNavToggle{ display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:20px; border:1px solid var(--border); background:var(--surface2); cursor:pointer; transition:.2s; white-space:nowrap; user-select:none; } .vatNavToggle:hover{ border-color:var(--primary); } .vatNavToggle input{ display:none; } .vatNavToggleSwitch{ width:34px; height:18px; background:var(--bg); border:1px solid var(--border); border-radius:20px; position:relative; transition:.2s; flex-shrink:0; } .vatNavToggleSwitch::before{ content:""; position:absolute; top:1px; left:1px; width:14px; height:14px; border-radius:50%; background:var(--text2); transition:.2s; } .vatNavToggle input:checked + .vatNavToggleSwitch{ background:var(--primary); border-color:var(--primary); } .vatNavToggle input:checked + .vatNavToggleSwitch::before{ transform:translateX(16px); background:#111827; } .vatNavToggleLabel{ font-weight:bold; font-size:12px; color:var(--text2); } .navActions .themeToggle{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; padding:0; background:transparent !important; box-shadow:none; } .navActions .themeToggle:hover{ background:var(--surface2) !important; transform:none; } .topContactBar{ display:flex; justify-content:flex-start; align-items:left; gap:8px; padding-left:2px; padding-top:.5px; } .quickContactBtn{ width:32px; height:32px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text); text-decoration:none; transition:.2s; flex-shrink:0; } .quickContactBtn svg{ width:17px; height:17px; } .quickContactBtn:hover{ border-color:var(--primary); background:var(--primary); color:#111827; transform:translateY(-2px); } .quickContactBtn-whatsapp:hover{ background:#25D366; border-color:#25D366; color:white; } .navbarMinimal{ padding:10px 5%; } .navbarMinimal .navTop{ justify-content:flex-start; gap:16px; } .navAccountLink{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); padding:4px 8px; border-radius:10px; transition:.2s; } .navAccountLink:hover{ background:var(--surface2); } .navAvatarCircle{ width:38px; height:38px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--text2); flex-shrink:0; } .navAvatarCircle img{ width:100%; height:100%; object-fit:cover; } .navAvatarCircle svg{ width:20px; height:20px; } .navAccountText{ display:flex; flex-direction:column; line-height:1.25; } .navAccountText span:first-child{ font-size:14px; font-weight:600; color:var(--text); } .navMyAccountLabel{ font-size:11px; color:var(--primary); font-weight:600; } .searchSuggestions{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; z-index:200; box-shadow:0 8px 20px rgba(0,0,0,.25); } .searchSuggestionItem{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:12px 16px; background:none; border:none; border-bottom:1px solid var(--border); color:var(--text); text-align:left; cursor:pointer; font-size:14px; } .searchSuggestionItem:last-child{ border-bottom:none; } .searchSuggestionItem:hover{ background:var(--surface2); } .searchSuggestionSku{ color:var(--text2); font-size:12px; flex-shrink:0; margin-left:10px; } .navActionsMinimal{ margin-left:auto; } @media (max-width: 768px){ .navbar{ padding:10px 4%; gap:10px; } .navTop{ flex-wrap:wrap; gap:10px; justify-content:space-between; } .navLogo img{ width:40px; height:40px; } .navLogo h2{ font-size:18px; } .navLogo p{ font-size:11px; } .navbar nav{ order:3; width:100%; justify-content:center; gap:16px; font-size:14px; } .navActions{ margin-left:0; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .navActions button{ padding:8px 12px; font-size:13px; } .navAccountText{ display:none; } .navActions .themeToggle{ width:38px; height:38px; font-size:16px; } .vatNavToggle{ padding:5px 10px; } .vatNavToggleLabel{ display:none; } .searchBox{ margin-left:0; width:100%; } .searchBox input{ padding:12px 16px; font-size:15px; } .topContactBar{ padding-left:0; } } @media (max-width: 400px){ .navbar nav{ gap:10px; font-size:13px; } .navLogo h2{ font-size:16px; } .navActions button{ padding:7px 10px; font-size:12px; } } /* ============================================================ ContactFooter ============================================================ */ .contactFooter{ margin-top:60px; padding:40px 6% 20px; background:var(--surface); border-top:1px solid var(--border); } /* Fixed dark-grey footer in LIGHT mode (see the matching .categorySidebar override above for why this only redefines the theme variables, not every child selector, and why it's light-mode-only). */ body.light .contactFooter{ --surface:#1e1e1e; --surface2:#2a2a2a; --text:#f3f4f6; --text2:#b5bac2; --border:#3a3a3a; } .footerColumns{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; margin-bottom:30px; } .footerColumn h3{ color:var(--text); font-size:15px; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--primary); display:inline-block; } .footerColumn p{ color:var(--text2); font-size:14px; margin:4px 0; } .footerContactList{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .footerContactList a{ display:flex; align-items:center; gap:10px; color:var(--text2); text-decoration:none; font-size:14px; transition:.2s; } .footerContactList a:hover{ color:var(--primary); } .footerContactIcon{ width:22px; height:22px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .footerContactIcon svg{ width:12px; height:12px; } .footerVisitUs{ margin-top:22px; padding-top:16px; } .footerVisitUs h4{ color:var(--text); font-size:13px; margin:0 0 6px 0; } .footerVisitUs p{ margin:0; } .footerQuickLinks{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; } .footerQuickLinks li{ padding:1px 0; } .footerQuickLinks li:first-child{ padding-top:0; } .footerQuickLinks a{ display:block; padding:10px 0; color:var(--text2); text-decoration:none; font-size:14px; font-weight:600; transition:.2s; } .footerQuickLinks a:hover{ color:var(--primary); } .footerPaymentList{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .footerPaymentList li{ color:var(--text2); font-size:14px; padding:6px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; width:fit-content; } .footerBottomBar{ padding-top:18px; border-top:1px solid var(--border); text-align:center; } .footerCopyright{ color:var(--text2); font-size:12px; } @media (max-width: 700px){ .footerColumns{ grid-template-columns:1fr; } } /* ============================================================ Button ============================================================ */ .btn{ padding:14px 28px; border:none; border-radius:10px; font-size:16px; font-weight:600; cursor:pointer; transition:all .25s ease; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:#FFD700; color:#111827; } .btn-primary:hover{ background:#facc15; } .btn-secondary{ background:#334155; color:white; } .btn-secondary:hover{ background:#475569; } .btn-success{ background:#16A34A; color:white; } .btn-danger{ background:#DC2626; color:white; } /* ============================================================ ProductCard ============================================================ */ .productCard{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; height:100%; transition:.25s; } .wishlistBtn{ position:absolute; top:8px; right:8px; width:26px; height:26px; border:1.5px solid #e0245e; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform .2s, box-shadow .2s; } .wishlistBtn:hover{ transform:scale(1.15); box-shadow:0 0 10px rgba(224,36,94,.5); } .wishlistBtn:active{ transform:scale(.85); } .wishlistBtn.active{ background:#e0245e; animation:heartPop .35s; } .productCard.outOfStock button:not(.wishlistBtn){ background:#8a0202 !important; color:white !important; } .productCard.outOfStock:hover{ background:#8a0202; } .productCard.outOfStock:hover button:not(.wishlistBtn){ background:var(--primary) !important; color:#111827 !important; } .productCard:hover{ transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,.12); } .productCard img{ width:100%; height:140px; object-fit:contain; background:white; padding:12px; } .productCard h3{ font-size:1.2rem; margin:8px 4px 4px; color:var(--text); line-height:1.25; overflow-wrap:break-word; word-break:break-word; } .productCard p{ margin:2px 4px; color:var(--text2); font-size:.85rem; line-height:1; } .productCard h2{ margin:6px 12px; margin-top:auto; color:var(--primary); font-size:1.2rem; } .productRating{ display:flex; align-items:center; gap:6px; margin:4px 4px 6px; font-size:.9rem; } .stars{ color:#FFD700; letter-spacing:1px; } .ratingValue{ font-weight:700; color:var(--text); font-size:.82rem; } .reviewCount{ color:var(--text2); font-size:.8rem; } .productCard .stock{ font-weight:600; } .productCard .stock.low{ color:#e0a800; } .productCard .stock.in{ color:#16a34a; } .productCard button{ margin:10px auto 12px; padding:8px 20px; font-size:.85rem; width:auto; min-width:120px; } @keyframes heartPop{ 0%{ transform:scale(.7); } 50%{ transform:scale(1.3); } 100%{ transform:scale(1); } } @media (max-width: 650px){ .productCard h3{ font-size:.95rem; } .productCard .manufacturer, .productCard .sku, .productCard p{ font-size:.75rem; } .productCard h2{ font-size:1rem; } .productCard button{ padding:7px 16px; font-size:.78rem; min-width:0; width:auto; max-width:90%; margin-left:auto; margin-right:auto; } } /* ============================================================ BannerCarousel ============================================================ */ .bannerCarousel{ position:relative; width:100%; border-radius:16px; overflow:hidden; margin-bottom:20px; } .bannerCarouselImage{ width:100%; aspect-ratio:3/1; object-fit:cover; display:block; } @media(max-width:700px){ .bannerCarouselImage{ aspect-ratio:16/9; } } .bannerCarouselDots{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; } .bannerDot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; padding:0; transition:.2s; } .bannerDotActive{ background:var(--primary); width:22px; border-radius:5px; } /* ============================================================ CategorySidebar ============================================================ */ .categorySidebar{ background:var(--surface); border-radius:16px; padding:20px 16px; position:sticky; top:90px; width:210px; /* Scrolls independently of the product grid beside it once the category list is taller than the space below the sticky offset, instead of the whole page having to scroll to reach the bottom of a long category list. */ max-height:calc(100vh - 110px); overflow-y:auto; } /* Fixed dark-grey sidebar + footer in LIGHT mode specifically (per explicit request — dark mode already looks right and is left alone). Redefining the theme variables *on these two containers* means every child that already reads var(--surface)/var(--text)/etc. re-themes itself automatically, the same scoped-variable trick used for .posPage's own local dark block. */ body.light .categorySidebar{ --surface:#1e1e1e; --text:#f3f4f6; } .categorySidebar h2{ color:#ffd000; font-size:2rem; margin-bottom:9px; } .categoryItem{ width:100%; display:flex; align-items:center; gap:12px; padding:10px; margin-bottom:0.2px; background:transparent; border:none; border-radius:12px; cursor:pointer; color:var(--text); font-size:1rem; transition:.25s; text-align:left; text-decoration:none; } .categoryItem:hover{ background:#334155; } .categoryItem.active{ background:#ffd000; color:#111827; font-weight:700; } .categoryIcon{ font-size:1.4rem; width:28px; text-align:center; } @media(max-width:1000px){ .categorySidebar{ width:100%; position:static; margin-bottom:25px; max-height:none; overflow-y:visible; } } /* ============================================================ MapCard — new, not in the original app. "Find us on the map" card on Home/Products, between the product grid and the footer. Links to Settings > Map / location link once set; renders as an inert-looking placeholder before that (see includes/storefront_ui.php's map_card_html()). ============================================================ */ .mapCardSection{ margin-top:30px; } .mapCard{ display:flex; align-items:center; gap:16px; padding:20px 22px; background:var(--surface); border:1px solid var(--border); border-radius:16px; text-decoration:none; transition:.2s; } a.mapCard:hover{ border-color:var(--primary); } .mapCardPlaceholder{ cursor:default; opacity:.75; } .mapCardIcon{ width:44px; height:44px; flex-shrink:0; border-radius:50%; background:var(--surface2); color:var(--primary); display:flex; align-items:center; justify-content:center; } .mapCardIcon svg{ width:22px; height:22px; } .mapCardText{ display:flex; flex-direction:column; gap:2px; } .mapCardText strong{ color:var(--text); font-size:15px; } .mapCardText span{ color:var(--text2); font-size:13px; } /* ============================================================ GuestInfoModal ============================================================ */ .guestInfoOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:4000; padding:20px; } .guestInfoBox{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; width:100%; max-width:380px; position:relative; } .guestInfoClose{ position:absolute; top:14px; right:14px; background:var(--surface2); border:none; color:var(--text); width:28px; height:28px; border-radius:50%; cursor:pointer; } .guestInfoBox h3{ margin:0 0 8px 0; color:var(--primary); } .guestInfoNote{ color:var(--text2); font-size:13px; margin-bottom:18px; } .guestInfoBox form{ display:flex; flex-direction:column; gap:10px; } .guestInfoBox input{ padding:11px 14px; border-radius:8px; background:var(--surface2); color:var(--text); border:1px solid var(--border); } .guestInfoBox button{ padding:11px; border-radius:8px; background:var(--primary); color:#111827; border:none; font-weight:bold; cursor:pointer; } .guestInfoBox button:disabled{ opacity:.6; cursor:default; } /* ============================================================ Products page ============================================================ */ .productsLayout{ display:grid; grid-template-columns:210px 1fr; gap:24px; padding:24px 20px; align-items:start; } .productsContent h1{ color:var(--text); font-size:2.3rem; margin-bottom:16px; } .toolbar{ display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:16px; margin-bottom:24px; } .toolbar input, .toolbar select{ padding:12px 16px; border:none; border-radius:10px; font-size:.95rem; } .stockFilter{ display:flex; align-items:center; gap:8px; color:var(--text); font-size:.95rem; } .productsGrid{ display:grid; /* min bumped from 200 to 220 to match the Home grid's baseline of ~4 columns at a normal desktop width, growing to 5-6 as the window widens or the page is zoomed out. */ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; align-items:start; } @media(max-width:1000px){ .productsLayout{ grid-template-columns:1fr; } .toolbar{ grid-template-columns:1fr; } .productsGrid{ grid-template-columns:repeat(2,minmax(180px,1fr)); } } @media(max-width:650px){ .productsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } } .noResultsBlock{ text-align:center; padding:60px 20px; } .noResultsBlock p{ color:var(--text2); font-size:16px; margin-bottom:20px; } .noResultsActions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; } .noResultsBtn{ padding:11px 22px; border-radius:8px; background:var(--surface2); color:var(--text); border:1px solid var(--border); font-weight:600; text-decoration:none; } .noResultsBtn:hover{ border-color:var(--primary); } .noResultsBtnPrimary{ background:var(--primary); color:#111827; border-color:var(--primary); } /* ============================================================ Product Details page ============================================================ */ .productDetailsPage{ padding:40px 8%; } .productDetails{ display:grid; grid-template-columns:420px 1fr; gap:50px; align-items:start; } .productImage img{ width:100%; border-radius:18px; background:white; border:1px solid var(--border); padding:15px; } .productThumbStrip{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; } .productThumbBtn{ width:64px; height:64px; padding:0; border-radius:10px; border:2px solid var(--border); background:white; overflow:hidden; cursor:pointer; } .productThumbBtn img{ width:100%; height:100%; object-fit:contain; } .productThumbBtnActive{ border-color:var(--primary); } .productInfo h1{ color:var(--text); margin-bottom:10px; } .productInfo h2{ color:var(--primary); margin:0; } .stockStatus{ font-weight:600; margin:16px 0; } .stockIn{ color:#4ade80; } .stockOut{ color:#f87171; } .manufacturer{ color:var(--text); margin-bottom:6px; } .sku{ color:var(--text2); margin-bottom:6px; } @media(max-width:900px){ .productDetails{ grid-template-columns:1fr; } } .productDescriptionSection{ max-width:1200px; margin:50px auto 0; padding-top:30px; border-top:1px solid var(--border); } .productDescriptionHeading{ color:var(--text); margin-bottom:20px; font-size:1.6rem; } .description{ color:var(--text); line-height:1.8; margin-bottom:30px; } .descImage{ max-width:100%; border-radius:10px; margin:12px 0; display:block; } .description a{ color:#60a5fa; text-decoration:none; } .description .ql-code-block-container{ background:#0d1117; color:#c9d1d9; font-family:"Courier New", monospace; font-size:13px; padding:14px 16px; padding-top:36px; border-radius:8px; border:1px solid var(--border); overflow-x:auto; position:relative; } .description .ql-code-block{ white-space:pre; } .descCopyBtn{ position:absolute; top:8px; right:8px; background:var(--surface2); color:var(--text); border:1px solid var(--border); padding:4px 10px; border-radius:6px; font-size:12px; cursor:pointer; font-family:inherit; } .descCopyBtn:hover{ border-color:var(--primary); } .description img{ max-width:100%; border-radius:10px; margin:12px 0; display:block; } /* ============================================================ Cart page ============================================================ */ .cartPage{ padding:40px 8%; color:var(--text); background:var(--bg); min-height:80vh; } .cartPage h1{ margin-bottom:10px; color:var(--text); } .cartList{ display:flex; flex-direction:column; gap:20px; margin-bottom:10px; } .cartItem{ display:flex; align-items:center; justify-content:space-between; gap:6px; background:var(--surface); border:1px solid var(--border); padding:8px 10px; border-radius:15px; } .cartItem img{ width:90px; height:50px; object-fit:cover; background:white; border:1px solid var(--border); border-radius:12px; padding:2px; } .cartInfo{ flex:1; } .cartInfo h2{ margin-bottom:4px; font-size:1.2rem; color:var(--text); } .cartInfo p{ margin:2px 0; line-height:1.2; color:var(--text2); } .cartActions{ display:flex; align-items:center; gap:8px; } .cartActions button{ background:#ffd000; border:none; padding:8px 14px; border-radius:8px; cursor:pointer; font-weight:700; font-size:16px; } .cartActions input{ width:55px; height:42px; text-align:center; font-size:18px; font-weight:bold; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); outline:none; appearance:textfield; } .removeBtn{ background:#d9534f !important; color:white; } .cartSummary{ margin:30px 0 20px; max-width:360px; margin-left:auto; display:flex; flex-direction:column; gap:8px; } .cartSummaryLine{ display:flex; justify-content:space-between; color:var(--text); font-size:15px; } .cartSummaryTotal{ font-weight:bold; font-size:20px; color:#ffd000; padding-top:8px; border-top:1px solid var(--border); margin-top:4px; } @media(max-width:900px){ .cartItem{ flex-direction:column; text-align:center; } .cartActions{ justify-content:center; flex-wrap:wrap; } } /* ============================================================ Checkout page ============================================================ */ .checkoutPage{ padding:40px 5%; background:var(--bg); color:var(--text); min-height:80vh; display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start; } .checkoutLeft{ background:var(--surface); padding:30px; border-radius:18px; border:1px solid var(--border); } .checkoutRight{ background:var(--surface); padding:30px; border-radius:18px; border:1px solid var(--border); position:sticky; top:100px; } .orderSummary h2{ margin-bottom:20px; } .checkoutItem{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); } .checkoutItem:last-child{ border-bottom:none; } .orderSummary h3{ margin-top:20px; color:var(--primary); } .checkoutLeft h1{ margin-bottom:30px; } .checkoutLeft h2{ margin:25px 0 12px; font-size:1.2rem; color:var(--primary); } .checkoutLeft input{ width:100%; padding:15px 16px; margin-bottom:16px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); font-size:1rem; outline:none; transition:.25s; } .checkoutLeft input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(255,208,0,.15); } /* Scoped to the Place Order button specifically (not a bare "button" descendant selector) — a bare selector here was also catching the coupon Apply/Remove buttons nested inside .checkoutRight, forcing width:100% onto them via flex-basis and squeezing the coupon input down to almost nothing. */ #placeOrderBtn{ width:100%; margin-top:25px; } @media(max-width:900px){ .checkoutPage{ grid-template-columns:1fr; } .checkoutRight{ position:static; } } .couponSection{ margin:10px 0; } .couponInputRow{ display:flex; gap:8px; } .couponInputRow input{ flex:1; padding:9px 12px; border-radius:8px; background:var(--surface2); color:var(--text); border:1px solid var(--border); text-transform:uppercase; } .couponInputRow button{ padding:9px 16px; border-radius:8px; background:var(--primary); color:#111827; border:none; font-weight:bold; cursor:pointer; white-space:nowrap; } .couponInputRow button:disabled{ opacity:.6; cursor:default; } .couponApplied{ display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:8px; background:rgba(74,222,128,.12); border:1px solid #4ade80; color:#4ade80; font-weight:600; font-size:14px; } .couponApplied button{ background:none; border:none; color:#f87171; cursor:pointer; font-size:13px; text-decoration:underline; } .couponError{ color:#f87171; font-size:12px; margin-top:6px; } .deliveryOptions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; } .deliveryOption{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:10px; background:var(--surface2); border:1.5px solid var(--border); cursor:pointer; transition:.2s; flex:1; min-width:180px; } .deliveryOption:hover{ border-color:var(--primary); } .deliveryOption input[type="radio"]{ width:17px; height:17px; margin:0; flex-shrink:0; accent-color:var(--primary); cursor:pointer; } .deliveryOption strong{ color:var(--text); font-weight:600; font-size:14px; } .deliveryOptionActive{ background:rgba(255,193,7,.1); border-color:var(--primary); } .orderNoteInput{ width:100%; padding:12px 14px; border-radius:8px; background:var(--surface2); color:var(--text); border:1px solid var(--border); font-family:inherit; resize:vertical; } .checkoutSummaryLine{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; color:var(--text2); font-size:14px; } /* ============================================================ Toast ============================================================ */ .toast{ position:fixed; bottom:25px; left:50%; transform:translateX(-50%); display:none; align-items:center; gap:16px; padding:14px 22px; background:#222; color:white; border-radius:12px; box-shadow:0 8px 25px rgba(0,0,0,.25); z-index:9999; animation:fadeIn .25s; transition:opacity .4s; } .toastAction{ background:none; border:none; color:#ffd000; font-weight:bold; cursor:pointer; font-size:15px; } .toastAction:hover{ text-decoration:underline; } @keyframes fadeIn{ from{ opacity:0; transform:translate(-50%,20px); } to{ opacity:1; transform:translate(-50%,0); } } /* ============================================================ Home page ============================================================ */ .homeLayout{ display:grid; grid-template-columns:260px 1fr; gap:30px; padding:40px 5%; align-items:start; } .contentArea{ display:flex; flex-direction:column; gap:40px; } .searchArea input{ width:100%; padding:18px; border-radius:12px; border:1px solid var(--border); font-size:17px; outline:none; background:var(--surface); color:var(--text); } .searchArea input::placeholder{ color:var(--text2); } .featuredProducts h2{ margin-bottom:25px; color:var(--text); } .productGrid{ display:grid; /* Flexible instead of a fixed 4 tracks: lands on ~4 columns at a normal desktop width and grows to 5-6 as the window widens or the page is zoomed out (more CSS pixels of room), rather than always dividing the row into exactly 4 shrinking slots regardless of available space. */ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; } @media(max-width:1000px){ .homeLayout{ grid-template-columns:1fr; } .productGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media(max-width:600px){ .homeLayout{ padding:20px 4%; gap:20px; } .productGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } } /* ============================================================ Order Success page ============================================================ */ .successPage{ min-height:80vh; display:flex; justify-content:center; align-items:center; background:var(--bg); padding:40px; } .successCard{ width:100%; max-width:650px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:50px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.12); } .successCard h1{ font-size:2.5rem; color:#41d86b; margin-bottom:20px; } .successCard p{ color:var(--text2); font-size:1.1rem; line-height:1.8; margin-bottom:25px; } .successCard h2{ margin-bottom:35px; color:var(--primary); font-size:1.4rem; } .successCard button{ width:260px; } .successCardWide{ max-width:640px; text-align:left; } .successCardWide h1{ text-align:center; } .successCardWide > p:first-of-type{ text-align:center; } .successCardWide h2{ text-align:center; margin-bottom:12px; } .orderStatusPill{ display:block; text-align:center; font-weight:bold; font-size:13px; margin-bottom:24px; padding:6px 14px; border-radius:20px; width:fit-content; margin-left:auto; margin-right:auto; } .orderStatusPill-pending{ background:#78350f; color:#fbbf24; } .orderStatusPill-completed{ background:#14532d; color:#4ade80; } .orderStatusPill-cancelled{ background:#450a0a; color:#f87171; } .orderItemsBlock{ display:flex; flex-direction:column; gap:6px; margin-bottom:20px; padding:16px; background:var(--surface2); border-radius:12px; } .orderLineRow{ display:flex; justify-content:space-between; align-items:center; color:var(--text); font-size:14px; padding:4px 0; gap:10px; } .orderLineRowEditing input{ width:60px; padding:6px 8px; border-radius:6px; background:var(--surface); color:var(--text); border:1px solid var(--border); } .orderLineRemove{ background:#DC2626; color:white; border:none; border-radius:6px; width:26px; height:26px; cursor:pointer; flex-shrink:0; } .addProductRow{ display:flex; align-items:center; gap:8px; padding-top:10px; margin-top:6px; border-top:1px dashed var(--border); flex-wrap:wrap; } .addProductRow select{ flex:1; min-width:180px; padding:8px 10px; border-radius:8px; background:var(--surface); color:var(--text); border:1px solid var(--border); } .addProductRow input{ padding:8px 10px; border-radius:8px; background:var(--surface); color:var(--text); border:1px solid var(--border); } .addProductRow button{ background:var(--primary); color:#111827; border:none; padding:8px 14px; border-radius:8px; font-weight:bold; cursor:pointer; } .orderLineRowFee{ color:var(--text2); font-size:13px; } .orderLineRowTotal{ font-weight:bold; font-size:17px; color:var(--primary); padding-top:10px; margin-top:6px; border-top:1px solid var(--border); } .orderActionsRow{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; } .orderActionsRow button, .orderActionsRow a{ flex:1; min-width:140px; } .cancelOrderBtn{ flex:1; min-width:140px; background:transparent; border:1px solid #DC2626; color:#f87171; font-weight:700; border-radius:10px; padding:12px; cursor:pointer; transition:.2s; } .cancelOrderBtn:hover{ background:#DC2626; color:white; } .orderLockedNote{ color:var(--text2); font-size:13px; text-align:center; margin-bottom:20px; } .orderErrorText{ color:#f87171; margin-bottom:20px; text-align:center; } .momoInstructions{ background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:18px; margin-bottom:24px; } .momoInstructions h3{ color:var(--primary); margin-bottom:10px; font-size:15px; } .momoInstructions p{ color:var(--text); font-size:14px; margin-bottom:8px; } .momoCode{ font-size:24px; font-weight:bold; letter-spacing:2px; color:var(--primary); background:var(--surface); border:1px dashed var(--primary); border-radius:8px; padding:12px; text-align:center; margin:10px 0; } .momoNote{ color:var(--text2); font-size:12px; }