/*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: 10px;
    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%;
    /* Trimmed from 240px — that left noticeable dead space below the image
       relative to the card's width. */
    height: 200px;
    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: 7px 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 ---------- */
/* Same card and grid as "Just For You" (.gb-product-card / .gb-product-grid),
   with a red "Best Selling" badge and a solid "Buy now" under "Add to cart".
   Cards sit straight on the page background under a centred heading. */
.gb-centered-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
    margin: 0 0 12px;
}

.gb-best-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f4442e;
}
.gb-best-badge i { font-size: 13px; }

.gb-buynow-btn { margin-top: 8px; }

@media (max-width: 767px) {
    .gb-centered-title { font-size: 21px; margin-bottom: 10px; }
}
@media (max-width: 575px) {
    .gb-best-badge { font-size: 10px; padding: 4px 7px; }
    .gb-best-badge i { font-size: 11px; }
}


/* ---------- Hero (full-width) ---------- */
/* Fixed slot: the ratio is locked to 1800x500 (3.6:1) at every viewport
   width — see the admin note on Website Setup > Pages > Home Page Settings —
   so the slider never jumps height between slides, no matter what each one
   was uploaded at. `fill`, not `contain`/`cover`: the whole image has to
   show (no cropping) AND the box has to show no gap (no letterboxing), and
   `fill` is the only object-fit that satisfies both — it stretches the
   image to the fixed box instead of cropping or padding it. Same choice as
   `.gb-side-banner img` below, for the same reason. Keep uploads close to
   the slot ratio and the stretch stays imperceptible. */
.gb-hero-img {
    aspect-ratio: 1800 / 500;
    height: auto;
    object-fit: fill;
    background: #fff;
    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). Height is meant to come
   from the flex row stretching this column to the slider's height — but
   `height: 100%` on a normal-flow child is a *cyclic* percentage: to find the
   row's height the browser must first know each column's hypothetical height,
   and a percentage that can't yet be resolved falls back to sizing the
   replaced <img> from its own intrinsic aspect ratio instead. Whatever image
   an admin uploads here therefore competes with the hero's locked 1800:500
   ratio to decide the ROW's height — a squarer upload wins, stretches the row
   taller than the slider, and leaves a gap under the slider that nothing
   fills (confirmed via computed layout: column was 396px against a 274px
   slider). Taking `.gb-side-banner` out of normal flow (`position: absolute`
   inside a `position: relative` column) removes it from that hypothetical-
   height competition entirely, so only the hero drives the row's height.

   `fill`, not `contain` or `cover`: this slot has to satisfy two requirements
   at once — show the whole image (cropping was rejected) and leave no blank
   strip against the slider beside it. `contain` honours the first and breaks
   the second, because any ratio mismatch becomes white-on-white letterboxing
   that reads as a gap. `fill` honours both by stretching to the box; since the
   recommended upload is within a few percent of the slot, the distortion is
   imperceptible. Keep the recommendation close to the slot ratio and it stays
   that way. */
.home-banner-area .col-lg-4 {
    position: relative;
}
.home-banner-area .gb-side-banner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 12px;
    line-height: 0;
    background: #fff;
}
.home-banner-area .gb-side-banner img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 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; }
/* The dot row sits in flow under the slider: aiz-core's 10px margin-top plus the
   inherited body line-height (~21px for an 11px dot) left a tall dead strip
   between a slider section and the next heading. Collapse it to the dot size. */
.gb-product-slider .slick-dots { margin-top: 2px; line-height: 0; }
.gb-product-slider .slick-dots li { line-height: 0; }

/* ---------- 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 (6px) 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: 4px 0 0;
}

/* ---------- 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;
}

@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: 6px;
}

/* Extra breathing room above "Top Selling Products" specifically — the
   preceding section's own margin-bottom (6px, above) reads as too tight here. */
.gb-top-selling {
    padding-top: 12px;
}

/* 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;
    }
}

/* Checkout — shipping address fields stack full width on mobile.
   The 6/6 split leaves name, phone and the district/thana pickers too
   cramped to read on a phone, so force one field per row below md. */
@media (max-width: 767.98px) {
    .gb-address-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Product details — tag pills, shown just above the share row.
   Each one links into the keyword search, the same target the header
   search dropdown uses for its "Popular Suggestions". */
.gb-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gb-product-tag {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 100px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    /* Display only — the stored tag and the search link keep their original
       casing, which the keyword match is case-insensitive about anyway. */
    text-transform: capitalize;
    transition: all 0.15s ease;
}

.gb-product-tag:hover,
.gb-product-tag:focus {
    border-color: var(--primary, #fd7e14);
    background: var(--primary, #fd7e14);
    color: #fff;
    text-decoration: none;
}

/* Flash deal detail page: redesigned countdown timer (dark cards + Days/Hrs/Min/Sec
   labels) on top of the stock .aiz-count-down plugin markup. The plugin rewrites
   the .countdown-item/.countdown-digit markup every second (aiz-core.js countDown()),
   so labels are added via ::after + nth-of-type rather than injected in the DOM. */
.flash-countdown.aiz-count-down {
    display: inline-flex;
}

.flash-countdown .countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    margin: 0 6px;
    padding: 10px 8px 8px;
    background: var(--primary, var(--gb-orange));
    background: linear-gradient(160deg, var(--primary, var(--gb-orange)) 0%, #a85608 100%);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.flash-countdown .countdown-digit {
    font-family: 'Courier New', Courier, monospace;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.flash-countdown .countdown-item::after {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    line-height: 1;
}

.flash-countdown .countdown-item:nth-of-type(1)::after { content: "Days"; }
.flash-countdown .countdown-item:nth-of-type(2)::after { content: "Hrs"; }
.flash-countdown .countdown-item:nth-of-type(3)::after { content: "Min"; }
.flash-countdown .countdown-item:nth-of-type(4)::after { content: "Sec"; }

.flash-countdown .countdown-separator {
    font-size: 0;
    align-self: center;
}

.flash-countdown .countdown-separator::after {
    content: "\2022";
    font-size: 20px;
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 575px) {
    .flash-countdown .countdown-item { min-width: 44px; padding: 8px 6px 6px; margin: 0 4px; }
    .flash-countdown .countdown-digit { font-size: 20px; }
}