/* =============================================================
   CWF – Product Cards  v8.0.0
   ALL colors via CSS variables
   ============================================================= */

/* ── Grid ── */
.cwf-grid {
    display:               grid;
    grid-template-columns: repeat(var(--cwf-cols,3), 1fr);
    gap:                   var(--cwf-gap,18px);
}

/* ── Card ── */
.cwf-card {
    background:    var(--cwf-card-bg, #fff);
    border:        1px solid var(--cwf-card-border, #e5e7eb);
    border-radius: var(--cwf-card-r, 12px);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
    transition:    transform .22s, box-shadow .22s, border-color .18s;
    position:      relative;
    contain:       layout; /* Prevent layout bleed for better CLS */
}
@media(hover: hover) {
    .cwf-card:hover {
        transform:  translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,.09);
    }
    .cwf-card:hover .cwf-card-img {
        transform: scale(1.05);
    }
    .cwf-card.cwf-has-hover:hover .cwf-card-img {
        opacity: 0;
        transform: scale(1.05);
    }
    .cwf-card.cwf-has-hover:hover .cwf-card-img-hover {
        opacity: 1;
    }
    .cwf-card:hover .cwf-card-overlay { opacity:1; }
    .cwf-atc-btn:hover { transform:scale(1.04); }
    .cwf-card-body:hover .cwf-card-title { color: var(--cwf-c, #555); }
}

/* ── Image area ── */
.cwf-card-img-wrap {
    position:        relative;
    overflow:        hidden;
    background:      var(--cwf-img-bg, #f3f3f3);
    aspect-ratio:    var(--cwf-img-ratio, 1);
    width:           100%;
    display:         block;
    flex-shrink:     0;
    text-decoration: none;
    cursor:          pointer;
    border-radius:   var(--cwf-card-r, 12px) var(--cwf-card-r, 12px) 0 0; /* top only */
    line-height:     0; /* remove any inline gap */
    font-size:       0;
}
.cwf-card-img,
.cwf-card-img-hover {
    position:    absolute;
    inset:       0;
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center center;
    transition:  opacity .4s ease, transform .5s ease;
    display:     block;
    line-height: 0;
    border:      none;
    outline:     none;
}
/* Primary image */
.cwf-card-img {
    opacity:   1;
    transform: scale(1);
    z-index:   1;
}
/* Hover (second gallery) image */
.cwf-card-img-hover {
    opacity: 0;
    z-index: 2;
}

/* ── Badges ── */
.cwf-badge {
    position:      absolute;
    top:           10px;
    left:          10px;
    z-index:       2;
    padding:       4px 9px;
    border-radius: 6px;
    font-size:     11px;
    font-weight:   700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:         #fff;
    line-height:   1.3;
}
.cwf-badge--new  { background: var(--cwf-badge-new-bg,  #22c55e); }
.cwf-badge--sale { background: var(--cwf-badge-sale-bg, #ef4444); }
.cwf-badge--hot  { background: var(--cwf-badge-hot-bg,  #f97316); }
.cwf-badge--oos  {
    top:auto; bottom:10px; left:10px;
    background:rgba(0,0,0,.6);
    font-size: 10px;
}

/* Hover overlay with ATC button */
.cwf-card-overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(0,0,0,.28);
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    padding-bottom:  14px;
    opacity:         0;
    transition:      opacity .25s;
    z-index:         3;
}
.cwf-atc-btn {
    all:            unset;
    background:     var(--cwf-atc-bg, #ffffff);
    color:          var(--cwf-atc-txt, #111827) !important;
    padding:        9px 20px;
    border-radius:  30px;
    font-size:      12.5px;
    font-weight:    700;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background .18s, transform .15s;
    box-shadow:     0 2px 8px rgba(0,0,0,.15);
    text-decoration:none;
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
}
.cwf-atc-btn:hover { transform:scale(1.04); }
.cwf-atc-btn:active { transform:scale(0.96); }
.cwf-atc-btn--added {
    background: var(--cwf-c, #2563eb) !important;
    color:      #fff !important;
}
.cwf-atc-btn--view {
    background: rgba(255,255,255,.18);
    color:      #fff !important;
    border:     1px solid rgba(255,255,255,.5);
}

/* ── Card body ── */
.cwf-card-body {
    padding:         11px 13px 14px;
    display:         flex;
    flex-direction:  column;
    gap:             5px;
    flex:            1;
    text-decoration: none;
    color:           inherit;
    cursor:          pointer;
}
.cwf-card-body:hover { text-decoration: none; color: inherit; }
.cwf-card-cat {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          var(--cwf-mute, #9ca3af);
    margin-bottom:  1px;
}
.cwf-card-title {
    font-size:    13.5px;
    font-weight:  700;
    color:        var(--cwf-title-color, #111827);
    line-height:  1.35;
    display:      -webkit-box;
    -webkit-line-clamp: var(--cwf-title-lines, 2);
    line-clamp: var(--cwf-title-lines, 2);
    -webkit-box-orient: vertical;
    overflow:     hidden;
    text-decoration: none;
}
.cwf-card-body:hover .cwf-card-title { color: inherit; }
.cwf-card-desc {
    font-size:   12.5px;
    color:       var(--cwf-mute, #6b7280);
    line-height: 1.5;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* ── Stars ── */
.cwf-stars {
    display:    flex;
    gap:        2px;
    font-size:  13px;
    line-height:1;
}
.cwf-star--full,
.cwf-star--half { color: var(--cwf-star-color, #f59e0b); }
.cwf-star--empty{ color: var(--cwf-star-empty, #d1d5db); }

/* ── Price ── */
.cwf-card-price {
    font-size:   13.5px;
    font-weight: 800;
    color:       var(--cwf-price-color, #111827);
    margin-top:  auto;
    padding-top: 5px;
    line-height: 1.2;
    display:     flex;
    align-items: baseline;
    gap:         6px;
    flex-wrap:   wrap;
}
/* Single line: ins (sale) shown bold, del (old) shown smaller beside it */
.cwf-card-price del {
    color:           var(--cwf-price-del, #9ca3af);
    font-weight:     400;
    font-size:       11.5px;
    text-decoration: line-through;
    order:           2;
}
.cwf-card-price ins {
    text-decoration: none;
    color:           var(--cwf-price-sale, #dc2626);
    font-weight:     800;
    order:           1;
}
/* Regular price (no sale): just a text node — no reorder needed */

/* ── Appended animation ── */
.cwf-card.cwf-appended {
    animation: cwf-card-in .3s ease both;
}
@keyframes cwf-card-in {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:none; }
}

/* ── Responsive Grid ── */
@media(max-width:767px){
    .cwf-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}
@media(max-width:320px){
    .cwf-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Elementor border/radius overrides */
/* img-wrap top radius matches card, bottom is square for flush join */
.cwf-card-body { background: inherit; }

/* ── Attribute pills (5ml, 10ml, etc.) ── */
.cwf-card-attrs {
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px;
    margin-top:  2px;
    margin-bottom: 2px;
}
.cwf-attr-pill {
    display:        inline-flex;
    align-items:    center;
    padding:        1.5px 8px;
    background:     var(--cwf-cl, #f3f4f6);
    color:          var(--cwf-c, #555);
    border:         1px solid var(--cwf-sel-border, #e0e0e0);
    border-radius:  30px;
    font-size:      10.5px;
    font-weight:    600;
    letter-spacing: .01em;
    white-space:    nowrap;
    line-height:    1.6;
}

/* ── ATC row ── */
.cwf-card-atc-row {
    margin-top: 8px;
}

/* ══════════════════════════════
   CWF — Image Slider
   ══════════════════════════════ */

/* Wrap is now a div (not anchor) — still clickable via JS */
.cwf-card-img-wrap {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Slides container — horizontal strip */
.cwf-slides {
    position: absolute;
    inset:    0;
    display:  flex;
    width:    100%;
    height:   100%;
}

/* Each slide */
.cwf-slide {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    opacity:    0;
    transition: opacity .35s ease;
    flex-shrink: 0;
    display:    block;
}
.cwf-slide--active {
    opacity: 1;
}

/* Swipe animation classes */
.cwf-slide--out-left  { opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease; }
.cwf-slide--out-right { opacity: 0; transform: translateX(8px);  transition: opacity .25s ease, transform .25s ease; }
.cwf-slide--in-left   { opacity: 1; transform: translateX(0);    transition: opacity .25s ease, transform .25s ease; }

/* Dots */
.cwf-slider-dots {
    position:    absolute;
    bottom:      7px;
    left:        50%;
    transform:   translateX(-50%);
    display:     flex;
    gap:         5px;
    z-index:     5;
    pointer-events: none;
}
.cwf-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    rgba(255,255,255,.55);
    transition:    background .2s, transform .2s;
    flex-shrink:   0;
}
.cwf-dot--active {
    background:  #fff;
    transform:   scale(1.25);
}

/* Hover: show previous/next arrows on desktop */
.cwf-slider-arrow {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    width:       28px;
    height:      28px;
    background:  rgba(0,0,0,.38);
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       #fff;
    font-size:   14px;
    z-index:     6;
    opacity:     0;
    transition:  opacity .2s;
    cursor:      pointer;
    border:      none;
    padding:     0;
    line-height: 1;
}
.cwf-slider-arrow--prev { left:  6px; }
.cwf-slider-arrow--next { right: 6px; }
.cwf-card-img-wrap.cwf-slider:hover .cwf-slider-arrow { opacity: 1; }

@media(hover:none) {
    /* Touch devices — never show arrows */
    .cwf-slider-arrow { display: none !important; }
}