:root{

    /* Colores */

    --k-primary:#2563eb;
    --k-primary-hover:#1d4ed8;

    --k-success:#16a34a;
    --k-danger:#dc2626;
    --k-warning:#f59e0b;
    --k-info:#0ea5e9;

    --k-white:#ffffff;

    --k-gray-50:#f9fafb;
    --k-gray-100:#f3f4f6;
    --k-gray-200:#e5e7eb;
    --k-gray-300:#d1d5db;
    --k-gray-400:#9ca3af;
    --k-gray-500:#6b7280;
    --k-gray-600:#4b5563;
    --k-gray-700:#374151;
    --k-gray-800:#1f2937;
    --k-gray-900:#111827;

    /* Tipografía */

    --k-font-family:Inter,sans-serif;

    --k-font-xs:.75rem;
    --k-font-sm:.875rem;
    --k-font-md:1rem;
    --k-font-lg:1.125rem;
    --k-font-xl:1.25rem;
    --k-font-2xl:1.5rem;

    /* Espaciado */

    --k-space-1:.25rem;
    --k-space-2:.5rem;
    --k-space-3:.75rem;
    --k-space-4:1rem;
    --k-space-5:1.25rem;
    --k-space-6:1.5rem;
    --k-space-8:2rem;

    /* Bordes */

    --k-radius-sm:.375rem;
    --k-radius:.5rem;
    --k-radius-lg:.75rem;
    --k-radius-xl:1rem;

    /* Sombras */

    --k-shadow-sm:0 1px 2px rgba(0,0,0,.05);
    --k-shadow:0 2px 6px rgba(0,0,0,.08);
    --k-shadow-lg:0 10px 30px rgba(0,0,0,.12);

}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    font-size:16px;
}

body{

    margin:0;

    font-family:var(--k-font-family);

    color:var(--k-gray-800);

    background:var(--k-gray-50);

    line-height:1.5;

}

img{

    display:block;

    max-width:100%;

}

button,
input,
textarea,
select{

    font:inherit;

}

button{

    border:none;
    background:none;

}

.k-container{

    width:min(1280px,100% - 2rem);

    margin:auto;

}

.k-section{

    margin-block:3rem;

}

.k-grid{

    display:grid;

}

.k-flex{

    display:flex;

}

.k-hidden{

    display:none!important;

}

/* ===============================
   Card
================================== */

.k-card{

    background:var(--k-white);

    border:1px solid var(--k-gray-200);

    border-radius:var(--k-radius-lg);

    box-shadow:var(--k-shadow-sm);

    overflow:hidden;

}

/* ===============================
   Header
================================== */

.k-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:var(--k-space-4);

    padding:var(--k-space-5) var(--k-space-6);

    border-bottom:1px solid var(--k-gray-200);

}

/* ===============================
   Title
================================== */

.k-card-title{

    margin:0;

    font-size:1.25rem;

    font-weight:600;

    color:var(--k-gray-900);

}

/* ===============================
   Description
================================== */

.k-card-description{

    margin-top:.35rem;

    font-size:.9rem;

    color:var(--k-gray-500);

}

/* ===============================
   Actions
================================== */

.k-card-actions{

    display:flex;

    align-items:center;

    gap:.5rem;

}

/* ===============================
   Body
================================== */

.k-card-body{

    padding:var(--k-space-6);

}

/* ===============================
   Footer
================================== */

.k-card-footer{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:.75rem;

    padding:var(--k-space-5) var(--k-space-6);

    background:var(--k-gray-50);

    border-top:1px solid var(--k-gray-200);

}

.k-card-borderless{

    border:none;

}

.k-card-elevated{

    box-shadow:var(--k-shadow-lg);

}

.k-card-compact .k-card-header{

    padding:1rem 1.25rem;

}

.k-card-compact .k-card-body{

    padding:1.25rem;

}

.k-card-compact .k-card-footer{

    padding:1rem 1.25rem;

}

.k-card-hover{

    transition:
        box-shadow .2s,
        transform .2s;

}

.k-card-hover:hover{

    transform:translateY(-2px);

    box-shadow:var(--k-shadow);

}

/* ==========================================
   Responsive
========================================== */

.k-table-responsive{
    width:100%;
    overflow-x:auto;
}

/* ==========================================
   Table
========================================== */

.k-table{
    width:100%;
    border-collapse:collapse;
    background:var(--k-white);
}

/* ==========================================
   Head
========================================== */

.k-table thead{
    background:var(--k-gray-50);
}

.k-table th{

    padding:1rem;

    text-align:left;

    font-size:.875rem;

    font-weight:600;

    color:var(--k-gray-700);

    border-bottom:1px solid var(--k-gray-200);

    white-space:nowrap;

}

/* ==========================================
   Body
========================================== */

.k-table td{

    padding:1rem;

    border-bottom:1px solid var(--k-gray-200);

    vertical-align:middle;

}

.k-table tbody tr{

    transition:background .2s;

}

.k-table tbody tr:hover{

    background:var(--k-gray-50);

}

.k-table tbody tr:last-child td{

    border-bottom:none;

}

.k-table-product{

    display:flex;

    align-items:center;

    gap:1rem;

}

.k-table-product img{

    width:56px;
    height:56px;

    border-radius:.5rem;

    object-fit:cover;

    border:1px solid var(--k-gray-200);

}

.k-table-product strong{

    display:block;

    margin-bottom:.25rem;

}

.k-table-product small{

    color:var(--k-gray-500);

}

.k-text-left{
    text-align:left !important;
}

.k-text-center{
    text-align:center !important;
}

.k-text-right{
    text-align:right !important;
}

.k-table-sm th,
.k-table-sm td{

    padding:.65rem .85rem;

}

.k-table-lg th,
.k-table-lg td{

    padding:1.35rem;

}

.k-table-actions{

    display:flex;

    justify-content:flex-end;

    gap:.5rem;

}

.k-table-empty{

    padding:3rem;

    text-align:center;

    color:var(--k-gray-500);

}

/* ==========================
   Modal
========================== */

.k-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:1000;

}

/* Visible */

.k-modal.show{

    display:flex;

}

/* ==========================
   Fondo
========================== */

.k-modal-backdrop{

    position:absolute;

    inset:0;

    background:rgba(17,24,39,.6);

    backdrop-filter:blur(3px);

}

/* ==========================
   Dialog
========================== */

.k-modal-dialog{

    position:relative;

    width:min(700px,calc(100% - 2rem));

    max-height:calc(100vh - 2rem);

    animation:kModal .2s ease;

}

/* ==========================
   Content
========================== */

.k-modal-content{

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:var(--k-radius-lg);

    box-shadow:var(--k-shadow-lg);

    overflow:hidden;

}

/* ==========================
   Header
========================== */

.k-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.25rem 1.5rem;

    border-bottom:1px solid var(--k-gray-200);

}

.k-modal-title{

    margin:0;

    font-size:1.25rem;

    font-weight:600;

}

/* ==========================
   Body
========================== */

.k-modal-body{

    padding:1.5rem;

    overflow:auto;

}

/* ==========================
   Footer
========================== */

.k-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:.75rem;

    padding:1rem 1.5rem;

    border-top:1px solid var(--k-gray-200);

}

/* ==========================
   Close
========================== */

.k-modal-close{

    display:flex;

    justify-content:center;

    align-items:center;

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:var(--k-gray-500);

    font-size:1.4rem;

    cursor:pointer;

    transition:.2s;

}

.k-modal-close:hover{

    background:var(--k-gray-100);

    color:var(--k-gray-900);

}

/* ==========================
   Animación
========================== */

@keyframes kModal{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.k-modal-sm .k-modal-dialog{

    width:420px;

}

.k-modal-lg .k-modal-dialog{

    width:900px;

}

.k-modal-xl .k-modal-dialog{

    width:1200px;

}

.k-modal-full .k-modal-dialog{

    width:calc(100% - 2rem);

    height:calc(100vh - 2rem);

}

.k-modal-full .k-modal-content{

    height:100%;

}

.k-modal::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(17,24,39,.6);
    backdrop-filter:blur(3px);
}

/* ==========================================
   Button
========================================== */

.k-btn{

    --k-btn-bg: transparent;
    --k-btn-color: var(--k-gray-700);
    --k-btn-border: var(--k-gray-300);

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    min-height:42px;
    padding:.625rem 1rem;

    border:1px solid var(--k-btn-border);
    border-radius:var(--k-radius);

    background:var(--k-btn-bg);
    color:var(--k-btn-color);

    font:inherit;
    font-weight:500;
    line-height:1;

    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    user-select:none;

    transition:
        background-color .2s,
        border-color .2s,
        color .2s,
        box-shadow .2s,
        transform .15s;
}

.k-btn:hover{

    filter:brightness(.96);

}

.k-btn:active{

    transform:scale(.98);

}

.k-btn:focus-visible{

    outline:none;

    box-shadow:0 0 0 .25rem rgba(37,99,235,.20);

}

.k-btn:disabled,
.k-btn.disabled{

    opacity:.55;
    pointer-events:none;
    cursor:not-allowed;

}

.k-btn-primary{

    --k-btn-bg: var(--k-primary);
    --k-btn-border: var(--k-primary);
    --k-btn-color: #fff;

}

.k-btn-primary:hover{

    --k-btn-bg: var(--k-primary-hover);
    --k-btn-border: var(--k-primary-hover);

}

.k-btn-secondary{

    --k-btn-bg: var(--k-gray-100);
    --k-btn-border: var(--k-gray-200);
    --k-btn-color: var(--k-gray-700);

}

.k-btn-success{

    --k-btn-bg: var(--k-success);
    --k-btn-border: var(--k-success);
    --k-btn-color:#fff;

}

.k-btn-danger{

    --k-btn-bg: var(--k-danger);
    --k-btn-border: var(--k-danger);
    --k-btn-color:#fff;

}

.k-btn-warning{

    --k-btn-bg: var(--k-warning);
    --k-btn-border: var(--k-warning);
    --k-btn-color:#111827;

}

.k-btn-ghost{

    --k-btn-bg: transparent;
    --k-btn-border: transparent;
    --k-btn-color: var(--k-gray-600);

}

.k-btn-ghost:hover{

    background:var(--k-gray-100);

}

.k-btn-outline{

    background:#fff;

}

.k-btn-sm{

    min-height:34px;
    padding:.45rem .8rem;
    font-size:.875rem;

}

.k-btn-lg{

    min-height:50px;
    padding:.85rem 1.5rem;
    font-size:1.05rem;

}

.k-btn-block{

    width:100%;

}

.k-btn-group{

    display:inline-flex;

    gap:.5rem;

}

.k-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

}

.k-btn-loading{

    pointer-events:none;

}

.k-btn-loading::before{

    content:"";

    width:16px;
    height:16px;

    border:2px solid rgba(255,255,255,.4);

    border-top-color:#fff;

    border-radius:50%;

    animation:k-spin .8s linear infinite;

}

@keyframes k-spin{

    to{

        transform:rotate(360deg);

    }

}

/* =====================================================
   NAV
===================================================== */


/* =========================================
   Navegación
========================================= */

.k-nav{
    display:flex;
    flex-direction:column;
    gap:.5rem;
}

.k-nav-item{

    display:flex;
    align-items:center;

    width:100%;

    padding:.85rem 1rem;

    background:#fff;

    border:none;
    border-radius:.6rem;

    color:#4b5563;

    font-size:.95rem;
    font-weight:500;

    text-align:left;
    text-decoration:none;

    cursor:pointer;

    transition:.25s;
}

.k-nav-item:hover{

    background:#f3f4f6;
    color:#111827;

}

.k-nav-item.active{

    background:#2563eb;
    color:#fff;

}



.k-nav-badge{

    margin-left:auto;

    min-width:22px;

    height:22px;

    padding:0 .45rem;

    border-radius:999px;

    background:var(--k-primary);

    color:#fff;

    font-size:.75rem;

    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;

}

.k-nav-item.active .k-nav-badge{

    background:#fff;

    color:var(--k-primary);

}

.k-nav-group{

    margin-bottom:1.5rem;

}

.k-nav-title{

    margin-bottom:.5rem;

    padding:0 .75rem;

    font-size:.75rem;

    font-weight:700;

    color:var(--k-gray-500);

    text-transform:uppercase;

    letter-spacing:.05em;

}

.k-nav-sidebar{

    padding:.5rem;

    background:#fff;

    border:1px solid var(--k-gray-200);

    border-radius:var(--k-radius-lg);

}

@media (max-width:768px){

    .k-nav{

        gap:.25rem;

    }

    .k-nav-item{

        min-height:42px;

        padding:.65rem .85rem;

    }

}

.k-form{

    display:flex;
    flex-direction:column;
    gap:1.5rem;

}

.k-form-group{

    display:flex;
    flex-direction:column;
    gap:.5rem;

}

.k-label{

    font-size:.9rem;
    font-weight:600;

    color:var(--k-gray-800);

}

.k-input{

    width:100%;

    height:44px;

    padding:0 .875rem;

    border:1px solid var(--k-gray-300);

    border-radius:var(--k-radius);

    background:#fff;

    color:var(--k-gray-900);

    transition:
        border-color .2s,
        box-shadow .2s;

}

.k-input::placeholder{

    color:var(--k-gray-400);

}

.k-input:hover{

    border-color:var(--k-gray-400);

}

.k-input:focus{

    outline:none;

    border-color:var(--k-primary);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

.k-textarea{

    width:100%;

    min-height:120px;

    padding:.875rem;

    resize:vertical;

    border:1px solid var(--k-gray-300);

    border-radius:var(--k-radius);

    font:inherit;

}

.k-select{

    width:100%;

    height:44px;

    padding:0 .875rem;

    border:1px solid var(--k-gray-300);

    border-radius:var(--k-radius);

    background:#fff;

    font:inherit;

}

.k-help{

    font-size:.85rem;

    color:var(--k-gray-500);

}

.k-error{

    font-size:.85rem;

    color:var(--k-danger);

}

.k-form-actions{

    display:flex;

    justify-content:flex-end;

    gap:.75rem;

    margin-top:.5rem;

}

.k-input-sm,
.k-select-sm{

    height:36px;

    font-size:.875rem;

}

.k-input-lg,
.k-select-lg{

    height:50px;

    font-size:1.05rem;

}

.k-control{
    width:100%;
    border:1px solid var(--k-gray-300);
    border-radius:var(--k-radius);
    font:inherit;
    transition:border-color .2s, box-shadow .2s;
}

.k-input,
.k-select{
    height:44px;
    padding:0 .875rem;
}

.k-textarea{
    min-height:120px;
    padding:.875rem;
    resize:vertical;
}

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

.k-order{

    background:var(--k-white);

    border:1px solid var(--k-gray-200);

    border-radius:var(--k-radius-lg);

    overflow:hidden;

    box-shadow:var(--k-shadow-sm);
    margin-bottom:var(--k-space-4);

}

.k-order-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    padding:1.25rem 1.5rem;

    background:var(--k-gray-50);

    border-bottom:1px solid var(--k-gray-200);

}

.k-order-reference{

    font-size:1rem;

    font-weight:600;

    color:var(--k-gray-900);

}

.k-order-date{

    margin-top:.25rem;

    font-size:.875rem;

    color:var(--k-gray-500);

}

.k-order-price{

    text-align:right;

}

.k-order-price small{

    display:block;

    margin-bottom:.25rem;

    color:var(--k-gray-500);

}

.k-order-price strong{

    font-size:1.25rem;

    color:var(--k-primary);

}

/* ==========================================
   ORDER ADDRESS
========================================== */

.k-order-address{
    font-size: 13px;
}

.k-order-body{

    padding:1.5rem;

}

.k-order-footer{

    display:flex;

    justify-content:flex-end;

    gap:.75rem;

    padding:1rem 1.5rem;

    border-top:1px solid var(--k-gray-200);

    background:var(--k-gray-50);

}

.k-product-image{

    width:100px;

    height:auto;

    border-radius:var(--k-radius);

    object-fit:cover;

    border:1px solid var(--k-gray-200);

}

@media (max-width:768px){

    .k-order-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .k-order-price{

        text-align:left;

    }

    .k-order-footer{

        flex-direction:column;

    }

    .k-order-footer .k-btn{

        width:100%;

    }

}

/* ==========================================
   Checkbox
========================================== */

.k-checkbox {

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    cursor:pointer;

    user-select:none;

    color:var(--k-gray-700);


}

/* Oculta el checkbox nativo */

.k-checkbox input{

    

}

/* Caja */

.k-checkbox-box{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    width:20px;

    height:20px;

    border:2px solid var(--k-gray-300);

    border-radius:.375rem;

    background:#fff;

    transition:
        background-color .2s,
        border-color .2s,
        box-shadow .2s;

}

/* Icono */

.k-checkbox-box::after{

    content:"";

    width:10px;

    height:6px;

    border-left:2px solid #fff;

    border-bottom:2px solid #fff;

    transform:
        rotate(-45deg)
        scale(0);

    transition:transform .15s;

}

/* Label */

.k-checkbox-label{

    line-height:1.4;

}

.k-checkbox:hover .k-checkbox-box{

    border-color:var(--k-primary);

}

.k-checkbox input:checked + .k-checkbox-box{

    background:var(--k-primary);

    border-color:var(--k-primary);

}

.k-checkbox input:checked + .k-checkbox-box::after{

    transform:
        rotate(-45deg)
        scale(1);

}

.k-checkbox input:focus-visible + .k-checkbox-box{

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

.k-checkbox input:disabled + .k-checkbox-box{

    background:var(--k-gray-100);

    border-color:var(--k-gray-300);

}

.k-checkbox input:disabled ~ .k-checkbox-label{

    color:var(--k-gray-400);

}

.k-checkbox input:disabled{

    cursor:not-allowed;

}

.k-checkbox:has(input:disabled){

    cursor:not-allowed;

    opacity:.7;

}

.k-checkbox-sm .k-checkbox-box{

    width:16px;

    height:16px;

}

.k-checkbox-sm .k-checkbox-box::after{

    width:8px;

    height:4px;

}

.k-checkbox-lg .k-checkbox-box{

    width:24px;

    height:24px;

}

.k-checkbox-lg .k-checkbox-box::after{

    width:12px;

    height:8px;

}

/* ==========================================
   Cart
========================================== */

.k-cart{

    display:flex;

    flex-direction:column;

    background:var(--k-white);

    border:1px solid var(--k-gray-200);

    border-radius:var(--k-radius-lg);

    overflow:hidden;

    box-shadow:var(--k-shadow-sm);

}

.k-cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    padding:1.5rem;

    border-bottom:1px solid var(--k-gray-200);

}

.k-cart-title{

    display:flex;

    align-items:center;

    gap:.75rem;

    margin:0;

    font-size:1.5rem;

    font-weight:600;

}

.k-cart-actions{

    display:flex;

    gap:.75rem;

    flex-wrap:wrap;

}

.k-cart-head{

    display:grid;

    grid-template-columns:1fr 160px 140px;

    gap:1rem;

    padding:1rem 1.5rem;

    background:var(--k-gray-50);

    border-bottom:1px solid var(--k-gray-200);

    font-size:.875rem;

    font-weight:600;

    color:var(--k-gray-600);

}

.k-cart-body{

    display:flex;

    flex-direction:column;

}

.k-cart-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    padding:1.5rem;

    border-top:1px solid var(--k-gray-200);

    background:var(--k-gray-50);

}

.k-cart-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:1rem;

    padding:5rem 2rem;

    text-align:center;

}

.k-cart-empty i{

    font-size:4rem;

    color:var(--k-gray-300);

}

.k-cart-empty h3{

    margin:0;

}

.k-cart-empty p{

    margin:0;

    color:var(--k-gray-500);

}

@media (max-width:768px){

    .k-cart-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .k-cart-head{

        display:none;

    }

    .k-cart-footer{

        flex-direction:column;

        align-items:stretch;

    }

}

/* ==========================================
   Cart Item
========================================== */

.k-cart-item{

    display:grid;

    grid-template-columns:minmax(0,1fr) 160px 140px;

    align-items:center;

    gap:1.5rem;

    padding:1.5rem;

    border-bottom:1px solid var(--k-gray-200);

}

.k-cart-item:last-child{

    border-bottom:none;

}

.k-cart-product{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    min-width:0;

}

.k-cart-info{

    flex:1;

    min-width:0;

}

.k-cart-product-title{

    margin:0;

    font-size:1rem;

    font-weight:600;

}

.k-cart-product-title a{

    color:inherit;

    text-decoration:none;

}

.k-cart-product-title a:hover{

    color:var(--k-primary);

}

.k-cart-product-reference{

    margin-top:.35rem;

    font-size:.8rem;

    color:var(--k-gray-500);

    text-transform:uppercase;

}

.k-cart-product-attributes{

    margin-top:.35rem;

    color:var(--k-gray-600);

    font-size:.9rem;

}

.k-cart-product-actions{

    display:flex;

    gap:.5rem;

    margin-top:.75rem;

}

.k-cart-quantity{

    display:flex;

    justify-content:center;

}

.k-cart-price{

    text-align:right;

    font-size:1.1rem;

    font-weight:600;

    white-space:nowrap;

}

@media (max-width:768px){

    .k-cart-item{

        grid-template-columns:1fr;

    }

    .k-cart-product{

        width:100%;

    }

    .k-cart-quantity{

        justify-content:flex-start;

    }

    .k-cart-price{

        text-align:left;

    }

}

/* ==========================================
   Summary
========================================== */

.k-summary{

    display:flex;

    flex-direction:column;

    border:1px solid var(--k-gray-200);

    border-radius:var(--k-radius-lg);

    background:var(--k-white);

    overflow:hidden;

    box-shadow:var(--k-shadow-sm);

}

.k-summary-header{

    padding:1.25rem 1.5rem;

    border-bottom:1px solid var(--k-gray-200);

}

.k-summary-title{

    margin:0;

    font-size:1.25rem;

    font-weight:600;

}

.k-summary-body{

    display:flex;

    flex-direction:column;

    padding:1.5rem;

    gap:1rem;

}

.k-summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

}

.k-summary-row span{

    color:var(--k-gray-600);

}

.k-summary-row strong{

    font-weight:500;

}

.k-summary-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:.5rem;

    padding-top:1rem;

    border-top:1px solid var(--k-gray-200);

}

.k-summary-total span{

    font-size:1.1rem;

    font-weight:600;

}

.k-summary-total strong{

    font-size:1.5rem;

    font-weight:700;

    color:var(--k-primary);

}

.k-summary-footer{

    padding:1.5rem;

    border-top:1px solid var(--k-gray-200);

    background:var(--k-gray-50);

}

.k-layout-sidebar{

    display:grid;

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

    gap:2rem;

}

@media (max-width:1024px){

    .k-layout-sidebar{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .k-layout-sidebar{

        display:flex;

        flex-direction:column;

    }

}

.k-cart-footer{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

    padding:1.5rem;

    border-top:1px solid var(--k-gray-200);

    background:var(--k-gray-50);

}

.k-cart-total{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:1rem;

    font-size:1.1rem;

}

.k-cart-total strong{

    font-size:1.6rem;

    font-weight:700;

    color:var(--k-primary);

}

.k-cart-actions{

    display:flex;

    justify-content:space-between;

    gap:1rem;

    flex-wrap:wrap;

}

@media (max-width:768px){

    .k-cart-actions{

        flex-direction:column;

    }

    .k-cart-actions .k-btn{

        width:100%;

    }

    .k-cart-total{

        justify-content:space-between;

    }

}

/* ==========================================
   PRICE
========================================== */

.k-price{

    display:inline-flex;

    align-items:center;

    flex-wrap:wrap;

    gap:.5rem;

    line-height:1.2;

}

.k-price-current{

    font-size:1.25rem;

    font-weight:700;

    color:var(--k-gray-900);

}

.k-price-old{

    color:var(--k-gray-500);

    text-decoration:line-through;

    font-size:.95rem;

}

.k-price-discount{

    display:inline-flex;

    align-items:center;

    padding:.2rem .45rem;

    border-radius:999px;

    background:var(--k-danger);

    color:#fff;

    font-size:.75rem;

    font-weight:600;

}

.k-price-prefix{

    color:var(--k-gray-500);

    font-size:.875rem;

}

.k-price-sm .k-price-current{

    font-size:1rem;

}

.k-price-lg .k-price-current{

    font-size:1.75rem;

}

.k-price-center{

    justify-content:center;

}

.k-price-right{

    justify-content:flex-end;

}

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

.k-quantity{

    display:inline-flex;

    align-items:center;

    border:1px solid var(--k-gray-300);

    border-radius:var(--k-radius);

    overflow:hidden;

    background:var(--k-white);

}

.k-quantity-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:42px;

    height:42px;

    border:none;

    background:var(--k-gray-50);

    color:var(--k-gray-700);

    font-size:1.25rem;

    cursor:pointer;

    transition:
        background-color .2s,
        color .2s;

}

.k-quantity-button:hover{

    background:var(--k-primary);

    color:#fff;

}

.k-quantity-button:active{

    background:var(--k-primary-hover);

}

.k-quantity-input{

    width:60px;

    height:42px;

    border:none;

    border-left:1px solid var(--k-gray-300);

    border-right:1px solid var(--k-gray-300);

    text-align:center;

    font:inherit;

    font-weight:600;

    background:#fff;

    appearance:textfield;

}

.k-quantity-input:focus{

    outline:none;

}

.k-quantity-input::-webkit-outer-spin-button,
.k-quantity-input::-webkit-inner-spin-button{

    -webkit-appearance:none;

    margin:0;

}

.k-quantity:focus-within{

    border-color:var(--k-primary);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

.k-quantity-sm .k-quantity-button{

    width:34px;

    height:34px;

}

.k-quantity-sm .k-quantity-input{

    width:50px;

    height:34px;

}

.k-quantity-lg .k-quantity-button{

    width:50px;

    height:50px;

}

.k-quantity-lg .k-quantity-input{

    width:70px;

    height:50px;

}

.k-quantity:has(input:disabled){

    opacity:.6;

}

.k-quantity input:disabled{

    background:var(--k-gray-100);

}

.k-quantity input:disabled ~ .k-quantity-button{

    pointer-events:none;

}

/* ==========================================
   PRODUCT
========================================== */

.k-product{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:var(--k-white);

    border:1px solid var(--k-gray-200);

    border-radius:var(--k-radius-lg);

    transition:
        border-color .2s,
        box-shadow .2s,
        transform .2s;

}

.k-product:hover{

    border-color:var(--k-primary);

    box-shadow:var(--k-shadow-md);

    transform:translateY(-2px);

}

.k-product-image{

    display:block;

    aspect-ratio:1;

    overflow:hidden;

    background:var(--k-gray-100);

}

.k-product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .3s;

}

.k-product:hover .k-product-image img{

    transform:scale(1.05);

}

.k-product-body{

    display:flex;

    flex-direction:column;

    gap:.75rem;

    padding:1.25rem;

    flex:1;

}

.k-product-reference{

    font-size:.75rem;

    color:var(--k-gray-500);

    text-transform:uppercase;

    letter-spacing:.05em;

}

.k-product-title{

    margin:0;

    font-size:1.1rem;

    font-weight:600;

}

.k-product-title a{

    color:inherit;

    text-decoration:none;

}

.k-product-title a:hover{

    color:var(--k-primary);

}

.k-product-description{

    color:var(--k-gray-600);

    font-size:.9rem;

    line-height:1.5;

}

.k-product-footer{

    padding:1.25rem;

    border-top:1px solid var(--k-gray-200);

}

/* ==========================================
   ADDRESS
========================================== */
.k-address-container{

    display:flex;

    justify-content: start;
    gap: 15px;
    align-items: center;
    padding: 15px;

}


.k-address{

    display:flex;

    flex-direction:column;

    background:var(--k-white);

    border:1px solid var(--k-gray-200);

    border-radius:var(--k-radius-lg);

    overflow:hidden;

    padding: 15px;
    min-height: 150px;
    text-align: left;

}

.k-address-header{

    padding:1rem 1.25rem;

    background:var(--k-gray-50);

    border-bottom:1px solid var(--k-gray-200);

}

.k-address-body{

    display:flex;

    flex-direction:column;

    gap:.35rem;

    padding:1.25rem;

}
.k-address-name{

    font-weight:600;

    color:var(--k-gray-900);

}

.k-address-company{

    color:var(--k-gray-700);

}

.k-address-lines{

    line-height:1.6;

    color:var(--k-gray-600);

}

.k-address-phone,
.k-address-email{

    color:var(--k-gray-500);

}

.k-address-footer{

    display:flex;

    justify-content:flex-end;

    gap:.75rem;

    padding:1rem 1.25rem;

    border-top:1px solid var(--k-gray-200);

}

.k-address{

    transition:
        border-color .2s,
        box-shadow .2s;

    cursor:pointer;

}

.k-address:hover{

    border-color:var(--k-primary);

}

.k-address.is-selected{

    border-color:var(--k-primary);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

/* ==========================================
   PAYMENT
========================================== */

.k-payment{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1rem 1.25rem;

    border:1px solid var(--k-gray-300);

    border-radius:var(--k-radius-lg);

    background:var(--k-white);

    cursor:pointer;

    transition:
        border-color .2s,
        box-shadow .2s,
        background-color .2s;

}

.k-payment input{

    display:none;

}

.k-payment-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:48px;

    height:48px;

    flex-shrink:0;

    font-size:1.5rem;

}

.k-payment-icon img{

    max-width:100%;

    max-height:100%;

}

.k-payment-body{

    display:flex;

    flex-direction:column;

    gap:.25rem;

    flex:1;

}

.k-payment-title{

    font-weight:600;

    color:var(--k-gray-900);

}

.k-payment-description{

    font-size:.875rem;

    color:var(--k-gray-500);

}

.k-payment:hover{

    border-color:var(--k-primary);

}

.k-payment:has(input:checked){

    border-color:var(--k-primary);

    background:var(--k-primary-50);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

.k-payment:has(input:focus-visible){

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

.k-payment:has(input:disabled){

    opacity:.6;

    cursor:not-allowed;

}

.k-payment-content{

    display:none;

    margin-top:1rem;

    padding-top:1rem;

    border-top:1px solid var(--k-gray-200);

}

.k-payment:has(input:checked) .k-payment-content{

    display:block;

}

/* ==========================================
   SHIPPING
========================================== */

.k-shipping{

    display:flex;

    gap:1rem;

    align-items:flex-start;

    padding:1.25rem;

    border:1px solid var(--k-gray-300);

    border-radius:var(--k-radius-lg);

    background:var(--k-white);

    cursor:pointer;

    transition:
        border-color .2s,
        background-color .2s,
        box-shadow .2s;

}

.k-shipping input{

    display:none;

}

.k-shipping-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:48px;

    height:48px;

    flex-shrink:0;

    font-size:1.5rem;

}

.k-shipping-icon img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.k-shipping-body{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:.5rem;

}

.k-shipping-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

}

.k-shipping-title{

    font-weight:600;

    color:var(--k-gray-900);

}

.k-shipping-description{

    color:var(--k-gray-600);

}

.k-shipping-time{

    font-size:.875rem;

    color:var(--k-gray-500);

}

.k-shipping:hover{

    border-color:var(--k-primary);

}

.k-shipping:has(input:checked){

    border-color:var(--k-primary);

    background:var(--k-primary-50);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

.k-shipping:has(input:disabled){

    opacity:.6;

    cursor:not-allowed;

}

.k-checkout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 380px;

    gap:2rem;

    align-items:start;
    margin-top: 2rem;
    margin-bottom: 2rem;

}

.k-checkout-content{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.k-checkout-sidebar{

    position:sticky;

    top:2rem;

}

@media (max-width:992px){

    .k-checkout{

        grid-template-columns:1fr;

    }

    .k-checkout-sidebar{

        position:static;

        order:-1; /* opcional si quieres mostrar primero el resumen */

    }

}

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

.k-summary-products{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.k-summary-product{

    display:grid;

    grid-template-columns:

        64px

        minmax(0,1fr)

        auto;

    gap:1rem;

    align-items:center;

}

.k-summary-product .k-product-image{

    width:64px;

    height:64px;

    border-radius:var(--k-radius);

    object-fit:cover;

}

.k-summary-product-body{

    display:flex;

    flex-direction:column;

    gap:.35rem;

    min-width:0;

}

.k-summary-product-title{

    font-weight:600;

    color:var(--k-gray-900);

}

.k-summary-product-options{

    font-size:.875rem;

    color:var(--k-gray-600);

}

.k-summary-product-quantity{

    font-size:.875rem;

    color:var(--k-gray-500);

}

.k-summary-product>.k-price{

    justify-self:end;

}

.k-summary-product+.k-summary-product{

    padding-top:1rem;

    border-top:1px solid var(--k-gray-200);

}

@media (max-width:576px){

    .k-summary-product{

        grid-template-columns:

            56px

            1fr;

    }

    .k-summary-product>.k-price{

        grid-column:2;

        justify-self:start;

    }

}

.k-section{

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.k-section-header{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    margin-bottom:1.5rem;

}

.k-section-number{

    display:flex;

    justify-content:center;

    align-items:center;

    width:2.5rem;

    height:2.5rem;

    border-radius:50%;

    background:var(--k-primary);

    color:#fff;

    font-weight:700;

    font-size:1rem;

    flex-shrink:0;

}

.k-section-heading{

    display:flex;

    flex-direction:column;

    gap:.35rem;

}

.k-section-title{

    margin:0;

    font-size:1.5rem;

    font-weight:600;

    color:var(--k-gray-900);

}

input {
    padding: 10px 40px !important;
}