/*
 * Shared WooCommerce product card.
 * ══════════════════════════════════════════════════════════
 * Used on the front page, shop/archive, and related products.
 *
 * Compact intrinsic-height card with subtle hover and touch-safe controls.
 * ══════════════════════════════════════════════════════════
 */
:root{
    --ss-font-sans:"Instrument Sans",Arial,sans-serif;
    --ss-font-display:"Epilogue",Arial,sans-serif;
}

/* ── Card container ── */
.ss-fcard{
    background:#fff;
    border:1px solid rgba(10,10,10,.07);
    border-radius:16px;
    box-shadow:0 2px 14px rgba(10,10,10,.06);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    height:100%;
    transition:transform .3s ease, box-shadow .3s ease;
}
.ss-fcard:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 38px rgba(10,10,10,.11);
}
.ss-fcard a{text-decoration:none;color:inherit;}

/* ── Image tile ── */
.ss-fcard .ss-fcard-img,
.ss-fcard a.ss-fcard-img{
    position:relative;
    display:block;
    overflow:hidden;
    aspect-ratio:1 / 1.08;
    height:auto;
    background:#f6f5f2;
}
.ss-fcard .ss-fcard-img img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    padding:10px;
    transition:opacity .36s cubic-bezier(.22,.8,.28,1),transform .55s cubic-bezier(.22,.8,.28,1);
}
.ss-fcard .ss-fcard-img-alt{position:absolute;inset:0;opacity:0;pointer-events:none}
.ss-fcard:hover .ss-fcard-img-alt{opacity:1}
.ss-fcard:hover .ss-fcard-img img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.ss-fcard .ss-fcard-img img{transition:none}}

/* ── Body ── */
.ss-fcard .ss-fcard-body{
    padding:12px 14px 4px;
    display:flex;
    flex-direction:column;
    gap:4px;
    /* The footer is bottom-aligned by the flex layout below. */
}
.ss-fcard .ss-fcard-cat{
    margin:0;
    font:600 10px/1 var(--ss-font-sans,'Instrument Sans',system-ui,sans-serif);
    text-transform:uppercase;
    letter-spacing:.14em;
    color:rgba(10,10,10,.48);
}
.ss-fcard .ss-fcard-name,
.ss-fcard .ss-fcard-name a{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:2px 0 0;
    font:600 14px/1.3 var(--ss-font-display,'Instrument Sans',system-ui,sans-serif);
    color:#0a0a0a;
    letter-spacing:-.005em;
}
.ss-fcard .ss-fcard-name a:hover{color:#2f2f2f;}

/* Stars (rating + count) */
.ss-fcard .ss-fcard-stars{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:2px 0 0;
    font:500 11px/1 var(--ss-font-sans,'Instrument Sans',system-ui,sans-serif);
    color:rgba(10,10,10,.55);
}
.ss-fcard .ss-fcard-stars-icons{
    display:inline-flex;
    gap:1px;
    font-size:12px;
    line-height:1;
}
.ss-fcard .ss-fcard-stars-icons .ss-star.is-full,
.ss-fcard .ss-fcard-stars-icons .ss-star.is-half{color:#f0b429;}
.ss-fcard .ss-fcard-stars-icons .ss-star.is-empty{color:#e3e1d8;}
.ss-fcard .ss-fcard-stars-icons .ss-star.is-half{
    background:linear-gradient(90deg,#f0b429 50%,#e3e1d8 50%);
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
}
.ss-fcard .ss-fcard-stars-num{font-weight:600;color:#0a0a0a;}
.ss-fcard .ss-fcard-stars-count{color:rgba(10,10,10,.45);}

/* Subtitle (weight / attribute) */
.ss-fcard .ss-fcard-sub{
    margin:0;
    font:500 11.5px/1.35 var(--ss-font-sans,'Instrument Sans',system-ui,sans-serif);
    color:rgba(10,10,10,.50);
}

/* Price row */
.ss-fcard .ss-fcard-price{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:6px;
    margin-top:2px;
    font:800 17px/1 var(--ss-font-display,'Instrument Sans',system-ui,sans-serif);
    color:#0a0a0a;
    letter-spacing:-.01em;
}
.ss-fcard .ss-fcard-price ins{text-decoration:none;}
.ss-fcard .ss-fcard-price del,
.ss-fcard .ss-fcard-price .ss-price-old{
    font-size:12px;
    font-weight:500;
    color:#9ca3af;
    text-decoration:line-through;
    opacity:1;
}
.ss-fcard .ss-fcard-unit{
    font-size:11px;
    font-weight:500;
    color:rgba(10,10,10,.45);
    margin-left:2px;
    letter-spacing:0;
}
.ss-fcard .ss-fcard-from{
    display:inline-block;
    margin:0 4px 0 0;
    font:600 10px/1 var(--ss-font-sans,'Instrument Sans',system-ui,sans-serif);
    text-transform:uppercase;
    letter-spacing:.12em;
    color:rgba(10,10,10,.42);
    vertical-align:middle;
}

/* ── Variation chips ── */
.ss-fcard .ss-fcard-variants{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:8px;
}
.ss-fcard .ss-var-chip{
    appearance:none;
    background:#f4f4f4;
    color:#0a0a0a;
    border:1px solid transparent;
    border-radius:9999px;
    padding:5px 10px;
    font:600 10.5px/1 var(--ss-font-sans,'Instrument Sans',system-ui,sans-serif);
    cursor:pointer;
    transition:background .15s, color .15s, border-color .15s;
    white-space:nowrap;
}
.ss-fcard .ss-var-chip:hover{background:#e8e8e8;}
.ss-fcard .ss-var-chip.is-active{
    background:#0a0a0a;
    color:#fff;
    border-color:#0a0a0a;
}
.ss-fcard .ss-var-chip:disabled,
.ss-fcard .ss-var-chip.is-oos{
    opacity:.4;
    cursor:not-allowed;
    text-decoration:line-through;
}

/* Implementation note. */
.ss-fcard .ss-fcard-actions{
    margin-top:2px;
    padding:2px 12px 12px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
.ss-fcard .ss-add-round{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:auto;
    min-height:34px;
    padding:8px 14px;
    border:none;
    border-radius:9999px;
    background:#2f2f2f;
    color:#fff;
    font:700 11px/1 var(--ss-font-sans,'Instrument Sans',system-ui,sans-serif);
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    text-decoration:none !important;
    position:relative;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(10,10,10,.08);
    transition:background .22s ease, transform .18s ease, box-shadow .22s ease;
}
.ss-fcard .ss-add-round:hover:not(.is-loading):not(.is-adding):not(.is-added):not(.is-oos){
    background:#242424;
    box-shadow:0 4px 10px rgba(47,47,47,.22);
}
.ss-fcard .ss-add-round:active:not(.is-loading):not(.is-adding){transform:scale(.97);}
.ss-fcard .ss-add-round.is-adding,
.ss-fcard .ss-add-round.is-loading{
    background:#242424;
    pointer-events:none;
    opacity:.92;
}
.ss-fcard .ss-add-round.is-added{
    background:#242424;
    pointer-events:none;
    animation:ss-add-pop .32s cubic-bezier(.34,1.56,.64,1);
}
.ss-fcard .ss-add-round.is-oos{
    background:#e3e1d8;
    color:#8a8a8a;
    cursor:not-allowed;
    box-shadow:none;
}
.ss-fcard .ss-add-round .ss-add-label{display:inline-block;white-space:nowrap;}
.ss-fcard .ss-add-round .ss-add-icon{display:inline-flex;align-items:center;line-height:0;}
.ss-fcard .ss-add-round .ss-add-icon svg{width:14px;height:14px;display:block;}
.ss-fcard .ss-add-round .ss-spin-ring{
    display:block;
    width:14px;height:14px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    animation:ss-spin .65s linear infinite;
}
@keyframes ss-spin{to{transform:rotate(360deg);}}
@keyframes ss-add-pop{
    0%{transform:scale(1);} 40%{transform:scale(.96);}
    70%{transform:scale(1.04);} 100%{transform:scale(1);}
}

/* Implementation note. */
.ss-fcard a.added_to_cart,
.ss-fcard .wc-forward,
.ss-fcard .added_to_cart.wc-forward{display:none !important;}

/* Implementation note. */
.ss-card-wrap{display:block;height:100%;}
.ss-card-wrap--shop .ss-fcard{padding:0;}
.ss-card-wrap--related{display:flex;width:100%;height:100%;}
.ss-card-wrap--related .ss-fcard{flex:1;width:100%;}

/* ── Mobile ── */
@media (max-width:640px){
    .ss-fcard{border-radius:14px;}
    .ss-fcard .ss-fcard-img{height:210px;}
    .ss-fcard .ss-fcard-body{padding:10px 12px 4px;}
    .ss-fcard .ss-fcard-name{font-size:13px;}
    .ss-fcard .ss-fcard-price{font-size:15px;}
    .ss-fcard .ss-fcard-actions{padding:2px 10px 10px;}
    .ss-fcard .ss-add-round{min-height:32px;font-size:10px;padding:7px 12px;}
    .ss-fcard .ss-var-chip{padding:4px 8px;font-size:9.5px;}
    .ss-fcard .ss-fcard-stars{font-size:10px;}
    .ss-fcard .ss-fcard-stars-icons{font-size:11px;}
}

/* Shared Purevea-style motion language for WooCommerce cards */
.ss-fcard{
    border-radius:12px;
    box-shadow:0 2px 12px rgba(10,10,10,.045);
    transition:transform .32s cubic-bezier(.65,0,.35,1),
                box-shadow .32s cubic-bezier(.65,0,.35,1),
                border-color .32s cubic-bezier(.65,0,.35,1);
}
.ss-fcard:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(10,10,10,.09);
}
.ss-fcard .ss-fcard-img img{
    transition:opacity .42s cubic-bezier(.65,0,.35,1),
                transform .7s cubic-bezier(.65,0,.35,1),
                filter .42s cubic-bezier(.65,0,.35,1);
}
.ss-fcard:hover .ss-fcard-img img{transform:scale(1.035)}
.ss-fcard .ss-fcard-name a,
.ss-fcard .ss-fcard-cat,
.ss-fcard .ss-var-chip,
.ss-fcard .ss-add-round{
    transition:color .32s cubic-bezier(.65,0,.35,1),
                background-color .32s cubic-bezier(.65,0,.35,1),
                border-color .32s cubic-bezier(.65,0,.35,1),
                transform .18s cubic-bezier(.65,0,.35,1),
                box-shadow .32s cubic-bezier(.65,0,.35,1);
}
.ss-fcard .ss-add-round:hover:not(.is-loading):not(.is-added):not(.is-oos){
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(47,47,47,.16);
}
.ss-fcard .ss-add-round:active:not(.is-loading):not(.is-adding){
    transform:scale(.97);
}
.ss-fcard .ss-var-chip:hover:not(.is-oos){transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){
    .ss-fcard,.ss-fcard .ss-fcard-img img,.ss-fcard .ss-add-round{transition:none}
}

/* =====================================================
   BADGES — SALE / NEW / HOT / BESTSELLER / LIMITED
   ===================================================== */
.ss-fcard-img{position:relative;}
.ss-fcard-badges{
    position:absolute;
    top:9px;
    display:flex;
    flex-direction:column;
    gap:5px;
    z-index:3;
    pointer-events:none;
}
.ss-fcard-badges-left {left:9px; align-items:flex-start;}
.ss-fcard-badges-right{right:9px; align-items:flex-end;}
.ss-fcard-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:3px 10px;
    border-radius:20px;
    font:700 9.5px/1 'Instrument Sans','Inter',system-ui,sans-serif;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#fff;
    white-space:nowrap;
}
.ss-fcard-badge.ss-badge-sale  {background:#c45c26;color:#fff;}
.ss-fcard-badge.ss-badge-new   {background:#0a0a0a;color:#fff;}
.ss-fcard-badge.ss-badge-hot   {background:#ef6c1a;color:#fff;}
.ss-fcard-badge.ss-badge-best  {background:#f0b429;color:#0a0a0a;}
.ss-fcard-badge.ss-badge-lim   {background:#6a3399;color:#fff;}
.ss-fcard-badge.ss-badge-custom{background:#0a0a0a;color:#fff;}

/* Two-line sale badge (XX + OFF) — compact pill */
.ss-fcard-badge.ss-badge-sale:has(small){
    flex-direction:column;
    padding:4px 10px;
    gap:0;
    border-radius:14px;
}
.ss-fcard-badge.ss-badge-sale em{
    font-style:normal;
    font-size:11px;
    font-weight:800;
    line-height:1.1;
}
.ss-fcard-badge.ss-badge-sale small{
    font-size:7.5px;
    font-weight:700;
    letter-spacing:.1em;
    opacity:.9;
    line-height:1;
    margin-top:1px;
}
.ss-fcard-sale-slot[hidden]{display:none !important;}

@media (max-width:640px){
    .ss-fcard-badges{top:7px;gap:4px;}
    .ss-fcard-badges-left{left:7px;}
    .ss-fcard-badges-right{right:7px;}
    .ss-fcard-badge{padding:3px 8px;font-size:9px;}
}


/* Compact card rhythm and bottom-aligned actions. */
 .ss-fcard .ss-fcard-img{aspect-ratio:1 / 1.08;height:auto;}
.ss-fcard .ss-fcard-body{
    flex:1 1 auto;
    padding:10px 12px 0;
    gap:3px;
}
.ss-fcard .ss-fcard-name{margin:0;}
.ss-fcard .ss-fcard-sub{margin:0;}
.ss-fcard .ss-fcard-stars{margin:0;}
.ss-fcard .ss-fcard-price{margin:2px 0 0;}
.ss-fcard .ss-fcard-variants{margin:6px 0 0;}
.ss-fcard .ss-fcard-actions{
    margin-top:auto;
    padding:8px 12px 10px;
}
@media (max-width:640px){
    .ss-fcard .ss-fcard-img{aspect-ratio:1 / 1.08;height:auto;}
    .ss-fcard .ss-fcard-body{padding:8px 10px 0;gap:2px;}
    .ss-fcard .ss-fcard-actions{padding:6px 10px 8px;}
}

/* Compact foot — price and add pill share one row. */
.ss-fcard .ss-fcard-body{padding:10px 12px 0;gap:3px;}
.ss-fcard .ss-fcard-variants{margin:6px 0 0;}

.ss-fcard .ss-fcard-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 12px 10px;
    margin-top:auto;
}
.ss-fcard .ss-fcard-foot .ss-fcard-price{
    margin:0;
    min-width:0;
    flex:1 1 auto;
    row-gap:2px;
}
.ss-fcard .ss-fcard-foot .ss-fcard-actions{
    margin:0;
    padding:0;
    flex:0 0 auto;
}
.ss-fcard .ss-fcard-foot .ss-add-round{min-height:32px;padding:7px 13px;}

@media (max-width:640px){
    .ss-fcard .ss-fcard-foot{padding:6px 10px 9px;gap:6px;}
    .ss-fcard .ss-fcard-foot .ss-add-round{min-height:30px;padding:6px 11px;font-size:10px;}
    .ss-fcard .ss-fcard-foot .ss-fcard-price{font-size:15px;}
}
@media (max-width:360px){
    .ss-fcard .ss-fcard-foot{flex-wrap:wrap;}
    .ss-fcard .ss-fcard-foot .ss-fcard-actions{margin-left:auto;}
}

/* Mobile-only Purevea-style bag action. Desktop keeps the existing Buy now pill. */
@media (max-width:640px){
    .ss-fcard .ss-fcard-foot .ss-add-round{
        width:42px;
        height:42px;
        min-width:42px;
        min-height:42px;
        padding:0;
        border:1px solid rgba(10,10,10,.08);
        border-radius:50%;
        background:#fff;
        color:#0a0a0a;
        box-shadow:0 5px 14px rgba(10,10,10,.10);
    }
    .ss-fcard .ss-fcard-foot .ss-add-round .ss-add-label{display:none;}
    .ss-fcard .ss-fcard-foot .ss-add-round .ss-add-icon{display:flex;}
    .ss-fcard .ss-fcard-foot .ss-add-round .ss-add-icon svg{width:19px;height:19px;}
    .ss-fcard .ss-fcard-foot .ss-add-round:active{transform:scale(.94);}
}