/* ==========================================
   CONFIGURAÇÕES
========================================== */

:root {

    --preto: #193b46;

    --preto-2: #285761;

    --dourado: #b98e3d;

    --dourado-claro: #e4c77e;

    --rosa: #f1e6d7;

    --rosa-claro: #fbf6ee;

    --cinza: #6c7470;

    --cinza-claro: #e8e0d3;

    --branco: #ffffff;

    --verde: #607c5a;

    --areia: #d8c09a;

}


body.dark-theme {

    --preto: #f5efe5;
    --preto-2: #d9c6a3;
    --rosa: #304b50;
    --rosa-claro: #1d3035;
    --cinza: #b8c0b9;
    --cinza-claro: #3a4b4d;
    --branco: #172326;

    background: #132023;
    color: var(--preto);

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


::selection {

    background: var(--dourado-claro);
    color: var(--preto);

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #fffdf9;

    color: var(--preto);

    text-rendering: optimizeLegibility;

}


@keyframes reveal-up {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes reveal-photo {

    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


.content-section {

    content-visibility: auto;
    contain-intrinsic-size: 1px 520px;

}


button,
input {

    font-family: inherit;

}


/* ==========================================
   CONTAINER
========================================== */

.container {

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

    margin: auto;

}


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

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(
        255,
        255,
        255,
        0.96
    );

    backdrop-filter: blur(12px);

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

}


.header-content {

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.header-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: var(--preto);

}


.logo-image {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: Georgia, serif;

    font-size: 9px;

    font-weight: bold;

    color: white;

    object-fit: cover;

    border:
        3px solid
        white;

    box-shadow: 0 0 0 1px var(--dourado);

}


.logo strong {

    display: block;

    font-size: 15px;

}


.logo span {

    display: block;

    margin-top: 3px;

    font-size: 11px;

    color: var(--cinza);

}


nav {

    display: flex;

    align-items: center;

    gap: 28px;

}


nav a {

    color: var(--preto);

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: .2s;

}


nav a:hover {

    color: var(--dourado);

}


.search-button {

    border: 0;

    background: var(--rosa);

    width: auto;
    padding: 0 14px;

    height: 42px;

    border-radius: 22px;

    cursor: pointer;

    font-size: 12px;
    font-weight: bold;

}


.theme-toggle {

    border: 1px solid #193b46;
    background: #193b46;
    color: #ffffff;
    width: auto;
    padding: 0 14px;
    height: 42px;
    border-radius: 22px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: .2s;

}


.theme-toggle:hover,
.search-button:hover {

    transform: translateY(-2px);
    border-color: var(--dourado);

}


body.dark-theme .theme-toggle {

    border-color: var(--dourado);
    background: var(--dourado);
    color: #172326;

}


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

.hero {

    background: linear-gradient(110deg, #fffdf9 15%, #f4eadc 100%);

}


body.dark-theme .hero {

    background: linear-gradient(110deg, #132023 15%, #203a3d 100%);

}


.hero-content {

    min-height: 490px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 70px;

}


.hero-text {

    animation: reveal-up .7s ease both;

}


.eyebrow {

    color: var(--dourado);

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 2px;

}


.hero h1 {

    font-family: Georgia, serif;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    line-height: .98;

    margin:
        15px 0
        20px;

}


.hero h1 span {

    display: block;

    color: var(--dourado);

}


.hero p {

    max-width: 500px;

    color: var(--cinza);

    line-height: 1.7;

    font-size: 16px;

}


.main-button {

    display: inline-block;

    margin-top: 25px;

    padding:
        14px
        25px;

    background: #193b46;

    color: white;

    text-decoration: none;

    border-radius: 30px;

    font-weight: bold;

    transition: .25s;

}


.main-button:hover {

    background: var(--dourado);

    transform:
        translateY(-2px);

}


.hero-photo {

    height: 370px;

    position: relative;

    border-radius: 25px;

    background-image: url("imagens/saida de praia - shorthinho de renda.jpeg");

    background-size: cover;

    background-position: center top;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.10);

    isolation: isolate;

    animation: reveal-photo .9s ease .08s both;

}


.hero-photo::after {

    content: "Coleção verão";
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 4px;
    background: rgba(25, 59, 70, .72);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.4px;
    text-transform: uppercase;

}


/* ==========================================
   CATEGORIAS
========================================== */

.categories {

    padding:
        65px
        0
        25px;

}


.section-title {

    text-align: center;

    margin-bottom: 30px;

}


.section-title span {

    color: var(--dourado);

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: bold;

}


.section-title h2 {

    font-family: Georgia, serif;

    font-size: 32px;

    margin:
        8px 0;

}


.section-title p {

    color: var(--cinza);

    font-size: 14px;

}


.category-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}


.category-btn {

    padding:
        11px
        20px;

    border:
        1px solid
        #ddd;

    background: white;

    border-radius: 30px;

    cursor: pointer;

    transition: .2s;

}


.category-btn:hover {

    border-color:
        var(--preto);

}


.category-btn.active {

    background:
        var(--preto);

    border-color:
        var(--preto);

    color: white;

}


/* ==========================================
   PRODUTOS
========================================== */

.products-section {

    padding:
        35px
        0
        90px;

}


.products-top {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;

}


.products-top h2 {

    font-family: Georgia, serif;

    font-size: 32px;

    margin-top: 8px;

}


.search-box input {

    width: 280px;

    padding:
        13px
        18px;

    border:
        1px solid
        #ddd;

    border-radius: 30px;

    outline: none;

}


.search-box input:focus {

    border-color:
        var(--dourado);

}


.products-grid {

    display: grid;

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

    gap: 20px;

    align-items: stretch;

}


/* ==========================================
   CARD DO PRODUTO
========================================== */

.product {

    background: white;

    display: flex;

    flex-direction: column;

    border:
        1px solid
        #eee;

    border-radius: 15px;

    overflow: hidden;

    transition:
        .3s;

    box-shadow: 0 8px 25px rgba(25, 59, 70, .04);

}


body.dark-theme .product,
body.dark-theme .search-box input,
body.dark-theme .category-btn {

    background: #1d3035;
    color: var(--preto);
    border-color: var(--cinza-claro);

}


.product:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 40px
        rgba(
            0,
            0,
            0,
            .08
        );

    border-color: var(--dourado-claro);

}


.product-image {

    height: 360px;

    position: relative;

    background: linear-gradient(145deg, #f7f2eb 0%, #e8dccd 100%);

    aspect-ratio: 4 / 4.7;

    overflow: hidden;

}


.product-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    padding: 14px;

    transition: .4s;
    cursor: zoom-in;

    will-change: transform;

}


.product:hover
.product-image img {

    transform:
        scale(1.04);

}


.badge {

    position: absolute;

    top: 12px;

    left: 12px;

    padding:
        6px
        10px;

    background:
        var(--dourado);

    color: white;

    border-radius: 20px;

    font-size: 10px;

    font-weight: bold;

}


.product-info {

    padding: 16px;

    display: flex;

    flex: 1;

    flex-direction: column;

}


.product-category {

    color: #999;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.product h3 {

    font-size: 16px;

    line-height: 1.25;

    margin:
        7px 0;

}


.product-description {

    color: var(--cinza);

    font-size: 12px;

    line-height: 1.5;

    min-height: 54px;

}


.product-details {

    list-style: none;

    margin: 12px 0 0;

    color: var(--cinza);

    font-size: 11px;

    line-height: 1.6;

}


.product-details li::before {

    content: "•";

    color: var(--dourado);

    margin-right: 6px;

}


body.dark-theme .product-category,
body.dark-theme .product-description {

    color: var(--cinza);

}


.price {

    font-size: 20px;

    font-weight: bold;

    margin-top: 12px;

}


.buy-button {

    width: 100%;

    border: 0;

    margin-top: 12px;

    padding: 12px;

    background: #193b46;

    color: white;

    border-radius: 8px;

    cursor: pointer;

    font-weight: bold;

    transition: .2s;

    margin-top: auto;

}


.buy-button:hover {

    background:
        #25D366;

}


.buy-button:focus-visible,
.category-btn:focus-visible,
.search-button:focus-visible,
.theme-toggle:focus-visible,
.product-thumbnail:focus-visible,
.gallery-controls button:focus-visible,
.gallery-close:focus-visible {

    outline: 3px solid var(--dourado-claro);
    outline-offset: 3px;

}


/* ==========================================
   BENEFÍCIOS
========================================== */

.benefits {

    background:
        var(--rosa-claro);

    padding:
        50px
        0;

}


.benefits-grid {

    display: grid;

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

    gap: 20px;

}


.benefit {

    text-align: center;

    padding: 20px;

}


.benefit span {

    font-size: 30px;

}


.benefit h3 {

    font-size: 16px;

    margin:
        10px
        0
        6px;

}


.benefit p {

    color: var(--cinza);

    font-size: 13px;

}


/* ==========================================
   INSTAGRAM
========================================== */

.instagram {

    padding:
        80px
        0;

    text-align: center;

}


.instagram h2 {

    font-family: Georgia, serif;

    font-size: 35px;

    margin:
        10px
        0;

}


.instagram p {

    color: var(--cinza);

    margin-bottom: 25px;

}


.instagram-button {

    display: inline-block;

    padding:
        13px
        25px;

    background: #193b46;

    color: white;

    text-decoration: none;

    border-radius: 30px;

    font-weight: bold;

    transition: .2s;

}


.instagram-button:hover {

    background: var(--dourado);
    transform: translateY(-2px);

}


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

footer {

    background:
        #181818;

    color: white;

    padding:
        55px
        0
        20px;

}


.footer-grid {

    display: grid;

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

    gap: 50px;

}


footer h3 {

    margin-bottom: 15px;

}


footer p {

    color: #aaa;

    font-size: 13px;

    line-height: 1.8;

}


.copyright {

    border-top:
        1px solid
        #333;

    max-width:
        1180px;

    margin:
        35px auto
        0;

    padding-top: 20px;

    text-align: center;

    color: #777;

    font-size: 11px;

}


/* ==========================================
   CARRINHO
========================================== */

.cart-overlay {

    position: fixed;
    inset: 0;
    background: rgba(10, 24, 27, .45);
    opacity: 0;
    pointer-events: none;
    transition: .25s;
    z-index: 1100;

}


.cart-overlay.open {

    opacity: 1;
    pointer-events: auto;

}


.cart-drawer {

    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: min(430px, 100%);
    height: 100vh;
    padding: 28px;
    background: #fffdf9;
    color: var(--preto);
    box-shadow: -18px 0 50px rgba(0, 0, 0, .16);
    transform: translateX(105%);
    transition: transform .3s ease;

}


body.dark-theme .cart-drawer {

    background: #172a2e;

}


.cart-drawer.open {

    transform: translateX(0);

}


.cart-header,
.cart-total,
.cart-item,
.quantity-controls {

    display: flex;
    align-items: center;

}


.cart-header {

    justify-content: space-between;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--cinza-claro);

}


.cart-header h2 {

    margin-top: 7px;
    font-family: Georgia, serif;
    font-size: 28px;

}


.cart-close {

    border: 0;
    background: transparent;
    color: var(--preto);
    cursor: pointer;
    font-size: 32px;
    line-height: 1;

}


.cart-items {

    flex: 1;
    overflow-y: auto;
    padding: 20px 0;

}


.cart-item {

    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--cinza-claro);

}


.cart-item img {

    width: 72px;
    height: 88px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;

}


.cart-item-info {

    min-width: 0;
    flex: 1;

}


.cart-item h3 {

    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.3;

}


.cart-item-info > span {

    color: var(--cinza);
    font-size: 12px;

}


.cart-item-subtotal {

    white-space: nowrap;
    font-size: 13px;

}


.quantity-controls {

    gap: 8px;
    margin-top: 12px;

}


.quantity-controls button {

    width: 25px;
    height: 25px;
    border: 1px solid var(--cinza-claro);
    border-radius: 50%;
    background: transparent;
    color: var(--preto);
    cursor: pointer;

}


.quantity-controls strong {

    min-width: 12px;
    text-align: center;
    font-size: 12px;

}


.quantity-controls .remove-item {

    width: auto;
    height: auto;
    margin-left: 4px;
    border: 0;
    border-radius: 0;
    color: var(--dourado);
    font-size: 11px;

}


.empty-cart {

    padding: 70px 20px;
    text-align: center;
    color: var(--cinza);

}


.empty-cart span {

    display: block;
    margin-bottom: 14px;
    font-size: 32px;

}


.empty-cart strong {

    display: block;
    margin-bottom: 8px;
    color: var(--preto);

}


.empty-cart p {

    font-size: 13px;
    line-height: 1.5;

}


.cart-footer {

    padding-top: 20px;
    border-top: 1px solid var(--cinza-claro);

}


.cart-note {

    margin-bottom: 16px;
    color: var(--cinza);
    font-size: 12px;
    line-height: 1.5;

}


.cart-total {

    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 14px;

}


.cart-total strong {

    font-size: 21px;

}


.checkout-button {

    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 8px;
    background: #25d366;
    color: #fff;
    cursor: pointer;
    font-weight: bold;

}


/* ==========================================
   BOTÃO FLUTUANTE
========================================== */

.whatsapp-float {

    position: fixed;

    right: 22px;

    bottom: 22px;

    width: 96px;

    height: 58px;

    border: 0;

    border-radius: 30px;

    background:
        #25D366;

    color: white;

    font-size: 12px;
    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            .20
        );

    z-index: 999;

}


.whatsapp-float span {

    position: absolute;

    right: -3px;

    top: -5px;

    width: 21px;

    height: 21px;

    border-radius: 50%;

    background:
        #111;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

}


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

@media (max-width: 950px) {

    nav {

        display: none;

    }


    .hero-content {

        grid-template-columns:
            1fr;

        padding:
            60px
            0;

    }


    .hero-photo {

        height: 300px;

    }


    .products-grid {

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

    }

}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 650px) {

    .container {

        width:
            calc(
                100% - 30px
            );

    }


    .header-content {

        min-height: 65px;

    }


    .logo strong {

        font-size: 13px;

    }


    .hero-content {

        padding:
            34px
            0;

    }


    .hero h1 {

        font-size: 45px;

    }


    .hero-photo {

        height: 250px;

    }


    .hero-photo::after {

        right: 12px;
        bottom: 12px;
        font-size: 9px;

    }


    .products-top {

        align-items: stretch;

        flex-direction: column;

    }


    .search-box input {

        width: 100%;

    }


    .products-grid {

        grid-template-columns:
            1fr;

        gap: 12px;

    }


    .product-image {

        height: 320px;

    }


    .product-image img {

        padding: 10px;

    }


    .product-info {

        padding: 12px;

    }


    .product h3 {

        font-size: 14px;

    }


    .price {

        font-size: 18px;

    }


    .benefits-grid {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap: 30px;

    }

}


body.dark-theme .header,
body.dark-theme .categories,
body.dark-theme .products-section,
body.dark-theme .instagram {

    background: #132023;

}


body.dark-theme .header {

    background: rgba(19, 32, 35, .96);

}


body.dark-theme .search-box input {

    color: var(--preto);

}


body.dark-theme .category-btn.active {

    background: var(--dourado);
    border-color: var(--dourado);
    color: #172326;

}


.product-thumbnails {

    display: flex;
    gap: 7px;
    padding: 12px 14px 0;
    background: var(--branco);

}


.product-thumbnail {

    width: 56px;
    height: 68px;
    padding: 0;
    border: 1px solid var(--cinza-claro);
    border-radius: 5px;
    background: #ffffff;
    overflow: hidden;
    cursor: pointer;
    opacity: .9;
    box-shadow: 0 3px 10px rgba(25, 59, 70, .08);

}


.product-thumbnail.active,
.product-thumbnail:hover {

    border-color: var(--dourado);
    opacity: 1;
    box-shadow: 0 0 0 2px var(--dourado);

}


.product-thumbnail img {

    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;

}


.gallery-modal {

    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(9, 23, 26, .82);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;

}


.gallery-modal.open {

    opacity: 1;
    pointer-events: auto;

}


.gallery-dialog {

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    padding: 20px;
    border-radius: 10px;
    background: #fffdf9;
    color: #193b46;

}


body.dark-theme .gallery-dialog {

    background: #172a2e;
    color: #f5efe5;

}


.gallery-main-image {

    width: 100%;
    height: min(72vh, 620px);
    object-fit: contain;

}


.gallery-close,
.gallery-controls button {

    border: 1px solid #193b46;
    border-radius: 5px;
    padding: 8px 13px;
    background: #193b46;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;

}


.gallery-close {

    align-self: flex-end;

}


.gallery-controls {

    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--preto);
    font-size: 12px;

}


.product {

    animation: reveal-up .55s ease both;

}


.product:nth-child(2) {

    animation-delay: .06s;

}


.product:nth-child(3) {

    animation-delay: .12s;

}


.product:nth-child(4) {

    animation-delay: .18s;

}


.product:nth-child(5) {

    animation-delay: .24s;

}


.product:nth-child(6) {

    animation-delay: .30s;

}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}


.product-placeholder {

    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, #f5ede1 0%, #e6d4b9 100%);
    color: #806b4c;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 10px;
    font-weight: bold;

}


.buy-button.unavailable,
.buy-button.unavailable:hover {

    background: var(--cinza-claro);
    color: var(--cinza);
    cursor: not-allowed;

}


body.dark-theme .gallery-close,
body.dark-theme .gallery-controls button {

    border-color: var(--dourado);
    background: var(--dourado);
    color: #172326;

}