:root {
--ink: #0f172a;
--text: #1e293b;
--muted: #64748b;
--line: #e2e8f0;
--bg: #f8fafc;
--card: #ffffff;
--primary: #0f766e;
--primary-dark: #115e59;
--accent: #f59e0b;
--accent-dark: #d97706;
--green: #16a34a;
--red: #dc2626;
--radius: 12px;
--shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 14px rgba(15, 23, 42, .05);
}
* { box-sizing: border-box; }
body {
margin: 0; background: var(--bg); color: var(--text);
font-family: 'Inter', 'Hind Siliguri', sans-serif; font-size: 15px; line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { color: var(--ink); line-height: 1.25; }
.container { max-width: 1500px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.good { color: var(--green); }
.bad { color: var(--red); }
.empty { color: var(--muted); padding: 30px 0; }
/* ---------- header ---------- */
.site-header { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 24px; padding: 14px 20px; }
.brand { font-weight: 800; font-size: 22px; letter-spacing: -.5px; color: #fff; white-space: nowrap; }
.brand span { color: var(--accent); }
.brand em { font-style: normal; font-size: 13px; vertical-align: super; color: #94a3b8; margin-left: 2px; }
.search { flex: 1; display: flex; max-width: 520px; }
.search input {
flex: 1; border: 0; border-radius: 8px 0 0 8px; padding: 10px 14px; font-size: 14px;
font-family: inherit; outline: none;
}
.search button {
border: 0; background: var(--accent); color: #fff; padding: 0 16px;
border-radius: 0 8px 8px 0; cursor: pointer; display: flex; align-items: center;
}
.search button:hover { background: var(--accent-dark); }
.main-nav { display: flex; gap: 22px; align-items: center; margin-left: auto; font-weight: 500; font-size: 14px; }
.main-nav a { color: #cbd5e1; display: flex; align-items: center; gap: 6px; }
.main-nav a:hover { color: #fff; }
.cart-link { position: relative; }
.badge {
background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
border-radius: 999px; padding: 1px 7px; margin-left: 2px;
}
/* ---------- hero ---------- */
.hero { background: linear-gradient(120deg, var(--ink) 0%, #134e4a 100%); color: #fff; }
.hero-inner { padding: 72px 20px; }
.hero-kicker { color: var(--accent); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; margin: 0 0 10px; }
.hero h1 { color: #fff; font-size: 44px; font-weight: 800; margin: 0 0 14px; letter-spacing: -1px; }
.hero-sub { color: #cbd5e1; font-size: 17px; margin: 0 0 28px; max-width: 480px; }
/* ---------- sections ---------- */
.section { padding: 40px 20px; }
.section-title { font-size: 24px; font-weight: 700; margin: 0 0 20px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; }
.see-all { color: var(--primary); font-weight: 600; font-size: 14px; }
.narrow { max-width: 900px; }
.page-title { font-size: 28px; margin: 0 0 24px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
background: var(--card); border: 1px solid var(--line); border-radius: 999px;
padding: 8px 16px; font-size: 14px; font-weight: 500; transition: all .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip small { color: var(--muted); margin-left: 4px; }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.perk {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.perk span { color: var(--muted); font-size: 13px; }
/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-img { position: relative; aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; }
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-body { padding: 12px 14px 14px; }
.card h3 {
font-size: 14px; font-weight: 500; margin: 0 0 8px; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px;
}
.card-price { font-size: 17px; font-weight: 700; color: var(--primary); }
.stock-badge {
font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px;
}
.stock-badge.in { background: #dcfce7; color: var(--green); }
.stock-badge.out { background: #fee2e2; color: var(--red); }
.card-img .stock-badge { position: absolute; top: 10px; left: 10px; z-index: 2; }
/* ---------- buttons & forms ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: var(--primary); color: #fff; border: 0; cursor: pointer; white-space: nowrap;
font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 10px 22px; border-radius: 8px; border: 1px solid transparent;
transition: background .15s;
}
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.btn-accent { background: var(--accent); }
.btn.btn-accent:hover { background: var(--accent-dark); }
.btn-lg { padding: 13px 30px; font-size: 15px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
input, select, textarea {
font-family: inherit; font-size: 14px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.alert { background: #fee2e2; color: #991b1b; padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.alert.success { background: #dcfce7; color: #166534; }
.alert.info { background: #e0f2fe; color: #075985; }
/* stock corrections: something changed, but nothing went wrong — amber, not red */
.alert.warn { background: #fef3c7; color: #92400e; }
/* ---------- shop page ---------- */
.shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
.shop-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
.shop-side h3 { margin: 0 0 10px; font-size: 15px; }
.side-cat { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; }
.side-cat:hover { background: var(--bg); }
.side-cat.on { background: var(--primary); color: #fff; }
.side-cat.on small { color: #d1fae5; }
.side-cat small { color: var(--muted); }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.pagination { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 30px; font-size: 14px; }
.pagination a { color: var(--primary); font-weight: 600; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.pagination a:hover { border-color: var(--primary); }
/* ---------- product page ---------- */
.product-page { display: grid; grid-template-columns: minmax(300px, 480px) 1fr; gap: 40px; align-items: start; }
.gallery-main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery-thumbs img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; padding: 4px; }
.gallery-thumbs img:hover, .gallery-thumbs img.on { border-color: var(--primary); }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--primary); }
.product-info h1 { font-size: 26px; margin: 0 0 14px; }
.price-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.price { font-size: 30px; font-weight: 800; color: var(--primary); }
.buy-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.qty-box { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.qty-box button { border: 0; background: var(--bg); width: 38px; font-size: 17px; cursor: pointer; }
.qty-box input { width: 56px; text-align: center; border: 0; border-radius: 0; }
.qty-box.small input { width: 60px; }
.delivery-note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 18px; }
.short-desc { font-size: 14.5px; }
.short-desc ul { padding-left: 18px; }
.long-desc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; font-size: 14.5px; overflow-wrap: break-word; }
.long-desc img { border-radius: 8px; }
.long-desc h1, .long-desc h2, .long-desc h3 { font-size: 18px; }
.long-desc table { border-collapse: collapse; width: 100%; }
.long-desc td, .long-desc th { border: 1px solid var(--line); padding: 8px 10px; }
/* ---------- cart / checkout ---------- */
.cart-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.cart-row {
display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: 16px; align-items: center;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px;
}
.cart-row img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 8px; }
.cart-row-info { display: flex; flex-direction: column; gap: 3px; }
.cart-row-info a { font-weight: 600; font-size: 14px; }
.cart-line { font-weight: 700; min-width: 80px; text-align: right; }
.icon-btn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 6px; }
.icon-btn:hover { color: var(--red); }
.cart-summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; max-width: 380px; margin-left: auto; }
.cart-summary .row { display: flex; justify-content: space-between; margin-bottom: 12px; }
.cart-summary .btn { width: 100%; text-align: center; }
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.checkout-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.checkout-form h3 { margin: 0; }
.pay-method { background: var(--bg); border-radius: 8px; padding: 12px 16px; font-size: 14px; }
.order-summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: sticky; top: 80px; }
.order-summary h3 { margin: 0 0 14px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sum-row.total { font-weight: 800; font-size: 15px; border-bottom: 0; color: var(--ink); }
/* ---------- order confirm / track ---------- */
.order-confirm { text-align: center; padding: 30px 0 10px; }
.order-confirm .check {
width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff;
font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.order-no { font-size: 26px; font-weight: 800; color: var(--primary); letter-spacing: 1px; margin: 8px 0 12px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 18px 0; }
.panel h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.track-form { display: flex; gap: 10px; margin-bottom: 24px; }
.track-form input { flex: 1; }
.status-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; }
.s-pending { background: #fef3c7; color: #92400e; }
.s-confirmed { background: #dbeafe; color: #1d4ed8; }
.s-shipped { background: #e0e7ff; color: #4338ca; }
.s-delivered { background: #dcfce7; color: #166534; }
.s-cancelled { background: #fee2e2; color: #991b1b; }
/* ---------- footer ----------
Light rather than dark, so the logo sits on it as drawn — no white plate behind
it and no recolouring of the artwork. Every colour below had to flip with it:
the old values were all chosen against #0f172a. */
/* #475569 rather than var(--muted): muted lands at exactly 4.5:1 here, which is
the bare AA minimum and tight for 13.5px text. This gives real headroom. */
.site-footer {
background: #f8fafc; color: #475569;
border-top: 1px solid var(--line);
margin-top: 50px; font-size: 13.5px;
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.35fr; gap: 30px; padding: 44px 20px 26px; }
.site-footer h4 { color: var(--ink); margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.site-footer a { display: block; padding: 3px 0; color: #475569; }
.site-footer a:hover { color: var(--primary); }
.brand-footer { font-size: 20px; margin-bottom: 8px; display: inline-block; }
.copyright {
border-top: 1px solid var(--line); padding: 16px 20px;
font-size: 12.5px; text-align: center; color: #64748b;
}
/* Scoped to .site-footer deliberately: the generic `.site-footer a` rule is
specificity 0-1-1, so a bare `.footer-logo` at 0-1-0 loses to it and the 3px
link padding stays on the logo. width/height on the ![]()
reserve the space
while it loads so the footer does not jump. */
.site-footer .footer-logo { display: inline-block; margin-bottom: 14px; padding: 0; }
.footer-logo img { height: 40px; width: auto; display: block; }
.footer-blurb { margin: 0; max-width: 32ch; line-height: 1.75; }
/* Contact column. Icon and text are a two-column grid rather than an inline
emoji, so a wrapped address lines up under itself instead of under the icon. */
.footer-contact-col .foot-contact {
display: grid; grid-template-columns: 18px 1fr; gap: 9px;
align-items: start; margin: 0 0 10px; color: #475569; font-weight: 400;
}
.footer-contact-col .fc-ic { color: var(--primary); display: flex; padding-top: 2px; }
.footer-contact-col .fc-ic .ic { width: 16px; height: 16px; }
.footer-contact-col .foot-contact a { display: inline; padding: 0; color: var(--ink); font-weight: 600; }
.footer-contact-col .foot-contact a:hover { color: var(--primary); }
/* ---------- admin ---------- */
.admin { background: var(--bg); }
.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-side { background: var(--ink); padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-side .brand { display: block; margin-bottom: 26px; padding: 0 10px; }
.admin-side nav { display: flex; flex-direction: column; gap: 4px; }
.admin-side nav a { color: #cbd5e1; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.admin-side nav a:hover { background: #1e293b; color: #fff; }
.admin-side nav a.on { background: var(--primary); color: #fff; }
.admin-main { padding: 28px 32px; min-width: 0; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-head h1 { margin: 0; font-size: 24px; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.order-status-panel h3, .courier-panel h3 { margin: 0 0 12px; }
.courier-panel .btn svg { vertical-align: -3px; }
.courier-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 14px; }
.courier-info > div { display: flex; flex-direction: column; gap: 3px; }
.courier-info .muted { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.courier-info strong { font-size: 14px; }
.status-update-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.status-update-form select { width: auto; min-width: 170px; }
.status-update-form textarea[name="status_note"] { width: 100%; resize: vertical; min-height: 60px; font-family: inherit; line-height: 1.5; }
.status-log { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.status-log li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.sl-note { font-style: italic; color: var(--ink); }
.status-log-empty { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat span { color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.stat strong { font-size: 22px; color: var(--ink); }
.stat.good strong { color: var(--green); }
.stat.warn strong { color: var(--accent-dark); }
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 13.5px; }
.table th { text-align: left; background: var(--bg); padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.table td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
/* :not(.btn) — a bare .btn is (0,1,0) and loses to .table a (0,1,1), which
repainted button labels teal-on-teal and made them vanish. Buttons keep the
colour their own variant sets; only real links get the link colour. */
.table a:not(.btn) { color: var(--primary); font-weight: 600; }
.table .thumb { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.table .name-cell { max-width: 340px; }
.table tr.dim { opacity: .45; }
.price-form { display: flex; gap: 6px; align-items: center; }
.price-form input { width: 90px; padding: 6px 8px; }
.tag { display: inline-block; background: #fef3c7; color: #92400e; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
/* your own product, not one pulled from the supplier — green so it reads as
"mine", distinct from the amber tags that mean "changed from the original" */
.tag-own { background: #dcfce7; color: #166534; }
.req { color: var(--red); }
.two-col { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.settings-form { max-width: 480px; display: flex; flex-direction: column; gap: 18px; }
.settings-form small { font-weight: 400; }
.admin-login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--ink); }
.admin-login-box { background: var(--card); border-radius: 16px; padding: 36px; width: 360px; display: flex; flex-direction: column; gap: 16px; }
.admin-login-box h1 { font-size: 26px; margin: 0; font-weight: 800; }
.admin-login-box h1 span { color: var(--accent); }
.admin-login-box h1 em { font-style: normal; font-size: 13px; vertical-align: super; color: var(--muted); }
.admin-login-box p { margin: -10px 0 6px; }
/* ---------- responsive ---------- */
@media (max-width: 900px) {
.header-inner { flex-wrap: wrap; gap: 12px; }
.search { order: 3; max-width: none; width: 100%; }
.hero h1 { font-size: 32px; }
.shop-layout, .product-page, .checkout-layout, .two-col { grid-template-columns: 1fr; }
/* Collapsed by default on phones: products must be the first thing on screen.
The toggle reveals it; on desktop the button is hidden and this never applies. */
.shop-side { position: static; max-height: none; display: none; }
.shop-side.open { display: block; margin-bottom: 4px; }
/* .shop-filter-toggle is revealed at the end of this file — its base rule is
declared later, so showing it here would be overridden by the cascade. */
/* Five columns will not fit. Brand takes the full width, then the four short
lists sit two-up beneath it, which keeps the contact column intact instead
of letting the address wrap to one word per line. */
.footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.footer-grid > div:first-child { grid-column: 1 / -1; }
.footer-blurb { max-width: 52ch; }
/* superseded by the cart-layout block further down; kept from the older markup */
.cart-line { text-align: left; }
}
/* ---------- admin: collapsible sidebar on laptop/tablet/phone ---------- */
/* Below this width the fixed 220px sidebar leaves too little room for tables
and forms, so it becomes a slide-in drawer instead: hidden off-canvas by
default, toggled by the hamburger button in the topbar, main content takes
the full width. */
.admin-toggle { display: none; }
.admin-backdrop { display: none; }
@media (max-width: 1024px) {
.admin-shell { grid-template-columns: 1fr; }
.admin-toggle {
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line);
background: #fff; color: var(--ink); cursor: pointer; flex-shrink: 0;
}
.admin-side {
position: fixed; top: 0; left: 0; height: 100vh; width: 264px; max-width: 82vw;
z-index: 200; transform: translateX(-100%); transition: transform .22s ease;
box-shadow: 8px 0 24px rgba(0,0,0,.25);
}
.admin-shell.sidebar-open .admin-side { transform: translateX(0); }
.admin-side nav { flex-direction: column; }
.admin-backdrop {
display: block; position: fixed; inset: 0; z-index: 199; background: rgba(15,23,42,.5);
opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.admin-shell.sidebar-open .admin-backdrop { opacity: 1; pointer-events: auto; }
}
/* ============ ecommerce feature styles ============ */
.promo-bar { background: var(--primary-dark); color: #d1fae5; text-align: center; font-size: 12.5px; padding: 6px 12px; }
.icon-nav { position: relative; }
.icon-nav .badge, .cart-link .badge { position: absolute; top: -6px; right: -10px; }
/* product card with wishlist */
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-link { display: flex; flex-direction: column; height: 100%; }
.wish-btn { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.wish-btn:hover { color: var(--red); }
.wish-btn.on { color: var(--red); border-color: var(--red); }
.deal-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.card-rating { margin: 2px 0 6px; }
.stars { color: #f59e0b; letter-spacing: 1px; font-size: 13px; }
.stars span { color: #d1d5db; }
.stars span.on { color: #f59e0b; }
.rating-count { color: var(--muted); font-size: 12px; margin-left: 4px; }
.site-footer { margin-top: 0; }
/* .foot-contact used to be set to #cbd5e1 here for the dark footer. On the light
one that is barely readable, and the contact column sets its own colours. */
/* Floating WhatsApp — bottom LEFT. It used to sit bottom right with the chat
bubble stacked above it, which put two round buttons in one corner and made
the assistant look like an afterthought. One in each corner separates them. */
.float-wa { position: fixed; bottom: 20px; left: 20px; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 40; transition: transform .15s; }
.float-wa:hover { transform: scale(1.06); }
/* auth pages */
.auth-page { display: flex; justify-content: center; }
.auth-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; width: 100%; max-width: 420px; }
.auth-box form { display: flex; flex-direction: column; gap: 14px; }
.auth-box .btn { width: 100%; text-align: center; }
.auth-alt { text-align: center; margin: 14px 0 0; font-size: 14px; }
.auth-alt a { color: var(--primary); font-weight: 600; }
/* account */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.account-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 80px; }
.account-user { padding: 8px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; display: flex; flex-direction: column; }
.account-side nav { display: flex; flex-direction: column; gap: 2px; }
.account-side nav a { padding: 9px 10px; border-radius: 7px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.account-side nav a:hover { background: var(--bg); }
.account-side nav a.on { background: var(--primary); color: #fff; }
.pill { background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.account-side nav a.on .pill { background: rgba(255,255,255,.25); color: #fff; }
/* order cards */
.order-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.order-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.order-card-no { font-weight: 700; color: var(--primary); margin-right: 10px; }
.order-card-items { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.order-card-items img { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.order-card-items .more { color: var(--muted); font-size: 13px; }
.order-card-foot { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.order-card-foot .btn { margin-left: auto; }
/* wraps rather than overflowing once a fourth button joins the row on mobile */
.order-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* product page additions */
.product-rating { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.share-row { display: flex; gap: 14px; align-items: center; margin: 16px 0; font-size: 14px; }
.share-row a { color: var(--primary); font-weight: 600; }
.wish-btn-lg { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer; }
.wish-btn-lg.on { color: var(--red); border-color: var(--red); }
/* reviews */
.reviews-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.review { border-bottom: 1px solid var(--line); padding: 14px 0; }
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.review-form { display: flex; flex-direction: column; gap: 12px; }
.star-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; font-size: 26px; }
.star-picker input { display: none; }
.star-picker label { color: #d1d5db; cursor: pointer; padding: 0 2px; }
.star-picker input:checked ~ label,
.star-picker label:hover, .star-picker label:hover ~ label { color: #f59e0b; }
/* coupon + discount */
.coupon-box { display: flex; gap: 8px; margin: 10px 0; }
.coupon-box input { flex: 1; text-transform: uppercase; }
.sum-row.discount { color: var(--green); font-weight: 600; }
.sum-row.discount .rm { color: var(--muted); margin-left: 6px; text-decoration: none; }
/* shop filters */
.side-h { margin-top: 18px; }
.price-filter { display: flex; flex-direction: column; gap: 8px; }
.price-inputs { display: flex; align-items: center; gap: 6px; }
.price-inputs input { width: 100%; padding: 7px 8px; }
/* info pages */
.info-page .prose p, .info-page .prose li { font-size: 15px; }
.info-page .prose ul { padding-left: 20px; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin: 10px 0 0; color: var(--text); }
/* admin extras */
.coupon-admin-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.coupon-admin-form label { flex: 1; min-width: 130px; }
.coupon-admin-form .chk { flex-direction: row; align-items: center; gap: 8px; min-width: auto; }
.row-actions { display: flex; gap: 6px; }
.row-actions form { display: inline; }
.panel-head-row { display: flex; justify-content: space-between; align-items: center; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 90px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.bar { background: var(--bg); border-radius: 6px; height: 18px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--primary); }
.bar-val { text-align: right; font-weight: 600; }
@media (max-width: 900px) {
.account-layout, .reviews-layout { grid-template-columns: 1fr; }
.account-side { position: static; }
}
/* ============ homepage rich sections ============ */
/* hero carousel */
.hero-carousel { position: relative; overflow: hidden; }
.hero-track { display: flex; transition: transform .5s ease; }
.hero-slide { min-width: 100%; }
.hero-slide .hero-inner { padding: 76px 20px; }
.hero-copy { max-width: 560px; }
.s-teal { background: linear-gradient(120deg, var(--ink) 0%, #134e4a 100%); }
.s-amber { background: linear-gradient(120deg, #7c2d12 0%, #b45309 55%, #f59e0b 130%); }
.s-navy { background: linear-gradient(120deg, #0b1220 0%, #1e3a5f 100%); }
.hero-slide h1, .hero-slide h2 { color: #fff; font-size: 44px; font-weight: 800; margin: 0 0 14px; letter-spacing: -1px; }
.hero-slide .hero-kicker { color: var(--accent); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; margin: 0 0 10px; }
.s-amber .hero-kicker { color: #fde68a; }
.hero-slide .hero-sub { color: #cbd5e1; font-size: 17px; margin: 0 0 28px; }
.s-amber .hero-sub { color: #fff7ed; }
.btn-dark { background: var(--ink); }
.btn-dark:hover { background: #000; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s; }
.hero-arrow:hover { background: rgba(255,255,255,.32); }
.hero-arrow.prev { left: 16px; } .hero-arrow.next { right: 16px; }
.hero-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: all .2s; }
.hero-dots span.on { background: #fff; width: 24px; border-radius: 5px; }
/* category cards */
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.cat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-card-img { aspect-ratio: 1.3; background: #fff; display: flex; align-items: center; justify-content: center; padding: 12px; }
.cat-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-card-body { padding: 10px 12px; border-top: 1px solid var(--line); }
.cat-card-body strong { display: block; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-card-body span { font-size: 12px; color: var(--muted); }
/* promo banners */
.promo-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promo-banner { border-radius: var(--radius); padding: 26px 24px; color: #fff; min-height: 130px; display: flex; align-items: center; transition: transform .15s; overflow: hidden; position: relative; }
.promo-banner:hover { transform: translateY(-3px); }
.promo-banner h3 { color: #fff; font-size: 22px; margin: 4px 0 6px; }
.promo-banner p { margin: 0 0 8px; font-size: 13.5px; opacity: .9; }
.pb-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; opacity: .85; }
.pb-cta { font-weight: 700; font-size: 14px; }
.pb-deals { background: linear-gradient(120deg, #b45309, #f59e0b); }
.pb-new { background: linear-gradient(120deg, #0f766e, #14b8a6); }
.pb-cod { background: linear-gradient(120deg, #1e293b, #475569); }
/* perks band */
/* testimonials */
.t-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
@media (max-width: 900px) {
.hero-slide h1, .hero-slide h2 { font-size: 30px; }
.hero-slide .hero-inner { padding: 52px 20px; }
.promo-banners { grid-template-columns: 1fr; }
.cat-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
/* ============ info pages ============ */
.info-layout { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
.info-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 80px; }
.info-side h3 { margin: 0 0 10px; font-size: 15px; }
.info-side nav { display: flex; flex-direction: column; gap: 2px; }
.info-side nav a { padding: 9px 10px; border-radius: 7px; font-size: 14px; }
.info-side nav a:hover { background: var(--bg); }
.info-side nav a.on { background: var(--primary); color: #fff; }
.info-help { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.info-help a { color: var(--primary); font-weight: 600; }
.info-main .page-title { margin-top: 0; }
.prose .lead { font-size: 17px; color: var(--ink); font-weight: 500; margin-bottom: 18px; }
.prose h3 { margin: 22px 0 8px; font-size: 17px; }
.prose p, .prose li { font-size: 15px; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0; }
.about-stats div { background: var(--bg); border-radius: var(--radius); padding: 16px; text-align: center; }
.about-stats strong { display: block; font-size: 24px; color: var(--primary); }
.about-stats span { font-size: 12.5px; color: var(--muted); }
.contact-list { list-style: none; padding: 0; }
.contact-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list a { color: var(--primary); font-weight: 600; }
@media (max-width: 900px) {
.info-layout { grid-template-columns: 1fr; }
.info-side { position: static; }
.info-side nav { flex-direction: row; flex-wrap: wrap; }
.about-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ============ white header with real logo ============ */
.site-header { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.brand-logo { height: 42px; width: auto; display: block; }
.site-header .search input { border: 1px solid var(--line); }
.main-nav a { color: var(--text); }
.main-nav a:hover { color: var(--primary); }
.main-nav .icon-nav, .main-nav .cart-link { color: var(--ink); }
.main-nav .icon-nav:hover, .main-nav .cart-link:hover { color: var(--primary); }
.header-inner .badge { background: var(--accent); color: #fff; }
@media (max-width: 900px) {
.brand-logo { height: 34px; }
}
/* ============ customer account: avatars, address book ============ */
.avatar-sm { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; overflow: hidden; }
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.account-link { display: inline-flex; align-items: center; gap: 7px; }
.avatar-lg { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; overflow: hidden; margin: 0 auto 8px; }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.account-user { text-align: center; }
.avatar-xl { width: 84px; height: 84px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.avatar-xl img { width: 100%; height: 100%; object-fit: cover; }
.account-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.avatar-edit { display: flex; align-items: center; gap: 18px; padding-bottom: 6px; }
.avatar-edit .avatar-lg { margin: 0; }
.file-label { font-weight: 600; font-size: 13.5px; }
.file-label input { display: block; margin-top: 6px; font-weight: 400; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chk { flex-direction: row; align-items: center; gap: 8px; }
.account-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #b91c1c; }
.btn.btn-danger-ghost { background: #fff; color: var(--red); border-color: #fecaca; }
.btn.btn-danger-ghost:hover { background: #fef2f2; }
.order-card-btns { margin-left: auto; display: flex; gap: 6px; }
.order-card-btns form { display: inline; }
.addr-form { display: none; margin-bottom: 20px; }
.addr-form.open { display: flex; }
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.addr-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.addr-card.is-default { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.addr-default-tag { position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.addr-label { display: inline-block; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.addr-card strong { display: block; }
.addr-card p { margin: 4px 0; font-size: 13.5px; }
.addr-actions { display: flex; gap: 6px; margin-top: 10px; }
.addr-actions form { display: inline; }
/* checkout saved-address picker */
.saved-addr-pick { margin-bottom: 18px; }
.saved-addr-row { display: flex; gap: 10px; flex-wrap: wrap; }
.saved-addr { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; min-width: 160px; display: flex; flex-direction: column; gap: 2px; font-family: inherit; }
.saved-addr:hover { border-color: var(--primary); }
.saved-addr.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.saved-addr strong { font-size: 13.5px; }
.saved-addr span { font-size: 12px; color: var(--text); }
@media (max-width: 900px) { .form-2col { grid-template-columns: 1fr; } }
/* ============ line icons ============ */
.ic { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.account-link { display: inline-flex; align-items: center; gap: 7px; }
.account-nav a { display: flex; align-items: center; gap: 11px; }
.account-nav a .ic { color: var(--muted); }
.account-nav a.on .ic { color: #fff; }
.account-nav a span:not(.pill) { flex: 1; }
.account-nav a .pill { flex: none; }
/* ============ order detail + status timeline ============ */
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.back-link { color: var(--primary); font-weight: 600; font-size: 13.5px; }
.status-badge.big { font-size: 13px; padding: 6px 14px; }
.order-placed-banner { display: flex; align-items: center; gap: 16px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px; }
.order-placed-banner .check { width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.order-placed-banner h1 { font-size: 22px; margin: 0 0 4px; }
.cancelled-note { border-color: #fecaca; background: #fef2f2; }
.cancel-why { margin: 6px 0 0; font-size: 14.5px; }
.cancel-why-note { margin: 2px 0 0; font-style: italic; font-size: 13.5px; }
/* Cancel-with-reason modal.