/**
 * Taxonomy Body Classes - Editor Styles
 * 
 * This CSS file is automatically loaded in the Lumise design editor.
 * You can write custom styles here that will be applied based on taxonomy classes.
 */

/* ========================================
   EXAMPLE STYLES - Customize as needed
   ======================================== */

/* T-shirt category styles */
body.product_cat-t-shirts .lumise-editor {
    background-color: #f0f8ff;
}

body.product_cat-t-shirts #lumise-main {
    border: 2px solid #4a90e2;
}

/* Clothing category styles */
body.product_cat-clothing .lumise-editor {
    background-color: #f9f9f9;
}

body.product_cat-clothing .lumise-editor .lumise-toolbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Summer tag styles */
body.product_tag-summer .lumise-editor {
    background: linear-gradient(45deg, #ffd89b 0%, #19547b 100%);
}

body.product_tag-summer .lumise-editor .lumise-stage {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Winter tag styles */
body.product_tag-winter .lumise-editor {
    background: linear-gradient(45deg, #e6f3ff 0%, #b3d9ff 100%);
}

/* Product type specific styles */
body.product-type-simple .lumise-editor {
    border-radius: 8px;
}

body.product-type-variable .lumise-editor {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Specific product ID styles */
body.product-id-123 .lumise-editor {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%23ddd" stroke-width="2"/></svg>');
    background-size: 50px 50px;
    background-repeat: repeat;
}

/* Category-specific toolbar colors */
body.product_cat-accessories .lumise-toolbar {
    background: #ff6b6b;
}

body.product_cat-electronics .lumise-toolbar {
    background: #4ecdc4;
}

body.product_cat-home .lumise-toolbar {
    background: #45b7d1;
}

/* Tag-specific editor themes */
body.product_tag-premium .lumise-editor {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

body.product_tag-premium .lumise-editor .lumise-toolbar {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

body.product_tag-sale .lumise-editor {
    background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Hide/show elements based on categories */
body.product_cat-t-shirts .lumise-toolbar .text-tools {
    display: block;
}

body.product_cat-mugs .lumise-toolbar .text-tools {
    display: none;
}

/* Custom color schemes for different categories */
body.product_cat-t-shirts .lumise-color-picker {
    --primary-color: #4a90e2;
    --secondary-color: #7bb3f0;
}

body.product_cat-mugs .lumise-color-picker {
    --primary-color: #e74c3c;
    --secondary-color: #f39c12;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 768px) {
    body.product_cat-t-shirts .lumise-editor {
        background-color: #e8f4fd;
    }
    
    body.product_tag-summer .lumise-editor {
        background: linear-gradient(45deg, #ffeaa7 0%, #fab1a0 100%);
    }
}

/* ========================================
   CUSTOM STYLES FOR YOUR STORE
   ======================================== */

/* Hide "Clear selected" option in color palette - first visible color becomes default */
.lumise-product-color > li:first-child[data-color=""] {
    display: none !important;
}

/* Add your custom styles here based on your specific taxonomy terms */

/* Example: Custom styles for specific product categories */
body.product_cat-custom-category .lumise-editor {
    /* Your custom styles here */
}

/* Example: Custom styles for specific product tags */
body.product_tag-custom-tag .lumise-editor {
    /* Your custom styles here */
}

/* Example: Custom styles for specific product IDs */
body.product-id-custom-product .lumise-editor {
    /* Your custom styles here */
}
#lumise-change-product, .lumisex-bug, #lumise-navigations ul[data-block="left"], .how-calculate,#lumise-count-colors, #lumise-notices{
    display:none !important;
}
#lumise-navigations{
    background: linear-gradient(45deg, #ffd700, #ffb07c, #de2b48) !important;
}
button[data-nav="internal"]{
    width:100% !important;
}
#lumise-update-cart-confirm a[data-func="new"]{
    display:none !important;
}
#lumise-update-cart-confirm li{
    border:0 !important;
}
#lumise-color-presets{
    display:none !important;
}
#lumise-top-tools ul.lumise-top-nav.right[data-mode="default"],.images-from-socials{
    display:none !important;
}
.lumise-product-price{
    display:none !important;
}
.product_cat-dvostruke-3d-maskice li[data-tab="cliparts"]{
display:none !important;
}
.product_cat-brusene-maskice li[data-tab="uploads"], .product_cat-brusene-maskice li[data-tool="fill"]{
    display:none !important;
}
.lumise-top-nav.right, .lumise-top-nav.left{
    display:none !important;
}
#lumise-text-tools, .lumise-top-nav.right[data-mode="standard"]{
    display:block !important;
}

/* Text sub-panels ("Uredi tekst" etc.): sit slightly higher on mobile than inline top:60px */
@media (max-width: 1024px) {
    #lumise-text-tools ul[data-view="sub"][data-pos="right"],
    #lumise-text-tools li[data-tool] > ul[data-view="sub"][data-pos="right"] {
        top: 52px !important;
        background: #ffffffdd !important;
    }
}

/* All top-tools sub-panels on narrow screens: match semi-transparent white */
@media (max-width: 736px) {
    #lumise-top-tools ul[data-view="sub"],
    #lumise-top-tools li[data-tool] > ul[data-view="sub"] {
        background: #ffffffdd !important;
    }
    #lumise-top-tools ul[data-view="sub"]:before,
    #lumise-top-tools li[data-tool] > ul[data-view="sub"]:before {
        border-bottom-color: #ffffffdd !important;
    }
    /* "Uredi tekst" etc.: narrower than full width, centered on viewport (not 125vw / left:0 hacks) */
    #lumise-text-tools li[data-tool="spacing"] > ul[data-view="sub"][data-pos="right"],
    #lumise-text-tools li[data-tool="text-effect"] > ul[data-view="sub"][data-pos="right"] {
        width: min(92vw, 400px) !important;
        max-width: 92vw !important;
        left: 50vw !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }
    #lumise-nav-file, li[data-tool="text-effect"], li[data-format="bold"], li[data-format="upper"], li[data-format="italic"], li[data-format="underline"], li[data-tool="un-group"], li[data-tool="arrange"], li[data-tool="position"], li[data-tool="transform"]{
        display:none !important;
    }
    ul.right[data-mode="standard"]{
        float:left !important;
    }
    #back-btn{
        display:flex !important;
        align-items:center !important;
        padding:0 !important;
    }
    #back-btn a{
        margin:0 !important;
    }
    a[data-view="logo"]{
        width:50px !important;
    }
    a[data-view="logo"] img{
        width:50px !important;
        object-fit: contain !important;
    }
}