/*
 * Project-specific styles layered on top of the purchased Shofy template.
 *
 * Kept in its own file so template updates never clobber it, and so it is
 * obvious which rules are ours.
 */

/* ── Brand logo ────────────────────────────────────────────────────────────
 *
 * Sized by HEIGHT, never width. The horizontal lockup is 1419x456 (3.11:1), so
 * the old width="80px" rendered it only 26px tall — unreadable. Height-based
 * sizing keeps the logo aligned with the search bar and action icons, and
 * survives swapping in a logo with a different aspect ratio.
 */
.site-logo {
    height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Header shrinks its padding from 27px to 15px below 992px — the logo follows. */
@media (max-width: 991px) {
    .site-logo {
        height: 54px;
    }
}

@media (max-width: 575px) {
    .site-logo {
        height: 46px;
    }
}

/* Guaranteed clear space to the right of the logo.
 *
 * The header logo sits in a Bootstrap column immediately followed by the main
 * nav. At 64px tall the horizontal lockup is ~199px wide, which filled its
 * column edge to edge and left the wordmark touching "Accueil". The columns
 * were widened to suit, and this reserves breathing room so a future size
 * change cannot reintroduce the collision. */
.logo {
    padding-right: 24px;
}

@media (max-width: 991px) {
    .logo {
        padding-right: 12px;
    }
}

/* ── Header social links ───────────────────────────────────────────────── */

/* Icon and label read as one unit, with clear separation between networks. */
.tp-header-social-item + .tp-header-social-item {
    margin-left: 18px;
}

.tp-header-info-item i,
.tp-header-social-item i {
    margin-right: 6px;
}

/* Slide-out mobile menu: tighter header than the main one. */
.site-logo--drawer {
    height: 52px;
}

/* Footer has room to breathe, and the logo sits on its own line. */
.site-logo--footer {
    height: 76px;
}

@media (max-width: 575px) {
    .site-logo--footer {
        height: 62px;
    }
}

/* Preloader uses the VERTICAL lockup (728x724, square) centred inside the
 * 180px spinner ring — sized to leave clear space inside the stroke. */
.site-logo--preloader {
    height: 128px;
    width: 128px;
    object-fit: contain;
}

/* ── Catalog sidebar ───────────────────────────────────────────────────── */

/* The category list is driven by the Google Sheet and currently runs to ~37
   entries, which pushed the price and brand filters far below the fold. */
.category-filter-list {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 6px;
}

.category-filter-list::-webkit-scrollbar {
    width: 6px;
}

.category-filter-list::-webkit-scrollbar-thumb {
    background: #d7dbe0;
    border-radius: 3px;
}

.category-filter-search {
    width: 100%;
    margin-bottom: 12px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #e0e2e7;
    border-radius: 4px;
    outline: none;
}

.category-filter-search:focus {
    border-color: var(--tp-theme-primary);
}

/* ── Unavailable products ──────────────────────────────────────────────── */

/* Out of stock, or waiting on a price from the sheet. Dimmed rather than
   hidden so the catalog still reads as complete. */
.product-out-of-stock .tp-product-thumb img {
    opacity: 0.45;
    filter: grayscale(70%);
}

.product-out-of-stock .tp-product-title a {
    color: #6b7280;
}

/* Disabled buy buttons must not look clickable. */
.addToCartBtn[disabled],
.tp-product-list-add-to-cart-btn[disabled],
.tp-product-details-add-to-cart-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.price-on-request {
    color: #6b7280;
    font-style: italic;
    font-weight: 500;
}

/* ── Product imagery ───────────────────────────────────────────────────── */

/* Sheet photo columns are still being filled in, so most products fall back to
   the placeholder. Keep every tile the same shape regardless. */
.tp-product-thumb img,
.tp-product-list-thumb img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

/* Product names arrive from the sheet in caps and vary a lot in length; clamp
   so grid rows stay aligned. */
.tp-product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}