:root {

    --background: #f8f4ec;
    --surface: #ffffff;
    --surface-soft: #efe7d8;

    --text: #2b241d;
    --text-soft: #73685c;

    --accent: #8b1e18;
    --accent-dark: #68130f;

    --green: #4f7a3a;
    --green-dark: #3f642f;

    --border: #ddd2c3;

    --shadow:
        0 12px 35px
        rgba(45, 34, 25, 0.10);

    --site-width: 1480px;
    --desktop-gutter: 22px;

    --header-height: 78px;

}


/* =====================================================
   RESET
===================================================== */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

}


body.cart-open {

    overflow:
        hidden;

}


button,
select,
input {

    font:
        inherit;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


/* =====================================================
   GLOBAL SITE WIDTH
===================================================== */

.site-header,
.hero,
main,
.site-footer {

    width:
        min(
            var(--site-width),
            calc(
                100% -
                var(--desktop-gutter) * 2
            )
        );

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =====================================================
   HEADER
===================================================== */

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    min-height:
        var(--header-height);

    padding:
        10px 20px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    background:
        rgba(
            248,
            244,
            236,
            0.97
        );

    backdrop-filter:
        blur(10px);

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

}


.header-left {

    display:
        flex;

    justify-content:
        flex-start;

}


.brand {

    text-align:
        center;

    line-height:
        1.05;

}


.brand-main {

    display:
        block;

    font-weight:
        700;

    font-size:
        clamp(
            15px,
            2vw,
            22px
        );

}


.brand-sub {

    display:
        block;

    margin-top:
        4px;

    text-transform:
        uppercase;

    letter-spacing:
        0.2em;

    font-size:
        10px;

    color:
        var(--accent);

}


/* =====================================================
   LANGUAGE SELECTOR
===================================================== */

.language-menu {

    position:
        relative;

}


.language-button {

    min-width:
        88px;

    height:
        44px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

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

    border-radius:
        10px;

    background:
        var(--surface);

    color:
        var(--text);

    cursor:
        pointer;

}


.current-language {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        700;

}


.language-flag {

    width:
        22px;

    height:
        15px;

    display:
        block;

    border-radius:
        2px;

    overflow:
        hidden;

}


.language-arrow {

    font-family:
        Arial,
        sans-serif;

    font-size:
        17px;

    line-height:
        1;

}


.language-options {

    position:
        absolute;

    top:
        calc(100% + 6px);

    left:
        0;

    z-index:
        2000;

    min-width:
        100%;

    padding:
        5px;

    display:
        none;

    background:
        var(--surface);

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

    border-radius:
        10px;

    box-shadow:
        var(--shadow);

}


.language-options.open {

    display:
        block;

}


.language-option {

    width:
        100%;

    min-height:
        42px;

    padding:
        8px 10px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--text);

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        700;

}


.language-option:hover {

    background:
        var(--surface-soft);

}


/* =====================================================
   CART BUTTON
===================================================== */

.cart-button {

    justify-self:
        end;

    position:
        relative;

    border:
        0;

    background:
        transparent;

    padding:
        10px;

    font-size:
        26px;

    cursor:
        pointer;

}


.cart-count {

    position:
        absolute;

    right:
        0;

    top:
        2px;

    min-width:
        20px;

    height:
        20px;

    padding:
        0 5px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    background:
        var(--accent);

    color:
        white;

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

}


/* =====================================================
   HERO
===================================================== */

.hero {

    position:
        relative;

    aspect-ratio:
        16 / 8.8;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

}


.hero-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

}


.hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(
                30,
                20,
                12,
                0.56
            ),
            rgba(
                30,
                20,
                12,
                0.05
            )
        );

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    width:
        calc(100% - 70px);

    color:
        white;

    text-shadow:
        0 2px 12px
        rgba(
            0,
            0,
            0,
            0.35
        );

}


.hero-small {

    margin:
        0 0 12px;

    text-transform:
        uppercase;

    letter-spacing:
        0.18em;

    font-size:
        12px;

}


.hero h1 {

    margin:
        0;

    max-width:
        650px;

    font-size:
        clamp(
            36px,
            4.6vw,
            64px
        );

    line-height:
        0.98;

}


.hero-text {

    max-width:
        600px;

    margin:
        20px 0 28px;

    font-size:
        clamp(
            16px,
            1.8vw,
            21px
        );

}


.hero-button {

    display:
        inline-block;

    padding:
        13px 20px;

    background:
        var(--accent);

    border-radius:
        8px;

    color:
        white;

    font-family:
        Arial,
        sans-serif;

    font-weight:
        700;

}


.hero-button:hover {

    background:
        var(--accent-dark);

}


/* =====================================================
   GENERAL SECTIONS
===================================================== */

.section {

    width:
        min(
            1220px,
            calc(
                100% - 40px
            )
        );

    margin:
        0 auto;

    padding:
        68px 0;

}


.section-heading {

    max-width:
        750px;

    margin:
        0 auto 38px;

    text-align:
        center;

}


.section-label {

    margin:
        0 0 8px;

    color:
        var(--accent);

    text-transform:
        uppercase;

    letter-spacing:
        0.16em;

    font-size:
        12px;

    font-weight:
        700;

}


.section-heading h2 {

    margin:
        0 0 12px;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

}


.section-heading p {

    color:
        var(--text-soft);

}


/* =====================================================
   ABOUT
===================================================== */

.about-section {

    max-width:
        900px;

}


.about-text {

    margin:
        0;

    text-align:
        center;

    color:
        var(--text-soft);

    font-size:
        18px;

    line-height:
        1.8;

}


/* =====================================================
   PRODUCTS
===================================================== */

.products-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        22px;

}


.product-card {

    overflow:
        hidden;

    background:
        var(--surface);

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

    border-radius:
        14px;

    box-shadow:
        var(--shadow);

}


.product-image {

    aspect-ratio:
        1 / 0.78;

}


.placeholder-product-image {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #dbc9ac,
            #eee2d0
        );

    color:
        #8b7863;

}


.product-content {

    padding:
        18px;

}


.product-content h3 {

    min-height:
        48px;

    margin:
        0 0 8px;

    font-size:
        20px;

}


.product-price {

    margin:
        0 0 18px;

    color:
        var(--accent);

    font-weight:
        700;

}


/* =====================================================
   QUANTITY CONTROLS
===================================================== */

.quantity-control {

    display:
        grid;

    grid-template-columns:
        42px
        1fr
        42px;

    align-items:
        center;

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

    border-radius:
        8px;

    overflow:
        hidden;

}


.quantity-control button {

    height:
        42px;

    border:
        0;

    background:
        var(--surface-soft);

    cursor:
        pointer;

    font-size:
        20px;

}


.quantity-value {

    text-align:
        center;

    font-family:
        Arial,
        sans-serif;

    font-size:
        14px;

    font-weight:
        700;

}


.selected-price {

    margin:
        15px 0;

    text-align:
        center;

    font-size:
        19px;

    font-weight:
        700;

}


/* =====================================================
   ADD TO CART
===================================================== */

.add-cart-button {

    width:
        100%;

    min-height:
        46px;

    border:
        0;

    border-radius:
        8px;

    background:
        var(--green);

    color:
        white;

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-weight:
        700;

}


.add-cart-button:hover {

    background:
        var(--green-dark);

}


/* =====================================================
   GALLERY
===================================================== */

.gallery-placeholder {

    min-height:
        240px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px dashed
        var(--border);

    border-radius:
        14px;

    color:
        var(--text-soft);

    text-align:
        center;

}


/* =====================================================
   SOCIALS
===================================================== */

.social-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            80px
        );

    justify-content:
        center;

    gap:
        18px;

}


.social-button {

    width:
        68px;

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        auto;

    background:
        var(--surface);

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

    border-radius:
        50%;

}


.social-button svg {

    width:
        30px;

    height:
        30px;

}


.social-grid a:nth-child(1) svg path {

    fill:
        #E1306C;

}


.social-grid a:nth-child(2) svg path {

    fill:
        #1877F2;

}


.social-grid a:nth-child(3) svg path {

    fill:
        #111111;

}


.social-grid a:nth-child(4) svg path {

    fill:
        #25D366;

}


/* =====================================================
   INFO CARDS
===================================================== */

.info-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        22px;

}


.info-card {

    padding:
        30px;

    background:
        var(--surface);

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

    border-radius:
        14px;

}


.info-icon {

    font-size:
        32px;

}


.info-card h3 {

    font-size:
        24px;

}


.info-card p {

    color:
        var(--text-soft);

    line-height:
        1.7;

}


/* =====================================================
   FOOTER
===================================================== */

.site-footer {

    padding:
        48px 34px;

    background:
        #241d17;

    color:
        #eee6da;

}


.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin:
        30px 0;

}


.footer-links button {

    border:
        0;

    padding:
        0;

    background:
        transparent;

    color:
        #eee6da;

    text-decoration:
        underline;

    cursor:
        pointer;

}


.footer-legal {

    color:
        #bfb4a6;

    font-size:
        13px;

}


/* =====================================================
   CART OVERLAY
===================================================== */

.cart-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        1500;

    background:
        rgba(
            0,
            0,
            0,
            0.48
        );

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity 0.25s ease;

}


.cart-overlay.visible {

    opacity:
        1;

    pointer-events:
        auto;

}


/* =====================================================
   CART DRAWER
===================================================== */

.cart-drawer {

    position:
        fixed;

    top:
        0;

    right:
        0;

    z-index:
        1600;

    width:
        min(
            430px,
            92vw
        );

    height:
        100dvh;

    max-height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--background);

    transform:
        translateX(100%);

    transition:
        transform 0.3s ease;

}


.cart-drawer.open {

    transform:
        translateX(0);

}


.cart-header {

    flex:
        0 0 auto;

    min-height:
        80px;

    padding:
        18px 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

}


.cart-header h2 {

    margin:
        0;

}


.close-cart {

    width:
        42px;

    height:
        42px;

    border:
        0;

    background:
        transparent;

    font-size:
        34px;

    cursor:
        pointer;

}


.cart-items {

    flex:
        1 1 auto;

    min-height:
        0;

    overflow-y:
        auto;

    padding:
        20px 20px 12px;

    overscroll-behavior:
        contain;

}


.cart-item {

    padding:
        18px 0;

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

}


.cart-item-info {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

}


.cart-item-info span {

    color:
        var(--text-soft);

}


.cart-item-controls {

    margin:
        14px 0;

    display:
        grid;

    grid-template-columns:
        42px
        1fr
        42px;

    align-items:
        center;

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

    border-radius:
        7px;

    overflow:
        hidden;

}


.cart-item-controls button {

    height:
        39px;

    border:
        0;

    background:
        var(--surface-soft);

    cursor:
        pointer;

}


.cart-item-controls span {

    text-align:
        center;

}


.cart-item-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.remove-item {

    border:
        0;

    background:
        transparent;

    color:
        var(--accent);

    text-decoration:
        underline;

    cursor:
        pointer;

}


.cart-footer {

    flex:
        0 0 auto;

    padding:
        18px
        20px
        calc(
            18px +
            env(
                safe-area-inset-bottom
            )
        );

    background:
        var(--surface);

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

}


.cart-total-line {

    margin-bottom:
        18px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    font-size:
        18px;

}


.checkout-button {

    display:
        block;

    width:
        100%;

    min-height:
        52px;

    padding:
        16px;

    border-radius:
        8px;

    background:
        var(--accent);

    color:
        white;

    text-align:
        center;

    font-family:
        Arial,
        sans-serif;

    font-weight:
        700;

}


.empty-cart {

    padding:
        40px 20px;

    text-align:
        center;

    color:
        var(--text-soft);

}


/* =====================================================
   CHECKOUT PAGE
===================================================== */

.checkout-page {

    min-height:
        100vh;

}


.checkout-header {

    width:
        min(
            1180px,
            calc(
                100% - 40px
            )
        );

    min-height:
        72px;

    margin:
        auto;

    padding:
        10px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

}


.checkout-back {

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        700;

}


.checkout-brand {

    text-align:
        center;

}


.checkout-brand strong {

    display:
        block;

}


.checkout-brand span {

    display:
        block;

    color:
        var(--accent);

    text-transform:
        uppercase;

    letter-spacing:
        0.2em;

    font-size:
        8px;

}


.checkout-main {

    width:
        min(
            1180px,
            calc(
                100% - 40px
            )
        );

    margin:
        auto;

    padding:
        50px 0 80px;

}


.checkout-title {

    margin-bottom:
        35px;

    text-align:
        center;

}


.checkout-title h1 {

    margin:
        5px 0 10px;

    font-size:
        clamp(
            32px,
            5vw,
            48px
        );

}


.checkout-title p {

    color:
        var(--text-soft);

}


.checkout-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.15fr
        )
        minmax(
            340px,
            0.85fr
        );

    gap:
        26px;

    align-items:
        start;

}


.checkout-panel {

    padding:
        30px;

    background:
        var(--surface);

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

    border-radius:
        14px;

    box-shadow:
        var(--shadow);

}


.checkout-panel h2 {

    margin:
        0 0 26px;

}


/* =====================================================
   CHECKOUT FORM
===================================================== */

.form-row {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        16px;

}


.form-group {

    margin-bottom:
        20px;

}


.form-group label {

    display:
        block;

    margin-bottom:
        7px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        700;

}


.form-group input,
.form-group select {

    width:
        100%;

    min-height:
        46px;

    padding:
        10px 12px;

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

    border-radius:
        8px;

    background:
        white;

    color:
        var(--text);

    font-family:
        Arial,
        sans-serif;

    outline:
        none;

}


.form-group input:focus,
.form-group select:focus {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(
            79,
            122,
            58,
            0.12
        );

}


.form-group small {

    display:
        block;

    margin-top:
        6px;

    color:
        var(--text-soft);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

}


.terms-check {

    margin:
        8px 0 20px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    color:
        var(--text-soft);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.5;

}


.terms-check input {

    margin-top:
        3px;

}


.form-error {

    margin:
        0 0 16px;

    padding:
        12px;

    background:
        #f8dfdc;

    color:
        var(--accent);

    border-radius:
        8px;

    font-family:
        Arial,
        sans-serif;

}


.confirm-order-button {

    width:
        100%;

    min-height:
        52px;

    border:
        0;

    border-radius:
        8px;

    background:
        var(--green);

    color:
        white;

    font-family:
        Arial,
        sans-serif;

    font-weight:
        700;

    cursor:
        pointer;

}


.confirm-order-button:hover {

    background:
        var(--green-dark);

}


.confirm-order-button:disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

}


/* =====================================================
   ORDER SUMMARY
===================================================== */

.order-summary {

    position:
        sticky;

    top:
        95px;

}


.checkout-items {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

}


.checkout-summary-item {

    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    gap:
        10px;

}


.checkout-summary-item small {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--text-soft);

}


.summary-divider {

    height:
        1px;

    margin:
        22px 0;

    background:
        var(--border);

}


.summary-line {

    margin:
        12px 0;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    font-family:
        Arial,
        sans-serif;

}


.grand-total {

    font-size:
        21px;

}


.grand-total strong {

    color:
        var(--accent);

}


.shipping-note {

    margin-top:
        20px;

    color:
        var(--text-soft);

    font-size:
        11px;

    line-height:
        1.5;

}


/* =====================================================
   SUCCESS MODAL
===================================================== */

.success-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        5000;

    padding:
        20px;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            0,
            0,
            0,
            0.58
        );

}


.success-overlay:not([hidden]) {

    display:
        flex;

}


.success-modal {

    width:
        min(
            460px,
            100%
        );

    padding:
        38px 30px;

    background:
        white;

    border-radius:
        16px;

    text-align:
        center;

    box-shadow:
        0 25px 70px
        rgba(
            0,
            0,
            0,
            0.25
        );

}


.success-icon {

    width:
        60px;

    height:
        60px;

    margin:
        0 auto 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--green);

    color:
        white;

    font-size:
        30px;

    font-family:
        Arial,
        sans-serif;

    font-weight:
        700;

}


.success-modal h2 {

    margin:
        0 0 10px;

}


.success-reference-label {

    margin:
        20px 0 6px;

    color:
        var(--text-soft);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;

}


.success-reference {

    display:
        block;

    padding:
        12px;

    background:
        var(--surface-soft);

    border-radius:
        8px;

    font-family:
        Arial,
        sans-serif;

    word-break:
        break-word;

}


.success-message {

    margin:
        22px 0;

    color:
        var(--text-soft);

    line-height:
        1.6;

}


.success-button {

    display:
        block;

    padding:
        14px;

    border-radius:
        8px;

    background:
        var(--accent);

    color:
        white;

    font-family:
        Arial,
        sans-serif;

    font-weight:
        700;

}


/* =====================================================
   TABLET
===================================================== */

@media
(max-width: 950px) {

    .products-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .info-grid {

        grid-template-columns:
            1fr;

    }


    .checkout-layout {

        grid-template-columns:
            1fr;

    }


    .order-summary {

        position:
            static;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media
(max-width: 650px) {

    :root {

        --desktop-gutter:
            0px;

        --header-height:
            64px;

    }


    .site-header,
    .hero,
    main,
    .site-footer {

        width:
            100%;

    }


    /* HEADER */

    .site-header {

        padding:
            7px 10px;

    }


    .brand-main {

        font-size:
            12px;

    }


    .brand-sub {

        font-size:
            7px;

    }


    .cart-button {

        font-size:
            21px;

    }


    /* LANGUAGE */

    .language-button {

        min-width:
            74px;

        height:
            38px;

        padding:
            0 8px;

    }


    .language-flag {

        width:
            18px;

        height:
            12px;

    }


    .current-language {

        gap:
            5px;

        font-size:
            11px;

    }


    /* HERO */

    .hero {

        aspect-ratio:
            16 / 11;

    }


    .hero-image {

        object-fit:
            cover;

        object-position:
            center;

    }


    .hero-content {

        width:
            calc(
                100% - 24px
            );

    }


    .hero-small {

        margin-bottom:
            6px;

        font-size:
            8px;

        letter-spacing:
            0.12em;

    }


    .hero h1 {

        max-width:
            330px;

        font-size:
            clamp(
                22px,
                8vw,
                34px
            );

    }


    .hero-text {

        max-width:
            300px;

        margin:
            10px 0 14px;

        font-size:
            12px;

        line-height:
            1.3;

    }


    .hero-button {

        padding:
            9px 12px;

        font-size:
            11px;

    }


    /* SECTIONS */

    .section {

        width:
            calc(
                100% - 20px
            );

        padding:
            45px 0;

    }


    .section-heading {

        margin-bottom:
            26px;

    }


    .section-label {

        font-size:
            9px;

    }


    .section-heading h2 {

        font-size:
            clamp(
                24px,
                8vw,
                34px
            );

    }


    .section-heading p {

        font-size:
            13px;

    }


    .about-text {

        font-size:
            14px;

        line-height:
            1.6;

    }


    /* PRODUCTS */

    .products-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            10px;

    }


    .product-content {

        padding:
            12px;

    }


    .product-content h3 {

        min-height:
            38px;

        font-size:
            14px;

    }


    .product-price {

        font-size:
            12px;

    }


    .quantity-control {

        grid-template-columns:
            32px
            1fr
            32px;

    }


    .quantity-control button {

        height:
            36px;

    }


    .quantity-value {

        font-size:
            10px;

    }


    .selected-price {

        font-size:
            14px;

    }


    .add-cart-button {

        min-height:
            40px;

        padding:
            6px;

        font-size:
            11px;

    }


    /* SOCIAL */

    .social-grid {

        grid-template-columns:
            repeat(
                4,
                56px
            );

        gap:
            10px;

    }


    .social-button {

        width:
            52px;

        height:
            52px;

    }


    .social-button svg {

        width:
            24px;

        height:
            24px;

    }


    /* INFO */

    .info-card {

        padding:
            20px;

    }


    .info-icon {

        font-size:
            25px;

    }


    .info-card h3 {

        font-size:
            18px;

    }


    .info-card p {

        font-size:
            12px;

        line-height:
            1.5;

    }


    /* FOOTER */

    .site-footer {

        padding:
            38px 20px;

    }


    .footer-legal {

        font-size:
            12px;

    }


    /* CART */

    .cart-drawer {

        width:
            100vw;

        height:
            100dvh;

        max-height:
            100dvh;

    }


    .cart-header {

        min-height:
            72px;

        padding:
            14px 16px;

    }


    .cart-header h2 {

        font-size:
            27px;

    }


    .cart-items {

        min-height:
            0;

        padding:
            14px 14px 10px;

    }


    .cart-item {

        padding:
            16px 0;

    }


    .cart-item-info {

        gap:
            10px;

    }


    .cart-item-info strong {

        font-size:
            17px;

    }


    .cart-item-info span {

        font-size:
            15px;

    }


    .cart-item-controls {

        grid-template-columns:
            42px
            1fr
            42px;

    }


    .cart-item-controls span {

        font-size:
            15px;

    }


    .cart-footer {

        padding:
            14px
            14px
            calc(
                16px +
                env(
                    safe-area-inset-bottom
                )
            );

    }


    .cart-total-line {

        margin-bottom:
            12px;

        font-size:
            16px;

    }


    .checkout-button {

        min-height:
            50px;

        padding:
            14px;

        font-size:
            14px;

    }


    /* CHECKOUT */

    .checkout-header {

        width:
            100%;

        min-height:
            64px;

        padding:
            8px 12px;

    }


    .checkout-back {

        font-size:
            11px;

    }


    .checkout-brand strong {

        font-size:
            13px;

    }


    .checkout-brand span {

        font-size:
            6px;

    }


    .checkout-main {

        width:
            calc(
                100% - 20px
            );

        padding:
            35px 0 55px;

    }


    .checkout-title {

        margin-bottom:
            25px;

    }


    .checkout-title h1 {

        font-size:
            29px;

    }


    .checkout-title p {

        font-size:
            13px;

    }


    .checkout-layout {

        grid-template-columns:
            1fr;

        gap:
            16px;

    }


    .checkout-panel {

        padding:
            20px;

    }


    .checkout-panel h2 {

        font-size:
            20px;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .form-group input,
    .form-group select {

        font-size:
            16px;

    }


    .order-summary {

        position:
            static;

    }


    .success-modal {

        padding:
            30px 20px;

    }

}