/* ==========================================================================
   Storefront stylesheet - no CDN, no build step.
   --brand comes from the admin theme colour setting.
   ========================================================================== */

:root {
    --brand: #ff4d00;
    --brand-rgb: 255, 77, 0;
    --secondary: #111827;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg: #f7f8fa;
    --surface: #ffffff;
    --success: #12b76a;
    --danger: #f04438;
    --warning: #f79009;
    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow: 0 4px 16px rgba(16, 24, 40, .08);
    --shadow-lg: 0 18px 40px rgba(16, 24, 40, .16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
[class*="col-"] { padding: 0 8px; }
.col-3 { width: 25%; } .col-4 { width: 33.333%; } .col-6 { width: 50%; }
.col-8 { width: 66.666%; } .col-9 { width: 75%; } .col-12 { width: 100%; }
@media (max-width: 860px) { [class*="col-"] { width: 100% !important; } }

/* ------------------------------------------------------------ marquee bar */
.marquee-bar {
    background: var(--secondary);
    color: #fff;
    overflow: hidden;
    font-size: 13.5px;
    padding: 8px 0;
    white-space: nowrap;
}
.marquee-bar .marquee-track {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 28s linear infinite;
}
.marquee-bar:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ----------------------------------------------------------------- header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 60; }
.site-header .header-inner { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.site-header .logo img { max-height: 46px; }
.site-header .logo span { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.site-header .logo span b { color: var(--brand); }

.main-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.main-nav a {
    padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: 14.5px;
}
.main-nav a:hover, .main-nav a.active { background: rgba(var(--brand-rgb), .08); color: var(--brand); text-decoration: none; }
.main-nav .has-children { position: relative; }
.main-nav .submenu {
    position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--border);
    border-radius: 10px; min-width: 190px; box-shadow: var(--shadow); padding: 6px; display: none; z-index: 70;
}
.main-nav .has-children:hover .submenu { display: block; }
.main-nav .submenu a { display: block; padding: 7px 10px; font-weight: 500; font-size: 14px; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.search-box { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.search-box input { border: none; padding: 9px 15px; min-width: 190px; font-size: 14px; outline: none; }
.search-box button {
    border: none; background: var(--brand); color: #fff; padding: 0 16px; cursor: pointer; font-weight: 600;
}
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.cart-link .cart-count {
    background: var(--brand); color: #fff; border-radius: 999px; font-size: 11.5px;
    min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 10px; border: 1px solid transparent;
    font-weight: 700; font-size: 14.5px; cursor: pointer; background: #fff; color: var(--text);
    text-decoration: none; transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(var(--brand-rgb), .3); }
.btn-dark { background: var(--secondary); color: #fff; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-light { background: #fff; border-color: var(--border); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 14px 30px; font-size: 16px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------------------------------------------------------------- sections */
.section { padding: 42px 0; }
.section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.section-head h2 { font-size: 24px; margin: 0; letter-spacing: -.02em; }
.section-head .spacer { flex: 1; }
.section-head a { color: var(--brand); font-weight: 600; font-size: 14px; }

/* ---------------------------------------------------------------- banners */
.banner-slider { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--secondary); }
.banner-slider .slides { display: flex; transition: transform .45s ease; }
.banner-slider .slide { min-width: 100%; position: relative; }
.banner-slider .slide img { width: 100%; height: 420px; object-fit: cover; display: block; }
.banner-slider .slide-caption {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    padding: 0 8%; color: #fff; background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .05));
}
.banner-slider .slide-caption h2 { font-size: 40px; margin: 0 0 8px; max-width: 620px; line-height: 1.15; }
.banner-slider .slide-caption p { font-size: 18px; margin: 0 0 18px; max-width: 520px; opacity: .95; }
.banner-slider .nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
    border-radius: 50%; border: none; background: rgba(255, 255, 255, .85); cursor: pointer; font-size: 18px; z-index: 3;
}
.banner-slider .nav-btn.prev { left: 14px; }
.banner-slider .nav-btn.next { right: 14px; }
.banner-slider .dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.banner-slider .dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .5); cursor: pointer; }
.banner-slider .dots button.active { background: #fff; width: 24px; border-radius: 999px; }
@media (max-width: 700px) {
    .banner-slider .slide img { height: 260px; }
    .banner-slider .slide-caption h2 { font-size: 24px; }
    .banner-slider .slide-caption p { font-size: 15px; }
}

/* --------------------------------------------------------------- category */
.category-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.category-tile {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 10px; text-align: center; transition: box-shadow .15s, transform .15s;
}
.category-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.category-tile .cat-icon {
    width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%;
    background: rgba(var(--brand-rgb), .1); display: grid; place-items: center; overflow: hidden;
}
.category-tile .cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.category-tile .cat-icon span { color: var(--brand); font-weight: 800; font-size: 20px; }
.category-tile .cat-name { font-weight: 600; font-size: 14px; }
.category-tile .cat-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------------ offer */
/* NOTE: the horizontal promo banner styles that used to live here were removed.
   They shared the generic .offer-card class with the offer-page product grid
   (resources/views/frontend/partials/offer-card.blade.php) and leaked
   "padding: 30px 34px; gap: 26px; align-items: center; flex-wrap: wrap" plus
   ".offer-card .offer-body { min-width: 260px }" onto those cards. Because the
   grid uses minmax(240px, 1fr), a 260px-wide body could not fit inside a ~170-230px
   card, so the text overflowed and was clipped - on desktop only, since the
   <=700px media query below used to shrink that padding again. The offer-page
   card now owns its styles exclusively (see offers.blade.php). */

/* ------------------------------------------------------- product slider */
.product-slider { position: relative; }
.product-slider .track {
    display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding: 4px 2px 14px; cursor: grab;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.product-slider .track.dragging { cursor: grabbing; scroll-behavior: auto; }
.product-slider .track.dragging * { user-select: none; pointer-events: none; }
.product-slider .track > * { flex: 0 0 250px; scroll-snap-align: start; }
.product-slider .slide-nav {
    position: absolute; top: 40%; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow); cursor: pointer; z-index: 5;
}
.product-slider .slide-nav.prev { left: -14px; }
.product-slider .slide-nav.next { right: -14px; }
@media (max-width: 700px) { .product-slider .slide-nav { display: none; } .product-slider .track > * { flex: 0 0 68%; } }

/* ---------------------------------------------------------- product card */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; }
.product-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column; position: relative; transition: box-shadow .16s, transform .16s;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product-card .thumb { position: relative; aspect-ratio: 1 / 1; background: #f3f4f6; overflow: hidden; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .flags { position: absolute; top: 9px; left: 9px; display: flex; flex-direction: column; gap: 5px; }
.product-card .flag { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 5px; color: #fff; background: var(--danger); }
.product-card .flag.new { background: var(--secondary); }
.product-card .flag.out { background: #6b7280; }
.product-card .card-body { padding: 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product-card .card-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; min-height: 39px; }
.product-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.product-card .price { color: var(--brand); font-weight: 800; font-size: 18px; }
.product-card .old-price { color: var(--muted); text-decoration: line-through; font-size: 13.5px; }
.product-card .card-actions { display: flex; gap: 7px; }
.product-card .card-actions .btn { flex: 1; }

/* --------------------------------------------------------------- features */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; }
.feature-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px 18px; text-align: center;
}
.feature-card .f-icon {
    width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 14px;
    background: rgba(var(--brand-rgb), .1); color: var(--brand); display: grid; place-items: center;
}
.feature-card .f-icon svg { width: 26px; height: 26px; }
.feature-card h3 { margin: 0 0 6px; font-size: 16px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ------------------------------------------------------------- breadcrumb */
.breadcrumb { display: flex; gap: 7px; font-size: 13.5px; color: var(--muted); padding: 16px 0 0; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }

/* ------------------------------------------------------------------ shop */
.shop-layout { display: flex; gap: 22px; align-items: flex-start; }
.shop-sidebar { flex: 0 0 240px; }
.filter-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.filter-box h3 { font-size: 15px; margin: 0 0 12px; }
.filter-box ul { list-style: none; margin: 0; padding: 0; }
.filter-box li a { display: block; padding: 6px 0; font-size: 14px; color: var(--muted); }
.filter-box li a.active { color: var(--brand); font-weight: 700; }
.shop-content { flex: 1; min-width: 0; }
.toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
}
.toolbar .spacer { flex: 1; }
@media (max-width: 860px) { .shop-layout { flex-direction: column; } .shop-sidebar { flex: 1; width: 100%; } }

/* --------------------------------------------------------------- product */
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; gap: 22px; } }
.gallery .main-image {
    aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; margin-bottom: 12px;
}
.gallery .main-image img { width: 100%; height: 100%; object-fit: contain; }
.gallery .thumbs { display: flex; gap: 9px; flex-wrap: wrap; }
.gallery .thumbs button {
    width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 2px solid var(--border);
    background: #fff; padding: 0; cursor: pointer;
}
.gallery .thumbs button.active { border-color: var(--brand); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product-info h1 { font-size: 27px; margin: 0 0 10px; line-height: 1.25; }
.product-info .rating { color: #f59e0b; font-size: 14px; margin-bottom: 10px; }
.product-info .price-block { display: flex; align-items: baseline; gap: 12px; margin: 14px 0; }
.product-info .price-block .now { font-size: 30px; font-weight: 800; color: var(--brand); }
.product-info .price-block .was { text-decoration: line-through; color: var(--muted); }
.product-info .price-block .off { background: rgba(240, 68, 56, .1); color: var(--danger); font-weight: 700; padding: 3px 9px; border-radius: 6px; font-size: 13px; }
.product-info .stock { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.product-info .stock.in { color: var(--success); }
.product-info .stock.out { color: var(--danger); }
.product-info .short { color: var(--muted); margin: 0 0 16px; }
.qty-input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; width: fit-content; background: #fff; }
.qty-input button { border: none; background: none; width: 38px; height: 42px; font-size: 18px; cursor: pointer; color: var(--text); }
.qty-input input { width: 52px; height: 42px; border: none; text-align: center; font-size: 15px; font-weight: 600; outline: none; }
.buy-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.meta-list { margin-top: 18px; font-size: 13.5px; color: var(--muted); line-height: 1.9; }
.meta-list b { color: var(--text); }

.variant-block { margin-bottom: 16px; }
.variant-block .v-label { font-weight: 700; font-size: 14px; margin-bottom: 8px; display: block; }
.variant-options { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-chip {
    border: 1.5px solid var(--border); background: #fff; border-radius: 9px; padding: 8px 14px;
    cursor: pointer; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
}
.variant-chip.active { border-color: var(--brand); color: var(--brand); background: rgba(var(--brand-rgb), .06); }
.variant-chip .swatch { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 34px 0 20px; flex-wrap: wrap; }
.tabs button {
    padding: 11px 18px; border: none; background: none; font-weight: 700; font-size: 14.5px;
    color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent;
}
.tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-pane { display: none; } .tab-pane.active { display: block; }
.video-box { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; margin: 18px 0; }
.video-box iframe { width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------- reviews */
.review-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.review-item .review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-item .stars { color: #f59e0b; }
.review-item .who { font-weight: 700; }
.review-item .when { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.review-item .media { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.review-item .media img, .review-item .media video { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.review-item .admin-reply { background: #f9fafb; border-left: 3px solid var(--brand); padding: 9px 12px; margin-top: 10px; font-size: 13.5px; }

/* ------------------------------------------------------------------ cart */
.cart-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; }
.cart-table th, .cart-table td { padding: 13px; border-bottom: 1px solid var(--border); text-align: left; }
.cart-table th { background: #fafbfc; font-size: 12.5px; text-transform: uppercase; color: var(--muted); }
.cart-table img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; }
.cart-table .remove { color: var(--danger); cursor: pointer; background: none; border: none; font-size: 13px; }
.summary-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.summary-box .line { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14.5px; }
.summary-box .line.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 13px; font-weight: 800; font-size: 18px; }
.summary-box .line .label { color: var(--muted); }
.coupon-row { display: flex; gap: 8px; margin: 14px 0; }
.coupon-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; }

/* -------------------------------------------------------------- checkout */
.checkout-layout { display: flex; gap: 22px; align-items: flex-start; }
.checkout-form { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.checkout-summary { flex: 0 0 330px; }
@media (max-width: 900px) { .checkout-layout { flex-direction: column; } .checkout-summary { flex: 1; width: 100%; } }
.form-group { margin-bottom: 15px; }
.form-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-label .req { color: var(--danger); }
.form-control, .form-select, textarea.form-control {
    width: 100%; padding: 11px 13px; font: inherit; border: 1px solid var(--border);
    border-radius: 10px; background: #fff; color: var(--text);
}
.form-control:focus, .form-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.form-hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.form-error { color: var(--danger); font-size: 13px; margin-top: 4px; }
.alert { padding: 13px 15px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.alert-success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.alert-danger { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.alert-warning { background: #fffaeb; border-color: #fedf89; color: #b54708; }
.alert-info { background: #eff8ff; border-color: #b2ddff; color: #175cd3; }
.terms-line { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 16px; }

/* ----------------------------------------------------------------- popup */
.popup-backdrop {
    position: fixed; inset: 0; background: rgba(17, 24, 39, .6); display: none;
    align-items: center; justify-content: center; z-index: 200; padding: 18px;
}
.popup-backdrop.open { display: flex; }
.popup-card { background: #fff; border-radius: 16px; max-width: 460px; width: 100%; overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.popup-card .popup-image { aspect-ratio: 1 / 1; background: #f3f4f6; }
.popup-card .popup-image img { width: 100%; height: 100%; object-fit: cover; }
.popup-card .popup-body { padding: 20px; text-align: center; }
.popup-card .popup-body h3 { margin: 0 0 8px; font-size: 20px; }
.popup-card .popup-body p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.popup-card .popup-close {
    position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
    border: none; background: rgba(255, 255, 255, .9); cursor: pointer; font-size: 17px;
}

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--secondary); color: #cbd5e1; padding: 46px 0 20px; margin-top: 50px; }
.site-footer h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; font-size: 14px; }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }
.site-footer .socials { display: flex; gap: 10px; margin-top: 14px; }
.site-footer .socials a {
    width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .08);
    display: grid; place-items: center; color: #fff;
}
.site-footer .socials a:hover { background: var(--brand); }
.site-footer .socials svg { width: 19px; height: 19px; }
.site-footer .bottom {
    border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 30px; padding-top: 18px;
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px;
}

/* ------------------------------------------------------------- utilities */
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 18px; }
.mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; }
.d-flex { display: flex; } .align-center { align-items: center; } .gap-2 { gap: 10px; }
.justify-between { justify-content: space-between; } .flex-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(var(--brand-rgb), .1); color: var(--brand); }
.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.pagination { display: flex; gap: 5px; list-style: none; padding: 0; flex-wrap: wrap; margin-top: 22px; }
.pagination li span, .pagination li a {
    display: block; padding: 8px 13px; border: 1px solid var(--border); border-radius: 9px; background: #fff; font-size: 14px;
}
.pagination li.active span { background: var(--brand); border-color: var(--brand); color: #fff; }
.toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--secondary); color: #fff;
    padding: 12px 20px; border-radius: 10px; z-index: 300; box-shadow: var(--shadow-lg); font-size: 14px;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.show { opacity: 1; }
.order-summary-table { width: 100%; border-collapse: collapse; }
.order-summary-table th, .order-summary-table td { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; text-align: left; }

/* ==========================================================================
   MOBILE / TOUCH FIXES
   ========================================================================== */

html, body { overflow-x: hidden; max-width: 100%; }
img, iframe, video, svg, table { max-width: 100%; }

a, button, .btn, input, select, textarea, label, .variant-chip {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn { min-height: 46px; }
.btn-sm { min-height: 40px; }
.main-nav a, .mobile-nav a { min-height: 44px; display: flex; align-items: center; }

.tapped { opacity: .72; }

/* ------------------------------------------------------- hamburger menu --
   Designed button: soft brand-tinted glass tile, asymmetric bars that grow on
   their own delays, and a springy morph into a cross. Each bar keeps a fixed
   width so the open/closed change reads as a deliberate animation.        */
.nav-toggle {
    position: relative;
    display: none;
    width: 46px; height: 46px; flex: 0 0 auto; padding: 0;
    border: 1px solid rgba(var(--brand-rgb), .16);
    border-radius: 14px;
    background: linear-gradient(160deg, #fff 0%, rgba(var(--brand-rgb), .07) 100%);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .07), inset 0 1px 0 #fff;
    cursor: pointer;
    align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    transition: transform .24s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .24s ease, border-color .24s ease, background .24s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { border-color: rgba(var(--brand-rgb), .3); box-shadow: 0 6px 18px rgba(var(--brand-rgb), .16), inset 0 1px 0 #fff; }
.nav-toggle:active { transform: scale(.9); }
.nav-toggle:focus-visible { outline: 2px solid rgba(var(--brand-rgb), .55); outline-offset: 2px; }

.nav-toggle .bar {
    display: block; height: 2px; border-radius: 3px;
    background: linear-gradient(90deg, var(--header-nav, var(--brand)), var(--brand));
    transition: transform .34s cubic-bezier(.34, 1.56, .64, 1),
                width .26s cubic-bezier(.34, 1.56, .64, 1),
                opacity .18s ease, margin .26s ease;
}
/* 20 / 13 / 17 - the uneven ends are what make it look drawn, not default */
.nav-toggle .bar-1 { width: 20px; }
.nav-toggle .bar-2 { width: 13px; }
.nav-toggle .bar-3 { width: 17px; }

.nav-toggle.open {
    border-color: rgba(var(--brand-rgb), .34);
    background: linear-gradient(160deg, rgba(var(--brand-rgb), .12), rgba(var(--brand-rgb), .04));
}
.nav-toggle.open .bar-1 { width: 20px; transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .bar-2 { width: 0; opacity: 0; margin-left: -2px; }
.nav-toggle.open .bar-3 { width: 20px; transform: translateY(-7px) rotate(-45deg); }

/* one expanding ring each time it opens */
.nav-toggle-glow {
    position: absolute; inset: -1px; border-radius: inherit;
    pointer-events: none; opacity: 0;
}
.nav-toggle.open .nav-toggle-glow { animation: navRing .75s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes navRing {
    0%   { opacity: .85; box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .40); }
    100% { opacity: 0;   box-shadow: 0 0 0 14px rgba(var(--brand-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle, .nav-toggle .bar { transition-duration: .01ms; }
    .nav-toggle.open .nav-toggle-glow { animation: none; }
}

.mobile-panel {
    display: none;
    border-top: 1px solid var(--border);
    background: #fff;
    padding: 14px 16px 20px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 18px 34px rgba(16, 24, 40, .10);
}
.mobile-panel.open { display: block; animation: panelDrop .3s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes panelDrop {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* links stagger in after the panel */
.mobile-panel.open .mobile-nav > a { animation: panelLink .34s ease both; }
.mobile-panel.open .mobile-nav > a:nth-child(1) { animation-delay: .04s; }
.mobile-panel.open .mobile-nav > a:nth-child(2) { animation-delay: .08s; }
.mobile-panel.open .mobile-nav > a:nth-child(3) { animation-delay: .12s; }
.mobile-panel.open .mobile-nav > a:nth-child(4) { animation-delay: .16s; }
.mobile-panel.open .mobile-nav > a:nth-child(5) { animation-delay: .20s; }
.mobile-panel.open .mobile-nav > a:nth-child(6) { animation-delay: .24s; }
@keyframes panelLink {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-panel.open, .mobile-panel.open .mobile-nav > a { animation: none; }
}

.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav > a {
    padding: 13px 2px; font-weight: 600; font-size: 15.5px;
    border-bottom: 1px solid var(--border);
}
.m-acc { border-bottom: 1px solid var(--border); }
.m-acc-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 13px 2px; background: none; border: none; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 15.5px; color: inherit; min-height: 44px;
}
.m-caret { font-size: 20px; line-height: 1; color: var(--muted); transition: transform .18s; }
.m-acc.open .m-caret { transform: rotate(45deg); }
.m-acc-body { display: none; padding: 0 0 10px 12px; }
.m-acc.open .m-acc-body { display: block; }
.m-acc-body a { display: block; padding: 11px 2px; font-size: 14.5px; color: var(--muted); }

.m-section { margin-top: 18px; }
.m-title { font-weight: 700; margin-bottom: 10px; font-size: 14px; }
.m-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.m-cat-grid a {
    background: #f4f6fa; border: 1px solid var(--border); border-radius: 9px;
    padding: 11px 12px; font-size: 14px; font-weight: 600; min-height: 44px;
    display: flex; align-items: center;
}

/* ------------------------------------------------------- bottom tab bar */
.mobile-tabbar { display: none; }

/* ---------------------------------------------------------- breakpoints */
@media (max-width: 992px) {
    .main-nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .desktop-search { display: none; }
    .header-inner { padding: 10px 0; gap: 10px; }
    .site-header .logo img { max-height: 36px; }
    .site-header .logo span { font-size: 19px; }
    .cart-link span:first-child { display: none; }

    body.has-tabbar { padding-bottom: 66px; }
    .mobile-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 60px;
        background: #fff; border-top: 1px solid var(--border); z-index: 155;
        box-shadow: 0 -2px 10px rgba(16, 24, 40, .06);
    }
    .mobile-tabbar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; font-size: 11px; color: var(--muted); position: relative; min-height: 60px;
    }
    .mobile-tabbar svg { width: 22px; height: 22px; }
    .mobile-tabbar a.active { color: var(--brand); }
    .tab-badge {
        position: absolute; top: 7px; right: 50%; margin-right: -22px;
        background: var(--brand); color: #fff; border-radius: 999px;
        font-size: 10px; min-width: 17px; height: 17px; line-height: 17px; text-align: center; padding: 0 4px;
    }

    /* keep the floating widgets clear of the tab bar */
    body.has-tabbar #chat-bubble { bottom: 74px; }
    body.has-tabbar #chat-panel { bottom: 136px; }

    .section { padding: 28px 0; }
    .section-head { margin-bottom: 16px; }
    .section-head h2 { font-size: 20px; }
    .site-footer { padding: 32px 0 18px; margin-top: 34px; }
    .summary-box, .checkout-form { padding: 16px; }
    .checkout-summary { flex: 1 1 100%; }
}

@media (max-width: 700px) {
    .container { padding: 0 13px; }

    /* banners */
    .banner-slider .slide img { height: 225px; }
    .banner-slider .slide-caption { padding: 0 6%; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,.15)); justify-content: flex-end; padding-bottom: 22px; }
    .banner-slider .slide-caption h2 { font-size: 20px; }
    .banner-slider .slide-caption p { font-size: 14px; margin-bottom: 12px; }
    .banner-slider .nav-btn { display: none; }
    .banner-slider .slide-caption .btn { padding: 10px 18px; font-size: 14px; }

    /* grids */
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .product-card .card-title { font-size: 13.5px; min-height: 36px; }
    .product-card .price { font-size: 16px; }
    .product-card .card-actions { flex-direction: column; }
    .product-card .card-actions .btn { width: 100%; }
    .category-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    .category-tile { padding: 11px 6px; }
    .category-tile .cat-icon { width: 46px; height: 46px; margin-bottom: 7px; }
    .category-tile .cat-name { font-size: 12.5px; }
    .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .feature-card { padding: 15px 11px; }
    .feature-card h3 { font-size: 14px; }

    /* product slider: comfy swipe */
    .product-slider .track { gap: 11px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
    .product-slider .track > * { flex: 0 0 66%; }
    .product-slider .slide-nav { display: none; }

    /* offer page styles live in resources/views/frontend/offers.blade.php
       (its <style> block is emitted after this file, so it always wins) */

    /* product page */
    .product-detail { gap: 18px; }
    .product-info h1 { font-size: 21px; }
    .product-info .price-block .now { font-size: 25px; }
    .gallery .main-image { margin-bottom: 9px; }
    .gallery .thumbs button { width: 56px; height: 56px; }
    .variant-chip { padding: 10px 14px; font-size: 14px; }
    .qty-input button { width: 46px; height: 48px; }
    .buy-actions { gap: 9px; }
    .buy-actions .btn { flex: 1 1 100%; }
    .tabs button { padding: 10px 12px; font-size: 13.5px; }
    .video-box { margin: 14px 0; }
    .review-item .media img, .review-item .media video { width: 74px; height: 74px; }

    /* cart / checkout become stacked cards */
    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
    .cart-table tr { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
    .cart-table td { border: none; padding: 5px 0; }
    .cart-table td:last-child { text-align: left; }
    .checkout-layout { flex-direction: column; }

    /* popup */
    .popup-card { max-width: 100%; }
    .popup-card .popup-body { padding: 16px; }

    /* footer stacks */
    .site-footer .col-4, .site-footer .col-3, .site-footer .col-2 { width: 100%; }
    .site-footer h4 { margin-top: 18px; }
}

@media (max-width: 400px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .product-card .card-body { padding: 10px; }
    .product-card .card-title { font-size: 12.5px; }
    .mobile-tabbar a { font-size: 10px; }
}

/* ------------------------------------------------- product sticky buy bar */
.product-sticky { display: none; }
@media (max-width: 992px) {
    .product-sticky {
        display: flex; align-items: center; gap: 11px;
        position: fixed; left: 0; right: 0; bottom: 60px; z-index: 156;
        background: #fff; border-top: 1px solid var(--border); padding: 9px 13px;
        box-shadow: 0 -2px 10px rgba(16, 24, 40, .06);
    }
    .product-sticky .ps-info { flex: 1; min-width: 0; }
    .product-sticky .ps-price { font-weight: 800; color: var(--brand); font-size: 17px; }
    .product-sticky .ps-name { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .product-sticky .btn { min-width: 130px; }
}

/* required variant not chosen yet */
.variant-block.needs-choice .variant-options { outline: 2px solid var(--danger); outline-offset: 4px; border-radius: 10px; }

/* anchors must clear the sticky header */
[id] { scroll-margin-top: 96px; }

/* very small screens: header search lives inside the menu only */
@media (max-width: 992px) {
    .header-actions .search-box { display: none; }
}

/* ==========================================================================
   GLASSMORPHISM THEME + NEW HEADER (logo / centred search / icon row)
   ========================================================================== */

:root {
    --glass-bg: rgba(255, 255, 255, .55);
    --glass-bg-strong: rgba(255, 255, 255, .78);
    --glass-border: rgba(255, 255, 255, .65);
    --glass-line: rgba(16, 24, 40, .07);
    --glass-blur: saturate(180%) blur(16px);
    --glass-shadow: 0 10px 30px rgba(16, 24, 40, .08);
    --glass-shadow-lg: 0 18px 46px rgba(16, 24, 40, .13);
}

/* soft coloured background so the frosted panels actually read as glass */
body {
    background:
        radial-gradient(900px 520px at 8% -8%, rgba(var(--brand-rgb), .20), transparent 60%),
        radial-gradient(760px 460px at 92% 4%, rgba(99, 102, 241, .16), transparent 62%),
        radial-gradient(820px 520px at 50% 108%, rgba(16, 185, 129, .14), transparent 60%),
        linear-gradient(180deg, #fbfcff 0%, #f2f5fb 55%, #eef2f9 100%);
    background-attachment: fixed;
}

.glass-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glass-bg .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.glass-bg .blob-1 { width: 320px; height: 320px; top: -60px; left: -40px; background: rgba(var(--brand-rgb), .55); }
.glass-bg .blob-2 { width: 260px; height: 260px; top: 22%; right: -70px; background: rgba(99, 102, 241, .45); }
.glass-bg .blob-3 { width: 300px; height: 300px; bottom: -80px; left: 28%; background: rgba(16, 185, 129, .35); }

/* the reusable frosted surface */
.glass,
.product-card,
.feature-card,
.category-tile,
.summary-box,
.offer-card,
.popup-card,
.tabs-wrapper,
.panel,
.chat-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .glass, .product-card, .feature-card, .category-tile, .summary-box,
    .offer-card, .popup-card, .tabs-wrapper, .panel, .chat-panel { background: #fff; }
}

/* ------------------------------------------------------------- header */
.site-header.glass-bar {
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 6px 24px rgba(16, 24, 40, .06);
}

.header-inner { display: flex; align-items: center; gap: 16px; padding: 11px 0; }

.site-header .logo { flex: 0 0 auto; font-size: 25px; font-weight: 800; letter-spacing: -.6px; color: var(--brand); }
.site-header .logo span { color: var(--brand); }
.site-header .logo img { max-height: 40px; width: auto; display: block; }

/* ------------------------------------------------ search bar (as image) */
.header-search { flex: 1 1 auto; display: flex; justify-content: center; position: relative; }

.search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 430px;
    height: 44px;
    padding: 0 44px 0 40px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid #e6e8ef;
    border-radius: 12px;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.search-form:focus-within {
    background: #fff;
    border-color: rgba(var(--brand-rgb), .5);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .10);
}
.search-icon {
    position: absolute; left: 14px; width: 17px; height: 17px;
    color: #9aa2b1; pointer-events: none;
}
.search-form .search-input {
    width: 100%; border: 0; outline: 0; background: transparent;
    font-size: 14.5px; color: var(--text); min-width: 0;
}
.search-form .search-input::placeholder { color: #9aa2b1; }
.search-form .search-input::-webkit-search-cancel-button { display: none; }

/* the reference design has no button, so it appears only while typing */
.search-submit {
    position: absolute; right: 5px; width: 34px; height: 34px; border-radius: 9px;
    display: none; align-items: center; justify-content: center;
    border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--brand), rgba(var(--brand-rgb), .8));
    color: #fff;
}
.search-submit svg { width: 15px; height: 15px; }
.search-form:focus-within .search-submit,
.search-form.has-value .search-submit { display: inline-flex; }

/* ------------------------------------------------- suggestion dropdown */
.search-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    border-radius: 14px;
    overflow: hidden auto;
    max-height: 420px;
    z-index: 210;
    padding: 6px;
    background: rgba(255, 255, 255, .82);
}
.search-suggest[hidden] { display: none; }
.search-suggest.open { display: block; }

.suggest-item {
    display: flex; align-items: center; gap: 11px;
    padding: 8px; border-radius: 10px;
}
.suggest-item:hover, .suggest-item.active { background: rgba(var(--brand-rgb), .08); }
.suggest-item img {
    width: 46px; height: 46px; border-radius: 9px; object-fit: cover;
    background: #f4f6fa; border: 1px solid rgba(255, 255, 255, .8); flex: 0 0 auto;
}
.suggest-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suggest-name {
    font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest-price { font-size: 13px; font-weight: 700; color: var(--brand); display: flex; gap: 7px; align-items: baseline; }
.suggest-price .was { color: var(--muted); font-weight: 500; font-size: 11.5px; text-decoration: line-through; }
.suggest-price .oos { color: var(--danger); font-weight: 600; font-size: 11.5px; }
.suggest-all {
    display: block; padding: 11px 10px; margin-top: 4px; font-size: 13px; font-weight: 700;
    color: var(--brand); border-top: 1px solid var(--glass-line); text-align: center;
}
.suggest-all:hover { background: rgba(var(--brand-rgb), .07); }
.suggest-empty, .suggest-loading { padding: 14px 12px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------------ icon row */
.header-icons { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.icon-btn {
    position: relative; width: 40px; height: 40px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #1f2937; border: 1px solid transparent; background: transparent;
    cursor: pointer; transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .8); border-color: var(--glass-line); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.cart-btn {
    border: 1px solid #e6e8ef;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cart-pill {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--brand); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.cart-pill.empty { display: none; }

.icon-menu { position: relative; }
.icon-menu-body {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px;
    border-radius: 12px; padding: 6px; display: none; z-index: 205;
    background: rgba(255, 255, 255, .86);
}
.icon-menu.open .icon-menu-body { display: block; }
.icon-menu-body a, .icon-menu-body .soon {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 11px; border-radius: 9px; font-size: 13.5px;
}
.icon-menu-body a.active { background: rgba(var(--brand-rgb), .1); color: var(--brand); font-weight: 700; }
.icon-menu-body .soon { color: var(--muted); }
.icon-menu-body .soon em { font-size: 11px; font-style: normal; opacity: .8; }

/* ------------------------------------------------------------ nav links */
.main-nav { display: flex; align-items: center; gap: 20px; font-size: 14.5px; font-weight: 600; flex: 0 0 auto; }
.main-nav a { color: #1f2937; padding: 4px 0; }
.main-nav a:hover { color: var(--brand); }

@media (min-width: 993px) {
    .main-nav a { min-height: 34px; }
}

/* ------------------------------------------- AJAX navigation (spa.js) -- */
body.spa-loading { cursor: progress; }
#spa-progress { border-radius: 0 3px 3px 0; }

/* ------------------------------------------------------- product cards */
.product-card {
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg); }
.product-card .thumb { display: block; position: relative; background: rgba(255, 255, 255, .5); }
.product-card .thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.product-card .card-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex: 1; }
.product-card .card-title {
    font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 38px;
}
.product-card .price-row { display: flex; align-items: baseline; gap: 7px; margin-top: auto; }
.product-card .price-row .price { font-size: 17px; font-weight: 800; color: var(--brand); }
.product-card .price-row .old-price { font-size: 12.5px; color: var(--muted); text-decoration: line-through; }
.product-card .card-actions { margin-top: 2px; }
.product-card .card-actions .btn { border-radius: 11px; font-weight: 700; }

/* --------------------------------------------------------------- buttons */
.btn { border-radius: 11px; transition: transform .14s, box-shadow .14s, background .14s; }
.btn-primary {
    background: linear-gradient(135deg, var(--brand), rgba(var(--brand-rgb), .8));
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    box-shadow: 0 8px 20px rgba(var(--brand-rgb), .26);
}
.btn-primary:hover { box-shadow: 0 12px 26px rgba(var(--brand-rgb), .34); }
.btn-dark {
    background: linear-gradient(135deg, #1f2937, #111827);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
}
.btn-light {
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--text);
}
.btn-block { width: 100%; display: flex; align-items: center; justify-content: center; }
.btn-disabled { background: #eef1f6; color: #98a2b3; border: 1px solid var(--glass-line); cursor: not-allowed; }

/* ---------------------------------------------------------------- footer */
.site-footer {
    background: linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(9, 12, 20, .98));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------- mobile --
   Row stays: [menu] [logo] [search] [cart]. The nav links are NOT in the
   header - they only live in the drawer, exactly like the desktop bar keeps
   its links out of the header row. The search moved out of the drawer and
   into the header where it is reachable with one thumb.                   */
@media (max-width: 992px) {
    .header-inner { gap: 8px; padding: 8px 0; }
    .site-header .logo { font-size: 17px; max-width: 108px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .site-header .logo img { max-height: 32px; width: auto; max-width: 102px; object-fit: contain; }
    .site-header .logo span { font-size: 17px; }
    .main-nav { display: none; }                      /* links live in the drawer */
    .header-icons { gap: 3px; }

    /* search bar: in the header, sized to whatever room is left */
    .header-search {
        display: flex; flex: 1 1 auto; min-width: 0;
        position: static;                             /* anchor the dropdown to the header */
        justify-content: stretch;
    }
    .header-search .search-form {
        max-width: none; height: 42px; padding: 0 40px 0 33px; border-radius: 12px;
    }
    .header-search .search-input { font-size: 14px; }
    .header-search .search-icon { left: 11px; }
    /* the suggestion list hangs off the header itself, so it can never overflow */
    .header-search .search-suggest {
        position: absolute; top: calc(100% - 6px); left: 10px; right: 10px;
        width: auto; max-width: none; transform: none;
    }
}

@media (max-width: 700px) {
    .product-card .card-body { padding: 10px; gap: 7px; }
    .product-card .card-title { font-size: 13px; min-height: 34px; }
    .product-card .price-row .price { font-size: 15.5px; }
    .product-card .card-actions .btn { min-height: 40px; font-size: 13.5px; }
    .search-form { height: 42px; }
    .glass-bg .blob { opacity: .38; }
}

/* ==========================================================================
   PRODUCT CARD (matches the supplied design) + 4 per row
   ========================================================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 1200px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } }
@media (max-width: 420px)  { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 11px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #ececf1;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: transform .16s ease, box-shadow .16s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(16, 24, 40, .13); }

.product-card .thumb {
    display: block;
    position: relative;
    border-radius: 9px;
    overflow: hidden;
    background: #f6f7fa;
    margin-bottom: 11px;
}
.product-card .thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.product-card:hover .thumb img { transform: scale(1.03); }

.sale-tag {
    position: absolute;
    top: 18px; left: 18px; z-index: 2;
    background: #fff; color: #111827;
    font-size: 12px; font-weight: 600;
    padding: 3px 11px; border-radius: 999px;
    box-shadow: 0 1px 5px rgba(16, 24, 40, .16);
}
.stock-flag {
    position: absolute; inset: auto 0 0 0;
    background: rgba(16, 24, 40, .72); color: #fff;
    font-size: 12px; font-weight: 600; text-align: center; padding: 5px;
}

.product-card .card-body { display: flex; flex-direction: column; flex: 1; }
.product-card .card-cat { font-size: 12.5px; color: #8b93a1; margin-bottom: 3px; }
.product-card .card-title {
    font-size: 15px; font-weight: 700; line-height: 1.35; color: #111827;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 40px; margin-bottom: 9px;
}
.product-card .price-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px;
    margin-top: auto; margin-bottom: 11px;
}
.product-card .price-row .old-price { font-size: 13px; color: #9aa2b1; text-decoration: line-through; }
.product-card .price-row .price { font-size: 17px; font-weight: 800; color: var(--price-color, #0f8a3c); }
.product-card .card-actions { display: flex; flex-direction: column; }

/* the two card buttons, both coloured from the admin panel */
.btn-cart, .btn-buy {
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    color: #fff;
    min-height: 44px;
}
.btn-cart { background: var(--btn-cart, #0b6b2f); }
.btn-cart:hover { filter: brightness(1.09); }
.btn-buy {
    background: var(--btn-buy, #ff6a00);
    margin-top: 9px;
    box-shadow: 0 6px 16px rgba(var(--btn-buy-rgb, 255, 106, 0), .3);
}
.btn-buy:hover { filter: brightness(1.06); }

@media (max-width: 900px) {
    .product-card { padding: 9px; }
    .product-card .card-title { font-size: 13.5px; min-height: 36px; }
    .product-card .price-row .price { font-size: 15.5px; }
    .btn-cart, .btn-buy { min-height: 40px; font-size: 13.5px; }
    .sale-tag { top: 13px; left: 13px; font-size: 11px; padding: 2px 9px; }
}

/* the drag handler must never swallow clicks on cards */
.product-slider .track.dragging * { pointer-events: auto; }

/* ==========================================================================
   9:16 QUICK ORDER POPUP  (order without leaving the page)
   ========================================================================== */

.qo-backdrop {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 14px;
}
.qo-backdrop[hidden] { display: none; }

.qo-modal {
    position: relative;
    width: min(94vw, 430px);
    /* portrait 9:16 phone shape */
    aspect-ratio: 9 / 16;
    max-height: 94vh;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 70px rgba(2, 6, 23, .4);
}
.qo-close {
    position: absolute; top: 9px; right: 9px; z-index: 5;
    width: 32px; height: 32px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .9); color: #111827;
    font-size: 19px; line-height: 1;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .16);
}
.qo-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px; }

.qo-head {
    background: linear-gradient(135deg, var(--btn-buy, #ff6a00), rgba(var(--btn-buy-rgb, 255, 106, 0), .82));
    color: #fff; padding: 15px 14px 13px; text-align: center;
}
.qo-head h3 { margin: 0; font-size: 17px; }
.qo-head p { margin: 3px 0 0; font-size: 12.5px; opacity: .92; }

.qo-product { display: flex; gap: 11px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #eef0f4; margin-bottom: 12px; }
.qo-product img { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; background: #f6f7fa; }
.qo-name { font-size: 14px; font-weight: 700; line-height: 1.35; }
.qo-price { font-size: 14.5px; font-weight: 800; color: var(--price-color, #0f8a3c); margin-top: 3px; }
.qo-qty-label { font-size: 12px; color: var(--muted); font-weight: 600; }

.qo-form .form-group { margin-bottom: 10px; }
.qo-form label { font-size: 13px; font-weight: 600; margin-bottom: 4px; display: block; }
.qo-form .form-control, .qo-form .form-select {
    width: 100%; border: 1px solid #e6e8ef; border-radius: 10px;
    padding: 10px 12px; font-size: 14px; background: #fff;
}
.qo-form .form-control:focus, .qo-form .form-select:focus {
    outline: 0; border-color: rgba(var(--brand-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}

.qo-qty { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.qo-qty button {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e6e8ef;
    background: #f9fafc; font-size: 18px; cursor: pointer; line-height: 1;
}
.qo-qty span { min-width: 26px; text-align: center; font-weight: 700; }

.qo-total {
    display: flex; justify-content: space-between; align-items: center;
    background: #f7f8fb; border: 1px solid #eef0f4; border-radius: 11px;
    padding: 10px 12px; margin: 12px 0; font-size: 14px;
}
.qo-total b { font-size: 17px; color: var(--price-color, #0f8a3c); }

.qo-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
.qo-error { background: #fef3f2; border: 1px solid #fecdca; color: #b42318; border-radius: 10px; padding: 9px 11px; font-size: 13px; margin-bottom: 10px; }

.qo-success { padding: 22px 18px; text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.qo-check {
    width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 12px;
    background: #eafaf0; color: #12b76a; font-size: 32px; line-height: 62px;
}
.qo-success h3 { margin: 0 0 5px; font-size: 18px; }
.qo-success p { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.qo-track {
    font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 700;
    background: #f7f8fb; border: 1px dashed #d7dbe4; border-radius: 10px;
    padding: 11px; margin-bottom: 13px; word-break: break-all;
}

/* ==========================================================================
   MY ACCOUNT + ORDER TRACKING
   ========================================================================== */

.account-wrap { max-width: 900px; margin: 0 auto; padding: 26px 16px 10px; }
.account-head { display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: 14px; margin-bottom: 16px; }
.account-avatar {
    width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--brand), rgba(var(--brand-rgb), .8));
    color: #fff; font-size: 20px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.account-head h2 { margin: 0; font-size: 18px; }
.account-head span { font-size: 13.5px; color: var(--muted); }

.order-card { border-radius: 14px; padding: 14px; margin-bottom: 13px; }
.order-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; }
.order-number { font-weight: 800; font-size: 14.5px; }
.order-date { font-size: 12.5px; color: var(--muted); }
.status-chip { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.status-pending { background: #fff6e5; color: #b54708; }
.status-confirmed { background: #eef4ff; color: #3538cd; }
.status-processing { background: #eef4ff; color: #175cd3; }
.status-shipped { background: #f0f4ff; color: #4a1fb8; }
.status-delivered { background: #eafaf0; color: #067647; }
.status-canceled, .status-returned { background: #fef3f2; color: #b42318; }

.order-items { font-size: 13.5px; color: #475467; margin-bottom: 9px; }
.order-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-total { font-weight: 800; color: var(--price-color, #0f8a3c); }

.timeline { border-left: 2px solid #e9edf3; margin: 10px 0 0 6px; padding-left: 14px; }
.timeline li { position: relative; padding-bottom: 11px; font-size: 13px; }
.timeline li:before {
    content: ''; position: absolute; left: -21px; top: 5px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
}
.timeline .t-status { font-weight: 700; }
.timeline .t-time { color: var(--muted); font-size: 12px; }
.timeline .t-msg { color: #475467; }

/* google translate must not push the layout around */
body { top: 0 !important; }
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
#google_translate_element { display: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ==========================================================================
   STOREFRONT REDESIGN - flat, warm, grocery style
   (white header, green category bar, cream page, inset product images)
   ========================================================================== */

:root {
    --green: #1a7f37;
    --green-dark: #14682c;
    --orange: #f97316;
    --cream: #faf7ef;
    --cream-deep: #f6f1e3;
    --line: #e6e1d5;
    --card-line: #ececec;
}

body.shop-cream {
    background: var(--cream);
}
body.shop-cream .glass-bg { display: none; }

/* ------------------------------------------------------------- header */
.site-header { background: #fff; }
.site-header.glass-bar {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
}
.header-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 68px;
    padding: 0;
}

/* logo */
.site-header .logo {
    display: flex; align-items: center; gap: 9px;
    font-size: 21px; font-weight: 800; letter-spacing: -.4px;
    color: var(--green);
    flex: 0 0 auto;
}
.site-header .logo-text { color: var(--green); }
.site-header .logo-mark {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.site-header .logo-mark svg { width: 19px; height: 19px; }
.site-header .logo img { max-height: 44px; width: auto; display: block; }

/* centred pill search */
.header-search { flex: 1 1 auto; display: flex; justify-content: center; position: relative; }
.search-form {
    position: relative;
    display: flex; align-items: center;
    width: 100%; max-width: 430px; height: 42px;
    padding: 0 14px 0 42px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    transition: border-color .15s, box-shadow .15s;
}
.search-form:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(26, 127, 55, .10);
}
.search-icon { position: absolute; left: 16px; width: 16px; height: 16px; color: #aab0bb; pointer-events: none; }
.search-form .search-input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 14.5px; color: #333; min-width: 0; }
.search-form .search-input::placeholder { color: #9aa2b1; }
.search-submit {
    position: absolute; right: 4px; width: 32px; height: 32px; border-radius: 999px;
    display: none; align-items: center; justify-content: center;
    border: 0; cursor: pointer; background: var(--green); color: #fff;
}
.search-submit svg { width: 14px; height: 14px; }
.search-form:focus-within .search-submit,
.search-form.has-value .search-submit { display: inline-flex; }

/* suggestion dropdown */
.search-suggest {
    position: absolute;
    top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 430px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .12);
    padding: 6px; z-index: 210;
    max-height: 400px; overflow: hidden auto;
}
.search-suggest[hidden] { display: none; }
.search-suggest.open { display: block; }
.suggest-item { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 10px; }
.suggest-item:hover, .suggest-item.active { background: #f4f8f4; }
.suggest-item img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: #f6f7fa; flex: 0 0 auto; }
.suggest-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suggest-name { font-size: 13.5px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-price { font-size: 13px; font-weight: 700; color: var(--green); display: flex; gap: 7px; align-items: baseline; }
.suggest-price .was { color: #98a2b3; font-weight: 500; font-size: 11.5px; text-decoration: line-through; }
.suggest-price .oos { color: #d92d20; font-weight: 600; font-size: 11.5px; }
.suggest-all { display: block; padding: 11px 10px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--green); border-top: 1px solid #f0f0f0; text-align: center; }
.suggest-empty, .suggest-loading { padding: 14px 12px; font-size: 13.5px; color: #667085; text-align: center; }

/* cart: total + bag with orange dot */
.header-icons { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cart-link { display: flex; align-items: center; gap: 10px; color: #111827; }
.cart-total { font-size: 15px; font-weight: 500; white-space: nowrap; }
.cart-bag { position: relative; display: inline-flex; }
.cart-bag svg { width: 24px; height: 24px; }
.cart-dot {
    position: absolute; top: -4px; right: -6px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--orange); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.cart-dot.empty { display: none; }

/* --------------------------------------------------- green category bar */
.main-nav {
    display: block;
    background: var(--green);
    border: 0;
    border-radius: 0;
}
.main-nav-inner {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    min-height: 48px;
    padding: 0 16px;
}
.main-nav a {
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    padding: 12px 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
}
.main-nav a:hover { color: #ffe9c9; }
.main-nav .has-children { position: relative; }
.main-nav .submenu {
    top: 100%;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 14px 30px rgba(16, 24, 40, .12);
    min-width: 190px;
    padding: 6px;
}
.main-nav .submenu a { color: #333; padding: 9px 12px; border-radius: 8px; width: 100%; }
.main-nav .submenu a:hover { background: #f4f8f4; color: var(--green); }

/* ------------------------------------------------------------- hero */
.banner-slider {
    border-radius: 0;
    background: var(--cream-deep);
    overflow: hidden;
}
.banner-slider .slide img { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; }
.banner-slider .nav-btn { display: none; }
.banner-slider .dots {
    position: absolute; left: 0; right: 0; bottom: 14px;
    display: flex; justify-content: center; gap: 7px; z-index: 3;
}
.banner-slider .dots button {
    width: 8px; height: 8px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(17, 24, 39, .28);
}
.banner-slider .dots button.active { background: #111827; }

/* phone chip on the hero, like the reference */
.hero-phone {
    position: absolute; right: 46px; bottom: 42px; z-index: 4;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 20px; font-weight: 700; color: #1f2937;
}
.hero-phone .hp-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fdba74; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.hero-phone .hp-icon svg { width: 20px; height: 20px; }

/* -------------------------------------------------- section headings */
.section-head {
    display: block;
    text-align: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 11px 0;
    margin: 0 0 22px;
}
.section-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--green);
}
.section-head .spacer,
.section-head > a,
.section-head .text-muted { display: none; }

/* ------------------------------------------------- featured categories */
.category-strip {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 34px;
    position: relative;
    padding: 4px 0 8px;
}
.category-tile {
    display: flex; flex-direction: column; align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: 96px;
}
.category-tile:hover { transform: translateY(-2px); }
.cat-icon {
    width: 62px; height: 62px; border-radius: 50%;
    background: var(--cream-deep);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; margin-bottom: 8px;
    border: 1px solid #efe9da;
}
.cat-icon img { width: 44px; height: 44px; object-fit: contain; }
.cat-icon span { font-size: 20px; font-weight: 800; color: var(--green); }
.cat-name { font-size: 12.5px; font-weight: 600; color: #333; text-align: center; line-height: 1.3; }
.cat-sub { display: none; }

/* ------------------------------------------------------- product card */
.product-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--card-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16, 24, 40, .10); }
.product-card .thumb {
    display: block; position: relative;
    border-radius: 6px; overflow: hidden;
    background: #f7f7f5;
    margin: 0 0 12px;
}
.product-card .thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.sale-tag {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: #fff; color: #111827;
    font-size: 11px; font-weight: 500;
    padding: 3px 11px; border-radius: 999px;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .18);
}
.stock-flag {
    position: absolute; inset: auto 0 0 0;
    background: rgba(17, 24, 39, .72); color: #fff;
    font-size: 12px; font-weight: 600; text-align: center; padding: 5px;
}
.product-card .card-body { display: flex; flex-direction: column; flex: 1; padding: 0; gap: 0; }
.product-card .card-cat { font-size: 12px; color: #8b93a1; margin: 0 0 5px; font-weight: 400; }
.product-card .card-title {
    font-size: 15px; font-weight: 700; color: #111827; line-height: 1.35;
    margin: 0 0 9px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 0;
}
.product-card .price-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px;
    margin: auto 0 12px;
}
.product-card .price-row .old-price { font-size: 13px; color: #98a2b3; text-decoration: line-through; order: 1; }
.product-card .price-row .price { font-size: 17px; font-weight: 800; color: var(--price-color, #1a7f37); order: 2; }
.product-card .card-actions { display: flex; flex-direction: column; margin-top: 0; }

.btn-cart, .btn-buy {
    border: 0; border-radius: 999px;
    font-weight: 700; color: #fff;
    min-height: 40px;
    font-size: 14px;
    width: 100%;
}
.btn-cart { background: var(--btn-cart, #1a7f37); }
.btn-cart:hover { background: var(--green-dark); filter: none; }
.btn-buy { background: var(--btn-buy, #f97316); margin-top: 8px; box-shadow: none; }
.btn-buy:hover { filter: brightness(1.05); }
.btn-primary { background: var(--green); border: 0; box-shadow: none; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------- footer */
.site-footer {
    background: #fff;
    border-top: 1px solid #eee;
    color: #444;
    padding: 42px 0 20px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 34px; }
.footer-brand { flex: 1 1 300px; max-width: 420px; }
.footer-brand .footer-logo { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.footer-brand p { font-size: 13.5px; line-height: 1.85; color: #555; margin: 0 0 12px; }
.footer-col { flex: 0 1 200px; }
.site-footer h4 {
    font-size: 15px; font-weight: 700; color: #111827;
    margin: 0 0 12px; letter-spacing: .3px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { font-size: 13.5px; color: #444; }
.site-footer a:hover { color: var(--green); }
.footer-contact li { font-size: 13.5px; color: #444; }
.socials { display: flex; gap: 9px; }
.socials a {
    width: 34px; height: 34px; border-radius: 50%;
    background: #f2f4f7; color: #475467;
    display: inline-flex; align-items: center; justify-content: center;
}
.socials a:hover { background: var(--green); color: #fff; }
.socials svg { width: 17px; height: 17px; }
.site-footer .bottom {
    border-top: 1px solid #eee; margin-top: 26px; padding-top: 16px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    font-size: 12.5px; color: #98a2b3;
}

/* --------------------------------------------------- floating WhatsApp */
.whatsapp-float {
    position: fixed; right: 18px; bottom: 22px; z-index: 200;
    width: 54px; height: 54px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(37, 211, 102, .42);
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.05); }

/* the chat bubble sits above the WhatsApp button */
#chat-bubble { bottom: 86px; }
#chat-panel { bottom: 148px; }

/* ------------------------------------------------------------- mobile */
@media (max-width: 992px) {
    .header-inner { height: 58px; gap: 10px; }
    .site-header .logo { font-size: 18px; }
    .site-header .logo-mark { width: 30px; height: 30px; }
    .cart-total { display: none; }
    .main-nav { display: none; }
    .search-form { max-width: 100%; }
    .mobile-search-wrap { display: block; margin-bottom: 14px; }
    .mobile-panel .search-suggest { position: static; transform: none; max-width: 100%; }
    .banner-slider .slide img { max-height: 300px; }
    .hero-phone { right: 16px; bottom: 22px; font-size: 15px; }
    .hero-phone .hp-icon { width: 30px; height: 30px; }
    .category-strip { gap: 16px; }
    .category-tile { width: 74px; }
    .cat-icon { width: 54px; height: 54px; }
    .cat-icon img { width: 38px; height: 38px; }
    body.has-tabbar #chat-bubble { bottom: 74px; }
    .whatsapp-float { bottom: 74px; right: 14px; width: 48px; height: 48px; }
    .whatsapp-float svg { width: 26px; height: 26px; }
}
@media (max-width: 700px) {
    .section-head h2 { font-size: 19px; }
    .section-head { margin-bottom: 16px; }
    .category-strip { gap: 12px; }
    .category-tile { width: 68px; }
    .product-card { padding: 10px; }
    .product-card .card-title { font-size: 14px; }
    .product-card .price-row .price { font-size: 15.5px; }
    .footer-grid { gap: 22px; }
    .footer-brand { flex: 1 1 100%; max-width: 100%; }
    .footer-col { flex: 1 1 45%; }
}

/* ==========================================================================
   Variant picker inside the quick order popup + variant badges
   ========================================================================== */

.qo-variants { margin-bottom: 12px; }
.qo-variant-group { margin-bottom: 11px; }
.qo-variant-label {
    font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 6px;
}
.qo-req { color: #f04438; }
.qo-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.qo-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #e3e6ec; background: #fff; color: #344054;
    border-radius: 999px; padding: 8px 13px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    min-height: 38px;
}
.qo-chip b { font-weight: 700; color: #667085; font-size: 11.5px; }
.qo-chip:hover { border-color: #b9c0cc; }
.qo-chip.active {
    border-color: var(--green, #1a7f37);
    background: rgba(26, 127, 55, .08);
    color: var(--green, #1a7f37);
}
.qo-chip.active b { color: var(--green, #1a7f37); }
.qo-swatch {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(16, 24, 40, .18); display: inline-block;
}

/* "selected / not selected" line */
.qo-variant-state {
    font-size: 12.5px; font-weight: 600;
    padding: 2px 0 0;
}
.qo-qty-label .qo-variant-state,
.qo-variant-state.chosen { color: #067647; }
.qo-variant-state.missing { color: #b54708; }

/* the product card tells the customer it has options */
.variant-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700;
    color: var(--green, #1a7f37);
    background: rgba(26, 127, 55, .10);
    border-radius: 999px; padding: 2px 9px;
    margin-bottom: 6px;
}
.variant-badge svg { width: 11px; height: 11px; }

/* per group state on the product page */
.v-state {
    font-size: 12.5px; font-weight: 600; margin-left: 8px; color: #b54708;
}
.v-state.chosen { color: #067647; }

/* ==========================================================================
   Admin controlled colours: header bar, header menu bar, hover colour
   (Admin > Settings > Appearance). These come last so they win.
   ========================================================================== */

.site-header,
.site-header.glass-bar {
    background: var(--header-color, #ffffff);
}
.main-nav {
    background: var(--header-nav, var(--green, #1a7f37));
}

/* hover colour for text links */
.site-footer a:hover,
.product-card .card-title:hover,
.breadcrumb a:hover,
.suggest-item:hover .suggest-name,
.suggest-item.active .suggest-name,
.m-cat-grid a:hover,
.mobile-nav a:hover,
.acc-body a:hover,
.card-cat:hover,
.pagination a:hover,
.tabs button:hover,
a.link:hover {
    color: var(--hover-color, #14682c);
}

/* hover colour for icon buttons and the nav */
.icon-btn:hover { color: var(--hover-color, #14682c); }
.main-nav .submenu a:hover { color: var(--hover-color, #14682c); background: #f4f8f4; }

/* hover colour for buttons */
.btn-cart:hover { background: var(--hover-color, #14682c); }
.btn-light:hover { border-color: var(--hover-color, #14682c); color: var(--hover-color, #14682c); }
.btn-primary:hover { background: var(--hover-color, #14682c); }

/* mobile tab bar active/hover */
.mobile-tabbar a.active,
.mobile-tabbar a:hover { color: var(--hover-color, var(--green, #1a7f37)); }
.tab-badge, .cart-dot { background: var(--btn-buy, #f97316); }

/* chip + category tiles */
.category-tile:hover .cat-name { color: var(--hover-color, #14682c); }
.qo-chip:hover { border-color: var(--hover-color, #14682c); color: var(--hover-color, #14682c); }

/* --------- preview swatches on the admin settings page --------- */
.colour-preview { width: 100%; height: 8px; border-radius: 999px; margin-top: 6px; }

/* ==========================================================================
   STOREFRONT - orange / white design
   top promo bar, white header with centred nav, orange price + buttons,
   category sidebar next to the product grid, dark footer strip
   ========================================================================== */

:root {
    --orange: #f97316;
    --orange-dark: #ea6a0c;
    --ink: #111827;
    --ink-soft: #374151;
    --grey-line: #ececec;
}

body.shop-cream { background: #ffffff; }

/* ---------------------------------------------------------- promo bar */
.promo-bar {
    background: var(--orange);
    color: #fff;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 14px;
    line-height: 1.4;
}

/* ------------------------------------------------------------- header */
.site-header,
.site-header.glass-bar {
    background: #fff;
    border-bottom: 1px solid var(--grey-line);
    backdrop-filter: none;
    box-shadow: none;
}
.header-inner { height: 68px; gap: 16px; }
.logo,
.logo-text { color: var(--orange) !important; }
.logo-text { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }

.main-nav {
    background: transparent !important;
    display: flex;
    justify-content: center;
    gap: 28px;
    flex: 1;
    border: 0;
    min-height: 0;
    padding: 0;
}
.main-nav a {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    padding: 6px 0;
}
.main-nav a:hover,
.main-nav a.active { color: var(--orange) !important; }
.main-nav .submenu a { color: var(--ink); font-weight: 500; background: #fff; }
.main-nav .submenu a:hover { color: var(--orange); background: #fff7ed; }

.search-form {
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    height: 42px;
    background: #fff;
    max-width: 430px;
}
.search-form:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(249, 115, 22, .1); }
.header-icons { gap: 14px; }
.icon-btn {
    border: 0;
    background: transparent;
    color: var(--ink);
    width: 40px;
    height: 40px;
    border-radius: 10px;
}
.lang-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cart-btn {
    background: var(--orange) !important;
    border: 1px solid var(--orange) !important;
    color: #fff !important;
    width: 46px;
    height: 46px;
    border-radius: 10px;
}
.cart-btn:hover { background: var(--orange-dark) !important; border-color: var(--orange-dark) !important; }
.cart-btn svg { color: #fff; }
.cart-pill {
    background: #fff !important;
    color: var(--orange);
    font-weight: 800;
    top: -4px;
    right: -4px;
    border: 2px solid var(--orange);
}
.cart-total { font-weight: 700; font-size: 15px; color: var(--ink); margin-right: 10px; }

/* --------------------------------------------------------------- hero */
.banner-slider { border-radius: 0; background: #fff; }
.banner-slider .slide img { width: 100%; height: auto; display: block; max-height: 420px; object-fit: cover; }
.banner-slider .slide-caption { display: none; }
.banner-slider .nav-btn { display: none; }
.banner-slider .dots { bottom: 14px; }

/* ------------------------------------- shop layout: sidebar + product grid */
.shop-layout {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 30px;
    padding: 28px 0 46px;
}
.cat-sidebar .side-title { font-size: 19px; font-weight: 700; margin: 0 0 16px; color: var(--ink); }
.cat-sidebar a {
    display: block;
    padding: 11px 15px;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 14.5px;
    font-weight: 500;
    margin-bottom: 2px;
}
.cat-sidebar a:hover { background: #fff7ed; color: var(--orange); }
.cat-sidebar a.active { background: var(--orange); color: #fff; font-weight: 600; }

.grid-title { font-size: 22px; font-weight: 800; margin: 0 0 18px; color: var(--ink); }

/* ------------------------------------------------------- product card */
.product-card {
    border-radius: 10px;
    border: 1px solid var(--grey-line);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: 0;
    overflow: hidden;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 24, 40, .1); }
.product-card .thumb { margin: 0; border-radius: 0; background: #f3f4f6; }
.product-card .thumb img { aspect-ratio: 1 / 1; object-fit: cover; }
.discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    z-index: 2;
}
.product-card .card-body { padding: 12px 13px 14px; gap: 5px; }
.product-card .card-cat { display: none; }
.product-card .card-title { font-size: 14.5px; font-weight: 600; min-height: 0; margin: 0; color: var(--ink); }
.product-card .card-title:hover { color: var(--orange); }
.product-card .price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--orange);
    font-weight: 800;
    font-size: 17px;
    margin: 4px 0 0;
}
.product-card .price-row .old-price { color: #9ca3af; font-size: 13px; font-weight: 500; }
.product-card .price-row .price { color: var(--orange); }
.variant-badge { display: none; }

.card-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.card-buttons .btn {
    min-height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.card-buttons .btn-cart { background: #fff; color: var(--ink-soft); border: 1px solid #e5e7eb; }
.card-buttons .btn-cart:hover { border-color: var(--orange); color: var(--orange); background: #fff; }
.card-buttons .btn-buy { background: var(--orange); color: #fff; border: 1px solid var(--orange); }
.card-buttons .btn-buy:hover { background: var(--orange-dark); border-color: var(--orange-dark); }

/* ------------------------------------------------------ product detail */
.breadcrumb { font-size: 13.5px; color: #6b7280; padding-top: 18px; }
.breadcrumb a { color: #6b7280; }
.breadcrumb a:hover { color: var(--orange); }
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; padding: 22px 0 46px; }
.gallery .main-image { border: 1px solid var(--grey-line); border-radius: 10px; overflow: hidden; background: #f3f4f6; }
.gallery .main-image img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.p-title { font-size: 30px; font-weight: 800; margin: 0 0 12px; color: var(--ink); }
.p-stock { display: inline-flex; align-items: center; gap: 7px; color: #16a34a; font-size: 14.5px; font-weight: 600; margin-bottom: 14px; }
.p-stock.out { color: #ef4444; }
.p-price { color: var(--orange); font-size: 30px; font-weight: 800; margin: 6px 0 18px; }
.p-price .was { color: #9ca3af; font-size: 17px; font-weight: 500; margin-left: 10px; }
.p-desc-title { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.p-desc { color: var(--ink-soft); font-size: 14.5px; line-height: 1.75; }
.v-label { font-size: 14px; font-weight: 700; color: var(--ink); }
.v-state { font-size: 12.5px; color: #9ca3af; margin-left: 8px; }
.v-state.chosen { color: #16a34a; font-weight: 600; }
.variant-chip { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 8px 14px; }
.variant-chip.active { border-color: var(--orange); background: #fff7ed; color: var(--orange); font-weight: 700; }
.buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 14px; }
.buy-actions .btn { min-height: 50px; border-radius: 8px; font-size: 15.5px; font-weight: 700; }
.buy-actions .btn-cart { background: #fff; color: var(--ink); border: 1px solid #d1d5db; }
.buy-actions .btn-cart:hover { border-color: var(--orange); color: var(--orange); }
.buy-actions .btn-buy { background: var(--orange); color: #fff; }
.buy-actions .btn-buy:hover { background: var(--orange-dark); }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.back-link:hover { color: var(--orange); }

/* ------------------------------------------------------------- footer */
.site-footer {
    background: #111827 !important;
    border-top: 0;
    color: #9ca3af;
    padding: 26px 0;
    text-align: center;
}
.site-footer .footer-grid,
.site-footer .footer-bottom-links { display: none !important; }
.site-footer .footer-copy { color: #d1d5db; font-size: 13.5px; }
.site-footer a { color: #d1d5db; }

/* ------------------------------------------------- responsive tweaks */
@media (max-width: 1100px) {
    .shop-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 900px) {
    .shop-layout { grid-template-columns: minmax(0, 1fr); }
    .cat-sidebar { display: none; }
    .product-detail { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .p-title { font-size: 23px; }
    .p-price { font-size: 25px; }
    .buy-actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   THEME ENGINE - everything follows the two admin colours
   (--primary / --accent and their generated shades and tints)
   ========================================================================== */

/* promo bar + accent surfaces */
.promo-bar { background: var(--accent, #f97316); color: var(--on-accent, #fff); }

/* primary text actions */
a { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.card-title:hover,
.breadcrumb a:hover,
.cat-sidebar a:hover,
.pagination a:hover,
.tabs button:hover,
.suggest-item:hover .suggest-name { color: var(--primary, #1a7f37); }

/* category sidebar */
.cat-sidebar a.active { background: var(--primary, #1a7f37); color: var(--on-primary, #fff); }
.cat-sidebar a:hover { background: var(--primary-soft, #eef7f0); color: var(--primary, #1a7f37); }

/* primary + accent buttons, with readable text whatever the admin picks */
.btn-primary,
.btn-cart { background: var(--primary, #1a7f37); border-color: var(--primary, #1a7f37); color: var(--on-primary, #fff); }
.btn-primary:hover,
.btn-cart:hover { background: var(--primary-dark, #14682c); border-color: var(--primary-dark, #14682c); }
.btn-buy { background: var(--accent, #f97316); border-color: var(--accent, #f97316); color: var(--on-accent, #fff); }
.btn-buy:hover { background: var(--accent-dark, #ea6a0c); border-color: var(--accent-dark, #ea6a0c); }
.card-buttons .btn-cart { background: #fff; color: var(--primary, #1a7f37); border: 1px solid var(--primary, #1a7f37); }
.card-buttons .btn-cart:hover { background: var(--primary-soft, #eef7f0); }

/* prices, badges, highlights */
.price-row .price,
.p-price,
.product-card .price-row { color: var(--primary, #1a7f37); }
.cart-btn { background: var(--accent, #f97316) !important; border-color: var(--accent, #f97316) !important; color: var(--on-accent, #fff) !important; }
.cart-pill { border-color: var(--accent, #f97316); }
.tab-badge, .cart-dot { background: var(--accent, #f97316); }
.discount-badge { background: var(--accent, #f97316); color: var(--on-accent, #fff); }
.mobile-tabbar a.active { color: var(--primary, #1a7f37); }

/* ==========================================================================
   UX POLISH
   ========================================================================== */

/* keyboard accessibility */
:focus-visible {
    outline: 3px solid var(--primary, #1a7f37);
    outline-offset: 2px;
    border-radius: 6px;
}
.search-form:focus-within,
.form-control:focus,
.form-select:focus {
    border-color: var(--primary, #1a7f37);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 26, 127, 55), .14);
}

/* tactile buttons */
.btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .1s ease; }
.btn:active { transform: translateY(1px); }

/* product cards: even heights, gentle image zoom */
.product-card { transition: transform .2s ease, box-shadow .2s ease; }
.product-card .thumb { overflow: hidden; }
.product-card .thumb img { transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
.product-card:hover .thumb img { transform: scale(1.05); }
.product-card .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
    line-height: 1.35;
}
.card-buttons { margin-top: auto; }
.product-card .card-body { display: flex; flex-direction: column; }

/* nicer scrollbars + selection */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
::selection { background: var(--primary-soft, #eef7f0); color: #111827; }

/* toast */
#shop-toast, .shop-toast {
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .18);
    border-left: 4px solid var(--primary, #1a7f37);
}

/* search suggestions */
.suggest-item:hover, .suggest-item.active { background: var(--primary-soft, #eef7f0); }

/* empty states */
.empty-state { padding: 46px 18px; text-align: center; }
.empty-state h3 { color: var(--secondary, #111827); margin-bottom: 8px; }
.empty-state p { color: #6b7280; margin-bottom: 16px; }

/* section rhythm */
.section { padding: 34px 0; }
.grid-title, .side-title { letter-spacing: -.2px; }

/* sticky mobile buy bar follows the accent colour */
.product-sticky .btn-buy { background: var(--accent, #f97316); }

/* ==========================================================================
   Home: horizontal category row + single Buy Now card button + price filter bar
   ========================================================================== */

/* ---- categories, horizontally scrollable ---- */
.cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 16px 0 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cat-row::-webkit-scrollbar { display: none; }
.cat-chip {
    flex: 0 0 auto;
    padding: 9px 18px;
    border: 1px solid var(--grey-line, #ececec);
    border-radius: 999px;
    background: #fff;
    color: var(--ink, #111827);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.cat-chip:hover {
    border-color: var(--primary, #1a7f37);
    color: var(--primary, #1a7f37);
    background: var(--primary-soft, #eef7f0);
}
.cat-chip.active,
.cat-chip.active:hover {
    background: var(--primary, #1a7f37);
    border-color: var(--primary, #1a7f37);
    color: var(--on-primary, #fff);
}

.home-products { padding: 22px 0 46px; }

/* ---- one full width Buy Now button ---- */
.product-card .btn-buy.btn-block,
.product-card .btn.btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 700;
    background: var(--accent, #f97316);
    border: 1px solid var(--accent, #f97316);
    color: var(--on-accent, #fff);
}
.product-card .btn.btn-block:hover { background: var(--accent-dark, #ea6a0c); border-color: var(--accent-dark, #ea6a0c); }
.product-card .btn.btn-block[disabled] { background: #e5e7eb; border-color: #e5e7eb; color: #6b7280; cursor: not-allowed; }

/* ---- price filter bar (shop + category) ---- */
.price-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--grey-line, #ececec);
    border-radius: 10px;
}
.price-bar-label { font-size: 14px; font-weight: 700; color: var(--ink, #111827); }
.price-bar-dash { color: #9ca3af; }
.price-bar input.form-control {
    width: 128px;
    min-height: 40px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    font-size: 14px;
}
.price-bar .btn { min-height: 40px; border-radius: 8px; font-weight: 700; }
.price-bar-clear { font-size: 13.5px; color: var(--primary, #1a7f37); text-decoration: underline; }

@media (max-width: 700px) {
    .price-bar { gap: 8px; padding: 12px; }
    .price-bar input.form-control { width: calc(50% - 30px); }
}

/* ==========================================================================
   Header nav hover box + mobile sticky buy bar
   ========================================================================== */

/* the hover box needs horizontal padding, otherwise it looks like a thin strip */
.main-nav a {
    padding: 9px 15px;
    border-radius: 8px;
    transition: background-color .18s ease, color .18s ease;
}
.main-nav a:hover,
.main-nav a.active {
    background: var(--primary-soft, #fff3e8);
    color: var(--primary, #1a7f37);
}
.main-nav .submenu a { padding: 8px 13px; border-radius: 6px; }

/* the language button and icon buttons should not look cramped either */
.header-icons .icon-btn { padding: 9px 12px; width: auto; height: auto; border-radius: 8px; }
.header-icons .icon-btn:hover { background: var(--primary-soft, #fff3e8); }

/* ---------------- product page sticky buy bar (mobile) ---------------- */
@media (max-width: 992px) {
    .product-sticky {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border-top: 1px solid #ececec;
        box-shadow: 0 -6px 18px rgba(16, 24, 40, .08);
    }
    .product-sticky .ps-info {
        flex: 1 1 auto;
        min-width: 0;                       /* lets the name truncate instead of pushing the button */
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .product-sticky .ps-price {
        font-size: 17px;
        font-weight: 800;
        color: var(--accent, #f97316);
        line-height: 1.25;
    }
    .product-sticky .ps-name {
        font-size: 12px;
        color: #6b7280;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product-sticky .btn {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 20px;
        border-radius: 8px;
        font-size: 14.5px;
        font-weight: 700;
        white-space: nowrap;
    }
}

@media (max-width: 520px) {
    .product-sticky { gap: 10px; padding: 9px 12px; }
    .product-sticky .ps-name { display: none; }   /* price + button only, no collision */
    .product-sticky .btn { flex: 1 1 auto; padding: 0 14px; }
    .main-nav a { padding: 9px 12px; }
}
/* ==========================================================================
   MOBILE HEADER - last word in the cascade.

   This block is deliberately at the very end of the file. The stylesheet has
   grown through several redesigns and an unqualified `.main-nav { display: flex }`
   further up was re-showing the flat link strip on phones after an earlier
   media query had hidden it. Scoping to `.site-header` (higher specificity than
   a bare class) and keeping the rule last makes this the one that wins.

   Mobile header, two rows:

       row 1:  [ menu ]  [ logo ]  .....................  [ cart ]
       row 2:  [ search --------------------------------- full width ]

   The menu button and the logo keep their place; the search drops to its own
   line, so it is a comfortable tap target instead of a squeezed strip, and the
   menu/logo/cart can never crowd into each other. The nav links are not in the
   header at all - they live in the drawer.
   ========================================================================== */
@media (max-width: 992px) {
    .site-header .main-nav { display: none; }

    .site-header .header-inner {
        display: flex;
        align-items: center;
        flex-wrap: wrap;                  /* lets the search take a new line */
        column-gap: 12px;                 /* keeps menu and logo clearly apart */
        row-gap: 9px;
        padding: 9px 13px 11px;           /* the row had no side padding at all */
    }

    /* row 1 ------------------------------------------------------------- */
    .site-header .nav-toggle { order: 1; flex: 0 0 auto; width: 46px; height: 46px; }

    .site-header .logo {
        order: 2;
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        overflow: hidden;
    }
    .site-header .logo-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        font-size: 18px;
    }
    .site-header .logo img { max-height: 34px; max-width: 132px; object-fit: contain; }

    .site-header .header-icons { order: 3; flex: 0 0 auto; }

    /* row 2: the search always starts a fresh line and spans it */
    .site-header .header-search {
        order: 4;
        display: flex;
        flex: 1 0 100%;
        max-width: 100%;
        min-width: 0;
        position: static;                 /* anchor the dropdown to the header */
        justify-content: stretch;
    }
    .site-header .header-search .search-form {
        max-width: none;
        width: 100%;
        height: 44px;
        padding: 0 44px 0 36px;
        border-radius: 13px;
    }
    .site-header .header-search .search-suggest {
        position: absolute;
        top: calc(100% - 6px);
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        transform: none;
    }

    /* the drawer no longer holds a search bar (it moved into the header) */
    .mobile-panel .mobile-search-wrap { display: none; }
}

/* Very narrow phones: keep the brand name, just tighten the edges. The gap
   stays generous so the menu button and the brand mark never look joined. */
@media (max-width: 400px) {
    .site-header .header-inner { padding-left: 11px; padding-right: 11px; }
    .site-header .logo-text { font-size: 15.5px; letter-spacing: -.01em; }
    .site-header .header-search .search-form { padding-left: 34px; }
}

/* Tiny screens (<=345px) cannot hold the name plus the language switch and the
   cart on one line - the brand mark still carries the identity, so the name
   gives way rather than wrapping the row. */
@media (max-width: 345px) {
    .site-header .logo-text { display: none; }
}

/* ------------------------------------------------- promo bar (phones) ----
   One line, smaller type. The bar is a single strip with a fixed height, so it
   can never push the header down by wrapping; if an admin writes something
   extremely long it ellipsises instead of spilling out of the screen. */
@media (max-width: 700px) {
    .promo-bar {
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.3;
        padding: 6px 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* The brand mark drew its house icon in the brand colour on a brand coloured
   circle, which made it invisible. The culprit is the older, more specific
   `.site-header .logo span` rule above, so this selector out-specifies it
   rather than relying on order. */
.site-header .logo span.logo-mark { color: #fff; }
.site-header .logo span.logo-mark svg { stroke: currentColor; }

/* ==========================================================================
   FLOATING HEADER  +  PHONE SEARCH TILE
   ========================================================================== */

/* the search tile is a phone-only control */
.site-header .search-toggle { display: none; }

/* ------------------------------------------------ floating / hide on scroll
   is-floating : the bar lifts off the page (blur + shadow) once scrolled
   is-hidden   : slides up out of the way while the page scrolls down and
                 slides back the moment the customer scrolls up (see
                 frontend.js, which only adds/removes these two classes)     */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    transition: transform .34s cubic-bezier(.22, .61, .36, 1),
                box-shadow .28s ease,
                background-color .28s ease;
    will-change: transform;
}
.site-header.is-floating {
    background-color: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    box-shadow: 0 10px 28px rgba(16, 24, 40, .10);
}
.site-header.is-hidden {
    transform: translateY(-104%);
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
}

/* --------------------------------------------------- phone: search tile --
   Second row keeps a single search tile instead of a full width bar. Tapping
   it swaps the tile for the real field, in the same row, so the search is one
   thumb tap away without permanently spending a row of height on it.        */
@media (max-width: 992px) {
    /* the legacy fixed height cut the second row out of the header box (which
       also made the suggestion list open on top of the field) */
    .site-header .header-inner { height: auto; min-height: 0; }
}

/* ------------------------------------------------ language switch -------- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--brand-rgb), .16);
    border-radius: 999px;
    background: linear-gradient(160deg, #fff 0%, rgba(var(--brand-rgb), .05) 100%);
    box-shadow: inset 0 1px 0 #fff;
}
.lang-switch .lang-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #6b7280;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.lang-switch .lang-opt.active {
    color: #fff;
    background: var(--brand);
    box-shadow: 0 3px 8px rgba(var(--brand-rgb), .26);
}
.lang-switch .lang-opt:not(.active):hover { color: var(--brand); background: rgba(var(--brand-rgb), .08); }
.lang-switch .lang-opt:focus-visible { outline: 2px solid rgba(var(--brand-rgb), .5); outline-offset: 1px; }

@media (max-width: 700px) {
    /* The tile rides in the first row now: after the logo, just before the
       language switch and the cart. */
    .site-header .header-search {
        order: 3;
        display: flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
        max-width: 100%;
        position: static;
    }
    /* Four items have to share one narrow row: menu, logo, search tile,
       language + cart. So the logo shrinks (never grows), the gaps tighten and
       the pill is slimmed down; the right hand cluster is pushed to the edge. */
    .site-header .header-inner { column-gap: 7px; }
    .site-header .nav-toggle { width: 44px; height: 44px; }
    .site-header .logo { flex: 0 1 auto; }
    .site-header .header-icons { order: 4; margin-left: auto; gap: 3px; }
    .site-header .lang-switch { padding: 1px; }
    .site-header .lang-switch .lang-opt { min-width: 24px; height: 24px; padding: 0 5px; font-size: 10.5px; }
    .site-header .search-toggle { width: 42px; height: 42px; }
    .site-header .header-search .search-form { display: none; }

    .site-header .search-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 42px;
        padding: 0;
        cursor: pointer;
        color: var(--brand);
        border: 1px solid rgba(var(--brand-rgb), .16);
        border-radius: 13px;
        background: linear-gradient(160deg, #fff 0%, rgba(var(--brand-rgb), .07) 100%);
        box-shadow: 0 4px 12px rgba(16, 24, 40, .06), inset 0 1px 0 #fff;
        -webkit-tap-highlight-color: transparent;
        transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), border-color .22s ease, background .22s ease;
    }
    .site-header .search-toggle svg { width: 20px; height: 20px; }
    .site-header .search-toggle .st-close { display: none; }
    .site-header .search-toggle:active { transform: scale(.92); }
    .site-header .search-toggle:focus-visible { outline: 2px solid rgba(var(--brand-rgb), .55); outline-offset: 2px; }

    /* opened: the field takes the whole row and row one steps aside, instead of
       wrapping the cart onto a second line */
    .site-header.search-open .header-search { flex: 1 1 auto; }
    .site-header.search-open .nav-toggle,
    .site-header.search-open .logo,
    .site-header.search-open .header-icons { display: none; }
    .site-header.search-open .header-search .search-form { display: flex; flex: 1 1 auto; width: auto; min-width: 0; }
    .site-header.search-open .search-toggle .st-search { display: none; }
    .site-header.search-open .search-toggle .st-close { display: block; }
    .site-header.search-open .search-toggle {
        border-color: rgba(var(--brand-rgb), .34);
        background: linear-gradient(160deg, rgba(var(--brand-rgb), .12), rgba(var(--brand-rgb), .04));
    }
}