/* BrickoMart Brand Overrides — loaded last, highest CSS priority */

:root {
    --bricko-navy:   #114376;
    --bricko-orange: #F5A623;
    --bricko-teal:   #00B5A3;
    --bricko-red:    #E85D30;
}

/* ── Font ─────────────────────────────────────────────────── */
/* No *::before/after — those pseudo-elements render Bagisto's icon glyphs */
/* No !important — Bagisto's [class^="icon-"] { font-family: bagisto-shop !important } wins for icons */
/* label excluded from blanket rule; label.icon-camera is targeted separately below */
body, p, span:not([class*="icon-"]), div, a, button, input,
select, textarea, h1, h2, h3, h4, h5, h6,
label:not([class*="icon-"]), td, th, li {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Primary buttons ──────────────────────────────────────── */
.primary-button,
button[type="submit"].primary-button {
    background-color: var(--bricko-navy) !important;
    border-color:     var(--bricko-navy) !important;
}
.primary-button:hover {
    background-color: #0d3460 !important;
    border-color:     #0d3460 !important;
}

/* ── Links ────────────────────────────────────────────────── */
a { color: var(--bricko-navy); }
a:hover { color: #0d3460; }

/* ── Header bottom border — subtle gray (not navy) ────────── */
header .border-b {
    border-bottom-color: #E5E7EB !important;
    border-bottom-width: 1px !important;
}
.text-navyBlue { color: var(--bricko-navy) !important; }
.hover\:border-navyBlue:hover { border-color: var(--bricko-navy) !important; }
.border-navyBlue { border-color: var(--bricko-navy) !important; }

/* ── Search bar ──────────────────────────────────────────── */
input[name="query"] {
    background-color: #FFFFFF !important;
    border-color:     #E5E7EB !important;
}
input[name="query"]:hover,
input[name="query"]:focus {
    background-color: #FFFFFF !important;
    border-color:     var(--bricko-navy) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Category nav hover underline ────────────────────────── */
.group:hover .group-hover\:border-navyBlue {
    border-color: var(--bricko-navy) !important;
}

/* ── Search bar — wider ──────────────────────────────────── */
header div:has(> form[action*="search"]) {
    flex: 1 !important;
}
header form[action*="search"] {
    flex: 1 !important;
    max-width: 520px !important;
    min-width: 280px !important;
    width: 100% !important;
}
header form[action*="search"] input {
    width: 100% !important;
}

/* ── Hide unwanted Bagisto / B2B defaults ────────────────── */

/* Compare button/link */
a:has(.icon-compare) {
    display: none !important;
}

/* Image search camera — button is the pre-Vue shimmer, label is the mounted Vue element */
button.icon-camera,
label.icon-camera {
    display: none !important;
}

/* B2B Marketplace supplier profile link injected by B2BMarketplace */
a:has(.b2b-b2b-supplier) {
    display: none !important;
}

/* B2B Marketplace RFQ button (uses Icon-RFQ.svg image) */
a:has(img[src*="Icon-RFQ"]) {
    display: none !important;
}

/* ── Price display ───────────────────────────────────────── */
.price, .special-price,
[class*="price"]:not([class*="old"]):not([class*="original"]) {
    color: var(--bricko-navy) !important;
    font-weight: 700 !important;
}
.discount-price, .old-price,
[class*="original-price"], [class*="old-price"] {
    color: var(--bricko-red) !important;
}

/* ── Hide native Bagisto mini-cart on DESKTOP only ──────────── */

/* Pre-hydration: scope to the desktop right-nav row (.mt-1.5) so the
   mobile shimmer is NOT hidden (mobile has no custom Carts row). */
header .mt-1\.5 > v-mini-cart {
    display: none !important;
}

/* Post-hydration: v-mini-cart → v-drawer renders as a bare <div> child of .mt-1.5.
   Our Carts link is an <a>, so div:has(icon-cart) is safe and desktop-scoped. */
header .mt-1\.5 > div:has(span.icon-cart) {
    display: none !important;
}

/* ── Hide B2B Marketplace injected elements on mobile ────────── */

/* B2B injects an unstyled RFQ text link (<a class="flex unset">) at mobile
   compare.before — hide it; our desktop has a proper RFQ nav item already. */
header a.unset {
    display: none !important;
}

/* B2B supplier icon on mobile — already caught by a:has(.b2b-b2b-supplier)
   above, listed here for clarity. No extra rule needed. */

/* ── B2B nav items (RFQ, Carts, Orders) ──────────────────── */
.bricko-nav-item {
    text-decoration: none !important;
    color: #374151;
    min-width: 52px;
    transition: color .15s;
}
.bricko-nav-item:hover {
    color: #114376;
    text-decoration: none !important;
}
/* Keep legacy class as alias */
.bricko-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #374151;
    min-width: 52px;
    transition: color .15s;
}
.bricko-nav-btn:hover {
    color: #114376;
    text-decoration: none;
}

/* ── Profile dropdown — match nav item style (post-Vue-hydration selectors) ── */
/* After hydration: <v-dropdown class="relative"> → <div class="relative">
   with inner <div class="select-none"> as the click-toggle target. */
header .mt-1\.5 > div.relative > div.select-none {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 52px !important;
    cursor: pointer !important;
    color: #374151 !important;
    transition: color .15s !important;
}
header .mt-1\.5 > div.relative > div.select-none:hover {
    color: #114376 !important;
}
header .mt-1\.5 > div.relative > div.select-none .icon-users {
    font-size: 24px !important;
    display: block !important;
    line-height: 1 !important;
}
header .mt-1\.5 > div.relative > div.select-none::after {
    content: 'Account';
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: inherit !important;
}

/* ── BrickoMart product card price overrides ── */
.bmt-price-html span,
.bmt-price-html .price,
.bmt-price-html ins {
    font-weight: 800 !important;
    color: #0F172A !important;
    font-size: 15px !important;
    text-decoration: none !important;
}
.bmt-price-html del,
.bmt-price-html .regular-price {
    font-size: 11px !important;
    color: #6B7280 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}
.bmt-price-html .special-price {
    color: #0F172A !important;
    font-weight: 800 !important;
}

/* ── Bagisto default carousel product card — BrickoMart styling ── */
/* The component is Vue-driven, so CSS overrides are used instead of a Blade override. */
/* Selector: .group.rounded-md matches the card root; no other page element uses both. */
.group.rounded-md {
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.group.rounded-md:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important;
    border-color: #114376 !important;
}

/* Info section: override the slide-up transform so content stays visible */
.group.rounded-md > div + div {
    transform: translateY(0) !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
}

/* Add-to-cart area: always visible (Bagisto hides it via opacity-0 until hover) */
.group.rounded-md .action-items.opacity-0 {
    opacity: 1 !important;
}

/* Add-to-cart button: navy fill */
.group.rounded-md .secondary-button {
    background: #114376 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.group.rounded-md .secondary-button:hover {
    background: #0d3560 !important;
}

/* Price inside default card */
.group.rounded-md [v-html] span,
.group.rounded-md [v-html] .price,
.group.rounded-md [v-html] .special-price {
    color: #0F172A !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}
.group.rounded-md [v-html] del,
.group.rounded-md [v-html] .regular-price {
    font-size: 12px !important;
    color: #6B7280 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}


/* ===== MOBILE RESPONSIVE ===== */

/* ── Navbar ── */
@media (max-width: 768px) {
    /* Hide desktop location picker — mobile topbar replaces it */
    #bricko-location-picker { display: none !important; }
    /* Hide desktop RFQ/Orders nav icons labels */
    #bricko-nav-items a span.nav-label { display: none !important; }
    header .header-bottom,
    header [class*="bottom"] { padding: 8px 12px !important; flex-wrap: nowrap !important; gap: 8px !important; }
    /* Search bar full width */
    header form[action*="search"],
    header [class*="search"] { flex: 1 !important; min-width: 0 !important; max-width: 100% !important; }
}

/* ── Mobile topbar: fixed at top, hides standard header ── */
@media (max-width: 768px) {
    header { display: none !important; }
    body   { padding-top: 64px !important; }
}

/* ── Category tab strip ── */
.bmt-btn { border-radius: 0 !important; }
/* Subcategory grid — centered on desktop, 3 columns on mobile */
.bmt-tiles { justify-content: center !important; }
@media (max-width: 768px) {
    .bmt-tiles {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }
}

/* ── Banner ── */
@media (max-width: 768px) {
    .bmt-banner { flex-direction: column !important; text-align: center !important; padding: 24px 16px !important; min-height: 180px !important; }
    .bmt-banner > div:last-child { display: none !important; }
    .bmt-banner > div:first-child > div:first-child { font-size: 20px !important; }
}

/* ── Product grids ── */
@media (max-width: 768px) {
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: repeat(2,1fr) !important; gap: 10px !important;
    }
}

/* ── Bagisto product/category carousel — 2 cards visible on mobile ── */
@media (max-width: 640px) {
    /* Target the scroll container's direct children (carousel cards) */
    .scroll-smooth.scrollbar-hide > * {
        min-width: calc(47vw - 8px) !important;
        max-width: calc(47vw - 8px) !important;
    }
    /* Tighter gap so 2 cards fit comfortably */
    .scroll-smooth.scrollbar-hide {
        gap: 12px !important;
    }
}

/* ── Supplier strip ── */
@media (max-width: 768px) {
    [style*="display:flex;gap:12px;overflow-x:auto"],
    [style*="display:flex; gap:12px; overflow-x:auto"] {
        padding-bottom: 8px !important; -webkit-overflow-scrolling: touch !important;
    }
}

/* ── Cart / order detail ── */
@media (max-width: 768px) {
    [style*="grid-template-columns:1fr 360px"],
    [style*="grid-template-columns: 1fr 360px"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
    [style*="position:sticky;top:80px"],
    [style*="position: sticky; top: 80px"] { position: static !important; }
    #order-tab-btn-summary, #order-tab-btn-delivery, #order-tab-btn-items { font-size: 13px !important; padding: 12px 8px !important; }
}

/* ── Search results ── */
@media (max-width: 768px) {
    #bmt-sr-tab-products [style*="grid-template-columns:repeat(4"],
    #bmt-sr-tab-products [style*="display:grid"] { grid-template-columns: repeat(2,1fr) !important; }
    #bmt-sr-tab-suppliers [style*="grid-template-columns:repeat(4"],
    #bmt-sr-tab-suppliers [style*="display:grid"] { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── Supplier page ── */
@media (max-width: 768px) {
    [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; height: 200px !important; }
}

/* ── Brand / Consultant dashboards ── */
@media (max-width: 768px) {
    .sidebar { display: none !important; }
    .main { margin-left: 0 !important; }
    .stat-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── General ── */
@media (max-width: 768px) {
    [style*="max-width:1400px"],
    [style*="max-width: 1400px"],
    [style*="max-width:1280px"],
    [style*="max-width: 1280px"],
    [style*="max-width:1200px"],
    [style*="max-width: 1200px"] { padding-left: 12px !important; padding-right: 12px !important; }
    .desktop-only { display: none !important; }
    .mobile-full-width { width: 100% !important; }
    /* bottom nav padding */
    body { padding-bottom: 64px !important; }
}