/* Paraiba Mart -- base theme
   Layout inspired by common Bangladeshi e-commerce sites: sidebar category
   menu with flyout submenus, horizontal product-card sections, sticky
   header with search + account + cart. Swap the CSS custom properties
   below to re-theme the whole site. */

:root {
    --color-primary: #1a56db;
    --color-primary-dark: #1543a8;
    --color-accent: #f97316;
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-text: #1f2937;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-bg: #f9fafb;
    --color-surface: #ffffff;
    --radius: 8px;
    --header-height: 64px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Hind Siliguri', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
    max-width: 2400px;
    margin: 0 auto;
    padding: 0 16px;
}

img { max-width: 100%; display: block; }

/* ---------- Top bar ---------- */
.topbar {
    background: var(--color-primary-dark);
    color: #fff;
    font-size: 13px;
}
.topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
}
.topbar__links a { color: #fff; margin-left: 16px; opacity: 0.9; }
.topbar__links a:hover { opacity: 1; }
.topbar__help { font-size: 14px; font-weight: 600; }
.topbar__socials { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; }
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Hind Siliguri', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1;
    opacity: 1;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.social-icon:hover { transform: translateY(-1px); filter: brightness(1.1); }
.social-icon--fb { background: #1877f2; }
.social-icon--ig { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4); }
.social-icon--pin { background: #e60023; }
.social-icon--tiktok { background: #111827; }

/* ---------- Header ---------- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 16px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px 4px 0;
    color: var(--color-text);
}
.logo__icon { height: 40px; width: auto; display: block; }
.logo__text {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
}
.search-form {
    flex: 1;
    display: flex;
    max-width: 640px;
}
.search-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: 14px;
}
.search-form button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0 18px;
    border-radius: 0 var(--radius) var(--radius) 0;
    cursor: pointer;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.header-action-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: var(--radius);
    white-space: nowrap;
}
.header-action-btn:hover { background: var(--color-bg); text-decoration: none; }
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.cart-badge {
    background: var(--color-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
}

/* dropdowns (account / mini-cart) */
.dropdown { position: relative; }
.dropdown__menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    min-width: 200px;
    padding: 8px;
    z-index: 60;
}
.dropdown__menu--cart { min-width: 300px; }
.dropdown:hover .dropdown__menu,
.dropdown:focus-within .dropdown__menu { display: block; }
.dropdown__menu a, .dropdown__menu .link-btn {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: var(--color-text);
}
.dropdown__menu a:hover, .dropdown__menu .link-btn:hover { background: var(--color-bg); text-decoration: none; }

/* mini cart */
.mini-cart h4 { margin: 4px 8px 8px; }
.mini-cart__lines { list-style: none; margin: 0; padding: 0; }
.mini-cart__lines li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
}
.mini-cart__name { flex: 1; }
.mini-cart__subtotal {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    font-size: 14px;
}
.mini-cart__empty { padding: 12px 8px; color: var(--color-muted); }

/* ---------- Mobile off-canvas drawer menu (hamburger) ---------- */
.mobile-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    z-index: 200;
}
.mobile-drawer-overlay.is-open { display: block; }

.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 340px;
    background: var(--color-surface);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
}
.mobile-drawer.is-open { transform: translateX(0); }

.mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #111827;
    color: #fff;
    padding: 14px 16px;
    flex-shrink: 0;
}
.mobile-drawer__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mobile-drawer__brand-icon { height: 28px; width: auto; display: block; }
.mobile-drawer__brand-name {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-drawer__menu-label { font-size: 17px; font-weight: 700; flex-shrink: 0; }
.mobile-drawer__close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
}

.mobile-drawer__tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.mobile-drawer__tab {
    flex: 1;
    background: none;
    border: none;
    padding: 14px 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.mobile-drawer__tab.is-active {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.mobile-drawer__body { flex: 1; overflow-y: auto; }
.mobile-drawer__panel { display: none; }
.mobile-drawer__panel.is-active { display: block; }

.mobile-drawer__list { list-style: none; margin: 0; padding: 0; }
.mobile-drawer__list li { border-bottom: 1px solid var(--color-border); }
.mobile-drawer__list li.mobile-drawer__account-name { padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--color-text); }
.mobile-drawer__list a {
    display: block;
    padding: 14px 20px;
    font-size: 15px;
    color: var(--color-text);
}
.mobile-drawer__list a:hover { background: var(--color-bg); text-decoration: none; }
.mobile-drawer__list-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 20px;
    font-size: 15px;
    color: var(--color-danger);
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-drawer__list-btn:hover { background: var(--color-bg); }
.mobile-drawer__logout-form { margin: 0; }

.mobile-drawer__cat-row {
    display: flex;
    align-items: stretch;
    padding: 0;
}
.mobile-drawer__cat-row a { flex: 1; }
.mobile-drawer__cat-row--deals a { color: var(--color-accent); font-weight: 700; }
.mobile-drawer__cat-arrow {
    background: none;
    border: none;
    border-left: 1px solid var(--color-border);
    width: 44px;
    flex-shrink: 0;
    font-size: 16px;
    color: var(--color-muted);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.mobile-drawer__cat-arrow.is-open { transform: rotate(180deg); }

.mobile-drawer__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.mobile-drawer__sub.is-open { display: block; }
.mobile-drawer__sub a { padding: 12px 20px 12px 32px; font-size: 14px; color: var(--color-muted); }
.mobile-drawer__sub a:hover { color: var(--color-primary); }

.mobile-drawer__view-all {
    display: block;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
}
.mobile-drawer__empty { padding: 14px 20px; color: var(--color-muted); font-size: 14px; border-bottom: none; }

.mobile-drawer__account { border-top: 8px solid var(--color-bg); }
.mobile-drawer__account-heading {
    margin: 0;
    padding: 12px 20px 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
}

/* Drawer is only reachable via the hamburger button, which itself is
   hidden above 640px -- see the mobile-nav-toggle rule in that media
   query below -- so no extra breakpoint guard is needed here. */

/* ---------- Main nav / category menu ---------- */
.main-nav { background: var(--color-primary); }
.main-nav__inner { display: flex; align-items: center; gap: 24px; }
.main-nav__links { list-style: none; display: flex; justify-content: center; flex: 1; gap: 4px; margin: 0; padding: 0; }
.main-nav__links a {
    display: block;
    color: #fff;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
}
.main-nav__links a:hover { background: rgba(255,255,255,0.12); text-decoration: none; }

.category-menu { position: relative; }
.category-menu__toggle {
    background: var(--color-primary-dark);
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.category-menu__panel {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 55;
}
.category-menu.is-open .category-menu__panel,
.category-menu:hover .category-menu__panel { display: flex; }

.sidebar-categories { display: flex; }
.sidebar-categories__list {
    width: 260px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.sidebar-categories__heading {
    margin: 0;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
}
.sidebar-categories__list ul { list-style: none; margin: 0; padding: 6px 0; max-height: 420px; overflow-y: auto; }
.sidebar-categories__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}
.sidebar-categories__item a { display: block; flex: 1; padding: 9px 0; color: var(--color-text); font-size: 14px; }
.sidebar-categories__item:hover { background: var(--color-bg); }
.sidebar-categories__item:hover a { text-decoration: none; color: var(--color-primary); }
.sidebar-categories__arrow { color: var(--color-muted); }
.sidebar-categories__view-all {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border-top: 1px solid var(--color-border);
}
.sidebar-categories__empty { padding: 12px 16px; color: var(--color-muted); font-size: 13px; }

.sidebar-categories__flyout {
    display: none;
    width: 480px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 20px;
}
.sidebar-categories__flyout.is-visible,
.sidebar-categories__flyout:hover { display: block; }
.sidebar-categories__flyout h3 { margin: 0 0 12px; font-size: 16px; }
.sidebar-categories__flyout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 24px;
}
.sidebar-categories__flyout-grid a { font-size: 14px; color: var(--color-text); }
.sidebar-categories__flyout-grid a:hover { color: var(--color-primary); }

/* ---------- Messages ---------- */
.messages { margin: 16px 0; }
.message { padding: 10px 16px; border-radius: var(--radius); margin-bottom: 8px; font-size: 14px; }
.message--success { background: #dcfce7; color: #166534; }
.message--error { background: #fee2e2; color: #991b1b; }
.message--warning { background: #fef3c7; color: #92400e; }
.message--info { background: #dbeafe; color: #1e40af; }

/* ---------- Hero / homepage ---------- */
.hero {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    padding: 48px 32px;
    border-radius: var(--radius);
    margin: 24px 0;
    text-align: center;
}
.hero h1 { margin: 0 0 8px; font-size: 32px; }
.hero p { margin: 0; opacity: 0.9; }

/* ---------- Homepage banner carousel (bdshop-style "story" row) ----------
   A row of same-sized portrait cards that scrolls continuously and
   automatically from right to left, pausing while the mouse is over it --
   PLUS two arrow buttons (hidden until hover, same treatment as the
   product photo gallery's arrows below) so a customer can jump straight
   back to a banner that already scrolled past instead of waiting for the
   full loop to come around again. The track's content is duplicated once
   (.banner-carousel__group appears twice) so the loop is seamless. This is
   driven entirely by JS (main.js sets the track's `transform` every frame)
   rather than a CSS animation, so a manual arrow click and the constant
   auto-scroll both move the same position value without fighting each
   other. */
.banner-carousel { position: relative; margin: 24px 0; overflow: hidden; }
.banner-carousel__track { display: flex; width: max-content; will-change: transform; }
.banner-carousel__group { display: flex; gap: 12px; padding-right: 12px; flex: 0 0 auto; }
.banner-carousel__item {
    flex: 0 0 auto;
    width: clamp(140px, 18vw, 220px);
    /* Same 9:16 shape as the mobile cards (see the @media block below) --
       one uploaded banner image now shows in full on both laptop and
       phone, with nothing cropped off either version. */
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.banner-carousel__item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 1;
}
.banner-carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.banner-carousel__item:hover img { transform: scale(1.08); }
.banner-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #1f2937;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.banner-carousel__arrow:hover { opacity: 1; background: rgba(255, 255, 255, 0.85); }
.banner-carousel__arrow--prev { left: 10px; }
.banner-carousel__arrow--next { right: 10px; }
/* Same "stays hidden until you hover" treatment as the product photo
   gallery arrows -- only on hover-capable pointers (mouse/trackpad).
   Touchscreens keep them tappable at all times since there's no hover
   gesture to reveal them with there. */
@media (hover: hover) and (pointer: fine) {
    .banner-carousel__arrow { opacity: 0; }
    .banner-carousel:hover .banner-carousel__arrow { opacity: 0.85; }
    .banner-carousel__arrow:hover { opacity: 1; }
}

/* On phones the carousel keeps the SAME auto-scroll mechanism as desktop
   (main.js drives `transform` every frame -- overflow stays hidden, the
   track stays width:max-content, nothing here turns that off), just with:
   card shape/size matched to bdshop's own mobile cards instead of the
   (shorter) desktop shape, no arrow buttons, and a finger-drag added in
   main.js that nudges the same shared `position` the auto-scroll uses --
   so dragging and the constant auto-scroll can't fight each other, same
   principle as the desktop arrows. */
@media (max-width: 640px) {
    /* NOTE: this can't be `width: calc(50% - 6px)` / a plain percentage.
       The item's parent (.banner-carousel__group) sits inside
       .banner-carousel__track, which is `width: max-content` (shrink-to-fit)
       so the auto-scroll loop can work -- so the group has no real width of
       its own to be a percentage OF (the classic "percentage of an
       auto-sized parent" problem). That's what blew the card up to ~1300px
       before. Sizing from the viewport instead sidesteps it entirely: two
       cards need to fill (100vw - 32px for .container's 16px side padding -
       12px gap between them), so each one is (100vw - 44px) / 2. The
       aspect-ratio itself (9:16) is already set in the base
       .banner-carousel__item rule above, same for phone and laptop. */
    .banner-carousel__item {
        width: calc(50vw - 22px);
    }
    .banner-carousel__arrow { display: none; }
}

/* ---------- Featured categories grid ---------- */
.featured-categories { margin: 32px 0; }
.featured-categories__title { margin: 0 0 16px; font-size: 20px; text-align: center; }
.featured-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
}
.featured-categories__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    text-align: center;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.featured-categories__card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
}
.featured-categories__card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.featured-categories__placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}
.featured-categories__name { font-size: 13px; font-weight: 500; }

.home-section { margin: 32px 0; }
.home-section__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.home-section__header h2 { margin: 0; font-size: 20px; }
/* Featured / Trending / Top-selling sections get an eye-catching centered
   heading (title with decorative fading lines on each side, "See More"
   centered beneath) instead of the plain left-aligned "title + See More"
   row used for a normal by-category section. */
.home-section__header--centered {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.home-section__header--centered h2 {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 22px;
}
.home-section__header--centered h2::before,
.home-section__header--centered h2::after {
    content: '';
    width: 40px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-primary, #2563eb));
}
.home-section__header--centered h2::after { background: linear-gradient(to left, transparent, var(--color-primary, #2563eb)); }
.see-more { font-size: 14px; font-weight: 600; }

/* ---------- Product grid & card ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.product-grid--scroll {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 8px;
}
.product-grid--scroll .product-card { flex: 0 0 200px; width: 200px; min-width: 200px; }

.product-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.product-card__image-link { position: relative; display: block; aspect-ratio: 1 / 1; background: #f3f4f6; }
.product-card__image-link img { width: 100%; height: 100%; object-fit: contain; }
.product-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-muted); font-size: 13px; background: #f3f4f6;
}
.badge {
    position: absolute; top: 8px; left: 8px;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
    color: #fff; z-index: 2;
}
.badge--discount { background: var(--color-accent); }
.badge--save { background: #ecfdf5; color: var(--color-success); position: static; display: inline-block; margin-left: 8px; }

.product-card__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__stock { font-size: 12px; color: var(--color-success); }
.product-card__stock--out { color: var(--color-danger); }
.product-card__name { color: var(--color-text); font-size: 14px; font-weight: 500; flex: 1; }
.product-card__name:hover { color: var(--color-primary); }
.product-card__price { display: flex; align-items: baseline; gap: 8px; }

.price { font-weight: 700; color: var(--color-text); }
.price--large { font-size: 28px; }
.price--strike { text-decoration: line-through; color: var(--color-muted); font-weight: 400; font-size: 14px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--radius);
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--secondary { background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn--small { padding: 6px 10px; font-size: 12px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.link-btn { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: 13px; padding: 0; }

/* ---------- Breadcrumb / page title ---------- */
.breadcrumb { font-size: 13px; color: var(--color-muted); margin: 16px 0 8px; }
.breadcrumb a { color: var(--color-muted); }
.page-title { font-size: 24px; margin: 0 0 16px; }

/* ---------- Product list toolbar / pagination ---------- */
.product-list-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; font-size: 14px; color: var(--color-muted);
}
.sort-form select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--color-border); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 24px 0; }
.empty-state { text-align: center; padding: 48px 16px; color: var(--color-muted); }
.empty-state__hint { font-size: 13px; }
.seo-text { margin-top: 32px; color: var(--color-muted); font-size: 14px; }

/* ---------- Product detail ---------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 16px 0 32px; }
.product-detail__gallery { max-width: 460px; margin-left: 48px; }
.product-gallery { position: relative; touch-action: pan-y; user-select: none; overflow: hidden; border-radius: var(--radius); }
.product-gallery__track { display: flex; width: 100%; will-change: transform; }
.product-gallery__slide { flex: 0 0 100%; width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #f3f4f6; cursor: grab; }
.product-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #1f2937;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.product-gallery__arrow:hover { opacity: 1; background: rgba(255, 255, 255, 0.85); }
.product-gallery__arrow--prev { left: 10px; }
.product-gallery__arrow--next { right: 10px; }
.product-gallery__zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: opacity 0.15s ease, background 0.15s ease;
}
.product-gallery__zoom:hover { background: #fff; }
/* On mice/trackpads (hover-capable pointers) the arrows and zoom icon stay
   fully hidden until the cursor is over the photo, like othoba.com. On
   touchscreens (no hover) they stay tappable at all times, since there's no
   hover gesture to reveal them with. */
@media (hover: hover) and (pointer: fine) {
    .product-gallery__arrow, .product-gallery__zoom { opacity: 0; }
    .product-gallery:hover .product-gallery__arrow,
    .product-gallery:hover .product-gallery__zoom { opacity: 1; }
}
.product-detail__thumbs { display: flex; gap: 8px; margin-top: 8px; }
.product-detail__thumb { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; background: #f3f4f6; }
.product-detail__thumb.is-active { border-color: var(--color-primary, #2563eb); border-width: 2px; }

/* ---------- Product photo zoom / lightbox ---------- */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(17, 17, 17, 0.96);
    flex-direction: column;
}
.gallery-lightbox.is-open { display: flex; }
.gallery-lightbox__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: #fff;
    flex: 0 0 auto;
}
.gallery-lightbox__counter { font-size: 15px; }
.gallery-lightbox__top-actions { display: flex; gap: 12px; }
.gallery-lightbox__icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.gallery-lightbox__icon-btn:hover { background: rgba(255, 255, 255, 0.25); }
.gallery-lightbox__stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 70px;
    overflow: hidden;
}
.gallery-lightbox__image { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.gallery-lightbox__image.is-zoomed-in { cursor: grab; }
.gallery-lightbox__image.is-zoomed-in.is-panning { cursor: grabbing; }
.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    z-index: 1;
}
.gallery-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.gallery-lightbox__nav--prev { left: 20px; }
.gallery-lightbox__nav--next { right: 20px; }
.gallery-lightbox__caption {
    text-align: center;
    color: #d1d5db;
    font-size: 14px;
    margin: 8px 0 4px;
    padding: 0 20px;
    flex: 0 0 auto;
}
.gallery-lightbox__thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 20px 20px;
    overflow-x: auto;
    flex: 0 0 auto;
}
.gallery-lightbox__thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #262626;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    flex: 0 0 auto;
    opacity: 0.7;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gallery-lightbox__thumb:hover { opacity: 1; }
.gallery-lightbox__thumb.is-active { border-color: #fff; opacity: 1; }
@media (max-width: 640px) {
    .gallery-lightbox__stage { padding: 0 44px; }
    .gallery-lightbox__nav { width: 36px; height: 36px; }
}
.product-detail__brand { color: var(--color-muted); font-size: 13px; margin: 0 0 4px; }
.product-detail__title { font-size: 22px; margin: 0 0 8px; }
.product-detail__sku, .product-detail__reviews { color: var(--color-muted); font-size: 13px; margin: 0 0 4px; }
.product-detail__price { margin: 16px 0; }
.product-detail__stock { color: var(--color-success); font-weight: 600; margin-bottom: 16px; }
.product-detail__stock--out { color: var(--color-danger); }
.product-detail__actions { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.product-detail__actions input[type=number] { width: 70px; padding: 10px; border-radius: var(--radius); border: 1px solid var(--color-border); }
.product-detail__buttons { display: flex; gap: 8px; }

.shipping-options { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.shipping-options h3 { margin: 0 0 8px; font-size: 15px; }
.shipping-options__row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.shipping-options__row:last-child { border-bottom: none; }

.product-tabs { margin: 32px 0; }
.product-tabs__nav { display: flex; gap: 4px; border-bottom: 2px solid var(--color-border); }
.product-tabs__btn { background: none; border: none; padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--color-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.product-tabs__btn.is-active { color: var(--color-primary); border-color: var(--color-primary); }
.product-tabs__panel { display: none; padding: 20px 0; font-size: 14px; }
.product-tabs__panel.is-active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table td { padding: 8px 12px; border-bottom: 1px solid var(--color-border); }
.spec-table__key { color: var(--color-muted); width: 240px; }

/* ---------- Cart page ---------- */
.cart-hint { color: var(--color-muted); font-size: 13px; }
.cart-table { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.cart-row {
    display: grid;
    grid-template-columns: auto 72px 1fr 140px 100px auto;
    align-items: center;
    gap: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
}
.cart-row__image img { width: 64px; height: 64px; object-fit: contain; background: #f3f4f6; border-radius: 6px; }
.cart-row__info { display: flex; flex-direction: column; gap: 4px; }
.cart-row__name { color: var(--color-text); font-weight: 500; }
.cart-row__qty { display: flex; gap: 6px; }
.cart-row__qty input { width: 60px; padding: 6px; border-radius: 6px; border: 1px solid var(--color-border); }
.cart-row__total { font-weight: 700; }
.checkbox-btn { background: none; border: none; font-size: 18px; cursor: pointer; }

.cart-summary {
    display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 16px;
}
.cart-summary__row { flex: 1; display: flex; justify-content: space-between; font-size: 15px; }

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.checkout-form fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.checkout-form legend { font-weight: 700; padding: 0 8px; }
.form-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-size: 13px; font-weight: 600; color: var(--color-muted); }
.form-row input, .form-row textarea, .form-row select {
    padding: 10px; border-radius: 6px; border: 1px solid var(--color-border); font-size: 14px; font-family: inherit;
}
.form-error { color: var(--color-danger); font-size: 12px; margin: 0; }
.form-hint { color: var(--color-muted); font-size: 12px; }
.radio-option { display: block; margin-bottom: 8px; font-size: 14px; }
.checkout-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.checkout-summary__row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; }
.checkout-summary__total { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 12px; }

/* ---------- Order success / tracking ---------- */
.order-success { text-align: center; padding: 32px 16px; }
.order-summary-table { width: 100%; max-width: 480px; margin: 24px auto; border-collapse: collapse; }
.order-summary-table td { padding: 8px 12px; border-bottom: 1px solid var(--color-border); text-align: left; }
.order-tracking-result { margin-top: 32px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.auth-form, .track-order-form { max-width: 420px; }
.static-page { max-width: 720px; }
.error-page { text-align: center; padding: 64px 16px; }
.error-page h1 { font-size: 64px; margin: 0; color: var(--color-primary); }

/* ---------- Footer ---------- */
.site-footer { background: #111827; color: #d1d5db; margin-top: 48px; }
.footer__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    padding: 40px 16px;
}
.footer__col h4 { color: #fff; margin: 0 0 12px; font-size: 15px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 8px; }
.footer__col a { color: #d1d5db; font-size: 14px; }
.footer__col a:hover { color: #fff; }
.footer__col p { font-size: 14px; margin: 0; }
.footer__bottom { border-top: 1px solid #1f2937; padding: 16px; text-align: center; font-size: 13px; }

/* ---------- WhatsApp floating chat button ---------- */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    z-index: 90;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
}
.whatsapp-float__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    opacity: 0.55;
    z-index: -1;
    animation: whatsapp-pulse 2.2s ease-out infinite;
}
@keyframes whatsapp-pulse {
    0% { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(1.9); opacity: 0; }
}
.whatsapp-float__tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: #111827;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.whatsapp-float__tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #111827;
}
.whatsapp-float:hover .whatsapp-float__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}
@media (max-width: 480px) {
    .whatsapp-float { width: 50px; height: 50px; right: 14px; bottom: 14px; }
    .whatsapp-float__tooltip { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .product-detail { grid-template-columns: 1fr; }
    .product-detail__gallery { margin-left: 0; max-width: none; }
    .checkout-layout { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .cart-row {
        grid-template-columns: auto 56px 1fr;
        grid-template-areas: "check img info" "check img qty" "check img total" "check img remove";
        row-gap: 8px;
    }
    .cart-row__check { grid-area: check; }
    .cart-row__image { grid-area: img; }
    .cart-row__info { grid-area: info; }
    .cart-row__qty { grid-area: qty; }
    .cart-row__total { grid-area: total; }
    .cart-row__remove { grid-area: remove; }
    .main-nav__inner { flex-wrap: wrap; row-gap: 8px; }
    .main-nav__links { flex-wrap: wrap; }
    .category-menu__panel { max-width: 92vw; }
    .sidebar-categories__flyout { display: none !important; }
    .cart-summary { flex-direction: column; align-items: stretch; }
    .cart-summary__row { flex: none; }
    .cart-summary .btn { width: 100%; }
}
@media (max-width: 640px) {
    .topbar { display: none; }
    .mobile-nav-toggle { display: inline-block; }
    .main-nav { display: none; }
    .site-header__inner { flex-wrap: wrap; }
    .search-form { order: 3; width: 100%; max-width: none; }
    .footer__grid { grid-template-columns: 1fr; }
    .topbar__inner { flex-wrap: wrap; gap: 4px; }
    .sidebar-categories__list { width: min(260px, 88vw); }
    .product-list-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .product-detail__buttons { width: 100%; }
    .product-detail__buttons .btn { flex: 1; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-card__body { padding: 8px; gap: 4px; }
    .product-card__name { font-size: 13px; }
}
@media (max-width: 480px) {
    .logo__text { font-size: 18px; }
    .logo__icon { height: 32px; }
    .site-header__inner { gap: 8px; padding: 10px 12px; }
    .header-actions { gap: 2px; }
    .header-action-btn { padding: 6px; font-size: 13px; }
    .hero h1 { font-size: 24px; }
    .hero { padding: 32px 16px; }
}