/* =========================================================================
   Vitadoza – GLOBAL full-width / de-framed layout
   Loads site-wide AFTER the Glozin theme CSS (mu-plugin, priority ~99).
   Goal: one uniform page background (no contrasting frame around content),
   wider content containers, full-bleed colored sections, edge-to-edge use
   of the screen. CSS-only. Compatible with the .vl- product landing.
   ========================================================================= */

:root {
    /* Single uniform brand-neutral page background. Keep it the same as
       the body so content never looks like a card floating in a frame. */
    --vd-page-bg: #ffffff;

    /* Wider global containers (was 1200 / 1410). */
    --gz-container-width: 1540px;
    --gz-container-xxl-width: 1600px;
}

/* ------------------------------------------------------------------ *
 * 1) ONE uniform background — kill the "framed/boxed" contrast.
 *    Every structural wrapper inherits the same colour so there is no
 *    visible border/band/frame around the page content.
 * ------------------------------------------------------------------ */
html,
body,
#page.site,
.site-content,
#site-content,
#page-header,
.page-header {
    background-color: var(--vd-page-bg) !important;
}

/* Remove stray frames: borders / shadows / radius that make wrappers
   read as a card on a different background. (Scoped to structural
   wrappers only — does NOT touch product cards, buttons, inputs, etc.) */
#page.site,
.site-content,
#site-content,
#page-header,
.page-header,
.site-content > .container,
.site-content > .container-xxl,
.site-content-container {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ------------------------------------------------------------------ *
 * 2) Wider content containers + sensible inner padding (responsive).
 *    Glozin builds .container / .container-xxl from the CSS vars above,
 *    so raising the vars widens the whole site. We just guarantee
 *    comfortable inner gutters so text never touches the edges.
 * ------------------------------------------------------------------ */
.container,
.container-xxl,
.site-content-container {
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
}

/* Elementor flex containers: widen the boxed inner width to match. */
.e-con {
    --container-max-width: 1600px;
}

/* ------------------------------------------------------------------ *
 * 3) FULL-BLEED section backgrounds (edge-to-edge).
 *    Only TOP-LEVEL Elementor sections (.e-con.e-parent) inside the
 *    main content stretch the full viewport width, so any coloured
 *    section background spans edge-to-edge instead of stopping at a box.
 *    Their inner content (.e-con-inner) stays width-limited & padded,
 *    so text stays readable. Nested child columns are left untouched.
 * ------------------------------------------------------------------ */
#site-content .elementor-section-wrap > .e-con.e-parent,
#site-content > .elementor > .e-con.e-parent,
.elementor-location-single > .e-con.e-parent,
.page-content .e-con.e-parent.e-con-boxed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Keep the inner content of those stretched sections boxed & centered. */
#site-content .e-con.e-parent > .e-con-inner {
    width: 100%;
    max-width: var(--container-max-width, 1600px);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
}

/* Full-width Elementor sections (e-con-full) already span 100% of the
   container; ensure their backgrounds also reach the true viewport edge. */
#site-content .e-con.e-parent.e-con-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ------------------------------------------------------------------ *
 * 4) Header / mega-menu: keep the header itself full-width and clean
 *    (no contrasting frame), but DO NOT alter its internal flex layout.
 * ------------------------------------------------------------------ */
.site-header,
.site-header__section,
.header-main {
    background-color: var(--vd-page-bg);
}

/* ------------------------------------------------------------------ *
 * 5) PROTECT the custom product landing (.vl-).
 *    It already looks the way the client likes (.vl-wrap @ 1480px).
 *    Make sure none of the rules above interfere with it.
 * ------------------------------------------------------------------ */
.vl-wrap {
    max-width: 1480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
}
.vl-wrap,
.vl-wrap * {
    /* never let the full-bleed margins above leak into the landing */
}

/* ------------------------------------------------------------------ *
 * 6) Safety: prevent horizontal scrollbars from the 100vw technique.
 * ------------------------------------------------------------------ */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * 7) MOBILE — edge-to-edge: kill the wide side gutters that squeeze
 *    content on phones. Containers + Elementor inner content drop to a
 *    tiny gutter so sections/images reach the screen edges (as the
 *    client wants), while text keeps a small readable inset.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .container,
    .container-xxl,
    .site-content-container,
    #site-content .e-con.e-parent > .e-con-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Top-level section media that should bleed to the edge on mobile. */
    #site-content .e-con.e-parent > .e-con-inner > .e-con.e-child > .elementor-widget-image,
    #site-content .e-con.e-parent > .e-con-inner > .elementor-widget-image {
        margin-left: -12px;
        margin-right: -12px;
    }
}

/* ------------------------------------------------------------------ *
 * 8) ЕДИН ШРИФТ за латиница И кирилица (Inter).
 *    Темата ползва „Instrument Sans", който НЯМА кирилица → смесените
 *    заглавия (PALACIO Snake Venom + Възстановяващ крем) изглеждат от два
 *    различни шрифта. Inter покрива и двете писмености → еднакъв вид.
 *    Override-ваме Elementor/Glozin font-променливите + текстовите елементи.
 *    НЕ пипаме иконите (те ползват собствен font-family на иконовите класове).
 * ------------------------------------------------------------------ */
:root,
body,
[class*="elementor-kit-"] {
    --e-global-typography-primary-font-family: 'Inter' !important;
    --e-global-typography-secondary-font-family: 'Inter' !important;
    --e-global-typography-text-font-family: 'Inter' !important;
    --e-global-typography-accent-font-family: 'Inter' !important;
    --gz-body-font-family: 'Inter', sans-serif !important;
    --gz-heading-font-family: 'Inter', sans-serif !important;
    --gz-secondary-font-family: 'Inter', sans-serif !important;
}
body,
button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6,
p, a, li, dt, dd, blockquote, label, figcaption, th, td,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-container,
.woocommerce-loop-product__title,
.woocommerce-loop-product__title a,
.product_title,
.woocommerce-Price-amount,
.price,
.button, .wp-element-button, .woocommerce a.button, .elementor-button,
.menu-item, .menu-item > a, .navigation a, nav a,
.widget, .widget-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}