/*
 * Theme Name:  Masazeri Child
 * Description: Child theme for futurio-storefront — Wellness & Massage WooCommerce store
 * Template:    futurio-storefront
 * Version:     1.0.0
 * Text Domain: masazeri
 */

/* ============================================================
   DESIGN TOKENS — all color, spacing, typography variables
   ============================================================ */
:root {
    /* Primary: orange — #FF6A3D per UI kit */
    --maz-orange:        #FF6A3D;
    --maz-orange-hover:  #E9582E;
    --maz-orange-light:  #FFD6CC;
    --maz-orange-border: #FFD6CC;

    /* Neutrals — UI kit */
    --maz-dark:          #1F1F1F;
    --maz-charcoal:      #1F1F1F;
    --maz-gray-700:      #3D3D3D;
    --maz-gray-500:      #6F6A65;
    --maz-gray-400:      #7A746E;
    --maz-gray-300:      #B0ABA4;
    --maz-gray-200:      #DED7CF;
    --maz-border:        #DED7CF;

    /* Backgrounds — UI kit */
    --maz-white:         #FFFFFF;
    --maz-surface:       #FFFFFF;
    --maz-beige:         #F6EFE6;
    --maz-beige-mid:     #EDE5D8;
    --maz-sand:          #E7D7C0;

    /* Sage green — UI kit #7FA08A */
    --maz-sage:          #7FA08A;
    --maz-sage-dark:     #5E8270;
    --maz-sage-light:    #EBF2ED;

    /* Star rating */
    --maz-star:          #FFC000;

    /* Focus ring */
    --maz-focus-ring:    #FFD6CC;

    /* Typography */
    --maz-font:          'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --maz-font-size-xs:  12px;
    --maz-font-size-sm:  14px;
    --maz-font-size-md:  16px;
    --maz-font-size-lg:  18px;
    --maz-font-size-xl:  24px;
    --maz-font-size-2xl: 32px;
    --maz-font-size-3xl: 40px;
    --maz-font-size-4xl: 52px;
    --maz-line-height:   1.6;

    /* Spacing */
    --maz-space-xs:      8px;
    --maz-space-sm:      12px;
    --maz-space-md:      24px;
    --maz-space-lg:      48px;
    --maz-space-xl:      80px;
    --maz-space-2xl:     120px;

    /* Border radius */
    --maz-radius-xs:     2px;
    --maz-radius-sm:     4px;
    --maz-radius-md:     8px;
    --maz-radius-lg:     16px;
    --maz-radius-xl:     24px;
    --maz-radius-pill:   50px;

    /* Shadows */
    --maz-shadow-xs:     0 1px 4px rgba(0, 0, 0, 0.06);
    --maz-shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.08);
    --maz-shadow-md:     0 4px 16px rgba(0, 0, 0, 0.12);
    --maz-shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.16);
    --maz-shadow-xl:     0 16px 48px rgba(0, 0, 0, 0.20);

    /* Transitions */
    --maz-transition:    0.25s ease;
    --maz-transition-slow: 0.4s ease;

    /* Layout */
    --maz-container:     1280px;
    --maz-container-sm:  960px;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-md);
    line-height: var(--maz-line-height);
    color: var(--maz-charcoal);
    background-color: var(--maz-surface);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   TYPOGRAPHY — global headings
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--maz-font);
    font-weight: 700;
    line-height: 1.2;
    color: var(--maz-dark);
    margin-top: 0;
}

h1 { font-size: var(--maz-font-size-4xl); }
h2 { font-size: var(--maz-font-size-3xl); }
h3 { font-size: var(--maz-font-size-2xl); }
h4 { font-size: var(--maz-font-size-xl); }

p { margin-top: 0; }

a {
    color: var(--maz-orange);
    text-decoration: none;
    transition: color var(--maz-transition);
}

a:hover {
    color: var(--maz-orange-hover);
}

/* ============================================================
   BUTTON SYSTEM — 4 types × 4 states (Default/Hover/Focus/Disabled)
   Types: Primary | Outline | Ghost | Add-to-Cart
   ============================================================ */

/* ── Base — shared resets ──────────────────────────────────── */
.maz-btn,
.maz-btn-primary,
.maz-btn-outline,
.maz-btn-ghost,
.maz-btn-cart,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--maz-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 14px 24px;
    /* !important — Kirki's dynamic customizer CSS (?action=kirki-styles,
       loaded last in <head>) re-asserts border-radius:0 on nearly this
       exact selector list; same collision pattern as the color overrides
       fixed earlier in this project. */
    border-radius: 5px !important;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, box-shadow .2s ease, transform .1s ease;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: .02em;
    outline: none;
    -webkit-appearance: none;
}

/* ── PRIMARY BUTTON ────────────────────────────────────────── */
/* Default — !important beats the Futurio color-preset inline CSS (priority 10000) */
.maz-btn-primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--maz-orange) !important;
    color: #FFFFFF !important;
    border-color: var(--maz-orange) !important;
}

/* Hover */
.maz-btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--maz-orange-hover) !important;
    border-color: var(--maz-orange-hover) !important;
    color: #FFFFFF !important;
    text-decoration: none;
}

/* Focus */
.maz-btn-primary:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
    background-color: var(--maz-orange);
    border-color: var(--maz-orange);
    color: #FFFFFF;
    box-shadow: 0 0 0 3px var(--maz-focus-ring);
}

/* Active */
.maz-btn-primary:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
    background-color: var(--maz-orange-hover);
    border-color: var(--maz-orange-hover);
    transform: scale(.98);
}

/* Disabled */
.maz-btn-primary:disabled,
.maz-btn-primary.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
    background-color: var(--maz-orange-light);
    border-color: var(--maz-orange-light);
    color: #FFFFFF;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── SECONDARY OUTLINE BUTTON ──────────────────────────────── */
/* Default */
.maz-btn-outline,
.elementor-button.maz-btn-outline {
    background-color: transparent;
    color: var(--maz-dark);
    border-color: var(--maz-border);
}

/* Hover */
.maz-btn-outline:hover,
.elementor-button.maz-btn-outline:hover {
    background-color: rgba(31, 31, 31, .04);
    border-color: var(--maz-dark);
    color: var(--maz-dark);
    text-decoration: none;
}

/* Focus */
.maz-btn-outline:focus-visible,
.elementor-button.maz-btn-outline:focus-visible {
    border-color: var(--maz-dark);
    box-shadow: 0 0 0 3px var(--maz-focus-ring);
}

/* Active */
.maz-btn-outline:active {
    background-color: rgba(31, 31, 31, .08);
    transform: scale(.98);
}

/* Disabled */
.maz-btn-outline:disabled,
.maz-btn-outline.disabled {
    background-color: transparent;
    border-color: var(--maz-border);
    color: var(--maz-gray-300);
    cursor: not-allowed;
    pointer-events: none;
}

/* ── GHOST / TEXT BUTTON ───────────────────────────────────── */
/* Default */
.maz-btn-ghost,
.elementor-button.maz-btn-ghost {
    background-color: transparent;
    color: var(--maz-dark);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

/* Hover */
.maz-btn-ghost:hover,
.elementor-button.maz-btn-ghost:hover {
    color: var(--maz-orange);
    background-color: transparent;
    text-decoration: none;
}

/* Focus */
.maz-btn-ghost:focus-visible {
    color: var(--maz-orange);
    box-shadow: 0 0 0 3px var(--maz-focus-ring);
    border-radius: 4px;
}

/* Active */
.maz-btn-ghost:active {
    color: var(--maz-orange-hover);
}

/* Disabled */
.maz-btn-ghost:disabled,
.maz-btn-ghost.disabled {
    color: var(--maz-gray-300);
    cursor: not-allowed;
    pointer-events: none;
}

/* ── ADD TO CART BUTTON ────────────────────────────────────── */
/* Default — same base as primary, cart icon via ::before */
.maz-btn-cart,
.woocommerce a.button.add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
    background-color: var(--maz-orange);
    color: #FFFFFF;
    border-color: var(--maz-orange);
}

/* Cart icon */
.maz-btn-cart::before,
.woocommerce a.button.add_to_cart_button::before,
.woocommerce button.single_add_to_cart_button::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hover */
.maz-btn-cart:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover {
    background-color: var(--maz-orange-hover);
    border-color: var(--maz-orange-hover);
    color: #FFFFFF;
    text-decoration: none;
}

/* Focus */
.maz-btn-cart:focus-visible,
.woocommerce a.button.add_to_cart_button:focus-visible,
.woocommerce button.single_add_to_cart_button:focus-visible {
    box-shadow: 0 0 0 3px var(--maz-focus-ring);
}

/* Active */
.maz-btn-cart:active,
.woocommerce a.button.add_to_cart_button:active,
.woocommerce button.single_add_to_cart_button:active {
    background-color: var(--maz-orange-hover);
    transform: scale(.98);
}

/* Disabled + AJAX loading state */
.maz-btn-cart:disabled,
.maz-btn-cart.disabled,
.woocommerce a.button.add_to_cart_button.loading,
.woocommerce a.button.add_to_cart_button:disabled {
    background-color: var(--maz-orange-light);
    border-color: var(--maz-orange-light);
    color: #FFFFFF;
    cursor: not-allowed;
    pointer-events: none;
}

/* Added to cart checkmark state */
.woocommerce a.button.add_to_cart_button.added {
    background-color: var(--maz-sage);
    border-color: var(--maz-sage);
}

/* ── Elementor button widget overrides ─────────────────────── */
.elementor-button-wrapper .elementor-button {
    border-radius: 12px;
    font-family: var(--maz-font);
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .1s ease;
}

.elementor-button-wrapper .elementor-button:focus-visible {
    box-shadow: 0 0 0 3px var(--maz-focus-ring);
    outline: none;
}

/* ============================================================
   WOOCOMMERCE — global overrides
   ============================================================ */

/* Sale badge — WooCommerce core (woocommerce.css, not woocommerce-layout.css)
   has the exact same selector `.woocommerce span.onsale` with its own
   olive/yellow background (#958e09, its --wc-highlight token). Same
   specificity means whichever stylesheet prints later in <head> wins —
   inconsistent per page type (worked on homepage/product, lost on the
   shop archive) since enqueue order isn't identical across templates.
   !important removes the coin-flip. */
.woocommerce span.onsale {
    background-color: var(--maz-orange) !important;
    color: var(--maz-white) !important;
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-xs);
    font-weight: 700;
    border-radius: var(--maz-radius-pill);
    min-height: auto;
    min-width: auto;
    padding: 4px 10px;
    line-height: 1.4;
    top: 12px;
    left: 12px;
}

/* Price */
.woocommerce .price {
    color: var(--maz-dark);
    font-weight: 700;
}

.woocommerce .price ins {
    font-weight: 700;
    color: var(--maz-orange);
    text-decoration: none;
}

.woocommerce .price del {
    color: var(--maz-gray-400);
    font-weight: 400;
    font-size: 0.9em;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
    color: var(--maz-star);
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
    font-size: var(--maz-font-size-sm);
    color: var(--maz-gray-400);
    margin-bottom: var(--maz-space-md);
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--maz-gray-400);
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--maz-orange);
}

/* Notices */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--maz-orange);
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--maz-orange);
}

/* ============================================================
   TRUST BADGES — reusable component
   ============================================================ */
.maz-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--maz-space-lg);
    padding: var(--maz-space-md) var(--maz-space-md);
    background-color: var(--maz-white);
    border-top: 1px solid var(--maz-border);
    border-bottom: 1px solid var(--maz-border);
}

.maz-trust-item {
    display: flex;
    align-items: center;
    gap: var(--maz-space-xs);
    font-size: var(--maz-font-size-sm);
    font-weight: 500;
    color: var(--maz-charcoal);
}

.maz-trust-item svg,
.maz-trust-item .maz-trust-icon {
    width: 24px;
    height: 24px;
    color: var(--maz-orange);
    flex-shrink: 0;
}

/* ============================================================
   PRODUCT CARD — reusable across pages
   ============================================================ */
.maz-product-card {
    background: var(--maz-white);
    border-radius: var(--maz-radius-lg);
    overflow: hidden;
    border: 1px solid var(--maz-border);
    transition: all var(--maz-transition);
    position: relative;
}

.maz-product-card:hover {
    box-shadow: var(--maz-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--maz-orange-border);
}

.maz-product-card__image {
    position: relative;
    overflow: hidden;
    background-color: var(--maz-beige);
    aspect-ratio: 1 / 1;
}

.maz-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--maz-transition-slow);
}

.maz-product-card:hover .maz-product-card__image img {
    transform: scale(1.05);
}

.maz-product-card__body {
    padding: var(--maz-space-md);
}

.maz-product-card__title {
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-dark);
    margin-bottom: var(--maz-space-xs);
    line-height: 1.4;
}

.maz-product-card__price {
    font-size: var(--maz-font-size-lg);
    font-weight: 700;
    color: var(--maz-dark);
}

/* ============================================================
   SECTION TITLE — reusable heading component
   ============================================================ */
.maz-section-title {
    font-size: var(--maz-font-size-2xl);
    font-weight: 700;
    color: var(--maz-dark);
    margin-bottom: 8px;
}

.maz-section-subtitle {
    font-size: var(--maz-font-size-md);
    color: var(--maz-gray-500);
    margin-bottom: var(--maz-space-md);
}

.maz-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--maz-space-md);
    flex-wrap: wrap;
    gap: var(--maz-space-sm);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --maz-font-size-4xl: 40px;
        --maz-font-size-3xl: 32px;
    }
}

@media (max-width: 768px) {
    :root {
        --maz-font-size-4xl: 32px;
        --maz-font-size-3xl: 26px;
        --maz-font-size-2xl: 22px;
        --maz-space-xl:  48px;
        --maz-space-2xl: 80px;
    }

    /* BT_EW_Product_Slider_Widget (boomtras-elementor-widgets-v2 plugin) —
       used on the homepage and elsewhere per its own widget CSS, slides
       are ~167px wide on phones. Its "Add to Cart"/"Buy on the..." button
       inherits white-space:nowrap from the .maz-btn base rule earlier in
       this file, with no override of its own, so longer labels get cut
       off at the slide's right edge instead of wrapping. Global fix here
       (not scoped to the homepage) since this widget isn't limited to
       one page. */
    .bt-ew-slide .button {
        /* !important — .woocommerce a.button (element+2 classes) outranks
           this classes-only selector regardless of source order. */
        white-space: normal !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 480px) {
    :root {
        --maz-font-size-4xl: 26px;
        --maz-font-size-3xl: 22px;
    }
}