:root {
    --ink:#151515;
    --muted:#737373;
    --soft:#ededed;
    --line:#d8d8d8;
    --bg:#ffffff;
    --accent:#363636;
    --ok:#238456;
    --danger:#d73a39;
    --radius:20px;
}
* {
    box-sizing: border-box;
}
[hidden] {
    display:none !important;
}
html {
    scroll-behavior:smooth;
}
body {
    margin:0;
    color:var(--ink);
    background:var(--bg);
    font:15px/1.45 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
button,input,textarea,select {
    font:inherit;
}
button {
    cursor:pointer;
}
button:disabled {
    cursor:not-allowed;
    opacity:.55;
}
a {
    color:inherit;
}
.layout {
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
}
.eyebrow {
    font-size:10px;
    letter-spacing:.16em;
    color:#777;
    font-weight:800;
}
.page-head {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-end;
    padding:34px 0 20px;
}
h1 {
    font-size:clamp(25px,3.2vw,38px);
    font-weight:800;
    letter-spacing:-.06em;
    line-height:1.12;
    margin:7px 0 6px;
}
.lead {
    font-size:13px;
    color:#777;
    margin:0;
}
.source {
    display:flex;
    gap:8px;
    align-items:center;
    color:#666;
    white-space:nowrap;
    font-size:12px;
}
.source-dot {
    display:inline-block;
    border-radius:50%;
    width:8px;
    height:8px;
    background:#bd944b;
}
.source-dot.active {
    background:var(--ok);
}
.toolbar-shell {
    position:sticky;
    top:0;
    z-index:30;
    background:#fff;
    padding:12px 0 16px;
}
.toolbar {
    border:1.5px solid var(--ink);
    border-radius:22px 22px 0 0;
    padding:12px 14px;
    background:#fff;
    display:grid;
    grid-template-columns: minmax(160px,2fr) repeat(3,minmax(120px,1.1fr)) 55px;
    gap:13px;
    align-items:center;
}
.input-wrap {
    position:relative;
}
.input-wrap svg {
    width:18px;
    height:18px;
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#777;
    pointer-events:none;
}
.control {
    width:100%;
    background:var(--soft);
    border:1px solid transparent;
    border-radius:14px;
    min-height:45px;
    padding:0 17px;
    color:#575757;
    outline:none;
}
input.control.search {
    padding-left:45px;
}
select.control {
    appearance:none;
    padding-right:36px;
    background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m6 9 6 6 6-6"/%3E%3C/svg%3E');
    background-repeat:no-repeat;
    background-size:16px;
    background-position:right 13px center;
}
.control:focus {
    border-color:#838383;
    background:#f7f7f7;
}
.cart-trigger {
    border:0;
    background:var(--soft);
    color:#555;
    height:45px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.cart-trigger svg {
    width:23px;
    height:23px;
}
.cart-trigger.active {
    background:#171717;
    color:white;
}
.badge-count {
    position:absolute;
    right:-7px;
    bottom:-7px;
    background:#e83f37;
    color:white;
    border-radius:99px;
    min-width:23px;
    height:23px;
    display:grid;
    place-items:center;
    padding:0 4px;
    font-size:12px;
    font-weight:800;
    border:2px solid white;
}
.tool-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    margin:4px 0 18px;
}
.result-count {
    font-size:12px;
    color:#7b7b7b;
}
.links {
    display:flex;
    gap:14px;
    align-items:center;
}
.link-btn {
    background:none;
    padding:4px 0;
    border:0;
    color:#666;
    font-size:12px;
    text-decoration:underline;
    text-underline-offset:3px;
}
.notice {
    border:1px solid #e5d6bb;
    background:#fffaf1;
    padding:15px 18px;
    margin:10px 0 22px;
    border-radius:10px;
    color:#685538;
    font-size:13px;
}
.notice strong {
    display:block;
    margin-bottom:4px;
}
.notice button {
    background:#fff;
    border:1px solid #bdab91;
    border-radius:8px;
    padding:7px 12px;
    margin:10px 10px 0 0;
    font-size:12px;
}
.gallery {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:34px;
    row-gap:32px;
    align-items:start;
}
.product-thumb {
    display:block;
    width:100%;
    border:1.5px solid #141414;
    border-radius:0;
    padding:0;
    overflow:hidden;
    aspect-ratio:1/1;
    background:white;
    position:relative;
    transition:border-radius .3s ease,transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.product-thumb:hover {
    transform:translateY(-3px);
    box-shadow:0 9px 24px #00000013;
}
.product-thumb.selected {
    border-radius:23px;
    border-width:2px;
    transform:scale(1.025);
    box-shadow:0 12px 30px #0000000e;
}
.product-thumb img {
    width:100%;
    height:100%;
    object-fit:contain;
    padding:16px;
    display:block;
}
.product-thumb .thumb-hint {
    position:absolute;
    bottom:12px;
    left:12px;
    right:12px;
    background:#fffdf8ef;
    color:#333;
    padding:8px 12px;
    font-size:11px;
    font-weight:600;
    border-radius:10px;
    text-align:center;
    opacity:0;
    transform:translateY(5px);
    transition:.2s;
}
.product-thumb:hover .thumb-hint,.product-thumb:focus-visible .thumb-hint {
    opacity:1;
    transform:none;
}
.detail-panel {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(0, .96fr) minmax(0,1.12fr);
    gap:43px;
    padding:9px 0 23px;
    scroll-margin-top:135px;
    animation:expandIn .38s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes expandIn {
    from {
        opacity:0;
        transform:translateY(-18px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}
.hero-image {
    position:relative;
    width:100%;
    border:1.5px solid var(--ink);
    border-radius:24px;
    min-height:375px;
    overflow:hidden;
    aspect-ratio:1/.97;
    background:#fff;
}
.hero-image img {
    display:block;
    width:100%;
    height:100%;
    max-height:510px;
    padding:25px;
    object-fit:contain;
}
.close-detail {
    position:absolute;
    right:11px;
    top:11px;
    border:0;
    width:48px;
    height:48px;
    background:#101010;
    color:white;
    border-radius:1px;
    display:grid;
    place-items:center;
    font-size:33px;
    line-height:1;
}
.product-meta {
    min-width:0;
}
.product-title {
    margin:0 0 19px;
    font-size:clamp(24px,3vw,35px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.03em;
    background:#0b0b0b;
    color:#fff;
    padding:11px 17px;
}
.product-line {
    display:flex;
    gap:9px;
    color:#777;
    font-size:12px;
    margin-bottom:18px;
}
.product-line .sep {
    color:#aaa;
}
.description {
    color:#656565;
    font-size:13px;
    margin:0 0 12px;
}
.product-fields {
    display:grid;
    grid-template-columns:minmax(0,1fr) 155px;
    gap:24px;
}
.field {
    margin:0 0 13px;
}
.field-label {
    font-size:12px;
    display:block;
    margin-bottom:6px;
    color:#777;
}
.field-hint {
    font-size:11px;
    color:#999;
}
.chips {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.chip {
    border:1px solid #dedede;
    border-radius:99px;
    color:#595959;
    background:#f1f1f1;
    padding:5px 11px;
    font-size:12px;
    line-height:1.4;
    transition:.16s;
}
.chip.active {
    border-color:#1c1c1c;
    background:#262626;
    color:white;
}
.chip:focus-visible {
    outline:2px solid #777;
    outline-offset:2px;
}
/* Enlace de guía: discreto, pero fácil de descubrir bajo las tallas. */ .size-guide-link {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
    padding:8px 12px;
    border:1px solid #d7d7d7;
    background:#fafafa;
    color:#262626;
    border-radius:10px;
    font-size:12px;
    font-weight:650;
    transition:background .15s,border-color .15s;
}
.size-guide-link svg {
    flex:none;
    width:17px;
    height:17px;
}
.size-guide-link:hover {
    background:#eeeeee;
    border-color:#a3a3a3;
}
.size-guide-link:focus-visible {
    outline:2px solid #222;
    outline-offset:3px;
}
.size-guide-link .link-arrow {
    margin-left:1px;
    font-weight:700;
    color:#777;
}
.single-switch {
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:3px;
    color:#666;
    font-size:12px;
}
.single-switch input {
    width:17px;
    height:17px;
    accent-color:#222;
}
.price-block {
    background:#eee;
    text-align:center;
    border-radius:0;
    padding:11px 5px;
    color:#616161;
    font-size:29px;
    font-weight:300;
}
.quantity-block {
    display:flex;
    align-items:center;
    background:#eee;
    justify-content:center;
    gap:6px;
    padding:7px 5px;
}
.quantity-block input {
    width:85px;
    min-width:40px;
    border:0;
    text-align:right;
    background:transparent;
    outline:0;
    font-size:28px;
    color:#676767;
}
.quantity-block span {
    font-size:11px;
    color:#727272;
}
.subtle {
    font-size:11px;
    color:#777;
    margin:5px 0 0;
}
.notes {
    border:1.5px solid var(--ink);
    width:100%;
    min-height:79px;
    resize:vertical;
    padding:11px 13px;
    color:#555;
    margin-top:5px;
    outline:0;
    border-radius:0;
}
.important {
    font-size:12px;
    color:#777;
    line-height:1.4;
    margin:13px 0 0;
}
.important strong {
    display:block;
    color:#666;
}
.detail-footer {
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
    margin-top:12px;
}
.validation {
    font-size:12px;
    color:#b32c22;
    min-height:17px;
    flex:1;
}
.primary {
    background:var(--accent);
    color:white;
    border:1px solid var(--accent);
    border-radius:14px;
    padding:12px 24px;
    font-weight:600;
}
.primary:hover {
    background:#151515;
}
.primary.sm {
    padding:9px 16px;
}
.empty {
    grid-column:1/-1;
    padding:70px 20px;
    text-align:center;
    color:#888;
    border:1px dashed #bbb;
    border-radius:10px;
}
.load-more {
    display:block;
    margin:28px auto 50px;
    border:0;
    background:transparent;
    color:#777;
    font-size:14px;
    padding:6px 35px;
}
.load-more::after {
    content:'▼';
    display:block;
    font-size:12px;
}
.cart-panel {
    position:absolute;
    right:0;
    top:calc(100% - 15px);
    width:min(445px,calc(100vw - 30px));
    background:white;
    border:1.5px solid #111;
    box-shadow:0 12px 38px #0000001c;
    padding:17px;
    z-index:50;
}
.cart-panel:before {
    content:'';
    position:absolute;
    top:-9px;
    right:30px;
    width:16px;
    height:16px;
    background:white;
    border-top:1.5px solid #111;
    border-left:1.5px solid #111;
    transform:rotate(45deg);
}
.cart-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:13px;
}
.cart-head h2 {
    margin:0;
    font-size:18px;
}
.cart-head-actions {
    display:flex;
    align-items:center;
    gap:8px;
}
.clear-cart-btn {
    border:1px solid #e6b8b5;
    background:#fff7f7;
    color:#ad302b;
    padding:6px 9px;
    font-size:11px;
    font-weight:700;
    border-radius:8px;
}
.clear-cart-btn:hover {
    background:#fee8e7;
}
.icon-btn {
    border:0;
    background:transparent;
    font-size:22px;
    padding:2px 8px;
}
.cart-list {
    max-height:380px;
    overflow:auto;
}
.cart-item {
    display:grid;
    grid-template-columns:69px minmax(0,1fr) auto 23px;
    align-items:center;
    gap:10px;
    margin:0 0 13px;
    padding:0 0 12px;
    border-bottom:1px solid #eee;
}
.cart-item img {
    width:69px;
    height:69px;
    object-fit:contain;
    border:1px solid #222;
    border-radius:18px;
    padding:4px;
}
.cart-item h3 {
    font-size:16px;
    line-height:1.08;
    margin:2px 0 3px;
    overflow-wrap:anywhere;
}
.cart-item .qty {
    font-size:10px;
}
.cart-item .small {
    font-size:10px;
    color:#767676;
    overflow-wrap:anywhere;
}
.cart-price {
    font-size:15px;
    white-space:nowrap;
}
.include-check {
    accent-color:#5ba8e4;
    width:17px;
    height:17px;
    cursor:pointer;
}
.remove-btn {
    border:1px solid #e9b7b4;
    color:#b32d26;
    background:#fff5f4;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:11px;
    font-weight:700;
    line-height:1.2;
    padding:7px 10px;
    min-height:30px;
    margin-top:9px;
}
.remove-btn:hover,.remove-btn:focus-visible {
    background:#ffe7e5;
    border-color:#cc736e;
}
.unit-details {
    display:block;
    font-size:11px;
    color:#747474;
    margin-top:3px;
    line-height:1.4;
}
.price-breakdown {
    font-size:11px;
    text-align:center;
    color:#696969;
    margin:6px 0 0;
    line-height:1.35;
}
.cart-total {
    display:flex;
    align-items:end;
    justify-content:flex-end;
    padding-top:12px;
    border-top:1px solid #333;
    gap:16px;
}
.cart-total .total-value {
    padding:8px 12px;
    background:#101010;
    color:#fff;
    min-width:135px;
    text-align:center;
    font-size:21px;
}
.cart-total .total-caption {
    font-size:11px;
    align-self:flex-start;
    color:#777;
}
.checkout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 135px;
    gap:14px;
    margin-top:15px;
    align-items:end;
}
.checkout label {
    font-size:11px;
    color:#777;
}
.checkout input {
    width:100%;
    display:block;
    background:#eee;
    border:1px solid transparent;
    border-radius:0;
    height:45px;
    margin-top:4px;
    padding:0 9px;
    outline:0;
}
.checkout input:focus {
    border-color:#777;
}
.cart-help {
    font-size:11px;
    color:#8a8a8a;
    margin:10px 0 0;
}
.cart-error {
    color:#b32b20;
    font-size:11px;
    margin-top:8px;
    min-height:13px;
}
.cart-zero {
    color:#888;
    text-align:center;
    padding:35px 0;
}
.footer {
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid #eee;
    padding:19px 0 35px;
    margin-top:35px;
    font-size:11px;
    color:#888;
}
.overlay {
    position:fixed;
    inset:0;
    background:rgba(12,12,12,.73);
    z-index:80;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    backdrop-filter:blur(3px);
}
.overlay[hidden] {
    display:none;
}
.size-guide-dialog {
    width:min(880px,100%);
    max-height:min(92vh,960px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:white;
    border-radius:18px;
    box-shadow:0 24px 75px #0005;
}
.size-guide-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    padding:20px 24px 17px;
    border-bottom:1px solid #e9e9e9;
}
.size-guide-kicker {
    display:block;
    font-size:10px;
    font-weight:800;
    letter-spacing:.13em;
    color:#858585;
    margin-bottom:4px;
}
.size-guide-head h2 {
    margin:0;
    font-size:clamp(18px,2.5vw,25px);
    line-height:1.2;
    letter-spacing:-.035em;
}
.size-guide-head p {
    margin:5px 0 0;
    font-size:12px;
    color:#858585;
}
.size-guide-close {
    border:1px solid #dedede;
    background:#f5f5f5;
    color:#111;
    width:40px;
    height:40px;
    flex:none;
    border-radius:11px;
    font-size:27px;
    line-height:1;
    display:grid;
    place-items:center;
}
.size-guide-viewer {
    min-height:170px;
    max-height:64vh;
    overflow:auto;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    background:#f7f7f7;
    padding:20px;
    overscroll-behavior:contain;
}
.size-guide-viewer img {
    width:auto;
    max-width:100%;
    max-height:58vh;
    height:auto;
    object-fit:contain;
    background:white;
    box-shadow:0 5px 24px #00000012;
    border-radius:6px;
}
.size-guide-viewer.is-zoomed {
    justify-content:flex-start;
}
.size-guide-viewer.is-zoomed img {
    width:max(920px,145%);
    max-width:none;
    max-height:none;
}
.size-guide-status {
    margin:auto;
    color:#6c6c6c;
    text-align:center;
    font-size:13px;
    padding:32px 10px;
    line-height:1.6;
}
.size-guide-foot {
    padding:13px 23px;
    display:flex;
    gap:15px;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #ececec;
}
.size-guide-foot p {
    color:#858585;
    font-size:11px;
    margin:0;
}
.size-guide-actions {
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:9px;
}
.size-guide-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid #d6d6d6;
    border-radius:9px;
    padding:9px 13px;
    background:white;
    color:#252525;
    text-decoration:none;
    font-weight:650;
    font-size:12px;
    white-space:nowrap;
}
.size-guide-action:hover {
    background:#eee;
}
.size-guide-action.dark {
    background:#242424;
    border-color:#242424;
    color:white;
}
.size-guide-action.dark:hover {
    background:#0d0d0d;
}
@media(max-width:570px) {
    .overlay {
        padding:8px;
    }
    .size-guide-dialog {
        max-height:95vh;
        border-radius:13px;
    }
    .size-guide-head {
        padding:16px;
    }
    .size-guide-viewer {
        padding:9px;
        max-height:67vh;
    }
    .size-guide-foot {
        padding:12px 14px;
        display:block;
    }
    .size-guide-foot p {
        margin-bottom:10px;
    }
    .size-guide-actions {
        justify-content:stretch;
    }
    .size-guide-action {
        flex:1;
    }
}
.toast {
    position:fixed;
    bottom:23px;
    right:23px;
    background:#1a1a1a;
    color:white;
    border-radius:11px;
    padding:12px 18px;
    font-size:13px;
    z-index:90;
    box-shadow:0 15px 40px #0002;
}
.toast[hidden] {
    display:none;
}
#printSheet {
    display:none;
}
@media(max-width:950px) {
    .gallery {
        gap:24px;
    }
    .detail-panel {
        gap:22px;
    }
    .product-fields {
        grid-template-columns:minmax(0,1fr) 125px;
    }
    .price-block {
        font-size:23px;
    }
}
@media(max-width:760px) {
    .layout {
        width:min(100% - 28px,620px);
    }
    .page-head {
        align-items:flex-start;
        padding-top:20px;
    }
    .source {
        padding-top:3px;
    }
    .toolbar {
        grid-template-columns:1fr 1fr 48px;
        gap:8px;
        border-radius:17px 17px 0 0;
        padding:10px;
    }
    .input-wrap {
        grid-column:1/3;
    }
    .toolbar .filter-category {
        grid-column:1/2;
    }
    .toolbar .filter-brand {
        grid-column:2/3;
    }
    .toolbar .sort {
        grid-column:1/3;
    }
    .cart-trigger {
        grid-column:3;
        grid-row:1/3;
        height:100%;
        min-height:46px;
    }
    .gallery {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }
    .detail-panel {
        grid-template-columns:1fr;
        gap:16px;
    }
    .hero-image {
        min-height:0;
        aspect-ratio:1/0.8;
    }
    .hero-image img {
        max-height:400px;
    }
    .product-fields {
        grid-template-columns:minmax(0,1fr) 155px;
    }
    .cart-panel {
        top:calc(100% - 9px);
    }
}
@media(max-width:450px) {
    .page-head {
        display:block;
    }
    .source {
        margin-top:12px;
    }
    .gallery {
        column-gap:12px;
        row-gap:16px;
    }
    .product-thumb img {
        padding:9px;
    }
    .detail-panel {
        grid-column:1/-1;
    }
    .product-title {
        font-size:22px;
    }
    .product-fields {
        grid-template-columns:minmax(0,1fr) 113px;
        gap:11px;
    }
    .price-block {
        font-size:20px;
    }
    .quantity-block input {
        font-size:21px;
        width:55px;
    }
    .hero-image {
        aspect-ratio:1/1;
    }
    .footer {
        display:block;
    }
    .cart-item {
        grid-template-columns:56px minmax(0,1fr) auto 21px;
        gap:7px;
    }
    .cart-item img {
        width:56px;
        height:56px;
    }
    .cart-item h3 {
        font-size:13px;
    }
    .cart-price {
        font-size:13px;
    }
}
@media print {
    body > *:not(#printSheet) {
        display:none !important;
    }
    #printSheet {
        display:block;
    }
    @page {
        size:A4;
        margin:15mm;
    }
}