@charset "utf-8";

/* ============================================================
   Shop Page — /shop/
   Shopify embedded collection styles
   ============================================================ */

/* Intro section */
#ShopIntro {
    text-align: center;
}
#ShopIntro .txt-col {
    max-width: 700px;
    margin: 1.5em auto 0;
}

/* Shopify collection embed wrapper */
#shopify-collection-wrap {
    min-height: 400px;
    padding: 0 0 3em;
}

/* Placeholder shown before the Shopify embed is added */
.shop-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    border: 1px solid rgba(242, 230, 172, 0.2);
    border-radius: 4px;
    color: rgba(167, 167, 183, 0.4);
    font-family: Cinzel, "Times New Roman", Times, serif;
    letter-spacing: 0.1em;
    font-size: 1.1em;
}

/* ============================================================
   Shopify Buy Button overrides
   These selectors target the iframe/div injected by the
   Shopify Buy Button SDK. Refine once the embed is in place.
   ============================================================ */

/* Full-width product grid */
#shopify-collection-wrap .shopify-buy-frame,
#shopify-collection-wrap .shopify-buy-frame iframe {
    width: 100% !important;
}

/* Product popup (modal) backdrop */
.shopify-buy-frame--modal {
    background-color: rgba(255, 255, 255, 0.75) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(2px) !important;
}

/* Cart drawer — widen by 10% (default max-width is 350px) */
.shopify-buy-frame--cart {
    max-width: 400px !important;
}

/* Cart toggle icon — keep visible even when the cart is empty
   (SDK hides it by default until count > 0) */
.shopify-buy-frame--toggle.is-sticky {
    display: block !important;
}

/* Responsive */
@media (max-width: 768px) {
    #shopify-collection-wrap {
        padding: 0 0 2em;
    }
    #ShopProducts > .padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}