/* ═══════════════════════════════════════
   Cibly Upsell v2.4
   ═══════════════════════════════════════ */
:root{--cup-bg:#FDF8F0;--cup-border:#E5D5C0;--cup-sel:#C8956C;--cup-radius:12px;--cup-title:#2D2A26;--cup-sub:#5C5044;--cup-price:#2D2A26;--cup-disc:#C0392B}

.cibly-up-selector{margin:0 0 18px;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}
.cibly-up-options{display:flex;flex-direction:column;gap:12px}

/* ─── Wrap (card + bar + gift chooser) ─── */
.cup-wrap{display:flex;flex-direction:column}
.cup-wrap:not(:last-child){margin-bottom:0}

/* ─── Card ─── */
.cup-card{position:relative;background:var(--cup-bg);border:1px solid var(--cup-border);border-radius:var(--cup-radius);padding:10px;cursor:pointer;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;outline:none}
.cup-card:hover{border-color:var(--cup-sel)}
.cup-card.selected{border-color:var(--cup-sel);box-shadow:inset 0 0 0 1px var(--cup-sel)}
.cup-card:focus-visible{outline:2px solid var(--cup-sel);outline-offset:2px}
/* Only flatten bottom corners when this card's wrap is active AND has content below */
.cup-wrap.active.has-bottom .cup-card{border-radius:var(--cup-radius) var(--cup-radius) 0 0;border-bottom-color:#F0E8DA}

.cup-main{display:flex;align-items:center;gap:12px}
.cup-img{width:56px;height:56px;flex-shrink:0;border-radius:8px;overflow:hidden}
.cup-img img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.cup-info{flex:1;min-width:0}
.cup-title{font-size:15px;font-weight:600;color:var(--cup-title);line-height:1.3}
.cup-sub{font-size:13px;color:var(--cup-sub);line-height:1.3;margin-top:1px}
.cup-perday{font-size:12px;color:#4A5647;margin-top:2px;font-style:italic}

.cup-price{flex-shrink:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.cup-old{font-size:12px;color:#7F7469;text-decoration:line-through}
.cup-current{font-size:16px;font-weight:700;color:var(--cup-price);white-space:nowrap;line-height:1.2}
.cup-current.disc{color:var(--cup-disc)}
.cup-ppills{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;margin-top:3px}
.cup-price .woocommerce-Price-amount,.cup-ppills .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;color:inherit}
.cup-price del,.cup-price ins,.cup-ppills del,.cup-ppills ins{text-decoration:none;font-size:inherit;font-weight:inherit;color:inherit}

.cup-badge{position:absolute;top:-9px;right:14px;color:#fff;font-size:11px;font-weight:700;padding:3px 14px;border-radius:20px;white-space:nowrap;line-height:1.3;z-index:2}

/* ─── Pills ─── */
.cup-pill{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px;white-space:nowrap;line-height:1.4;background:#f5e9d9;color:#5c5044;transition:background .25s,color .25s}
.cup-pill-img{width:16px;height:16px;border-radius:3px;object-fit:cover}
.cup-card.selected .cup-pill--save{background:#efd5be;color:#5A2E0E}
.cup-card.selected .cup-pill--value{background:#e87373;color:#fff}
.cup-card.selected .cup-pill--urgency{background:#f6a975;color:#4A1A05}
.cup-card.selected .cup-pill--value[style]{background:color-mix(in srgb,var(--pill-color) 20%,#FDF8F0);color:color-mix(in srgb,var(--pill-color) 100%,#000 40%)}

/* ─── Bonus bar (attached to card) ─── */
.cup-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border:1px solid var(--cup-border);border-top:1px solid #F0E8DA;border-radius:0 0 var(--cup-radius) var(--cup-radius);background:#FDFAF5;gap:8px;margin-top:-1px}
/* When gift chooser follows bar, flatten bar bottom */
.cup-wrap.has-bottom .cup-bar:not(:last-child){border-radius:0}
.cup-wrap.active .cup-bar{border-color:var(--cup-sel);border-top-color:#F0E8DA;box-shadow:inset 1px 0 0 var(--cup-sel),inset -1px 0 0 var(--cup-sel)}
.cup-wrap.active .cup-bar:last-child{box-shadow:inset 1px 0 0 var(--cup-sel),inset -1px 0 0 var(--cup-sel),inset 0 -1px 0 var(--cup-sel)}
.cup-bar-l{display:flex;gap:4px;flex-wrap:wrap}
.cup-bar-r{display:flex;gap:4px;flex-wrap:wrap;flex-shrink:0}

/* ─── Gift chooser (attached below card/bar) ─── */
.cup-gc{display:none;border:1px solid var(--cup-border);border-top:1px solid #F0E8DA;border-radius:0 0 var(--cup-radius) var(--cup-radius);padding:10px 14px;background:#FDFAF5;margin-top:-1px}
.cup-wrap.active .cup-gc{border-color:var(--cup-sel);border-top-color:#F0E8DA;box-shadow:inset 1px 0 0 var(--cup-sel),inset -1px 0 0 var(--cup-sel),inset 0 -1px 0 var(--cup-sel)}
.cup-gc-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cup-gc-icon{font-size:16px;line-height:1}
.cup-gc-title{font-size:13px;font-weight:600;color:var(--cup-title)}

.cup-gc-opts{display:flex;gap:6px;flex-wrap:wrap}
.cup-gc-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px;border-radius:8px;border:1px solid var(--cup-border);cursor:pointer;background:#fff;transition:border-color .2s}
.cup-gc-opt:hover{border-color:var(--cup-sel)}
.cup-gc-opt.picked{border-color:var(--cup-sel);box-shadow:inset 0 0 0 1px var(--cup-sel);background:var(--cup-bg)}
.cup-gc-swatch{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--cup-border)}
.cup-gc-swatch-empty{background:#E8E4DD}
.cup-gc-name{font-size:11px;font-weight:500;color:var(--cup-title);text-align:center}

.cup-gc-done{display:flex;align-items:center;gap:8px}
.cup-gc-check{width:18px;height:18px;border-radius:50%;background:var(--cup-sel);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.cup-gc-done-text{font-size:12px;color:var(--cup-sub);font-weight:500;flex:1}
.cup-gc-change{font-size:11px;color:#9B9080;cursor:pointer;text-decoration:underline;flex-shrink:0}

/* Shake animation for validation */
@keyframes cup-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.cup-gc-shake{animation:cup-shake .4s ease}

/* ─── Desktop ─── */
@media(min-width:768px){
    .cup-card{padding:10px 14px 10px 10px}
    .cup-main{gap:14px}
    .cup-img{width:64px;height:64px}
    .cup-title{font-size:16px}
    .cup-current{font-size:17px}
    .cup-badge{right:18px}
}

/* ─── Mobile ─── */
@media(max-width:767px){
    .cup-img{width:48px;height:48px}
    .cup-title{font-size:15px;font-weight:700}
    .cup-sub{font-size:13px}
    .cup-current{font-size:15px;font-weight:800}
    .cup-perday{font-size:12px}
    .cup-pill{font-size:11px;padding:3px 7px}
    .cup-ppills .cup-pill{font-size:10px}
    .cup-badge{right:10px;top:-8px;font-size:10px;padding:2px 10px}
    .cup-gc-swatch{width:28px;height:28px}
    .cup-gc-opt{padding:5px 6px}
}

.cibly-up-gift-qty{display:inline-block;padding:4px 10px;font-weight:600;color:#888}
.woodmart-sticky-btn .cibly-up-selector,.wd-sticky-btn .cibly-up-selector,.wd-sticky-btn-wrapper .cibly-up-selector,#bg-sticky-add-to-cart .cibly-up-selector{display:none!important}
.cibly-up-qty-hidden .quantity{display:none!important}
.cibly-up-qty-hidden .variations,.cibly-up-qty-hidden .variations_form,.cibly-up-qty-hidden table.variations{display:block!important}
.cibly-up-qty-hidden .single_variation_wrap{display:block!important}
.cibly-up-qty-hidden .single_variation_wrap .quantity{display:none!important}

/* ═══════════════════════════════════════
   v2.4.2 fixes: consistent image crop + attached bar corners
   ═══════════════════════════════════════ */
.cup-wrap.has-bottom .cup-card{
    border-radius:var(--cup-radius) var(--cup-radius) 0 0;
    border-bottom-color:#F0E8DA;
}
.cup-img{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#F4EFE6;
    border-radius:10px;
    overflow:hidden;
    isolation:isolate;
}
.cup-img img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    border-radius:inherit!important;
    display:block!important;
}
.cup-bar,
.cup-gc{
    width:100%;
    box-sizing:border-box;
}


/* ═══════════════════════════════════════
   v2.4.3 HARD FIX: Woodmart/theme image overrides + clean corners
   ═══════════════════════════════════════ */
.cibly-up-selector,
.cibly-up-selector *{
    box-sizing:border-box;
}

/* remove browser dotted focus border; keep only our selected state */
.cibly-up-selector .cup-card,
.cibly-up-selector .cup-card:focus,
.cibly-up-selector .cup-card:active{
    outline:none!important;
    border-style:solid!important;
}
.cibly-up-selector .cup-card:focus-visible{
    outline:2px solid var(--cup-sel)!important;
    outline-offset:2px!important;
}

/* every option image must look identical: square, rounded, not stretched */
.cibly-up-selector .cup-img{
    width:80px!important;
    height:80px!important;
    min-width:80px!important;
    max-width:80px!important;
    min-height:80px!important;
    max-height:80px!important;
    flex:0 0 64px!important;
    border-radius:12px!important;
    overflow:hidden!important;
    background:#F4EFE6!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
}
.cibly-up-selector .cup-img img,
.cibly-up-selector img.cup-img-el{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    border-radius:0!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    aspect-ratio:auto!important;
}

/* attached lower bars: corners always line up with the main card */
.cibly-up-selector .cup-wrap.has-bottom > .cup-card{
    border-radius:var(--cup-radius) var(--cup-radius) 0 0!important;
    border-bottom-color:#F0E8DA!important;
    margin-bottom:0!important;
}
.cibly-up-selector .cup-wrap.has-bottom > .cup-bar,
.cibly-up-selector .cup-wrap.has-bottom > .cup-gc{
    width:100%!important;
    margin-top:-1px!important;
    border-left-width:1px!important;
    border-right-width:1px!important;
}
.cibly-up-selector .cup-wrap.has-bottom > .cup-bar:last-child,
.cibly-up-selector .cup-wrap.has-bottom > .cup-gc:last-child{
    border-radius:0 0 var(--cup-radius) var(--cup-radius)!important;
}
.cibly-up-selector .cup-wrap.has-bottom > .cup-bar:not(:last-child){
    border-radius:0!important;
}

/* gift chooser must never inherit product-gallery image sizing */
.cibly-up-selector .cup-gc{
    overflow:hidden!important;
}
.cibly-up-selector .cup-gc-opts{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
    gap:8px!important;
    align-items:stretch!important;
}
.cibly-up-selector .cup-gc-opt{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    text-align:center!important;
}
.cibly-up-selector .cup-gc-swatch,
.cibly-up-selector .cup-gc-opt img.cup-gc-swatch{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
    flex:0 0 44px!important;
    object-fit:contain!important;
    object-position:center center!important;
    border-radius:10px!important;
    display:block!important;
    margin:0 auto!important;
    padding:0!important;
    aspect-ratio:1/1!important;
}
.cibly-up-selector .cup-gc-name{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

@media(max-width:767px){
    .cibly-up-selector .cup-img{
        width:70px!important;
        height:70px!important;
        min-width:70px!important;
        max-width:70px!important;
        min-height:70px!important;
        max-height:70px!important;
        flex-basis:70px!important;
    }
    .cibly-up-selector .cup-gc-opts{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:6px!important;
    }
    .cibly-up-selector .cup-gc-swatch,
    .cibly-up-selector .cup-gc-opt img.cup-gc-swatch{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        min-height:38px!important;
        max-width:38px!important;
        max-height:38px!important;
    }
}


/* ═══════════════════════════════════════
   v2.4.4 corner logic fix:
   - if only gift chooser exists, keep card rounded until selected
   - if bar exists, attach it normally
   - if bar + gift chooser, flatten bar bottom only when chooser is open
   ═══════════════════════════════════════ */

/* Reset the over-broad v2.4.2 rule */
.cibly-up-selector .cup-wrap.has-bottom .cup-card{
    border-radius:var(--cup-radius)!important;
    border-bottom-color:var(--cup-border)!important;
}

/* Visible bonus bar under the card => attach card to bar */
.cibly-up-selector .cup-wrap.has-bar .cup-card{
    border-radius:var(--cup-radius) var(--cup-radius) 0 0!important;
    border-bottom-color:#F0E8DA!important;
}

/* Gift chooser only => flatten card only when active/open */
.cibly-up-selector .cup-wrap.has-gc:not(.has-bar).active .cup-card{
    border-radius:var(--cup-radius) var(--cup-radius) 0 0!important;
    border-bottom-color:#F0E8DA!important;
}

/* Default bar shape */
.cibly-up-selector .cup-wrap.has-bar .cup-bar{
    border-radius:0 0 var(--cup-radius) var(--cup-radius)!important;
}

/* If chooser opens below the bar, bar becomes middle piece */
.cibly-up-selector .cup-wrap.has-bar.has-gc.active .cup-bar{
    border-radius:0!important;
}

/* Keep the chooser as the closing rounded piece */
.cibly-up-selector .cup-wrap.has-gc .cup-gc{
    border-radius:0 0 var(--cup-radius) var(--cup-radius)!important;
}