/* =========================================================
   HOME ORIGINAL — SELECTOR DE MARCOS
   Versión compacta PDP + Side Cart
========================================================= */

.ho-frame-upsell {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e8e8e8;
    box-sizing: border-box;
    font-family: inherit;
    position: relative;
}

/* Estado de carga */
.ho-frame-upsell.is-loading {
    opacity: 0.75;
    pointer-events: none;
    position: relative;
}
.ho-frame-upsell.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.62);
    border-radius: 6px;
    z-index: 10;
}
.ho-frame-upsell.is-loading .ho-frame-header { position: relative; z-index: 11; }
.ho-frame-upsell.is-loading .ho-frame-arrow { display: none; }
.ho-frame-upsell.is-loading .ho-frame-header::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(154,116,73,0.20);
    border-top-color: #9a7449;
    border-radius: 50%;
    animation: hoFrameSpin 0.6s linear infinite;
}
@keyframes hoFrameSpin { to { transform: rotate(360deg); } }

/* Cabecera */
.ho-frame-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    padding: 0;
}
.ho-frame-header-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ho-frame-icon {
    width: 25px; height: 25px; border: 2px solid #9a7449;
    position: relative; flex: 0 0 25px; box-sizing: border-box; border-radius: 1px;
}
.ho-frame-icon::after { content: ""; position: absolute; inset: 3px; border: 1px solid #9a7449; }
.ho-frame-title { font-size: 14px; font-weight: 600; line-height: 1.2; color: #1a1a1a; }
.ho-frame-subtitle { margin-top: 2px; font-size: 11px; font-weight: 400; line-height: 1.2; color: #777; }
.ho-frame-arrow { flex: 0 0 auto; font-size: 16px; line-height: 1; color: #555; transition: transform .25s ease; }
.ho-frame-upsell.open .ho-frame-arrow { transform: rotate(180deg); }

/* Selección actual / resumen */
.ho-frame-selected {
    display: flex; align-items: center; width: 100%; min-height: 48px;
    margin-top: 8px; padding: 5px 8px; border: 1px solid #e0e0e0;
    border-radius: 5px; background: #fff; cursor: pointer; box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease; user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.ho-frame-selected:hover { border-color: #bbb; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.ho-current-image { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ho-frame-selected-img {
    width: 44px; height: 38px; margin-right: 10px; border-radius: 3px;
    object-fit: cover; display: block; border: 1px solid #eaeaea;
}
.ho-frame-no-img {
    width: 44px; height: 38px; margin-right: 10px; border-radius: 3px;
    background: #f7f7f7; display: flex; align-items: center; justify-content: center;
    color: #666; font-size: 19px; font-weight: 300; box-sizing: border-box;
    border: 1px dashed #d5d5d5;
}
.ho-frame-selected-info { flex: 1; min-width: 0; }
.ho-frame-selected-name { font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #222; }
.ho-frame-selected-price { margin-top: 1px; font-size: 11px; line-height: 1.2; color: #666; font-weight: 500; }
.ho-frame-selected-chevron { flex: 0 0 auto; margin-right: 2px; padding-left: 8px; font-size: 14px; color: #777; transition: transform .25s ease; }
.ho-frame-upsell.open .ho-frame-selected-chevron { transform: rotate(180deg); }

/* Opciones */
.ho-frame-options {
    display: none; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px; margin-top: 10px; animation: hoFadeSlideDown .2s ease-out;
}
.ho-frame-upsell.open .ho-frame-options { display: grid; }
.ho-frame-upsell:not(.ho-frame-upsell-pdp):not(.open) .ho-frame-options { display: none !important; }
.ho-frame-upsell:not(.ho-frame-upsell-pdp).open .ho-frame-options { display: grid !important; }
@keyframes hoFadeSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tarjeta */
.ho-frame-option {
    min-width: 0; padding: 5px; border: 1px solid #e1e1e1; border-radius: 5px;
    background: #fff; cursor: pointer; text-align: center; box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    user-select: none; display: flex; flex-direction: column; align-items: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.ho-frame-option:hover { border-color: #aaa; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.ho-frame-option.active { border: 1.5px solid #9a7449; background: #fff; box-shadow: 0 0 0 1px rgba(154,116,73,.08); }
.ho-frame-option img {
    display: block; width: 100%; height: 78px; margin: 0 0 5px 0;
    border-radius: 3px; object-fit: cover; border: 1px solid #f0f0f0; box-sizing: border-box;
}
.ho-frame-option-none {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 78px;
    margin: 0 0 5px 0; border-radius: 3px; background: #fafafa; color: #777;
    font-size: 23px; font-weight: 300; border: 1px dashed #d7d7d7; box-sizing: border-box;
}
.ho-frame-option-name {
    width: 100%; min-height: 14px; margin: 0; font-size: 10.5px; font-weight: 500;
    line-height: 1.15; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ho-frame-option.active .ho-frame-option-name { font-weight: 600; }
.ho-frame-option-price { margin-top: 3px; font-size: 10px; line-height: 1.1; color: #777; }
.ho-frame-option.active .ho-frame-option-price { color: #9a7449; font-weight: 600; }

/* Nota */
.ho-frame-note { display: none; margin-top: 7px; font-size: 10.5px; line-height: 1.3; color: #888; text-align: left; font-style: normal; }
.ho-frame-upsell.open .ho-frame-note { display: block; }

/* Ficha de producto */
.ho-frame-upsell-pdp {
    margin: 14px 0 16px 0; padding: 12px; background: #fafafa;
    border: 1px solid #e8e8e8; border-radius: 6px;
}
.ho-frame-upsell-pdp .ho-frame-options { display: grid; }
.ho-frame-upsell-pdp .ho-frame-note { display: block; }

/* Side Cart */
.xoo-wsc-product { align-items: flex-start !important; }
.xoo-wsc-img-col { align-self: flex-start !important; }
.xoo-wsc-container .ho-frame-options,
.xoo-wsc-modal .ho-frame-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.xoo-wsc-container .ho-frame-option img,
.xoo-wsc-container .ho-frame-option-none,
.xoo-wsc-modal .ho-frame-option img,
.xoo-wsc-modal .ho-frame-option-none { height: 48px; }
.xoo-wsc-container .ho-frame-option-name,
.xoo-wsc-modal .ho-frame-option-name { font-size: 10px; }
.xoo-wsc-container .ho-frame-option-price,
.xoo-wsc-modal .ho-frame-option-price { font-size: 9.5px; }

/* Tablet */
@media (max-width: 900px) {
    .ho-frame-upsell-pdp .ho-frame-options { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
    .ho-frame-option img, .ho-frame-option-none { height: 65px; }
    .ho-frame-option-name { font-size: 10px; }
    .ho-frame-option-price { font-size: 9.5px; }
}

/* Móvil: fila horizontal compacta */
@media (max-width: 600px) {
    .ho-frame-upsell-pdp { margin: 12px 0 14px; padding: 10px; overflow: hidden; }
    .ho-frame-title { font-size: 13px; }
    .ho-frame-subtitle { font-size: 10.5px; }
    .ho-frame-icon { width: 23px; height: 23px; flex-basis: 23px; }

    .ho-frame-upsell-pdp .ho-frame-options {
        display: flex; grid-template-columns: none; gap: 7px;
        width: calc(100% + 10px); margin-right: -10px;
        overflow-x: auto; overflow-y: hidden; padding: 1px 10px 7px 0;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ho-frame-upsell-pdp .ho-frame-options::-webkit-scrollbar { display: none; }
    .ho-frame-upsell-pdp .ho-frame-option {
        flex: 0 0 92px; width: 92px; scroll-snap-align: start; padding: 4px;
    }
    .ho-frame-upsell-pdp .ho-frame-option img,
    .ho-frame-upsell-pdp .ho-frame-option-none { height: 66px; margin-bottom: 5px; }
    .ho-frame-upsell-pdp .ho-frame-option-name {
        font-size: 9.5px; white-space: normal; min-height: 22px;
        display: flex; align-items: center; justify-content: center;
    }
    .ho-frame-upsell-pdp .ho-frame-option-price { margin-top: 2px; font-size: 9.5px; }
    .ho-frame-upsell-pdp .ho-frame-note { margin-top: 4px; font-size: 10px; }

    .xoo-wsc-container .ho-frame-options,
    .xoo-wsc-modal .ho-frame-options {
        grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
        width: 100%; overflow: visible; padding: 0; margin-right: 0;
    }
    .xoo-wsc-container .ho-frame-upsell:not(.open) .ho-frame-options,
    .xoo-wsc-modal .ho-frame-upsell:not(.open) .ho-frame-options {
        display: none !important;
    }
    .xoo-wsc-container .ho-frame-upsell.open .ho-frame-options,
    .xoo-wsc-modal .ho-frame-upsell.open .ho-frame-options {
        display: grid !important;
    }
    .xoo-wsc-container .ho-frame-option,
    .xoo-wsc-modal .ho-frame-option { width: auto; min-width: 0; }
    .xoo-wsc-container .ho-frame-option img,
    .xoo-wsc-container .ho-frame-option-none,
    .xoo-wsc-modal .ho-frame-option img,
    .xoo-wsc-modal .ho-frame-option-none { height: 44px; }
}

@media (max-width: 380px) {
    .ho-frame-upsell-pdp { padding: 9px; }
    .ho-frame-upsell-pdp .ho-frame-option { flex-basis: 86px; width: 86px; }
    .ho-frame-upsell-pdp .ho-frame-option img,
    .ho-frame-upsell-pdp .ho-frame-option-none { height: 60px; }
}

/* Eliminación optimista Side Cart */
.xoo-wsc-product.ho-deleting {
    opacity: 0 !important;
    transform: translateX(20px) scale(0.96) !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: all .28s cubic-bezier(.4,0,.2,1) !important;
}


/* =========================================================
   FIX MÓVIL — selector horizontal compacto
   Mantiene intacto el diseño de escritorio.
========================================================= */
@media (max-width: 600px) {
    .ho-frame-upsell-pdp .ho-frame-options {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 7px !important;
        padding: 2px 0 8px !important;
        margin-right: 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .ho-frame-upsell-pdp .ho-frame-options::-webkit-scrollbar {
        display: none;
    }

    .ho-frame-upsell-pdp .ho-frame-option {
        flex: 0 0 88px !important;
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }

    .ho-frame-upsell-pdp .ho-frame-option img,
    .ho-frame-upsell-pdp .ho-frame-option-none {
        width: 100% !important;
        height: 62px !important;
        object-fit: cover;
    }
}


/* HOME ORIGINAL — promo marco -15% compacta */
.ho-frame-upsell-pdp { margin: 10px 0 12px; padding: 9px 10px; }
.ho-frame-upsell-pdp .ho-frame-options { gap: 6px; margin-top: 8px; }
.ho-frame-upsell-pdp .ho-frame-option { padding: 4px; position: relative; }
.ho-frame-upsell-pdp .ho-frame-option img,
.ho-frame-upsell-pdp .ho-frame-option-none { height: 62px; margin-bottom: 4px; }
.ho-frame-subtitle { color:#777; }
.ho-frame-subtitle strong { color:#9a7449; }
.ho-frame-option-price { position:relative; min-height:26px; display:flex; align-items:center; justify-content:center; gap:3px; flex-wrap:wrap; }
.ho-frame-old-price { color:#999; text-decoration:line-through; font-size:9px; font-weight:400; }
.ho-frame-new-price { color:#9a7449; font-size:10px; font-weight:700; }
.ho-frame-discount-badge { position:absolute; top:-82px; right:-2px; background:#9a7449; color:#fff; border-radius:3px; padding:2px 4px; font-size:8.5px; line-height:1.1; font-weight:700; }
@media (max-width:600px) {
  .ho-frame-upsell-pdp { margin:9px 0 11px; padding:8px; }
  .ho-frame-upsell-pdp .ho-frame-options { gap:5px; width:calc(100% + 8px); margin-top:7px; margin-right:-8px; padding:1px 8px 5px 0; }
  .ho-frame-upsell-pdp .ho-frame-option { flex:0 0 78px; width:78px; padding:3px; }
  .ho-frame-upsell-pdp .ho-frame-option img, .ho-frame-upsell-pdp .ho-frame-option-none { height:52px; margin-bottom:3px; }
  .ho-frame-upsell-pdp .ho-frame-option-name { font-size:8.8px; min-height:19px; }
  .ho-frame-upsell-pdp .ho-frame-option-price { font-size:8.8px; min-height:23px; margin-top:1px; gap:2px; }
  .ho-frame-old-price { font-size:8px; } .ho-frame-new-price { font-size:9px; }
  .ho-frame-discount-badge { top:-70px; right:-2px; font-size:7.5px; padding:2px 3px; }
  .ho-frame-title { font-size:12.5px; } .ho-frame-subtitle { font-size:9.7px; }
  .ho-frame-note { font-size:9px !important; margin-top:3px !important; }
}


/* HOME ORIGINAL — Promo conjunto v1.3 */
.ho-frame-upsell-pdp .ho-frame-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ho-bundle-promo{display:flex;align-items:center;gap:8px;background:#faf6ef;border-radius:8px;padding:7px 11px;flex:0 0 auto;color:#222}
.ho-bundle-gift{color:#9a641e;font-size:22px;line-height:1}
.ho-bundle-promo>span:last-child{display:flex;flex-direction:column;line-height:1.15}
.ho-bundle-promo strong{font-size:13px;color:#9a641e;font-weight:700}
.ho-bundle-promo small{font-size:10.5px;color:#222;margin-top:2px}
.ho-bundle-explain{margin-top:7px;background:#faf6ef;border-radius:6px;padding:6px 9px;font-size:10.5px;line-height:1.25;color:#666}
.ho-bundle-explain strong{color:#222;font-weight:600}
.ho-frame-discount-badge{display:none!important}
.ho-cart-subtotal-promo{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 7px}
.ho-cart-subtotal-promo del{color:#999;font-weight:400}
.ho-cart-subtotal-promo strong{color:#9a641e}
.ho-cart-subtotal-promo small{flex-basis:100%;font-size:10px;color:#9a641e;text-align:right;line-height:1.1}
@media(max-width:600px){
 .ho-frame-upsell-pdp .ho-frame-header{display:block}
 .ho-bundle-promo{margin-top:6px;padding:6px 8px;gap:6px;width:100%;box-sizing:border-box}
 .ho-bundle-gift{font-size:18px}
 .ho-bundle-promo>span:last-child{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 4px}
 .ho-bundle-promo strong{font-size:11px}
 .ho-bundle-promo small{font-size:9px;margin-top:0}
 .ho-bundle-explain{padding:5px 7px;margin-top:5px;font-size:8.8px}
}