/*
 * Panda Valy brand theme.
 *
 * Loaded LAST (see layouts/css.blade.php) so it wins the cascade without
 * editing the vendor theme's very large stylesheets in place.
 *
 * ─────────────────────────────────────────────────────────────────────
 * SINGLE SOURCE OF TRUTH FOR COLOR.
 * Every brand color on the storefront resolves to a token below. To
 * re-brand the site, change the tokens in :root — nothing else. Do not
 * reintroduce raw brand hex values in blade files or other stylesheets;
 * that is what caused the palette to drift per-page previously.
 * ─────────────────────────────────────────────────────────────────────
 */

:root {
    /* ---- Brand ---- */
    --primary: #e6007e;
    --primary-dark: #c0006a;
    --primary-light: #ff3ba0;
    --primary-soft: #fdf2f8;
    --primary-softer: #fff7fb;
    --primary-border: #fbcfe8;
    --primary-gradient: linear-gradient(135deg, #e6007e 0%, #c0006a 100%);

    /* ---- Neutrals (category nav, footer, headings) ---- */
    --ink: #1a1a1a;
    --ink-soft: #2a2a2a;
    --ink-line: #333333;
    --heading: #1a1a1a;
    --sub-heading: #6b7280;
    --muted: #9ca3af;

    /* ---- Accents ---- */
    --success: #16a34a;
    --success-soft: #e8f7ee;
    --gold: #ffb800;
    --cream: #fff8e7;
    --cream-border: #f6e6c3;

    /* ---- Legacy theme variables, remapped ----
       The vendor theme and older blades reference these names. Pointing
       them at the brand tokens re-colors every one of those usages at
       once, instead of hunting them down file by file. */
    --secondary: var(--ink);
    --navbar: var(--ink);
    --hover: var(--primary);
    --orange: var(--primary);
    --pink: var(--primary);
    --darkgray: var(--ink);
    --accent-color: var(--primary);
    --dark-color: var(--ink);
    --text-color: #333333;

    --brand-shadow: 0 6px 18px rgba(230, 0, 126, 0.25);
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ===================================================================
   1. BOOTSTRAP + FORM BRIDGES
   The theme leans on Bootstrap's own utility classes across shop,
   cart, checkout, buyer profile and product detail. Bring them onto
   the brand color so those pages match the homepage.
   =================================================================== */
.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.text-primary {
    color: var(--primary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}
.border-primary {
    border-color: var(--primary) !important;
}
.badge.bg-success,
.text-success {
    --bs-success-rgb: 22, 163, 74;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-border) !important;
    box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.12) !important;
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
a {
    color: inherit;
}
::selection {
    background: var(--primary);
    color: #fff;
}

/* Breadcrumbs (shop, product detail, content pages). The theme left these on
   the browser/Bootstrap default link blue, which read as a foreign color. */
.custom-breadcrumb a,
.cms-breadcrumb a,
.cart-breadcrumb a,
.co-breadcrumb a {
    color: var(--sub-heading);
    text-decoration: none;
    transition: color 0.15s;
}
.custom-breadcrumb a:hover,
.cms-breadcrumb a:hover,
.cart-breadcrumb a:hover,
.co-breadcrumb a:hover {
    color: var(--primary);
}
.custom-breadcrumb .breadcrumb-current,
.custom-breadcrumb > span:last-child {
    color: var(--heading);
    font-weight: 600;
}

/* Mobile menu tabs — Bootstrap's default nav-tabs link blue. */
.nav-tabs .nav-link {
    color: var(--sub-heading);
}
.nav-tabs .nav-link:hover {
    color: var(--primary);
    border-color: transparent transparent var(--primary-border);
}
.nav-tabs .nav-link.active {
    color: var(--primary);
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
}

/* Pagination (shop / buyer order history) */
.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}
.page-link {
    color: var(--primary);
}
.page-link:hover {
    color: var(--primary-dark);
}

/* ===================================================================
   2. HEADER — announcement bar + main header
   =================================================================== */
.top-headline {
    background: var(--primary);
    border-bottom: 0;
    padding: 8px 0;
    color: #fff;
}
.top-headline .headline-text span {
    color: #fff;
    font-size: 13px;
}
/* The announcement text is a marquee with a 1000px min-width; on the
   brand bar it needs to share the row with the chip and the links. */
.top-headline .headline-text {
    min-width: 0;
    flex: 1;
}
.top-headline .headline-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 14px;
}
.top-headline .headline-socials {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.top-headline .headline-socials .social-item {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    transition: opacity 0.15s;
}
.top-headline .headline-socials .social-item:hover {
    color: #fff;
    opacity: 0.75;
}
.top-headline .headline-link {
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.top-headline .headline-link:hover {
    color: #fff;
    opacity: 0.8;
}

.header-main {
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}
/* The WhatsApp block that used to sit here is a floating button now, so
   the freed width goes to the search field. */
.header-search {
    width: 70%;
}
.header-search input {
    border-radius: 6px 0 0 6px;
    border: 1px solid #e6e6e6;
}
.header-search button {
    background: var(--primary);
    color: #fff;
    border-radius: 0 6px 6px 0;
}
.header-search button:hover {
    background: var(--primary-dark);
}
.header-action .total-cart,
.header-action .total-wishlist {
    background: var(--primary);
    color: #fff;
}

/* ===================================================================
   3. CATEGORY MEGA-NAV (horizontal bar; replaced the left sidebar)
   =================================================================== */
nav.navbar.cat-navbar {
    background: var(--ink);
    padding: 0;
    margin-bottom: 24px;
}
.cat-nav-list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.cat-nav-list::-webkit-scrollbar {
    display: none;
}
.cat-nav-list > li {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.cat-nav-list > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 15px;
    color: #fff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: 0.2s;
}
.cat-nav-list > li > a:hover {
    color: var(--primary-light);
    background: rgba(255, 255, 255, 0.06);
}
/* Active item reads as a filled pill rather than just tinted text. */
.cat-nav-list > li > a.active {
    color: #fff;
    background: var(--primary);
    border-radius: 20px;
    margin: 6px 4px;
    padding: 7px 16px;
    font-weight: 600;
}
.cat-nav-list > li > a i.fa-angle-down {
    font-size: 11px;
    opacity: 0.8;
}
.cat-nav-list .cat-nav-right {
    margin-left: auto;
}
.cat-nav-list .cat-nav-right .arrival-menu {
    color: var(--gold);
    text-transform: uppercase;
    font-size: 12.5px;
    font-weight: 700;
}
.cat-nav-list .cat-nav-right .arrival-menu:hover {
    color: var(--gold);
    opacity: 0.8;
}

/* Sub-category dropdown on hover */
.cat-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: 0.2s;
    z-index: 60;
}
.cat-nav-list > li.has-children:hover .cat-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cat-nav-dropdown li a {
    display: block;
    padding: 9px 16px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}
.cat-nav-dropdown li a:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

/* ===================================================================
   4. HERO — main slider + side banner column
   =================================================================== */
.slide-content {
    min-height: 300px;
    margin-top: 40px;
}
.slide-image::after {
    background: rgba(0, 0, 0, 0.08);
}
.slide {
    border-radius: 10px;
}
.swiper-container.slideshow {
    border-radius: 10px;
    overflow: hidden;
}
/* The theme reserved 251px of left padding so the hero cleared the old
   left-hand category sidebar. The nav is horizontal now, so the hero
   spans the full container. */
.slider-section .container {
    padding-left: 24px;
}
.hero-slider-main .swiper-container {
    width: 100%;
    margin: 0;
    padding: 0;
}
.hero-grid {
    display: flex;
    align-items: stretch;
    gap: 16px;
}
.hero-slider-main {
    flex: 1 1 65%;
    min-width: 0;
    max-width: 100%;
}
.hero-slider-main .swiper-container.slideshow {
    width: 100%;
    max-width: 100%;
}
/* Height lives on the slide itself so the caption can be a pure overlay. */
.hero-slider-main .swiper-slide.slide {
    width: 100%;
    max-width: 100%;
    height: 340px;
}
/* Keep the slide caption inside its slide (it's an absolute overlay that
   otherwise spills out once the slider sits in a narrower flex column). */
.hero-slider-main .slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 28px 28px;
    margin-top: 0;
    min-height: 0;
}
.hero-slider-main .slide-title {
    font-size: 28px;
    max-width: 70%;
}
.hero-slider-main .slide-desc {
    margin-top: 8px;
    margin-bottom: 12px;
}
@media (min-width: 45em) {
    .hero-slider-main .slide-title {
        font-size: 30px;
    }
}
/* Pagination: the theme renders big "01 — 02 — 03" numerals across the
   middle of the banner. The brand design uses small dots at the bottom. */
.hero-slider-main .slideshow-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    top: auto;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 20;
}
.hero-slider-main .slideshow-pagination-item {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    overflow: hidden;
    transition: 0.2s;
}
.hero-slider-main .slideshow-pagination-item .pagination-number,
.hero-slider-main .slideshow-pagination-item .pagination-separator {
    display: none;
}
.hero-slider-main .slideshow-pagination-item.active {
    background: var(--primary);
    width: 22px;
    border-radius: 5px;
}
.hero-side-banners {
    flex: 1 1 32%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Match the slider so any number of stacked banners shares its height
       instead of growing the row to the images' intrinsic height. */
    height: 340px;
}
.hero-side-banner {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    flex: 1 1 0;
    min-height: 0;
}
.hero-side-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* The caption is white, but banner artwork is admin-supplied and may be light
   (a cream promo panel leaves it unreadable). A bottom scrim guarantees
   contrast without darkening the whole image. */
.hero-side-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.hero-side-banner-caption {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hero-side-banner-caption .title {
    font-weight: 700;
    font-size: 15px;
}
.hero-side-banner-caption .subtitle {
    font-size: 12px;
}

/* ===================================================================
   5. SECTION HEADINGS
   =================================================================== */
.section-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}
/* Bengali/secondary line under a heading, in brand color. */
.section-subtitle {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    margin: 0 0 18px;
}
.section-flex {
    display: flex;
    margin-bottom: 18px;
}
.section-flex .section-title {
    margin-bottom: 0;
}
.section-head-center {
    text-align: center;
    margin-bottom: 26px;
}
.section-head-center .section-title {
    font-size: 26px;
}
.section-head-center .section-subtitle {
    color: var(--sub-heading);
    font-weight: 400;
    margin-bottom: 0;
}
.view-all {
    border: 1px solid var(--primary-border);
    padding: 7px 16px;
    border-radius: 20px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    transition: 0.2s;
}
.view-all:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ===================================================================
   6. PRODUCT CARD
   =================================================================== */
.product-card {
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 14px 14px 12px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.product-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
/* Savings badge, top-left. Green — it communicates a discount, which is
   deliberately NOT the brand color so it stays distinguishable from the
   status/label pills. */
.product-card .discount-badge {
    background: var(--success);
    color: #fff;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    top: 10px;
    left: 10px;
    margin-bottom: 0;
}
/* Label pill ("Best Selling" / "Popular"), top-right, brand colored.
   Offset left of the wishlist heart so the two never overlap. */
.product-card .label-badge {
    position: absolute;
    top: 10px;
    right: 48px;
    z-index: 5;
    background: var(--primary);
    color: #fff;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.product-card .product-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 4px;
}
.product-card:hover .product-name {
    color: var(--primary);
}
.product-card .product-subname {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}
.product-card .current-price {
    color: var(--primary);
    font-size: 17px;
}
.product-card .original-price {
    color: var(--muted);
}
.product-card .stock-info {
    color: var(--success);
}
.product-card .product-image {
    background: #fafafa;
    border-radius: 8px;
    padding: 6px;
}

/* Card actions: outlined "Add to Cart" + solid "Buy Now". */
.product-card .action-buttons {
    gap: 8px;
    flex-wrap: wrap;
}
.product-card .action-buttons::after {
    display: none;
}
.btn-cart-outline,
.product-card .add-to-cart-btn {
    /* min-width:0 with basis 0 lets the pair share a narrow card instead of
       being forced wider than it by their nowrap labels. */
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 20px !important;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 10px;
    white-space: nowrap;
    transition: 0.2s;
}
.btn-cart-outline:hover,
.product-card .add-to-cart-btn:hover {
    background: var(--primary) !important;
    color: #fff !important;
}
.btn-buy-now {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary-gradient);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 10px;
    white-space: nowrap;
    text-decoration: none;
    transition: 0.2s;
}
.btn-buy-now:hover {
    color: #fff;
    filter: brightness(1.06);
    box-shadow: var(--brand-shadow);
}
.wishlist-toggle-btn:hover i {
    color: var(--primary) !important;
}

/* Category tiles */
.category-item .text {
    color: var(--heading);
    font-weight: 600;
}
.category-item:hover .text {
    color: var(--primary);
}
.category-item:hover .img {
    border-color: var(--primary);
}

/* Swiper arrows */
.swiper-button-next,
.swiper-button-prev {
    color: var(--primary);
}
.swiper-pagination-bullet-active {
    background: var(--primary);
}

/* ===================================================================
   7. FEATURE / TRUST STRIP
   =================================================================== */
.feature-strip {
    margin: 26px 0;
}
.feature-strip-inner {
    display: grid;
    grid-template-columns: repeat(var(--feature-cols, 4), 1fr);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-right: 1px solid #f0f0f0;
}
.feature-item:last-child {
    border-right: 0;
}
.feature-item .feature-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 17px;
}
.feature-item .feature-text strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.3;
}
.feature-item .feature-text span {
    font-size: 11.5px;
    color: var(--muted);
}

/* ===================================================================
   8. COMBO DEALS + SPLIT BANNER
   =================================================================== */
.combo-panel {
    background: var(--cream);
    border: 1px solid var(--cream-border);
    border-radius: 12px;
}
.combo-badge {
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
}
.split-banner-dark {
    background: var(--ink);
    border-radius: 12px;
    color: #fff;
}

/* ===================================================================
   9. TESTIMONIALS
   =================================================================== */
.testimonial-section {
    padding: 40px 0 50px;
}
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.testimonial-card {
    position: relative;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 22px 22px 20px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.testimonial-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
.testimonial-quote {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 30px;
    line-height: 1;
    color: var(--primary);
    opacity: 0.18;
}
.testimonial-stars {
    color: var(--gold);
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.testimonial-body {
    font-size: 13.5px;
    line-height: 1.75;
    color: #4b5563;
    margin-bottom: 18px;
}
.testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #f2f2f2;
    padding-top: 14px;
}
.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--primary-soft);
}
.testimonial-avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--primary-soft);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
}
.testimonial-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.3;
}
.testimonial-role {
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.testimonial-verified {
    color: var(--success);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ===================================================================
   10. BRAND STRIP
   =================================================================== */
.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    min-height: 104px;
    padding: 18px 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    text-decoration: none;
    transition: 0.2s;
}
.brand-card:hover {
    border-color: var(--primary-border);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
.brand-card img {
    max-height: 42px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.brand-card .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 15px;
}
.brand-card .brand-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--heading);
    text-align: center;
    letter-spacing: 0.3px;
}
.brand-card .brand-tag {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}

/* ===================================================================
   11. FOOTER — dark
   =================================================================== */
footer {
    background-color: var(--ink);
    border-top: 0;
    padding: 50px 0 0;
    color: #d1d5db;
}
footer .footer-top {
    display: grid;
    /* Brand block, then one track per link column. The link columns are
       admin-managed (page categories), so the count is not fixed at 4 —
       the footer sets --footer-link-cols to however many it rendered.
       Do NOT use repeat(auto-fit, …) here: a track list may not mix a
       flexible (fr) track with auto-fit, so the whole declaration is
       dropped as invalid and the footer collapses into one column. */
    grid-template-columns: 1.6fr repeat(var(--footer-link-cols, 4), 1fr);
    gap: 30px;
    padding-bottom: 40px;
}
footer .footer-brand {
    max-width: 340px;
}
footer .footer-brand-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--primary-light);
    margin-bottom: 4px;
}
footer .footer-brand-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--primary-light);
    text-transform: uppercase;
}
footer .footer-tagline {
    color: #9ca3af;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 16px 0 18px;
}
footer .footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
footer .footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13.5px;
    color: #d1d5db;
}
footer .footer-contact-list li i {
    color: var(--primary-light);
    margin-top: 4px;
    width: 14px;
    flex-shrink: 0;
}
footer .footer-contact-list a {
    color: #d1d5db;
    text-decoration: none;
}
footer .footer-contact-list a:hover {
    color: var(--primary-light);
}
footer .footer-contact-list .footer-contact-empty {
    color: #6b7280;
    font-style: italic;
}
footer .footer-heading {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    display: block;
    margin-bottom: 12px;
}
footer .social-icons {
    display: flex;
    gap: 12px;
    margin-bottom: 26px;
}
footer .social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: 0.2s;
}
footer .social-icon:hover {
    background: var(--primary);
    color: #fff;
}
footer .app-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
footer .app-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    transition: 0.2s;
}
footer .app-badge:hover {
    border-color: var(--primary);
}
footer .app-badge img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
footer .app-badge span {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
footer .app-badge span small {
    font-size: 9px;
    font-weight: 400;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
footer .footer-section h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}
footer .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
footer .footer-section li {
    margin-bottom: 10px;
}
footer .footer-section a {
    color: #9ca3af;
    text-decoration: none;
    font-size: 13.5px;
    transition: color 0.15s;
}
footer .footer-section a:hover {
    color: var(--primary-light);
}
footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 22px 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
footer .footer-payments {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    /* min-width:0 lets this flex item shrink below the gateway sheet's very
       wide intrinsic size; without it the row forced a page-wide h-scroll. */
    flex: 1 1 auto;
    min-width: 0;
}
footer .footer-payments span {
    font-size: 12.5px;
    color: #9ca3af;
    white-space: nowrap;
}
footer .footer-payments img {
    /* The gateway sheet is one very wide light-background PNG (8346×252), so
       it is bounded on both axes and sits on a white chip to stay legible on
       the dark footer. */
    height: auto;
    width: auto;
    max-height: 30px;
    max-width: 100%;
    /* A replaced element's automatic minimum size is its intrinsic width, which
       kept it from shrinking into the space left beside the "Pay With" label. */
    min-width: 0;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 3px 6px;
}
footer .footer-bottom .copyright {
    margin: 0;
    color: #9ca3af;
    font-size: 13.5px;
    /* style.css:838 gives .copyright its own top border and padding, from the
       theme's original full-width footer block. The bar is a flex row now, so
       that border rendered as a stray rule the width of the text. */
    border-top: 0;
    padding-top: 0;
}
footer .footer-bottom .copyright strong {
    color: var(--primary-light);
}

/* ===================================================================
   12. BUYER ACCOUNT + AUTH
   =================================================================== */
.buyer-sidebar {
    background: var(--ink);
}
.buyer-sidebar a:hover,
.buyer-sidebar a.active {
    color: var(--primary);
}
.buyer-stat .value {
    color: var(--primary);
}

/* ===================================================================
   13. FLOATING WIDGETS
   =================================================================== */
.floating-contact {
    position: fixed;
    right: 26px;
    bottom: 32px;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 18px 0 15px;
    border-radius: 27px;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
    transition: 0.25s;
}
.floating-contact:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
}
.floating-contact i {
    font-size: 26px;
    line-height: 1;
}
.floating-contact .floating-contact-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}
.floating-contact .floating-contact-text small {
    font-size: 10px;
    opacity: 0.9;
}
.floating-contact .floating-contact-text strong {
    font-size: 13px;
    font-weight: 700;
}
.floating-cart {
    background: var(--primary) !important;
    box-shadow: var(--brand-shadow);
}
/* Beats the inline display:block that updateFloatingCart()'s .show() sets. */
.floating-cart.is-suppressed {
    display: none !important;
}

/* ===================================================================
   14. RESPONSIVE
   =================================================================== */
@media (max-width: 992px) {
    .feature-strip-inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-item:nth-child(2n) {
        border-right: 0;
    }
    .feature-item:nth-child(-n + 2) {
        border-bottom: 1px solid #f0f0f0;
    }
    footer .footer-top {
        grid-template-columns: 1fr 1fr 1fr;
    }
    footer .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .top-headline .headline-chip {
        display: none;
    }
    .top-headline .headline-link span {
        display: none;
    }
    /* Collapse to a circular icon so it doesn't cover mobile content,
       and lift it above the fixed bottom nav bar. */
    .floating-contact {
        right: 16px;
        bottom: 76px;
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .floating-contact .floating-contact-text {
        display: none;
    }
    .cat-nav-list .cat-nav-right {
        margin-left: 0;
    }
    /* Hover dropdowns don't work on touch; sub-categories stay reachable
       from the category page itself. */
    .cat-nav-dropdown {
        display: none;
    }
    .slide-content {
        min-height: 220px;
        margin-top: 20px;
    }
    .hero-grid {
        flex-direction: column;
    }
    .hero-slider-main .swiper-slide.slide {
        height: 200px;
    }
    .hero-side-banners {
        flex-direction: row;
        height: auto;
    }
    .hero-side-banner {
        min-height: 110px;
    }
    .section-head-center .section-title {
        font-size: 21px;
    }
}
@media (max-width: 768px) {
    /* In a ~165px grid card the savings badge and the merchandising pill
       collide, so the pill drops onto its own line under it. */
    .product-card .label-badge {
        top: 36px;
        right: auto;
        left: 10px;
    }
    /* Two pill buttons will not sit side by side in a ~165px grid card
       without truncating their labels, so they stack instead. */
    .product-card .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .product-card .action-buttons .add-to-cart-btn,
    .product-card .action-buttons .btn-buy-now,
    .product-card .action-buttons .btn-cart-outline {
        width: 100%;
        flex: 0 0 auto;
    }
}
@media (max-width: 576px) {
    .feature-strip-inner {
        grid-template-columns: 1fr;
    }
    footer .footer-bottom {
        justify-content: flex-start;
    }
    footer .footer-payments {
        justify-content: flex-start;
    }
    .feature-item {
        border-right: 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .feature-item:last-child {
        border-bottom: 0;
    }
    footer .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===================================================================
   15. BRAND HEADER BAND
   The reference header is one solid magenta band: wordmark, pill search
   and icon+label actions. This replaces the theme's white header, so the
   announcement strip above it is not part of that design.
   =================================================================== */

.header-main {
    background: var(--primary);
    border-bottom: 0;
    padding: 14px 0;
}
.header-main .container {
    gap: 24px;
}
/* The theme sizes these three by percentage (logo 20% / search 59% / action
   10%), which leaves no room for five labelled actions. Let flex distribute
   the row instead: logo and actions take their content width, search takes
   the rest. */
.header-main .header-logo,
.header-main .header-action {
    width: auto;
    flex: 0 0 auto;
}
.header-main .header-search {
    width: auto;
    flex: 1 1 auto;
}

/* Storefront logos are usually dark wordmarks made for a white header; this
   renders any of them as a solid white mark on the magenta band. Remove it if
   a light logo is uploaded specifically for this header. */
.header-main .header-logo img {
    filter: brightness(0) invert(1);
    width: auto;
    max-height: 44px;
}

/* Pill search */
.header-main .header-search input {
    border: 0;
    border-radius: 24px;
    height: 42px;
    padding-left: 20px;
    background: #fff;
}
.header-main .header-search button {
    background: transparent;
    color: var(--primary);
    border-radius: 0 24px 24px 0;
    width: 46px;
}
.header-main .header-search button:hover {
    background: transparent;
    color: var(--primary-dark);
}

/* Icon + label actions */
.header-action {
    gap: 22px;
}
.header-action .ha-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    transition: opacity 0.15s;
}
.header-action .ha-item:hover {
    color: #fff;
    opacity: 0.8;
}
.header-action .ha-item i {
    font-size: 19px;
}
/* `.header-action a span` is styled by the theme as an absolutely positioned
   16px count bubble. The label is also a span, so it has to opt out of all of
   that before it will sit under the glyph. */
.header-action .ha-label {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
/* The count bubble is positioned against this wrapper rather than the whole
   item, so it sits on the glyph instead of floating over the label. */
.header-action .ha-icon-wrap {
    position: relative;
    display: inline-flex;
}
.header-action .ha-item .total-cart,
.header-action .ha-item .total-wishlist {
    position: absolute;
    top: -7px;
    right: -11px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Centered magenta section heading ("প্রোডাক্ট গ্যালারি"). */
.section-head-brand {
    text-align: center;
    margin: 34px 0 26px;
}
.section-head-brand .section-title {
    color: var(--primary);
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 6px;
}
.section-head-brand .section-subtitle {
    color: var(--sub-heading);
    font-weight: 400;
    margin: 0;
}

@media (max-width: 768px) {
    .header-main .container {
        gap: 12px;
    }
    .header-action {
        gap: 14px;
    }
    .header-action .ha-label {
        display: none;
    }
}

/* ===================================================================
   16. PRODUCT GALLERY GRID (product_row with layout: grid)
   =================================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 40px;
}
/* variable.css caps .product-card at 225px for the carousel; in a grid the
   card should fill its track instead. */
.product-grid .product-card {
    max-width: none;
    width: 100%;
}
.product-grid .product-card .product-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}
.product-grid .product-card .product-name {
    color: var(--primary);
    font-size: 15px;
}
.product-grid .product-card:hover .product-name {
    color: var(--primary-dark);
}
/* The reference cards show image, title, price and the two actions only. */
.product-grid .product-card .stock-info {
    display: none;
}
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 576px) {
    .product-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===================================================================
   17. COMPACT FOOTER
   The reference footer is a single magenta copyright bar. The link
   columns stay in the markup (and remain reachable from the header's
   "More" menu) but are not rendered here.
   Set `--footer-columns: grid` on :root to bring them back.
   =================================================================== */
footer {
    background-color: var(--primary);
    padding: 0;
}
footer .footer-top {
    display: var(--footer-columns, none);
}
footer .footer-bottom {
    border-top: 0;
    padding: 18px 0;
    justify-content: center;
    text-align: center;
}
footer .footer-bottom .copyright {
    color: #fff;
    font-size: 14px;
}
footer .footer-bottom .copyright strong {
    color: #fff;
    font-weight: 700;
}
footer .footer-payments {
    display: none;
}

/* Floating chat button, magenta per the reference. */
.floating-contact {
    background: var(--primary);
    box-shadow: var(--brand-shadow);
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}
.floating-contact:hover {
    box-shadow: 0 10px 24px rgba(230, 0, 126, 0.45);
}
.floating-contact .floating-contact-text {
    display: none;
}

/* ===================================================================
   12. BARE CHROME — pages reached from the one-page funnel
   =================================================================== */
/* The funnel's own copyright band, matching the landing page footer, for
   pages that render master.blade.php without the storefront chrome. */
/* The search field normally takes up the slack in the header row; without it
   the remaining actions have to claim that space themselves or they bunch up
   against the logo. */
.header-main .container .bare-actions {
    margin-left: auto;
}
.bare-footer {
    margin-top: 44px;
    background-color: var(--primary);
    color: #fff;
    text-align: center;
    font-size: 14.5px;
    padding: 18px 0;
}
.bare-footer strong {
    font-weight: 700;
}
/* The theme lays every footer .container out as a space-between flex row, which
   tore this one line into "Copyright ©…" on the left and the shop name on the
   right. It is a single centred sentence, so it is not a flex row at all. */
.bare-footer .container {
    display: block;
}