/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 09 2026 | 02:59:21 */
/* ========================================================================
FILNAMN: [CSS] – Butik: Produkt-Badges
BESKRIVNING: 
Design för etiketter/badges som visas på produktkorten i butiken.
UX-OPTIMERING: Nu "oklickbara" (pointer-events: none) så att de inte stör
när kunden vill klicka på produkten.
========================================================================
*/

/* --- 1. GRUNDDESIGN (GEMENSAM STIL) --- */
.butik-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important; 
    
    /* Typografi */
    font-family: "Proxima Nova", sans-serif !important; 
    font-size: 9px !important; 
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    
    /* Form & Ram */
    padding: 4px 9px !important; 
    border-radius: 50px !important;
    border: 1px solid transparent !important; 
    
    /* Djup */
    box-shadow: 0 2px 4px rgba(0,0,0,0.06) !important;
    
    /* Layout-säkerhet */
    white-space: nowrap !important;
    line-height: 1 !important;
    z-index: 10 !important;

    /* --- NYTT: GÖR DEM OKLICKBARA (UX) --- */
    /* Detta gör att klick går rakt igenom till produkten bakom */
    pointer-events: none !important; 
    
    /* Detta gör att man inte kan markera texten */
    user-select: none !important;
    -webkit-user-select: none !important; /* För Safari */
}

/* --- 2. VARIATIONER (FÄRGER & IKONER) --- */

/* AIP (Isblå med mörkare blå ram) */
.shop-aip {
    background-color: #F0F5F9 !important; 
    color: #587B99 !important;
    border-color: #D6E4ED !important; 
}

.shop-aip::before {
    content: "\2713"; /* Checkmark */
    font-size: 10px !important; 
    font-weight: 900 !important;
    margin-right: 1px !important;
    position: relative;
    top: -0.5px;
}

/* PALEO (Beige med mörkare beige ram) */
.shop-paleo {
    background-color: #F8F5F2 !important; 
    color: #8C857A !important; 
    border-color: #E8E0D5 !important; 
}

.shop-paleo::before {
    content: "\25CF"; /* Cirkel/Punkt */
    font-size: 8px !important; 
    margin-right: 1px !important;
    position: relative;
    top: -0.5px;
}

/* REKOMMENDERAR (Ljusgul med guldram) */
.shop-reko {
    background-color: #FFFDE7 !important; 
    color: #A67B00 !important;
    border-color: #F5E8B7 !important; 
}

.shop-reko::before {
    content: "\2605"; /* Stjärna */
    font-size: 10px !important;
    color: #FFC107 !important; 
    margin-right: 1px !important;
    position: relative;
    top: -0.5px;
}