/* CasaBorsani Custom Shop - Grid & Product Cards */

/* ============================================================
   CSS Custom Properties (defaults — overridden inline per instance)
   ============================================================ */
:root {
    /* Grid */
    --cbcs-columns-desktop: 3;
    --cbcs-columns-small-desktop: 2;
    --cbcs-columns-tablet: 2;
    --cbcs-columns-mobile: 1;

    /* Card */
    --cbcs-card-bg: transparent;
    --cbcs-card-radius: 0px;
    --cbcs-card-border-width: 0px;
    --cbcs-card-border-color: #dcdcde;

    /* Sale Flag / Banner */
    --cbcs-sale-bg: #e11d48;
    --cbcs-sale-text: #ffffff;
    --cbcs-sale-font: inherit;
    --cbcs-sale-font-style: normal;
    --cbcs-sale-font-size: 13px;

    /* Title */
    --cbcs-title-font: inherit;
    --cbcs-title-font-style: normal;
    --cbcs-title-font-size: 18px;
    --cbcs-title-color: #111111;

    /* Text */
    --cbcs-text-font: inherit;
    --cbcs-text-font-style: normal;
    --cbcs-text-font-size: 14px;
    --cbcs-text-color: #333333;
}

/* ============================================================
   Shop Wrapper & Grid
   ============================================================ */
.cbcs-shop-wrap {
    position: relative;
    width: 100%;
}

.cbcs-grid {
    display: grid;
    grid-template-columns: repeat(var(--cbcs-columns-desktop, 3), minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1199px) {
    .cbcs-grid {
        grid-template-columns: repeat(var(--cbcs-columns-small-desktop, 2), minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .cbcs-grid {
        grid-template-columns: repeat(var(--cbcs-columns-tablet, 2), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cbcs-grid {
        grid-template-columns: repeat(var(--cbcs-columns-mobile, 1), minmax(0, 1fr));
        gap: 16px;
    }
}

/* ============================================================
   Product Card
   ============================================================ */
.cbcs-card {
    background: var(--cbcs-card-bg);
    border-radius: var(--cbcs-card-radius);
    border: var(--cbcs-card-border-width) solid var(--cbcs-card-border-color);
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
}

/* ============================================================
   Card Row — Generic wrapper for each section
   ============================================================ */
.cbcs-card__row {
    width: 100%;
}

/* --- Image Row ------------------------------------------------ */
.cbcs-card__row--image {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.cbcs-card__row--image a {
    display: block;
    text-decoration: none;
}

.cbcs-card__image-wrap {
    display: block;
    width: 100%;
}

.cbcs-card__image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.cbcs-card:hover .cbcs-card__image-wrap img {
    transform: scale(1.03);
}

/* --- Banners -------------------------------------------------- */
.cbcs-card__banners {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1;
}

.cbcs-card__banner {
    display: inline-block;
    padding: 4px 10px;
    line-height: 1.2;
    font-weight: 600;
    background: var(--cbcs-sale-bg) !important;
    color: var(--cbcs-sale-text) !important;
    font-family: var(--cbcs-sale-font) !important;
    font-style: var(--cbcs-sale-font-style) !important;
    font-size: var(--cbcs-sale-font-size) !important;
    white-space: nowrap;
}

/* --- Custom Flags (top-right) ----------------------------------- */
.cbcs-card__banners--right {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1;
    align-items: flex-end;
}

.cbcs-card__banner--custom {
    display: inline-block;
    padding: 4px 10px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Text Row ------------------------------------------------- */
.cbcs-card__row--text {
    padding: 14px 16px 0;
    flex: 1 1 auto;
}

.cbcs-card__title {
    margin: 0 0 6px;
    font-family: var(--cbcs-title-font);
    font-style: var(--cbcs-title-font-style);
    font-size: var(--cbcs-title-font-size);
    font-weight: 600;
    line-height: 1.3;
}

.cbcs-card__title a {
    color: var(--cbcs-title-color);
    text-decoration: none;
}

.cbcs-card__title a:hover {
    text-decoration: underline;
}

.cbcs-card__price {
    margin: 0 0 10px;
    font-size: var(--cbcs-text-font-size);
    color: var(--cbcs-text-color);
}

.cbcs-card__price .amount,
.cbcs-card__price bdi {
    font-weight: 600;
}

.cbcs-card__price .woocommerce-Price-currencySymbol {
    margin-right: 2px;
}

.cbcs-card__price del {
    opacity: 0.5;
    margin-right: 6px;
    font-weight: 400;
}

.cbcs-card__price ins {
    text-decoration: none;
    font-weight: 600;
    color: #e11d48;
}

/* Single item price — always visible when product has options */
.woocommerce-Single-price-amount {
    margin: 0 0 10px;
    font-size: var(--cbcs-text-font-size);
    color: var(--cbcs-text-color);
}

.woocommerce-Single-price-amount .amount,
.woocommerce-Single-price-amount bdi {
    font-weight: 600;
}

.woocommerce-Single-price-amount .woocommerce-Price-currencySymbol {
    margin-right: 2px;
}

.woocommerce-Single-price-amount del {
    opacity: 0.5;
    margin-right: 6px;
    font-weight: 400;
}

.woocommerce-Single-price-amount ins {
    text-decoration: none;
    font-weight: 600;
    color: #e11d48;
}

/* Option price — hidden by default when product has options */
.cbcs-card__price--hidden {
    display: none;
}

/* Single option: option price permanently hidden */
.cbcs-card__price--single {
    display: none;
}

.cbcs-card__description {
    font-family: var(--cbcs-text-font);
    font-style: var(--cbcs-text-font-style);
    font-size: var(--cbcs-text-font-size);
    color: var(--cbcs-text-color);
    line-height: 1.5;
    margin: 0 0 10px;
}

.cbcs-card__description p:last-child {
    margin-bottom: 0;
}

/* --- Options Row (Dropdown) ---------------------------------- */
.cbcs-card__row--options {
    padding: 12px 16px 0;
}

.cbcs-card__options {
    width: 100%;
}

/* ============================================================
   No Products
   ============================================================ */
.cbcs-no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    font-size: 16px;
    color: #666;
}

/* ============================================================
   Pagination
   ============================================================ */
.cbcs-pagination {
    margin-top: 30px;
    text-align: center;
}

.cbcs-pagination__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.cbcs-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    text-decoration: none;
    color: #333;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.cbcs-pagination__link:hover {
    border-color: #111;
    color: #111;
}

.cbcs-pagination__current {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* ============================================================
   Lazy Load
   ============================================================ */
.cbcs-loading-indicator {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 20px;
    color: #666;
    font-size: 14px;
}

.cbcs-loading-indicator::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: cbcs-spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* ============================================================
   Offer Tabs
   ============================================================ */
.cbcs-offer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 24px;
}

.cbcs-offer-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.cbcs-offer-tab:hover {
    color: #111;
}

.cbcs-offer-tab.is-active {
    color: #111;
    border-bottom-color: #111;
    font-weight: 600;
}

.cbcs-offer-tab-panel {
    display: none;
}

.cbcs-offer-tab-panel.is-active {
    display: block;
}

.cbcs-offer-tab-panel[hidden] {
    display: none;
}


.woocommerce-Single-price-amount bdi {
    font-weight: 900;
    font-size: 1.3em;
}

.woocommerce-Single-price-amount ins bdi {
    color: #ffffff;
}

.cbcs-card__price ins bdi {
    color: #ffffff;
}

/* ============================================================
   Single Product Page — Flags
   ============================================================ */
.cbcs-product-flags {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.cbcs-product-flags__left,
.cbcs-product-flags__right {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.cbcs-product-flag {
    display: inline-block;
    padding: 4px 10px;
    line-height: 1.2;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.cbcs-product-flag--custom {
    font-size: 13px;
}