/* forms */
.frm {
    max-width:640px;
}

.fld {
    margin-bottom:var(--space-xs);
}

.fld-lab {
    display:block;
    margin-bottom:.4rem;
    font-size:.9rem;
    color:var(--color-niebla);
}

.fld-inp {
    width:100%;
    background:var(--color-fondo);
    color:var(--color-niebla);
    border:1px solid var(--color-borde);
    border-radius:0;
    padding:.7em .8em;
    font-family:var(--fuente-txt);
    font-size:1rem;
}

.fld-inp:focus {
    outline:2px solid var(--color-indigo);
    outline-offset:1px;
}

textarea.fld-inp {
    resize:vertical;
}

.err {
    margin:.3rem 0 0;
    min-height:1em;
    font-size:.82rem;
    color:rgb(216,150,150);
}

.chk {
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    margin-bottom:var(--space-xs);
    font-size:.9rem;
    line-height:1.5;
    color:var(--color-bruma);
}

.chk input {
    flex:0 0 auto;
    margin-top:.25rem;
}

.chk a {
    color:var(--color-indigo-link);
}

.form-msg {
    min-height:1.2em;
    margin:var(--space-xs) 0;
    font-size:.95rem;
    color:var(--color-indigo-link);
}

/* cart page */
.cst-empty,
.co-empty,
.conf-none {
    color:var(--color-bruma);
    padding:var(--space-lg) 0;
}

.cst-grid {
    display:grid;
    grid-template-columns:1fr 340px;
    gap:var(--space-xl);
    align-items:start;
}

.cst-grid[hidden],
.co-grid[hidden] {
    display:none;
}

.cst-list {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:var(--space-md);
}

.cst-sum,
.co-sum {
    position:sticky;
    top:132px;
    border:1px solid var(--color-borde);
    background:var(--color-tela);
    box-shadow:8px 8px 0 var(--color-sombra);
    padding:var(--space-lg);
}

/* cart line items (built by JS, styled via data-attributes) */
.cst-list li,
.tray-list li {
    display:grid;
    align-items:center;
    gap:var(--space-sm);
    border:1px solid var(--color-borde);
    background:var(--color-tela);
    padding:var(--space-sm);
}

.cst-list li {
    grid-template-columns:72px 1fr auto;
    gap:var(--space-md);
}

.tray-list li {
    grid-template-columns:52px 1fr auto;
}

[data-ci-thumb] {
    display:block;
    overflow:hidden;
    border:1px solid var(--color-borde);
}

[data-ci-thumb] img,
[data-ci-thumb] .swatch {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.cst-list [data-ci-thumb] {
    width:72px;
    height:54px;
}

.tray-list [data-ci-thumb] {
    width:52px;
    height:40px;
}

[data-ci-body] {
    min-width:0;
}

[data-ci-name] {
    display:block;
    font-size:.95rem;
}

[data-ci-name] a {
    color:var(--color-niebla);
    text-decoration:none;
}

[data-ci-size] {
    display:block;
    margin-top:.1rem;
    font-size:.8rem;
    color:var(--color-bruma);
}

[data-ci-price] {
    display:block;
    margin-top:.2rem;
    font-family:var(--fuente-tit);
}

[data-ci-ctrl] {
    display:flex;
    align-items:center;
    gap:.3rem;
}

[data-ci-ctrl] button {
    width:40px;
    height:40px;
    min-height:40px;
    border:1px solid var(--color-borde);
    border-radius:0;
    background:var(--color-fondo);
    color:var(--color-niebla);
    font-size:1rem;
    cursor:pointer;
}

[data-ci-qty] {
    min-width:1.6em;
    text-align:center;
}

[data-ci-remove] {
    background:transparent;
    border:0;
    color:var(--color-indigo-link);
    cursor:pointer;
    font-size:.82rem;
    padding:.2em;
}

/* order summary (cart + checkout + confirm) */
.sum-items {
    list-style:none;
    margin:0 0 var(--space-md);
    padding:0;
    display:grid;
    gap:.5rem;
}

.sum-items li {
    display:flex;
    justify-content:space-between;
    gap:var(--space-sm);
    font-size:.9rem;
    color:var(--color-bruma);
}

.sum-lines {
    margin:0;
    display:grid;
    grid-template-columns:1fr auto;
    gap:.4rem var(--space-md);
    border-top:1px solid var(--color-borde);
    padding-top:var(--space-md);
}

.sum-lines dt {
    color:var(--color-bruma);
}

.sum-lines dd {
    margin:0;
    text-align:right;
    color:var(--color-niebla);
}

.sum-total {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    border-top:1px solid var(--color-borde);
    margin-top:var(--space-md);
    padding-top:var(--space-md);
    font-family:var(--fuente-tit);
    font-size:1.3rem;
}

/* checkout */
.co-grid {
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:var(--space-xl);
    align-items:start;
}

.co-main {
    min-width:0;
}

.co-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-md);
}

.co-pay {
    border:1px solid var(--color-borde);
    background:var(--color-tela);
    padding:var(--space-md);
    margin:var(--space-md) 0;
}

.co-pay .sec-t {
    font-size:1.1rem;
    margin-bottom:var(--space-sm);
}

.pay-line {
    margin:0;
    color:var(--color-bruma);
}

/* confirmation */
.conf-card {
    max-width:660px;
    border:1px solid var(--color-borde);
    background:var(--color-tela);
    box-shadow:8px 8px 0 var(--color-sombra);
    padding:var(--space-lg);
}

.conf-num {
    margin:0 0 .3rem;
    font-family:var(--fuente-tit);
    font-size:1.3rem;
}

.conf-mail {
    margin:0 0 var(--space-md);
    color:var(--color-bruma);
}

.conf-next {
    border-top:1px solid var(--color-borde);
    margin-top:var(--space-md);
    padding-top:var(--space-md);
}

.conf-next .sec-t {
    font-size:1.1rem;
}

/* status */
.est-form {
    max-width:460px;
}

.est-result {
    margin-top:var(--space-lg);
    border:1px solid var(--color-borde);
    background:var(--color-tela);
    box-shadow:8px 8px 0 var(--color-sombra);
    padding:var(--space-lg);
}

/* slide-out tray */
.tray-ov {
    position:fixed;
    inset:0;
    z-index:145;
    background:rgba(12,16,20,.6);
}

.tray-ov[hidden] {
    display:none;
}

.tray {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(380px,92vw);
    z-index:150;
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
    padding:var(--space-lg);
    overflow:auto;

    background:var(--color-fondo);
    border-left:1px solid var(--color-borde);
    visibility:hidden;
    transform:translateX(100%);
    transition:transform .25s ease;
}

.tray.shown {
    visibility:visible;
    transform:translateX(0);
}

.tray-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.tray-t {
    font-family:var(--fuente-tit);
    text-transform:uppercase;
    letter-spacing:.06em;
}

.tray-x {
    border:1px solid var(--color-borde);
    border-radius:0;
    background:transparent;
    color:var(--color-niebla);
    padding:.4em .8em;
    min-height:40px;
    cursor:pointer;
}

.tray-empty {
    color:var(--color-bruma);
}

.tray-list {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:var(--space-sm);
    flex:1;
}

.tray-foot {
    border-top:1px solid var(--color-borde);
    padding-top:var(--space-md);
    display:grid;
    gap:var(--space-sm);
}

.tray-foot[hidden] {
    display:none;
}

.tray-total {
    display:flex;
    justify-content:space-between;
    margin:0;
    font-family:var(--fuente-tit);
    font-size:1.15rem;
}

.tray-note {
    margin:0;
    color:var(--color-bruma);
    font-size:.8rem;
}

@media (max-width:900px) {
    .cst-grid,
    .co-grid {
        grid-template-columns:1fr;
    }

    .cst-sum,
    .co-sum {
        position:static;
    }
}

@media (max-width:560px) {
    .co-row {
        grid-template-columns:1fr;
    }
}

@media (prefers-reduced-motion:reduce) {
    .tray {
        transition:none;
    }
}