* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

:root {
    --ink: #171516;
    --soft-ink: #302d2e;
    --magenta: #d71366;
    --magenta-dark: #a70e4d;
    --cyan: #20a6b5;
    --cream: #f6f3ef;
    --white: #fff;
    --muted: #777173;
    --line: #e6e0dc;
    --shadow: 0 22px 60px rgba(23,21,22,.12);
    --serif: 'Cormorant Garamond',serif;
    --sans: 'Montserrat',sans-serif
}

body {
    font-family: var(--sans);
    background: #fbfaf8;
    color: var(--ink);
    overflow-x: hidden
}

.announcement {
    height: 30px;
    background: var(--ink);
    color: #fff;
    text-align: center;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px;
    border-top: 2px solid var(--cyan)
}

.site-header {
    height: 86px;
    padding: 0 clamp(20px,5vw,80px);
    display: grid;
    grid-template-columns: 120px 1fr 280px;
    align-items: center;
    gap: 30px;
    background: rgba(255,255,255,.96);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 var(--line);
    backdrop-filter: blur(12px)
}

.brand img {
    width: 72px;
    height: 72px;
    display: block;
    object-fit: contain
}

.main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px
}

    .main-nav a, .cart-link {
        border: 0;
        background: none;
        color: var(--ink);
        font: 600 11px var(--sans);
        letter-spacing: 1.4px;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        position: relative
    }

        .main-nav a:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 0;
            height: 2px;
            background: var(--magenta);
            transition: .25s
        }

        .main-nav a:hover:after {
            width: 100%
        }

.cart-link {
    display: flex;
    align-items: center;
    gap: 7px
}

.cart-count {
    min-width: 19px;
    height: 19px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--magenta);
    color: #fff;
    font-size: 9px
}

.search-box {
    border-bottom: 1px solid var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px
}

    .search-box input {
        border: 0;
        outline: 0;
        background: none;
        width: 100%;
        font: 400 12px var(--sans)
    }

    .search-box i {
        font-size: 12px
    }

.nav-toggle {
    display: none;
    border: 0;
    background: none;
    font-size: 20px
}

.hero {
    min-height: 630px;
    /*margin: 0 clamp(16px,3vw,48px);*/
    padding: 70px clamp(28px,7vw,110px);
    display: flex;
    align-items: center;
    background: linear-gradient(90deg,rgba(18,16,17,.92) 0%,rgba(18,16,17,.64) 45%,rgba(18,16,17,.08) 100%),url('/dist/assets/images/header-tienda.png') center/cover no-repeat;
    position: relative
}

    .hero:after {
        content: 'DRIMS';
        position: absolute;
        right: -12px;
        bottom: -20px;
        color: rgba(255,255,255,.12);
        font: 700 clamp(75px,14vw,210px)/.8 var(--serif);
        letter-spacing: -8px
    }

.hero-content {
    color: #fff;
    max-width: 650px;
    position: relative;
    z-index: 1
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #fff
}

    .eyebrow:before {
        content: '';
        display: inline-block;
        width: 30px;
        height: 1px;
        background: var(--magenta);
        vertical-align: middle;
        margin-right: 12px
    }

    .eyebrow.dark {
        color: var(--muted)
    }

.hero h1 {
    font: 600 clamp(54px,7vw,105px)/.82 var(--serif);
    letter-spacing: -2px;
    margin: 28px 0
}

    .hero h1 em {
        color: #fff;
        font-weight: 500
    }

.hero p {
    max-width: 490px;
    color: #ded9d6;
    font-size: 14px;
    line-height: 1.9
}

.hero-cta {
    display: inline-flex;
    gap: 20px;
    align-items: center;
    margin-top: 35px;
    padding: 15px 24px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: .25s
}

    .hero-cta:hover {
        background: var(--magenta);
        color: #fff
    }

.shop-layout {
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-template-columns: 270px 1fr;
    padding: 100px 40px;
    gap: 55px
}

.sidebar {
    position: sticky;
    top: 136px;
    height: max-content
}

.filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px
}

    .filter-title span {
        color: var(--magenta);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 9px;
        font-weight: 700
    }

    .filter-title h2, .products-header h2 {
        font: 600 38px var(--serif)
    }

.filter-close {
    display: none;
    border: 0;
    background: none;
    font-size: 18px
}

.filter-container {
    padding-top: 26px
}

.filter-group {
    margin-bottom: 25px
}

    .filter-group label {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 10px
    }

        .filter-group label i {
            color: var(--magenta);
            width: 15px
        }

.dx-tagbox {
    font-family: var(--sans) !important
}

.dx-texteditor {
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: #fff !important
}

.dx-tag-content {
    background: var(--ink) !important;
    color: #fff !important
}

.products-header {
    margin-bottom: 35px
}

    .products-header h2 {
        font-size: 52px;
        margin-top: 7px
    }

.products-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 42px 22px
}

.product-card {
    background: #fff;
    cursor: pointer;
    transition: .35s;
    position: relative
}

.product-image {
    height: 390px;
    background: var(--cream);
    overflow: hidden;
    position: relative
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s cubic-bezier(.2,.7,.2,1)
    }

.product-card:hover .product-image img {
    transform: scale(1.045)
}

.quick-view {
    position: absolute;
    inset: auto 15px 15px;
    transform: translateY(15px);
    opacity: 0;
    padding: 12px;
    background: rgba(23,21,22,.92);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1.5px;
    transition: .3s
}

.product-card:hover .quick-view {
    opacity: 1;
    transform: none
}

.product-info {
    padding: 17px 4px
}

.product-category {
    color: var(--magenta);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700
}

.product-name {
    font: 600 21px var(--serif);
    margin: 6px 0 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.product-price {
    font-size: 13px;
    font-weight: 700
}

.product-sizes {
    color: var(--muted);
    font-size: 10px
}

.mobile-filter-btn {
    display: none
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--muted)
}

    .empty-state i {
        font-size: 35px;
        margin-bottom: 15px
    }

    .empty-state h3 {
        font: 600 28px var(--serif);
        color: var(--ink)
    }

.about-strip {
    background: var(--magenta);
    color: #fff;
    text-align: center;
    padding: 100px 20px
}

    .about-strip h2 {
        font: 600 clamp(42px,6vw,76px) var(--serif);
        margin: 18px 0
    }

    .about-strip p {
        max-width: 650px;
        margin: auto;
        line-height: 1.8;
        font-size: 13px
    }

.modal {
    position: fixed;
    inset: 0;
    background: rgba(12,10,11,.75);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: .25s;
    z-index: 500;
    padding: 20px
}

    .modal.active {
        opacity: 1;
        pointer-events: auto
    }

.modal-content {
    width: min(1000px,100%);
    max-height: 94vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: #fff;
    position: relative;
    overflow: auto;
    box-shadow: var(--shadow);
    transform: translateY(20px);
    transition: .3s
}

.modal.active .modal-content {
    transform: none
}

.modal-image {
    min-height: 590px;
    background: var(--cream);
    display: grid;
    place-items: center;
    padding: 25px
}

    .modal-image img {
        width: 100%;
        height: 100%;
        max-height: 600px;
        object-fit: contain
    }

.modal-details {
    padding: 55px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.close-modal {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 2;
    border: 0;
    background: var(--ink);
    color: #fff;
    width: 38px;
    height: 38px;
    cursor: pointer
}

.modal-category {
    font-size: 9px;
    color: var(--magenta);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase
}

.modal-title {
    font: 600 45px/1 var(--serif);
    margin: 12px 0
}

.modal-price {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 30px
}

.option-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0
}

    .option-label span, .selection-error {
        color: var(--magenta)
    }

.modal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 13px
}

.option-btn {
    min-width: 44px;
    height: 40px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 0 12px;
    font: 600 11px var(--sans);
    cursor: pointer;
    transition: .2s
}

    .option-btn:hover, .option-btn.selected {
        border-color: var(--ink);
        background: var(--ink);
        color: #fff
    }

.color-options .option-btn {
    display: flex;
    align-items: center;
    gap: 7px
}

.selection-error {
    min-height: 18px;
    font-size: 10px;
    font-weight: 600
}

.modal-description {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.7;
    margin: 4px 0 22px
}

.add-cart-btn, .checkout-btn {
    border: 0;
    background: var(--magenta);
    color: #fff;
    padding: 17px;
    font: 700 10px var(--sans);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: .2s
}

    .add-cart-btn:hover, .checkout-btn:hover {
        background: var(--magenta-dark)
    }

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 600;
    opacity: 0;
    pointer-events: none;
    transition: .3s
}

    .drawer-overlay.active {
        opacity: 1;
        pointer-events: auto
    }

.cart-drawer {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: min(430px,100%);
    background: #fff;
    z-index: 601;
    transform: translateX(100%);
    transition: .35s;
    display: grid;
    grid-template-rows: auto 1fr auto;
    box-shadow: var(--shadow)
}

    .cart-drawer.active {
        transform: none
    }

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px;
    border-bottom: 1px solid var(--line)
}

    .cart-header span {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--magenta)
    }

    .cart-header h2 {
        font: 600 34px var(--serif)
    }

    .cart-header button {
        border: 0;
        background: none;
        font-size: 18px;
        cursor: pointer
    }

.cart-items {
    padding: 22px;
    overflow: auto
}

.cart-empty {
    text-align: center;
    padding: 70px 15px;
    color: var(--muted);
    font-size: 12px
}

    .cart-empty i {
        display: block;
        font-size: 32px;
        margin-bottom: 15px
    }

.cart-item {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 13px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line)
}

    .cart-item img {
        width: 76px;
        height: 92px;
        object-fit: cover;
        background: var(--cream)
    }

    .cart-item h4 {
        font: 600 18px var(--serif)
    }

    .cart-item p {
        font-size: 10px;
        color: var(--muted);
        margin: 5px 0
    }

    .cart-item strong {
        font-size: 11px
    }

.remove-item {
    border: 0;
    background: none;
    color: var(--magenta);
    cursor: pointer
}

.cart-footer {
    border-top: 1px solid var(--line);
    padding: 24px
}

.cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px
}

    .cart-total strong {
        font-size: 17px
    }

.checkout-btn {
    width: 100%
}

footer {
    background: #1e1d1d;
    color: #beb9b7;
    border-top: 2px solid var(--cyan)
}

.footer-grid {
    max-width: 1400px;
    margin: auto;
    padding: 65px 40px;
    display: grid;
    grid-template-columns: 1.1fr .8fr 1fr 1fr;
    gap: 60px
}

.footer-column h3 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px
}

.footer-column p, .footer-column > a {
    font-size: 12px;
    line-height: 1.9;
    color: #beb9b7;
    text-decoration: none
}

.socials {
    display: flex;
    gap: 9px;
    margin-top: 20px
}

    .socials a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #5a5757;
        color: #fff;
        display: grid;
        place-items: center;
        text-decoration: none;
        transition: .2s
    }

        .socials a:hover {
            background: var(--magenta)
        }

.map-placeholder {
    height: 150px;
    background: #292727;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px
}

    .map-placeholder i {
        font-size: 25px;
        color: var(--magenta)
    }

    .map-placeholder span {
        color: #fff;
        font-size: 12px
    }

    .map-placeholder a {
        color: var(--cyan);
        font-size: 10px
    }

.footer-bottom {
    border-top: 1px solid #333;
    padding: 22px 40px;
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 10px
}

.whatsapp {
    position: fixed;
    left: 24px;
    bottom: 25px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 31px;
    text-decoration: none;
    z-index: 90;
    box-shadow: 0 8px 25px rgba(0,0,0,.25)
}

@media(max-width:1100px) {
    .site-header {
        grid-template-columns: 90px 1fr 220px
    }

    .main-nav {
        gap: 18px
    }

    .shop-layout {
        grid-template-columns: 230px 1fr;
        gap: 30px
    }

    .products-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .product-image {
        height: 380px
    }
}

@media(max-width:800px) {
    .announcement {
        font-size: 8px
    }

    .site-header {
        height: 74px;
        grid-template-columns: auto 1fr auto;
        padding: 0 18px;
        gap: 15px
    }

    .brand img {
        width: 60px;
        height: 60px
    }

    .nav-toggle {
        display: block;
        order: 3
    }

    .search-box {
        max-width: 220px;
        justify-self: end
    }

    .main-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 74px;
        background: #fff;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
        box-shadow: var(--shadow)
    }

        .main-nav.active {
            display: flex
        }

    .hero {
        min-height: 520px;
        margin: 0;
        padding: 45px 28px
    }

        .hero:after {
            display: none
        }

    .shop-layout {
        display: block;
        padding: 65px 18px
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(330px,88%);
        height: 100vh;
        z-index: 700;
        background: #fff;
        padding: 30px;
        transform: translateX(-105%);
        transition: .3s;
        overflow: auto;
        box-shadow: var(--shadow)
    }

        .sidebar.active {
            transform: none
        }

    .filter-close {
        display: block
    }

    .mobile-filter-btn {
        display: block;
        width: 100%;
        padding: 13px;
        border: 1px solid var(--ink);
        background: #fff;
        margin-bottom: 30px;
        text-transform: uppercase;
        font: 700 10px var(--sans);
        letter-spacing: 1px
    }

    .products-header h2 {
        font-size: 42px
    }

    .modal-content {
        grid-template-columns: 1fr
    }

    .modal-image {
        min-height: 300px;
        height: 340px
    }

    .modal-details {
        padding: 35px 25px
    }

    .footer-grid {
        grid-template-columns: 1fr;
        padding: 50px 28px;
        gap: 38px
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .product-card:hover .quick-view {
        display: none
    }
}

@media(max-width:520px) {
    .search-box {
        display: none
    }

    .site-header {
        grid-template-columns: 1fr auto
    }

    .nav-toggle {
        order: initial
    }

    .products-grid {
        gap: 30px 10px
    }

    .product-image {
        height: 250px
    }

    .product-name {
        font-size: 17px
    }

    .product-sizes {
        display: none
    }

    .products-header h2 {
        font-size: 36px
    }

    .modal {
        padding: 8px
    }

    .modal-title {
        font-size: 36px
    }

    .modal-image {
        height: 270px;
        min-height: 270px
    }

    .hero h1 {
        font-size: 52px
    }

    .hero p {
        font-size: 12px
    }

    .about-strip {
        padding: 75px 20px
    }
}


/* Historia DRIMS */
.about-section {
    padding: 120px clamp(20px,5vw,80px);
    background: var(--cream);
    overflow: hidden
}

.about-heading {
    max-width: 680px;
    margin-bottom: 65px
}

    .about-heading h2 {
        font: 600 clamp(48px,6vw,82px)/.88 var(--serif);
        letter-spacing: -2px;
        margin: 22px 0
    }

        .about-heading h2 em {
            color: var(--magenta);
            font-weight: 500
        }

    .about-heading > p {
        max-width: 560px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.8
    }

.about-timeline {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--magenta);
    box-shadow: var(--shadow)
}

.story-card {
    min-height: 650px;
    padding: 65px clamp(30px,5vw,75px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.story-past {
    background: var(--ink);
    color: #fff
}

.story-present {
    background: #fff;
    color: var(--ink)
}

.story-number {
    position: absolute;
    right: 30px;
    top: 16px;
    font: 600 90px/1 var(--serif);
    opacity: .07
}

.story-title {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    position: relative
}

.story-present .story-title {
    border-color: var(--line)
}

.story-star {
    font-size: 42px;
    line-height: 1;
    color: var(--magenta)
}

.story-title span:not(.story-star) {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 9px;
    font-weight: 600;
    color: var(--cyan);
    margin-bottom: 4px
}

.story-title h3 {
    font: 600 54px/.8 var(--serif);
    text-transform: uppercase
}

.story-copy {
    padding-top: 38px;
    position: relative;
    z-index: 1
}

    .story-copy p {
        font-size: 13px;
        line-height: 1.9;
        margin-bottom: 26px;
        max-width: 570px
    }

.story-past .story-copy p {
    color: #d8d3d1
}

.story-copy strong {
    color: inherit;
    font-weight: 700
}

.story-mark {
    margin-top: auto;
    font: 600 18px var(--serif);
    letter-spacing: 5px;
    color: var(--magenta)
}

.story-present .story-mark {
    position: absolute;
    right: -12px;
    bottom: -24px;
    font: 700 105px/.8 var(--serif);
    letter-spacing: -4px;
    color: rgba(23,21,22,.04)
}

@media(max-width:800px) {
    .about-section {
        padding: 80px 20px
    }

    .about-heading {
        margin-bottom: 42px
    }

    .about-timeline {
        grid-template-columns: 1fr
    }

    .story-card {
        min-height: auto;
        padding: 50px 30px
    }

    .story-copy p {
        font-size: 12px
    }

    .story-mark {
        margin-top: 20px
    }
}

@media(max-width:520px) {
    .about-heading h2 {
        font-size: 46px
    }

    .story-title h3 {
        font-size: 46px
    }

    .story-number {
        font-size: 68px
    }
}

/* Menú dinámico de categorías */
.dynamic-nav {
    display: flex;
    align-items: center;
    gap: 30px
}

.nav-dropdown {
    position: relative
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: none;
    color: var(--ink);
    font: 600 11px var(--sans);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap
}

    .nav-dropdown-trigger i {
        font-size: 8px;
        transition: transform .25s
    }

.nav-dropdown.open .nav-dropdown-trigger i {
    transform: rotate(180deg)
}

.nav-submenu {
    position: absolute;
    left: 50%;
    top: calc(100% + 22px);
    width: 220px;
    padding: 9px;
    background: #fff;
    border-top: 2px solid var(--magenta);
    box-shadow: 0 20px 45px rgba(23,21,22,.16);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%,10px);
    transition: .22s;
    z-index: 150
}

.nav-dropdown.open .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0)
}

.nav-submenu-item {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: 500 11px var(--sans);
    cursor: pointer;
    transition: .18s
}

    .nav-submenu-item:hover, .nav-submenu-item.active {
        background: var(--ink);
        color: #fff;
        padding-left: 17px
    }

.nav-submenu-all {
    margin-bottom: 5px;
    border-bottom: 1px solid var(--line);
    color: var(--magenta);
    font-weight: 700
}

@media(max-width:1250px) and (min-width:801px) {
    .site-header {
        grid-template-columns: 85px 1fr 190px;
        gap: 15px;
        padding-left: 25px;
        padding-right: 25px
    }

    .main-nav, .dynamic-nav {
        gap: 15px
    }

        .main-nav a, .cart-link, .nav-dropdown-trigger {
            font-size: 9px;
            letter-spacing: .8px
        }
}

@media(max-width:800px) {
    .dynamic-nav {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .nav-dropdown {
        width: 100%;
        border-bottom: 1px solid var(--line)
    }

    .nav-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 13px 0
    }

    .nav-submenu {
        position: static;
        width: 100%;
        padding: 0 0 8px 12px;
        border-top: 0;
        border-left: 2px solid var(--magenta);
        box-shadow: none;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .nav-dropdown.open .nav-submenu {
        display: block;
        transform: none
    }

    .nav-submenu-item {
        padding: 10px 12px
    }
}

/* Datos de entrega */
.cart-drawer {
    grid-template-rows: auto minmax(100px,1fr) auto auto
}

.delivery-form {
    padding: 22px 24px 10px;
    border-top: 1px solid var(--line);
    max-height: 46vh;
    overflow-y: auto;
    background: #fbfaf8
}

.delivery-title {
    margin-bottom: 18px
}

    .delivery-title > span {
        color: var(--magenta);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase
    }

    .delivery-title h3 {
        font: 600 25px var(--serif);
        margin-top: 3px
    }

.checkout-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.checkout-field {
    margin-bottom: 13px
}

    .checkout-field label {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
        color: var(--ink);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .7px;
        text-transform: uppercase
    }

        .checkout-field label span, .checkout-error {
            color: var(--magenta)
        }

        .checkout-field label em {
            color: var(--muted);
            font-size: 8px;
            font-style: normal;
            font-weight: 500
        }

    .checkout-field input, .checkout-field select, .checkout-field textarea {
        display: block;
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 0;
        background: #fff;
        color: var(--ink);
        padding: 10px 11px;
        outline: none;
        font: 400 11px var(--sans);
        transition: border-color .2s,box-shadow .2s
    }

    .checkout-field textarea {
        resize: vertical;
        line-height: 1.5
    }

        .checkout-field input:focus, .checkout-field select:focus, .checkout-field textarea:focus {
            border-color: var(--magenta);
            box-shadow: 0 0 0 2px rgba(215,19,102,.08)
        }

    .checkout-field select:disabled {
        background: #efedeb;
        color: #656061;
        cursor: not-allowed;
        opacity: 1
    }

    .checkout-field small {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 8px;
        text-align: right
    }

.checkout-error {
    min-height: 16px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5
}

.checkout-btn:disabled {
    cursor: wait;
    opacity: .7
}

@media(max-width:520px) {
    .delivery-form {
        max-height: 50vh;
        padding: 20px
    }

    .checkout-fields-row {
        grid-template-columns: 1fr
    }
}

/* Tipo de envío */
.shipping-type-field {
    margin: 2px 0 16px;
    border: 0
}

    .shipping-type-field legend {
        margin-bottom: 8px;
        color: var(--ink);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .7px;
        text-transform: uppercase
    }

        .shipping-type-field legend span {
            color: var(--magenta)
        }

.shipping-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

.shipping-option {
    position: relative;
    cursor: pointer
}

    .shipping-option > input {
        position: absolute;
        opacity: 0;
        pointer-events: none
    }

    .shipping-option > span {
        height: 100%;
        display: grid;
        grid-template-columns: 23px 1fr;
        column-gap: 5px;
        align-items: center;
        padding: 12px 10px;
        border: 1px solid var(--line);
        background: #fff;
        transition: .2s
    }

    .shipping-option i {
        grid-row: 1/3;
        color: var(--muted);
        font-size: 15px
    }

    .shipping-option strong {
        font-size: 9px;
        text-transform: uppercase
    }

    .shipping-option small {
        color: var(--muted);
        font-size: 7px;
        line-height: 1.3
    }

    .shipping-option > input:checked + span {
        border-color: var(--magenta);
        box-shadow: inset 0 0 0 1px var(--magenta);
        background: rgba(215,19,102,.035)
    }

        .shipping-option > input:checked + span i {
            color: var(--magenta)
        }

    .shipping-option > input:focus-visible + span {
        outline: 2px solid var(--cyan);
        outline-offset: 2px
    }

.checkout-field.field-disabled {
    opacity: .55
}

    .checkout-field.field-disabled textarea {
        cursor: not-allowed;
        background: #efedeb
    }

@media(max-width:380px) {
    .shipping-options {
        grid-template-columns: 1fr
    }
}

/* Promociones en carrito */
.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 10px
}

.cart-discount-row strong {
    color: var(--magenta)
}

.cart-promotions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px
}

    .cart-promotions span, .promotion-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 7px;
        background: rgba(215,19,102,.08);
        color: var(--magenta);
        font-size: 8px;
        font-weight: 700;
        line-height: 1.25
    }

.cart-item-price {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px
}

    .cart-item-price del {
        color: var(--muted);
        font-size: 9px
    }

.promotion-badge {
    margin-top: 7px;
    padding: 4px 6px
}


/* Categorías debajo del banner */
.category-showcase {
    max-width: 1500px;
    margin: auto;
    padding: 95px 40px 20px
}

.category-showcase-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 38px
}

    .category-showcase-heading h2 {
        font: 600 clamp(42px,5vw,68px)/.9 var(--serif);
        letter-spacing: -1.5px;
        margin-top: 18px
    }

    .category-showcase-heading > p {
        max-width: 420px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.8
    }

.category-showcase-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px
}

.category-showcase-card {
    min-width: 0;
    height: 360px;
    position: relative;
    overflow: hidden;
    border: 0;
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    text-align: left;
    isolation: isolate
}

    .category-showcase-card img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .65s cubic-bezier(.2,.7,.2,1),filter .3s
    }

    .category-showcase-card:after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(to top,rgba(12,10,11,.88),rgba(12,10,11,.06) 66%);
        transition: background .3s
    }

.category-showcase-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 25px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px
}

.category-showcase-name {
    font: 600 clamp(24px,2.2vw,34px)/.9 var(--serif)
}

.category-showcase-action {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .75
}

.category-showcase-card:hover img {
    transform: scale(1.06)
}

.category-showcase-card:hover:after, .category-showcase-card.active:after {
    background: linear-gradient(to top,rgba(167,14,77,.94),rgba(18,16,17,.08) 72%)
}

.category-showcase-card.active {
    box-shadow: inset 0 0 0 3px var(--magenta)
}

.category-showcase-card:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px
}

.category-showcase-all {
    background: linear-gradient(145deg,var(--ink),#393335)
}

.category-showcase-all-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.08);
    font-size: 105px;
    transition: transform .4s,color .3s
}

.category-showcase-all:hover .category-showcase-all-icon {
    transform: rotate(8deg) scale(1.08);
    color: rgba(215,19,102,.18)
}

.category-showcase-loading, .category-showcase-error {
    grid-column: 1/-1;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
    font-size: 11px
}

    .category-showcase-error i {
        color: var(--magenta)
    }

@media(max-width:1050px) {
    .category-showcase-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .category-showcase-card {
        height: 330px
    }
}

@media(max-width:800px) {
    .category-showcase {
        padding: 70px 18px 10px
    }

    .category-showcase-heading {
        display: block;
        margin-bottom: 28px
    }

        .category-showcase-heading > p {
            margin-top: 18px
        }

    .category-showcase-grid {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-right: -18px;
        padding-right: 18px
    }

        .category-showcase-grid::-webkit-scrollbar {
            display: none
        }

    .category-showcase-card {
        flex: 0 0:min(72vw,285px);
        height: 340px;
        scroll-snap-align: start
    }
}

@media(max-width:520px) {
    .category-showcase-heading h2 {
        font-size: 43px
    }

    .category-showcase-card {
        height: 310px
    }
}

/* Medidas de talla en modal */
.size-measurements {
    margin: 4px 0 10px;
    padding: 16px;
    border: 1px solid var(--line);
    background: var(--cream)
}

.size-measurements-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line)
}

    .size-measurements-heading > span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: var(--muted);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase
    }

        .size-measurements-heading > span i {
            color: var(--magenta)
        }

    .size-measurements-heading > strong {
        font: 600 17px var(--serif);
        color: var(--ink)
    }

.size-measurements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 12px;
    background: var(--line)
}

.measurement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
    background: #fff
}

    .measurement-item span {
        color: var(--muted);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase
    }

    .measurement-item strong {
        font-size: 12px;
        color: var(--ink)
    }

@media(max-width:420px) {
    .size-measurements-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .size-measurements-grid {
        grid-template-columns: 1fr
    }
}