/*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: 86px; }
}
.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-wrap { display: flex; }

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

/* ---------- Category nav bar (green) ---------- */
.gb-catbar {
    background: var(--gb-green);
    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;
    min-width: 100%;
    justify-content: space-between;
}
.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: 15px 10px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.gb-catbar-link:hover {
    color: #ffffff;
    background: var(--gb-green-hover);
    text-decoration: none;
}
.gb-catbar-item:hover .gb-catbar-link { background: var(--gb-green-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-green);
    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-green);
}
.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: 28px 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 */
.gb-footer-bottom {
    background: #ffffff;
    border-top: 1px solid #eee;
    color: #6b7280;
}
.gb-pay-methods li { margin: 2px 3px; }

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

/* ---------- Product card ---------- */
.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%;
    height: 190px;
    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;
}
.gb-product-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    margin: 0 0 8px;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.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: 12px;
}
.gb-price-now { font-size: 17px; font-weight: 700; color: var(--gb-orange); }
.gb-price-old { font-size: 13px; color: #9aa0a6; }

.gb-add-btn {
    margin-top: auto;
    width: 100%;
    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: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;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .gb-wide-grid { grid-template-columns: repeat(2, 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;
}
.gb-wide-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: #1f2937;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.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-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; }
}
@media (max-width: 575px) {
    .gb-wide-card { flex-direction: column; align-items: stretch; }
    .gb-wide-thumb { flex: 0 0 auto; max-width: 100%; }
    .gb-wide-body { text-align: center; }
    .gb-wide-price { justify-content: center; }
    .gb-wide-actions { justify-content: center; }
}


/* ---------- Hero (full-width) ---------- */
.gb-hero-img {
    height: 440px;
    object-fit: cover;
    border-radius: 0;
}
@media (max-width: 767px) {
    .gb-hero-img { height: 190px; }
}

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

/* ---------- Shop by Category (slider of rounded cards) ---------- */
.gb-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px;
}
.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 {
    width: 70%;
    height: 70%;
    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; }

/* ---------- USP / trust strip ---------- */
.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-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: 18px;
}
.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;
}
@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;
    padding: 26px 24px 18px;
}
/* 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: 20px;
}
.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: 175px;
    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;
}
.gb-deal-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 8px;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.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: 12px;
}

/* Solid call-to-action, unlike the outlined button on the plain cards */
.gb-deal-btn {
    margin-top: auto;
    width: 100%;
    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: 18px 14px 12px; border-radius: 12px; }
    .gb-deal-heading { font-size: 17px; }
    .gb-deal-thumb img { height: 140px; }
}

/* ---------- 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: 150px; }
    .gb-section-head .gb-section-title { font-size: 17px; }
}