/** Shopify CDN: Minification failed

Line 86:0 All "@import" rules must come first

**/
/*// =============================================================================
// Ella Custom CSS - Customize The Style For Layout
// =============================================================================

// =============================================================================
//
// IMPORTANT DISCLAIMER
// Shopify is notifying shop owners about the need to convert scss files to css files.
// Please use only CSS to style the layout.
//
// =============================================================================*/

/* ============================================================
   Product Page Redesign - match reference (Size/Frame swatches,
   Color swatches, Quantity box, Add to Cart, Buy with Shop)
   ============================================================ */

/* Size & Frame text buttons (default / unselected) - rounded like Buy Now */
.product-form__label .text{
    min-width: 46px;
    height: 42px;
    line-height: 40px;
    padding: 0 14px;
    font-weight: 700 !important;
    font-size: 13px;
    border-radius: 10px !important;
    border: 1px solid #000000;
    background-color: #ffffff;
    color: #000000;
}

/* Color swatches - circular */
.product-form__swatch .product-form__label{
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    border: 1px solid #d1d1d1;
    padding: 2px;
}

.product-form__swatch .product-form__label .pattern{
    border-radius: 50% !important;
}

/* Quantity selector box */
.quantity{
    border: 1px solid #d1d1d1;
    border-radius: 10px !important;
    overflow: hidden;
}

.quantity__input{
    text-align: center;
    border: none;
    font-weight: 700 !important;
}

/* Add to Cart button - OUTLINE style: transparent/white bg, black border+text */
.product-form__submit.button{
    border-radius: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
}

.product-form__submit.button--primary{
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    box-shadow: none !important;
}

.product-form__submit.button--primary:hover{
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* ============================================================
   Typography + Highlight match (reignandhail.com reference)
   Clean modern sans-serif + navy "Sale" pill badge
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --font-body-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --product-title-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading-weight: 700;
    --heading-letter-spacing: -.01em;
    --product-title-font-weight: 700;
    --font-body-weight: 500;
}

.product-title, .productView-title, h1.title{
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* General product page text - bolder (labels like "Size", "Add a Frame", descriptions) */
.product-form__input .form__label,
.form__label-combined,
.productView-info,
.productView-details,
.price{
    font-weight: 600 !important;
}

body, p, .productView-description, .rte{
    font-weight: 500 !important;
}

/* Sale badge - navy rounded pill like reference */
.halo-productBadges .badge.sale-badge,
.badge.sale-badge{
    background-color: #1f3b73;
    color: #ffffff;
    border-radius: 20px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Compare-at price styling - subdued grey strikethrough like reference */
.price del,
.price .compare-price{
    color: #8a8a8a;
    font-weight: 500 !important;
}

.price ins,
.price .sale-price{
    font-weight: 700 !important;
}

/* ============================================================
   Brand color (Faizy Shop blue #2C579A) - selection & Buy it Now
   Add to Cart is untouched (stays outline white/black above).
   ============================================================ */

/* Selected Size / Frame option - FULL solid blue fill, not outline */
.product-form__radio:checked + .product-form__label .text{
    background-color: #2C579A !important;
    color: #ffffff !important;
    border-color: #2C579A !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.product-form__swatch .product-form__radio:checked + .product-form__label{
    background-color: #2C579A !important;
    border-color: #2C579A !important;
    box-shadow: none !important;
}

/* Buy it Now button - brand blue, rounded */
.product-form__submit.button--secondary,
.bin-btn,
.buy-it-now,
[name="checkout"]{
    background-color: #2C579A !important;
    border-color: #2C579A !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.product-form__submit.button--secondary:hover,
.bin-btn:hover,
.buy-it-now:hover,
[name="checkout"]:hover{
    background-color: #1f4177 !important;
    border-color: #1f4177 !important;
}

.product-form__label .text:hover{
    border-color: #2C579A;
}

/* ============================================================
   Buy It Now animation - pulsing glow to grab attention
   ============================================================ */
@keyframes buyNowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(44, 87, 154, 0.55);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(44, 87, 154, 0);
        transform: scale(1.015);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(44, 87, 154, 0);
        transform: scale(1);
    }
}

.shopify-payment-button__button,
.shopify-payment-button__button--unbranded{
    border-radius: 10px !important;
    background-color: #2C579A !important;
    animation: buyNowPulse 2s infinite;
}

.shopify-payment-button__button:hover,
.shopify-payment-button__button--unbranded:hover{
    background-color: #1f4177 !important;
    animation-play-state: paused;
}

.shopify-payment-button{
    overflow: visible !important;
}