/**
 * BudClub Smart Product Grid - v1.4.7 styles
 * Prefix: .bcspg-
 */

.bcspg-wrap,
.bcspg-wrap *{
    box-sizing:border-box;
}

.bcspg-wrap{
    width:100%;
}

.bcspg-grid{
    --bcspg-yellow:#ffbb3a;
    --bcspg-green:#16a34a;
    --bcspg-lime:#a5dc5c;
    --bcspg-red:#ff2d2d;
    --bcspg-black:#111111;
    --bcspg-muted:#666666;
    --bcspg-border:#e9e9e9;
    --bcspg-radius:16px;
    --bcspg-gap:18px;

    display:grid;
    grid-template-columns:repeat(var(--bcspg-cols, 4), minmax(0, 1fr));
    gap:var(--bcspg-gap);
    width:100%;
}

.bcspg-debug{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin:0 0 14px;
    padding:10px 12px;
    border:1px dashed #cccccc;
    border-radius:12px;
    background:#fafafa;
    color:#222222;
    font-size:12px;
    line-height:1.3;
}

.bcspg-debug span,
.bcspg-debug strong{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid #eeeeee;
}

.bcspg-empty,
.bcspg-notice{
    grid-column:1 / -1;
    width:100%;
    padding:16px;
    border:1px dashed #dddddd;
    border-radius:var(--bcspg-radius, 16px);
    background:#ffffff;
    color:#222222;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.bcspg-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    background:#ffffff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:var(--bcspg-radius);
    overflow:hidden;
    min-height:100%;
    color:var(--bcspg-black);
    position:relative;
    isolation:isolate;
}

.bcspg-card__media{
    position:relative;
    display:block;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#f8f8f8;
    text-decoration:none;
}

.bcspg-card__media img,
.bcspg-card__img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    position:relative;
    z-index:1;
    transition:opacity .14s ease;
}

.bcspg-card__video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:2;
    background:transparent;
}

.bcspg-card.is-video-loading .bcspg-card__video,
.bcspg-card.is-video-active .bcspg-card__video{
    display:block !important;
}

.bcspg-card.is-video-active .bcspg-card__media img,
.bcspg-card.is-video-active .bcspg-card__img{
    opacity:0;
}

.bcspg-card__badges{
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    z-index:4;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    pointer-events:none;
}

.bcspg-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:100%;
    padding:6px 9px;
    border-radius:999px;
    color:#ffffff;
    background:#111111;
    font-size:10px;
    font-weight:800;
    line-height:1;
    letter-spacing:.35px;
    text-transform:uppercase;
    box-shadow:0 2px 7px rgba(0,0,0,.18);
}

.bcspg-badge--bogo{
    background:var(--bcspg-green);
    border:1px solid rgba(255,255,255,.45);
}

.bcspg-badge--sale{
    background:#e11d48;
}

.bcspg-badge--soldout{
    background:#b91c1c;
}

.bcspg-card__body{
    display:flex;
    flex-direction:column;
    gap:7px;
    flex:1;
    padding:14px;
}

.bcspg-card__title{
    margin:0;
    font-size:12px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:.01em;
    color:#111111;
    text-align:center;
}

.bcspg-card__title a{
    color:inherit;
    text-decoration:none;
}

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

.bcspg-card__sizes{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px 8px;
    width:100%;
}

.bcspg-size-btn{
    min-width:0;
    appearance:none;
    border:1px solid rgba(0,0,0,.18);
    border-radius:999px;
    background:#ffffff;
    color:#111111;
    cursor:pointer;
    padding:7px 8px;
    font-size:11px;
    line-height:1;
    font-weight:700;
    text-align:center;
}

.bcspg-size-btn:disabled,
.bcspg-size-btn.is-disabled{
    background:#f5f5f5 !important;
    border-color:#dddddd !important;
    color:#a3a3a3 !important;
    cursor:not-allowed;
    opacity:.7;
    text-decoration:line-through;
    box-shadow:none !important;
}

.bcspg-size-btn:not(:disabled):not(.is-disabled):hover,
.bcspg-size-btn:not(:disabled):not(.is-disabled):focus,
.bcspg-size-btn:not(:disabled):not(.is-disabled)[aria-pressed="true"]{
    border-color:#111111;
    background:var(--bcspg-yellow);
    outline:none;
}

.bcspg-card__reviews{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:3px;
    min-height:18px;
    color:#111111;
    font-size:12px;
    line-height:1.2;
}

.bcspg-review-count,
.bcspg-card__reviews .bc-reviewCount{
    font-weight:700;
    color:#111111;
}

.bcspg-card__price{
    min-height:22px;
    color:#111111;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    text-align:center;
}

.bcspg-price{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
}

.bcspg-price__current,
.bcspg-price__regular{
    color:#ff0000;
    font-weight:700;
}

.bcspg-price--sale .bcspg-price__regular{
    text-decoration:line-through;
    opacity:.62;
}

.bcspg-price del{
    opacity:.55;
    font-weight:500;
    text-decoration-thickness:1px;
}

.bcspg-price ins{
    color:#111111;
    font-weight:700;
    text-decoration:none;
}

.bcspg-price__sale{
    color:#111111;
    font-weight:700;
}

.bcspg-card__pills{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.bcspg-pill{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:28px;
    border:1px solid #000000;
    border-radius:999px;
    padding:7px 12px;
    background:var(--bcspg-lime);
    color:#ffffff;
    font-size:11px;
    line-height:1.2;
    font-weight:700;
    text-align:center;
    letter-spacing:.03em;
}

.bcspg-pill--bogo,
.bcspg-pill--ounce{
    background:var(--bcspg-lime);
}

.bcspg-card__cta{
    margin-top:auto;
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #000000;
    border-radius:999px;
    padding:11px 13px;
    background:var(--bcspg-yellow);
    color:#000000;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    letter-spacing:.03em;
    line-height:1.15;
    cursor:pointer;
    user-select:none;
    transition:transform .06s ease, filter .12s ease;
}

.bcspg-card__cta:hover,
.bcspg-card__cta:focus{
    color:#000000;
    filter:brightness(.98);
    text-decoration:none;
    outline:none;
}

.bcspg-card__cta:active{
    transform:translateY(1px);
}

.bcspg-card__cta[disabled],
.bcspg-card__cta--soldout{
    background:#b91c1c;
    border-color:#b91c1c;
    color:#ffffff;
    cursor:not-allowed;
    opacity:1;
}

.bcspg-card__cta--select_options,
.bcspg-card__cta--size_grid{
    background:var(--bcspg-yellow);
}

.bcspg-card--bogo{
    border-color:rgba(22,163,74,.22);
}

.bcspg-card--ounce{
    border-color:rgba(165,220,92,.55);
}


/* Automatic per-product template states.
   These are added from product tags/categories, not from the shortcode. */
/* Keep promo pills above the main CTA while the CTA stays pinned lower. */
.bcspg-card__pills{
    order:20;
    margin-top:2px;
}

.bcspg-card__cta{
    order:30;
}

.bcspg-card--template-bogo .bcspg-pill--bogo{
    background:var(--bcspg-lime);
}

.bcspg-card--template-ounce .bcspg-pill--ounce{
    background:var(--bcspg-lime);
}

.bcspg-card--template-size_grid .bcspg-card__sizes,
.bcspg-card--size-grid .bcspg-card__sizes{
    margin-top:1px;
}

.bcspg-card--sold-out .bcspg-card__media img,
.bcspg-card--sold-out .bcspg-card__img{
    filter:grayscale(.2);
}


.bcspg-card__cta--loading,
.bcspg-card__cta[data-state="loading"],
.bcspg-load-more[data-state="loading"]{
    opacity:.72;
    cursor:wait;
}

.bcspg-card__cta--added,
.bcspg-card__cta[data-state="added"]{
    background:var(--bcspg-lime);
    color:#111111;
}

.bcspg-load-more-wrap{
    display:flex;
    justify-content:center;
    margin-top:18px;
}

.bcspg-load-more{
    min-width:160px;
    appearance:none;
    border:1px solid #111111;
    border-radius:999px;
    background:var(--bcspg-yellow);
    color:#111111;
    padding:12px 18px;
    cursor:pointer;
    font-weight:800;
    line-height:1.15;
}

.bcspg-load-more[disabled]{
    opacity:.62;
    cursor:wait;
}

.bcspg-sentinel{
    width:100%;
    height:1px;
}

.bcspg-wrap[data-bcspg-infinite="1"] .bcspg-load-more-wrap{
    display:none;
}

.bcspg-skeleton-card{
    pointer-events:none;
    overflow:hidden;
}

.bcspg-skeleton-media{
    aspect-ratio:1/1;
    background:linear-gradient(90deg, #eeeeee 0%, #f8f8f8 50%, #eeeeee 100%);
    background-size:200% 100%;
    animation:bcspgSkeleton 1.15s ease-in-out infinite;
}

.bcspg-skeleton-body{
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:9px;
    align-items:center;
}

.bcspg-skeleton-line,
.bcspg-skeleton-button{
    display:block;
    border-radius:999px;
    background:linear-gradient(90deg, #eeeeee 0%, #f8f8f8 50%, #eeeeee 100%);
    background-size:200% 100%;
    animation:bcspgSkeleton 1.15s ease-in-out infinite;
}

.bcspg-skeleton-line--title{ width:82%; height:12px; }
.bcspg-skeleton-line--reviews{ width:58%; height:12px; }
.bcspg-skeleton-line--price{ width:44%; height:13px; }
.bcspg-skeleton-button{ width:100%; height:40px; margin-top:4px; }

@keyframes bcspgSkeleton{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
}

html.bcspg-modal-open{
    overflow:hidden;
}

.bcspg-modal[hidden]{
    display:none !important;
}

.bcspg-modal{
    position:fixed;
    inset:0;
    z-index:99999990;
    display:none;
}

.bcspg-modal.is-open{
    display:block !important;
}

.bcspg-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.bcspg-modal__panel{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:min(520px, calc(100% - 24px));
    max-height:calc(100dvh - 28px);
    overflow:hidden;
    background:#ffffff;
    border:1px solid rgba(0,0,0,.12);
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.28);
    color:#111111;
}

.bcspg-modal__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 16px;
    border-bottom:1px solid var(--bcspg-border, #e9e9e9);
}

.bcspg-modal__title{
    font-size:16px;
    font-weight:800;
    letter-spacing:.01em;
    line-height:1.2;
}

.bcspg-modal__close{
    appearance:none;
    border:0;
    background:transparent;
    color:#111111;
    font-size:22px;
    line-height:1;
    padding:4px 8px;
    cursor:pointer;
}

.bcspg-modal__body{
    padding:14px 16px 16px;
}

.bcspg-modal__meta{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:12px;
}

.bcspg-modal__product{
    font-weight:700;
    line-height:1.3;
}

.bcspg-modal__subtitle,
.bcspg-modal__status{
    font-size:12px;
    color:#555555;
}

.bcspg-modal__status{
    min-height:16px;
    margin-top:10px;
    text-align:center;
    color:#b91c1c;
    font-weight:800;
}

.bcspg-modal__list{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:56dvh;
    overflow:auto;
    padding-right:2px;
}

.bcspg-modal__loading,
.bcspg-modal__empty{
    padding:14px;
    border:1px dashed #dddddd;
    border-radius:12px;
    text-align:center;
    font-weight:800;
    color:#333333;
}

.bcspg-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid #ececec;
    border-radius:13px;
    padding:12px 12px;
    background:#ffffff;
}

.bcspg-option__left{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.bcspg-option__name{
    font-size:14px;
    font-weight:700;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.bcspg-option__price{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    font-size:13px;
    font-weight:600;
    line-height:1.25;
}

.bcspg-option__price del{
    opacity:.55;
    font-weight:500;
    text-decoration-thickness:1px;
}

.bcspg-option__price ins{
    color:#111111;
    font-weight:700;
    text-decoration:none;
}

.bcspg-option__btn{
    flex:0 0 auto;
    appearance:none;
    border:1px solid #111111;
    border-radius:999px;
    background:var(--bcspg-yellow, #ffbb3a);
    color:#111111;
    cursor:pointer;
    padding:10px 14px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    line-height:1;
}

.bcspg-option__btn:disabled,
.bcspg-option__btn.is-disabled{
    background:#f1f1f1;
    border-color:#dddddd;
    color:#777777;
    cursor:not-allowed;
    opacity:1;
}

@media (max-width: 768px){
    .bcspg-grid{
        grid-template-columns:repeat(var(--bcspg-mobile-cols, 2), minmax(0, 1fr));
        gap:12px;
    }

    .bcspg-card__body{
        padding:10px;
        gap:6px;
    }

    .bcspg-card__title{
        font-size:12px;
    }

    .bcspg-card__reviews{
        font-size:11px;
    }

    .bcspg-card__price{
        font-size:12px;
    }

    .bcspg-badge{
        font-size:8px;
        padding:5px 8px;
    }

    .bcspg-pill{
        min-height:26px;
        font-size:10px;
        padding:6px 10px;
    }

    .bcspg-size-btn{
        font-size:10px;
        padding:6px 2px;
    }

    .bcspg-card__cta{
        min-height:38px;
        padding:10px;
        font-size:11px;
    }
}


@media (max-width: 768px){
    .bcspg-modal__panel{
        width:calc(100% - 18px);
        border-radius:16px;
    }
    .bcspg-option{
        padding:9px 10px;
        gap:8px;
    }
    .bcspg-option__name{
        font-size:13px;
    }
    .bcspg-option__price{
        font-size:12px;
    }
    .bcspg-option__btn{
        padding:9px 12px;
        font-size:11px;
    }
}


/* Hide WooCommerce default View cart link inside Smart Grid cards.
   The grid/slide cart handles post-add-to-cart UX itself. */
.bcspg-card .added_to_cart,
.bcspg-card .wc-forward{
    display:none !important;
}

/* v1.4.0: on-card size selection states */
.bcspg-size-btn.is-loading{
    opacity:.68;
    cursor:wait;
}

.bcspg-card__cta[data-state="selected_variation"],
.bcspg-card__cta[data-state="selected_size_options"]{
    background:var(--bcspg-yellow);
    color:#000000;
}

.bcspg-card__cta[data-state="size_unavailable"]{
    background:#b91c1c;
    border-color:#b91c1c;
    color:#ffffff;
}


/* v1.4.0: typography polish - easier to read product cards and option popup */
.bcspg-card,
.bcspg-modal{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.bcspg-card__title,
.bcspg-option__name,
.bcspg-modal__title{
    text-wrap:balance;
}

.bcspg-modal__subtitle{
    line-height:1.4;
}
