:root {
    --bg: #101111;
    --surface: #191b1a;
    --line: #333632;
    --ink: #f4f4ed;
    --muted: #a9aaa3;
    --lime: #c9e861;
    --danger: #d85e50
}

.store-status { padding: 20px; margin: 20px 0; border: 1px solid var(--line); border-radius: 8px; }
.store-status p { margin: 0 0 12px; line-height: 1.6; }
.checkout-pending, .checkout-result { padding: 16px; border: 1px solid #a3b76b; border-radius: 8px; background: #f5fbe0; color: #20251a; line-height: 1.6; }
.checkout-result h3 { margin-top: 0; overflow-wrap: anywhere; }
.checkout-result .secondary-button { display: block; margin-top: 12px; min-height: 44px; text-align: center; }
.store-status[hidden], .checkout-pending[hidden], .checkout-result[hidden] { display: none; }
button:disabled { cursor: not-allowed; }
.inventory-actions, .inventory-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.inventory-publish-help { margin: 0 0 16px; font-size: 12px; line-height: 1.6; color: #62645e; }
.publication-badge { display: inline-block; margin-top: 7px; border-radius: 20px; padding: 4px 8px; font-size: 10px; font-weight: 800; background: #e9ebe6; color: #4e514a; }
.publication-badge.draft { background: #fff0d2; color: #78500a; }
.publication-badge.published { background: #e6f2cd; color: #3c531a; }
@media (max-width: 650px) {
  .inventory-actions, .inventory-form-actions { width: 100%; }
  .inventory-actions button, .inventory-form-actions button { flex: 1 1 145px; min-height: 44px; }
}

/* Historial administrativo de seguridad */
.audit-intro{margin:5px 0 0;color:#676963;font-size:12px}.audit-list{display:grid;gap:8px}.audit-entry{display:flex;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid #e0e2dc;background:#fff}.audit-entry b{font-size:13px}.audit-entry p{margin:5px 0 0;color:#676963;font-size:12px}.audit-meta{display:grid;align-content:start;justify-items:end;gap:5px;color:#4f514c;font-size:12px;text-align:right}.audit-meta small{color:#787a74;font-size:11px}@media(max-width:650px){.audit-entry{display:grid;gap:8px}.audit-meta{justify-items:start;text-align:left}}
.my-orders-list{display:grid;gap:10px;margin-top:20px}.my-order-card{padding:15px;border:1px solid #dedfdb;background:#fff}.my-order-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.my-order-head h3,.my-order-card p{margin:0}.my-order-head h3{font-size:14px}.my-order-date,.my-order-lines{margin-top:6px!important;color:#686a65;font-size:12px;line-height:1.55}.my-order-total{display:block;margin-top:10px;font-size:14px}.my-order-card .secondary-button{margin-top:14px}.order-status{display:inline-block;padding:5px 8px;border-radius:99px;background:#e9efdb;color:#45551e;font-size:10px;font-weight:800;white-space:nowrap}.order-status.cancelled{background:#ffe4df;color:#9d3c2e}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Manrope, Arial, sans-serif
}

button,
input,
textarea,
select {
    font: inherit
}

button {
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

.topbar {
    min-height: 98px;
    padding: 20px clamp(24px, 4vw, 68px);
    display: flex;
    align-items: center;
    gap: 42px;
    border-bottom: 1px solid var(--line)
}

.brand {
    font-size: 30px;
    letter-spacing: -2.4px;
    font-weight: 800;
    white-space: nowrap
}

.brand span {
    color: var(--lime);
    font-size: 11px;
    vertical-align: top;
    margin-left: 2px;
    letter-spacing: 0
}

.search {
    height: 54px;
    border: 1px solid #555853;
    border-radius: 7px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 720px;
    color: #b9bcb4
}

.search span {
    font-size: 33px;
    transform: rotate(-15deg)
}

.search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-size: 16px
}

.quick-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 13px;
    white-space: nowrap
}

.text-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 700
}

.text-button:hover {
    color: var(--lime)
}

.account,
.bag {
    border: 0;
    padding: 11px 15px;
    color: #111;
    background: var(--lime);
    border-radius: 99px;
    font-size: 13px;
    font-weight: 800
}

.bag {
    background: transparent;
    color: var(--ink);
    border: 1px solid #686a65
}

.bag b {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: 5px;
    background: var(--lime);
    color: #111;
    border-radius: 50%;
    font-size: 10px
}

.categories {
    min-height: 59px;
    padding: 0 clamp(24px, 9vw, 175px);
    display: flex;
    align-items: center;
    gap: 27px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    white-space: nowrap
}

.categories button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #e1e2dc;
    font-size: 14px;
    font-weight: 700
}

.categories button:hover,
.categories .active {
    color: var(--lime)
}

.hero {
    min-height: 430px;
    padding: 84px 7vw 66px;
    background:
        linear-gradient(90deg, rgba(10, 11, 10, .90) 0%, rgba(10, 11, 10, .70) 48%, rgba(10, 11, 10, .20) 100%),
        url('img/encabezado.png') center right / cover no-repeat;
    border-bottom: 1px solid var(--line);
}

.hero-mobile-image {
    display: none;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--lime);
    font: 12px 'DM Mono', monospace;
    letter-spacing: 1.3px
}

.hero h1 {
    max-width: 750px;
    margin: 0;
    font-size: clamp(44px, 6vw, 83px);
    line-height: .98;
    letter-spacing: -5px
}

.hero h1 i {
    font-family: Georgia, serif;
    font-weight: 400
}

.minimum-banner{display:flex;align-items:center;justify-content:center;gap:22px;padding:14px 24px;background:var(--lime);color:#141614;font-size:12px}.minimum-banner b{font-size:13px}.minimum-banner a{font-weight:800;text-decoration:underline}

.intro {
    max-width: 465px;
    color: #c5c6bf;
    margin: 23px 0 28px;
    font-size: 16px;
    line-height: 1.65
}

.cta {
    display: inline-flex;
    gap: 35px;
    padding: 13px 18px;
    background: var(--lime);
    color: #151714;
    font-size: 13px;
    font-weight: 800
}

.catalog {
    padding: 66px clamp(24px, 4vw, 68px) 70px
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 28px
}

.section-heading h2 {
    margin: 0;
    font-size: 31px;
    letter-spacing: -1.5px
}

.section-heading #result-count {
    margin: 0;
    color: var(--muted);
    font: 12px 'DM Mono', monospace
}

.catalog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 28px
}

.catalog-filters select {
    min-width: 190px;
    padding: 10px 12px;
    border: 1px solid #4b4e49;
    background: #191b1a;
    color: #efefe9;
    font-size: 12px
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 19px
}

.photo-wrap {
    width: 100%;
    aspect-ratio: 1.06;
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: #eeefea
}

.photo-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform .35s
}

.card:hover img {
    transform: scale(1.05)
}

.badge {
    display: none;
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 5px 7px;
    background: var(--lime);
    color: #182015;
    font: 10px 'DM Mono', monospace
}

.badge:not(:empty) {
    display: block
}

.card-info {
    padding-top: 13px
}

.product-brand {
    color: var(--muted);
    margin: 0 0 3px;
    font: 10px 'DM Mono', monospace;
    text-transform: uppercase
}

.card h3 {
    min-height: 41px;
    margin: 0;
    font-size: 15px;
    line-height: 1.37
}

.card-bottom {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    align-items: center
}

.price {
    margin: 0;
    font-size: 17px;
    font-weight: 800
}

.price-caption { margin:0 0 3px; color:#aeb0aa; font:9px 'DM Mono',monospace; letter-spacing:.55px; }

.sizes {
    padding: 0;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: 11px
}

.sizes:hover {
    color: var(--lime)
}

.wholesale-meta {
    margin: 10px 0 0;
    color: #aeb0aa;
    font-size: 10px;
    line-height: 1.55
}

.benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border-top: 1px solid var(--line);
    background: var(--line)
}

.benefits article {
    padding: 28px 7vw;
    background: var(--surface)
}

.benefits p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px
}

footer {
    padding: 32px clamp(24px, 4vw, 68px);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    color: var(--muted);
    font-size: 12px
}

footer .brand {
    color: var(--ink);
    font-size: 22px
}

dialog {
    border: 0
}

dialog::backdrop {
    background: #090a09c9;
    backdrop-filter: blur(4px)
}

.close-modal {
    position: absolute;
    z-index: 3;
    right: 17px;
    top: 14px;
    display: grid;
    place-items: center;
    padding: 0 0 2px;
    width: 34px;
    height: 34px;
    border: 1px solid #d8dad5;
    border-radius: 50%;
    background: #fff;
    color: #171817;
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1
}

.product-modal > .close-modal {
    box-shadow: 0 2px 8px #15171526
}

.close-modal:hover,
.close-modal:focus-visible {
    border-color: #151715;
    outline: 2px solid #c9e861;
    outline-offset: 2px
}

.product-modal {
    width: min(1100px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    color: #161716;
    background: #fff
}

.purchase-quantity { margin-top: 20px; }
.purchase-quantity label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 800; }
.quantity-stepper { display: inline-grid; grid-template-columns: 48px 76px 48px; border: 1px solid #cfd1cb; border-radius: 8px; overflow: hidden; }
.quantity-stepper button { border: 0; background: #f4f5f2; color: #171817; font-size: 24px; min-height: 48px; touch-action: manipulation; }
.quantity-stepper input { min-width: 0; width: 100%; border: 0; border-inline: 1px solid #cfd1cb; border-radius: 0; padding: 8px; background: #fff; color: #171817; text-align: center; font-size: 16px; appearance: textfield; -moz-appearance: textfield; }
.quantity-stepper input::-webkit-inner-spin-button, .quantity-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.quantity-stepper button:disabled { color: #9a9c95; }
.quantity-stepper :focus-visible { outline: 2px solid #171817; outline-offset: -3px; }
.purchase-quantity p { margin: 8px 0 12px; color: #666862; font-size: 11px; line-height: 1.5; }

.product-modal[open] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr)
}

.modal-gallery {
    min-height: 620px;
    padding: 20px;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 15px;
    background: #f4f5f2
}

.thumbs {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.thumb {
    height: 57px;
    padding: 0;
    border: 1px solid transparent;
    overflow: hidden;
    background: #e8e9e5
}

.thumb.active {
    border: 2px solid #151715
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply
}

.main-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ebede9
}

.main-image>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform .28s ease;
    cursor: zoom-in
}

.main-image>img.zoomed { cursor: zoom-out; transform: scale(1.55); }
.image-label { position:absolute; top:15px; left:15px; padding:7px 9px; background:#151715; color:#fff; font:10px 'DM Mono',monospace; letter-spacing:.7px; text-transform:uppercase; }
.image-zoom { position:absolute; right:15px; bottom:15px; display:flex; gap:6px; align-items:center; padding:8px 11px; border:0; border-radius:99px; background:#fffffff0; color:#171817; font-size:11px; font-weight:800; cursor:pointer; }
.image-zoom:hover { background:var(--lime); }

.modal-details {
    padding: 61px 38px 30px;
    overflow-y: auto
}

.modal-brand {
    margin: 0 0 7px;
    color: #777970;
    font: 11px 'DM Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase
}

.modal-details h2 {
    margin: 0;
    font-size: 25px;
    letter-spacing: -1.15px;
    line-height: 1.18
}

.type {
    margin: 7px 0 9px;
    color: #70736f;
    font-size: 13px
}

.modal-price {
    margin: 0;
    font-size: 21px;
    font-weight: 800
}

.modal-price-caption { margin:17px 0 3px; color:#70736f; font:9px 'DM Mono',monospace; letter-spacing:.75px; }

.size-details {
    margin: 58px 0 0
}

.size-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 0 14px;
    cursor: pointer;
    list-style: none
}

.size-heading::-webkit-details-marker { display: none }
.size-heading::marker { content: '' }

.size-heading h3 {
    margin: 0;
    font-size: 14px
}

.size-heading::after{content:"";display:block;flex:0 0 32px;width:32px;height:32px;margin-left:20px;border:1px solid #bfc2ba;border-radius:50%;background-color:#f7f8f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23111210' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:19px;box-shadow:0 1px 3px rgb(15 18 12 / 12%);transition:transform .18s ease,background .18s ease,border-color .18s ease}.size-heading:hover::after{border-color:#6b7d2b;background-color:#eef4d8}.size-heading:focus-visible{outline:2px solid #76901f;outline-offset:5px;border-radius:4px}.size-details[open] .size-heading::after{transform:rotate(180deg)}.size-details-content{padding:0 0 3px}.size-guide-button{margin:0 0 12px;padding:0;border:0;background:transparent;color:#4c5e1c;font-size:11px;font-weight:800;cursor:pointer}.guide-modal{width:min(620px,calc(100vw - 32px));padding:35px;background:#fff;color:#191a18}.guide-modal h2{margin:0;font-size:28px;letter-spacing:-1px}.guide-modal>p:not(.eyebrow){color:#666862;font-size:13px;line-height:1.6}.guide-table-wrap{overflow:auto;margin-top:22px}.guide-table{width:100%;border-collapse:collapse;font-size:12px}.guide-table th,.guide-table td{padding:11px;text-align:center;border-bottom:1px solid #e1e3de}.guide-table th{background:#f2f3ef;font-size:11px}.guide-table td:first-child{font-weight:800}

.size-heading button {
    border: 0;
    background: transparent;
    font-size: 11px
}

.size-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 0
}

.size-grid button {
    height: 47px;
    border: 1px solid #d1d3ce;
    background: #fff;
    color: #252624;
    font-size: 13px
}

.size-grid button:hover,
.size-grid .selected {
    border-color: #151715;
    background: #151715;
    color: #fff
}

.size-grid button:disabled {
    color: #a2a39e;
    background: #f5f5f3;
    cursor: not-allowed;
    text-decoration: line-through
}
.purchase-mode{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:27px}.purchase-mode button{min-height:102px;padding:14px;border:1px solid #d1d3ce;background:#fff;color:#252624;text-align:left;cursor:pointer}.purchase-mode button:disabled{opacity:.48;cursor:not-allowed}.purchase-mode button>*{display:block}.mode-kicker{margin-bottom:8px;color:#71736d;font:9px 'DM Mono',monospace;letter-spacing:1px}.purchase-mode strong{font-size:12px;line-height:1.25}.purchase-mode small{margin-top:7px;color:#686a65;font-size:10px;line-height:1.35}.purchase-mode button.active{border-color:#151715;background:#151715;color:#fff}.purchase-mode button.active .mode-kicker,.purchase-mode button.active small{color:var(--lime)}.purchase-summary{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px;border:1px solid #d9dbd5;background:#f5f6f2}.purchase-summary div{padding:10px 9px;border-right:1px solid #d9dbd5}.purchase-summary div:last-child{border-right:0}.purchase-summary span{display:block;color:#6b6d68;font:9px 'DM Mono',monospace;letter-spacing:.3px;text-transform:uppercase}.purchase-summary b{display:block;margin-top:5px;font-size:11px;line-height:1.25}.wholesale-note{min-height:34px;margin:11px 0 0;color:#666862;font-size:11px;line-height:1.5}.size-heading #run-count{color:#686a65;font-size:11px}.size-grid .included{border-color:var(--lime);background:#f5fbe0}.admin-access{padding:9px 14px;border:1px solid var(--lime);background:transparent;color:var(--lime);font-size:12px;font-weight:800}.admin-access:hover{background:var(--lime);color:#151714}.admin-hidden{display:none}.admin-view{min-height:100vh;background:#f2f3ef;color:#171817;grid-template-columns:245px minmax(0,1fr)}.admin-view:not([hidden]){display:grid}.admin-sidebar{min-height:100vh;padding:29px 18px;display:flex;flex-direction:column;background:#151715;color:#f4f4ed}.admin-sidebar .brand{padding:0 10px}.admin-label{margin:30px 10px 12px;color:#989b93;font:10px 'DM Mono',monospace;letter-spacing:1px}.admin-nav{display:grid;gap:4px}.admin-nav button{padding:12px 11px;border:0;border-radius:3px;background:transparent;color:#d3d5cf;text-align:left;font-size:13px;font-weight:700}.admin-nav button:hover,.admin-nav .active{background:#2a2c29;color:var(--lime)}.exit-admin{margin-top:20px;padding:12px 10px;border:0;border-top:1px solid #353733;border-bottom:1px solid #353733;background:transparent;color:#c7c9c3;text-align:left;font-size:12px}.admin-main{min-width:0;padding:38px clamp(24px,4vw,65px) 70px}.admin-page-header{display:flex;align-items:start;justify-content:space-between;gap:20px;padding-bottom:28px;border-bottom:1px solid #daddd7}.admin-page-header h1{margin:0;font-size:34px;letter-spacing:-1.8px}.admin-user{padding:9px 12px;background:#e1e4dc;color:#4c4e49;font-size:12px}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0}.admin-stat{padding:18px;background:#fff;border:1px solid #e0e2dc}.admin-stat p{margin:0;color:#71736d;font-size:11px}.admin-stat b{display:block;margin-top:8px;font-size:27px;letter-spacing:-1px}.admin-section{margin-top:30px}.admin-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.admin-section-head h2{margin:0;font-size:19px;letter-spacing:-.8px}.admin-filters{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.admin-filters input,.admin-filters select{padding:10px 11px;border:1px solid #d1d3ce;background:#fff;font-size:12px}.admin-filters input{min-width:230px}.inventory-alert{padding:14px 16px;background:#fff4e8;border-left:4px solid #e2a14b;color:#634116;font-size:12px}.status-pill{display:inline-block;padding:4px 7px;border-radius:99px;background:#e5f1c7;color:#41531b;font-size:10px;font-weight:800}.status-pill.low{background:#ffe4df;color:#9d3c2e}.admin-table .sizes-cell{max-width:190px;color:#62645f;font-size:11px;line-height:1.6}.admin-empty{padding:45px;background:#fff;color:#757770;text-align:center}.customer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.customer-card{padding:18px;background:#fff;border:1px solid #e0e2dc}.customer-card h3,.customer-card p{margin:0}.customer-card h3{font-size:14px}.customer-card p{margin-top:6px;color:#676963;font-size:12px}.orders-table .order-lines{max-width:280px;font-size:11px;line-height:1.55}.admin-form-card{margin-bottom:22px}.admin-form-card .admin-section-head{padding:16px 20px;margin:0;background:#fff;border:1px solid #dedfdb;border-bottom:0}.admin-form-card .admin-form{margin:0}.admin-form-actions{display:flex;gap:10px;align-items:center}.secondary-button{padding:10px 13px;border:1px solid #cfd1cb;background:#fff;color:#222;font-size:12px;font-weight:700}
.order-pdf{display:block;margin-top:8px;padding:6px 8px;border:1px solid #cfd1cb;background:#fff;color:#232421;font-size:10px;font-weight:800;cursor:pointer}.order-pdf:hover{border-color:var(--lime);background:var(--lime)}
body.admin-active>.topbar,body.admin-active>.categories,body.admin-active>main,body.admin-active>footer{display:none}
.stock-editor{padding:16px;border:1px solid #d9dbd5;background:#f8f9f6}.stock-editor-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}.stock-editor-head b{font-size:12px}.stock-editor-head small{color:#6d7069;font-size:11px}.stock-size-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.stock-size-field{display:grid!important;gap:5px!important;padding:8px!important;background:#fff;border:1px solid #e1e3de;color:#52544f!important;font-size:11px!important}.stock-size-field input{width:100%;min-width:0;padding:8px!important;text-align:center;font-weight:800}.field-help{margin:5px 0 0;color:#6d7069;font-size:11px;line-height:1.5}
.photo-editor{padding:16px;border:1px solid #d9dbd5;background:#f8f9f6}.photo-editor header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.photo-editor header b{font-size:12px}.photo-editor header small{color:#6d7069;font-size:11px}.photo-list{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.photo-card{position:relative;width:94px}.photo-card img{display:block;width:94px;height:72px;object-fit:cover;background:#eee}.photo-card b{display:block;margin-top:5px;font-size:10px}.photo-card button{width:27px;height:25px;margin:5px 2px 0 0;border:1px solid #cfd1cb;background:#fff;font-size:12px}.photo-card .remove-photo{color:#a84435}.photo-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.photo-add input[type="url"]{flex:1;min-width:220px}.photo-add button{padding:10px 12px;border:1px solid #cfd1cb;background:#fff;font-size:12px;font-weight:700}
@media(max-width:650px){.stock-size-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stock-editor-head{align-items:start;flex-direction:column;gap:3px}}

.bag-button,
.favorite-button {
    width: 100%;
    height: 54px;
    margin-top: 31px;
    border: 0;
    border-radius: 999px;
    background: #151715;
    color: #fff;
    font-weight: 700;
    font-size: 14px
}

.bag-button:disabled {
    background: #797b76;
    cursor: not-allowed
}

.favorite-button {
    height: 51px;
    margin-top: 10px;
    border: 1px solid #cbccc8;
    background: #fff;
    color: #1a1b19
}

.favorite-button.saved {
    color: var(--danger);
    border-color: var(--danger)
}

.side-modal,
.auth-modal {
    width: min(470px, calc(100vw - 24px));
    min-height: 430px;
    max-height: calc(100vh - 24px);
    padding: 30px;
    background: #fff;
    color: #161716
}

.panel-head {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;
    border-bottom: 1px solid #e2e3df;
    padding-bottom: 17px
}

.panel-head h2 {
    margin: 0;
    font-size: 24px
}

.panel-head .close-modal,
.auth-modal .close-modal {
    right: 0;
    top: -4px;
    background: #efefec
}

.cart-items {
    padding: 10px 0;
    max-height: 48vh;
    overflow: auto
}

.empty {
    text-align: center;
    padding: 70px 10px;
    color: #777
}

.cart-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #ebebe8
}

.cart-row img {
    width: 72px;
    height: 65px;
    object-fit: cover;
    background: #eee;
    mix-blend-mode: multiply
}

.cart-row h3 {
    margin: 0;
    font-size: 13px
}

.cart-row p {
    margin: 4px 0;
    color: #73746f;
    font-size: 11px
}

.remove {
    border: 0;
    background: transparent;
    color: #a2463b;
    font-size: 11px
}

.cart-summary {
    border-top: 1px solid #ddd;
    padding-top: 15px
}

.cart-summary p {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: 16px
}

.cart-summary small {
    display: block;
    margin-top: 7px;
    color: #777;
    font-size: 11px
}

.cart-summary .bag-button {
    margin-top: 18px
}

.auth-modal {
    padding: 42px
}

.auth-modal h2 {
    margin: 0 0 7px;
    font-size: 28px
}

.auth-modal p {
    color: #73746f;
    font-size: 13px
}

.form-grid {
    display: grid;
    gap: 11px;
    margin-top: 23px
}

.form-grid input,
.form-grid textarea,
.form-grid select {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d2ce;
    background: #fff;
    outline-color: #151715;
    font-size: 13px
}

.form-grid textarea {
    min-height: 78px;
    resize: vertical
}

.form-switch {
    margin-top: 17px
}

.form-switch button {
    border: 0;
    background: transparent;
    color: #51691e;
    font-size: 12px;
    font-weight: 800
}

.admin-modal {
    width: min(1080px, calc(100vw - 24px));
    min-height: min(700px, calc(100vh - 24px));
    max-height: calc(100vh - 24px);
    padding: 28px;
    background: #f7f8f5;
    color: #171817;
    overflow: auto
}

.admin-tabs {
    display: flex;
    gap: 8px;
    padding: 18px 0;
    border-bottom: 1px solid #d8dad5
}

.admin-tabs button {
    padding: 8px 13px;
    border: 1px solid #d1d3ce;
    background: #fff;
    font-size: 12px
}

.admin-tabs .active {
    background: #171817;
    color: #fff
}

.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 22px 0
}

.admin-toolbar h3 {
    margin: 0
}

.add-button {
    padding: 10px 13px;
    border: 0;
    background: var(--lime);
    font-size: 12px;
    font-weight: 800
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 12px
}

.admin-table th,
.admin-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e4e5e1
}

.admin-table img {
    width: 50px;
    height: 40px;
    object-fit: cover;
    background: #eee;
    mix-blend-mode: multiply
}

.admin-table button {
    padding: 5px 7px;
    border: 1px solid #d0d1cc;
    background: #fff;
    font-size: 10px
}

.admin-table .danger {
    color: #b74b3d
}

.admin-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    padding: 20px;
    background: #fff;
    border: 1px solid #dedfdb
}

.admin-form .wide {
    grid-column: 1/-1
}

.admin-form label {
    display: grid;
    gap: 5px;
    color: #50524e;
    font-size: 11px;
    font-weight: 700
}

.admin-form input,
.admin-form textarea,
.admin-form select {
    padding: 10px;
    border: 1px solid #d1d2ce;
    outline-color: #151715
}

.admin-form textarea {
    min-height: 70px
}

.order-card {
    padding: 16px;
    margin-top: 12px;
    background: #fff;
    border-left: 4px solid var(--lime)
}

.order-card header {
    display: flex;
    justify-content: space-between;
    gap: 10px
}

.order-card h3,
.order-card p {
    margin: 0
}

.order-card p {
    margin-top: 7px;
    color: #555;
    font-size: 12px
}

.order-card select {
    margin-top: 12px;
    padding: 7px;
    border: 1px solid #ccc;
    background: white;
    font-size: 12px
}

.settings-card {
    max-width: 560px;
    margin-top: 22px;
    padding: 20px;
    background: #fff
}

.settings-card h3 {
    margin-top: 0
}

.toast {
    position: fixed;
    z-index: 20;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 20px);
    padding: 12px 17px;
    border-radius: 99px;
    background: var(--lime);
    color: #162015;
    opacity: 0;
    pointer-events: none;
    font-size: 12px;
    font-weight: 800;
    transition: .2s
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0)
}

@media(max-width:950px) {
    .topbar {
        gap: 20px
    }

    .quick-links .text-button {
        display: none
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .categories {
        padding: 0 24px
    }

    .product-modal[open] {
        grid-template-columns: 1fr
    }

    .modal-gallery {
        min-height: 430px
    }

    .modal-details {
        padding: 35px
    }

    .product-modal {
        max-height: calc(100vh - 20px)
    }
}

@media(max-width:650px) {
    .topbar {
        min-height: auto;
        padding: 17px 20px;
        flex-wrap: wrap
    }

    .brand {
        font-size: 26px
    }

    .search {
        order: 3;
        flex-basis: 100%;
        height: 47px
    }

    .quick-links {
        gap: 7px
    }

    .account,
    .bag {
        padding: 9px 10px
    }

    .hero {
        padding: 0;
        min-height: 0;
        background: #0a0b0a;
    }

    .hero-mobile-image {
        display: block;
        width: 100%;
        height: auto;
    }

    .hero-copy {
        padding: 28px 24px 36px;
    }

    .hero h1 {
        letter-spacing: -3px
    }

    .minimum-banner{align-items:start;flex-direction:column;gap:6px}.size-heading{flex-wrap:wrap}

    .catalog {
        padding: 45px 20px 60px
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 27px 12px
    }

    .section-heading h2 {
        font-size: 26px
    }

    .section-heading #result-count {
        display: none
    }

    .card h3 {
        font-size: 13px
    }

    .price {
        font-size: 14px
    }

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

    .benefits article {
        padding: 22px 24px
    }

    footer {
        flex-wrap: wrap
    }

    .product-modal {
        width: calc(100vw - 32px);
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
        border-radius: 12px;
        overscroll-behavior: contain
    }

    .modal-gallery {
        height: 48vh;
        min-height: 350px;
        padding: 12px;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) 48px;
        gap: 9px
    }

    .thumbs { order:2; flex-direction:row; overflow-x:auto; padding-bottom:1px }
    .thumb {
        flex:0 0 48px;
        height: 46px
    }

    .modal-details {
        padding: 30px 23px
    }

    .purchase-summary div { padding:9px 6px }
    .purchase-summary b { font-size:10px }
    .image-zoom span { display:none }

    .size-details {
        margin-top: 34px
    }

    .auth-modal {
        padding: 32px 24px
    }

    .admin-modal {
        padding: 19px
    }

    .admin-table {
        display: block;
        overflow: auto
    }

    .admin-form {
        grid-template-columns: 1fr
    }

    .admin-form .wide {
        grid-column: auto
    }

    .admin-toolbar {
        align-items: start;
        flex-direction: column
    }
}

/* Administración: escritorio, tableta y controles táctiles en celular. */
.admin-sidebar-head { display: grid; gap: 18px; min-width: 0; }
.admin-back {
    min-height: 44px;
    padding: 10px;
    border: 1px solid #353733;
    border-radius: 4px;
    background: transparent;
    color: #f4f4ed;
    font-size: 12px;
    text-align: left;
}
.admin-back:hover { background: #2a2c29; }
.admin-view button { cursor: pointer; }
.admin-view button:disabled { cursor: not-allowed; }
.admin-view :is(button, input, select, textarea, a):focus-visible {
    outline: 2px solid #6d871f;
    outline-offset: 3px;
}
.admin-sidebar :is(button, a):focus-visible { outline-color: var(--lime); }
.admin-nav { grid-template-columns: minmax(0, 1fr); }
.admin-nav button { min-height: 44px; min-width: 0; }
.admin-page-header > div { min-width: 0; }
.admin-page-header .eyebrow { color: #596c28; }
.admin-user { max-width: 45%; overflow-wrap: anywhere; }
#admin-content { min-width: 0; margin-top: 24px; }
.admin-section-head { flex-wrap: wrap; }
.admin-section-head > div { min-width: 0; }
.admin-view :is(.add-button, .secondary-button, .bag-button) { min-height: 44px; }
.admin-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-stat { min-width: 0; overflow-wrap: anywhere; }
.admin-table-wrap { width: 100%; min-width: 0; overflow-x: auto; }
.admin-table-wrap:focus-visible { outline: 2px solid #6d871f; outline-offset: 3px; }
.admin-data-table { display: table; min-width: 680px; }
.admin-data-table :is(th, td) { vertical-align: top; overflow-wrap: anywhere; }
.admin-data-table button { min-height: 44px; padding: 10px 14px; font-size: 13px; }
.admin-data-table select {
    width: 100%;
    min-width: 0;
    max-width: 240px;
    min-height: 44px;
    padding: 10px 8px;
    border: 1px solid #cfd1cb;
    background: #fff;
    color: #171817;
}
.admin-product { display: flex; align-items: center; gap: 12px; }
.admin-product > div { min-width: 0; }
.admin-table .admin-product img { width: 64px; height: 56px; flex: 0 0 64px; border-radius: 4px; }
.admin-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-form :is(label, .wide, .stock-editor) { min-width: 0; }
.admin-form :is(input, textarea, select), .admin-filters :is(input, select), .settings-card input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
}
.admin-form > .add-button { grid-column: 1 / -1; }
.admin-form input[type="file"] { overflow: hidden; }
.admin-filters select { width: auto; }
.stock-size-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.customer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.customer-card, .audit-entry > div { min-width: 0; overflow-wrap: anywhere; }
.audit-meta { flex-shrink: 0; max-width: 40%; }
.settings-card { width: 100%; max-width: 560px; }
.settings-card label { font-size: 13px; }
.admin-active .toast { max-width: calc(100vw - 32px); overflow-wrap: anywhere; text-align: center; }

@media (max-width: 1100px) {
    .admin-stats, .customer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 950px) {
    .admin-view { grid-template-columns: minmax(0, 1fr); }
    .admin-sidebar { min-height: auto; padding: 18px 24px; }
    .admin-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .admin-sidebar .brand { padding: 0; }
    .admin-label { display: none; }
    .admin-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 18px; overflow: visible; }
    .admin-nav button { text-align: center; white-space: normal; }
    .admin-main { padding: 28px 24px 50px; }
}
@media (max-width: 650px) {
    .admin-sidebar { padding: 16px; }
    .admin-sidebar .brand { font-size: 24px; }
    .admin-back { max-width: 150px; font-size: 12px; text-align: center; }
    .admin-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
    .admin-nav button { padding: 10px 6px; font-size: 12px; }
    .admin-main { padding: 24px 16px 40px; }
    .admin-page-header { flex-wrap: wrap; gap: 12px; padding-bottom: 20px; }
    .admin-page-header h1 { font-size: 28px; }
    .admin-user { display: block; max-width: 100%; }
    .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .admin-stat { padding: 14px; }
    .admin-stat b { font-size: 22px; }
    .admin-section-head { align-items: stretch; flex-direction: column; }
    .admin-section-head > button { width: 100%; }
    .admin-empty { padding: 28px 16px; }
    .admin-data-table { display: block; min-width: 0; background: transparent; overflow: visible; }
    /* Mantiene los encabezados para lectores de pantalla sin ocupar espacio visual. */
    .admin-data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .admin-data-table tbody { display: grid; gap: 12px; }
    .admin-data-table tr { display: block; min-width: 0; padding: 4px 16px; border: 1px solid #daddd7; border-radius: 8px; background: #fff; }
    .admin-data-table td { display: block; width: 100%; max-width: none; padding: 12px 0; font-size: 14px; line-height: 1.6; }
    .admin-data-table td:last-child { border-bottom: 0; }
    .admin-data-table td::before { content: attr(data-label); display: block; margin-bottom: 6px; color: #676963; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
    .admin-data-table :is(.sizes-cell, .order-lines) { max-width: none; font-size: 13px; }
    .admin-data-table :is(button, select) { width: 100%; max-width: none; }
    .admin-form { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .admin-form-card .admin-section-head { padding: 16px; }
    .admin-form .wide { grid-column: 1 / -1; }
    .admin-form label { font-size: 13px; }
    .admin-view :is(input, textarea, select), .stock-size-field input { font-size: 16px; }
    .stock-editor { padding: 12px; }
    .stock-editor-head { align-items: flex-start; flex-direction: column; gap: 6px; }
    .stock-size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-form-actions { flex-direction: column; align-items: stretch; }
    .admin-filters { display: grid; grid-template-columns: minmax(0, 1fr); }
    .admin-filters :is(input, select) { width: 100%; }
    .customer-grid { grid-template-columns: minmax(0, 1fr); }
    .audit-entry { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .audit-meta { max-width: 100%; justify-items: start; text-align: left; }
    .settings-card { padding: 16px; }
}
@media (max-width: 380px) {
    .admin-sidebar-head { flex-wrap: wrap; }
    .admin-back { max-width: none; width: 100%; text-align: left; }
    .admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stock-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cuenta y sesión: salida accesible sin desplazarse por el formulario. */
.admin-user-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 55%; }
.admin-user-actions .admin-user { max-width: 100%; min-height: 44px; border: 1px solid #cfd1cb; color: #171817; font: inherit; font-size: 13px; cursor: pointer; }
.session-logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 16px; border: 1px solid #e2b9b2; border-radius: 6px; background: #fff5f2; color: #862f25; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.session-logout svg { flex-shrink: 0; }
.session-logout:hover { background: #fbe5de; border-color: #862f25; }
.session-logout:disabled { opacity: .6; cursor: progress; }
.session-logout:focus-visible, #account-button:focus-visible { outline: 2px solid #171817; outline-offset: 3px; }
#auth-modal { min-height: 0; padding: 0; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: hidden; }
#auth-modal[open] { display: flex; flex-direction: column; }
#auth-modal > .close-modal { top: 12px; right: 12px; width: 44px; height: 44px; background: #fff; }
#auth-content { min-width: 0; min-height: 0; padding: 38px 28px 28px; overflow-y: auto; overscroll-behavior: contain; }
#auth-content > h2 { padding-right: 32px; }
.session-card { padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid #e0e2dc; }
.session-identity { display: flex; align-items: flex-start; gap: 14px; }
.session-identity > div { min-width: 0; }
.session-avatar { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: #eaf2d4; color: #344518; font-size: 22px; font-weight: 800; }
.session-identity h2 { margin: 8px 0 4px; font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.auth-modal .session-status { margin: 0; color: #465d22; font-size: 12px; font-weight: 800; }
.auth-modal .session-email { margin: 0; overflow-wrap: anywhere; }
.session-card .session-logout { width: 100%; margin-top: 20px; }
.auth-modal .session-error { color: #862f25; line-height: 1.5; }
.auth-modal .session-help { line-height: 1.6; }
.profile-details { margin-top: 24px; }
.profile-details h3 { margin: 0; font-size: 16px; }
.profile-details .form-grid { margin-top: 16px; }
.profile-details label { display: grid; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; }
#auth-modal :is(input, select, button) { min-height: 44px; }
@media (max-width: 950px) {
    #auth-modal :is(input, textarea, select) { font-size: 16px; }
}
@media (max-width: 650px) {
    .quick-links { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
    .quick-links > button { min-height: 44px; }
    .admin-user-actions { width: 100%; max-width: 100%; justify-content: flex-start; }
    .admin-user-actions > button { flex: 1 1 140px; }
    #auth-content { padding: 34px 20px 24px; }
    #auth-modal :is(input, textarea, select) { font-size: 16px; }
    .session-identity { gap: 10px; }
    .session-identity h2 { font-size: 22px; }
}