/* Explain: Base styles, typography, layout, and utility classes. */
* {
    box-sizing: border-box;
}

html {
    background: var(--ivory-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    line-height: 1.6;
    background-color: var(--ivory-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%23AE8039' fill-opacity='0.12'%3E%3Cellipse cx='52' cy='62.35' rx='12.65' ry='10.35'/%3E%3Cellipse cx='39.35' cy='45.1' rx='5.18' ry='6.9'/%3E%3Cellipse cx='47.4' cy='39.35' rx='5.18' ry='6.9'/%3E%3Cellipse cx='56.6' cy='39.35' rx='5.18' ry='6.9'/%3E%3Cellipse cx='64.65' cy='45.1' rx='5.18' ry='6.9'/%3E%3Cellipse cx='185' cy='123.5' rx='16.5' ry='13.5'/%3E%3Cellipse cx='168.5' cy='101' rx='6.75' ry='9'/%3E%3Cellipse cx='179' cy='93.5' rx='6.75' ry='9'/%3E%3Cellipse cx='191' cy='93.5' rx='6.75' ry='9'/%3E%3Cellipse cx='201.5' cy='101' rx='6.75' ry='9'/%3E%3Cellipse cx='105' cy='208.55' rx='10.45' ry='8.55'/%3E%3Cellipse cx='94.55' cy='194.3' rx='4.28' ry='5.7'/%3E%3Cellipse cx='101.2' cy='189.55' rx='4.28' ry='5.7'/%3E%3Cellipse cx='108.8' cy='189.55' rx='4.28' ry='5.7'/%3E%3Cellipse cx='115.45' cy='194.3' rx='4.28' ry='5.7'/%3E%3Cellipse cx='225' cy='221.3' rx='7.7' ry='6.3'/%3E%3Cellipse cx='217.3' cy='210.8' rx='3.15' ry='4.2'/%3E%3Cellipse cx='222.2' cy='207.3' rx='3.15' ry='4.2'/%3E%3Cellipse cx='227.8' cy='207.3' rx='3.15' ry='4.2'/%3E%3Cellipse cx='232.7' cy='210.8' rx='3.15' ry='4.2'/%3E%3Ccircle cx='140' cy='40' r='4'/%3E%3Ccircle cx='30' cy='150' r='5'/%3E%3Ccircle cx='150' cy='182' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 260px 260px;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

[x-cloak] {
    display: none !important;
}

::selection {
    background: var(--secondary-color);
    color: var(--pure-white);
}

.cart-drawer-overlay {
    background: rgba(17, 24, 39, 0.4);
    backdrop-filter: blur(4px);
}

.qty-stepper {
    display: none;
}
.qty-stepper.is-active {
    display: flex;
}
.qty-add.is-hidden {
    display: none;
}