/* Shared layout rules.  Keep sizing fluid so parent-theme components work too. */
:root {
    --container: 1280px;
    --page-gutter: clamp(16px, 3vw, 24px);
    --transition: 180ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--background, #fffdfd);
    color: var(--text);
    font-family: "Poppins", sans-serif;
    margin: 0;
    min-width: 0;
}

body,
button,
input,
select,
textarea {
    font-size: 16px;
}

.container {
    margin-inline: auto;
    max-width: var(--container);
    padding-inline: var(--page-gutter);
    width: 100%;
}

img,
picture,
video,
canvas,
svg,
iframe {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

iframe {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

button,
input,
select,
textarea {
    font: inherit;
    max-width: 100%;
}

/* Undo the Motta parent theme's global button styling (style.css sets
   min-width: 160px, line-height: 60px, padding: 0 2em, a background color,
   etc. on every bare <button>). That's fine for its own CTA-style buttons,
   but perfexia's icon-only utility buttons (menu/search toggles, slider
   nav, wishlist heart, close buttons...) never opted into it and were
   silently forced to a 160px min width — the cause of horizontal overflow
   on every page at mobile widths. Real CTA buttons keep their look via the
   .button/.pf-btn classes perfexia already styles explicitly. */
button {
    appearance: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    line-height: normal;
    min-width: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

table {
    border-collapse: collapse;
    max-width: 100%;
}

section {
    padding: 48px 0;
}
    
    .btn{
    
    display:inline-flex;
    
    align-items:center;
    
    justify-content:center;
    
    padding:16px 34px;
    
    border-radius:50px;
    
    font-weight:600;
    
    transition:.35s;
    
    }
    
    .btn-primary{
    
    background:var(--primary);
    
    color:#fff;
    
    box-shadow:var(--shadow-sm);
    
    }
    
    .btn-primary:hover{
    
    transform:translateY(-4px);
    
    background:var(--primary-dark);
    
    }
    
    .btn-outline{

    border:1px solid var(--border);

    color:var(--primary);

    background:#ffffff;

box-shadow:var(--shadow-sm);

    }
    
    .btn-outline:hover{
    
    background:var(--primary);
    
    color:white;
    
    }
    
.section-title{

font-size:clamp(28px, 4vw, 42px);

font-weight:700;

margin-bottom:15px;

}

.section-subtitle{

font-size:clamp(16px, 2vw, 18px);

color:var(--text-light);

margin-bottom:clamp(30px, 5vw, 50px);

}

/* Prevent common WordPress and WooCommerce layouts from overflowing small screens. */
.entry-content,
.woocommerce,
.woocommerce-page,
.wp-site-blocks,
#page,
#content,
main {
    min-width: 0;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.images,
.woocommerce-page div.product div.summary {
    max-width: 100%;
}

@media (max-width: 767px) {
    .woocommerce table.shop_table,
    .woocommerce table.cart {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        float: none;
        margin-inline: 0;
    }

    .woocommerce .woocommerce-ordering {
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    :root {
        --page-gutter: 14px;
    }

    .btn {
        min-height: 46px;
        padding: 12px 20px;
    }
}