/*
Theme Name: Haris Battery & Solar
Author: Abdulqadeer
Description: Custom product catalog and ordering theme for Haris Battery & Solar, Multan. Solar panels, inverters and batteries with category/brand/price/availability filtering, WhatsApp inquiry, Cash-on-Delivery and bank-transfer checkout, customer accounts, reviews, and a solar/battery watt calculator.
Version: 1.2.0
Requires PHP: 7.4
Text Domain: haris-battery-solar
*/

/* ==========================================================================
   MOBILE-FIRST: every rule below is written for small screens by default.
   Desktop/tablet enhancements live inside `@media (min-width: 768px)` and
   `@media (min-width: 1024px)` blocks further down — nothing above those
   breakpoints should be assumed. If you add a new section to a template,
   write its mobile layout here first, then widen it in the breakpoints.
   ========================================================================== */

:root {
    /* PALETTE IS INVERTED (black-dominant). Every colour is a token so the
       whole look can be retuned here. Names are kept from the original
       light theme: --hbs-dark is "the strong colour" (now near-white) and
       --hbs-on-dark is whatever sits on top of it (now near-black). */
    --hbs-red: #d92027;
    --hbs-red-dark: #b3181e;
    --hbs-red-fg: #ff5257;      /* red used as TEXT/icons — lighter so it stays readable on black */
    --hbs-bg: #0b0b0b;          /* page background */
    --hbs-surface: #151515;     /* cards, header, modals, drawers (was white) */
    --hbs-dark: #f4f4f4;        /* primary text + strong accents (was #1a1a1a) */
    --hbs-on-dark: #0b0b0b;     /* text placed on --hbs-dark backgrounds (was white) */
    --hbs-gray: #a3a3a3;        /* secondary text */
    --hbs-light-bg: #1d1d1d;    /* tinted blocks, hover fills (was #f7f7f7) */
    --hbs-border: #2f2f2f;      /* hairlines (was #e5e5e5) */
    --hbs-img-bg: #ffffff;      /* slots behind product photos / logos, which are made for white */
    --hbs-radius: 10px;
    --hbs-max-width: 1200px;
    --hbs-tap: 44px; /* minimum comfortable tap target */
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--hbs-dark);
    background: var(--hbs-bg);
    line-height: 1.5;
    font-size: 16px; /* never smaller sitewide — keeps mobile Safari from auto-zooming on form inputs */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: clamp(1.5rem, 6vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
h3 { font-size: 1.05rem; }

.container {
    max-width: var(--hbs-max-width);
    margin: 0 auto;
    padding: 0 16px;
}

/* ==========================================================================
   Buttons — full-width and thumb-friendly by default; desktop can opt into
   inline width via .btn-inline where a template wants it.
   ========================================================================== */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--hbs-tap);
    padding: 12px 20px;
    border-radius: var(--hbs-radius);
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    text-align: center;
}
.btn-inline { display: inline-flex; width: auto; }

.btn-primary {
    background: var(--hbs-red);
    color: #fff;
}
.btn-primary:hover { background: var(--hbs-red-dark); }

.btn-whatsapp {
    background: #25D366;
    color: #fff;
    gap: 8px;
    font-size: 1rem;
}
.btn-whatsapp:hover { background: #1ebe5b; }

/* ==========================================================================
   Layout helpers — mobile-first: stacked by default, row on desktop.
   Use these instead of one-off inline flex/grid styles in templates so
   this stylesheet stays the single source of truth for responsiveness.
   ========================================================================== */
.hbs-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.hbs-stack-tight { gap: 12px; }

.hbs-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* ==========================================================================
   Homepage hero — background image comes in via the --hero-bg custom
   property (set inline in front-page.php with the real image URL). Text
   styling/position is untouched from the original — only the image
   sizing differs between mobile and desktop.
   ========================================================================== */
.hbs-hero {
    background-color: #1a1a1a;
    background-image: var(--hero-bg, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    aspect-ratio: var(--hero-aspect, auto); /* mobile only — matches the real image exactly, so cover never crops or leaves empty space */
    color: #fff;
    padding: 26px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* sit near the top with a small gap above, instead of a big empty gap or being pinned flush to the edge */
    position: relative;
}
/* Optional multi-image slideshow (2+ Hero Images set in Theme Options).
   Sits as a layer on top of the base --hero-bg image and below the scrim
   below, so whichever slide is active always gets the same readability
   treatment. Absent entirely when there's only one hero image. */
.hbs-hero-slides {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.hbs-hero-slide {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease;
}
.hbs-hero-slide.is-active { opacity: 1; }
/* Mobile-only scrim so text stays readable regardless of what's behind it
   in the photo — removed again at 768px+ below, where the banner goes
   back to the original fixed-height layout untouched. Shaded at the top
   since that's now where the text sits. */
.hbs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,0) 80%);
    pointer-events: none;
}
.hbs-hero .container { position: relative; z-index: 3; height: 100%; width: 100%; } /* width:100% fixes a side effect of the height fix above: .hbs-hero became a flex column so .container could stretch to full height, but .container's own `margin:0 auto` (normal page-centering under --hbs-max-width) then made it shrink-to-fit its content and center itself as a flex item instead of stretching full width — that's what was pushing the heading/paragraph/buttons off the left edge toward the middle. width:100% forces it to fill the full width so margin:auto has no leftover space to center with, while the max-width cap still works normally on desktop where the hero is wider than 1200px. */
/* Text column — capped at half the hero's width (mobile and desktop
   alike) so it never crowds out the product photography on the right.
   Text only: .hbs-hero-actions sits below as a sibling, not a child, so
   the CTA buttons are never limited by this cap. */
.hbs-hero-content { max-width: 50%; }
.hbs-hero h1 { font-size: 1rem; margin: 0 0 4px; }
.hbs-hero p {
    font-size: 0.78rem;
    margin: 0 0 10px;
    width: 100%; /* fills the .hbs-hero-content column instead of setting its own separate width */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hbs-hero .hbs-hero-actions {
    position: absolute;
    left: 16px; /* matches .container's own left/right padding, since absolute positioning ignores an ancestor's own padding */
    right: 16px;
    bottom: 0; /* .hbs-hero's own 20px bottom padding (see the .hbs-hero rule above) is the gap from the true bottom edge of the image — no separate offset needed here */
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
} /* Was a normal-flow sibling directly below .hbs-hero-content, so it moved up whenever the tagline was short. Taken out of flow and pinned to the bottom of .hbs-hero (fixed height via aspect-ratio on mobile — see .hbs-hero .container above) so the buttons sit at a consistent spot regardless of text length. Reset back to normal flow on desktop below, where the hero's height is content-driven, not image-driven. */
.hbs-hero .btn { width: 84px; padding: 4px 10px; font-size: 0.5rem; min-height: 21px; flex: 0 0 84px; } /* Restored the 70% shrink per user request — the 104px version read as too close to full size again. "Shop Products" still fits on one line at this width/font-size (tested with Playwright). Fixed equal width so Shop Products matches Contact Us instead of sizing to its own (longer) text. */

/* ==========================================================================
   Skip link — accessibility, visually hidden until focused.
   ========================================================================== */
.hbs-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--hbs-dark);
    color: var(--hbs-on-dark);
    padding: 12px 18px;
    z-index: 200;
    border-radius: 0 0 6px 0;
}
.hbs-skip-link:focus { left: 0; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}

/* ==========================================================================
   Header
   Mobile:  [logo] .......... [search icon][hamburger]
   Desktop: [logo] [====search bar====] [whatsapp][cart][hamburger]
   Hamburger opens the off-canvas nav at every breakpoint — there is no
   horizontal nav menu anywhere in this theme by design.
   ========================================================================== */
.site-header {
    border-bottom: 1px solid var(--hbs-border);
    position: sticky;
    top: 0;
    background: var(--hbs-surface);
    z-index: 50;
}

.site-header .top-bar {
    background: var(--hbs-red);
    color: #fff;
    font-size: 0.75rem;
    padding: 6px 0;
}
.site-header .top-bar .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.hbs-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
}

.site-logo-mark img { max-height: 31px; width: auto; }
.site-logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    min-width: 0;
    flex-shrink: 1;
}
.site-logo-mark { display: flex; align-items: center; flex-shrink: 0; background: var(--hbs-img-bg); border-radius: 8px; padding: 3px 6px; } /* white badge: the client logo is black/red on white, so its black parts would vanish on the black header */
.site-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 0.77rem;
    white-space: nowrap;
    min-width: 0;
}
.site-logo-primary { color: var(--hbs-dark); }
.site-logo-accent { color: var(--hbs-red-fg); }

/* Right-side icon buttons: search-toggle, whatsapp, cart, hamburger — same
   DOM order everywhere; CSS below decides which show at which breakpoint.
   The hamburger is always last, which is what keeps it pinned to the
   corner at every screen size. (History: an earlier pass sized these
   ~10% larger than --hbs-tap for visual weight, then a later pass sized
   them back down ~10% and zeroed the gap between them, to make room for
   the logo/site-name being sized up instead — this header is shared by
   every template, so all these sizes apply everywhere.) */
.hbs-header-actions {
    display: flex;
    align-items: center;
    gap: 0px;
    flex-shrink: 0;
}
.hbs-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--hbs-dark);
    transition: background-color .15s ease, transform .1s ease;
}
.hbs-icon-btn:hover { background: var(--hbs-light-bg); }
.hbs-icon-btn:active { transform: scale(0.93); }
.hbs-icon-btn svg { width: 22px; height: 22px; }

.hbs-header-whatsapp,
.hbs-cart-toggle { display: none; } /* shown again on desktop, below */

.hbs-cart-count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 19px;
    height: 19px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--hbs-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}
.hbs-cart-count.is-zero { display: none; }

.hbs-hamburger-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 24px;
}
.hbs-hamburger-lines span {
    display: block;
    height: 2px;
    background: var(--hbs-dark);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.hbs-offcanvas-open .hbs-hamburger-lines span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hbs-offcanvas-open .hbs-hamburger-lines span:nth-child(2) { opacity: 0; }
.hbs-offcanvas-open .hbs-hamburger-lines span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.hbs-icon { display: flex; align-items: center; justify-content: center; }
.hbs-icon svg { width: 18px; height: 18px; display: block; }

/* ==========================================================================
   Search — one component, two behaviours (see template-parts/search-overlay.php)
   ========================================================================== */
.hbs-search { display: none; } /* hidden on mobile until opened */
.hbs-search-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 89;
}

.hbs-search.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--hbs-surface);
    z-index: 90;
    padding: 14px 16px;
}
.hbs-search.is-open ~ .hbs-search-backdrop,
body.hbs-search-open .hbs-search-backdrop { display: block; }
body.hbs-search-open { overflow: hidden; }

.hbs-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.hbs-search-close {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    width: var(--hbs-tap);
    height: var(--hbs-tap);
    flex-shrink: 0;
    cursor: pointer;
}
.hbs-search.is-open .hbs-search-close { display: block; }

.hbs-search-form-icon {
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--hbs-gray);
}

.hbs-search-input {
    flex: 1;
    min-height: var(--hbs-tap);
    padding: 0 14px;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    font-size: 1rem;
}
.hbs-search-submit { width: auto; flex-shrink: 0; padding: 0 16px; }

.hbs-search-suggestions {
    display: none;
    margin-top: 10px;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    overflow: hidden;
    background: var(--hbs-surface);
}
.hbs-search-suggestions.is-open { display: block; }
.hbs-search-suggestions-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.hbs-search-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--hbs-border);
}
.hbs-search-suggestion:last-child { border-bottom: none; }
.hbs-search-suggestion:hover,
.hbs-search-suggestion:focus { background: var(--hbs-light-bg); }
.hbs-search-suggestion-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.hbs-search-suggestion-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hbs-search-suggestion-body { display: flex; flex-direction: column; min-width: 0; }
.hbs-search-suggestion-title { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbs-search-suggestion-price { font-size: 0.8rem; color: var(--hbs-red-fg); font-weight: 600; }
.hbs-search-no-results { padding: 14px; margin: 0; color: var(--hbs-gray); font-size: 0.9rem; }
.hbs-search-view-all {
    display: block;
    text-align: center;
    padding: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--hbs-red-fg);
    border-top: 1px solid var(--hbs-border);
}

/* ==========================================================================
   Off-canvas navigation — the site's only nav, opened via the hamburger.
   ========================================================================== */
.hbs-offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.hbs-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    background: var(--hbs-surface);
    z-index: 99;
    transform: translateX(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 24px rgba(0,0,0,.15);
}
body.hbs-offcanvas-open { overflow: hidden; }
body.hbs-offcanvas-open .hbs-offcanvas-overlay { opacity: 1; pointer-events: auto; }
body.hbs-offcanvas-open .hbs-offcanvas { transform: translateX(0); }

.hbs-offcanvas-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hbs-border);
}
.hbs-offcanvas-head .site-logo-mark img { max-height: 34px; }
.hbs-offcanvas-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    width: var(--hbs-tap);
    height: var(--hbs-tap);
}
.hbs-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 20px;
    display: flex;
    flex-direction: column;
}
.hbs-offcanvas-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hbs-offcanvas-menu li { border-bottom: 1px solid var(--hbs-border); }
.hbs-offcanvas-menu a {
    display: block;
    padding: 14px 20px;
    min-height: var(--hbs-tap);
    font-weight: 600;
}
.hbs-offcanvas-menu a:hover,
.hbs-offcanvas-menu a:focus { background: var(--hbs-light-bg); }
.hbs-offcanvas-cta {
    margin-top: auto;
    padding: 16px 20px 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hbs-offcanvas-cta .btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ==========================================================================
   Floating action buttons — mobile only; WhatsApp + Cart stay reachable
   while scrolling. Being fixed-position circles pinned to the corner, they
   sit on top of whatever's underneath (including the footer) rather than
   needing dedicated page padding.
   ========================================================================== */
.hbs-floating-actions {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hbs-floating-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    animation: hbs-float-pulse 3s ease-in-out infinite;
}
.hbs-floating-whatsapp { background: #25D366; color: #fff; }
.hbs-floating-facebook { background: var(--hbs-surface); }
.hbs-floating-cart { background: var(--hbs-red); color: #fff; }
.hbs-floating-btn svg { width: 20px; height: 20px; display: block; }
.hbs-floating-facebook svg { width: 44px; height: 44px; border-radius: 50%; }
.hbs-floating-cart .hbs-cart-count { top: -2px; right: -2px; }

@keyframes hbs-float-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .hbs-floating-btn { animation: none; }
}

.site-main { display: block; } /* floating buttons are fixed-position and no longer reserve page space */

/* ==========================================================================
   Cart drawer (slide-out mini cart)
   ========================================================================== */
.hbs-cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.hbs-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 92vw);
    background: var(--hbs-surface);
    z-index: 99;
    transform: translateX(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 24px rgba(0,0,0,.15);
}
body.hbs-cart-open { overflow: hidden; }
body.hbs-cart-open .hbs-cart-drawer-overlay { opacity: 1; pointer-events: auto; }
body.hbs-cart-open .hbs-cart-drawer { transform: translateX(0); }

.hbs-cart-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hbs-border);
}
.hbs-cart-drawer-head h2 { margin: 0; font-size: 1.1rem; }
.hbs-cart-drawer-close {
    background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer;
    width: var(--hbs-tap); height: var(--hbs-tap);
}
.hbs-cart-drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px; }

.hbs-cart-empty { text-align: center; padding: 30px 10px; }
.hbs-cart-empty p { color: var(--hbs-gray); margin-bottom: 14px; }

.hbs-cart-items { list-style: none; margin: 0; padding: 0; }
.hbs-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hbs-border);
    position: relative;
}
.hbs-cart-item-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.hbs-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hbs-cart-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hbs-cart-item-title { font-size: 0.9rem; font-weight: 600; }
.hbs-cart-item-price { font-size: 0.85rem; color: var(--hbs-red-fg); }
.hbs-cart-item-remove {
    background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--hbs-gray); cursor: pointer;
    width: 28px; height: 28px; flex-shrink: 0;
}

.hbs-cart-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--hbs-border);
    border-radius: 8px;
    padding: 2px 4px;
    width: fit-content;
}
.hbs-qty-btn {
    background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.hbs-qty-value { min-width: 18px; text-align: center; font-size: 0.9rem; }

.hbs-cart-summary { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.hbs-cart-total-row { display: flex; justify-content: space-between; font-size: 1rem; padding: 6px 0; }

/* Cart page qty stepper on the single-product add-to-cart form */
.hbs-qty-input {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    padding: 4px 8px;
    width: fit-content;
}
.hbs-qty-input input {
    width: 40px;
    text-align: center;
    border: none;
    font-size: 1rem;
    -moz-appearance: textfield;
}
.hbs-qty-input input::-webkit-outer-spin-button,
.hbs-qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hbs-product-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}
.hbs-add-to-cart-form { display: flex; flex-direction: column; gap: 12px; }
.hbs-atc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hbs-add-to-cart-btn { flex: 1 1 auto; }
.btn.is-loading { opacity: 0.7; pointer-events: none; }

/* Checkout + WhatsApp CTA share one row and stretch to match each other. */
.hbs-checkout-row { display: flex; align-items: stretch; gap: 12px; }
.hbs-checkout-row .btn { flex: 1 1 0; width: auto; }

.btn-secondary {
    background: var(--hbs-surface);
    color: var(--hbs-dark);
    border: 1px solid var(--hbs-border);
}
.btn-secondary:hover { background: var(--hbs-light-bg); }

/* ==========================================================================
   Cart page + Checkout page
   ========================================================================== */
.hbs-cart-page,
.hbs-checkout-page { padding: 30px 0 50px; }
.hbs-checkout-layout { display: flex; flex-direction: column; gap: 30px; margin-top: 20px; }
.hbs-checkout-summary,
.hbs-checkout-form-wrap {
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    padding: 18px;
}
.hbs-checkout-summary-list { list-style: none; margin: 0 0 14px; padding: 0; }
.hbs-checkout-summary-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hbs-border); }
.hbs-checkout-summary-thumb { width: 48px; height: 48px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.hbs-checkout-summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hbs-checkout-summary-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hbs-checkout-summary-title { font-size: 0.9rem; font-weight: 600; }
.hbs-checkout-summary-qty { font-size: 0.8rem; color: var(--hbs-gray); }
.hbs-checkout-summary-gifts { display: block; font-size: 0.75rem; color: #4cd387; margin-top: 2px; }
.hbs-checkout-summary-price { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.hbs-checkout-total-row { display: flex; justify-content: space-between; font-size: 1.1rem; padding-top: 8px; }

.hbs-checkout-form-wrap form { display: flex; flex-direction: column; gap: 6px; }
.hbs-checkout-form-wrap label { display: block; font-size: 0.85rem; font-weight: 600; margin-top: 8px; }
.hbs-checkout-form-wrap input:not([type="radio"]):not([type="checkbox"]),
.hbs-checkout-form-wrap textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--hbs-tap);
    padding: 10px 12px;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}
.hbs-bank-transfer-details { display: flex; flex-direction: column; gap: 2px; }
.hbs-bank-transfer-details[hidden] { display: none; } /* the class rule above sets display:flex unconditionally, which was overriding the [hidden] attribute and showing bank details even when Cash on Delivery was selected */
.hbs-checkout-note { font-size: 0.8rem; color: var(--hbs-gray); margin: 10px 0; }
.hbs-checkout-status { font-size: 0.9rem; margin-top: 10px; }
.hbs-checkout-status.is-success { color: #4cd387; }
.hbs-checkout-status.is-error { color: var(--hbs-red-fg); }
.hbs-checkout-status.is-pending { color: var(--hbs-gray); }

/* Order-placing feedback: spinner inside the button + full-screen
   "please wait" overlay (assets/js/cart.js → setCheckoutBusy). Bank
   transfer orders upload a screenshot and can take a few seconds. */
@keyframes hbs-spin { to { transform: rotate(360deg); } }
.hbs-spinner {
    display: inline-block;
    width: 38px;
    height: 38px;
    border: 4px solid var(--hbs-border);
    border-top-color: var(--hbs-red);
    border-radius: 50%;
    animation: hbs-spin 0.8s linear infinite;
}
.hbs-spinner--inline {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    margin-right: 8px;
    vertical-align: -3px;
}
.hbs-checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
}
.hbs-checkout-overlay[hidden] { display: none; }
.hbs-checkout-overlay-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 340px;
    padding: 28px 24px;
    background: var(--hbs-surface);
    border-radius: var(--hbs-radius);
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.hbs-checkout-overlay-title { font-size: 1.05rem; color: var(--hbs-dark); }
.hbs-checkout-overlay-text { font-size: 0.85rem; color: var(--hbs-gray); line-height: 1.5; }
body.hbs-checkout-busy { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .hbs-spinner { animation-duration: 2.4s; }
}

/* Payment method radios were inheriting the block/full-width/tap-height
   input styling above, which blew them up into giant squares and pushed
   the label text onto its own line. Give them a normal, fixed size and
   let .hbs-radio-row's flex layout align them with their label. */
.hbs-checkout-form-wrap input[type="radio"],
.hbs-checkout-form-wrap input[type="checkbox"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--hbs-red);
}
.hbs-payment-method-fieldset { border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius); padding: 12px 14px; margin-top: 10px; }
.hbs-payment-method-fieldset legend { font-weight: 600; padding: 0 6px; }
.hbs-radio-row { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; padding: 10px 0; cursor: pointer; }

/* ==========================================================================
   Product grid — a real WRAPPING grid. This is only for "full list" pages
   (product archive/search results, related products, category/brand
   archives) where every result should be visible by scrolling the page,
   not hidden inside a horizontal carousel. 2 tight columns on mobile like
   a native shopping app; widens on desktop.
   ========================================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* ==========================================================================
   Section heading + "View All" link row — used above every homepage row
   (Categories, Popular Products, Latest Products, Branches) so each one
   has a clear, consistent way to reach its own full list.
   ========================================================================== */
.hbs-section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.hbs-section-heading-row h2 { margin: 0; }
.hbs-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--hbs-red-fg);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}
.hbs-view-all-link::after { content: '\2192'; } /* -> arrow, reinforces "this goes to the full list" */

/* ==========================================================================
   Two-tone section headings — black + red split, matching the originally
   intended design (e.g. "Shop by CATEGORY", "Popular PRODUCTS"). Applied
   via markup: <h2 class="hbs-heading-split">Black text <span
   class="hbs-heading-accent">Red text</span></h2>.
   .hbs-heading-centered adds the centering + small red underline used on
   the standalone headings (Brands, Why Choose Us, Testimonials).
   Headings that live inside a .hbs-section-heading-row (which also holds
   a "View All" link) instead get the extra .hbs-heading-row-center
   modifier on the row itself — see the 768px+ block below — so mobile
   keeps its existing left-heading / right-link layout untouched, and
   only desktop centers the heading with the link pinned to the right.
   ========================================================================== */
.hbs-heading-split {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
}
.hbs-heading-accent { color: var(--hbs-red-fg); }

.hbs-heading-centered {
    text-align: center;
    position: relative;
    padding-bottom: 16px;
}
.hbs-heading-centered::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--hbs-red);
}

/* ==========================================================================
   UNIFIED SINGLE-ROW CAROUSEL SYSTEM
   Used for every homepage row that lists multiple items of the same kind:
   Categories, Popular Products, Latest Products, Branches (and Related
   Products on the single product page). One horizontally-scrolling row,
   never wraps to a second line, same card size within a row, swipe on
   touch + prev/next arrow buttons on every screen size, and each section
   also carries a "View All" link (above) to its own full listing page.

   Markup contract (see front-page.php / single-product.php):
     <div class="hbs-carousel-wrap">
       <button class="hbs-carousel-arrow prev">...</button>
       <div class="hbs-carousel hbs-carousel--products|--categories">
         ...cards...
       </div>
       <button class="hbs-carousel-arrow next">...</button>
     </div>
   The modifier class controls card width per content type; .hbs-carousel
   itself never uses .product-grid, so there is no display:grid vs flex
   specificity fight to worry about.
   ========================================================================== */
.hbs-carousel-wrap {
    position: relative;
    margin-top: 20px;
}
.hbs-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 2px 2px 10px;
    margin: -2px -2px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.hbs-carousel > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
}

/* Card widths per row type, mobile-first. Chosen so mobile always shows
   one full card plus a visible sliver of the next (a clear "swipe for
   more" affordance) rather than a hard-cropped edge. */
.hbs-carousel--products > .product-card    { width: 46%; }
.hbs-carousel--categories > .hbs-category-tile { width: 30%; }
.hbs-carousel--brands > .hbs-brand-logo     { width: 30%; }

.hbs-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hbs-surface);
    border: 1px solid var(--hbs-border);
    display: flex; /* visible on every screen size — swipe AND tap both work */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    z-index: 5;
    font-size: 0.9rem;
    padding: 0;
    color: var(--hbs-dark);
    transition: opacity 0.15s ease;
}
.hbs-carousel-arrow.prev { left: -6px; }
.hbs-carousel-arrow.next { right: -6px; }
.hbs-carousel-arrow:disabled,
.hbs-carousel-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Product card — compact by default (mobile). Sizing is driven entirely
   from here (not inline styles in template-parts/product-card.php) so it
   can be tuned in one place without hunting through markup. Desktop gets
   a little more breathing room via the 768px+ override below, but stays
   noticeably tighter than the pre-compaction version.
   ========================================================================== */
.product-card {
    position: relative;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    padding: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    background: var(--hbs-surface);
} /* no height:100% here — .hbs-carousel is auto-height, so a % height against
     it is undefined/inconsistent across browsers; flex's default
     align-items:stretch already equalizes card heights within a row */
.product-card .product-thumb {
    position: relative;
    margin-bottom: 4px;
    aspect-ratio: 1 / 1;
    background: var(--hbs-img-bg);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
} /* Fixed square slot regardless of whether the product has a photo — a
     product with no image was previously a 0-height gap at the top of the
     card, and since the card's height stretches to match its tallest row
     neighbor (see comment above) and the CTA button is bottom-pinned, that
     collapsed to a big dead blank area between the price and the button.
     Reserving the same square here keeps every card's content starting
     at the same height, image or not. */
.product-card .product-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; } /* object-fit:contain (not cover) so the whole image still shows uncropped inside the fixed box, matching the original no-crop intent */
.product-card .product-thumb-placeholder { color: #cfcfcf; display: flex; }

/* Quick add-to-cart — absolutely positioned over the thumbnail's corner so
   it takes zero space in the card's flow: it cannot change card height,
   row height, or column width no matter what. */
.product-card-quick-add {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    margin: 0;
}
.product-card-quick-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--hbs-surface);
    color: var(--hbs-red-fg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.product-card-quick-add-btn:hover,
.product-card-quick-add-btn:focus-visible {
    background: var(--hbs-red);
    color: #fff;
}
.product-card-quick-add-btn:active { transform: scale(0.9); }
.product-card-quick-add-btn.is-loading { opacity: 0.6; pointer-events: none; }

.product-card .product-brand {
    font-size: 0.7rem;
    color: var(--hbs-gray);
    margin-bottom: 1px;
    min-height: 1.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} /* Reserved height + always rendered in the markup (even when a product
     has no brand), and clamped to one line always — a long brand name
     wrapping to 2 lines, or the div being skipped entirely for a
     brandless product, would each push the title/price/button down on
     that one card only, breaking row alignment the same way the
     button-pin fix above addresses. */

.product-card .product-title {
    font-size: 0.8rem;
    margin: 3px 0;
    min-height: 2.1em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card .price {
    color: var(--hbs-red-fg);
    font-weight: 700;
    font-size: 0.9rem;
    min-height: 1.3em;
} /* Always rendered (even with nothing inside, for a product with no
     price set) and height-reserved — same reasoning as .product-brand
     above: a skipped div is a skipped row of space, not skipped text. */
.product-card .price-original {
    text-decoration: line-through;
    color: var(--hbs-gray);
    font-weight: 400;
    font-size: 0.72rem;
}

.product-card .product-card-cta {
    /* margin-top:auto (not a fixed value) pins "View Details" to the
       bottom of the card, so it lines up across a row of cards even when
       titles wrap to 1 vs 2 lines or one card has a sale price/gift badge
       and its neighbor doesn't. Same bottom-pin trick is used on the shop card buttons. */
    margin-top: auto;
    width: 100%;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.8rem;
}

.stock-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 3px;
}
.stock-badge.in-stock { background: #12301f; color: #4cd387; }
.stock-badge.out-of-stock { background: #3a1517; color: var(--hbs-red-fg); }

/* Shows which active Offer produced the current discounted price — falls
   back to the theme's red if the offer didn't set a primary color. */
.hbs-offer-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    color: #fff;
    background: var(--hbs-offer-primary, var(--hbs-red));
    vertical-align: middle;
}

/* Free product/service badge — set per-product on an Offer's "Free
   Gifts" tab (hbs_get_product_offer_bonus()). Green so it reads as
   distinct from the red discount/offer badge above. */
.hbs-free-gift-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 6px;
    color: #fff;
    background: #1a7f4e;
    vertical-align: middle;
}

/* Single product page — full list of free products/services included. */
.hbs-free-gifts {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #12301f;
    border-radius: var(--hbs-radius);
}
.hbs-free-gifts-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: #4cd387;
}
.hbs-free-gifts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
}
.hbs-free-gifts-list a {
    color: inherit;
    text-decoration: none;
}
.hbs-free-gifts-list a:hover {
    text-decoration: underline;
}
.hbs-free-gift-note {
    color: var(--hbs-gray);
    font-size: 0.8rem;
}

/* Product card — compact one-line summary instead of the full list. */
.product-card-gift {
    font-size: 0.72rem;
    margin-top: 4px;
    color: #4cd387;
}

/* Profile picture — used on My Account and next to reviews
   (hbs_render_user_avatar() in inc/customer-accounts.php). Size is set
   inline per usage; only shape/fit/color live here. */
.hbs-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
}
.hbs-avatar-initial {
    align-items: center;
    justify-content: center;
    background: var(--hbs-red);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

/* My Account > Profile Picture card */
.hbs-avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.hbs-avatar-upload-row .hbs-avatar { width: 72px; height: 72px; font-size: 32px; }
.hbs-avatar-upload-status { font-size: 0.8rem; margin: 6px 0 2px; }
.hbs-avatar-upload-status.is-success { color: #4cd387; }
.hbs-avatar-upload-status.is-error { color: var(--hbs-red-fg); }

/* Optional include (template-parts/offer-banner.php) — a full-width
   poster/text strip themed from the active offer's colors. Not wired
   into any template automatically; add the get_template_part() call
   wherever the banner should appear. */
.hbs-offer-banner { margin: 16px 0; }
.hbs-offer-banner-poster img { width: 100%; height: auto; border-radius: var(--hbs-radius); display: block; }
.hbs-offer-banner-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    border-radius: var(--hbs-radius);
    padding: 16px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-align: center;
    background: var(--hbs-offer-primary, var(--hbs-red));
}

/* ==========================================================================
   Homepage: Brands We Deal In — logos are boxed to a uniform height/width
   with object-fit:contain so every logo renders at the same modest size
   regardless of its original source dimensions (this is what actually
   fixes the "brand logos look huge/boxy" difference from the intended
   design, not just a font-size tweak).
   ========================================================================== */
.hbs-brand-logo {
    height: 72px;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-decoration: none;
    color: var(--hbs-dark);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hbs-brand-logo:hover,
.hbs-brand-logo:focus-visible {
    border-color: var(--hbs-red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.hbs-brand-logo img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.hbs-brand-name-fallback {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

/* ==========================================================================
   All Brands / All Categories landing pages (page-brands.php,
   page-categories.php) — a responsive card grid, each card linking
   straight into the filtered product archive for that term.
   ========================================================================== */
.hbs-taxonomy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.hbs-taxonomy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 12px;
    background: var(--hbs-surface);
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    text-decoration: none;
    color: var(--hbs-dark);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.hbs-taxonomy-card:hover,
.hbs-taxonomy-card:focus-visible {
    border-color: var(--hbs-red);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.hbs-taxonomy-card img { object-fit: contain; }
.hbs-taxonomy-card-icon {
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: var(--hbs-red-fg);
}
.hbs-taxonomy-card-name {
    font-weight: 600;
    font-size: 0.95rem;
}
.hbs-taxonomy-card-count {
    font-size: 0.78rem;
    color: var(--hbs-gray);
}

@media (min-width: 600px) {
    .hbs-taxonomy-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
    .hbs-taxonomy-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
    .hbs-taxonomy-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Pagination — shared by the product archive (inc/ajax-filters.php) and
   the Categories/Brands listing pages (page-categories.php,
   page-brands.php). Buttons/gap markers are built by MEPagination
   (assets/js/pagination.js): Prev, page numbers, "…" gaps (only where
   pages are actually skipped), Next. The old nth-child hide-everything-
   after-page-3 trick and the "..." glued onto button 3 are gone — the
   JS now decides exactly what to show. */
.hbs-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    width: 100%;
}
.hbs-pagination .hbs-page-btn {
    display: inline-flex;
    width: auto;
    min-width: 40px;
    padding: 8px 12px;
    background: var(--hbs-surface);
    color: var(--hbs-dark);
    border: 1px solid var(--hbs-border);
}
.hbs-pagination .hbs-page-btn:hover:not(:disabled):not(.is-current) { background: var(--hbs-light-bg); }
.hbs-pagination .hbs-page-btn.btn-primary,
.hbs-pagination .hbs-page-btn.is-current {
    background: var(--hbs-red);
    border-color: var(--hbs-red);
    color: #fff;
    cursor: default;
}
.hbs-pagination .hbs-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hbs-pagination .hbs-page-jump {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--hbs-gray);
}
.hbs-pagination .hbs-page-jump-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hbs-gray);
}
.hbs-pagination .hbs-page-jump-input {
    width: 84px;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    font-size: 0.9rem;
    font-family: inherit;
    text-align: center;
}
.hbs-pagination .hbs-page-jump-go { background: var(--hbs-dark); border-color: var(--hbs-dark); color: var(--hbs-on-dark); }
.hbs-pagination .hbs-page-jump-go:hover { background: #fff; }
.hbs-pagination .hbs-page-gap {
    min-width: 20px;
    text-align: center;
    color: var(--hbs-gray);
    user-select: none;
}
@media (max-width: 480px) {
    .hbs-pagination { gap: 4px; }
    .hbs-pagination .hbs-page-btn { min-width: 36px; padding: 8px 9px; font-size: 0.85rem; }
}

/* ==========================================================================
   Homepage: testimonial card — used inside the Testimonials carousel row
   (single-row slider on every screen size, same system as products/
   categories, rather than a wrapping grid that stacks to one
   column on mobile).
   ========================================================================== */
.hbs-testimonial-card {
    background: var(--hbs-surface);
    border-radius: var(--hbs-radius);
    border: 1px solid var(--hbs-border);
    padding: 16px;
    display: flex;
    flex-direction: column;
} /* no height:100% — see .product-card comment above for why; flex stretch
     handles equal card heights across the row on its own */
.hbs-testimonial-card .hbs-testimonial-text {
    font-size: 0.85rem;
    color: var(--hbs-dark);
}
.hbs-testimonial-card .hbs-testimonial-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}
.hbs-testimonial-card .hbs-testimonial-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.hbs-testimonial-card .hbs-testimonial-name { font-weight: 600; font-size: 0.85rem; }
.hbs-testimonial-card .hbs-testimonial-location { font-size: 0.72rem; color: var(--hbs-gray); }

/* Star rating — two identical rows of the same star character stacked on
   top of each other: a black-outlined "empty" row (fill: white) sits
   underneath, and a yellow "filled" row sits on top, clipped via
   width:var(--hbs-star-fill) so partial values (e.g. 4.5/5 = 90%) shade
   into the last star smoothly instead of needing five separate icons
   with individual logic. --webkit-text-stroke draws the outline; browsers
   without support just show a solid color instead (still readable). */
.hbs-star-rating {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.hbs-star-rating-base,
.hbs-star-rating-fill {
    display: block;
    white-space: nowrap;
}
.hbs-star-rating-base {
    color: var(--hbs-surface);
    -webkit-text-stroke: 1.5px var(--hbs-gray);
    text-stroke: 1.5px var(--hbs-gray);
}
.hbs-star-rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: var(--hbs-star-fill, 100%);
    color: #ffb400;
    -webkit-text-stroke: 1.5px #ffb400;
    text-stroke: 1.5px #ffb400;
}

.hbs-carousel--testimonials > .hbs-testimonial-card { width: 86%; }


.hbs-category-tile {
    text-align: center;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    padding: 16px 10px;
    display: block;
    background: var(--hbs-surface);
}
.hbs-category-tile img { margin: 0 auto 10px; }
.hbs-category-tile .hbs-category-name {
    font-size: 0.85rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
} /* long category names (e.g. a description accidentally used as the name) truncate instead of breaking the row */

/* ==========================================================================
   Shop card — single storefront (this client has one shop, no branches).
   Mobile: photo on top, details underneath. Desktop: photo left, details
   right, so the card stays compact instead of stretching full width.
   ========================================================================== */
.hbs-shop-card {
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    overflow: hidden;
    background: var(--hbs-light-bg);
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: 0 auto;
}
.hbs-shop-card .hbs-shop-photo { width: 100%; height: 200px; object-fit: cover; display: block; }
.hbs-shop-card .hbs-shop-photo-placeholder {
    background: var(--hbs-border);
    color: var(--hbs-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hbs-shop-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hbs-shop-name { margin: 0 0 4px; font-size: 1.1rem; }
.hbs-shop-line { margin: 0; font-size: 0.92rem; color: var(--hbs-gray); line-height: 1.5; }
.hbs-shop-hours { color: var(--hbs-dark); font-weight: 600; }
.hbs-shop-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hbs-shop-actions .btn { width: auto; padding: 10px 18px; font-size: 0.9rem; }

/* ==========================================================================
   Shared "filled circle" social button — used by the site-wide info bar
   (see Footer section below) and reusable anywhere else a big colored
   WhatsApp/Facebook/Instagram button is needed.
   ========================================================================== */
.hbs-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.hbs-social-btn:hover { transform: translateY(-2px); }
.hbs-social-btn svg { width: 22px; height: 22px; }
.hbs-social-btn--whatsapp { background: #25D366; }
.hbs-social-btn--facebook { background: #1877F2; }
.hbs-social-btn--instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

/* ==========================================================================
   Breadcrumbs — used on every page except the homepage (see
   hbs_render_breadcrumbs() in inc/seo-helpers.php).
   ========================================================================== */
.hbs-breadcrumbs { margin: 16px 0; }
.hbs-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    color: var(--hbs-gray);
}
.hbs-breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin-left: 6px;
    color: var(--hbs-border);
}
.hbs-breadcrumbs a { color: var(--hbs-gray); }
.hbs-breadcrumbs a:hover { color: var(--hbs-red-fg); }
.hbs-breadcrumbs li[aria-current="page"] { color: var(--hbs-dark); font-weight: 600; }

/* ==========================================================================
   Archive filters — a bottom-sheet style drawer on mobile (toggled by a
   "Filters" button), a static sidebar on desktop.
   ========================================================================== */
.hbs-archive-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.hbs-filters {
    display: none;
    width: 100%;
    background: var(--hbs-surface);
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    padding: 16px;
}
.hbs-filters.is-open { display: block; }
.hbs-filters h3 { margin: 14px 0 6px; }
.hbs-filters h3:first-child { margin-top: 0; }
.hbs-filters select,
.hbs-filters input {
    width: 100%;
    min-height: var(--hbs-tap);
    padding: 10px 12px;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    font-size: 1rem;
    margin-bottom: 8px;
}

.hbs-results { flex-grow: 1; min-width: 0; }

/* Results toolbar. On mobile the sort dropdown sits in the top-left
   corner and the Filters button in the top-right (space-between), so
   they read as two separate controls instead of crowding together on
   one side. On desktop (≥768px, see the .hbs-filter-toggle display:none
   override below) the Filters button disappears — filtering happens in
   the static sidebar instead — so the sort dropdown alone is pushed
   back to the right corner there. */
.hbs-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.hbs-filter-sort {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 165px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    background: var(--hbs-surface);
    color: var(--hbs-dark);
    font-size: 0.82rem;
}

.hbs-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 14px;
    background: var(--hbs-red);
    color: #fff;
    border: none;
    border-radius: var(--hbs-radius);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
}
.hbs-filter-toggle:hover { background: var(--hbs-red-dark); }
.hbs-filter-toggle:active { transform: scale(0.96); }
.hbs-filter-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Result count — now sits centered under the grid, right before
   pagination, instead of above it next to the sort dropdown. */
.hbs-result-count {
    margin: 20px 0 0;
    text-align: center;
    color: var(--hbs-gray);
    font-size: 0.88rem;
}


/* ==========================================================================
   Site-wide info bar (phone / email / address / bank + social row) —
   sits between <main> and <footer> on every page (see footer.php). The
   homepage hero's "Contact Us" button jumps to this via #hbs-contact.
   ========================================================================== */
.hbs-info-bar {
    background: var(--hbs-light-bg);
    border-top: 1px solid var(--hbs-border);
    padding: 24px 0 20px;
}
.hbs-info-bar-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.hbs-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.hbs-info-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--hbs-red-fg);
    margin-top: 1px;
}
.hbs-info-icon svg { width: 100%; height: 100%; display: block; }
.hbs-info-item:last-child .hbs-info-icon { color: var(--hbs-dark); } /* bank icon reads as neutral, not brand-red */
.hbs-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.hbs-info-bar-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

/* ==========================================================================
   Footer — 4 columns (About+social / Quick Links / Categories / Branches)
   stacked on mobile, in a row on desktop, plus a bottom bar with the
   copyright line and delivery/payment badges.
   ========================================================================== */
.site-footer {
    background: var(--hbs-dark);
    color: #444;
    padding: 32px 0 0;
}
.hbs-footer-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-bottom: 28px;
}
.hbs-footer-col h4 {
    color: var(--hbs-on-dark);
    font-size: 0.95rem;
    margin: 0 0 14px;
}
.hbs-footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hbs-footer-logo .site-logo-text { font-size: 0.85rem; }
.hbs-footer-logo .site-logo-mark {
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d0d0d0;
    width: 34px;
    height: 34px;
    justify-content: center;
}
.hbs-footer-logo .site-logo-mark img {
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hbs-footer-logo .site-logo-primary { color: var(--hbs-on-dark); }
.hbs-footer-tagline {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #666;
    margin: 12px 0 16px;
}
.hbs-footer-social { display: flex; gap: 10px; }
.hbs-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #b5b5b5;
    color: #444;
    flex-shrink: 0;
}
.hbs-footer-social a svg { width: 16px; height: 16px; }
.hbs-footer-social a:hover { border-color: var(--hbs-on-dark); color: var(--hbs-on-dark); }

.hbs-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
}
.hbs-footer-links a { color: #444; }
.hbs-footer-links a:hover { color: var(--hbs-on-dark); }
.hbs-footer-links-more { color: var(--hbs-red-fg) !important; font-weight: 600; }
.hbs-footer-links-more:hover { color: #ff5a5f !important; }

.hbs-footer-bottom { border-top: 1px solid #c9c9c9; padding: 16px 0; }
.hbs-footer-bottom-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.hbs-footer-copyright { font-size: 0.78rem; color: #666; margin: 0; }
.hbs-footer-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.hbs-footer-badges-label { font-size: 0.75rem; color: #666; margin-right: 4px; }
.hbs-footer-badge-logo {
    height: 22px;
    width: auto;
    max-width: 56px;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 2px 6px;
}
.hbs-footer-badge-text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--hbs-dark);
    background: #fff;
    border-radius: 4px;
    padding: 3px 8px;
}

/* ==========================================================================
   Tablet and up (768px+)
   ========================================================================== */
@media (min-width: 768px) {
    .container { padding: 0 24px; }

    .btn { width: auto; }
    .btn-whatsapp { width: 100%; } /* keep full-width where the template wants a standalone full-width WhatsApp CTA, e.g. About/Contact pages */
    .hbs-checkout-row .btn-whatsapp { width: auto; } /* product page: shares the row with Checkout instead of going full-width */

    .site-logo-mark img { max-height: 40px; }
    .site-logo-link { gap: 10px; }
    .site-logo-text { font-size: 1.05rem; letter-spacing: 0.5px; }

    .hbs-checkout-layout { flex-direction: row; align-items: flex-start; }
    .hbs-checkout-summary { flex: 1 1 340px; }
    .hbs-checkout-form-wrap { flex: 1 1 380px; }

    .hbs-hero-actions { flex-direction: row; }
    .hbs-hero { background-size: cover; aspect-ratio: auto; padding: 60px 0; min-height: 0; display: block; }
    .hbs-hero::before { content: none; } /* scrim is mobile-only; desktop banner is unchanged */
    .hbs-hero h1 { font-size: clamp(1.5rem, 6vw, 2.25rem); margin: 0; }
    .hbs-hero p { font-size: 1rem; margin: 0; width: 100%; display: block; -webkit-line-clamp: unset; overflow: visible; } /* undo the mobile-only line-clamp; width now comes from .hbs-hero-content's 50% cap */
    .hbs-hero .container { height: auto; } /* undo the mobile bottom-pin setup — desktop's .hbs-hero height is content-driven (display:block below), not fixed to the image, so there's no fixed bottom to pin against */
    .hbs-hero .btn { padding: 10px 18px; font-size: 0.85rem; min-height: 38px; width: 145px; flex: 0 0 145px; }
    .hbs-hero .hbs-hero-actions { position: static; left: auto; right: auto; bottom: auto; gap: 12px; margin-top: 20px; flex-wrap: nowrap; }
    .hbs-stack { flex-direction: row; }

    .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
    .product-card { padding: 12px; }
    .product-card .product-title { font-size: 0.9rem; min-height: 2.3em; }
    .product-card .price { font-size: 1rem; }
    .product-card .product-card-cta { font-size: 0.85rem; padding: 10px 16px; min-height: 40px; }
    .hbs-carousel { gap: 16px; }
    .hbs-carousel-arrow { width: 40px; height: 40px; font-size: 1rem; }
    .hbs-carousel-arrow.prev { left: -14px; }
    .hbs-carousel-arrow.next { right: -14px; }
    .hbs-carousel--products > .product-card    { width: 31%; }
    .hbs-carousel--categories > .hbs-category-tile { width: 18%; }
    /* Testimonial card width at tablet. */
    .hbs-carousel--testimonials > .hbs-testimonial-card { width: 46%; }
    .hbs-carousel--brands > .hbs-brand-logo { width: 14%; }
    .hbs-brand-logo { height: 64px; }

    .hbs-shop-card { flex-direction: row; }
    .hbs-shop-card .hbs-shop-photo { width: 42%; height: auto; min-height: 240px; flex-shrink: 0; }
    .hbs-shop-body { padding: 24px; justify-content: center; }
    .hbs-shop-name { font-size: 1.3rem; }
    .hbs-info-bar-grid { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
    .hbs-info-item { flex: 1 1 210px; }
    .hbs-info-bar-social { gap: 18px; }
    .hbs-social-btn { width: 56px; height: 56px; }

    .hbs-footer-grid { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
    .hbs-footer-col { flex: 1 1 160px; }
    .hbs-footer-about { flex: 1 1 260px; }

    .hbs-footer-bottom-grid { flex-direction: row; justify-content: space-between; text-align: left; }
    .hbs-social-btn svg { width: 26px; height: 26px; }

    /* Two-tone centered headings — desktop only, so the mobile
       heading-left/View-All-right row (already addressed separately)
       stays exactly as it is. */
    .hbs-section-heading-row.hbs-heading-row-center { position: relative; justify-content: center; }
    .hbs-section-heading-row.hbs-heading-row-center h2 { text-align: center; padding-bottom: 16px; position: relative; }
    .hbs-section-heading-row.hbs-heading-row-center h2::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 56px;
        height: 3px;
        border-radius: 2px;
        background: var(--hbs-red);
    }
    .hbs-section-heading-row.hbs-heading-row-center .hbs-view-all-link {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .hbs-archive-layout { flex-direction: row; align-items: flex-start; gap: 30px; padding: 30px 0; }
    .hbs-filter-toggle { display: none; }
    .hbs-results-toolbar { justify-content: flex-end; }
    .hbs-filters {
        display: block;
        width: 240px;
        flex-shrink: 0;
        border: none;
        padding: 0;
    }

}

/* ==========================================================================
   Desktop (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
    .site-header .top-bar { font-size: 0.85rem; padding: 8px 0; }

    /* Desktop header: search bar becomes a permanent centered element,
       WhatsApp + Cart icon buttons reappear, floating mobile buttons hide
       since the header now covers both. Off-canvas nav stays the only
       navigation at every width — no horizontal menu is reintroduced here.
       This breakpoint matches assets/js/search.js's isMobileOverlayMode()
       check (max-width: 1023px), so JS and CSS never disagree about mode. */
    .hbs-header-row { padding: 17px 29px; gap: 24px; }

    .hbs-search {
        display: flex;
        position: static;
        flex: 1;
        max-width: 560px;
        margin: 0 auto;
        padding: 0;
        background: transparent;
        z-index: auto;
    }
    .hbs-search-form { width: 100%; }
    .hbs-search-close { display: none !important; }
    .hbs-search-form-icon { display: block; position: absolute; left: 12px; pointer-events: none; }
    .hbs-search-input { padding-left: 40px; }
    .hbs-search-backdrop { display: none !important; }
    .hbs-search-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 91; box-shadow: 0 10px 24px rgba(0,0,0,.12); }

    .hbs-search-toggle { display: none; }
    .hbs-header-whatsapp,
    .hbs-cart-toggle { display: flex; }

    .hbs-floating-actions { display: none; }

    .hbs-info-bar { padding: 28px 0 24px; }
    .hbs-footer-about { flex: 0 1 300px; }
    .hbs-footer-col { flex: 0 1 180px; }

    /* All Products / archive listing: fixed 4-per-row so 24 results per
       page reads as a clean 6-row grid instead of a variable auto-fill
       count. (Homepage/related-product carousels are unaffected — they
       use .hbs-carousel--products, not .product-grid.) */
    .product-grid { grid-template-columns: repeat(4, 1fr); }

    /* ~4-5 product cards, ~6 category tiles, a handful of cards visible per
       row at once — matches the intended desktop design, where these rows
       read as a single, mostly-static line rather than something that
       needs constant scrolling. Arrows remain for the odd extra item. */
    .hbs-carousel--products > .product-card    { width: 22%; }
    .hbs-carousel--categories > .hbs-category-tile { width: 14.5%; }
    .hbs-carousel--testimonials > .hbs-testimonial-card { width: 31%; }
    .hbs-carousel--brands > .hbs-brand-logo { width: 11%; }
}

/* ==========================================================================
   Wide desktop (1280px+) — a touch more breathing room per card once
   there's space for it; still the same single-row carousel behaviour.
   ========================================================================== */
@media (min-width: 1280px) {
    .container { padding: 0 32px; }
    .hbs-carousel--products > .product-card { width: 18.5%; }
}

/* ==========================================================================
   My Account page + Order history + Checkout additions (v0.5.21)
   ========================================================================== */
.hbs-account-page { padding: 30px 0 50px; }

.hbs-account-notice { padding: 12px 16px; border-radius: var(--hbs-radius); margin-bottom: 16px; font-size: 0.9rem; }
.hbs-account-notice.is-success { background: #12301f; color: #4cd387; }
.hbs-account-notice.is-error { background: #3a1517; color: var(--hbs-red-fg); }

/* Shared input styling for every plain form on the site (account, login,
   register) — same look as the existing checkout form inputs. */
.hbs-form-fields { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.hbs-form-fields label { font-size: 0.85rem; font-weight: 600; margin-top: 8px; }
.hbs-form-fields input,
.hbs-form-fields textarea {
    min-height: var(--hbs-tap);
    padding: 10px 12px;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}
.hbs-form-fields input:disabled { background: var(--hbs-light-bg); color: var(--hbs-gray); }
.hbs-form-fields button { margin-top: 14px; align-self: flex-start; }
/* `display:flex` above outranks the browser's built-in [hidden] rule, so
   every login/signup/forgot/OTP <form> in the popup stayed visible all
   at once (a very tall popup) and the panel switching in auth.js seemed
   to do nothing — including the "Forgot password?" button. Re-assert
   [hidden] so only the current step shows. */
.hbs-form-fields[hidden],
.hbs-auth-panel[hidden],
.hbs-auth-tabs[hidden],
.hbs-auth-google[hidden] { display: none !important; }

.hbs-auth-tabs { display: flex; gap: 8px; margin: 20px 0; border-bottom: 1px solid var(--hbs-border); }
.hbs-auth-tab {
    background: none; border: none; cursor: pointer;
    padding: 10px 16px; font-size: 0.95rem; font-weight: 600; color: var(--hbs-gray);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.hbs-auth-tab.is-active { color: var(--hbs-red-fg); border-bottom-color: var(--hbs-red); }

.hbs-account-dashboard { display: flex; flex-direction: column; gap: 24px; margin-top: 20px; }
.hbs-account-card { border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius); padding: 18px; }
.hbs-account-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.hbs-account-card-head h2 { margin: 0; }
.hbs-account-id { font-size: 0.85rem; font-weight: 700; color: var(--hbs-gray); background: var(--hbs-light-bg); padding: 4px 10px; border-radius: 12px; }
.hbs-account-order-count { font-size: 0.85rem; color: var(--hbs-gray); }
.hbs-logout-form { margin-top: 16px; }

.hbs-order-history { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
.hbs-order-history th,
.hbs-order-history td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--hbs-border); }

.hbs-order-status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 600; color: #fff; white-space: nowrap; }
.hbs-status-ordering { background: #b26a00; }
.hbs-status-processing { background: #0763b8; }
.hbs-status-completed { background: #1a7f3c; }

.hbs-checkout-total-row--grand { font-size: 1.25rem; font-weight: 700; border-top: 1px solid var(--hbs-border); margin-top: 8px; padding-top: 12px; }
.hbs-free-delivery-tag { color: #4cd387; font-weight: 700; }

.hbs-checkout-success { text-align: center; max-width: 480px; margin: 30px auto; padding: 30px 20px; border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius); }
.hbs-checkout-success-icon { width: 56px; height: 56px; line-height: 56px; border-radius: 50%; background: #12301f; color: #4cd387; font-size: 1.6rem; margin: 0 auto 14px; }
.hbs-checkout-success .btn { margin: 6px 6px 0; }

@media (min-width: 782px) {
    .hbs-account-dashboard { flex-direction: row; align-items: flex-start; }
    .hbs-account-card { flex: 1 1 380px; }
}

/* ==========================================================================
   Accounts v2: login/signup popup, OTP, Google, payment method, order
   tracker, reviews (v0.6.0)
   ========================================================================== */

.hbs-field-help { font-size: 0.78rem; color: var(--hbs-gray); margin-top: -2px; }

/* --- Sitewide auth popup --- */
.hbs-auth-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.hbs-auth-overlay[hidden] { display: none; }
body.hbs-auth-open { overflow: hidden; }
.hbs-auth-modal {
    position: relative; background: var(--hbs-surface); border-radius: var(--hbs-radius);
    padding: 26px 22px; width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto;
}
.hbs-auth-close {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--hbs-gray);
}
.hbs-auth-modal-note { font-size: 0.85rem; color: var(--hbs-gray); margin-top: 6px; }
.hbs-auth-modal-error { background: #3a1517; color: var(--hbs-red-fg); padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; margin-top: 10px; }
.hbs-auth-modal-error[hidden] { display: none; }
.hbs-auth-modal-error.is-info { background: #12301f; color: #4cd387; }
.hbs-auth-continue-browsing {
    display: block; width: 100%; text-align: center; margin-top: 18px;
    background: none; border: none; color: var(--hbs-gray); font-size: 0.85rem;
    text-decoration: underline; cursor: pointer; padding: 6px;
}
.hbs-auth-link-btn {
    display: inline-block; background: none; border: none; color: var(--hbs-red-fg);
    font-size: 0.85rem; text-decoration: underline; cursor: pointer; padding: 4px 0;
    margin-top: 4px; text-align: left;
}

.hbs-auth-google { margin-top: 16px; }
#hbs-google-signin-btn { display: flex; justify-content: center; }
.hbs-auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--hbs-gray); font-size: 0.8rem; }
.hbs-auth-divider::before, .hbs-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--hbs-border); }

/* --- Payment method + bank transfer box (checkout) --- */
/* .hbs-payment-method-fieldset and .hbs-radio-row are defined earlier, near
   the checkout form input rules, since their sizing depends on the radio
   reset declared there. */
.hbs-bank-transfer-details { margin-top: 10px; padding: 12px; background: var(--hbs-light-bg); border-radius: 8px; }
.hbs-bank-transfer-details ul { margin: 8px 0; padding-left: 18px; font-size: 0.9rem; }

/* Urgent-verification WhatsApp link on the bank transfer box — a small
   self-contained pill so it reads as an action, not just inline text,
   without affecting the surrounding form layout. */
.hbs-whatsapp-verify-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 14px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 999px;
    width: fit-content;
}
.hbs-whatsapp-verify-link svg { width: 16px; height: 16px; }
.hbs-whatsapp-verify-link:hover { background: #1ebe5b; }

/* --- Order tracker (Track Order page) --- */
.hbs-track-order-list { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.hbs-track-order-card { border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius); padding: 16px; }
.hbs-track-order-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: 0.9rem; color: var(--hbs-gray); }
.hbs-track-order-head strong { color: var(--hbs-dark); font-size: 1rem; }

.hbs-track-order-items { list-style: none; margin: 0 0 16px; padding: 10px 12px; background: var(--hbs-light-bg); border-radius: 8px; font-size: 0.88rem; }
.hbs-track-order-items li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.hbs-track-order-item-qty { color: var(--hbs-gray); font-size: 0.8rem; }
.hbs-track-order-item-gifts { display: block; font-size: 0.75rem; color: #4cd387; margin-top: 2px; }

.hbs-order-tracker { display: flex; align-items: flex-start; }
.hbs-tracker-step { flex: 1; text-align: center; position: relative; }
.hbs-tracker-step:not(:last-child)::after {
    content: ''; position: absolute; top: 14px; left: 50%; width: 100%; height: 2px; background: var(--hbs-border); z-index: 0;
}
.hbs-tracker-step--done:not(:last-child)::after { background: #1a7f3c; }
.hbs-tracker-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; background: var(--hbs-border); color: var(--hbs-gray);
    font-size: 0.8rem; font-weight: 700; position: relative; z-index: 1; border: 2px solid var(--hbs-border);
}
.hbs-tracker-step--done .hbs-tracker-dot { background: #1a7f3c; border-color: #1a7f3c; color: #fff; }
.hbs-tracker-step--active .hbs-tracker-dot { background: var(--hbs-red); border-color: var(--hbs-red); color: #fff; }
.hbs-tracker-label { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--hbs-gray); }
.hbs-tracker-step--active .hbs-tracker-label { color: var(--hbs-dark); font-weight: 600; }

/* --- Reviews --- */
.hbs-product-rating-summary { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 0.85rem; color: var(--hbs-gray); vertical-align: middle; }
.hbs-review-form { max-width: 500px; margin-top: 20px; border-top: 1px solid var(--hbs-border); padding-top: 18px; }
.hbs-review-star-picker { display: flex; gap: 4px; }
.hbs-review-star { background: none; border: none; font-size: 1.6rem; color: #4a4a4a; cursor: pointer; line-height: 1; padding: 2px; }
.hbs-review-star.is-filled { color: #f5a623; }
.hbs-review-status.is-success { color: #4cd387; font-size: 0.85rem; }
.hbs-review-status.is-error { color: var(--hbs-red-fg); font-size: 0.85rem; }
.hbs-verified-badge { display: inline-block; margin-left: 6px; font-size: 0.7rem; font-weight: 600; color: #4cd387; background: #12301f; padding: 2px 8px; border-radius: 10px; vertical-align: middle; }

/* ==========================================================================
   Single product — gallery + info.
   Mobile: image, thumbnail strip, then info. Desktop (768px+): two columns,
   and the gallery is STICKY so it stays beside the info as you scroll —
   that is what removes the empty gap that used to sit under the featured
   image. Specifications and description live in their own section below the
   fold (side by side on desktop) so the info column stays short.
   ========================================================================== */
.hbs-product-layout { display: flex; flex-direction: column; gap: 24px; }
.hbs-product-gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.hbs-gallery-stage { position: relative; }
.hbs-gallery-main {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 1 / 1; padding: 0;
    background: var(--hbs-img-bg);
    border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius);
    overflow: hidden; cursor: zoom-in; position: relative;
    color: #bdbdbd;
}
.hbs-gallery-main-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hbs-gallery-empty { cursor: default; }
.hbs-gallery-zoom-hint {
    position: absolute; right: 10px; bottom: 10px;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.65); color: #fff; pointer-events: none;
}
.hbs-gallery-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.6); color: #fff; font-size: 1rem; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hbs-gallery-arrow.prev { left: 8px; }
.hbs-gallery-arrow.next { right: 8px; }
.hbs-gallery-arrow:hover { background: var(--hbs-red); }

.hbs-gallery-thumbs {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.hbs-gallery-thumb {
    flex: 0 0 68px; width: 68px; height: 68px; padding: 0;
    background: var(--hbs-img-bg);
    border: 2px solid var(--hbs-border); border-radius: 8px;
    overflow: hidden; cursor: pointer; opacity: .75;
    transition: border-color .15s ease, opacity .15s ease;
}
.hbs-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hbs-gallery-thumb:hover { opacity: 1; }
.hbs-gallery-thumb.is-active { border-color: var(--hbs-red); opacity: 1; }
.hbs-gallery-thumb:focus-visible, .hbs-gallery-main:focus-visible, .hbs-gallery-arrow:focus-visible {
    outline: 2px solid var(--hbs-red-fg); outline-offset: 2px;
}

/* Specs + description section */
.hbs-product-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }
.hbs-product-details h2 { margin: 0 0 14px; }
.hbs-spec-table { width: 100%; border-collapse: collapse; }
.hbs-spec-table th, .hbs-spec-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hbs-border); }
.hbs-spec-table th { width: 42%; font-weight: 600; color: var(--hbs-gray); }
.hbs-spec-table tr:nth-child(odd) th, .hbs-spec-table tr:nth-child(odd) td { background: var(--hbs-light-bg); }
.hbs-product-description { max-width: 800px; line-height: 1.7; }

/* Full-screen image viewer */
.hbs-lightbox {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.94);
    display: flex; align-items: center; justify-content: center;
    padding: 56px 12px;
}
.hbs-lightbox[hidden] { display: none; }
.hbs-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--hbs-img-bg); border-radius: 6px; }
.hbs-lightbox-close {
    position: absolute; top: 10px; right: 12px; width: 44px; height: 44px;
    background: none; border: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer;
}
.hbs-lightbox-count { position: absolute; top: 18px; left: 16px; color: #ddd; font-size: .9rem; }
.hbs-lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem; cursor: pointer;
}
.hbs-lightbox-arrow.prev { left: 8px; }
.hbs-lightbox-arrow.next { right: 8px; }
.hbs-lightbox-arrow:hover { background: var(--hbs-red); }
html.hbs-lightbox-open { overflow: hidden; }

/* ==========================================================================
   Solar & battery calculator (page-solar-calculator.php / shortcode).
   Mobile-first; tablet/desktop widening is in the 768px block at the end of
   this section.
   ========================================================================== */
.hbs-calc-page { padding-bottom: 40px; }
.hbs-calc-lead { color: var(--hbs-gray); max-width: 640px; }
.hbs-calc-intro { margin: 10px 0 20px; }
.hbs-calc { display: flex; flex-direction: column; gap: 16px; max-width: 860px; margin: 20px auto 0; }
.hbs-calc [hidden] { display: none !important; }

.hbs-calc-card {
    background: var(--hbs-surface);
    border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius);
    padding: 16px;
}
.hbs-calc-step { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.05rem; }
.hbs-calc-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--hbs-red); color: #fff; font-size: .85rem; font-weight: 700;
}

.hbs-calc-types, .hbs-calc-battery-types { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hbs-calc-type { display: block; cursor: pointer; }
.hbs-calc-type input { position: absolute; opacity: 0; pointer-events: none; }
.hbs-calc-type-body {
    display: flex; flex-direction: column; gap: 3px; height: 100%;
    padding: 12px 14px; border: 2px solid var(--hbs-border); border-radius: var(--hbs-radius);
    background: var(--hbs-bg);
    transition: border-color .15s ease, background-color .15s ease;
}
.hbs-calc-type-body small { color: var(--hbs-gray); font-size: .8rem; line-height: 1.4; }
.hbs-calc-type input:checked + .hbs-calc-type-body { border-color: var(--hbs-red); background: var(--hbs-light-bg); }
.hbs-calc-type input:focus-visible + .hbs-calc-type-body { outline: 2px solid var(--hbs-red-fg); outline-offset: 2px; }

.hbs-calc-tabs { display: flex; gap: 6px; padding: 4px; background: var(--hbs-bg); border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius); margin-bottom: 16px; }
.hbs-calc-tab {
    flex: 1; min-height: var(--hbs-tap); border: none; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--hbs-gray); font-weight: 600; font-size: .95rem;
}
.hbs-calc-tab.is-active { background: var(--hbs-red); color: #fff; }

.hbs-calc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.hbs-calc-field label { font-weight: 600; font-size: .92rem; }
.hbs-calc-field small, .hbs-calc-hint { color: var(--hbs-gray); font-size: .8rem; line-height: 1.4; margin: 0; }
.hbs-calc input[type="number"], .hbs-calc input[type="text"] {
    width: 100%; min-height: var(--hbs-tap); padding: 8px 12px; font-size: 1rem; font-family: inherit;
    color: var(--hbs-dark); background: var(--hbs-bg);
    border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius);
}
.hbs-calc input:focus { outline: 2px solid var(--hbs-red-fg); outline-offset: 1px; }

.hbs-calc-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; -webkit-overflow-scrolling: touch; }
.hbs-calc-chip {
    flex: 0 0 auto; min-height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    background: var(--hbs-bg); color: var(--hbs-dark); font-size: .85rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--hbs-border);
}
.hbs-calc-chip:hover { border-color: var(--hbs-red); }

.hbs-calc-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.hbs-calc-row { background: var(--hbs-bg); border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius); padding: 10px; }
.hbs-calc-row-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.hbs-calc-remove {
    flex: 0 0 var(--hbs-tap); width: var(--hbs-tap); height: var(--hbs-tap); border-radius: var(--hbs-radius);
    background: var(--hbs-light-bg); color: var(--hbs-red-fg); border: 1px solid var(--hbs-border);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.hbs-calc-row-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hbs-calc-mini { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--hbs-gray); }
.hbs-calc-mini input { padding: 6px 8px !important; }
.hbs-calc-motor { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .8rem; color: var(--hbs-gray); }
.hbs-calc-motor input { width: 18px; height: 18px; accent-color: var(--hbs-red); }
.hbs-calc-totals { margin: 12px 0 0; font-weight: 600; font-size: .92rem; }

.hbs-calc-go { width: 100%; min-height: 50px; font-size: 1.05rem; }

.hbs-calc-results {
    background: var(--hbs-surface);
    border: 1px solid var(--hbs-red); border-radius: var(--hbs-radius);
    padding: 18px 16px; scroll-margin-top: 90px;
}
.hbs-calc-result-title { margin: 0 0 14px; font-size: 1.15rem; }
.hbs-calc-empty { margin: 0; color: var(--hbs-gray); }
.hbs-calc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hbs-calc-stat { background: var(--hbs-bg); border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius); padding: 12px; min-width: 0; }
.hbs-calc-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--hbs-gray); }
.hbs-calc-stat-value { font-size: 1.1rem; font-weight: 700; margin: 4px 0 2px; overflow-wrap: anywhere; }
.hbs-calc-stat-sub { font-size: .75rem; color: var(--hbs-gray); line-height: 1.35; }
.hbs-calc-facts { margin: 16px 0 0; padding-left: 18px; line-height: 1.7; font-size: .92rem; }
.hbs-calc-disclaimer { margin: 14px 0 0; font-size: .8rem; color: var(--hbs-gray); line-height: 1.5; }
.hbs-calc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.hbs-calc-actions .btn { width: 100%; }

/* Homepage call-to-action strip */
.hbs-calc-cta-box {
    display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
    padding: 20px; border-radius: var(--hbs-radius);
    background: var(--hbs-surface); border: 1px solid var(--hbs-border); border-left: 4px solid var(--hbs-red);
}
.hbs-calc-cta-title { margin: 0 0 6px; font-size: 1.2rem; }
.hbs-calc-cta-text { margin: 0; color: var(--hbs-gray); font-size: .92rem; }
.hbs-calc-cta-btn { width: 100%; text-align: center; }

@media (min-width: 768px) {
    .hbs-product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
    .hbs-product-gallery { position: sticky; top: 110px; }
    .hbs-gallery-thumb { flex-basis: 76px; width: 76px; height: 76px; }
    .hbs-product-details.has-both { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }

    .hbs-calc-types { grid-template-columns: repeat(3, 1fr); }
    .hbs-calc-battery-types { grid-template-columns: repeat(2, 1fr); }
    .hbs-calc-card { padding: 22px; }
    .hbs-calc-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: end; }
    .hbs-calc-row-head { margin: 0; }
    .hbs-calc-row-grid { grid-column: 1 / -1; max-width: 520px; }
    .hbs-calc-motor { grid-column: 1 / -1; margin-top: 0; }
    .hbs-calc-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    .hbs-calc-actions { flex-direction: row; flex-wrap: wrap; }
    .hbs-calc-actions .btn { width: auto; }
    .hbs-calc-go { width: auto; min-width: 280px; align-self: center; }
    .hbs-calc-cta-box { flex-direction: row; align-items: center; justify-content: space-between; }
    .hbs-calc-cta-btn { width: auto; flex-shrink: 0; }
}

@media (min-width: 1024px) {
    /* Thumbnails become a vertical rail to the left of the main image. */
    .hbs-product-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
    .hbs-product-gallery.has-thumbs {
        display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "thumbs stage"; gap: 14px; align-items: start;
    }
    .hbs-product-gallery.has-thumbs .hbs-gallery-stage { grid-area: stage; }
    .hbs-product-gallery.has-thumbs .hbs-gallery-thumbs {
        grid-area: thumbs; flex-direction: column; overflow-x: hidden; overflow-y: auto;
        max-height: min(560px, 70vh); padding: 2px;
    }
    .hbs-product-gallery.has-thumbs .hbs-gallery-thumb { flex: 0 0 auto; width: 76px; height: 76px; }
}

/* Cart / form notices (max quantity, cart full, out of stock, too many requests) */
.hbs-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
    max-width: min(92vw, 420px); padding: 12px 18px; border-radius: var(--hbs-radius);
    background: var(--hbs-dark); color: var(--hbs-on-dark); font-size: .92rem; line-height: 1.4;
    box-shadow: 0 6px 24px rgba(0,0,0,.45); opacity: 0; pointer-events: none; z-index: 1100;
    transition: opacity .2s ease, transform .2s ease;
}
.hbs-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }