/**

 * Presah Konfigurator - globální styly mimo detail produktu

 * Detail produktu je nyní pokryt v souboru product-page.css

 */



/* Speciální font pro vybrané texty a thank-you hlášku */

.playwrite-font,

.woocommerce-thankyou-order-received {

    font-family: "Playwrite HU", cursive !important;

    font-feature-settings: "liga" 1, "kern" 1;

    text-rendering: optimizeLegibility;

}



/* ========================================

   Barevné tečky v kategoriích produktů

======================================== */

.product-color-dots {

    display: flex;

    align-items: center;

    gap: 6px;

    margin: -2px 0 12px 0;

    flex-wrap: wrap;

}



.product-color-dot {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.3);

    cursor: pointer;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    position: relative;

    overflow: hidden;

    display: inline-block;

}



.product-color-dot:hover {

    transform: scale(1.2);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

}



.product-color-dot::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg,

        rgba(255,255,255,0.4) 0%,

        rgba(255,255,255,0) 30%,

        rgba(0,0,0,0.1) 70%,

        rgba(0,0,0,0.2) 100%);

    border-radius: 50%;

    pointer-events: none;

}



.product-color-dot[style*="#FFD700"],

.product-color-dot[style*="#ffd700"] {

    background: linear-gradient(135deg,

        #F4E294 0%,

        #E6CD5A 50%,

        #D4B945 100%) !important;

}



.product-color-dot[style*="#C0C0C0"],

.product-color-dot[style*="#c0c0c0"] {

    background: linear-gradient(135deg,

        #E8E8E8 0%,

        #D0D0D0 50%,

        #B8B8B8 100%) !important;

}



.product-color-dot[style*="#B87333"],

.product-color-dot[style*="#b87333"] {

    background: linear-gradient(135deg,

        #D4A574 0%,

        #B8956A 50%,

        #A67C52 100%) !important;

}



.product-color-dot[style*="#E8B4B8"],

.product-color-dot[style*="#e8b4b8"] {

    background: linear-gradient(135deg,

        #F2C6C7 0%,

        #E3B5B6 50%,

        #D4A5A5 100%) !important;

}



.product-color-dot[style*="#E5E4E2"],

.product-color-dot[style*="#e5e4e2"] {

    background: linear-gradient(135deg,

        #F5F5F3 0%,

        #E5E4E2 50%,

        #D8D7D5 100%) !important;

}



.product-color-dot[style*="#CD7F32"],

.product-color-dot[style*="#cd7f32"] {

    background: linear-gradient(135deg,

        #D4A574 0%,

        #C49163 50%,

        #B5733A 100%) !important;

}



.product-color-dot[style*="#878681"],

.product-color-dot[style*="#878681"] {

    background: linear-gradient(135deg,

        #A8A8A6 0%,

        #959591 50%,

        #767672 100%) !important;

}



.product-color-dot[style*="#FFDF00"],

.product-color-dot[style*="#ffdf00"] {

    background: linear-gradient(135deg,

        #FFF099 0%,

        #F0E04C 50%,

        #E6C700 100%) !important;

}



.product-color-dot[style*="#FFFFCC"],

.product-color-dot[style*="#ffffcc"] {

    background: linear-gradient(135deg,

        #FFFEF0 0%,

        #F4F3DD 50%,

        #E8E8CC 100%) !important;

}



.product-color-dot[style*="#000000"],

.product-color-dot[style*="#000000"] {

    background: linear-gradient(135deg,

        #3A3A3A 0%,

        #2A2A2A 50%,

        #1A1A1A 100%) !important;

}



@media (max-width: 768px) {

    .product-color-dots {

        gap: 4px;

        margin: -2px 0 10px 0;

    }



    .product-color-dot {

        width: 20px;

        height: 20px;

    }

}