/*==================================================
    PrintPlayland
    Shop + Calendars
==================================================

    Loaded by the shop pages and the free calendar pages
    through $page['styles'].

    01. Product Cards
    02. Prices and Badges
    03. Product Page Layout
    04. Gallery
    05. Buy Box
    06. Callouts and Notices
    07. Holiday Table

==================================================*/


/*==================================================
    01. Product Cards
==================================================*/

.product-card .card-image{

    position:relative;

}

.product-card .card-image img{

    max-height:220px;

    border-radius:var(--radius-small);

}


/*==================================================
    02. Prices and Badges
==================================================*/

.product-price{

    display:flex;
    flex-wrap:wrap;
    align-items:baseline;

    gap:var(--space-sm);

    margin-top:auto;

    color:var(--color-heading);

}

/* only one currency is shown at a time, so $ and ₹ look the same */
.price-usd,
.price-inr{

    font-size:1.25rem;

    font-weight:700;

    font-variant-numeric:lining-nums;

}

.price-separator{

    color:var(--color-border);

}

.product-price-large .price-usd,
.product-price-large .price-inr{

    font-size:2rem;

}

.product-badge{

    position:absolute;
    top:var(--space-sm);
    left:var(--space-sm);

    padding:4px 10px;

    border-radius:999px;

    background:var(--color-warning);

    color:var(--color-heading);

    font-size:.8rem;
    font-weight:700;

}

.product-badge-premium{

    background:var(--color-secondary);

    color:#ffffff;

}


/*==================================================
    03. Product Page Layout
==================================================*/

.product-layout{

    display:grid;

    gap:var(--space-xl);

}

@media (min-width:900px){

    .product-layout{

        grid-template-columns:3fr 2fr;

        align-items:start;

    }

}

.product-side{

    display:flex;
    flex-direction:column;

    gap:var(--space-lg);

}

.product-includes{

    padding:var(--space-lg);

    border:1px solid var(--color-border);
    border-radius:var(--radius-large);

    background:var(--color-surface);

}

.product-includes h2{

    margin-bottom:var(--space-md);

    font-size:1.2rem;

}

.product-includes ul{

    display:grid;

    gap:var(--space-sm);

    padding-left:1.2rem;

}


/*==================================================
    04. Gallery
==================================================*/

.product-gallery{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--space-sm);

}

.product-image{

    display:block;

    overflow:hidden;

    border:1px solid var(--color-border);
    border-radius:var(--radius-medium);

    background:#ffffff;

}

.product-image img{

    display:block;

    width:100%;
    height:auto;

}

.product-image-main{

    grid-column:1 / -1;

}

.product-gallery-placeholder{

    grid-column:1 / -1;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:var(--space-md);

    min-height:320px;

    border:2px dashed var(--color-border);
    border-radius:var(--radius-large);

    background:var(--color-surface);

    color:var(--color-text-light);

}

.product-gallery-placeholder span{

    font-size:4rem;

}


/*==================================================
    05. Buy Box
==================================================*/

.buy-box{

    display:flex;
    flex-direction:column;

    gap:var(--space-md);

    padding:var(--space-lg);

    border:2px solid var(--theme-primary);
    border-radius:var(--radius-large);

    background:#ffffff;

    box-shadow:var(--shadow-small);

}

.buy-box .button{

    width:100%;

}

.button-disabled{

    background:var(--color-border);

    color:var(--color-text-light);

    cursor:not-allowed;

}

.buy-note{

    color:var(--color-text-light);

    font-size:.9rem;

}


/*==================================================
    06. Callouts and Notices
==================================================*/

.premium-callout{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;

    gap:var(--space-lg);

    padding:var(--space-xl);

    border-radius:var(--radius-large);

    background:linear-gradient(135deg, #f0f9ff, #fdf2f8);

    border:1px solid var(--color-border);

}

.premium-callout h2{

    margin-bottom:var(--space-sm);

}

.premium-callout p{

    max-width:620px;

}

.shop-notice{

    padding:var(--space-md) var(--space-lg);

    border-radius:var(--radius-medium);

    background:#fffbeb;

    border:1px solid #fde68a;

    text-align:center;

}


/*==================================================
    07. Holiday Table
==================================================*/

.holiday-table{

    width:100%;

    margin-top:var(--space-md);

    border-collapse:collapse;

}

.holiday-table td{

    padding:var(--space-sm) var(--space-md);

    border-bottom:1px solid var(--color-border);

}

.holiday-date{

    width:9rem;

    color:var(--color-text-light);

    white-space:nowrap;

}


/*==================================================
    08. Currency (one price per visitor)
==================================================*/

/* dollars by default (also without JavaScript); rupees for India / chosen ₹ */
.price-inr{

    display:none;

}

[data-currency="inr"] .price.has-inr .price-usd{

    display:none;

}

[data-currency="inr"] .price.has-inr .price-inr{

    display:inline;

}

/* buy buttons follow the currency when a product has both */
[data-currency="inr"] .buy-box:has(.buy-india) .buy-intl,
:root:not([data-currency="inr"]) .buy-box:has(.buy-intl) .buy-india{

    display:none;

}

.currency-switch{

    display:inline-flex;
    align-items:center;

    gap:var(--space-xs);

    margin:var(--space-md) 0;

    font-size:.9rem;

}

.currency-label{

    margin-right:var(--space-xs);

    color:var(--color-text-light);

}

.currency-switch button,
.chip{

    padding:6px 12px;

    border:1px solid var(--color-border);
    border-radius:999px;

    background:#ffffff;

    color:var(--color-heading);

    font:inherit;
    font-size:.9rem;

    cursor:pointer;

}

.currency-switch button.active,
.chip.active{

    border-color:var(--theme-primary);

    background:#e0f2fe;

    color:var(--color-heading);

    font-weight:600;

}


/*==================================================
    09. Filters
==================================================*/

.shop-filters{

    display:flex;
    flex-direction:column;

    gap:var(--space-sm);

    margin-bottom:var(--space-lg);

}

.filter-row{

    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:var(--space-xs);

}

.filter-label{

    width:5rem;

    color:var(--color-text-light);

    font-size:.9rem;
    font-weight:600;

}

.filter-empty{

    color:var(--color-text-light);

}

.link-button{

    border:none;

    background:none;

    color:var(--theme-primary);

    font:inherit;

    text-decoration:underline;

    cursor:pointer;

}

.product-card[hidden]{

    display:none;

}