* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #FFFFFF; color: #0B0B0F; font-family: 'Manrope', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.font-heading { font-family: 'Space Grotesk', sans-serif; }

/* Top Announcement Bar */
.announcement-bar { background: var(--accent); color: #FFFFFF; text-align: center; padding: 8px 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }

/* Info Features Bar */
.info-bar { background: #F3F3F1; padding: 8px 16px; display: flex; justify-content: center; align-items: center; gap: 24px; font-size: 12px; font-weight: 600; color: rgba(11,11,15,0.7); border-bottom: 1px solid rgba(11,11,15,0.06); flex-wrap: wrap; }

/* Main Header Desktop */
.header-main { position: sticky; top: 0; z-index: 500; background: #FFFFFF; border-bottom: 1px solid rgba(11,11,15,0.08); padding: 14px clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header-top-row { display: flex; align-items: center; gap: 32px; }
.logo { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: #0B0B0F; letter-spacing: -0.03em; }
.logo span { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 600; }
.nav-links a { color: rgba(11,11,15,0.65); transition: color 0.15s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }

/* Search + Cart share the right-hand cluster (see layouts/app.blade.php). */
.header-actions { display: flex; align-items: center; gap: 16px; }
.search-container { position: relative; }
.search-container form { display: flex; }
.search-input { border: 1px solid rgba(11,11,15,0.15); padding: 7px 14px; font-size: 13px; border-radius: 4px; font-family: inherit; outline: none; width: 180px; transition: border-color 0.15s; }
.search-input:focus { border-color: var(--accent); }

.cart-btn { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; }
.cart-badge { background: var(--accent); color: #FFFFFF; font-size: 11px; font-weight: 800; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }

/* The shared demo hero banners (public/images/demo/banner-hero-*.svg) were
   widened to a taller 1200x460 canvas for the marketplace theme's bigger
   hero. This theme's hero-box is narrower/shorter than that native canvas
   at most sizes, so object-fit:cover has to crop — anchor to the top-left
   so the crop trims from the right/bottom instead of eating into the
   left-anchored, top-weighted headline/CTA the banners use. */
.hero-box img { object-position: left top; }

/* Floating WhatsApp Action */
.wa-float { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; background: #25D366; color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; box-shadow: 0 4px 14px rgba(37,211,102,0.4); z-index: 9999; cursor: pointer; }

/* General Container Grid */
.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; color: #0B0B0F; }
.view-all { font-size: 13px; font-weight: 700; color: var(--accent); }

/* Desktop Category Grid */
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.category-card { display: block; }
.category-img-box { background: #F8F8F7; border: 1px solid rgba(11,11,15,0.08); border-radius: 12px; height: 180px; overflow: hidden; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; padding: 16px; }
.category-title { font-size: 14px; font-weight: 700; color: #0B0B0F; }

/* Desktop Product Grid */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Shop / All Products page — shared between both themes (see
   resources/views/storefront-fallback/shop.blade.php). Desktop: a
   vertical filter sidebar beside a 3-column product grid. */
.shop-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.shop-filters { width: 100%; max-width: 200px; flex-shrink: 0; font-size: 13px; background: #FFFFFF; border: 1px solid rgba(11,11,15,0.08); border-radius: 6px; padding: 16px; }
.shop-filter-label { font-weight: 700; margin-bottom: 10px; }
.shop-filter-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; color: rgba(11,11,15,0.7); }
.shop-filter-group:last-child { margin-bottom: 0; }
.shop-filter-group a.active { color: var(--accent); font-weight: 700; }
.shop-product-grid { flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Account dashboard — shared between both themes (see
   resources/views/storefront-fallback/account/dashboard.blade.php).
   Desktop: a fixed 260px nav column beside the order list. */
.account-layout { display: flex; min-height: 80vh; }
.account-sidebar { width: 260px; flex-shrink: 0; background: #FFFFFF; border-right: 1px solid rgba(11,11,15,0.08); padding: 32px 0; display: flex; flex-direction: column; gap: 12px; }
.account-nav-link { padding: 11px 24px; font-size: 14px; font-weight: 700; color: rgba(11,11,15,0.6); }
.account-nav-link.active { background: #F8F8F7; border-left: 3px solid var(--accent); color: var(--accent); }

/* Mobile Bottom Nav Bar */
.bottom-nav { display: none; }

/* Mobile Responsive Overrides */
@media (max-width: 768px) {
    body { padding-bottom: 72px; }
    .info-bar { font-size: 11px; gap: 8px 16px; padding: 6px 12px; justify-content: center; text-align: center; }

    /* Logo + Cart need to sit on the same row (logo left, cart right),
       with Search alone on its own full-width row below. Desktop nests
       them as header-top-row{logo,nav} + header-actions{search,cart} so
       search+cart form one right-hand cluster (see the non-mobile rules
       above) — regrouping cart with the logo instead would need it to
       move to a different parent, which plain CSS can't do. `display:
       contents` on both wrappers removes them from the box tree without
       touching the DOM, so logo/nav/search/cart become direct flex
       children of .header-main here and can be freely reordered. */
    .header-main { padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .header-top-row, .header-actions { display: contents; }
    .nav-links { display: none; }

    .logo { order: 1; }
    .cart-btn { order: 2; margin-left: auto; }
    .search-container { order: 3; flex-basis: 100%; width: 100%; margin: 0; }
    .search-input { width: 100%; border-radius: 20px; background: #F5F5F5; border: none; padding: 10px 16px; font-size: 13px; }

    .wa-float { bottom: 80px; right: 16px; width: 42px; height: 42px; font-size: 12px; z-index: 9999; }

    /* Bottom Fixed Mobile Nav Bar */
    .bottom-nav { display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; height: 60px !important; background: #FFFFFF !important; border-top: 1px solid rgba(11,11,15,0.1) !important; justify-content: space-around !important; align-items: center !important; z-index: 99999 !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important; }
    .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; cursor: pointer; color: rgba(11,11,15,0.5); position: relative; text-decoration: none; }
    .bottom-nav-item.active { color: var(--accent); }
    .bottom-nav-item label { font-size: 10px; font-weight: 700; }

    /* Mobile Category Horizontal Scroll */
    .category-grid { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px !important; padding: 4px 0 12px 0 !important; width: 100%; }
    .category-card { flex-shrink: 0 !important; width: 68px !important; text-align: center; }
    .category-img-box { width: 60px !important; height: 60px !important; border-radius: 14px !important; background: #F5F5F5 !important; border: none !important; margin: 0 auto 6px !important; padding: 10px !important; }
    .category-title { font-size: 11px !important; font-weight: 600 !important; width: 68px !important; text-align: center !important; line-height: 1.2; }

    /* Mobile Product 2-Column Grid */
    .product-grid, .shop-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .product-card-img, .mobile-card-img { height: 140px !important; padding: 8px !important; }

    /* Shop page filters: the desktop vertical sidebar (15+ categories
       plus price ranges) would otherwise dump a huge always-expanded
       list above the product grid on a phone. Collapse each group into
       a single horizontally-scrollable row of chips instead. */
    .shop-layout { flex-direction: column; }
    .shop-filters { max-width: none; padding: 12px; }
    .shop-filter-label { font-size: 12px; margin-bottom: 6px; }
    .shop-filter-group { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; margin-bottom: 14px; padding-bottom: 2px; }
    .shop-filter-group::-webkit-scrollbar { display: none; }
    .shop-filter-group a { flex-shrink: 0; white-space: nowrap; padding: 6px 12px; border: 1px solid rgba(11,11,15,0.15); border-radius: 20px; font-size: 12px; }
    .shop-filter-group a.active { border-color: var(--accent); }

    /* Account dashboard: a fixed 260px sidebar with no mobile handling
       would either overflow the viewport or squeeze the order list into
       a sliver. Collapse it to the same horizontal chip-strip pattern
       used for shop filters above. */
    .account-layout { flex-direction: column; min-height: 0; }
    .account-sidebar { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid rgba(11,11,15,0.08); padding: 12px; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .account-sidebar::-webkit-scrollbar { display: none; }
    .account-sidebar-title { display: none; }
    .account-nav-link { flex-shrink: 0; white-space: nowrap; padding: 8px 14px; border-radius: 20px; background: #F5F5F5; }
    .account-nav-link.active { border-left: none; border: 1px solid var(--accent); background: #FFFFFF; }

    /* Full-bleed: break the hero out to the screen edges instead of
       sitting inset inside .container like the rest of the page — the
       16px gutter here matches .container's own mobile padding exactly
       (see the non-mobile .container rule; its clamp(16px,4vw,48px)
       resolves to 16px at every mobile width), so this cancels it out
       precisely rather than guessing a value. */
    /* .hero-box's own inline width:100% (see home.blade.php) resolves
       against .hero-section's now-widened box, so it fills edge-to-edge
       automatically without needing a width override here. */
    .hero-section { margin-left: -16px; margin-right: -16px; }
    .hero-box { height: auto !important; aspect-ratio: 2/1 !important; border-radius: 0 !important; border: none !important; }
    .promo-box { height: auto !important; aspect-ratio: 3/1 !important; border-radius: 8px !important; }
}