/*your custom css goes here*/

/* ============================================================
   Ghorer Bazar style theme
   ============================================================ */
:root {
    --gb-green: #041F1E;        /* category bar dark green (ghorerbazar) */
    --gb-green-hover: #0A302E;
    --gb-orange: #EE7A1E;       /* brand accent (matches DB base_color) */
    --gb-orange-hover: #D96A12;
}

.gb-primary { color: var(--gb-orange) !important; }

/* ---------- Wider frontend container (match ghorerbazar) ---------- */
@media (min-width: 1200px) {
    .aiz-main-wrapper .container { max-width: 1520px; }
}

/* ---------- Page canvas ---------- */
/* aiz-core sets this to var(--light) (#f2f3f8, a cool grey); ghorerbazar uses a
   warm off-white. Overridden here rather than by redefining --light, which is
   also used by .bg-light utilities and badges. This stylesheet is only loaded by
   the frontend layout, so the admin panel keeps the stock grey. */
.aiz-main-wrapper { background-color: #FBF9F5; }

/* ---------- Header ---------- */
.gb-header {
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    z-index: 1040; /* above .gb-catbar so More/Account/Cart dropdowns aren't covered */
}
@media (min-width: 992px) {
    .gb-header .container > .row { min-height: 64px; }
}
.gb-logo img { object-fit: contain; }

/* Search pill */
.gb-search {
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    align-items: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.gb-search .form-control {
    background: transparent;
    box-shadow: none;
    height: 46px;
    font-size: 15px;
}
.gb-search .form-control:focus { background: transparent; box-shadow: none; }
.gb-search-btn {
    color: #6c757d;
    background: transparent;
    padding: 0 18px;
    font-size: 20px;
    box-shadow: none !important;
}
.gb-search-btn:hover { color: var(--gb-orange); }

/* Right-side action icons (Track Order / Sign In / Wishlist / Cart / More) */
.gb-actions { gap: 4px; }
.gb-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    padding: 4px 8px;
    line-height: 1.1;
    text-align: center;
}
.gb-action i { font-size: 22px; color: #2b2b2b; }
.gb-action span:last-child { font-size: 12px; margin-top: 3px; color: #2b2b2b; }
.gb-action:hover i,
.gb-action:hover span:last-child { color: var(--gb-orange); }
.gb-action:hover .gb-count-badge { color: #fff !important; }
.gb-action-wrap { display: flex; }

/* "More" dropdown — icon-boxed menu items, matching ghorerbazar.com */
.gb-more-menu { width: 200px; padding: 4px 0; }
.gb-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1f1f1f;
}
.gb-more-item:hover,
.gb-more-item:focus,
.gb-more-item:active,
.gb-more-item.active { background: #f7f7f7 !important; color: var(--gb-orange) !important; }
.gb-more-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #eef0f2;
    color: #444;
}
.gb-more-icon i { font-size: 16px; }
.gb-more-item:hover .gb-more-icon { background: rgba(238, 122, 30, 0.14); color: var(--gb-orange); }
.gb-more-icon--whatsapp { background: rgba(37, 211, 102, 0.12); color: #25d366; }
.gb-more-item:hover .gb-more-icon--whatsapp { color: #25d366; background: rgba(37, 211, 102, 0.18); }

/* Count badge on cart/wishlist icons */
.gb-count-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: var(--gb-orange);
    border-radius: 999px;
}

/* Section title with an accent bar, used on the checkout page's cards */
.gb-card-title {
    font-size: 16px;
    font-weight: 700;
    padding-left: 10px;
    border-left: 3px solid var(--gb-orange);
    line-height: 1.2;
}

/* Solid rounded-square remove button (checkout order review) */
.gb-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--gb-orange);
    color: #fff;
    border-radius: 7px;
    font-size: 14px;
}
.gb-remove-btn:hover,
.gb-remove-btn:focus { background: #d3690f; color: #fff; }

/* ---------- Category nav bar (green) ---------- */
.gb-catbar {
    background: var(--gb-orange);
    position: relative;
    z-index: 1035; /* keep bar + hover dropdowns above page content/sliders */
}
.gb-catbar-sticky { position: sticky; top: 0; }
.gb-catbar-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gb-catbar-scroll::-webkit-scrollbar { display: none; }
.gb-catbar-list {
    gap: 0;
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    justify-content: flex-start;
}
.gb-catbar-item { position: relative; flex-shrink: 0; }
.gb-catbar-link {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    padding: 9px 22px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.gb-catbar-link:hover {
    color: #ffffff;
    background: var(--gb-orange-hover);
    text-decoration: none;
}
.gb-catbar-item:hover .gb-catbar-link { background: var(--gb-orange-hover); }

/* Left / right scroll buttons (desktop) */
.gb-catbar-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    color: var(--gb-orange);
    font-size: 14px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.gb-catbar-nav.is-visible {
    display: inline-flex;
    opacity: 1;
    pointer-events: auto;
}
.gb-catbar-nav:hover {
    background: #fff;
    color: var(--gb-orange);
}
.gb-catbar-nav--prev { left: 0; }
.gb-catbar-nav--next { right: 0; }
.gb-catbar-nav i { line-height: 1; color: inherit; }
.gb-catbar-nav--prev i { transform: translateX(-1px); }
.gb-catbar-nav--next i { transform: translateX(1px); }

/* Fixed so dropdowns aren't clipped by the scroll area */
.gb-submenu {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 260px;
    background: #fff;
    display: none;
    z-index: 1050;
}
/* Reserve room for the spinner only until the AJAX content lands, otherwise a
   short menu is padded out to 120px. `loaded` is added by the nav script. */
.gb-submenu:not(.loaded) { min-height: 120px; }
.gb-catbar-item:hover > .gb-submenu { display: block; }

/* The list items carry .mb-2 (a Bootstrap !important utility); drop it on the
   last one so the gap under it matches the panel's padding, not padding + 8px. */
.gb-submenu ul > li:last-child { margin-bottom: 0 !important; }

/* .text-reset pins the link colour with !important, so the hover needs it too. */
.gb-submenu a:hover,
.gb-submenu a:focus {
    color: var(--primary, var(--gb-orange)) !important;
    text-decoration: none;
}

/* ---------- Newsletter band ---------- */
.gb-newsletter {
    background: var(--gb-green);
    padding: 20px 0;
}
.gb-newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.gb-newsletter-title { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.gb-newsletter-sub { color: rgba(255,255,255,.75); font-size: 14px; }
.gb-newsletter-form { display: flex; gap: 10px; flex-grow: 1; max-width: 460px; }
.gb-newsletter-form .form-control { height: 46px; border: none; border-radius: 8px; }
.gb-newsletter-form .btn { height: 46px; padding: 0 22px; border-radius: 8px; white-space: nowrap; }
@media (max-width: 767px) {
    .gb-newsletter-form { max-width: 100%; width: 100%; }
    .gb-newsletter-title { font-size: 17px; }
}

/* ---------- Footer (light) ---------- */
.gb-footer {
    background: #ffffff;
    border-top: 1px solid #eee;
    color: #333;
}
.gb-footer-muted { color: #6b7280; font-size: 14px; line-height: 1.7; }
.gb-footer-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 18px;
}
.gb-footer-links { margin: 0; }
.gb-footer-links li { margin-bottom: 10px; }
.gb-footer-links a {
    color: #6b7280;
    font-size: 14px;
    transition: color .15s ease;
}
.gb-footer-links a:hover { color: var(--gb-orange); text-decoration: none; }

/* Social icons (orange circles) */
.gb-social { margin: 0; }
.gb-social li { margin-right: 8px; }
.gb-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff5ec;
    color: var(--gb-orange);
    font-size: 16px;
    transition: all .15s ease;
}
.gb-social a:hover { background: var(--gb-orange); color: #fff; text-decoration: none; }

/* Footer bottom bar */
/* The logo carries an inline height="48" attribute from the stock markup; this
   overrides it without touching the attribute, which other themes read. */
/* First child only — the app-store badges live in this same column. */
.gb-footer-brand > a:first-child > img {
    height: 62px;
    width: auto;
}

/* Half of Bootstrap's .py-5 (3rem), which left the footer columns floating in
   a lot of empty space above and below. */
.gb-footer-pad {
    padding-top: 24px;
    padding-bottom: 12px;
}

/* Stock markup puts Bootstrap's `mb-4` (1.5rem) on every footer column, which
   is needed to separate them when they stack on mobile but left a big gap
   below the row on desktop where the columns sit side by side. Scoped to
   `.gb-footer` so other `mb-4` usage on the site is untouched. */
.gb-footer .row > [class*="col-"].mb-4 { margin-bottom: 12px; }

.gb-footer-bottom {
    background: #ffffff;
    border-top: 1px solid #eee;
    color: #6b7280;
}
.gb-pay-label { font-size: 13px; font-weight: 600; color: #6b7280; white-space: nowrap; }
.gb-pay-methods { display: flex; flex-wrap: wrap; gap: 8px; row-gap: 8px; }
.gb-pay-methods li.list-inline-item { margin: 0 !important; }
.gb-pay-wrap { row-gap: 10px; }
.gb-pay-methods img {
    display: block;
    height: 38px;
    width: auto;
    max-width: 58px;
    padding: 3px;
    border-radius: 6px;
    background: #fff;
    object-fit: contain;
}

/* ============================================================
   Phase 0 — Shared components
   ============================================================ */

/* ---------- Product card ---------- */
/* Equal-height slides. Slick floats its slides at their natural height, so
   without this a card with a one-line name is simply shorter than its
   neighbours — and the `margin-top: auto` that bottom-anchors the price and
   button has no slack to work with. The testimonial slider does the same. */
.gb-product-slider .slick-track { display: flex; }
.gb-product-slider .slick-slide { height: auto; }
.gb-product-slider .slick-slide > div,
.gb-product-slider .carousel-box { height: 100%; }

.gb-product-card {
    position: relative;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* No hover shadow or lift — cards stay flat. The wishlist/compare icons are the
   only hover affordance. */
.gb-product-card:hover .gb-hov-icons { opacity: 1; }

.gb-discount-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: #3aab5c;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 5px;
}
.gb-new-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--gb-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 5px;
}

.gb-product-thumb {
    padding: 12px;
    background: #fff;
    overflow: hidden; /* contains the hover zoom so it can't spill over the title */
}
.gb-product-thumb img {
    display: block;
    margin: 0 auto;
    width: 100%;
    /* Taller image well — the product shot is the thing people scan, and at
       190px it sat small in a ~280px-wide card. */
    height: 240px;
    object-fit: contain;
    transition: transform .4s ease;
}
.gb-product-card:hover .gb-product-thumb img { transform: scale(1.07); }

.gb-hov-icons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transition: opacity .18s ease;
}
.gb-hov-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #444;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    font-size: 16px;
}
.gb-hov-icons a:hover { background: var(--gb-orange); color: #fff; }

.gb-product-body {
    padding: 4px 14px 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}
/* Full product name, however many lines it needs — no clamp, and no reserved
   two-line min-height. Cards in a row are equal height, so the slack from a
   short name has to land somewhere: the `auto` top margin here collects it all
   directly under the image, where it reads as image padding. Name, price and
   button then sit tight together as one block at the foot of the card, and the
   last line of every name lands on the same baseline across the row. */
.gb-product-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    margin: auto 0 8px;
    overflow-wrap: anywhere;
}
.gb-product-title a { color: #2b2b2b; }
.gb-product-title a:hover { color: var(--gb-orange); }

.gb-product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.gb-price-now { font-size: 17px; font-weight: 700; color: var(--gb-orange); }
.gb-price-old { font-size: 13px; color: #9aa0a6; }

.gb-add-btn {
    /* No auto margin — the title carries it, so the whole text block stays
       together instead of the slack splitting across the card. */
    width: 100%;
    /* Flex-centred: as inline content the icon sat on the text baseline, which
       left it riding low against the label. `gap` spaces the pair, so the
       icon's own Bootstrap .mr-1 is zeroed below. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.2;
    background: #fff;
    border: 1px solid var(--primary, var(--gb-orange));
    color: var(--primary, var(--gb-orange));
    font-size: 14px;
    font-weight: 600;
    padding: 9px 10px;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}
.gb-add-btn > i,
.gb-deal-btn > i {
    /* `gap` above owns the spacing; .mr-1 is a Bootstrap !important utility. */
    margin-right: 0 !important;
    line-height: 1;
}

.gb-add-btn:hover { background: var(--gb-orange); color: #fff; }
.gb-add-btn i { font-size: 19px; vertical-align: -3px; }

/* ---------- Top Selling Products (wide cards) ---------- */
/* Two-up horizontal cards on the page background — no white panel — matching
   ghorerbazar's section. Colours prefer --primary (emitted by app.blade.php from
   the admin's base_color) and fall back to --gb-orange. */
.gb-centered-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 24px;
}

.gb-wide-grid {
    display: grid;
    /* Two-up on phones/tablets — the cards stack image-over-body there
       (see the <=575px block) so two still fit side by side. Bumped to
       three-up from 992px up (see the min-width block below); tablets
       (e.g. iPad's 820px) stay two-up since the wide card's side-by-side
       thumb+body layout gets cramped narrower than that. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (min-width: 992px) {
    .gb-wide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gb-wide-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 260px;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    overflow: hidden;
}

/* Flush to the card corner, like the reference. */
.gb-wide-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f4442e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 7px 11px;
    border-radius: 0 8px 0 8px;
}
.gb-wide-ribbon i { font-size: 14px; }

.gb-wide-thumb {
    flex: 0 0 40%;
    max-width: 40%;
    display: block;
    overflow: hidden;
}
.gb-wide-thumb img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: contain;
    transition: transform .4s ease;
}
.gb-wide-card:hover .gb-wide-thumb img { transform: scale(1.07); }

.gb-wide-body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
/* No clamp here either — the wide card is centred in its own box, so a longer
   name just makes the card taller rather than leaving a gap. */
.gb-wide-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: #1f2937;
    margin: 0 0 12px;
    overflow-wrap: anywhere;
}
.gb-wide-title a { color: inherit; }
.gb-wide-title a:hover { color: var(--primary, var(--gb-orange)); }

.gb-wide-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.gb-wide-price .gb-price-now { font-size: 20px; }
.gb-wide-price .gb-price-old { font-size: 16px; }

/* Savings shown as an amount on its own line, as on the reference. */
.gb-wide-save {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #6cbf3f;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 14px;
}

.gb-wide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.gb-wide-btn {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid var(--primary, var(--gb-orange));
    transition: background .15s ease, color .15s ease;
}
.gb-wide-btn i { font-size: 17px; }
.gb-wide-btn--outline {
    background: #fff;
    color: var(--primary, var(--gb-orange));
}
.gb-wide-btn--outline:hover {
    background: var(--primary, var(--gb-orange));
    color: #fff;
}
.gb-wide-btn--solid {
    background: var(--primary, var(--gb-orange));
    color: #fff;
}
.gb-wide-btn--solid:hover {
    background: var(--hov-primary, var(--gb-orange-hover));
    color: #fff;
}

@media (max-width: 767px) {
    .gb-centered-title { font-size: 21px; margin-bottom: 18px; }
    .gb-wide-grid { gap: 14px; }
    .gb-wide-card { min-height: 0; padding: 18px; gap: 14px; }
    .gb-wide-title { font-size: 17px; }
    .gb-wide-thumb img { height: 150px; }
    .gb-wide-btn { padding: 9px 14px; }
}
/* Half-width columns on phones: stack the card and shrink everything so two
   cards sit comfortably in one row. */
@media (max-width: 575px) {
    .gb-wide-card {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 10px;
    }
    .gb-wide-thumb { flex: 0 0 auto; max-width: 100%; }
    .gb-wide-thumb img { height: 120px; }
    .gb-wide-body { text-align: center; }
    .gb-wide-title {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 8px;
    }
    .gb-wide-price {
        justify-content: center;
        gap: 6px;
        margin-bottom: 8px;
    }
    .gb-wide-price .gb-price-now { font-size: 15px; }
    .gb-wide-price .gb-price-old { font-size: 13px; }
    .gb-wide-save {
        font-size: 11px;
        padding: 3px 7px;
        margin-bottom: 10px;
    }
    .gb-wide-ribbon { font-size: 10px; padding: 5px 8px; }
    .gb-wide-ribbon i { font-size: 12px; }
    /* Two buttons can't sit side by side in a half-width card — stack them. */
    .gb-wide-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 10px;
    }
    .gb-wide-btn {
        justify-content: center;
        font-size: 12px;
        padding: 8px 10px;
    }
    .gb-wide-btn i { font-size: 14px; }
}


/* ---------- Hero (full-width) ---------- */
/* The hero height follows the artwork instead of a fixed box. A fixed height
   plus object-fit: cover meant every upload that wasn't exactly the slot ratio
   got centre-cropped, and the slot ratio itself changed with the viewport, so
   there was no single "safe" export size. Now the image is shown whole at any
   width: height is derived from the image's own ratio. Uploads are expected at
   1600x710 (2.25:1) — see the note on Website Setup > Pages > Home Page
   Settings. All slides must share one ratio or the slider jumps height between
   them. */
.gb-hero-img {
    height: auto;
    object-fit: fill;
    border-radius: 0;
}

/* Static side banner beside the hero slider (lg+ only — the markup hides it
   below lg, where the slider spans the full row). Bootstrap's .row stretches
   the column to the slider's height, and the banner fills it. Both columns are
   a fixed fraction of the container, so their ratios stay constant at every
   viewport width: a 1600x710 slider always leaves a ~1.13:1 side slot, which
   is the size the admin note asks for. Anything else is cropped to fit rather
   than left to break the alignment. */
.home-banner-area .gb-side-banner {
    overflow: hidden;
    border-radius: 12px;
    line-height: 0;
    height: 100%;
}
.home-banner-area .gb-side-banner img {
    height: 100%;
    object-fit: cover;
}

/* Home slider — clip to rounded frame; arrows flush to edges */
.home-banner-area .gb-hero-slider {
    overflow: hidden;
    border-radius: 12px;
}
/* Slick sets `display: inline-block` inline on .carousel-box, so the slide
   reserved ~6px of baseline descender space under the image — pushing the
   frame's rounded bottom corners below the artwork and exposing the image's own
   square corners. Zeroing the line box removes that space without fighting the
   inline style. Scoped to the hero so other carousels are untouched. */
.home-banner-area .gb-hero-slider .slick-slide,
.home-banner-area .gb-hero-slider .slick-slide > div,
.home-banner-area .gb-hero-slider .carousel-box {
    line-height: 0;
}
.home-banner-area .gb-hero-slider .carousel-box > a { display: block; }
.home-banner-area .gb-hero-slider .slick-arrow {
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: var(--gb-orange);
    border: 0;
    box-shadow: none;
    color: #fff;
    font-size: 18px;
    line-height: 40px;
    transition: opacity .2s ease, visibility .2s ease, background .15s ease;
}
@media (hover: hover) {
    .home-banner-area .gb-hero-slider .slick-arrow {
        opacity: 0;
        visibility: hidden;
    }
    .home-banner-area .gb-hero-slider:hover .slick-arrow {
        opacity: 1;
        visibility: visible;
    }
}
.home-banner-area .gb-hero-slider .slick-arrow:hover,
.home-banner-area .gb-hero-slider .slick-arrow:focus {
    background: var(--gb-orange-hover);
    box-shadow: none !important;
    color: #fff;
}
.home-banner-area .gb-hero-slider .slick-prev {
    left: 0;
}
.home-banner-area .gb-hero-slider .slick-next {
    right: 0;
}
/* Swap chevron for arrow icons */
.home-banner-area .gb-hero-slider .slick-prev i::before {
    content: "\f060"; /* la-arrow-left */
}
.home-banner-area .gb-hero-slider .slick-next i::before {
    content: "\f061"; /* la-arrow-right */
}
.home-banner-area .gb-hero-slider .slick-arrow i,
.home-banner-area .gb-hero-slider .slick-arrow i::before {
    color: #fff;
    opacity: 1;
}
/* Left-align the nav dots instead of the aiz-core default of centering them */
.home-banner-area .gb-hero-slider.dots-inside-bottom .slick-dots {
    left: 20px;
    transform: none;
    -webkit-transform: none;
    justify-content: flex-start;
}

/* ---------- Shop by Category (slider of rounded cards) ---------- */
/* Tighter gutters than the theme's .gutters-10 (10px a side + 4px card padding
   = a 28px gap, too airy for these small tiles). Scoped to this slider so the
   product carousels keep the stock spacing. */
.gb-cat-slider.gutters-10 {
    width: calc(100% + 10px);
}
.gb-cat-slider.gutters-10 .carousel-box {
    padding-left: 5px;
    padding-right: 5px;
}

.gb-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2px;
}
.gb-cat-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eef0f2;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    overflow: hidden;
    transition: border-color .15s ease;
}
.gb-cat-card-img img {
    /* Snug inside the rounded tile, with a small breathing gutter — the stock
       70% left the icons looking lost in the card. */
    width: 87%;
    height: 87%;
    object-fit: contain;
    transition: transform .4s ease;
}
.gb-cat-card:hover .gb-cat-card-img img { transform: scale(1.07); }
.gb-cat-card:hover .gb-cat-card-img {
    border-color: var(--primary, var(--gb-orange));
}
.gb-cat-card-name {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #3a3a3a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gb-cat-card:hover .gb-cat-card-name { color: var(--gb-orange); }

/* ---------- Category slider arrows (circle, solid orange) ---------- */
.gb-cat-slider .slick-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gb-orange);
    border: 0;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    z-index: 5;
    transition: background .15s ease;
}
.gb-cat-slider .slick-arrow:hover,
.gb-cat-slider .slick-arrow:focus {
    background: var(--gb-orange-hover);
    box-shadow: none !important;
    color: #fff;
}
.gb-cat-slider .slick-arrow i {
    display: block;
    line-height: 1;
    color: #fff;
    opacity: 1;
}
.gb-cat-slider .slick-arrow i::before {
    color: #fff;
    opacity: 1;
}
/* Optical nudge — angle glyphs sit slightly off-center in the font */
.gb-cat-slider .slick-prev i { transform: translateX(-1px); }
.gb-cat-slider .slick-next i { transform: translateX(1px); }
.gb-cat-slider .slick-prev { left: 0; }
.gb-cat-slider .slick-next { right: 0; }

/* ---------- Product slider arrows ---------- */
.gb-product-slider .slick-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6e8ea;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    color: #444;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    z-index: 5;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gb-product-slider .slick-arrow:hover,
.gb-product-slider .slick-arrow:focus {
    background: var(--gb-orange);
    border-color: var(--gb-orange);
    color: #fff;
}
.gb-product-slider .slick-arrow i {
    display: block;
    line-height: 1;
    color: inherit;
    opacity: 1;
}
.gb-product-slider .slick-arrow i::before {
    color: inherit;
    opacity: 1;
}
/* Optical nudge — angle-right sits a bit right / high in the font metrics */
.gb-product-slider .slick-prev i { transform: translate(1px, 1px); }
.gb-product-slider .slick-next i { transform: translate(-1px, 1px); }

/* Slider dots */
.gb-product-slider .slick-dots li button::before,
.gb-cat-slider .slick-dots li button::before { color: #cfd4d8; opacity: 1; }
.gb-product-slider .slick-dots li.slick-active button::before,
.gb-cat-slider .slick-dots li.slick-active button::before { color: var(--gb-orange); opacity: 1; }

/* ---------- Testimonials (homepage only) ---------- */
/* Halved from 48/56 and 32, then tightened further — the band sat far apart
   from the sections either side of it compared with the rest of the home
   page's rhythm. */
.gb-testimonials { padding: 12px 0 16px; }
.gb-testimonials-head { text-align: center; margin-bottom: 8px; }
.gb-testimonials-title {
    position: relative;
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    padding-bottom: 6px;
}
.gb-testimonials-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--gb-orange);
}
.gb-testimonial-slide { padding: 8px 12px; }
.gb-testimonial-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 28px;
    height: 100%;
}
.gb-testimonial-quote {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 18px;
    min-height: 78px;
}
.gb-testimonial-stars { color: #FFC107; font-size: 16px; margin-bottom: 18px; }
.gb-testimonial-stars i { margin-right: 2px; }
.gb-testimonial-stars i.gb-star-empty { color: #e0e0e0; }
.gb-testimonial-author { display: flex; align-items: center; gap: 12px; }
.gb-testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gb-testimonial-name { font-size: 14px; font-weight: 700; color: #1f2937; }
.gb-testimonial-role { font-size: 12px; color: #9ca3af; }
/* Not wrapped in .aiz-carousel (it's manually slick-initialized), so it needs its
   own copy of the base dot styling aiz-core.css otherwise scopes to that class. */
.gb-testimonial-slider .slick-dots {
    list-style: none;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 0;
    padding-left: 0;
}
.gb-testimonial-slider .slick-dots li { margin: 0; }
.gb-testimonial-slider .slick-dots button {
    height: 11px;
    width: 11px;
    padding: 0;
    color: transparent;
    border: 0;
    background: #ddd;
    border-radius: 50%;
    margin: 0 3px;
}
.gb-testimonial-slider .slick-dots .slick-active button { background: var(--gb-orange); }
.gb-testimonial-slider .slick-track { display: flex; }
.gb-testimonial-slider .slick-slide { height: auto; }
.gb-testimonial-slider .slick-slide > div { height: 100%; }

/* ---------- USP / trust strip ---------- */
/* Phones and small tablets: the four trust badges wrap into a cramped 2x2 block
   that pushes the product sections below the fold, so they are dropped there. */
@media (max-width: 767.98px) {
    .gb-usp-section { display: none; }
}

.gb-usp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 18px 20px;
    /* .gb-home-section's shared margin-bottom (4px) reads as too tight above this
       boxed strip specifically, so give it a bit more breathing room of its own
       rather than raising the shared value and re-tightening every other section. */
    margin-top: 12px;
}
.gb-usp-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gb-usp-item + .gb-usp-item { border-left: 1px solid #f0f0f0; padding-left: 18px; }
.gb-usp-item i {
    font-size: 30px;
    color: var(--gb-orange);
    flex-shrink: 0;
}
.gb-usp-title { font-size: 14px; font-weight: 700; color: #1f2937; }
.gb-usp-sub { font-size: 12px; color: #8a9099; }

@media (max-width: 767px) {
    .gb-usp { grid-template-columns: repeat(2, 1fr); }
    .gb-usp-item:nth-child(odd) { border-left: none; padding-left: 0; }
}

/* ---------- Promo banners ---------- */
.home-banner-area + div img,
.gb-banner-img { border-radius: 10px; }

/* ---------- Reusable section header ---------- */
.gb-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.gb-section-head .gb-section-title {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    padding-bottom: 8px;
}
.gb-section-head .gb-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--gb-orange);
}
/* "VIEW ALL ITEMS →" — uppercase and underlined, as on ghorerbazar. */
.gb-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--primary, var(--gb-orange));
    white-space: nowrap;
}
/* Underline the label only. It lives in its own span because .gb-view-all is a
   flex container — its children are blockified, and an inherited underline
   can't be cancelled by a child, so it would otherwise run under the arrow. */
.gb-view-all > span {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.gb-view-all:hover { color: var(--hov-primary, var(--gb-orange-hover)); }
.gb-view-all:hover > span { text-decoration: underline; }
.gb-view-all i { font-size: 17px; }

/* ---------- Plain product section ---------- */
/* Replaces the old `bg-white shadow-sm rounded` panel: ghorerbazar puts the
   heading and cards straight on the page background. Kept as a class so all the
   product carousels stay in step. */
.gb-section-block {
    padding: 8px 0 4px;
}

/* ---------- Product grid (Just For You) ---------- */
/* A static grid rather than a carousel — 5 across, matching the reference. */
.gb-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
/* Two-up on a phone: a 16px gutter is a meaningful slice of the screen, so
   match the 8px the product sliders use there and give the cards the width. */
@media (max-width: 575px) {
    .gb-product-grid { gap: 8px; }
}
@media (min-width: 576px) {
    .gb-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .gb-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .gb-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Todays Deal panel ---------- */
/* Tinted panel so the deal block reads as its own thing against the plain
   product sections, matching ghorerbazar's combo-deals treatment. */
.gb-deal-panel {
    background: linear-gradient(180deg, #FDF1E7 0%, #FCEBDC 100%);
    border: 1px solid #F6DFC9;
    border-radius: 16px;
    /* Only as much room above/below the card row as the heading needs — the
       cards carry their own padding, so generous panel padding on top of it
       just reads as dead space. */
    padding: 16px 24px 8px;
}
/* gutters-10 gives the carousel -10px side margins, so the next slide's card
   reaches into the panel padding and shows as a sliver. This wrapper sits on the
   panel's content box and clips it. */
.gb-deal-carousel { overflow: hidden; }

.gb-deal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.gb-deal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--primary, var(--gb-orange));
    color: #fff;
    font-size: 21px;
    flex-shrink: 0;
}
.gb-deal-heading {
    font-size: 21px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

/* Deal card */
.gb-deal-card {
    position: relative;
    background: #fff;
    border: 1px solid #f0e3d6;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.gb-deal-save,
.gb-deal-tag {
    position: absolute;
    top: 0;
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    padding: 6px 9px;
}
.gb-deal-save {
    left: 0;
    background: #3aab5c;
    border-radius: 8px 0 8px 0;
}
.gb-deal-tag {
    right: 0;
    background: var(--primary, var(--gb-orange));
    border-radius: 0 8px 0 8px;
}

.gb-deal-thumb {
    padding: 14px;
    overflow: hidden;
}
.gb-deal-thumb img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 215px;
    object-fit: contain;
    transition: transform .4s ease;
}
.gb-deal-card:hover .gb-deal-thumb img { transform: scale(1.07); }

.gb-deal-body {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}
/* Same treatment as .gb-product-title — see the note there. */
.gb-deal-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    margin: auto 0 8px;
    overflow-wrap: anywhere;
}
.gb-deal-title a { color: #2b2b2b; }
.gb-deal-title a:hover { color: var(--primary, var(--gb-orange)); }
.gb-deal-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

/* Solid call-to-action, unlike the outlined button on the plain cards */
.gb-deal-btn {
    width: 100%;
    /* Same flex centring as .gb-add-btn — see the note there. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.2;
    background: var(--primary, var(--gb-orange));
    border: 1px solid var(--primary, var(--gb-orange));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 10px;
    border-radius: 6px;
    transition: background .15s ease, border-color .15s ease;
}
.gb-deal-btn:hover {
    background: var(--hov-primary, var(--gb-orange-hover));
    border-color: var(--hov-primary, var(--gb-orange-hover));
    color: #fff;
}

@media (max-width: 767px) {
    .gb-deal-panel { padding: 12px 14px 6px; border-radius: 12px; }
    .gb-deal-heading { font-size: 17px; }
    .gb-deal-thumb img { height: 170px; }
}

/* ---------- Brand card (Our Brands) ---------- */
.gb-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Logo only — no label, so the card just wraps the artwork. */
    min-height: 96px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .15s ease;
}
.gb-brand-card:hover {
    border-color: var(--primary, var(--gb-orange));
    text-decoration: none;
}
.gb-brand-card img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
    transition: transform .4s ease;
}
.gb-brand-card:hover img { transform: scale(1.07); }

/* Pill "Load More", outlined like the reference. */
.gb-load-more {
    background: #fff;
    border: 1px solid var(--primary, var(--gb-orange));
    color: var(--primary, var(--gb-orange));
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 11px 34px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.gb-load-more:hover {
    background: var(--primary, var(--gb-orange));
    color: #fff;
}
.gb-load-more.is-loading { opacity: .6; pointer-events: none; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 991px) {
    .gb-search { margin-top: 6px; }
    .gb-product-thumb img { height: 180px; }
    .gb-section-head .gb-section-title { font-size: 17px; }
}

/* ============================================================
   Floating action stack — scroll-to-top + contact FAB
   Markup: resources/views/frontend/inc/floating_actions.blade.php
   ============================================================ */
.gb-float-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1030;          /* above sticky bars, below modals (1050) */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.gb-float-btn {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: transform .15s ease, opacity .2s ease, visibility .2s ease, background-color .15s ease;
}

.gb-float-btn:hover { transform: translateY(-2px); }
.gb-float-btn:focus-visible { outline: 2px solid var(--primary, var(--gb-orange)); outline-offset: 3px; }

/* ---------- Scroll to top ---------- */
.gb-to-top {
    background: var(--primary, var(--gb-orange));
    color: #fff;
    opacity: 0;
    visibility: hidden;
}

.gb-to-top.is-visible { opacity: 1; visibility: visible; }
.gb-to-top:hover { background: var(--gb-orange-hover); }

/* The contact menu expands over this button, so it steps out of the way. */
.gb-float-stack.is-open .gb-to-top { opacity: 0; visibility: hidden; }

/* ---------- Contact FAB ---------- */
.gb-contact { position: relative; }

.gb-contact-toggle {
    background: var(--gb-green);
    color: #fff;
}

.gb-contact-toggle:hover { background: var(--gb-green-hover); }

.gb-contact-toggle .gb-icon-close,
.gb-contact-toggle[aria-expanded="true"] .gb-icon-open { display: none; }
.gb-contact-toggle[aria-expanded="true"] .gb-icon-close { display: block; }

/* ---------- Expanding menu ---------- */
.gb-contact-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    display: flex;
    flex-direction: column;   /* DOM order = display order: Call → Messenger → WhatsApp */
    align-items: flex-end;
    gap: 10px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.gb-contact-menu[hidden] { display: none; }

.gb-float-stack.is-open .gb-contact-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.gb-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
}

.gb-contact-item:hover { text-decoration: none; }

.gb-contact-label {
    background: #fff;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

.gb-contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .15s ease;
}

.gb-contact-item:hover .gb-contact-icon { transform: translateY(-2px); }

.gb-ci-call      { background: #eef2f7; color: #1a1a1a; }
.gb-ci-messenger { background: #0084FF; color: #fff; }
.gb-ci-whatsapp  { background: #25D366; color: #fff; }

/* The fixed mobile bottom nav (.aiz-mobile-bottom-nav, shown below xl) is ~66px tall
   and sits at the same corner, so the stack lifts clear of it — otherwise the contact
   FAB covers the "Account" tab and swallows its taps. */
@media (max-width: 1199.98px) {
    .gb-float-stack { bottom: 82px; }
}

@media (max-width: 575px) {
    .gb-float-stack { right: 14px; bottom: 78px; gap: 10px; }
    .gb-float-btn { width: 42px; height: 42px; }
    .gb-contact-icon { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------------------
   Product details — action buttons (Add to cart / Buy now / WhatsApp / Call)
   Full-width 2-up grid; brand badge sits below them.
   --------------------------------------------------------------------------- */

.gb-pd-actions .btn {
    padding: .75rem 1rem;
    font-size: 15px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .2px;
}

.gb-pd-actions .btn i {
    margin-right: .35rem;
    font-size: 18px;
    vertical-align: -2px;
}

.gb-pd-actions .buy-now {
    background: var(--gb-green);
    border-color: var(--gb-green);
    color: #fff;
}

.gb-pd-actions .buy-now:hover,
.gb-pd-actions .buy-now:focus {
    background: var(--gb-green-hover);
    border-color: var(--gb-green-hover);
    color: #fff;
}

.gb-btn-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

.gb-btn-whatsapp:hover,
.gb-btn-whatsapp:focus {
    background: #1EBE5B;
    border-color: #1EBE5B;
    color: #fff;
}

.gb-btn-call {
    background: #2B3A8C;
    border-color: #2B3A8C;
    color: #fff;
}

.gb-btn-call:hover,
.gb-btn-call:focus {
    background: #222E70;
    border-color: #222E70;
    color: #fff;
}

/* Remove-from-cart state of the toggle. */
.gb-pd-actions .add-to-cart.is-in-cart {
    background: var(--gb-orange-hover);
    border-color: var(--gb-orange-hover);
}

.gb-brand-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: .5rem .85rem;
}

.gb-brand-badge img { max-height: 30px; width: auto; }

/* ---------------------------------------------------------------------------
   Product cards — "Add to cart" button ⇄ quantity stepper.
   Sized to ghorerbazar's card (.quantity-box / .decrease-btn / .increase-btn):
   40px tall, 1px orange border, 4px radius, solid orange end caps; 34px on mobile.
   The stepper is absolutely positioned over the button so the two cross-fade
   without the card growing or shifting.
   --------------------------------------------------------------------------- */

.gb-qty-container {
    position: relative;
    display: block;
    width: 100%;
    /* No `margin-top: auto` here: the card title carries the one auto margin, so
       all the slack from a short product name collects under the image. A second
       auto margin in the same flex column would split that slack in half and
       open a gap above the button too. */
}

.gb-qty-container .gb-addcart-btn { margin-top: 0; }

.gb-qty-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    /* stretch, not center: the end caps have to fill the box's full inner height or a
       sliver of background shows between them and the border. */
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--gb-orange);
    border-radius: 4px;
    transition: opacity .4s ease, visibility .4s ease;
}

.gb-addcart-btn { transition: opacity .4s ease, visibility .4s ease; }

.gb-qty-box.hidden,
.gb-addcart-btn.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gb-qty-btn {
    flex-shrink: 0;
    width: 40px;
    height: auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    font-size: 16px;
    color: #fff;
    background: var(--gb-orange);
    cursor: pointer;
    transition: background .2s ease;
}

.gb-qty-btn:hover { background: var(--gb-green); color: #fff; }
.gb-qty-btn:focus { outline: none; }
.gb-qty-minus { border-radius: 4px 0 0 4px; }
.gb-qty-plus { border-radius: 0 4px 4px 0; }

.gb-qty-value {
    flex: 1 1 auto;
    min-width: 20px;
    /* The box stretches its children, so the number needs to centre itself. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: .7px;
    color: #1f1f1f;
}

/* Wide cards put the button in a flex row next to "Buy now", so the container
   shrink-wraps there instead of filling the row, and the stepper matches the
   button's own height. */
.gb-wide-actions .gb-qty-container {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
}

.gb-wide-actions .gb-qty-box { height: 100%; }

@media (max-width: 767.98px) {
    .gb-qty-box { height: 34px; }
    .gb-qty-btn { width: 34px; }
}

/* ---------------------------------------------------------------------------
   Cart drawer (slide-in from the right, ghorerbazar style)
   Replaces the old header dropdown. Open state is body.gb-cart-open so the
   drawer markup can be re-rendered by updateNavCart() without closing.
   --------------------------------------------------------------------------- */

.gb-cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1049;
}

body.gb-cart-open .gb-cart-backdrop { opacity: 1; visibility: visible; }

.gb-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .12);
    z-index: 1050;
    text-align: left;
}

body.gb-cart-open .gb-cart-drawer { transform: translateX(0); }
body.gb-cart-open { overflow: hidden; }

.gb-cart-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.gb-cart-drawer-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #1f1f1f;
}

.gb-cart-drawer-close {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f1f1f;
    cursor: pointer;
}

.gb-cart-drawer-close:hover { color: var(--gb-orange); }
.gb-cart-drawer-close i { vertical-align: -2px; font-size: 18px; }

.gb-cart-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 20px;
}

.gb-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #f2f2f2;
}

.gb-cart-item-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
}

.gb-cart-item-thumb img { width: 100%; height: 100%; object-fit: contain; }

.gb-cart-item-info { flex: 1 1 auto; min-width: 0; }

.gb-cart-item-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f1f1f;
    line-height: 1.35;
}

.gb-cart-item-name:hover { color: var(--gb-orange); }
.gb-cart-item-variation { font-size: 12px; color: #888; margin-top: 2px; }

.gb-cart-item-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: #555;
}

.gb-cart-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.gb-cart-qty button {
    background: #fafafa;
    border: 0;
    width: 26px;
    height: 26px;
    line-height: 1;
    font-size: 15px;
    color: #333;
    cursor: pointer;
}

.gb-cart-qty button:hover { background: #f0f0f0; color: var(--gb-orange); }

.gb-cart-qty-value {
    min-width: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

.gb-cart-item-price strong { color: #1f1f1f; }

.gb-cart-item-remove {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 2px;
    font-size: 20px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}

.gb-cart-item-remove:hover { color: #d9534f; }

.gb-cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.gb-cart-empty i { font-size: 46px; opacity: .4; display: block; margin-bottom: 12px; }

.gb-cart-drawer-foot {
    flex-shrink: 0;
    border-top: 1px solid #eee;
    padding: 16px 20px 20px;
}

.gb-cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    margin-bottom: 12px;
}

.gb-cart-total strong { font-size: 18px; color: var(--gb-orange); }

.gb-cart-checkout {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--gb-orange);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 13px 16px;
    border-radius: 6px;
}

.gb-cart-checkout:hover { background: var(--gb-orange-hover); color: #fff; text-decoration: none; }

.gb-cart-viewcart {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1f1f1f;
}

.gb-cart-viewcart:hover { color: var(--gb-orange); }

/* Full-bleed drawer on phones/small tablets — 420px leaves a strip of page showing. */
@media (max-width: 767.98px) {
    .gb-cart-drawer { width: 100%; }
}

/* Sticky cart handle on the right edge — opens the drawer. Hidden on mobile,
   where the fixed bottom nav already carries a Cart entry. */
/* Sized to match ghorerbazar's .fixed-add-to-cart handle: orange block with the
   icon over "N Items", white price strip beneath, width driven by the content. */
.gb-cart-tab {
    position: fixed;
    top: 50%;
    right: 0;
    margin-top: -30px;
    z-index: 1040;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 6px 0 0 6px;
    background: var(--gb-orange);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(34, 87, 122, .24);
    transition: background .15s ease;
}

.gb-cart-tab:hover { background: var(--gb-orange-hover); }
.gb-cart-tab:focus { outline: none; }

.gb-cart-tab-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
}

.gb-cart-tab-inner i { font-size: 20px; color: #fff; line-height: 1; }

.gb-cart-tab-text {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: .3rem;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.gb-cart-tab-total {
    display: block;
    background: #fff;
    color: var(--gb-orange);
    border-radius: 0 0 0 6px;
    margin: 0;
    padding: 5px 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 120%;
    white-space: nowrap;
}

body.gb-cart-open .gb-cart-tab { opacity: 0; visibility: hidden; }

@media (max-width: 991.98px) {
    .gb-cart-tab-inner { padding: 8px; }
    .gb-cart-tab-inner i { font-size: 16px; }
}

/* ---------- Empty state ---------- */
/* Shown in place of a product carousel when an admin-chosen home category has
   no published products yet — otherwise the section rendered as a bare heading
   over blank space. */
.gb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 34px 16px;
}
.gb-empty-state-img {
    width: 110px;
    max-width: 45%;
    height: auto;
    opacity: .55;
    margin-bottom: 14px;
}
.gb-empty-state-text {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
}
@media (max-width: 575px) {
    .gb-empty-state { padding: 24px 12px; }
    .gb-empty-state-img { width: 84px; margin-bottom: 10px; }
    .gb-empty-state-text { font-size: 13px; }
}

/* ---------- Home page section rhythm ---------- */
/* Replaces Bootstrap's `mb-4` (1.5rem) on the home page's top-level sections.
   Halved, because the sections already carry their own internal padding and the
   24px on top of that read as dead space between blocks. Its own class rather
   than an `.mb-4` override so the rest of the site keeps the stock spacing. */
.gb-home-section {
    margin-bottom: 4px;
}

/* A bit more breathing room between the hero banner and "Shop by Category"
   specifically — padding rather than a bigger shared margin so the other
   sections keep their tighter spacing. */
.home-banner-area + section {
    padding-top: 8px;
}

/* ---------- Product sliders on phones ---------- */
/* The theme's .gutters-10 puts 10px either side of every slide — a 20px trough
   between cards. At two-up on a phone that gap is a meaningful slice of the
   screen, so halve it and give the cards the width back. Scoped to phones and
   to the product sliders (the deal panel carries the same class), so desktop
   and the category strip are untouched. */
@media (max-width: 575px) {
    .gb-product-slider.gutters-10 {
        width: calc(100% + 8px);
    }
    .gb-product-slider.gutters-10 .carousel-box {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* ---------- Card CTA on phones ---------- */
/* Two-up cards leave the button ~90px of inner width, where "Add To Cart" at
   14px + a 10px side padding wrapped onto a second line and made the card
   taller than its neighbours. Smaller type, tighter side padding and a tighter
   icon gap keep it on one line; nowrap stops it breaking if a translation runs
   a little longer. */
@media (max-width: 575px) {
    .gb-add-btn,
    .gb-deal-btn {
        font-size: 12px;
        padding: 8px 4px;
        white-space: nowrap;
    }
    .gb-add-btn,
    .gb-deal-btn { gap: 4px; }
    .gb-add-btn > i,
    .gb-deal-btn > i { font-size: 14px; }
    /* Narrower side padding gives the button (and the name) that width back. */
    .gb-product-body { padding: 4px 10px 10px; }
    .gb-deal-body { padding: 0 10px 10px; }
    .gb-product-thumb { padding: 10px; }
    .gb-deal-thumb { padding: 10px; }
}

/* ==========================================================================
   Size chart (product detail tab)  — custom
   ========================================================================== */
.gb-size-chart-heading {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1f2937;
}

.gb-size-chart-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 14px;
}

.gb-size-chart-nav-link {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    border-bottom: 2px solid transparent;
}

.gb-size-chart-nav-link:hover {
    color: #1f2937;
    text-decoration: none;
}

.gb-size-chart-nav-link.active {
    color: #e8730c;
    border-bottom-color: #e8730c;
}

/* 12 columns will not fit on a phone; the table scrolls instead of squashing. */
.gb-size-chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gb-size-chart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.gb-size-chart-table th,
.gb-size-chart-table td {
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
}

.gb-size-chart-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #1f2937;
}

.gb-size-chart-table tbody tr:nth-child(even) td {
    background: #fcfcfd;
}

.gb-size-chart-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: #6b7280;
}

@media (max-width: 575px) {
    .gb-size-chart-table th,
    .gb-size-chart-table td {
        padding: 6px 9px;
        font-size: 12px;
    }

    /* Keep the size column readable while the rest scrolls under it. */
    .gb-size-chart-table th:first-child,
    .gb-size-chart-table td:first-child {
        position: sticky;
        left: 0;
        background: #f8fafc;
        z-index: 1;
    }
}