/* ══════════════════════════════════════════════════════════════════════
   SECURITPRO — Hello Elementor Theme Compatibility Layer  v6.0.0
   Bridges plugin design tokens → Elementor Global Design System
   Author: SecuritPro Dev
   ══════════════════════════════════════════════════════════════════════ */

/* ── Step 1: Resolve Elementor globals into SPMM tokens ─────────────── */
:root {
    /* Primary accent — falls back to amber if Elementor not set */
    --spmm-primary:       var(--e-global-color-accent,    #F59E0B);
    --spmm-primary-dk:    var(--e-global-color-accent,    #D97706);
    --spmm-primary-lt:    #FEF3C7;

    /* Text & surface */
    --spmm-text:          var(--e-global-color-text,      #0F172A);
    --spmm-muted:         #64748B;
    --spmm-border:        #E8EDF3;
    --spmm-bg-soft:       #F8FAFC;
    --spmm-bg-white:      #ffffff;

    /* Dark tones (sidebar / footer / dark blocks) */
    --spmm-dark:          #0D111A;
    --spmm-dark-2:        #1E293B;

    /* Typography — picks up Elementor's global font if set */
    --spmm-font-body:     var(--e-global-typography-text-font-family,
                          var(--e-global-typography-primary-font-family,
                          'DM Sans', -apple-system, sans-serif));
    --spmm-font-head:     var(--e-global-typography-primary-font-family,
                          'Syne', 'DM Sans', sans-serif);

    /* Radius scale */
    --spmm-r-sm:   8px;
    --spmm-r-md:   12px;
    --spmm-r-lg:   16px;
    --spmm-r-xl:   20px;
    --spmm-r-pill: 100px;

    /* Shadow scale */
    --spmm-shadow-xs: 0 1px 4px rgba(0,0,0,.06);
    --spmm-shadow-sm: 0 2px 10px rgba(0,0,0,.07);
    --spmm-shadow-md: 0 6px 24px rgba(0,0,0,.10);
    --spmm-shadow-lg: 0 14px 48px rgba(0,0,0,.13);
    --spmm-shadow-amber: 0 8px 28px rgba(245,158,11,.32);

    /* Transition */
    --spmm-ease: cubic-bezier(.22,.68,0,1.2);
    --spmm-dur:  .26s;
}

/* ── Step 2: Reset Hello Elementor quirks that break layout ─────────── */

/* Hello Elementor sets box-sizing on *, honour that */
.spmm-boutique-wrap *,
.spmm-product-page *,
.spmm-products-grid * {
    box-sizing: border-box;
}

/* Hello Elementor removes ul margin/padding — restore for WC lists */
.spmm-boutique-main ul.products,
.spmm-product-page ul.products {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Hello Elementor's .entry-content p margin can bleed into product desc */
.spmm-boutique-main .entry-content p,
.spmm-product-page .entry-content p {
    margin-bottom: 0.75em;
}

/* Elementor container padding reset inside boutique/product wrappers */
.elementor-location-archive .e-con,
.elementor-location-archive .e-con-inner,
.elementor-location-single .e-con,
.elementor-location-single .e-con-inner {
    --padding-block-start:  0 !important;
    --padding-block-end:    0 !important;
    padding-block-start:    0 !important;
    padding-block-end:      0 !important;
}

/* Prevent Hello Elementor's section inner padding from double-indenting */
.spmm-boutique-wrap .elementor-section-boxed .elementor-container,
.spmm-product-page   .elementor-section-boxed .elementor-container {
    max-width: 100%;
}

/* ── Step 3: WooCommerce native element resets for Hello Elementor ───── */

/* WC breadcrumb conflicts */
.woocommerce-breadcrumb {
    display: none; /* SPMM ships its own breadcrumb */
}

/* WC page title — managed by SPMM hero */
.spmm-boutique-wrap .woocommerce-products-header {
    display: none;
}

/* Hello Elementor link colour can turn amber links purple — lock them */
.spmm-boutique-wrap a,
.spmm-product-page a,
.spmm-products-grid a {
    color: inherit;
    text-decoration: none;
}

/* ── Step 4: Typography harmonisation ───────────────────────────────── */

/* Apply resolved body font everywhere in SPMM sections */
.spmm-boutique-wrap,
.spmm-product-page,
.spmm-products-grid,
.spmm-shop-filters,
.spmm-breadcrumb {
    font-family: var(--spmm-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings use display font */
.spmm-boutique-wrap h1,
.spmm-boutique-wrap h2,
.spmm-boutique-wrap h3,
.spmm-product-page h1,
.spmm-product-page h2,
.spmm-product-page h3,
.spmm-pw-title,
.spmm-shop-hero-title {
    font-family: var(--spmm-font-head);
    letter-spacing: -0.03em;
}

/* ── Step 5: Hello Elementor page-level layout helpers ──────────────── */

/* When SPMM renders inside an Elementor flex/grid container */
.elementor-widget-spmm_products .elementor-widget-container {
    width: 100%;
}

/* Prevent Elementor default widget padding from squishing the grid */
.elementor-widget-spmm_products {
    width: 100% !important;
}

/* ── Step 6: Elementor colour override hooks ─────────────────────────
   If site owner changes accent in Elementor > Site Settings > Global Colors,
   the plugin auto-inherits it via CSS var cascade.
   These rules ensure our UI elements USE those resolved values.
─────────────────────────────────────────────────────────────────────── */

/* Amber-tinted elements: remap to Elementor accent when available */
.spmm-pw-badge--sale,
.spmm-cat-pill.is-active,
.spmm-filter-cat-link.active .spmm-filter-cat-check,
.spmm-boutique-main ul.products li.product a.button:hover,
.spmm-boutique-main ul.products li.product button.add_to_cart_button:hover,
.spmm-pw-btn:hover,
.spmm-pw-view-all,
.spmm-sidebar-help-btn {
    background: var(--spmm-primary) !important;
}

.spmm-pw-name a:hover,
.spmm-filter-cat-link.active,
.spmm-boutique-main ul.products li.product .price .amount,
.spmm-pw-price .amount {
    color: var(--spmm-primary-dk) !important;
}

/* ── Step 7: Smooth scroll & focus ring for accessibility ───────────── */
html {
    scroll-behavior: smooth;
}

.spmm-boutique-wrap a:focus-visible,
.spmm-product-page   a:focus-visible,
.spmm-products-grid  a:focus-visible {
    outline: 2px solid var(--spmm-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Step 8: Quantity stepper from Hello Elementor ──────────────────── */
/* Hello Elementor's global input style can override WC quantity fields */
.spmm-product-page .quantity input[type=number],
.spmm-product-page input.qty {
    -moz-appearance: textfield !important;
}
.spmm-product-page .quantity input[type=number]::-webkit-inner-spin-button,
.spmm-product-page .quantity input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}

/* ── Step 9: Hello Elementor mobile menu z-index truce ──────────────── */
.spmm-shop-filters,
.spmm-boutique-sidebar {
    z-index: 10; /* below Elementor sticky header (usually 9999) */
}

/* ── Step 10: Print / no-js fallbacks ───────────────────────────────── */
@media print {
    .spmm-boutique-sidebar,
    .spmm-cat-pills,
    .spmm-shop-hero-stat { display: none !important; }
    .spmm-boutique-layout { grid-template-columns: 1fr !important; }
}

/* ── SPMM Fixed Nav Compatibility ── */
/* Prevent Hello Elementor / theme from showing its own header above ours */
.site-header:has(#spmm-wrap),
body:has(#spmm-wrap) .site-header:not(:has(.spmm-nav)) {
    display: none !important;
}

/* Remove Elementor sticky kit conflicts */
body:has(#spmm-wrap) [data-sticky="1"] .spmm-nav {
    position: fixed !important;
    top: 0 !important;
}

/* Admin bar offset — when WP admin bar is visible */
body.admin-bar #spmm-wrap .spmm-nav {
    top: 32px !important;
}
@media (max-width: 782px) {
    body.admin-bar #spmm-wrap .spmm-nav {
        top: 46px !important;
    }
}

/* ══════════════════════════════════════════════════════
   GLOBAL MOBILE RESPONSIVE RESET
   Ensures all SPMM widgets are fluid on every screen size
══════════════════════════════════════════════════════ */

/* Prevent horizontal overflow */
.spmm-cats-wrap,
.spmm-cats-grid,
.spmm-sp,
.spmm-sp-grid,
.spmm-pp-main,
.spmm-boutique-layout,
#spmm-loop-main,
.spmm-cats-swiper {
  max-width: 100%;
  box-sizing: border-box;
}

/* All images fluid */
.spmm-cat-img,
.spmm-sp-img,
.spmm-pp-slide-img,
.spmm-loop-img,
.spmm-cd-item-img img {
  max-width: 100%;
}

/* Touch-friendly tap targets */
@media (max-width: 960px) {
  .spmm-cat-card-link,
  .spmm-sp-arrow-btn,
  .spmm-cats-filter,
  .spmm-sp-filter-open,
  .spmm-cd-qty-btn,
  .spmm-pp-qty-btn { min-height: 44px; }
  /* Carousel arrows tucked inside on mobile */
  .spmm-cats-prev,
  .spmm-cats-next { display: none; }
}

/* Viewport meta enforcement via CSS */
@media screen and (max-width: 480px) {
  /* Ultra-small: prevent any overflow */
  .spmm-cats-wrap *,
  .spmm-sp *,
  .spmm-pp * { word-break: break-word; }
}