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

/* ============ CONTAINER / SHARED PRIMITIVES (also used by the
   shared shop/checkout/account pages in resources/views/storefront-fallback) ============ */
.container { max-width: 1280px; 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: #202020; }
.view-all { font-size: 13px; font-weight: 700; color: var(--accent); }

/* ============ MAIN HEADER ============ */
.aurora-header { position: sticky; top: 0; z-index: 500; background: #FFFFFF; border-bottom: 1px solid rgba(0,0,0,0.08); }
.aurora-header-inner { max-width: 1280px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 48px); display: flex; align-items: center; gap: 28px; }

/* On the homepage (body.has-hero) the header instead floats as a card on
   top of the full-bleed hero banner directly beneath it in the DOM — see
   .aurora-hero-section below, which has no top offset of its own, so it
   renders starting at the very top of the page once the header is taken
   out of flow here. Every other page keeps the plain sticky white bar
   above, since they have no hero image behind them to float over. */
body.has-hero .aurora-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: none; padding-top: 22px; transition: padding-top 0.2s ease; }
body.has-hero .aurora-header.is-pinned { position: fixed; padding-top: 10px; }
body.has-hero .aurora-header-inner { background: rgba(255,255,255,0.98); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.16); }
.logo { display: flex; flex-direction: column; line-height: 1.15; flex-shrink: 0; }
.logo-name { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: #202020; letter-spacing: -0.03em; }
.logo span { color: var(--accent-dark); }
.logo-tagline { font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; color: rgba(32,32,32,0.45); letter-spacing: 0.02em; margin-top: 1px; }

.nav-links { display: flex; align-items: center; gap: 34px; font-size: 15px; font-weight: 600; flex: 1; }
.nav-links a { color: rgba(32,32,32,0.75); transition: color 0.15s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--accent-dark); }

.header-actions { display: flex; align-items: center; gap: 26px; margin-left: auto; }

.aurora-account-link { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #202020; white-space: nowrap; }
.aurora-account-link:hover { color: var(--accent-dark); }
.aurora-account-link .icon-glyph { display: inline-flex; align-items: center; }

.aurora-search-wrap { position: relative; }
.aurora-search-btn { display: flex; align-items: center; background: none; border: none; cursor: pointer; color: #202020; padding: 0; }
.aurora-search-btn:hover { color: var(--accent-dark); }
.aurora-search-panel { position: absolute; top: calc(100% + 14px); right: -10px; width: 280px; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.09); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); padding: 10px; z-index: 600; }
.aurora-search-panel form { display: flex; gap: 8px; }
.aurora-search-input { flex: 1; border: 1px solid rgba(0,0,0,0.15); border-radius: 20px; padding: 9px 14px; font-size: 13px; font-family: inherit; outline: none; background: #F7F7F7; transition: border-color 0.15s; }
.aurora-search-input:focus { border-color: var(--accent); }
.aurora-search-panel button[type="submit"] { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--accent); color: #FFFFFF; cursor: pointer; }

.aurora-cart-link { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #202020; white-space: nowrap; }
.aurora-cart-link:hover { color: var(--accent-dark); }
.aurora-cart-icon-wrap { position: relative; display: flex; }
.aurora-cart-icon-wrap .icon-glyph { display: inline-flex; align-items: center; }
.aurora-cart-badge { position: absolute; top: -8px; right: -10px; background: var(--accent-dark); color: #FFFFFF; font-size: 10px; font-weight: 800; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }

.aurora-hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 30px; height: 30px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; }
.aurora-hamburger span { display: block; width: 100%; height: 2px; background: #202020; border-radius: 2px; }

/* ============ OFF-CANVAS MOBILE MENU ============ */
.aurora-offcanvas-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity 0.2s ease; z-index: 9998; }
.aurora-offcanvas-backdrop.is-open { opacity: 1; visibility: visible; }

.aurora-offcanvas { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; background: #FFFFFF; z-index: 9999; transform: translateX(-100%); transition: transform 0.25s ease; display: flex; flex-direction: column; box-shadow: 2px 0 20px rgba(0,0,0,0.15); }
.aurora-offcanvas.is-open { transform: translateX(0); }

.aurora-offcanvas-search { padding: 18px 16px 12px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.aurora-offcanvas-search form { display: flex; align-items: center; border: 1px solid rgba(0,0,0,0.15); border-radius: 20px; padding: 8px 14px; gap: 8px; }
.aurora-offcanvas-search input { border: none; outline: none; flex: 1; font-size: 13px; font-family: inherit; background: transparent; }
.aurora-offcanvas-search button { border: none; background: none; cursor: pointer; font-size: 14px; }

.aurora-offcanvas-tabs { display: flex; border-bottom: 1px solid rgba(0,0,0,0.08); }
.aurora-tab { flex: 1; padding: 14px 8px; background: none; border: none; font-size: 13px; font-weight: 800; letter-spacing: 0.03em; color: rgba(32,32,32,0.45); cursor: pointer; border-bottom: 2px solid transparent; }
.aurora-tab.active { color: #202020; border-bottom-color: var(--badge-gold); }

/* [hidden] and .aurora-offcanvas-panel tie on specificity (0,0,1,0 each);
   since this stylesheet loads after the browser's UA stylesheet, source
   order alone would let display:flex here silently beat [hidden]'s
   display:none, showing both the MENU and CATEGORIES panels at once
   regardless of AuroraMenu.showTab()'s hidden-attribute toggling — same
   fix as the Nova theme this was copied from. */
.aurora-offcanvas-panel { display: none; flex-direction: column; overflow-y: auto; }
.aurora-offcanvas-panel:not([hidden]) { display: flex; }
.aurora-offcanvas-panel a { padding: 15px 20px; font-size: 14px; font-weight: 600; color: #202020; border-bottom: 1px solid rgba(0,0,0,0.06); }
.aurora-offcanvas-panel a.active { color: var(--badge-gold); font-weight: 800; }

.aurora-offcanvas-close { position: absolute; top: 10px; right: -42px; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; border: none; font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); display: none; }

/* ============ HERO SLIDER (bigger, arrow-driven — need2buybd-style) ============ */
/* Full-bleed — spans the whole viewport width, unlike the container-boxed
   header above it, matching the reference design's edge-to-edge banner. */
.aurora-hero-section { width: 100%; }
.aurora-hero-box { position: relative; width: 100%; aspect-ratio: 2.35 / 1; overflow: hidden; background: #F5EFDC; cursor: grab; touch-action: pan-y; }
.aurora-hero-box:active { cursor: grabbing; }
.aurora-hero-track { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease; }
.aurora-hero-slide { flex: 0 0 100%; height: 100%; display: block; -webkit-user-drag: none; }
.aurora-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; }

.aurora-hero-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); box-shadow: 0 2px 10px rgba(0,0,0,0.18); font-size: 24px; font-weight: 700; color: #202020; cursor: pointer; z-index: 6; transition: background 0.15s ease, color 0.15s ease; }
.aurora-hero-arrow:hover { background: var(--accent); color: #FFFFFF; }
.aurora-hero-arrow-prev { left: 16px; }
.aurora-hero-arrow-next { right: 16px; }

.aurora-hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.aurora-hero-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; }
.aurora-hero-dot.active { background: #FFFFFF; }

/* ============ SHOP BY CATEGORY (boxed cards — need2buybd-style) ============ */
.aurora-cat-section { padding-top: 24px; }
.aurora-cat-strip-wrap { position: relative; }
.aurora-cat-strip { display: flex; gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 12px; scroll-behavior: smooth; }
.aurora-cat-strip::-webkit-scrollbar { display: none; }

/* Desktop-only scroll affordance — mobile already has natural touch
   swipe on the strip, so these are hidden below the breakpoint rather
   than just relying on hover, which touch devices can't trigger. */
.aurora-cat-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); background: #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.12); font-size: 20px; font-weight: 700; color: #202020; cursor: pointer; z-index: 5; }
.aurora-cat-arrow:hover { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.aurora-cat-arrow-prev { left: -18px; }
.aurora-cat-arrow-next { right: -18px; }

.aurora-cat-card { flex-shrink: 0; width: 176px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.09); border-radius: 14px; padding: 26px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.aurora-cat-card:hover { border-color: var(--accent); box-shadow: 0 8px 20px rgba(0,0,0,0.09); transform: translateY(-2px); }
.aurora-cat-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; }
.aurora-cat-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.aurora-cat-label { font-size: 13px; font-weight: 700; color: #202020; line-height: 1.3; display: block; }

/* ============ SECTION HEADINGS (Featured Products / All Our Products) ============ */
.aurora-section { padding: 34px 0 8px; }
.aurora-section-heading { text-align: center; margin-bottom: 22px; }
.aurora-section-heading .eyebrow { display: block; font-size: 12px; font-weight: 800; color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.aurora-section-heading h2 { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; color: #202020; margin-bottom: 6px; }
.aurora-section-heading p { font-size: 13px; color: rgba(32,32,32,0.5); }

/* ============ PRODUCT GRID ============ */
.aurora-product-grid, .product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

/* ============ PRODUCT CARD ============ */
.aurora-card { position: relative; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.09); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.15s ease; }
.aurora-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

.aurora-badge { position: absolute; top: 8px; left: 8px; z-index: 5; font-size: 11px; font-weight: 800; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; text-align: center; line-height: 1.1; }
.aurora-badge-hot { background: var(--badge-hot); }
.aurora-badge-discount { background: var(--badge-gold); color: #202020; }
.aurora-badge-soldout { background: #3a3a3a; font-size: 9px; }

.aurora-card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #FFFFFF; overflow: hidden; padding: 14px; }
.aurora-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.2s ease; }
.aurora-card:hover .aurora-card-img img { transform: scale(1.04); }

.aurora-card-body { padding: 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.aurora-card-name { font-size: 13px; font-weight: 700; color: #202020; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.aurora-card-cat { font-size: 11px; color: rgba(32,32,32,0.45); }
.aurora-card-price { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.aurora-card-price .price-now { font-size: 15px; font-weight: 800; color: #202020; }
.aurora-card-price .price-old { font-size: 12px; color: rgba(32,32,32,0.4); text-decoration: line-through; }
.aurora-card-meta { font-size: 11px; color: rgba(32,32,32,0.5); margin-bottom: 6px; }

.aurora-card-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.aurora-card-form { margin: 0; }
.aurora-btn { display: block; width: 100%; text-align: center; padding: 9px 8px; border: none; border-radius: 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; font-family: inherit; }
.aurora-btn-order { background: var(--accent-dark); color: #FFFFFF; }
.aurora-btn-order:hover { filter: brightness(0.94); }
.aurora-btn-cart { background: var(--accent); color: #FFFFFF; }
.aurora-btn-cart:hover { filter: brightness(0.94); }

.aurora-view-all-wrap { text-align: center; margin-top: 24px; }
.aurora-view-all-btn { display: inline-block; padding: 12px 32px; border-radius: 4px; background: var(--accent); color: #FFFFFF; font-weight: 800; font-size: 13px; }
.aurora-view-all-btn:hover { filter: brightness(0.94); }

/* ============ PROMO BANNER ============ */
/* `.container` sets `margin: 0 auto` and side padding; the shorthands here
   would clobber both, leaving the banner uncentered and narrower than every
   other section. Keep `auto` so it centres, and match the 0 side padding
   that `.aurora-section` uses, so the banner spans the same column. */
.aurora-promo-section { margin: 20px auto; padding: 0; }
.aurora-promo-box { width: 100%; border-radius: 8px; overflow: hidden; background: #F2F2F0; }
.aurora-promo-box img { width: 100%; display: block; }

/* ============ FLOATING WHATSAPP ============ */
.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: 9990; cursor: pointer; }

/* ============ FOOTER ============ */
.aurora-footer { background: #202020; color: rgba(255,255,255,0.85); margin-top: 44px; }
.aurora-footer-inner { max-width: 1280px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px); display: flex; flex-direction: column; gap: 18px; }
.aurora-footer-links { display: flex; flex-wrap: wrap; gap: 16px 24px; font-size: 13px; font-weight: 600; }
.aurora-footer-links a:hover { color: var(--badge-gold); }
.aurora-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.5); border-top: 1px solid rgba(255,255,255,0.12); padding-top: 16px; }
.aurora-footer-bottom .logo { display: block; color: #FFFFFF; font-size: 20px; }
.aurora-footer-bottom .logo span { color: var(--badge-gold); }

/* ============ SHARED PAGES: shop / product / checkout / account / auth
   (resources/views/storefront-fallback/*.blade.php) — these reuse the
   same class names across every theme; most colour comes for free from
   the --accent/--accent-dark vars already used inline in those files. ============ */
.shop-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.shop-filters { width: 100%; max-width: 210px; flex-shrink: 0; font-size: 13px; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.09); border-radius: 6px; padding: 16px; }
.shop-filter-label { font-weight: 800; margin-bottom: 10px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.03em; }
.shop-filter-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; color: rgba(32,32,32,0.7); }
.shop-filter-group:last-child { margin-bottom: 0; }
.shop-filter-group a.active { color: var(--accent-dark); font-weight: 800; }
.shop-product-grid { flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.account-layout { display: flex; min-height: 80vh; }
.account-sidebar { width: 260px; flex-shrink: 0; background: #FFFFFF; border-right: 1px solid rgba(0,0,0,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(32,32,32,0.6); }
.account-nav-link.active { background: #F8F8F7; border-left: 3px solid var(--accent-dark); color: var(--accent-dark); }

.wishlist-heart { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: rgba(32,32,32,0.4); cursor: pointer; z-index: 5; }
.wishlist-heart.active { color: var(--badge-hot); border-color: var(--badge-hot); }

.quick-buy-btn { position: absolute; right: 8px; bottom: 8px; z-index: 6; margin: 0; }
.quick-buy-btn button { width: 32px; height: 32px; border: none; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; color: #202020; }
.quick-buy-btn button:hover { background: var(--accent); color: #FFFFFF; }

.bottom-nav { display: none; }

/* ============ TABLET (grid columns step down before mobile) ============ */
@media (max-width: 1100px) {
    .aurora-product-grid, .product-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
    .aurora-product-grid, .product-grid { grid-template-columns: repeat(3, 1fr); }
    .nav-links { gap: 14px; font-size: 13px; }
}

/* ============ MOBILE ============ */
@media (max-width: 768px) {
    .aurora-header-inner { padding: 10px 16px; gap: 12px; }
    .nav-links { display: none; }
    .aurora-hamburger { display: flex; }
    .logo-name { font-size: 18px; }
    .logo-tagline { font-size: 9px; }
    .header-actions { gap: 14px; }
    .aurora-account-link { display: none; }
    .aurora-cart-amount { display: none; }
    .aurora-search-panel { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; }

    /* Scoped to .is-open, not just the breakpoint: the drawer's own
       translateX(-100%) only clears ITS width (300px) when closed, but
       this button pokes out 42px beyond that (right:-42px, see above),
       so it lands back on-screen at x≈42px instead of off-screen —
       staying visible over the header even while "closed" — same fix
       as the Nova theme this was copied from. */
    .aurora-offcanvas.is-open .aurora-offcanvas-close { display: flex; align-items: center; justify-content: center; }

    .aurora-hero-box { aspect-ratio: 4 / 3; }
    .aurora-hero-arrow { width: 34px; height: 34px; font-size: 18px; }
    .aurora-hero-arrow-prev { left: 8px; }
    .aurora-hero-arrow-next { right: 8px; }

    .aurora-cat-arrow { display: none; }
    .aurora-cat-card { width: 128px; padding: 18px 10px; gap: 8px; border-radius: 12px; }
    .aurora-cat-icon { width: 52px; height: 52px; }
    .aurora-cat-label { font-size: 11px; }

    .aurora-section { padding: 24px 0 4px; }
    .aurora-section-heading h2 { font-size: 20px; }

    .aurora-product-grid, .product-grid, .shop-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    .aurora-card-name { font-size: 12px; }
    .aurora-btn { font-size: 11px; padding: 8px 6px; }

    .wa-float { bottom: 20px; right: 16px; width: 42px; height: 42px; font-size: 12px; }

    .shop-layout { flex-direction: column; }
    .shop-filters { max-width: none; padding: 12px; }
    .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(0,0,0,0.15); border-radius: 20px; font-size: 12px; }
    .shop-filter-group a.active { border-color: var(--accent-dark); }

    .account-layout { flex-direction: column; min-height: 0; }
    .account-sidebar { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid rgba(0,0,0,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-dark); background: #FFFFFF; }

    .aurora-footer-inner { padding: 24px 16px; }
    .aurora-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}