.product-store { --yellow:var(--ctm-brand-yellow); --red:var(--ctm-brand-red); --ink:var(--ctm-brand-ink); width:min(1200px,calc(100% - 32px)); margin:36px auto 80px; color:var(--ink); font-family:var(--ctm-brand-font-body); box-sizing:border-box; }
.product-store *, .product-store *::before, .product-store *::after { box-sizing:border-box; min-width:0; }
.product-store__heading { display:flex; align-items:end; gap:20px; border-bottom:4px solid var(--ink); margin-bottom:30px; }
.product-store__heading p { background:var(--yellow); border:2px solid var(--ink); padding:6px 10px; font-weight:900; }
.product-store h1,.product-store h2 { font-family:"Bebas Neue",sans-serif; line-height:.95; }
.product-store__heading h1 { font-size:clamp(2.5rem,6vw,5rem); margin:0; flex:1; }
.product-store a,.product-store button { font-weight:900; text-decoration:none; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.product-card { border:4px solid var(--ink); background:var(--ctm-brand-surface); box-shadow:var(--ctm-brand-shadow); }
.product-card.is-sold-out { filter:grayscale(1); opacity:.7; }
.product-card__image { height:280px; display:grid; place-items:center; padding:20px; border-bottom:3px solid var(--ink); background:var(--ctm-brand-surface-muted); }
.product-card__image img { width:100%; height:100%; max-width:100%; object-fit:contain; }
.product-card__body { padding:22px; display:grid; gap:12px; }
.product-card__body h2 { font-size:2rem; margin:0; }.product-card__body p{margin:0}.product-card__body strong{font:2rem "Bebas Neue",sans-serif}
.product-state { justify-self:start; background:var(--yellow); border:2px solid var(--ink); padding:5px 9px; font-weight:900; }
.product-card__body a,.product-disabled,.product-payment button,.product-confirmation a { display:block; text-align:center; color:#fff; background:var(--red); border:3px solid var(--ink); padding:13px; box-shadow:3px 3px 0 var(--ink); }
.product-disabled { background:#555; }.product-empty{text-align:center;font-weight:700}
.product-checkout__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; align-items:start; }
.product-back { display:inline-block; color:var(--ink); border:2px solid var(--ink); padding:9px 13px; margin-bottom:24px; }
.product-summary,.product-payment,.product-confirmation section { border:4px solid var(--ink); background:var(--ctm-brand-surface); padding:clamp(20px,4vw,40px); box-shadow:var(--ctm-brand-shadow); }
.product-summary h1,.product-payment h2,.product-confirmation h1 { font-size:clamp(2.5rem,5vw,4.5rem); margin:18px 0 8px; overflow-wrap:anywhere; }
.product-summary strong{font:2.5rem "Bebas Neue",sans-serif}.product-payment{display:grid;gap:17px}.product-payment label{display:grid;gap:6px;font-weight:800}.product-payment input,.product-payment select{width:100%;border:2px solid var(--ink);padding:12px;font:inherit}.product-payment input:focus,.product-payment select:focus,.product-store a:focus-visible,.product-store button:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
.payment-box { display:grid; gap:6px; background:var(--yellow); border:3px dashed var(--ink); padding:18px; }.payment-box h3{margin:0}.payment-box strong{font-size:1.7rem}.payment-box img{width:min(220px,100%);justify-self:center}.receipt-field{border:3px dashed var(--ink);padding:14px}.validation-summary{color:#a00000;font-weight:700}.product-payment button{font:1.4rem "Bebas Neue",sans-serif;cursor:pointer}.product-payment button:disabled{opacity:.65;cursor:wait}
.product-confirmation { max-width:760px; }.product-confirmation h2{font-size:clamp(2rem,4vw,3.5rem)}.product-confirmation section>strong{display:inline-block;background:var(--yellow);border:2px solid var(--ink);padding:10px;font-size:1.2rem;overflow-wrap:anywhere}.product-confirmation dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px}.product-confirmation dt{font-weight:900}.product-confirmation dd{margin:0}.product-confirmation a{margin-top:12px}.product-confirmation a.secondary{background:var(--ctm-brand-surface-strong);color:var(--ink)}
@media(max-width:800px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-checkout__grid{grid-template-columns:minmax(0,1fr)}.product-store__heading{align-items:start;flex-wrap:wrap}.product-store__heading h1{flex-basis:100%}.product-card__image{height:230px}}
@media(max-width:520px){.product-store{width:calc(100% - 24px);margin-top:20px}.product-grid{grid-template-columns:minmax(0,1fr)}.product-store__heading a{margin-bottom:10px}.product-card__image{height:250px}.product-confirmation dl{grid-template-columns:minmax(0,1fr)} }
@media(prefers-reduced-motion:no-preference) and (hover:hover){.product-card{transition:transform .2s ease,box-shadow .2s ease}.product-card:hover,.product-card:focus-within{transform:translateY(-5px);box-shadow:9px 9px 0 var(--ink)}}
@media(prefers-reduced-motion:reduce){.product-store *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Compra directa: adapta el mismo sistema visual y estructural del checkout de MacBook. */
.product-direct-checkout,
.product-direct-checkout .product-checkout-surface,
.product-direct-checkout .checkout-shell,
.product-direct-checkout .checkout-layout,
.product-direct-checkout .checkout-layout form,
.product-direct-checkout .checkout-step,
.product-direct-checkout .direct-product-card,
.product-direct-checkout .direct-product-copy,
.product-direct-checkout .direct-variant-options,
.product-direct-checkout .variant-grid,
.product-direct-checkout .variant-choice,
.product-direct-checkout .variant-choice > span,
.product-direct-checkout .buyer-grid,
.product-direct-checkout .payment-content,
.product-direct-checkout .plin-card,
.product-direct-checkout .receipt-field,
.product-direct-checkout .receipt-dropzone,
.product-direct-checkout .receipt-selection,
.product-direct-checkout .order-summary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.product-direct-checkout {
    min-height: 100%;
    background: var(--mac-paper);
}

.product-direct-checkout .product-checkout-surface {
    height: auto;
    min-height: calc(100dvh - 90px);
    overflow: visible;
}

.product-direct-checkout .checkout-close {
    text-decoration: none;
}

.product-direct-checkout .direct-product-card {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
    align-items: stretch;
    margin-bottom: 22px;
    border: var(--mac-border);
    background: var(--mac-warm);
    box-shadow: var(--mac-shadow-small);
}

.product-direct-checkout .direct-product-image {
    min-width: 0;
    height: 280px;
    display: grid;
    place-items: center;
    padding: 18px;
    border-right: var(--mac-border);
    background: var(--mac-white);
    color: var(--mac-muted);
    font-weight: 800;
    text-align: center;
    overflow: hidden;
    appearance: none;
    cursor: zoom-in;
}

.product-direct-checkout .direct-product-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: 100%;
    object-fit: contain;
}

.product-direct-checkout .direct-product-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 24px;
}

.product-direct-checkout .direct-product-copy h2 {
    margin: 0;
    font-size: clamp(30px, 3vw, 46px);
    overflow-wrap: anywhere;
}

.product-direct-checkout .direct-product-copy p {
    margin: 0;
    color: #333333;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}

.product-direct-checkout .direct-public-price {
    align-self: flex-start;
    display: grid;
    gap: 3px;
    margin-top: 5px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 850;
}

.product-direct-checkout .direct-public-price strong {
    color: var(--mac-red);
    font: 700 30px/1 var(--mac-display);
}

.product-direct-checkout .checkout-header { justify-content: space-between; }
.product-direct-checkout .checkout-header .checkout-close { order: 0; }
.product-direct-checkout .checkout-header .checkout-timer { order: 1; }
.product-direct-checkout [data-step="1"] h2 { margin-bottom: 12px; }
.product-direct-checkout .buyer-grid { max-width: 620px; gap: 12px; margin: 12px 0 8px; }
.product-direct-checkout .buyer-grid label { gap: 5px; }
.mac-sales-body .product-direct-checkout .buyer-grid input { height: 46px; min-height: 46px; padding: 9px 12px; border-radius: var(--checkout-radius-sm); }
.product-direct-checkout .product-coupon-entry [data-product-coupon-form] { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; gap: 9px; }
.product-direct-checkout .product-coupon-entry input,
.product-direct-checkout .product-coupon-entry button { min-height: 46px; margin: 0; }
.product-direct-checkout .product-coupon-entry button { display: inline-flex; align-items: center; justify-content: center; }
.product-direct-checkout .checkout-side-column { align-self: start; }
.product-direct-checkout .checkout-coupon-panel { width: 100%; }
.product-direct-checkout .summary-update:empty { display: none; }
.product-direct-checkout .product-sold-out { margin: 8px 0 0; color: var(--mac-red); font: 700 28px/1 var(--mac-display); }
.product-lightbox .gallery-panel { height: 100%; }
.product-lightbox .gallery-panel header { min-height: 70px; }

.product-direct-checkout .direct-variant-options {
    margin-top: 0;
    padding: 18px;
    border: var(--mac-border);
    background: var(--mac-soft);
}

.product-direct-checkout .direct-variant-options legend {
    padding: 0 7px;
    font: 700 20px/1 var(--mac-display);
}

.product-direct-checkout .variant-choice > span {
    min-height: 104px;
    padding: 10px 7px;
}

.product-direct-checkout .variant-choice small {
    color: #333333;
    font-size: 10px;
    font-weight: 750;
}

.product-direct-checkout .product-mobile-summary {
    display: none;
}

.product-direct-checkout .text-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--mac-ink);
    font-size: 12px;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.product-direct-checkout .text-button:focus-visible,
.product-direct-checkout .checkout-close:focus-visible {
    outline: 3px solid var(--mac-yellow);
    outline-offset: 3px;
}

.product-direct-checkout .checkout-error:empty,
.product-direct-checkout .field-error:empty {
    display: none;
}

.product-direct-checkout .validation-summary-valid { display: none; }

@media (min-width: 1025px) {
    .product-store { width: min(1080px, calc(100% - 32px)); margin: 28px auto 64px; }
    .product-store__heading { margin-bottom: 24px; }
    .product-store__heading h1 { font-size: 4.4rem; }
    .product-grid { gap: 26px; }
    .product-card__image { height: 250px; padding: 17px; }
    .product-card__body { gap: 10px; padding: 19px; }
    .product-card__body h2 { font-size: 1.8rem; }

    .product-direct-checkout .product-checkout-surface { min-height: calc(100dvh - 82px); }
    .product-direct-checkout .direct-product-card {
        grid-template-columns: minmax(190px, .68fr) minmax(0, 1.32fr);
        margin-bottom: 17px;
    }
    .product-direct-checkout .direct-product-image { height: 220px; padding: 14px; }
    .product-direct-checkout .direct-product-copy { gap: 8px; padding: 19px; }
    .product-direct-checkout .direct-product-copy h2 { font-size: clamp(30px, 2.5vw, 40px); }
    .product-direct-checkout .direct-product-copy p { font-size: 13px; }
    .product-direct-checkout .direct-public-price { padding: 8px 10px; }
    .product-direct-checkout .direct-public-price strong { font-size: 27px; }
    .product-direct-checkout .direct-variant-options { padding: 14px; }
    .product-direct-checkout .direct-variant-options legend { font-size: 18px; }
    .product-direct-checkout .variant-choice > span { min-height: 82px; }
}

.product-confirmation-page {
    padding: 18px 0 35px;
}

.product-confirmation-page .checkout-shell {
    min-height: auto;
}

.product-confirmation-page .direct-confirmation-summary dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.product-confirmation-page .direct-confirmation-summary dl > div {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(100px, .45fr) minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.product-confirmation-page .direct-confirmation-summary dl > div:last-child {
    padding: 11px 12px;
    border: 0;
    border-radius: var(--ctm-brand-radius-sm);
    background: rgba(255, 255, 0, .3);
    font-weight: 850;
}

.product-confirmation-page .direct-confirmation-summary dt {
    font-weight: 850;
}

.product-confirmation-page .direct-confirmation-summary dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .product-direct-checkout .product-checkout-surface {
        min-height: calc(100dvh - 70px);
    }

    .product-direct-checkout .direct-product-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-direct-checkout .direct-product-image {
        width: 100%;
        height: clamp(210px, 62vw, 290px);
        border-right: 0;
        border-bottom: var(--mac-border);
    }

    .product-direct-checkout .direct-product-copy {
        width: 100%;
        padding: 18px 16px;
    }

    .product-direct-checkout .direct-product-copy h2 {
        font-size: clamp(30px, 10vw, 40px);
    }

    .product-direct-checkout .direct-product-copy p { font-size: 16px; }

    .product-direct-checkout .checkout-header {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .product-direct-checkout .checkout-header .checkout-close {
        width: fit-content;
        max-width: 100%;
        grid-column: 1;
        grid-row: 1;
    }
    .product-direct-checkout .checkout-header .checkout-timer {
        width: 100%;
        min-width: 0;
        grid-column: 1;
        grid-row: 2;
    }
    .product-direct-checkout [data-step="1"] h2 { margin-bottom: 10px; font-size: clamp(34px, 10vw, 43px); }
    .product-direct-checkout .buyer-grid { gap: 10px; margin: 10px 0 6px; }
    .product-direct-checkout .buyer-grid label { gap: 4px; }
    .mac-sales-body .product-direct-checkout .buyer-grid input { height: 46px; min-height: 46px; padding: 9px 11px; }

    .product-direct-checkout .direct-variant-options {
        padding: 14px 10px;
    }

    .product-direct-checkout .variant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-direct-checkout .variant-choice > span {
        min-height: 96px;
    }

    .product-direct-checkout .checkout-step > .checkout-side-column {
        margin-top: 18px;
    }

    .product-direct-checkout .product-mobile-summary {
        width: 100%;
        display: block;
        margin-bottom: 20px;
        padding: 16px;
        border: var(--mac-border);
        background: var(--mac-soft);
    }

    .product-direct-checkout .product-mobile-summary .summary-caption {
        margin-bottom: 11px;
    }

    .product-direct-checkout .step-actions > .text-button {
        width: 100%;
        order: 2;
    }

    .product-confirmation-page {
        padding: 8px 0 24px;
    }

    .product-confirmation-page .direct-confirmation-summary dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }
}

@media (max-width: 380px) {
    .product-direct-checkout .variant-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-direct-checkout .product-coupon-entry [data-product-coupon-form] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .product-direct-checkout *,
    .product-direct-checkout *::before,
    .product-direct-checkout *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
