/* ============================================================
   Door Pe Store — Home Page CSS (index.css)
   Path: app/dist/assets/vendor/css/index.css
============================================================ */

/* ── Hero ── */
.hero-section { margin-top: 14px; }
.hero-banner {
    background: linear-gradient(135deg, #0b5e42 0%, #0c831f 60%, #1a9c2e 100%);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex; align-items: center;
    justify-content: space-between;
    overflow: hidden; position: relative;
    min-height: 160px;
}
.hero-banner::before {
    content: '';
    position: absolute; top: -40px; right: 120px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(248,194,0,0.2) 0%, transparent 70%);
    border-radius: 50%;
}
.hero-content { flex: 1; z-index: 1; }
.hero-tag {
    display: inline-block;
    background: var(--yellow); color: #1a1a1a;
    font-size: 0.68rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
    margin-bottom: 10px;
}
.hero-title {
    font-size: 1.5rem; font-weight: 900;
    color: #fff; line-height: 1.2;
    margin-bottom: 8px;
}
.hero-highlight { color: var(--yellow); }
.hero-sub { font-size: 0.8rem; color: #aaa; margin-bottom: 14px; }
.hero-btn {
    display: inline-flex; align-items: center;
    background: var(--yellow); color: #1a1a1a;
    padding: 9px 18px; border-radius: 8px;
    font-size: 0.85rem; font-weight: 800;
    text-decoration: none; transition: all 0.2s;
}
.hero-btn:hover { background: var(--yellow-dark); color: #1a1a1a; transform: translateY(-1px); }

.hero-img { flex-shrink: 0; z-index: 1; }
.hero-img-placeholder {
    width: 100px; height: 100px;
    background: rgba(248,194,0,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--yellow);
}
@media (max-width: 400px) {
    .hero-title { font-size: 1.2rem; }
    .hero-img-placeholder { width: 70px; height: 70px; font-size: 2rem; }
}

/* Categories grid removed — nav bar only */

/* cat-card removed */

/* Category colour map — kept for placeholder images */
.cat-color-0 { background: #fff3cd; }
.cat-color-1 { background: #d4edda; }
.cat-color-2 { background: #cce5ff; }
.cat-color-3 { background: #f8d7da; }
.cat-color-4 { background: #e2d9f3; }
.cat-color-5 { background: #d6f5f0; }
.cat-color-6 { background: #fce4d6; }
.cat-color-7 { background: #e8f4f8; }
.cat-color-8 { background: #fef9e7; }

/* ── Brand Section — 5-column grid row ── */
.brands-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.brand-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center; cursor: pointer;
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
    appearance: none; -webkit-appearance: none;
    outline: none; font-family: inherit;
    min-height: 36px;
}
.brand-card:hover {
    border-color: var(--green);
    background: var(--green-light);
}
.brand-card.active {
    background: var(--green);
    border-color: var(--green-dark);
    box-shadow: 0 2px 8px rgba(12,131,31,0.25);
}
.brand-card.active .brand-name { color: #fff; }
.brand-initial { display: none; }   /* hide circle */
.brand-name {
    font-size: 0.7rem; font-weight: 600;
    color: var(--text-primary); line-height: 1.2;
    word-break: break-word;
    transition: color 0.15s;
}

/* ── View All Brands button (5th slot) ── */
.view-all-brands-btn {
    background: var(--yellow-light);
    border: 1.5px dashed var(--yellow-dark);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center; cursor: pointer;
    display: flex; align-items: center;
    justify-content: center; gap: 4px;
    appearance: none; font-family: inherit;
    transition: all 0.15s; min-height: 36px;
    flex-direction: column;
}
.view-all-brands-btn:hover { background: var(--yellow); border-style: solid; }
.view-all-brands-btn i     { font-size: 0.9rem; color: var(--green-dark); }
.view-all-brands-btn span  { font-size: 0.65rem; font-weight: 700; color: var(--green-dark); line-height: 1.3; }



/* ── See all count ── */
.see-all-count {
    font-size: 0.75rem; color: var(--text-muted); font-weight: 500;
}

/* ── Image Placeholder ── */
.prod-img-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.placeholder-inner {
    width: 80%; height: 80%;
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
}
.placeholder-emoji   { font-size: 1.8rem; line-height: 1; }
.placeholder-initials { font-size: 0.7rem; font-weight: 800;
                        color: var(--text-sec); letter-spacing: 0.05em; }

/* ── No products placeholder ── */
.no-products-placeholder {
    padding: 40px 20px; text-align: center; color: var(--text-muted);
}
.no-products-placeholder i { font-size: 2.5rem; display: block; margin-bottom: 10px; }

/* ══════════════════════════════════════════════════
   HORIZONTAL PRODUCT ROW — 3.5 cards visible
   Scoped to .products-row so the flat grid is untouched.

   Formula: card-width = (100vw - padding*2 - gap*3) / 3.5
   We use calc() so it adapts to any viewport width.

   Mobile  (<576px):  padding 12px each side, gap 8px  → ~27.5vw per card
   Tablet  (≥576px):  clamp up slightly
   Desktop (≥768px):  switch to flat grid — row hidden by JS anyway
══════════════════════════════════════════════════ */
.products-row {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    /* Smooth momentum scroll on iOS */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* Hide scrollbar — keep it clean */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.products-row::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

/* Each card snaps and fills exactly 1/3.5 of the visible area */
.products-row .product-card {
    flex: 0 0 calc((100% - 10px * 3) / 3.5);
    min-width: calc((100% - 10px * 3) / 3.5);
    scroll-snap-align: start;
}

/* On slightly wider phones show the same ratio */
@media (min-width: 400px) {
    .products-row .product-card {
        flex: 0 0 calc((100% - 10px * 3) / 3.5);
        min-width: calc((100% - 10px * 3) / 3.5);
    }
}

/* Tablet — show 4.5 products to keep the "peek" effect */
@media (min-width: 576px) {
    .products-row .product-card {
        flex: 0 0 calc((100% - 10px * 4) / 4.5);
        min-width: calc((100% - 10px * 4) / 4.5);
    }
}

/* Desktop — show 5.5 */
@media (min-width: 768px) {
    .products-row .product-card {
        flex: 0 0 calc((100% - 10px * 5) / 5.5);
        min-width: calc((100% - 10px * 5) / 5.5);
    }
}

/* ── Skeleton title ── */
.skeleton-title {
    height: 18px; width: 180px;
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size:200% 100%; animation: shimmer 1.4s infinite;
    border-radius: 6px;
}

/* ── Cat nav skeleton ── */
.cat-nav-skeleton {
    height: 36px; width: 100%;
    background: linear-gradient(90deg,rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.35) 50%,rgba(255,255,255,0.2) 75%);
    background-size:200% 100%; animation: shimmer 1.4s infinite;
}

/* ── Infinite loader ── */
#infiniteLoader { display:none; }

/* ── Fix 4: Flat grid (filter mode) — 3 columns on mobile ── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (min-width: 576px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .products-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .products-grid { grid-template-columns: repeat(5, 1fr); } }

/* ── Fix 2: "Clear filter" button in brand section header ── */
#clearBrandFilter {
    background: none;
    border: 1.5px solid var(--green);
    border-radius: 20px;
    color: var(--green);
    padding: 4px 12px;
    font-size: 0.75rem; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    transition: all 0.2s;
    font-family: inherit;
}
#clearBrandFilter:hover {
    background: var(--green); color: #fff;
}

/* Page loader CSS moved to main.css — shared across all pages */

/* ══════════════════════════════════════════════════
   SECTION LOADER (inline, after category/brand click)
══════════════════════════════════════════════════ */
.section-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 60px 20px;
}
.section-loading-inner {
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
}
.sl-spinner {
    display: flex; gap: 10px; align-items: center;
}
.sl-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--green);
    animation: slDot 1.2s ease-in-out infinite;
}
.sl-dot:nth-child(1) { animation-delay: 0s;    background: var(--green); }
.sl-dot:nth-child(2) { animation-delay: 0.18s; background: var(--yellow-dark); }
.sl-dot:nth-child(3) { animation-delay: 0.36s; background: var(--green-dark); }
@keyframes slDot {
    0%,80%,100% { transform: scale(0.6); opacity: 0.4; }
    40%         { transform: scale(1.3); opacity: 1; }
}
.sl-text {
    font-size: 0.82rem; font-weight: 600;
    color: var(--text-muted);
    animation: slFade 1.2s ease-in-out infinite alternate;
}
@keyframes slFade {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════
   BRAND OFFCANVAS GRID
══════════════════════════════════════════════════ */
.brands-offcanvas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px;
}
@media (min-width: 400px) { .brands-offcanvas-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 576px) { .brands-offcanvas-grid { grid-template-columns: repeat(5, 1fr); } }

/* Brand cards inside offcanvas same as main row */
.brands-offcanvas-grid .brand-card {
    min-height: 38px;
    font-size: 0.68rem;
}

/* ══════════════════════════════════════════════════
   BRAND OFFCANVAS SEARCH
══════════════════════════════════════════════════ */
.brand-offcanvas-search-wrap {
    padding: 10px 14px 8px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
}
.brand-offcanvas-search-bar {
    display: flex; align-items: center; gap: 10px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    transition: border-color 0.2s;
}
.brand-offcanvas-search-bar:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(12,131,31,0.1);
}
.brand-offcanvas-search-bar i {
    color: #aaa; font-size: 0.9rem; flex-shrink: 0;
}
.brand-offcanvas-search-bar input {
    flex: 1; border: none; outline: none;
    font-size: 0.85rem; font-family: 'Inter', sans-serif;
    background: transparent; color: var(--text-primary);
}
.brand-offcanvas-search-bar input::placeholder { color: #bbb; }
#brandSearchClearBtn {
    background: none; border: none;
    color: #bbb; font-size: 0.9rem; padding: 0;
    cursor: pointer; transition: color 0.15s;
    display: none;
}
#brandSearchClearBtn:hover { color: var(--red); }

/* Show clear button when input has text */
.brand-offcanvas-search-bar:focus-within #brandSearchClearBtn,
.brand-offcanvas-search-bar input:not(:placeholder-shown) + #brandSearchClearBtn {
    display: block;
}

/* Brand search empty state */
.brand-search-empty {
    grid-column: 1 / -1;
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.brand-search-empty i {
    font-size: 2rem; display: block;
    margin-bottom: 8px; color: #ddd;
}