/* ── Category page variables ── */
:root {
    --cat-primary:      #1C7FD8;
    --cat-primary-dark: #0F5698;
    --cat-accent:       #1F6FB2;
    --cat-text:         #1B2836;
    --cat-text-2:       #45515D;
    --cat-muted:        #5A6672;
    --cat-border:       #DCE1E6;
    --cat-surface:      #F4F6F8;
    --cat-white:        #ffffff;
    --cat-shadow:       0 2px 8px rgba(0,0,0,0.08);
    --cat-shadow-hover: 0 8px 24px rgba(0,0,0,0.13);
    --cat-radius:       10px;
}

/* ── Hero ── */
.cat-hero {
    background: linear-gradient(135deg,#1B2836 0%,#2C3A48 60%,#1C7FD8 100%);
    color:#fff;
    padding: 48px 20px 40px;
    text-align: center;
}
.cat-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 10px;
    color: #fff;
    letter-spacing: -0.4px;
}
.cat-hero p {
    color: #D7EAFA;
    font-size: 1rem;
    margin: 0;
}

/* ── Breadcrumb ── */
.cat-breadcrumb {
    background: var(--cat-surface);
    border-bottom: 1px solid var(--cat-border);
    padding: 10px 20px;
    font-size: 0.85rem;
    color: var(--cat-muted);
}
.cat-breadcrumb a { color: var(--cat-primary); text-decoration: none; }
.cat-breadcrumb a:hover { text-decoration: underline; }
.cat-breadcrumb span { margin: 0 6px; }

/* ── Layout ── */
.cat-page-wrap {
    max-width: 1260px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}

/* ── Toolbar ── */
.cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cat-border);
}
.cat-count {
    font-size: 0.95rem;
    color: var(--cat-muted);
}
.cat-count strong { color: var(--cat-text); font-weight: 700; }
.cat-sort-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cat-sort-label {
    font-size: 0.9rem;
    color: var(--cat-muted);
    white-space: nowrap;
}
.cat-sort-select {
    padding: 8px 36px 8px 14px;
    border: 1px solid var(--cat-border);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--cat-text);
    background: var(--cat-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    cursor: pointer;
    transition: border-color .2s;
}
.cat-sort-select:focus { outline: none; border-color: var(--cat-primary); }

/* ── Grid ── */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
}

/* ── Product card ── */
.cat-card {
    background: var(--cat-white);
    border-radius: var(--cat-radius);
    border: 1px solid var(--cat-border);
    box-shadow: var(--cat-shadow);
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: var(--cat-text);
}
.cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cat-shadow-hover);
}

/* Sale badge */
.cat-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #dc2626;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: 0.5px;
}

/* Favourite button */
.cat-card-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cat-muted);
    font-size: 0.95rem;
    transition: color .2s, background .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.cat-card-fav:hover, .cat-card-fav.active { color: #ef4444; }
.cat-card-fav.active i { font-weight: 900; }

/* Image area */
.cat-card-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: contain;
    background: var(--cat-surface);
    display: block;
}
.cat-card-img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--cat-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cat-border);
    font-size: 2.5rem;
}

/* Body */
.cat-card-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cat-card-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cat-text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-card-size {
    font-size: 0.8rem;
    color: var(--cat-muted);
}
.cat-card-size i { margin-right: 4px; font-size: 0.75rem; }

/* Pricing */
.cat-card-pricing {
    margin-top: auto;
    padding-top: 10px;
}
.cat-card-price-now {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--cat-primary);
}
.cat-card-price-was {
    font-size: 0.82rem;
    color: var(--cat-muted);
    text-decoration: line-through;
    margin-left: 6px;
}

/* CTA */
.cat-card-cta {
    display: block;
    margin: 12px 16px 14px;
    background: var(--cat-primary);
    color: #fff;
    text-align: center;
    padding: 9px 0;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.cat-card-cta:hover { background: var(--cat-primary-dark); color: #fff; }

/* ── Pagination ── */
.cat-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 48px;
    flex-wrap: wrap;
}
.cat-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--cat-border);
    background: var(--cat-white);
    color: var(--cat-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
}
.cat-page-btn:hover { border-color: var(--cat-primary); color: var(--cat-primary); }
.cat-page-btn.active {
    background: var(--cat-primary);
    border-color: var(--cat-primary);
    color: #fff;
    font-weight: 700;
}
.cat-page-btn.disabled {
    opacity: .35;
    pointer-events: none;
}

/* ── Empty state ── */
.cat-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--cat-muted);
}
.cat-empty i { font-size: 3rem; margin-bottom: 16px; display: block; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .cat-hero h1 { font-size: 1.6rem; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cat-toolbar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
    .cat-grid { grid-template-columns: 1fr; }
}

/* ── Breadcrumb lines up with the page content ──
   The bar's background still runs edge to edge, but the links start at the
   same left edge as the product grid (.cat-page-wrap: 1260px, centred). */
.cat-breadcrumb {
    padding-left: max(20px, calc((100% - 1260px) / 2));
    padding-right: max(20px, calc((100% - 1260px) / 2));
}

/* ── Compact hero (collection pages) ──
   About 170px tall on desktop: breadcrumb, H1 and count on the left, two or
   three of the collection's own product photos on white tiles on the right.
   Same 1260px centred width as the ranking tool and the product grid. */
.cat-hero.cat-hero-compact {
    padding: 20px 20px 22px;
    text-align: left;
}
.cat-hero-inner {
    max-width: 1260px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.cat-hero-text { min-width: 0; flex: 1 1 auto; }
.cat-hero-crumb {
    font-size: 0.8rem;
    color: #C2C9D0;
    margin: 0 0 10px;
}
.cat-hero-crumb a { color: #D7EAFA; text-decoration: none; }
.cat-hero-crumb a:hover { text-decoration: underline; }
.cat-hero-crumb span { margin: 0 6px; opacity: 0.7; }
.cat-hero-crumb strong { font-weight: 500; color: #fff; }
.cat-hero.cat-hero-compact h1 {
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 8px;
}
.cat-hero.cat-hero-compact p { font-size: 0.98rem; }
.cat-hero-pics {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}
.cat-hero-pic {
    display: block;
    width: 124px;
    height: 124px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    transition: transform .2s;
}
.cat-hero-pic:hover { transform: translateY(-3px); }
.cat-hero-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 8px;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .cat-hero-pic { width: 96px; height: 96px; }
    .cat-hero-pic:nth-child(3) { display: none; }
}
@media (max-width: 600px) {
    .cat-hero.cat-hero-compact { padding: 16px 16px 18px; }
    .cat-hero-inner { display: block; }
    .cat-hero-pics { display: none; }
    .cat-hero.cat-hero-compact h1 { font-size: 1.5rem; }
}

/* 11 Nov 2026: never crop product photos - whole product on white */
.cat-card-img {
    object-fit: contain;
    background: #fff;
    padding: 8px;
    box-sizing: border-box;
}