/**
 * FEF Cart Button — stylesheet
 * All appearance driven by CSS custom properties written at render time.
 * Fallback values keep the widget looking good even with no Style tweaks.
 */

/* ═══════════════════ VARIABLE DEFAULTS ═══════════════════ */
.fef-cart-widget,
.fef-cd-root {
    /* Trigger button */
    --fef-cb-btn-bg:           #0f172a;
    --fef-cb-btn-bg-hover:     transparent;
    --fef-cb-btn-color:        #ffffff;
    --fef-cb-btn-color-hover:  transparent;
    --fef-cb-btn-hover-scale:  1;
    --fef-cb-btn-transition:   200ms;
    --fef-cb-btn-align:        flex-start;

    /* Icon — NO --fef-cb-icon-color / -hover defaults set here so the
       icon inherits from the button until you explicitly pick a colour. */
    --fef-cb-icon-size:        22px;
    --fef-cb-icon-rotate:      0deg;
    --fef-cb-icon-stroke:      2;
    --fef-cb-icon-bg:          transparent;
    --fef-cb-icon-bg-hover:    transparent;
    --fef-cb-icon-padding:     0;
    --fef-cb-icon-radius:      0;
    --fef-cb-icon-offset-x:    0px;
    --fef-cb-icon-offset-y:    0px;

    /* Count badge */
    --fef-cb-badge-bg:         #dc2626;
    --fef-cb-badge-bg-hover:   transparent;
    --fef-cb-badge-color:      #ffffff;
    --fef-cb-badge-color-hover:transparent;
    --fef-cb-badge-min:        18px;
    --fef-cb-badge-top:        -6px;
    --fef-cb-badge-right:      -6px;

    /* Drawer panel */
    --fef-cd-panel-bg:         #ffffff;
    --fef-cd-text:             #0f172a;
    --fef-cd-overlay:          rgba(15, 23, 42, .5);
    --fef-cd-width:            380px;
    --fef-cd-height:           420px;
    --fef-cd-radius:           0;
    --fef-cd-duration:         350ms;

    /* Header */
    --fef-cd-header-bg:        transparent;
    --fef-cd-title-color:      #0f172a;
    --fef-cd-header-padding:   16px 18px;
    --fef-cd-header-border:    #e2e8f0;

    /* Close */
    --fef-cd-close-size:       32px;
    --fef-cd-close-bg:         #ffffff;
    --fef-cd-close-bg-hover:   #0f172a;
    --fef-cd-close-color:      #0f172a;
    --fef-cd-close-color-hover:#ffffff;
    --fef-cd-close-border:     #0f172a;

    /* Item row */
    --fef-cd-item-bg:          transparent;
    --fef-cd-item-bg-hover:    rgba(15, 23, 42, .04);   /* light gray hover — visible by default */
    --fef-cd-item-padding:     14px 0;
    --fef-cd-item-margin:      0;
    --fef-cd-item-radius:      0;
    --fef-cd-item-divider:     #e2e8f0;
    --fef-cd-thumb-size:       64px;
    --fef-cd-thumb-radius:     8px;

    /* Item text */
    --fef-cd-name-color:       #0f172a;
    --fef-cd-name-color-hover: transparent;
    --fef-cd-price-color:      #0f172a;

    /* Qty */
    --fef-cd-qty-bg:           transparent;
    --fef-cd-qty-color:        #0f172a;
    --fef-cd-qty-border:       #e2e8f0;
    --fef-cd-qty-radius:       8px;
    --fef-cd-qty-btn-hover:    #0f172a;

    /* Remove */
    --fef-cd-rem-color:        #dc2626;
    --fef-cd-rem-color-hover:  #991b1b;

    /* Footer */
    --fef-cd-total-color:      #0f172a;

    /* View Cart button */
    --fef-cd-vc-bg:            #ffffff;
    --fef-cd-vc-bg-hover:      #0f172a;
    --fef-cd-vc-color:         #0f172a;
    --fef-cd-vc-color-hover:   #ffffff;
    --fef-cd-vc-radius:        8px 8px 8px 8px;
    --fef-cd-vc-padding:       11px 20px 11px 20px;

    /* Checkout button */
    --fef-cd-co-bg:            #0f172a;
    --fef-cd-co-bg-hover:      transparent;
    --fef-cd-co-color:         #ffffff;
    --fef-cd-co-color-hover:   transparent;
    --fef-cd-co-radius:        8px 8px 8px 8px;
    --fef-cd-co-padding:       11px 20px 11px 20px;
}

/* ═══════════════════ TRIGGER BUTTON ═══════════════════ */
.fef-cart-widget {
    display: flex;
    width: 100%;              /* Needed for justify-content to actually align */
    justify-content: var(--fef-cb-btn-align);
    line-height: 0;
}

.fef-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* No forced min-width/min-height — the button sizes to its content
       (the icon). This prevents the "huge hover box around a small icon"
       problem. User can add padding via the Icon → Padding control. */
    border: none;
    background: var(--fef-cb-btn-bg);
    color: var(--fef-cb-btn-color);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--fef-cb-btn-transition) ease,
                color      var(--fef-cb-btn-transition) ease,
                transform  var(--fef-cb-btn-transition) ease,
                box-shadow var(--fef-cb-btn-transition) ease,
                filter     var(--fef-cb-btn-transition) ease;
}
.fef-cart-btn:hover {
    background: var(--fef-cb-btn-bg-hover, var(--fef-cb-btn-bg));
    color: var(--fef-cb-btn-color-hover, var(--fef-cb-btn-color));
    transform: scale(var(--fef-cb-btn-hover-scale, 1));
}
.fef-cart-btn:active { transform: scale(.97); }
.fef-cart-btn:focus-visible { outline: 2px solid var(--fef-cd-co-bg); outline-offset: 2px; }

/* Fallback when hover colors are 'transparent' — brighten slightly */
.fef-cart-btn[style*="--fef-cb-btn-bg-hover:transparent"]:hover { filter: brightness(1.12); }

/* Icon */
.fef-cart-btn i,
.fef-cart-btn svg,
.fef-cart-btn .fef-cart-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--fef-cb-icon-size);
    height: var(--fef-cb-icon-size);
    font-size: var(--fef-cb-icon-size);
    line-height: 1;
    /* If the user picked an icon colour, use it. If not, fall back to
       inherit so the icon tracks the button's colour on both idle AND hover. */
    color: var(--fef-cb-icon-color, inherit);
    background: var(--fef-cb-icon-bg);
    padding: var(--fef-cb-icon-padding);
    border-radius: var(--fef-cb-icon-radius);
    transform: translate(var(--fef-cb-icon-offset-x), var(--fef-cb-icon-offset-y));
    box-sizing: content-box;
    transition: color var(--fef-cb-btn-transition) ease,
                background var(--fef-cb-btn-transition) ease,
                transform var(--fef-cb-btn-transition) ease,
                filter var(--fef-cb-btn-transition) ease;
}
.fef-cart-btn .fef-cart-svg {
    fill: none;
    stroke: var(--fef-cb-icon-color, currentColor);
    stroke-width: var(--fef-cb-icon-stroke);
}
.fef-cart-btn:hover i,
.fef-cart-btn:hover svg,
.fef-cart-btn:hover .fef-cart-svg {
    /* Prefer explicit hover colour → base icon colour → inherit from button. */
    color: var(--fef-cb-icon-color-hover, var(--fef-cb-icon-color, inherit));
    background: var(--fef-cb-icon-bg-hover);
    transform: translate(var(--fef-cb-icon-offset-x), var(--fef-cb-icon-offset-y)) rotate(var(--fef-cb-icon-rotate));
}
.fef-cart-btn:hover .fef-cart-svg { stroke: var(--fef-cb-icon-color-hover, var(--fef-cb-icon-color, currentColor)); }

/* Wobble animation on add-to-cart (JS toggles the class) */
@keyframes fefCbWobble {
    0%, 100% { transform: translate(var(--fef-cb-icon-offset-x), var(--fef-cb-icon-offset-y)) rotate(0deg); }
    15%      { transform: translate(var(--fef-cb-icon-offset-x), var(--fef-cb-icon-offset-y)) rotate(-15deg) scale(1.1); }
    30%      { transform: translate(var(--fef-cb-icon-offset-x), var(--fef-cb-icon-offset-y)) rotate(12deg)  scale(1.15); }
    45%      { transform: translate(var(--fef-cb-icon-offset-x), var(--fef-cb-icon-offset-y)) rotate(-10deg) scale(1.1); }
    60%      { transform: translate(var(--fef-cb-icon-offset-x), var(--fef-cb-icon-offset-y)) rotate(8deg)   scale(1.08); }
    75%      { transform: translate(var(--fef-cb-icon-offset-x), var(--fef-cb-icon-offset-y)) rotate(-4deg)  scale(1.05); }
}
.fef-cart-widget.fef-cb-wobble .fef-cart-btn i,
.fef-cart-widget.fef-cb-wobble .fef-cart-btn svg { animation: fefCbWobble .7s cubic-bezier(.36, .07, .19, .97) both; }

/* Empty cart state */
.fef-cd-empty-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
    color: #94a3b8;
}
.fef-cd-empty-block .fef-cd-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .04);
    color: #94a3b8;
    font-size: 32px;
}
.fef-cd-empty-block .fef-cd-empty-icon svg { width: 32px; height: 32px; }
.fef-cd-empty-block .fef-cd-empty-msg { font-size: 15px; font-weight: 500; }

/* Tax / discount / subtotal rows */
.fef-cd-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--fef-cd-total-color);
    font-size: 13px;
}
.fef-cd-total-row.fef-cd-total-final { font-weight: 700; font-size: 17px; padding-top: 8px; border-top: 1px solid var(--fef-cd-header-border); margin-top: 4px; }
.fef-cd-total-row .fef-cd-total-label { color: var(--fef-cd-total-color); opacity: .7; }
.fef-cd-total-row.fef-cd-total-final .fef-cd-total-label { opacity: 1; }
.fef-cd-total-row .fef-cd-total-value { font-weight: 600; }

.fef-cart-text { white-space: nowrap; font-size: .95em; }

/* Count badge */
.fef-cart-count {
    position: absolute;
    top: var(--fef-cb-badge-top);
    right: var(--fef-cb-badge-right);
    min-width: var(--fef-cb-badge-min);
    height: var(--fef-cb-badge-min);
    line-height: var(--fef-cb-badge-min);
    background: var(--fef-cb-badge-bg);
    color: var(--fef-cb-badge-color);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 0 0 2px var(--fef-cd-panel-bg);
    transition: background var(--fef-cb-btn-transition) ease,
                color var(--fef-cb-btn-transition) ease;
}
.fef-cart-btn:hover .fef-cart-count {
    background: var(--fef-cb-badge-bg-hover, var(--fef-cb-badge-bg));
    color: var(--fef-cb-badge-color-hover, var(--fef-cb-badge-color));
}

/* Elementor's entrance-animation class must never hide our widget. */
.elementor-widget-fef_cart_button.elementor-invisible,
.elementor-widget-fef_cart_button.elementor-invisible > .elementor-widget-container,
.elementor-widget-fef_cart_button .fef-cart-widget,
.elementor-widget-fef_cart_button .fef-cart-btn {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ═══════════════════ PORTAL + DRAWER ═══════════════════ */
.fef-cd-portal {
    position: static !important;
    display: block !important;
    width: 0 !important; height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; float: none !important;
    flex: none !important; overflow: visible !important;
    transform: none !important; filter: none !important;
    opacity: 1 !important; z-index: auto !important;
    contain: none !important;
}

.fef-cd-root {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    visibility: hidden;
    pointer-events: none;
}
.fef-cd-root.fef-cd-open { visibility: visible; pointer-events: auto; }

.fef-cd-overlay {
    position: absolute; inset: 0;
    background: var(--fef-cd-overlay);
    opacity: 0;
    transition: opacity var(--fef-cd-duration) cubic-bezier(.22, 1, .36, 1);
}
.fef-cd-root.fef-cd-open .fef-cd-overlay { opacity: 1; }

.fef-cd-panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--fef-cd-panel-bg);
    color: var(--fef-cd-text);
    border-radius: var(--fef-cd-radius);
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    opacity: 0;
    transition: transform var(--fef-cd-duration) cubic-bezier(.22, 1, .36, 1),
                opacity   var(--fef-cd-duration) cubic-bezier(.22, 1, .36, 1);
}
.fef-cd-root.fef-cd-open .fef-cd-panel { opacity: 1; }

.fef-cd-panel.pos-right  { top: 0; right: 0; height: 100%; width: var(--fef-cd-width); }
.fef-cd-panel.pos-left   { top: 0; left: 0;  height: 100%; width: var(--fef-cd-width); }
.fef-cd-panel.pos-top    { top: 0; left: 0;  width: 100%;  height: var(--fef-cd-height); }
.fef-cd-panel.pos-bottom { bottom: 0; left: 0; width: 100%; height: var(--fef-cd-height); }

.fef-cd-panel.pos-right.anim-slide  { transform: translateX(100%); }
.fef-cd-panel.pos-left.anim-slide   { transform: translateX(-100%); }
.fef-cd-panel.pos-top.anim-slide    { transform: translateY(-100%); }
.fef-cd-panel.pos-bottom.anim-slide { transform: translateY(100%); }
.fef-cd-open .fef-cd-panel.anim-slide { transform: none; }

.fef-cd-panel.anim-fade { opacity: 0; }
.fef-cd-open .fef-cd-panel.anim-fade { opacity: 1; }

.fef-cd-panel.anim-zoom { opacity: 0; transform: scale(.92); }
.fef-cd-open .fef-cd-panel.anim-zoom { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .fef-cd-panel, .fef-cd-overlay { transition: none !important; animation: none !important; }
}

/* Header */
.fef-cd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--fef-cd-header-padding);
    background: var(--fef-cd-header-bg);
    border-bottom: 1px solid var(--fef-cd-header-border);
    flex: 0 0 auto;
}
.fef-cd-title { font-size: 17px; font-weight: 700; color: var(--fef-cd-title-color); }

.fef-cd-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fef-cd-close-size);
    height: var(--fef-cd-close-size);
    padding: 0;
    border: 1px solid var(--fef-cd-close-border);
    border-radius: 50%;
    background: var(--fef-cd-close-bg);
    color: var(--fef-cd-close-color);
    font-size: 20px; line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.fef-cd-close:hover {
    background: var(--fef-cd-close-bg-hover);
    color: var(--fef-cd-close-color-hover);
}

/* Body */
.fef-cd-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 18px;
    background: var(--fef-cd-panel-bg);
}

/* Line items */
.fef-cd-item {
    display: flex;
    gap: 12px;
    padding: var(--fef-cd-item-padding);
    margin: var(--fef-cd-item-margin);
    border-radius: var(--fef-cd-item-radius);
    background: var(--fef-cd-item-bg);
    border-bottom: 1px solid var(--fef-cd-item-divider);
    transition: background .15s ease;
}
.fef-cd-item:last-child { border-bottom: none; }
.fef-cd-item:hover { background: var(--fef-cd-item-bg-hover); }

.fef-cd-thumb { flex: 0 0 auto; }
.fef-cd-thumb img {
    width: var(--fef-cd-thumb-size);
    height: var(--fef-cd-thumb-size);
    object-fit: cover;
    border-radius: var(--fef-cd-thumb-radius);
    display: block;
}

.fef-cd-info { flex: 1 1 auto; min-width: 0; }
.fef-cd-name { font-weight: 600; line-height: 1.35; }
.fef-cd-name a { color: var(--fef-cd-name-color); text-decoration: none; transition: color .15s ease; }
.fef-cd-name a:hover { color: var(--fef-cd-name-color-hover, var(--fef-cd-name-color)); text-decoration: underline; }

.fef-cd-price { margin-top: 5px; font-weight: 600; color: var(--fef-cd-price-color); }

.fef-cd-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

.fef-cd-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 3px 8px;
    width: max-content;
    background: var(--fef-cd-qty-bg);
    color: var(--fef-cd-qty-color);
    border: 1px solid var(--fef-cd-qty-border);
    border-radius: var(--fef-cd-qty-radius);
}
.fef-cd-qty button {
    width: 22px;
    border: none; background: none;
    color: var(--fef-cd-qty-color);
    font-size: 17px; line-height: 1;
    cursor: pointer;
    transition: color .15s ease;
}
.fef-cd-qty button:hover { color: var(--fef-cd-qty-btn-hover); }
.fef-cd-qnum { min-width: 18px; text-align: center; font-weight: 600; color: var(--fef-cd-qty-color); }

.fef-cd-remove {
    border: none; background: none; padding: 0;
    color: var(--fef-cd-rem-color);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    transition: color .15s ease;
}
.fef-cd-remove:hover { color: var(--fef-cd-rem-color-hover); }

/* Empty / loading */
.fef-cd-empty,
.fef-cd-loading {
    padding: 44px 20px;
    text-align: center;
    color: #64748b;
}
.fef-cd-loading::after {
    content: "";
    display: block;
    width: 22px; height: 22px;
    margin: 12px auto 0;
    border: 2px solid var(--fef-cd-header-border);
    border-top-color: var(--fef-cd-co-bg);
    border-radius: 50%;
    animation: fefCdSpin .7s linear infinite;
}
@keyframes fefCdSpin { to { transform: rotate(360deg); } }

/* ═══════════════════ FOOTER (View Cart + Checkout + Total) ═══════════════════ */
.fef-cd-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-top: 1px solid var(--fef-cd-header-border);
    background: var(--fef-cd-panel-bg);
    flex: 0 0 auto;
}

.fef-cd-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--fef-cd-total-color);
}
.fef-cd-total-label { font-size: 14px; color: var(--fef-cd-total-color); }
.fef-cd-total       { font-size: 17px; color: var(--fef-cd-total-color); }

.fef-cd-buttons {
    display: flex;
    gap: 10px;
}
.fef-cd-footer-inline .fef-cd-buttons  { flex-direction: row; }
.fef-cd-footer-stacked .fef-cd-buttons { flex-direction: column; }

.fef-cd-viewcart,
.fef-cd-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding: var(--fef-cd-vc-padding);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, filter .15s ease, box-shadow .15s ease;
}
.fef-cd-viewcart {
    background: var(--fef-cd-vc-bg);
    color: var(--fef-cd-vc-color);
    border-radius: var(--fef-cd-vc-radius);
}
.fef-cd-viewcart:hover {
    background: var(--fef-cd-vc-bg-hover, var(--fef-cd-vc-bg));
    color: var(--fef-cd-vc-color-hover, var(--fef-cd-vc-color));
}
.fef-cd-checkout {
    background: var(--fef-cd-co-bg);
    color: var(--fef-cd-co-color);
    border-radius: var(--fef-cd-co-radius);
    padding: var(--fef-cd-co-padding);
}
.fef-cd-checkout:hover {
    background: var(--fef-cd-co-bg-hover, var(--fef-cd-co-bg));
    color: var(--fef-cd-co-color-hover, var(--fef-cd-co-color));
    filter: brightness(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .fef-cd-panel.pos-right, .fef-cd-panel.pos-left { width: min(var(--fef-cd-width), 92vw); }
    .fef-cd-header, .fef-cd-body, .fef-cd-footer { padding-left: 14px; padding-right: 14px; }
    .fef-cd-thumb img { width: min(var(--fef-cd-thumb-size), 56px); height: min(var(--fef-cd-thumb-size), 56px); }
}

/* ═══════════════════ NOTIFICATION ═══════════════════ */
.fef-cn-note {
    position: fixed;
    z-index: 2147483001;
    background: var(--fef-cn-bg, #ffffff);
    color: #0f172a;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
    font-size: 14px;
    line-height: 1.4;
}
.fef-cn-note.fef-cn-show { opacity: 1; }
.fef-cn-corner {
    display: flex; align-items: center; gap: 12px;
    max-width: 360px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .08);
}
.fef-cn-corner.fef-cn-top-right    { top: 20px; right: 20px; transform: translateX(120%); }
.fef-cn-corner.fef-cn-top-left     { top: 20px; left: 20px;  transform: translateX(-120%); }
.fef-cn-corner.fef-cn-bottom-right { bottom: 20px; right: 20px; transform: translateX(120%); }
.fef-cn-corner.fef-cn-bottom-left  { bottom: 20px; left: 20px;  transform: translateX(-120%); }
.fef-cn-corner.fef-cn-show         { transform: translateX(0); }
.fef-cn-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: var(--fef-cn-accent, #16a34a);
    border-radius: 50%;
}
.fef-cn-corner .fef-cn-thumb { flex: 0 0 auto; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.fef-cn-body { flex: 1 1 auto; min-width: 0; }
.fef-cn-title { font-weight: 700; color: var(--fef-cn-accent, #16a34a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fef-cn-msg   { color: #475569; font-size: 13px; margin-top: 2px; }
.fef-cn-price { color: #0f172a; font-weight: 600; margin-top: 2px; }
.fef-cn-close {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border: none;
    background: rgba(15, 23, 42, .06);
    color: #64748b;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0;
}
.fef-cn-close:hover { background: rgba(15, 23, 42, .12); color: #0f172a; }
.fef-cn-strip { left: 0; right: 0; padding: 0; border-radius: 0; box-shadow: 0 4px 20px rgba(15, 23, 42, .12); }
.fef-cn-strip.fef-cn-top    { top: 0;    transform: translateY(-100%); }
.fef-cn-strip.fef-cn-bottom { bottom: 0; transform: translateY(100%); }
.fef-cn-strip.fef-cn-show   { transform: translateY(0); }
.fef-cn-strip .fef-cn-inner { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 14px 20px; }
.fef-cn-strip .fef-cn-thumb { flex: 0 0 auto; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.fef-cn-strip .fef-cn-title { font-size: 15px; white-space: normal; }
@media (max-width: 640px) {
    .fef-cn-corner { max-width: calc(100vw - 32px); }
    .fef-cn-strip .fef-cn-inner { padding: 10px 14px; gap: 10px; }
    .fef-cn-strip .fef-cn-thumb { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .fef-cn-note { transition: opacity .2s ease !important; transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   HIGH-SPECIFICITY OVERRIDES
   Written LAST so they win over theme CSS. Only user-controllable
   properties get !important so we don't lock in defaults.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Cart icon: color, bg, borders, radius, padding, offsets ─── */
.elementor-widget-fef_cart_button .fef-cart-btn i,
.elementor-widget-fef_cart_button .fef-cart-btn svg,
.elementor-widget-fef_cart_button .fef-cart-btn .fef-cart-svg {
    color: var(--fef-cb-icon-color, inherit) !important;
    background: var(--fef-cb-icon-bg, transparent) !important;
    padding: var(--fef-cb-icon-padding, 0) !important;
    border-radius: var(--fef-cb-icon-radius, 0) !important;
}
.elementor-widget-fef_cart_button .fef-cart-btn .fef-cart-svg {
    stroke: var(--fef-cb-icon-color, currentColor) !important;
}
.elementor-widget-fef_cart_button .fef-cart-btn:hover i,
.elementor-widget-fef_cart_button .fef-cart-btn:hover svg,
.elementor-widget-fef_cart_button .fef-cart-btn:hover .fef-cart-svg {
    color: var(--fef-cb-icon-color-hover, var(--fef-cb-icon-color, inherit)) !important;
    background: var(--fef-cb-icon-bg-hover, var(--fef-cb-icon-bg, transparent)) !important;
}
.elementor-widget-fef_cart_button .fef-cart-btn:hover .fef-cart-svg {
    stroke: var(--fef-cb-icon-color-hover, var(--fef-cb-icon-color, currentColor)) !important;
}

/* ─── Count badge: bg, text color, border, radius (base + hover) ─── */
.elementor-widget-fef_cart_button .fef-cart-count {
    background: var(--fef-cb-badge-bg, #dc2626) !important;
    color: var(--fef-cb-badge-color, #ffffff) !important;
}
.elementor-widget-fef_cart_button .fef-cart-btn:hover .fef-cart-count {
    background: var(--fef-cb-badge-bg-hover, var(--fef-cb-badge-bg, #dc2626)) !important;
    color: var(--fef-cb-badge-color-hover, var(--fef-cb-badge-color, #ffffff)) !important;
}

/* ─── Drawer footer buttons: view cart + checkout ─── */
.fef-cd-root .fef-cd-viewcart {
    background: var(--fef-cd-vc-bg, transparent) !important;
    color: var(--fef-cd-vc-color, #0f172a) !important;
}
.fef-cd-root .fef-cd-viewcart:hover {
    background: var(--fef-cd-vc-bg-hover, var(--fef-cd-vc-bg, transparent)) !important;
    color: var(--fef-cd-vc-color-hover, var(--fef-cd-vc-color, #0f172a)) !important;
}
.fef-cd-root .fef-cd-checkout {
    background: var(--fef-cd-co-bg, #0f172a) !important;
    color: var(--fef-cd-co-color, #ffffff) !important;
}
.fef-cd-root .fef-cd-checkout:hover {
    background: var(--fef-cd-co-bg-hover, var(--fef-cd-co-bg, #0f172a)) !important;
    color: var(--fef-cd-co-color-hover, var(--fef-cd-co-color, #ffffff)) !important;
}

/* ─── Close button: bg, color, size, padding, margin, radius ─── */
.fef-cd-root .fef-cd-close {
    background: var(--fef-cd-close-bg, #ffffff) !important;
    color: var(--fef-cd-close-color, #0f172a) !important;
    width: var(--fef-cd-close-size, 32px) !important;
    height: var(--fef-cd-close-size, 32px) !important;
    padding: var(--fef-cd-close-padding, 0) !important;
    margin: var(--fef-cd-close-margin, 0) !important;
    border-radius: var(--fef-cd-close-radius, 50%) !important;
    font-size: var(--fef-cd-close-icon-size, 16px) !important;
}
.fef-cd-root .fef-cd-close:hover {
    background: var(--fef-cd-close-bg-hover, var(--fef-cd-close-bg, #0f172a)) !important;
    color: var(--fef-cd-close-color-hover, var(--fef-cd-close-color, #ffffff)) !important;
}
.fef-cd-root .fef-cd-close i,
.fef-cd-root .fef-cd-close svg {
    font-size: var(--fef-cd-close-icon-size, 16px) !important;
    width: var(--fef-cd-close-icon-size, 16px) !important;
    height: var(--fef-cd-close-icon-size, 16px) !important;
}

/* ─── Line items (drawer): thumb + name text sizes ─── */
.fef-cd-root .fef-cd-item .fef-cd-thumb,
.fef-cd-root .fef-cd-item .fef-cd-thumb img {
    width: var(--fef-cd-thumb-size, 64px) !important;
    height: var(--fef-cd-thumb-size, 64px) !important;
}
.fef-cd-root .fef-cd-item .fef-cd-name {
    font-size: var(--fef-cd-name-size, 14px) !important;
    color: var(--fef-cd-name-color, #0f172a) !important;
}
.fef-cd-root .fef-cd-item .fef-cd-qty {
    font-size: var(--fef-cd-qty-size, 13px) !important;
    color: var(--fef-cd-qty-color, #64748b) !important;
}
.fef-cd-root .fef-cd-item .fef-cd-price {
    font-size: var(--fef-cd-price-size, 14px) !important;
    color: var(--fef-cd-price-color, #0f172a) !important;
    font-weight: 600 !important;
}