/*
==========================================================
VivaVita Affiliate Framework
Version 4 Stable
affiliate.css
==========================================================
*/

:root{
    --vv-primary:#4B3A34;
    --vv-primary-hover:#3d2f2a;
    --vv-secondary:#8b6a3d;

    --vv-bg:#ffffff;
    --vv-bg-soft:#faf8f6;
    --vv-border:#e8e2dc;

    --vv-text:#2d2d2d;
    --vv-muted:#777777;

    --vv-price:#4B3A34;
    --vv-sale:#D84B3C;

    --vv-radius:16px;

    --vv-shadow:0 12px 35px rgba(0,0,0,.08);
    --vv-shadow-hover:0 14px 36px rgba(0,0,0,.12);

    --vv-transition:.25s ease;
}

/* GRID */

.vivavita-affiliate-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
    margin:40px 0;
}

/* CARD */

.vivavita-affiliate-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--vv-bg);
    border:1px solid var(--vv-border);
    border-radius:var(--vv-radius);
    box-shadow:var(--vv-shadow);
    transition:transform var(--vv-transition),box-shadow var(--vv-transition);
}

.vivavita-affiliate-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--vv-shadow-hover);
}

.vivavita-affiliate-card:focus-within{
    outline:3px solid #d6b98c;
    outline-offset:3px;
}

/* IMAGE */

.vivavita-affiliate-image{
    display:block;
    width:100%;
    max-width:240px;
    height:auto;
    aspect-ratio:1/1;
    object-fit:contain;
    padding:20px;
    margin:0 auto;
}

/* CONTENT */

.vivavita-affiliate-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:22px;
}

/* TITLE */

.vivavita-affiliate-title{
    margin:0 0 14px;
    font-size:24px;
    line-height:1.35;
    font-weight:600;
    color:var(--vv-secondary);
    overflow-wrap:anywhere;
}

.vivavita-affiliate-title a{
    color:var(--vv-text);
    text-decoration:none;
}

.vivavita-affiliate-title a:hover{
    color:var(--vv-primary);
}

/* BRAND */

.vivavita-affiliate-brand{
    color:var(--vv-muted);
    font-size:14px;
    margin-bottom:12px;
}

/* DESCRIPTION */

.vivavita-affiliate-description{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    line-height:1.5;
    color:var(--vv-primary);
    margin-bottom:16px;
}

/* PRICE */

.vivavita-affiliate-price-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:12px;
}

.vivavita-affiliate-price{
    font-size:30px;
    font-weight:700;
    color:var(--vv-price);
    font-variant-numeric:tabular-nums;
}

.vivavita-affiliate-old-price{
    font-size:20px;
    color:#999;
    text-decoration:line-through;
    font-variant-numeric:tabular-nums;
}

/* DISCOUNT */

.vivavita-affiliate-discount{
    display:inline-block;
    align-self:flex-start;
    padding:8px 18px;
    border-radius:999px;
    background:var(--vv-sale);
    color:#fff;
    font-size:16px;
    font-weight:700;
}

/* META */

.vivavita-affiliate-shipping,
.vivavita-affiliate-stock,
.vivavita-affiliate-category,
.vivavita-affiliate-ean,
.vivavita-affiliate-merchant{
    margin-top:6px;
    font-size:15px;
    color:var(--vv-muted);
    text-align:center;
}

/* BUTTON */

.vivavita-affiliate-button{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:22px;
    padding:14px 18px;
    border-radius:14px;
    background:var(--vv-secondary);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:background var(--vv-transition);
}

.vivavita-affiliate-button:hover{
    background:var(--vv-primary-hover);
    color:#fff;
}

.vivavita-affiliate-button:focus-visible,
.vivavita-affiliate-title a:focus-visible{
    outline:3px solid #d6b98c;
    outline-offset:3px;
}

/* TABLET */

@media (max-width:1024px){
    .vivavita-affiliate-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* MOBILE */

@media (max-width:768px){
    .vivavita-affiliate-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .vivavita-affiliate-content{
        padding:18px;
    }

    .vivavita-affiliate-title{
        font-size:20px;
        font-weight:700;
    }

    .vivavita-affiliate-price{
        font-size:24px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion:reduce){

    .vivavita-affiliate-card{
        transition:none;
    }

    .vivavita-affiliate-card:hover{
        transform:none;
    }
}

.vivavita-affiliate-intro{
    margin:40px 0 30px;
}

.vivavita-affiliate-intro h2{
    margin-bottom:12px;
}

.vivavita-affiliate-intro p{
    max-width:800px;
    line-height:1.7;
    color:#555;
}