/**
 * SugarSphere Custom Styles (assets/css/custom.css)
 *
 * PURPOSE: Define global CSS Variables, 'Glossy' aesthetic, and modern
 * Mobile-First responsive overrides for WordPress blocks.
 *
 * PRIORITY: This file is loaded LAST via functions.php, giving it the
 * highest specificity over theme.json and parent theme styles.
 */

/* ==========================================================================
   1. GLOBAL CSS VARIABLES (MOBILE-FIRST DEFAULTS)
   ========================================================================== */
:root {
    /* Theme.json Color Palette Variables - InBloom Bakery Colorit */
    --ss-color-primary: #A06767; /* Dark Pink */
    --ss-color-secondary: #F5E3DF; /* Pink */
    --ss-color-background: #ffffff; /* White */
    --ss-color-foreground: #4E3C2F; /* Dark Brown */
    --ss-color-accent: #F7F0EB; /* Cream */
    --ss-color-light: #FFFFFF; /* Pure White */
    --ss-color-pink-light: #F9EEEC; /* Light Pink */
    --ss-color-pink-hover: #EFD2CD; /* Pink Hover */
    --ss-color-silver: #FAFAFA; /* Silver Mist */

    /* Gradient Variants - Lighter & Darker shades for cards */
    --ss-color-primary-dark: #8B5252; /* Darker Pink */
    --ss-color-primary-light: #B88080; /* Lighter Pink */
    --ss-color-secondary-dark: #EFD2CD; /* Darker Pink (Pink Hover) */
    --ss-color-secondary-light: #F9EEEC; /* Lighter Pink (Light Pink) */
    --ss-color-accent-dark: #F0E4D8; /* Darker Cream */
    --ss-color-accent-light: #FDFBF9; /* Lighter Cream */
    --ss-color-background-dark: #FAFAFA; /* Darker White (Silver Mist) */
    --ss-color-background-light: #FFFFFF; /* Lighter White */
    --ss-color-background-rose: #F9EEEC; /* Rose variant (Light Pink) */

    /* Legacy/Alias Variables */
    --ss-color-text: var(--ss-color-foreground);
    --ss-color-link: var(--ss-color-primary);

    /* Glossy/Depth Variables */
    --ss-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.08); /* Subtle shadow for mobile */
    --ss-shadow-glossy: 0 4px 8px rgba(160, 103, 103, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.3) inset; /* Glossy, colorful inner/outer shadow */
    --ss-shadow-glossy-hover: 0 8px 16px rgba(160, 103, 103, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.6) inset; /* Enhanced glossy on hover */
    --ss-border-radius: 8px; /* Slightly tighter radius for mobile */

    /* Variables for Recipe Card Grid */
    --ss-card-title-line-height: 1.4;
    --ss-card-title-lines: 3;
}

/* ==========================================================================
   2. BASE STYLES & GLOSSY AESTHETIC
   ========================================================================== */

/* Apply base background color and text color */
body {
    color: var(--ss-color-text);
    background-color: var(--ss-color-background);
}

/* ==========================================================================
   2.5. GLOBALNI STILOVI ZA SVE SLIKE - ROUNDED CORNERS
   ========================================================================== */

/* Sve slike na sajtu imaju zaobljene ivice kao na karticama */
img,
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-media-text img,
.wp-block-cover img {
    border-radius: var(--ss-border-radius) !important;
}

/**
 * MARBO TOTAL ROUNDED - Potpuno okrugla slika (clean, bez senke)
 *
 * FUNKCIONALNOST:
 * - Potpuno okrugla slika (border-radius: 50%)
 * - Bez senke i bordera - čist, minimalistički stil
 * - Smanjena na 85% veličine
 * - Idealna za profile slike, autore, owner slike
 *
 * UPOTREBA:
 * <img class="marbo-total-rounded" src="owner.jpg" alt="Owner" />
 */
.marbo-total-rounded,
img.marbo-total-rounded,
.marbo-total-rounded img {
    border-radius: 50% !important; /* Potpuno okrugla */

    /* Bez senke i bordera */
    box-shadow: none !important;
    border: none !important;

    /* Veličina - 85% originalne */
    width: 85% !important;
    height: auto !important;
    max-width: 85% !important;

    /* Razmak ispod slike - minimalan */
    margin-bottom: 0.5rem !important;

    /* Sprečava distorziju */
    object-fit: cover;
    aspect-ratio: 1 / 1; /* Kvadratna slika */
}

/* Simple Button Styles - No Gradients */
.wp-block-button__link {
    border-radius: 8px !important;
    background-color: var(--ss-color-primary) !important; /* Dark Pink */
    color: var(--ss-color-light) !important; /* White Text */
    padding: 0.6rem 1.2rem !important;
    font-weight: 400 !important; /* Regular - nije bold */
    border: none !important;

    /* Simple shadow */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;

    transition: all 0.3s ease !important;
}

.wp-block-button__link:hover {
    background-color: var(--ss-color-pink-hover) !important; /* Pink Hover #EFD2CD - SVETLIJA */
    color: var(--ss-color-primary) !important; /* Dark Pink text */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(160, 103, 103, 0.3) !important;
}

/* ==========================================================================
   3. RECIPE CARD STYLES & HOVER EFFECT (ss-recipe-card)
   ========================================================================== */

/* The card box itself */
.ss-recipe-card {
    overflow: hidden; 
    box-shadow: var(--ss-shadow-light);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background-color: var(--ss-color-background);
    border-radius: var(--ss-border-radius);
    display: flex; /* Flexbox for full height stretching if needed */
    flex-direction: column;
}

/* Glossy Hover Effect */
.ss-recipe-card:hover {
    box-shadow: var(--ss-shadow-glossy);
    transform: translateY(-4px); 
}

/* Title Box Styling (Ensures uniform height for 3 lines max) */
.ss-card-title-box {
    /* Calculate min-height: (3 lines * line-height * font-size) + 2 * padding. 
       We must use calc() with preset variable names: */
    min-height: calc(var(--ss-card-title-lines) * var(--ss-card-title-line-height) * 1em + 2 * var(--wp--preset--spacing--small)); 
    display: flex; 
    align-items: center; 
}

/* Title Line Limiting (Limit title to 3 lines) */
.ss-card-title {
    display: -webkit-box;
    -webkit-line-clamp: var(--ss-card-title-lines); 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   4. IMAGE/TEXT SPLIT STYLES (ss-glossy-image)
   ========================================================================== */
.ss-glossy-image {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border-radius: var(--ss-border-radius);
    overflow: hidden;
    transform: rotate(1deg); /* Subtle tilt for a dynamic feel */
    transition: transform 0.3s ease;
}
.ss-glossy-image:hover {
    transform: rotate(0deg) scale(1.02);
}
========================================================================== */

/* 4.1. KONTROLA IZGLEDA KARTICE I HOVER EFEKAT */

.marbo-card-recipes {
    /* Opšti stil kartice */
    overflow: hidden; /* Bitno za border radius */
    box-shadow: var(--ss-shadow-light);
    background-color: var(--ss-color-background); /* Pozadina */
    border-radius: var(--ss-border-radius);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column; /* Sadržaj se slaže vertikalno */
    height: 100%; /* Da bi se sve kartice u mreži rastegle na istu visinu */
    text-decoration: none; /* Uklanjanje podvlačenja ako je kartica linkovana */
}

/* Glossy Hover Effect - Primeni na celu karticu */
.marbo-card-recipes:hover {
    box-shadow: var(--ss-shadow-glossy);
    transform: translateY(-4px); /* Efekat izdizanja */
}

/* 4.2. STILIZOVANJE UNUTRAŠNJIH ELEMENATA */

/* Slika (Feature Image Block) - Osigurava da se border radius nasleđuje na vrhu */
.marbo-card-recipes .wp-block-post-featured-image img {
    border-radius: var(--ss-border-radius) var(--ss-border-radius) 0 0;
    width: 100%;
    height: auto;
    display: block;
}

/* Kontejner za naslov (Post Title Block) - Smanjen razmak između slike i naslova */
.marbo-card-recipes .wp-block-post-title {
    padding-top: 0.5rem !important; /* Smanjen top padding (~pola reda) */
    padding-right: var(--wp--preset--spacing--small);
    padding-bottom: var(--wp--preset--spacing--small);
    padding-left: var(--wp--preset--spacing--small);
    flex-grow: 1; /* Omogućava da se naslovni box rastegne u visinu */
    display: flex;
    align-items: center; /* Vertikalno centriranje naslova unutar boxa (ako ne popunjava celu visinu) */
}

/* OGRANIČAVANJE VISINE NASLOVA (3 REDA) */
.marbo-card-recipes .wp-block-post-title a {
    /* Korišćenje CSS line-clamp-a za ograničenje na 3 reda */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4; /* Mora biti definisano za line-clamp */
    font-size: var(--wp--preset--font-size--medium);
}

/* ==========================================================================
   4d. MARBO CARD RECIPES ACCENT - LEMON ZING STYLE
   ========================================================================== */

/*
 * Accent color variant (#FEE68C - Lemon Zing) sa primary color naslovima
 */

.marbo-card-recipes-accent {
    overflow: hidden;
    background: linear-gradient(135deg, var(--ss-color-light) 0%, var(--ss-color-background) 100%);
    border-radius: 12px;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.07),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease;
    border: 1px solid rgba(254, 230, 140, 0.2); /* Accent border */
    cursor: pointer;
    position: relative;
}

.marbo-card-recipes-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.marbo-card-recipes-accent:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 8px 16px rgba(160, 103, 103, 0.3), /* Primary (Dark Pink) glow */
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(160, 103, 103, 0.25);
    background: linear-gradient(135deg, var(--ss-color-light) 0%, var(--ss-color-background) 100%);
    border-color: rgba(160, 103, 103, 0.4);
}

.marbo-card-recipes-accent:hover::before {
    opacity: 0.8;
}

.marbo-card-recipes-accent .wp-block-post-featured-image {
    position: relative;
    overflow: hidden;
    margin: 0;
    z-index: 0;
}

.marbo-card-recipes-accent .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px 12px 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.marbo-card-recipes-accent:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
}

.marbo-card-recipes-accent .wp-block-post-featured-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(160, 103, 103, 0.15) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.marbo-card-recipes-accent:hover .wp-block-post-featured-image::after {
    opacity: 1;
}

.marbo-card-recipes-accent .wp-block-post-title {
    padding: 1rem 1.25rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin: 0;
    position: relative;
    z-index: 2;
}

.marbo-card-recipes-accent .wp-block-post-title h2 {
    margin: 0;
    padding: 0;
    width: 100%;
}

.marbo-card-recipes-accent .wp-block-post-title a {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ss-color-foreground);
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(3 * 1.2 * 1.375rem);
    transition: color 0.3s ease;
}

.marbo-card-recipes-accent:hover .wp-block-post-title a {
    color: var(--ss-color-primary) !important; /* Coral */
    text-decoration: none !important;
}

.marbo-card-recipes-accent:focus-within {
    outline: 2px solid var(--ss-color-primary);
    outline-offset: 4px;
}

/* ==========================================================================
   4f. MARBO CARD RECIPES BACKGROUND - CREAMY STYLE
   ========================================================================== */

/*
 * Background color variant (#FFFBF7 - Creamy) sa primary color naslovima i accent senkom
 */

.marbo-card-recipes-background {
    overflow: hidden;
    background: linear-gradient(135deg, var(--ss-color-light) 0%, var(--ss-color-background) 100%);
    border-radius: 12px;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.07),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease;
    border: 1px solid rgba(255, 251, 247, 0.3); /* Background border */
    cursor: pointer;
    position: relative;
}

.marbo-card-recipes-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.marbo-card-recipes-background:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 8px 16px rgba(247, 240, 235, 0.4), /* Cream glow */
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(247, 240, 235, 0.3);
    background: linear-gradient(135deg, var(--ss-color-light) 0%, var(--ss-color-background) 100%);
    border-color: rgba(247, 240, 235, 0.5);
}

.marbo-card-recipes-background:hover::before {
    opacity: 0.8;
}

.marbo-card-recipes-background .wp-block-post-featured-image {
    position: relative;
    overflow: hidden;
    margin: 0;
    z-index: 0;
}

.marbo-card-recipes-background .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px 12px 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.marbo-card-recipes-background:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
}

.marbo-card-recipes-background .wp-block-post-featured-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(247, 240, 235, 0.2) 100%); /* Cream overlay */
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.marbo-card-recipes-background:hover .wp-block-post-featured-image::after {
    opacity: 1;
}

.marbo-card-recipes-background .wp-block-post-title {
    padding: 1rem 1.25rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin: 0;
    position: relative;
    z-index: 2;
}

.marbo-card-recipes-background .wp-block-post-title h2 {
    margin: 0;
    padding: 0;
    width: 100%;
}

.marbo-card-recipes-background .wp-block-post-title a {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ss-color-foreground);
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(3 * 1.2 * 1.375rem);
    transition: color 0.3s ease;
}

.marbo-card-recipes-background:hover .wp-block-post-title a {
    color: var(--ss-color-primary) !important; /* Coral */
    text-decoration: none !important;
}

.marbo-card-recipes-background:focus-within {
    outline: 2px solid var(--ss-color-primary);
    outline-offset: 4px;
}

/* ==========================================================================
   4i. MARBO CARD RECIPES BG-SECONDARY - CREAMY BACKGROUND STYLE
   ========================================================================== */

/*
 * Colored background variant sa Background bojom (#FFFBF7 - Creamy)
 * Tamni naslov + Primary (Coral) hover + senka
 */

.marbo-card-recipes-bg-secondary {
    overflow: hidden;
    background: linear-gradient(135deg, var(--ss-color-background-dark) 0%, var(--ss-color-background) 100%);
    border-radius: 12px;
    box-shadow:
        0 4px 6px rgba(250, 250, 250, 0.4), /* Silver Mist */
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
}

.marbo-card-recipes-bg-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.marbo-card-recipes-bg-secondary:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 8px 16px rgba(160, 103, 103, 0.4), /* Primary (Dark Pink) glow */
        0 4px 8px rgba(250, 250, 250, 0.5), /* Silver Mist */
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(160, 103, 103, 0.3);
    background: linear-gradient(135deg, var(--ss-color-background-light) 0%, var(--ss-color-background) 100%);
    border-color: rgba(160, 103, 103, 0.4);
}

.marbo-card-recipes-bg-secondary:hover::before {
    opacity: 0.9;
}

.marbo-card-recipes-bg-secondary .wp-block-post-featured-image {
    position: relative;
    overflow: hidden;
    margin: 0;
    z-index: 0;
}

.marbo-card-recipes-bg-secondary .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px 12px 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.marbo-card-recipes-bg-secondary:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
}

.marbo-card-recipes-bg-secondary .wp-block-post-featured-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.marbo-card-recipes-bg-secondary:hover .wp-block-post-featured-image::after {
    opacity: 1;
}

.marbo-card-recipes-bg-secondary .wp-block-post-title {
    padding: 1rem 1.25rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin: 0;
    position: relative;
    z-index: 2;
}

.marbo-card-recipes-bg-secondary .wp-block-post-title h2 {
    margin: 0;
    padding: 0;
    width: 100%;
}

.marbo-card-recipes-bg-secondary .wp-block-post-title a {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ss-color-foreground); /* Tamni tekst */
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(3 * 1.2 * 1.375rem);
    transition: color 0.3s ease;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); /* Bolja čitljivost */
}

.marbo-card-recipes-bg-secondary:hover .wp-block-post-title a {
    color: var(--ss-color-primary) !important; /* Coral */
    text-decoration: none !important;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.4);
}

.marbo-card-recipes-bg-secondary:focus-within {
    outline: 2px solid var(--ss-color-primary);
    outline-offset: 4px;
}

/* ==========================================================================
   4j. MARBO CARD RECIPES BG-SILVER - SILVER MIST BACKGROUND STYLE
   ========================================================================== */

/*
 * Silver Mist background sa Vanilla Cream hover efektom
 */

.marbo-card-recipes-bg-silver {
    overflow: hidden;
    background: linear-gradient(135deg, var(--ss-color-secondary) 0%, var(--ss-color-secondary-dark) 100%);
    border-radius: 12px;
    box-shadow:
        0 4px 6px rgba(250, 250, 250, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
}

.marbo-card-recipes-bg-silver::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.marbo-card-recipes-bg-silver:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 8px 16px rgba(160, 103, 103, 0.4), /* Primary (Dark Pink) glow */
        0 4px 8px rgba(250, 250, 250, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(160, 103, 103, 0.3);
    background: linear-gradient(135deg, var(--ss-color-secondary-light) 0%, var(--ss-color-secondary) 100%);
    border-color: rgba(160, 103, 103, 0.4);
}

.marbo-card-recipes-bg-silver:hover::before {
    opacity: 0.9;
}

.marbo-card-recipes-bg-silver .wp-block-post-featured-image {
    position: relative;
    overflow: hidden;
    margin: 0;
    z-index: 0;
}

.marbo-card-recipes-bg-silver .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px 12px 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.marbo-card-recipes-bg-silver:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
}

.marbo-card-recipes-bg-silver .wp-block-post-featured-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.marbo-card-recipes-bg-silver:hover .wp-block-post-featured-image::after {
    opacity: 1;
}

.marbo-card-recipes-bg-silver .wp-block-post-title {
    padding: 1rem 1.25rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin: 0;
    position: relative;
    z-index: 2;
}

.marbo-card-recipes-bg-silver .wp-block-post-title h2 {
    margin: 0;
    padding: 0;
    width: 100%;
}

.marbo-card-recipes-bg-silver .wp-block-post-title a {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ss-color-foreground); /* Tamni tekst */
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(3 * 1.2 * 1.375rem);
    transition: color 0.3s ease;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); /* Bolja čitljivost */
}

.marbo-card-recipes-bg-silver:hover .wp-block-post-title a {
    color: var(--ss-color-primary) !important; /* Coral */
    text-decoration: none !important;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.4);
}

.marbo-card-recipes-bg-silver:focus-within {
    outline: 2px solid var(--ss-color-primary);
    outline-offset: 4px;
}

/* ==========================================================================
   4k. MARBO CARD RECIPES BG-PINK - BLUSH ROSE BACKGROUND STYLE
   ========================================================================== */

/*
 * Blush Rose background sa Vanilla Cream hover efektom
 */

.marbo-card-recipes-bg-pink {
    overflow: hidden;
    background: linear-gradient(135deg, var(--ss-color-pink-light) 0%, var(--ss-color-background-rose) 100%);
    border-radius: 12px;
    box-shadow:
        0 4px 6px rgba(249, 238, 236, 0.4), /* Light Pink */
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
}

.marbo-card-recipes-bg-pink::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.marbo-card-recipes-bg-pink:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 8px 16px rgba(160, 103, 103, 0.4), /* Primary (Dark Pink) glow */
        0 4px 8px rgba(249, 238, 236, 0.5), /* Light Pink */
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(160, 103, 103, 0.3);
    background: linear-gradient(135deg, var(--ss-color-light) 0%, var(--ss-color-pink-light) 100%);
    border-color: rgba(160, 103, 103, 0.4);
}

.marbo-card-recipes-bg-pink:hover::before {
    opacity: 0.9;
}

.marbo-card-recipes-bg-pink .wp-block-post-featured-image {
    position: relative;
    overflow: hidden;
    margin: 0;
    z-index: 0;
}

.marbo-card-recipes-bg-pink .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px 12px 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.marbo-card-recipes-bg-pink:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
}

.marbo-card-recipes-bg-pink .wp-block-post-featured-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.marbo-card-recipes-bg-pink:hover .wp-block-post-featured-image::after {
    opacity: 1;
}

.marbo-card-recipes-bg-pink .wp-block-post-title {
    padding: 1rem 1.25rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin: 0;
    position: relative;
    z-index: 2;
}

.marbo-card-recipes-bg-pink .wp-block-post-title h2 {
    margin: 0;
    padding: 0;
    width: 100%;
}

.marbo-card-recipes-bg-pink .wp-block-post-title a {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ss-color-foreground); /* Tamni tekst */
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(3 * 1.2 * 1.375rem);
    transition: color 0.3s ease;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); /* Bolja čitljivost */
}

.marbo-card-recipes-bg-pink:hover .wp-block-post-title a {
    color: var(--ss-color-primary) !important; /* Coral */
    text-decoration: none !important;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.4);
}

.marbo-card-recipes-bg-pink:focus-within {
    outline: 2px solid var(--ss-color-primary);
    outline-offset: 4px;
}

/* ==========================================================================
   4l. MARBO-SIX - 6 COLUMN GRID FONT SIZE ADJUSTMENT
   ========================================================================== */

/*
 * Utility klasa za smanjenje fonta u grid layoutu sa 6 kolona
 * Smanjuje font-size za 20% (80% od originalne veličine)
 */

.marbo-six .wp-block-post-title a {
    font-size: clamp(0.9rem, 2vw, 1.1rem) !important; /* 80% od clamp(1.125rem, 2.5vw, 1.375rem) */
    min-height: calc(3 * 1.2 * 1.1rem) !important;
}

/* ==========================================================================
   4m. MARBO HEADING STYLES - MODERN GRADIENT HEADINGS
   ========================================================================== */

/*
 * MARBO-HM-HEADING-PRIMARY - Coral gradient heading
 * Koristi primarnu Coral boju (#A06767) sa gradijentom
 */

.marbo-hm-heading-primary {
    position: relative;
    text-align: center;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    margin-bottom: 2rem !important;
    padding-bottom: 1.5rem;

    /* Gradient tekst efekat sa Coral bojama */
    background: linear-gradient(135deg, #A06767 0%, #8B5252 50%, #A06767 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Color fallback za pregledače koji ne podržavaju background-clip */
    color: var(--ss-color-primary);

    /* Suptilni glow efekat */
    filter: drop-shadow(0 2px 8px rgba(160, 103, 103, 0.25));
}

/* Dekorativna linija ispod naslova - PRIMARY (Coral) */
.marbo-hm-heading-primary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        #A06767 20%,
        #8B5252 50%,
        #A06767 80%,
        transparent 100%);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(160, 103, 103, 0.4);
}

/*
 * MARBO HEADING ICONS - Heading sa ikonicama
 * Dodaje ikonicu ispred h2 naslova (transparentno, bez pozadine)
 *
 * Dostupne klase:
 * - marbo-hm-heading-cake 🍰 (torta)
 * - marbo-hm-heading-birthday 🎂 (rođendanska torta)
 * - marbo-hm-heading-cupcake 🧁 (muffin)
 * - marbo-hm-heading-cookie 🍪 (kolačić)
 * - marbo-hm-heading-donut 🍩 (krofna)
 * - marbo-hm-heading-pie 🥧 (pita)
 * - marbo-hm-heading-custard 🍮 (puding)
 * - marbo-hm-heading-subscribe ✉️ (subscribe/newsletter)
 */

/* Bazni stil za sve ikonice */
.marbo-hm-heading-cake::before,
.marbo-hm-heading-birthday::before,
.marbo-hm-heading-cupcake::before,
.marbo-hm-heading-cookie::before,
.marbo-hm-heading-donut::before,
.marbo-hm-heading-pie::before,
.marbo-hm-heading-custard::before,
.marbo-hm-heading-subscribe::before {
    font-size: 0.778em; /* Smanjeno za još 10% (0.864 * 0.9) */
    margin-right: 0.5rem;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

/* Bazni stil sa pozadinom za sve klase sa ikonicama */
.marbo-hm-heading-cake,
.marbo-hm-heading-birthday,
.marbo-hm-heading-cupcake,
.marbo-hm-heading-cookie,
.marbo-hm-heading-donut,
.marbo-hm-heading-pie,
.marbo-hm-heading-custard,
.marbo-hm-heading-subscribe {
    padding: 0.5rem 1.21rem 0.5rem 1rem; /* gore, desno (+20%), dole, levo */
    border-radius: 8px;
    display: inline-block; /* Pozadina samo oko teksta */
}

/* Specifične pozadine za svaki stil - sve koriste secondary pink boju */
.marbo-hm-heading-cake {
    background-color: var(--ss-color-secondary) !important; /* Pink */
}

.marbo-hm-heading-birthday {
    background-color: var(--ss-color-secondary) !important; /* Pink */
}

.marbo-hm-heading-cupcake {
    background-color: var(--ss-color-secondary) !important; /* Pink */
}

.marbo-hm-heading-cookie {
    background-color: var(--ss-color-secondary) !important; /* Pink */
}

.marbo-hm-heading-donut {
    background-color: var(--ss-color-secondary) !important; /* Pink */
}

.marbo-hm-heading-pie {
    background-color: var(--ss-color-secondary) !important; /* Pink */
}

.marbo-hm-heading-custard {
    background-color: var(--ss-color-secondary) !important; /* Pink */
}

.marbo-hm-heading-subscribe {
    background-color: var(--ss-color-secondary) !important; /* Pink */
}

/* Specifične ikonice - Emoji */
.marbo-hm-heading-cake::before {
    content: '🍰';
}

.marbo-hm-heading-birthday::before {
    content: '🎂';
}

.marbo-hm-heading-cupcake::before {
    content: '🧁';
}

.marbo-hm-heading-cookie::before {
    content: '🍪';
}

.marbo-hm-heading-donut::before {
    content: '🍩';
}

.marbo-hm-heading-pie::before {
    content: '🥧';
}

.marbo-hm-heading-custard::before {
    content: '🍮';
}

.marbo-hm-heading-subscribe::before {
    content: '✉️';
}

/* Mobile responsive */

/* Mobile responsive */

/* ==========================================================================
   5. POST TITLE STYLING (Cards & Archive Pages)
   ========================================================================== */

/*
 * NAPOMENA: Stilovi za .wp-block-post-title su uklonjeni kako bi WordPress
 * mogao da kontroliše font-size kroz theme.json i editor settings.
 *
 * H1 (core/post-title) na single post stranicama sada može biti podešen
 * kroz WordPress editor (npr. XXL veličina).
 *
 * Stilovi ispod su specifični samo za post title linkove u karticama.
 */

/* ==========================================================================
   6. LAYOUT WIDTH FIXES (Override Parent Theme)
   ========================================================================== */

/*
 * LAYOUT WIDTH SETTINGS
 * - WordPress upravlja layoutom kroz theme.json (800px content, 1200px wide)
 * - Full-width elementi (alignfull) koriste punu širinu ekrana
 * - Header je fixed i koristi punu širinu
 */

/* Alignfull blokovi - puna širina ekrana, od ivice do ivice */
.alignfull {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Cover blok - omogući padding iz control panela, samo alignfull ide edge-to-edge */
.wp-block-cover.alignfull {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   6. HEADER & NAVIGATION RESPONSIVE LAYOUT
   ========================================================================== */

/**
 * NAPOMENA: Order stilovi uklonjeni jer nova struktura headera ima:
 * - Levo: Logo
 * - Desno gornji red: Social ikonice + Search box
 * - Desno donji red: Menu
 * WordPress editor kontroliše redosled elemenata.
 */

/* ==========================================================================
   6.5. MODERN INLINE SEARCH BOX - HEADER SEARCH
   ========================================================================== */

/**
 * Moderan inline search dizajn (dugme unutar input polja)
 * - Dugme pozicionirano unutar input polja (desno)
 * - Light Pink pozadina bez ivice
 * - Dark Pink dugme sa hover efektom
 * - Placeholder: "Search recipes..."
 * - Sve boje koriste CSS promenljive
 */

/* Search container - relative positioning za inline button */
.marbo-header .wp-block-search,
.marbo-header .wp-block-search *:not(.wp-block-search__button) {
    /* UKLANJANJE IVICA SA CONTAINERA I SVIH CHILD ELEMENATA (osim dugmeta) */
    border: none !important;
    outline: none !important;
}

.marbo-header .wp-block-search {
    position: relative;
    display: inline-block;
    box-shadow: none !important;
}

/* Search input field - prostor za dugme desno - ŠIRINA PODEŠENA */
.marbo-header .wp-block-search__input {
    padding: 0.5rem 70px 0.5rem 0.65rem !important; /* Još smanjeno desno za maksimalan prostor tekstu */
    font-size: 0.875rem !important; /* 14px - ORIGINALNA VISINA */
    line-height: 1.4 !important;

    /* Boje */
    background-color: var(--ss-color-pink-light) !important; /* Light Pink */
    color: var(--ss-color-foreground) !important; /* Dark Brown */

    /* UKLANJANJE SVIH IVICA */
    border: 0 !important; /* Bez border-a */
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    border-radius: 8px !important;

    /* Shadow umesto border-a */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;

    /* Transitions */
    transition: all 0.3s ease !important;

    /* Širina - 187px * 1.05 */
    width: 196px; /* Povećano za dodatnih 5% */
    max-width: 196px;

    /* Text overflow za hint */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Input focus state */
.marbo-header .wp-block-search__input:focus {
    /* UKLANJANJE SVIH IVICA NA FOCUS */
    outline: none !important;
    outline-width: 0 !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    /* Boje */
    background-color: var(--ss-color-light) !important; /* White */
    box-shadow: 0 2px 8px rgba(160, 103, 103, 0.15) !important; /* Pink glow */
}

/* Input placeholder - "Search recipes..." */
.marbo-header .wp-block-search__input::placeholder {
    color: var(--ss-color-primary) !important; /* Dark Pink */
    opacity: 0.5;
    font-style: italic;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Search button - INSIDE input field (absolute position) - ŠIRINA PODEŠENA */
.marbo-header .wp-block-search__button {
    position: absolute !important;
    right: 4px !important; /* 4px od desne ivice inputa */
    top: 50% !important;
    transform: translateY(-50%) !important;

    padding: 0.35rem 0.87rem !important; /* Povećano za +5% */
    font-size: 0.8125rem !important; /* 13px - ORIGINALNA VISINA */
    font-weight: 600 !important;

    /* Boje */
    background-color: var(--ss-color-primary) !important; /* Dark Pink */
    color: var(--ss-color-light) !important; /* White */
    border: none !important;
    border-radius: 6px !important; /* Malo manji radius od inputa */

    /* Shadow */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;

    /* Transitions */
    transition: all 0.3s ease !important;
    cursor: pointer;
}

/* Button hover state */
.marbo-header .wp-block-search__button:hover {
    background-color: var(--ss-color-primary-dark) !important; /* Darker Pink */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Button active state */
.marbo-header .wp-block-search__button:active {
    transform: translateY(-50%) scale(0.98) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile responsive - search ŠIRINA PODEŠENA */

/* ==========================================================================
   7. RESPONSIVE MEDIA QUERIES (Mobile-First Approach)
   ========================================================================== */

/* --- MOBILE COLUMN OVERRIDE (MAX-width: 804px) --- */
/* Forces Columns block to 2 columns on mobile, overriding the default 1 column. */

/* --- SMALL MOBILE & CATEGORY ROW (MAX-width: 804px) --- */

/* --- DESKTOP (Min-width: 805px) --- */
/* Changes applied to screens 805px and wider. */

/* --- WIDE DESKTOP Breakpoint REMOVED --- */
/* Sada imamo samo dva breakpointa: Mobile (<805px) i Desktop (805px+) */
/* Fluid interface bez dodatnog breakpointa na 1200px */

/* ==========================================================================
   7. SMART STICKY HEADER - MARBO HEADER
   ========================================================================== */

/**
 * Moderan sticky header sa glossy efektom i pametnim scroll behavior-om
 *
 * FUNKCIONALNOST:
 * - Fixed position na vrhu stranice (z-index: 9999)
 * - Primary boja (Coral #A06767) sa glossy overlay efektom
 * - Fiksirana visina: 100px (desktop) / 80px (mobile)
 * - Pametno skrivanje: nestaje na scroll down, pojavljuje se na scroll up
 * - Smooth transitions (0.3s cubic-bezier)
 * - Backdrop blur za moderan "frosted glass" efekat
 *
 * JAVASCRIPT DEPENDENCY:
 * - Requires custom.js sa scroll detection logic
 * - Dodaje klase: .header-hidden, .header-visible, .header-scrolled
 */

.marbo-header {
    /* === POSITIONING === */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999; /* Iznad svih drugih elemenata */

    /* === DIMENSIONS === */
    height: 130px; /* Povećano za viši logo */
    max-height: 130px;

    /* === LAYOUT - VERTIKALNO CENTRIRANJE === */
    display: flex;
    align-items: center; /* Centrira sadržaj vertikalno */

    /* === SOLID BACKGROUND (NON-TRANSPARENT) === */
    /* Solid bela pozadina za logo sa belom pozadinom */
    background: var(--ss-color-background) !important; /* Solid white */

    /* === GLASSMORPHISM / FROSTED GLASS EFEKAT === */
    /* ZAKOMENTARISANO - Za transparentni logo u budućnosti */
    /* LIGHT BOJA - Bela sa transparentnošću i blur efektom */
    /* background: rgba(255, 255, 255, 0.85) !important; */ /* 85% opacity za glossy efekat */
    /* backdrop-filter: blur(12px) saturate(180%); */
    /* -webkit-backdrop-filter: blur(12px) saturate(180%); */

    /* === DEPTH SHADOWS === */
    /* Outer shadow + inset shadows za glossy efekat */
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),           /* Outer shadow - neutralna */
        0 2px 4px rgba(0, 0, 0, 0.06),            /* Subtle depth */
        inset 0 1px 0 rgba(255, 255, 255, 0.8),   /* Top highlight - jači sjaj */
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);       /* Bottom shadow - suptilna */

    /* === BORDER ZA DEFINICIJU === */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    /* === TRANSITIONS === */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

    /* === INITIAL POSITION === */
    transform: translateY(0);
}

/* === UKLANJANJE POZADINA SA UNUTRAŠNJIH ELEMENATA === */
.marbo-header .wp-block-group {
    background: none !important;
    background-color: transparent !important;
}

/**
 * GLOSSY OVERLAY - Vraćen za depth efekat
 * Pseudo-element za sjaj na vrhu headera
 * ZAKOMENTARISANO - Za transparentni logo u budućnosti
 */
/*
.marbo-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}
*/

/**
 * HEADER HIDDEN STATE
 * Primenjuje se kada korisnik skroluje nadole (JavaScript dodaje klasu)
 */
.marbo-header.header-hidden {
    transform: translateY(-100%); /* Pomera header van ekrana */
    box-shadow: none; /* Uklanja senku dok je sakriven */
}

/**
 * HEADER VISIBLE STATE
 * Primenjuje se kada korisnik skroluje nagore (JavaScript dodaje klasu)
 */
.marbo-header.header-visible {
    transform: translateY(0); /* Vraća header na poziciju */
}

/**
 * HEADER SCROLLED STATE
 * Primenjuje se kada stranica nije na vrhu (scrollY > 50px)
 * Pojačava senku za bolju vidljivost
 */
.marbo-header.header-scrolled {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.1),            /* Jača neutralna senka */
        0 3px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1),     /* Puni beli sjaj na vrhu */
        inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/**
 * MAIN CONTENT MARGIN
 * Kompenzuje fiksiran header da sadržaj ne bude ispod njega
 */
.wp-site-blocks {
    margin-top: 130px; /* Jednako visini headera */
}

/**
 * LINK STYLES - Osnovni stilovi za linkove u headeru
 * Tamni linkovi za svetao (beli) header
 */
.marbo-header a {
    color: var(--ss-color-foreground); /* Tamna boja (#2A363B) */
    text-decoration: none;
    transition: color 0.2s ease;
}

.marbo-header a:hover {
    color: var(--ss-color-primary); /* Coral boja na hover */
}

/* ==========================================================================
   HEADER COLOR VARIANTS - Dodaj klasu za promenu boje
   ========================================================================== */

/**
 * PRIMARY VARIANT - Coral Header
 * Koristi: <header class="marbo-header marbo-header-primary">
 */
.marbo-header-primary {
    background: var(--ss-color-primary) !important;
    box-shadow:
        0 4px 16px rgba(160, 103, 103, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.marbo-header-primary.header-scrolled {
    box-shadow:
        0 6px 20px rgba(160, 103, 103, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/**
 * SECONDARY VARIANT - Mint Header
 * Koristi: <header class="marbo-header marbo-header-secondary">
 */
.marbo-header-secondary {
    background: var(--ss-color-secondary) !important;
    box-shadow:
        0 4px 16px rgba(78, 205, 196, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.marbo-header-secondary.header-scrolled {
    box-shadow:
        0 6px 20px rgba(78, 205, 196, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/**
 * ACCENT VARIANT - Lemon Header (DEFAULT)
 * Koristi: <header class="marbo-header marbo-header-accent">
 * Ili samo: <header class="marbo-header"> (već je default)
 */
.marbo-header-accent {
    background: var(--ss-color-accent) !important;
    box-shadow:
        0 4px 16px rgba(254, 230, 140, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.marbo-header-accent.header-scrolled {
    box-shadow:
        0 6px 20px rgba(254, 230, 140, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/**
 * BACKGROUND VARIANT - Creamy Header
 * Koristi: <header class="marbo-header marbo-header-background">
 */
.marbo-header-background {
    background: var(--ss-color-background) !important;
    box-shadow:
        0 4px 16px rgba(255, 251, 247, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.marbo-header-background.header-scrolled {
    box-shadow:
        0 6px 20px rgba(255, 251, 247, 0.45),
        0 3px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Tamni tekst za svetle headere (Background) */
.marbo-header-background a {
    color: var(--ss-color-foreground) !important;
}

.marbo-header-background a:hover {
    color: var(--ss-color-primary) !important;
}

/**
 * FOREGROUND VARIANT - Dark Header
 * Koristi: <header class="marbo-header marbo-header-foreground">
 */
.marbo-header-foreground {
    background: var(--ss-color-foreground) !important;
    box-shadow:
        0 4px 16px rgba(42, 54, 59, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.marbo-header-foreground.header-scrolled {
    box-shadow:
        0 6px 20px rgba(42, 54, 59, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/**
 * LIGHT VARIANT - White Header
 * Koristi: <header class="marbo-header marbo-header-light">
 */
.marbo-header-light {
    background: var(--ss-color-light) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.marbo-header-light.header-scrolled {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* Tamni tekst za svetle headere (Light) */
.marbo-header-light a {
    color: var(--ss-color-foreground) !important;
}

.marbo-header-light a:hover {
    color: var(--ss-color-primary) !important;
}

/**
 * NAVIGATION - Hamburger breakpoint override
 * Forsiraj hamburger meni na 804px umesto WordPress default-a (600px ili 782px)
 */
/* Desktop - sakrij hamburger button */

/* Mobile - prikaži hamburger button na 804px */

/**
 * NAVIGATION LINKS - Stilovi za navigacione linkove
 */
.marbo-header .wp-block-navigation-item a {
    font-weight: 500; /* Semi-bold za bolju čitljivost */
    position: relative; /* Za pozicioniranje ::after pseudo-elementa */
}

/**
 * NAVIGATION HOVER UNDERLINE
 * Animirani underline efekat koji se pojavljuje na hover
 */
.marbo-header .wp-block-navigation-item a::after {
    content: '';
    position: absolute;
    bottom: -4px; /* 4px ispod teksta */
    left: 0;
    width: 0; /* Početna širina - nevidljiv */
    height: 2px;
    background: var(--ss-color-primary); /* Coral Delight */
    transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Smooth expand */
}

.marbo-header .wp-block-navigation-item a:hover::after {
    width: 100%; /* Puni underline na hover */
}

/**
 * LOGO EFFECTS - Hover efekti za logo
 */
.marbo-header .wp-block-site-logo img {
    transition: filter 0.3s ease, transform 0.3s ease;
}

.marbo-header .wp-block-site-logo img:hover {
    filter: brightness(1.1); /* Svetliji logo na hover */
    transform: scale(1.02);  /* Blago povećanje */
}

/**
 * RESPONSIVE - MOBILE ADJUSTMENTS SA HAMBURGER MENIJEM
 * Hamburger meni se pojavljuje na 804px (kada kartice postaju 2 kolone)
 * Visina headera: 150px
 * Layout: 2 reda - (Logo + Hamburger) / (Socijalne + Search)
 */

/* ==========================================================================
   8. FULL-SCREEN SEARCH OVERLAY - LIVE SEARCH WITH RESULTS
   ========================================================================== */

/**
 * OVERLAY BACKDROP
 * Full-screen crni transparentni backdrop sa blur efektom - Fluid Interface
 */
.ssk-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Crni transparentni - 50% */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999; /* Iznad headera (9999) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto; /* Allow scrolling za rezultate */
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scroll na iOS */
}

/* Universal box-sizing za sve elemente unutar overlay-a */
.ssk-search-overlay *,
.ssk-search-overlay *::before,
.ssk-search-overlay *::after {
    box-sizing: border-box;
}

/* ACTIVE STATE - Prikaži overlay */
.ssk-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/**
 * SEARCH WRAPPER
 * Glavni kontejner za search box i rezultate - fluid interface
 */
.ssk-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Širina za desktop */
    margin: 0 auto;
    padding: 3rem 2rem 4rem 2rem; /* top, right, bottom, left - padding sa svih strana */
    min-height: 100vh;
    box-sizing: border-box; /* Padding unutar width-a */
}

/**
 * SEARCH CONTAINER
 * Search box na vrhu - fluid
 */
.ssk-search-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3rem; /* Margin bottom za rezultate */
    box-sizing: border-box; /* Padding unutar width-a */
}

/**
 * SEARCH FORM
 * Optimalna visina search box (smanjeno 30%) - fluid
 */
.ssk-search-form {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 16px; /* Manje zaobljeno nego ranije */
    padding: 0.9rem 1.75rem; /* Smanjeno za 30% */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ssk-search-form:focus-within {
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.4),
        0 6px 12px rgba(0, 0, 0, 0.25),
        0 0 0 3px rgba(160, 103, 103, 0.4), /* Dark Pink focus ring */
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}

/**
 * SEARCH ICON (LUPA) - ne sme da se skuplja
 */
.ssk-search-icon {
    width: 32px;
    height: 32px;
    min-width: 32px; /* Prevent shrinking */
    margin-right: 1.25rem;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.ssk-search-form:focus-within .ssk-search-icon {
    opacity: 0.8;
}

.ssk-search-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--ss-color-primary); /* Dark Pink */
}

/**
 * SEARCH INPUT FIELD - Optimalna veličina (smanjeno 30%) - fluid
 */
.ssk-search-input {
    flex: 1;
    min-width: 0; /* Dozvoli sužavanje ispod prirodne širine */
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.05rem; /* Smanjeno za 30% */
    font-weight: 400;
    color: var(--ss-color-foreground);
    font-family: var(--wp--preset--font-family--quicksand), sans-serif;
    line-height: 1.4;
}

.ssk-search-input::placeholder {
    color: rgba(78, 60, 47, 0.4);
    font-weight: 300;
}

/**
 * CLOSE BUTTON (X)
 * Na vrhu wrapper-a, u gornjem redu iznad search bara
 */
.ssk-search-close {
    position: relative; /* Relative positioning - deo layout flow-a */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* Pomeri na desnu stranu */
    margin-bottom: 1.5rem; /* Prostor ispod pre search bara */
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0; /* Ne sme da se skuplja */
}

.ssk-search-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg) scale(1.1);
}

.ssk-search-close svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/**
 * SEARCH HINT TEXT
 */
.ssk-search-hint {
    margin-top: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-weight: 300;
}

.ssk-search-hint kbd {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-family: monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

/**
 * SEARCH RESULTS CONTAINER - fluid
 */
.ssk-search-results {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    box-sizing: border-box;
}

/**
 * SEARCH RESULTS GRID - Responsive grid - fluid
 */
.ssk-search-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 kolone */
    gap: 1.5rem;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Desktop: 4 kolone */

/**
 * SEARCH CARD - Recipe card stil (kopiran sa sajta) - fluid
 */
.ssk-search-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--ss-color-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 4px 6px rgba(160, 103, 103, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%; /* Ne prelazi roditeljski element */
}

.ssk-search-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 16px rgba(160, 103, 103, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/**
 * SEARCH CARD IMAGE
 */
.ssk-search-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ss-color-accent);
}

.ssk-search-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ssk-search-card:hover .ssk-search-card-image img {
    transform: scale(1.05);
}

/**
 * SEARCH CARD CONTENT
 */
.ssk-search-card-content {
    padding: 1.25rem;
}

.ssk-search-card-title {
    font-family: var(--wp--preset--font-family--pacifico), cursive;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ss-color-primary);
    margin: 0 0 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ssk-search-card-excerpt {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ss-color-foreground);
    opacity: 0.8;
    margin: 0;
}

/**
 * LOADING STATE
 */
.ssk-search-loading {
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.ssk-search-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 1.5rem;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--ss-color-primary);
    border-radius: 50%;
    animation: ssk-spin 0.8s linear infinite;
}

@keyframes ssk-spin {
    to { transform: rotate(360deg); }
}

.ssk-search-loading p {
    font-size: 1.125rem;
    font-weight: 300;
    margin: 0;
}

/**
 * MESSAGE STATES (Error, Empty, Info)
 */
.ssk-search-message {
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.ssk-search-message svg {
    margin: 0 auto 1.5rem;
    opacity: 0.6;
}

.ssk-search-message p {
    font-size: 1.125rem;
    font-weight: 400;
    margin: 0.5rem 0;
}

.ssk-search-empty-hint {
    font-size: 0.9375rem;
    opacity: 0.6;
    font-weight: 300;
}

.ssk-search-error {
    color: #ff6b6b;
}

/**
 * MOBILE RESPONSIVE - Fluid interface
 */

/**
 * VERY SMALL SCREENS - Dodatna fleksibilnost
 */

/**
 * PREVENT BODY SCROLL kada je overlay otvoren
 */
body.ssk-search-open {
    overflow: hidden;
}

/* ==========================================================================
   8.5. MARBO SEARCH SECTION - Two Column Search Layout
   ========================================================================== */

/**
 * Search section sa 2 kolone:
 * - Kolona 1: Search bar (kao u meniju, malo veći)
 * - Kolona 2: Dugmići (smanjeni za 30%)
 */

/* ==========================================================================
   GLOBALNO UKLANJANJE CRNE LINIJE SA SVIH SEARCH ELEMENATA
   ========================================================================== */

/* UKLANJA BORDER SA SVIH SEARCH KOMPONENTI NA CELOM SAJTU */
.wp-block-search,
.wp-block-search__inside-wrapper,
.wp-block-search__input {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

.wp-block-search__input:focus {
    outline: none !important;
    outline-width: 0 !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(160, 103, 103, 0.15) !important;
}

/* Search bar u search section - kao header search, malo veći */
.marbo-search-section .wp-block-search {
    position: relative !important; /* VAŽNO za absolute positioning button-a */
    display: inline-block !important; /* Ne širi se preko teksta */
    width: auto !important;
    max-width: 100% !important;
    flex-grow: 1 !important; /* Zauzima preostali prostor u koloni */
}

.marbo-search-section .wp-block-search__input {
    width: 100% !important;
    min-width: 250px !important; /* Minimalna širina */
    padding: 0.65rem 120px 0.65rem 1.2rem !important; /* Povećano za 30% od header search */
    font-size: 1rem !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;

    /* Boje */
    background-color: var(--ss-color-pink-light) !important; /* Light Pink */
    color: var(--ss-color-foreground) !important; /* Dark Brown */

    /* UKLANJANJE SVIH IVICA - IDENTIČNO KAO U HEADER-U */
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    border-radius: 10px !important;

    /* Shadow umesto border-a */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;

    /* Transitions */
    transition: all 0.3s ease !important;
}

.marbo-search-section .wp-block-search__input:focus {
    /* UKLANJANJE SVIH IVICA NA FOCUS */
    outline: none !important;
    outline-width: 0 !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    /* Boje */
    background-color: var(--ss-color-light) !important; /* White */
    box-shadow: 0 2px 8px rgba(160, 103, 103, 0.15) !important; /* Pink glow */
}

.marbo-search-section .wp-block-search__input::placeholder {
    color: var(--ss-color-primary) !important; /* Dark Pink */
    opacity: 0.5;
    font-style: italic;
}

/* Search button - INSIDE input field (absolute position) */
.marbo-search-section .wp-block-search__button {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    /* VISINA IDENTIČNA INPUT POLJU */
    height: calc(100% - 12px) !important; /* 100% minus 2x6px margin od ivice input-a */
    padding: 0 1.1rem !important; /* Samo horizontalni padding */
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Boje */
    background-color: var(--ss-color-primary) !important; /* Dark Pink */
    color: var(--ss-color-light) !important; /* White */
    border: none !important;
    border-radius: 8px !important;

    /* Shadow */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.marbo-search-section .wp-block-search__button:hover {
    background-color: var(--ss-color-primary-dark) !important;
    box-shadow: 0 2px 6px rgba(160, 103, 103, 0.3) !important;
}

/* Dugmići u drugoj koloni - smanjeni za 30% + dodatnih 12% */
.marbo-search-section .wp-block-button__link,
.marbo-search-section .wp-element-button {
    padding: 0.37rem 0.74rem !important; /* Smanjeno za 12% od 0.42rem 0.84rem */
    font-size: 0.77rem !important; /* Smanjeno za 12% */
    font-weight: normal !important;
}

/* Responsive - mobilni prikaz */

/* ==========================================================================
   9. MARBOSOFT STORY CARD - BLOG STYLE COMPONENT
   ========================================================================== */

/**
 * MARBOSOFT-STORY - Story card component sa slikom i tekstom
 *
 * STRUKTURA:
 * - Group element sa klasom .marbosoft-story
 * - Unutra columns sa 2 kolone (50/50): levo slika, desno tekst
 * - Card-like dizajn sa pink-light pozadinom
 *
 * DESIGN PATTERN:
 * - Pink-light pozadina (#fcf5f3 - Blush Rose)
 * - Border-radius: 8px za card i sliku
 * - Box-shadow za depth efekat
 * - Padding unutar kartice
 */

.marbosoft-story {
    background-color: var(--ss-color-pink-light); /* #fcf5f3 - Blush Rose */
    border-radius: 8px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover efekat - blago izdizanje */
.marbosoft-story:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Slika unutar story kartice - zaobljene ivice */
.marbosoft-story img {
    border-radius: 8px;
    width: 100%;
    height: auto;
    display: block;
}

/* Slika u koloni sa poravnanjem ulevo */
.marbo-story-img-left {
    text-align: left;
}

.marbo-story-img-left img {
    margin-left: 0;
    margin-right: auto;
}

/* Responsive - Mobile adjustments */

/* ==========================================================================
   10. MARBO-CATEGORY-6 - CATEGORY GRID WITH 6 COLUMNS
   ========================================================================== */

/**
 * MARBO-CATEGORY-6 - 6-kolona grid sa cover blokovima
 *
 * STRUKTURA:
 * - Columns element sa klasom .marbo-category-6
 * - 6 kolona, svaka sadrži cover blok sa slikom i h3 nazivom kategorije
 * - H3 sa pozadinom (pozicioniranje se kontroliše iz WP editora)
 *
 * DESIGN PATTERN:
 * - Cover: Border-radius: 12px, box-shadow, hover lift efekat
 * - H3: Light Pink pozadina, Dark Pink tekst, 8px border-radius
 * - H3 širina: Samo koliko je tekst (fit-content)
 * - Hover: H3 pozadina menja se u Pink Hover (#EFD2CD)
 * - Sve boje koriste CSS promenljive
 */

/* Cover blokovi unutar marbo-category-6 kolona */
.marbo-category-6 .wp-block-cover {
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;

    /* Kvadratni oblik - visina jednaka širini */
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
}

/* Hover efekat - lift sa pojačanom senkom BEZ promene background boje */
.marbo-category-6 .wp-block-cover:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12);
}

/* H3 naslovi unutar cover blokova - sa pozadinom */
.marbo-category-6 .wp-block-cover h3 {
    font-size: clamp(0.9rem, 2vw, 1.1rem) !important; /* 80% od normalnog */
    font-weight: 700 !important;
    line-height: 1.2 !important;

    /* Pozadina i padding - dizajn stilovi */
    background-color: var(--ss-color-pink-light) !important; /* Light Pink */
    color: var(--ss-color-primary) !important; /* Dark Pink */
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;

    /* Širina samo koliko je tekst */
    width: fit-content;

    /* Transition za hover */
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Hover efekat - promena pozadine H3 */
.marbo-category-6 .wp-block-cover:hover h3 {
    background-color: var(--ss-color-pink-hover) !important; /* Pink Hover - tamnija nijansa */
}

/* Linkovi unutar h3 */
.marbo-category-6 .wp-block-cover h3 a {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Focus state za accessibility */
.marbo-category-6 .wp-block-cover:focus-within {
    outline: 2px solid var(--ss-color-primary);
    outline-offset: 4px;
}

/* Mobile responsive */

/* ==========================================================================
   10.5. MARBO-CATEGORY-4 - CATEGORY GRID WITH 4 COLUMNS (30% VIŠI)
   ========================================================================== */

/**
 * MARBO-CATEGORY-4 - 4-kolona grid sa cover blokovima
 *
 * STRUKTURA:
 * - Columns element sa klasom .marbo-category-4
 * - 4 kolone, svaka sadrži cover blok sa slikom i h3 nazivom kategorije
 * - H3 sa pozadinom (pozicioniranje se kontroliše iz WP editora)
 * - 30% viši od marbo-category-6
 *
 * DESIGN PATTERN:
 * - Cover: Border-radius: 12px, box-shadow, hover lift efekat
 * - H3: Light Pink pozadina, Dark Pink tekst, 8px border-radius
 * - H3 širina: Samo koliko je tekst (fit-content)
 * - Hover: H3 pozadina menja se u Pink Hover (#EFD2CD)
 * - Sve boje koriste CSS promenljive
 */

/* Cover blokovi unutar marbo-category-4 kolona */
.marbo-category-4 .wp-block-cover {
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;

    /* Kvadratni oblik - visina jednaka širini */
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
}

/* Hover efekat - lift sa pojačanom senkom BEZ promene background boje */
.marbo-category-4 .wp-block-cover:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12);
}

/* H3 naslovi unutar cover blokova - sa pozadinom */
.marbo-category-4 .wp-block-cover h3 {
    font-size: clamp(0.9rem, 2vw, 1.1rem) !important; /* 80% od normalnog */
    font-weight: 700 !important;
    line-height: 1.2 !important;

    /* Pozadina i padding - dizajn stilovi */
    background-color: var(--ss-color-pink-light) !important; /* Light Pink */
    color: var(--ss-color-primary) !important; /* Dark Pink */
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;

    /* Širina samo koliko je tekst */
    width: fit-content;

    /* Transition za hover */
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Hover efekat - promena pozadine H3 */
.marbo-category-4 .wp-block-cover:hover h3 {
    background-color: var(--ss-color-pink-hover) !important; /* Pink Hover - tamnija nijansa */
}

/* Linkovi unutar h3 */
.marbo-category-4 .wp-block-cover h3 a {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Focus state za accessibility */
.marbo-category-4 .wp-block-cover:focus-within {
    outline: 2px solid var(--ss-color-primary);
    outline-offset: 4px;
}

/* Mobile responsive */

/* ==========================================================================
   11. MARBO-ALIGN-RIGHT - ALIGN IMAGE TO RIGHT IN COLUMN
   ========================================================================== */

/**
 * MARBO-ALIGN-RIGHT - Poravnanje slike desno unutar kolone
 *
 * STRUKTURA:
 * - Kolona sa klasom .marbo-align-right
 * - Slika unutar kolone se poravnava skroz desno
 */

.marbo-align-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.marbo-align-right img {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   12. CATEGORY GRID SHORTCODE - MODERN CATEGORY CARDS
   ========================================================================== */

/**
 * MARBO-CATEGORY-GRID - Grid layout za category kartice
 *
 * STRUKTURA:
 * - Shortcode [category_grid] generiše grid sa kategorijalnim karticama
 * - Svaka kartica ima gradient pozadinu, emoji ikonicu, naziv i broj postova
 * - Dizajn prilagođen postojećim recipe karticama
 *
 * DESIGN PATTERN:
 * - CSS Grid sa responsive kolonama (2-6)
 * - Gradient pastelne pozadine (različite za svaku karticu)
 * - Emoji ikonice kao vizuelni identifikatori
 * - Hover lift efekat sa senkom
 * - Border-radius 12px za moderan izgled
 */

/* GRID CONTAINER */
.marbo-category-grid {
    display: grid !important;
    gap: 1.5rem;
    margin: 2rem 0;
}

/* GRID COLUMN VARIATIONS */
.marbo-category-grid-2 { grid-template-columns: repeat(2, 1fr); }
.marbo-category-grid-3 { grid-template-columns: repeat(3, 1fr); }
.marbo-category-grid-4 { grid-template-columns: repeat(4, 1fr); }
.marbo-category-grid-5 { grid-template-columns: repeat(5, 1fr); }
.marbo-category-grid-6 { grid-template-columns: repeat(6, 1fr); }

/* ============================================
   ARCHIVE PAGE - Recipe Grid Layout
   ============================================ */

/* Archive Query Title */
.wp-block-query-title {
    margin-bottom: 1.5rem !important;
    text-align: center;
}

/* Archive Term Description */
.wp-block-term-description {
    margin-bottom: 2rem !important;
    text-align: center;
    color: var(--wp--preset--color--foreground);
    opacity: 0.8;
}

/* Archive Featured Images - Portrait Aspect Ratio (3:4) */
body.archive .wp-block-post-featured-image,
body.category .wp-block-post-featured-image,
body.tax-category .wp-block-post-featured-image {
    aspect-ratio: 3 / 4 !important;
}

body.archive .wp-block-post-featured-image img,
body.category .wp-block-post-featured-image img,
body.tax-category .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Archive Pagination */
.wp-block-query-pagination {
    margin-top: 3rem !important;
    gap: 1rem !important;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
    padding: 0.4rem 0.85rem !important;
    border-radius: 8px !important;
    background: var(--wp--preset--color--secondary) !important;
    color: var(--wp--preset--color--foreground) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers:hover {
    background: var(--wp--preset--color--pink-hover) !important;
    transform: translateY(-2px);
}

.wp-block-query-pagination .current {
    background: var(--wp--preset--color--primary) !important;
    color: #ffffff !important;
}

/* Mobile Responsive (max-width: 804px) - UVEK 2 kolone */

/* ============================================
   CATEGORY GRID - Homepage Category Cards
   ============================================ */

/* CATEGORY CARD - Pojedinačna kartica sa featured image */
.marbo-category-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 240px;
    padding: 0;
    text-decoration: none !important;
    color: white !important;

    /* Background image styling */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    /* Border i shadows */
    border-radius: var(--ss-border-radius);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08);

    /* Transitions */
    transition: all 0.3s ease;
    overflow: hidden;
}

/* DARK OVERLAY - za čitljivost teksta preko slike */
.marbo-category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1;
    transition: background 0.3s ease;
}

/* HOVER EFEKAT - pojačava overlay */
.marbo-category-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.12);
}

.marbo-category-card:hover .marbo-category-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.8) 100%
    );
}

/* CONTENT WRAPPER - text iznad overlay-a */
.marbo-category-content {
    position: relative;
    z-index: 2;
    padding: 2rem 1.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* NAZIV KATEGORIJE */
.marbo-category-name {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.marbo-category-card:hover .marbo-category-name {
    transform: translateY(-2px);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* BROJ POSTOVA */
.marbo-category-count {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
    text-align: center;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

.marbo-category-card:hover .marbo-category-count {
    opacity: 1;
}

/* FOCUS STATE - Accessibility */
.marbo-category-card:focus {
    outline: 2px solid var(--ss-color-primary) !important;
    outline-offset: 4px !important;
}

/* NO CATEGORIES MESSAGE */
.marbo-no-categories {
    text-align: center;
    padding: 2rem;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* RESPONSIVE - Mobile & Tablet */

/* VERY SMALL SCREENS - Stack vertically */

/* ==========================================================================
   13. MODERN QUERY PAGINATION - GLOSSY NAVIGATION DESIGN
   ========================================================================== */

/**
 * WORDPRESS QUERY PAGINATION - Moderno, glossy dizajn
 *
 * STRUKTURA:
 * - .wp-block-query-pagination - glavni container
 * - .wp-block-query-pagination-previous/next - Previous/Next dugmad
 * - .wp-block-query-pagination-numbers - brojevi stranica
 * - .page-numbers - pojedinačni brojevi
 * - .page-numbers.current - aktivna stranica
 *
 * DESIGN PATTERN:
 * - Glossy white dugmad sa senkama
 * - Coral primary boja za aktivan state
 * - Smooth hover efekti sa lift animacijom
 * - Border-radius 8px za konzistentnost
 */

/* GLAVNI CONTAINER - Centriranje i spacing */
.wp-block-query-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
    padding: 1.5rem 1rem !important;
    flex-wrap: wrap !important;
}

/* NUMBERS CONTAINER - Inline flex za brojeve */
.wp-block-query-pagination-numbers {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* ZAJEDNIČKI STIL ZA SVA DUGMAD/LINKOVE */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0.4rem 0.85rem !important;

    /* Glossy white background */
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%) !important;

    /* Border i shadows */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;

    /* Typography */
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--ss-color-foreground) !important;
    text-decoration: none !important;

    /* Transitions */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
}

/* HOVER EFEKAT - Lift i coral shadow */
.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers:not(.current):not(.dots):hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #FFFFFF 0%, var(--ss-color-pink-light) 100%) !important;
    border-color: rgba(160, 103, 103, 0.3) !important;
    box-shadow:
        0 4px 8px rgba(160, 103, 103, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    color: var(--ss-color-primary) !important;
}

/* ACTIVE STATE - Coral background */
.wp-block-query-pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--ss-color-primary) 0%, #8B5252 100%) !important;
    color: white !important;
    border-color: rgba(160, 103, 103, 0.5) !important;
    box-shadow:
        0 4px 8px rgba(160, 103, 103, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
    cursor: default !important;
    transform: scale(1.05) !important;
}

/* DOTS - Stilizovani separator */
.wp-block-query-pagination .page-numbers.dots {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0.3) !important;
    cursor: default !important;
    font-weight: 700 !important;
    min-width: 32px !important;
    pointer-events: none !important;
}

/* PREVIOUS/NEXT BUTTONS - Malo veća */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    padding: 0.4rem 1.1rem !important;
    font-weight: 700 !important;
    gap: 0.5rem !important;
}

/* ARROW ICONS - Stilizacija strelica */
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    transition: transform 0.3s ease !important;
}

/* ARROW HOVER ANIMACIJA */
.wp-block-query-pagination-previous:hover .wp-block-query-pagination-previous-arrow {
    transform: translateX(-3px) !important;
}

.wp-block-query-pagination-next:hover .wp-block-query-pagination-next-arrow {
    transform: translateX(3px) !important;
}

/* DISABLED STATE - Kada nema prethodne/sledeće stranice */
.wp-block-query-pagination a[disabled],
.wp-block-query-pagination a:not([href]) {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* FOCUS STATE - Accessibility */
.wp-block-query-pagination a:focus,
.wp-block-query-pagination .page-numbers:focus {
    outline: 2px solid var(--ss-color-primary) !important;
    outline-offset: 4px !important;
}

/* RESPONSIVE - Mobile adjustments */

/* ==========================================================================
   NEWSLETTER POPUP - 40 SECOND DELAY
   ========================================================================== */

/* Popup Container - Full Screen Overlay */
.ssk-newsletter-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ssk-newsletter-popup.active {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

/* Background Overlay - Blur Effect */
.ssk-newsletter-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1;
}

/* Popup Content Box */
.ssk-newsletter-content {
    position: relative;
    z-index: 2;
    background: white;
    border-radius: 20px;
    max-width: 800px;
    width: 90%;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Two-column layout wrapper */
.ssk-newsletter-inner {
    display: flex;
    flex-direction: row;
    min-height: 450px;
}

@keyframes slideIn {
    0% {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Close Button */
.ssk-newsletter-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--ss-color-foreground);
    opacity: 0.6;
}

.ssk-newsletter-close:hover {
    background: var(--ss-color-accent);
    opacity: 1;
    transform: rotate(90deg);
}

.ssk-newsletter-close svg {
    fill: currentColor;
}

/* Newsletter Image - Left Column (Portrait) */
.ssk-newsletter-image {
    flex: 0 0 40%;
    overflow: hidden;
    background: var(--ss-color-accent);
}

.ssk-newsletter-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Popup Body - Right Column */
.ssk-newsletter-body {
    flex: 1;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Title */
.ssk-newsletter-title {
    margin: 0 0 1rem 0;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--ss-color-primary);
    line-height: 1.2;
}

/* Subtitle */
.ssk-newsletter-subtitle {
    margin: 0 0 2rem 0;
    font-size: 1.125rem;
    color: var(--ss-color-foreground);
    opacity: 0.8;
    line-height: 1.5;
}

/* Newsletter Form */
.ssk-newsletter-form {
    margin-bottom: 1.5rem;
}

.ssk-newsletter-input-wrapper {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Email Input */
.ssk-newsletter-input {
    flex: 1;
    min-width: 250px;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    border: 2px solid var(--ss-color-accent);
    border-radius: 10px;
    background: var(--ss-color-pink-light);
    color: var(--ss-color-foreground);
    transition: all 0.3s ease;
    outline: none;
}

.ssk-newsletter-input:focus {
    border-color: var(--ss-color-primary);
    background: white;
    box-shadow: 0 4px 12px rgba(160, 103, 103, 0.15);
}

.ssk-newsletter-input::placeholder {
    color: var(--ss-color-primary);
    opacity: 0.5;
}

/* Submit Button */
.ssk-newsletter-submit {
    flex: 0 0 auto;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--ss-color-primary);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(160, 103, 103, 0.3);
}

.ssk-newsletter-submit:hover {
    background: var(--ss-color-pink-hover);
    color: var(--ss-color-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(160, 103, 103, 0.4);
}

.ssk-newsletter-submit:active {
    transform: translateY(0);
}

/* Privacy Text */
.ssk-newsletter-privacy {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ss-color-foreground);
    opacity: 0.6;
    line-height: 1.4;
}

/* Body Lock (prevent scroll when popup is open) */
body.ssk-newsletter-open {
    overflow: hidden;
}

/* Mobile Responsive */

/* ==========================================================================
   HOMEPAGE NEWSLETTER SUBSCRIPTION SECTION
   ========================================================================== */

/**
 * Desktop: Red 1 - Centriran tekst | Red 2 - Name | Email | Subscribe (inline)
 * Mobile: Vertikalno, 90% širine, jednaki mali razmaci
 */

/* Roditeljska cover klasa - smanji padding */
.marbo-subscribe-cover {
    min-height: auto !important;
}

.marbo-subscription {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px !important;
    overflow: hidden;
}

.marbo-subscription .emaillist {
    background: transparent;
}

/* Caption - Red 1, centriran */
.marbo-subscription .es_caption {
    display: block;
    font-size: 0.9375rem;
    font-weight: inherit;
    color: var(--ss-color-foreground);
    text-align: center;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

/* Desktop: Red 2 - inline elementi, vertikalno centrirani */

/* Sakrij labele - prikaži samo input */
.marbo-subscription .es-field-wrap label {
    display: block;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    color: transparent;
}

.marbo-subscription .es-field-wrap label br,
.marbo-subscription .es_subscription_form br {
    display: none !important;
}

.marbo-subscription .es-field-wrap label::before,
.marbo-subscription .es-field-wrap label::after {
    content: none;
}

/* Input polja */
.marbo-subscription input[type="text"],
.marbo-subscription input[type="email"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1.5px solid var(--ss-color-accent);
    border-radius: 6px;
    background: var(--ss-color-pink-light);
    color: var(--ss-color-foreground);
    transition: all 0.2s ease;
    font-family: inherit;
    margin: 0;
}

.marbo-subscription input[type="text"]:focus,
.marbo-subscription input[type="email"]:focus {
    outline: none;
    border-color: var(--ss-color-primary);
    background: white;
    box-shadow: 0 2px 6px rgba(160, 103, 103, 0.12);
}

.marbo-subscription input[type="text"]::placeholder,
.marbo-subscription input[type="email"]::placeholder {
    color: var(--ss-color-primary);
    opacity: 0.6;
}

/* Subscribe button */
.marbo-subscription input[type="submit"],
.marbo-subscription .es_subscription_form_submit {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--ss-color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(160, 103, 103, 0.2);
    margin: 0;
}

.marbo-subscription input[type="submit"]:hover,
.marbo-subscription .es_subscription_form_submit:hover {
    background: var(--ss-color-pink-hover);
    color: var(--ss-color-primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(160, 103, 103, 0.3);
}

.marbo-subscription input[type="submit"]:active,
.marbo-subscription .es_subscription_form_submit:active {
    transform: translateY(0);
}

/* Hidden fields */
.marbo-subscription .es_subscription_form > p input[type="hidden"] {
    display: none;
}

/* Spinner - sakriven dok nije loading */
.marbo-subscription .es_spinner_image {
    display: none !important;
}

/* Spinner - prikaži samo tokom submita */
.marbo-subscription .es_subscription_form.es-processing .es_spinner_image {
    display: inline-block !important;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.marbo-subscription .es_spinner_image img {
    width: 14px;
    height: 14px;
}

/* Success/Error poruke - sakrij dok je prazno */
.marbo-subscription .es_subscription_message {
    display: none !important; /* Sakrij prazan element */
    margin-top: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    text-align: center;
    font-weight: inherit;
}

/* Prikaži samo kada ima sadržaj */
.marbo-subscription .es_subscription_message:not(:empty) {
    display: block !important;
}

.marbo-subscription .es_subscription_message.es_success_message,
.marbo-subscription .es_subscription_message[style*="color: green"],
.marbo-subscription .es_subscription_message:not(:empty) {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.marbo-subscription .es_subscription_message.es_error_message,
.marbo-subscription .es_subscription_message[style*="color: red"] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Mobile - Vertikalno, 90% širine, jednaki razmaci */

/* ==========================================================================
   SIDEBAR NEWSLETTER SUBSCRIPTION - UVEK MOBILNI LAYOUT
   ========================================================================== */

/**
 * SIDEBAR PRETPLATA - Vertikalni layout kao mobilni, za uske kolone
 *
 * FUNKCIONALNOST:
 * - Uvek vertikalni layout (kao mobilni) - nema media query
 * - 100% širina za sidebar (uži prostor)
 * - Centrirana polja
 * - Idealno za widget area, sidebar, narrow columns
 *
 * UPOTREBA:
 * U Group bloku dodaj Additional CSS class: marbo-subscription-sidebar
 * Shortcode: [email-subscribers-form id="1"]
 */

.marbo-subscription-sidebar {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 1.25rem; /* Top/Bottom 1.5rem, Left/Right 1.25rem */
    border-radius: 12px !important;
    background: var(--ss-color-accent); /* Cream pozadina */
    overflow: hidden;
    box-sizing: border-box;
}

.marbo-subscription-sidebar .emaillist {
    background: transparent;
}

/* Caption - naslov */
.marbo-subscription-sidebar .es_caption {
    display: block;
    font-size: 1rem;
    font-weight: inherit; /* Normalni font paragrafa sajta */
    color: var(--ss-color-foreground);
    text-align: center;
    margin: 0 0 1rem 0 !important;
    line-height: 1.4;
}

/* UVEK VERTIKALNI LAYOUT - bez 

.marbo-subscription-sidebar .es-field-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
}

/* Email field - malo više razmaka dole */
.marbo-subscription-sidebar .es-field-wrap:nth-of-type(2) {
    margin-bottom: 1rem !important;
}

/* Sakrij labele */
.marbo-subscription-sidebar .es-field-wrap label {
    display: block;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    color: transparent;
}

.marbo-subscription-sidebar .es-field-wrap label br,
.marbo-subscription-sidebar .es_subscription_form br {
    display: none !important;
}

.marbo-subscription-sidebar .es-field-wrap label::before,
.marbo-subscription-sidebar .es-field-wrap label::after {
    content: none;
}

/* Input polja - 100% širine sa box-sizing */
.marbo-subscription-sidebar input[type="text"],
.marbo-subscription-sidebar input[type="email"] {
    width: 100% !important;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    border: 1.5px solid var(--ss-color-accent);
    border-radius: 6px;
    background: white;
    color: var(--ss-color-foreground);
    transition: all 0.2s ease;
    font-family: inherit;
    margin: 0 !important;
    box-sizing: border-box !important; /* Padding je deo širine */
}

.marbo-subscription-sidebar input[type="text"]:focus,
.marbo-subscription-sidebar input[type="email"]:focus {
    outline: none;
    border-color: var(--ss-color-primary);
    background: white;
    box-shadow: 0 2px 8px rgba(160, 103, 103, 0.15);
}

.marbo-subscription-sidebar input[type="text"]::placeholder,
.marbo-subscription-sidebar input[type="email"]::placeholder {
    color: var(--ss-color-primary);
    opacity: 0.6;
}

/* Submit button paragraph wrapper */
.marbo-subscription-sidebar .es_subscription_form > p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

/* Subscribe button - puna širina, centriran */
.marbo-subscription-sidebar input[type="submit"],
.marbo-subscription-sidebar .es_subscription_form_submit {
    width: 100% !important;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--ss-color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(160, 103, 103, 0.2);
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important; /* Padding je deo širine */
}

.marbo-subscription-sidebar input[type="submit"]:hover,
.marbo-subscription-sidebar .es_subscription_form_submit:hover {
    background: var(--ss-color-pink-hover);
    color: var(--ss-color-primary);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(160, 103, 103, 0.3);
}

.marbo-subscription-sidebar input[type="submit"]:active,
.marbo-subscription-sidebar .es_subscription_form_submit:active {
    transform: translateY(0);
}

/* Hidden fields */
.marbo-subscription-sidebar .es_subscription_form > p input[type="hidden"] {
    display: none;
}

/* Spinner */
.marbo-subscription-sidebar .es_spinner_image {
    display: none !important;
}

.marbo-subscription-sidebar .es_subscription_form.es-processing .es_spinner_image {
    display: inline-block !important;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.marbo-subscription-sidebar .es_spinner_image img {
    width: 14px;
    height: 14px;
}

/* Success/Error poruke */
.marbo-subscription-sidebar .es_subscription_message {
    display: none !important;
    margin-top: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    text-align: center;
    font-weight: inherit; /* Normalni font paragrafa sajta */
}

.marbo-subscription-sidebar .es_subscription_message:not(:empty) {
    display: block !important;
}

.marbo-subscription-sidebar .es_subscription_message.es_success_message,
.marbo-subscription-sidebar .es_subscription_message[style*="color: green"],
.marbo-subscription-sidebar .es_subscription_message:not(:empty) {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.marbo-subscription-sidebar .es_subscription_message.es_error_message,
.marbo-subscription-sidebar .es_subscription_message[style*="color: red"] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ==========================================================================
   MARBO FOOTER COL - FOOTER KOLONE SA ALIGNMENT
   ========================================================================== */

/**
 * Footer kolone sa alignment
 *
 * DESKTOP:
 * - Leva kolona: sadržaj skroz levo
 * - Desna kolona: sadržaj skroz desno
 *
 * MOBILE (Stack on mobile):
 * - Obe kolone: sadržaj centriran
 *
 * UPOTREBA:
 * Dodaj klasu na Columns blok: marbo-footer-col
 */

/* Desktop - leva kolona levo, desna kolona desno */
.marbo-footer-col .wp-block-column:first-child {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.marbo-footer-col .wp-block-column:first-child * {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.marbo-footer-col .wp-block-column:last-child {
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.marbo-footer-col .wp-block-column:last-child * {
    text-align: right !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Flex elementi unutar kolona */
.marbo-footer-col .wp-block-column:last-child .wp-block-group,
.marbo-footer-col .wp-block-column:last-child .wp-block-navigation,
.marbo-footer-col .wp-block-column:last-child .wp-block-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
}

/* Mobile - obe kolone centrirane */

/* ==========================================================================
   MARBO COL-728 - FIKSNA ŠIRINA KOLONE (728px)
   ========================================================================== */

/**
 * Klasa za kolonu fiksne širine 728px
 *
 * FUNKCIONALNOST:
 * - Maksimalna širina 728px (content size iz theme.json)
 * - Centrirana kolona sa auto marginama
 * - SVI elementi unutar kolone NE SMEJU prelaziti širinu
 * - Specijalna kontrola za slike, iframes, video, table
 * - Responsive - 100% širina na mobilnim uređajima
 *
 * UPOTREBA:
 * <div class="marbo-col-728">
 *   <img src="slika.jpg" /> <!-- Automatski se ograničava -->
 *   <p>Tekst...</p>
 * </div>
 */

.marbo-col-728 {
    /* === DIMENSIONS === */
    max-width: 728px;
    width: 100%;

    /* === CENTERING === */
    margin-left: auto;
    margin-right: auto;

    /* === OVERFLOW CONTROL === */
    overflow: visible; /* Dozvoljava vidljivost, ali elementi se skaliraju */

    /* === BOX MODEL === */
    box-sizing: border-box;
}

/**
 * SVA DECA - Automatsko skaliranje da stanu u 728px
 */
.marbo-col-728 > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/**
 * SLIKE - Ograničenje na 100% širine roditelja
 * Sprečava slike da budu šire od 728px
 */
.marbo-col-728 img,
.marbo-col-728 .wp-block-image img,
.marbo-col-728 .wp-block-post-featured-image img,
.marbo-col-728 .wp-block-media-text img,
.marbo-col-728 .wp-block-cover img,
.marbo-col-728 figure img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    display: block;
    object-fit: contain; /* Održava aspect ratio */
}

/**
 * IFRAME & VIDEO - Embeds (YouTube, Vimeo, itd.)
 */
.marbo-col-728 iframe,
.marbo-col-728 video,
.marbo-col-728 embed,
.marbo-col-728 object {
    max-width: 100% !important;
    height: auto !important;
}

/**
 * TABELE - Sprečava široke tabele da izlaze van
 */
.marbo-col-728 table {
    max-width: 100% !important;
    width: 100% !important;
    table-layout: auto;
    overflow-x: auto;
    display: block;
}

/**
 * WORDPRESS BLOKOVI - Alignment kontrola
 */
.marbo-col-728 .alignwide,
.marbo-col-728 .alignfull {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/**
 * CODE BLOKOVI - Sprečava horizontalni overflow
 */
.marbo-col-728 pre,
.marbo-col-728 code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/**
 * FIGURE ELEMENTI - Wrapping za slike
 */
.marbo-col-728 figure {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/**
 * MOBILE RESPONSIVE - Padding za manje ekrane
 */

/**
 * ============================================
 * MARBO 2-COLUMN LAYOUT - MOBILNI RESPONSIVE
 * ============================================
 * Sidebar + Content layout:
 * - Desktop (805px+): 2 kolone (default)
 * - Mobilni (<805px): 1 kolona (ispod sebe)
 */

/**
 * ============================================
 * MARBO HEADER - DESKTOP VISINA
 * ============================================
 */

/**
 * ============================================
 * MARBO HEADER - MOBILNI LAYOUT
 * ============================================
 * Desktop (805px+): NE DIRAJ (radi kako treba)
 * Mobilni (<805px):
 *   - Logo levo
 *   - Stack desno (row): Search + Hamburger
 *   - Social ikonice SAKRIVENE
 */

/**
 * ============================================
 * MARBO FOOTER CENTER - MENU BUTTON STILOVI
 * ============================================
 * Menu stavke u .marbo-footer-center treba da izgledaju kao dugmići
 * sa malim paddingom, ostaju u istom redu
 * NIKADA ne postaje hamburger meni - uvek vidljivi linkovi
 */

/* 1. FORSIRAJ DA NIKADA NE POSTANE HAMBURGER MENI */
.marbo-footer-center .wp-block-navigation__responsive-container-open,
.marbo-footer-center button.wp-block-navigation__responsive-container-open,
.marbo-footer-center .wp-block-navigation__toggle-button,
.marbo-footer-center button[aria-label*="Menu"],
.marbo-footer-center .wp-block-navigation__responsive-container-close {
    display: none !important; /* Sakrij hamburger button */
    visibility: hidden !important;
}

.marbo-footer-center .wp-block-navigation__responsive-container,
.marbo-footer-center .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important; /* Uvek prikaži meni */
    visibility: visible !important;
    position: static !important; /* Ne overlay */
    width: auto !important;
    height: auto !important;
    background: none !important;
    padding: 0 !important;
}

.marbo-footer-center .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
    display: flex !important; /* Flex layout za linkove */
    position: static !important;
    padding: 0 !important;
}

/* 2. BUTTON STILOVI ZA MENU LINKOVE */
.marbo-footer-center .wp-block-navigation-item a,
.marbo-footer-center .wp-block-navigation-item__content,
.marbo-footer-center .wp-block-navigation__submenu-container a,
.marbo-footer-center ul li a {
    /* Button izgled - isti kao .wp-block-button__link */
    border-radius: 8px !important;
    background-color: var(--ss-color-primary) !important; /* Dark Pink */
    color: var(--ss-color-light) !important; /* White Text */
    padding: 0.3rem 0.6rem !important; /* JOŠ MANJI padding */
    font-weight: 400 !important;
    border: none !important;
    font-size: 0.8em !important; /* 20% manji font (80% od originala) */

    /* Simple shadow */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;

    /* Smooth transition */
    transition: all 0.3s ease !important;

    /* Tekst styling */
    text-decoration: none !important;
    display: inline-block !important;
}

.marbo-footer-center .wp-block-navigation-item a:hover,
.marbo-footer-center .wp-block-navigation-item__content:hover,
.marbo-footer-center .wp-block-navigation__submenu-container a:hover,
.marbo-footer-center ul li a:hover {
    background-color: var(--ss-color-pink-hover) !important; /* Pink Hover - svetlija */
    color: var(--ss-color-primary) !important; /* Dark Pink text */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(160, 103, 103, 0.3) !important;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS - MOBILE FIRST
   ========================================================================== */
/* Moderni standard 2025: Samo Mobile i Desktop breakpoint */
/* - Mobile: < 768px (iPhone 16 Pro: 393px, Galaxy S24: 412px) */
/* - Desktop: >= 768px (tablets, laptops, desktops) */


/* ==========================================================================
   MOBILE: < 768px
   ========================================================================== */
@media (max-width: 767px) {

    /* Logo - smanjen na mobilnom */
    .marbo-header-logo {
        width: 200px;
        max-width: 200px;
    }

    .marbo-card-recipes-accent {
        border-radius: 10px;
    }

    .marbo-card-recipes-accent::before {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-accent .wp-block-post-featured-image img {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-accent:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .marbo-card-recipes-accent .wp-block-post-title {
        padding: 0.75rem 1rem;
    }

    .marbo-card-recipes-accent .wp-block-post-title a {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        line-height: 1.2;
        min-height: calc(3 * 1.2 * 1.125rem);
    }

    .marbo-card-recipes-background {
        border-radius: 10px;
    }

    .marbo-card-recipes-background::before {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-background .wp-block-post-featured-image img {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-background:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .marbo-card-recipes-background .wp-block-post-title {
        padding: 0.75rem 1rem;
    }

    .marbo-card-recipes-background .wp-block-post-title a {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        line-height: 1.2;
        min-height: calc(3 * 1.2 * 1.125rem);
    }

    .marbo-card-recipes-bg-secondary {
        border-radius: 10px;
    }

    .marbo-card-recipes-bg-secondary::before {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-bg-secondary .wp-block-post-featured-image img {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-bg-secondary:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .marbo-card-recipes-bg-secondary .wp-block-post-title {
        padding: 0.75rem 1rem;
    }

    .marbo-card-recipes-bg-secondary .wp-block-post-title a {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        line-height: 1.2;
        min-height: calc(3 * 1.2 * 1.125rem);
    }

    .marbo-card-recipes-bg-silver {
        border-radius: 10px;
    }

    .marbo-card-recipes-bg-silver::before {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-bg-silver .wp-block-post-featured-image img {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-bg-silver:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .marbo-card-recipes-bg-silver .wp-block-post-title {
        padding: 0.75rem 1rem;
    }

    .marbo-card-recipes-bg-silver .wp-block-post-title a {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        line-height: 1.2;
        min-height: calc(3 * 1.2 * 1.125rem);
    }

    .marbo-card-recipes-bg-pink {
        border-radius: 10px;
    }

    .marbo-card-recipes-bg-pink::before {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-bg-pink .wp-block-post-featured-image img {
        border-radius: 10px 10px 0 0;
    }

    .marbo-card-recipes-bg-pink:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .marbo-card-recipes-bg-pink .wp-block-post-title {
        padding: 0.75rem 1rem;
    }

    .marbo-card-recipes-bg-pink .wp-block-post-title a {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        line-height: 1.2;
        min-height: calc(3 * 1.2 * 1.125rem);
    }

    .marbo-six .wp-block-post-title a {
        font-size: clamp(1rem, 2.5vw, 1.125rem) !important;
        /* Normalna veličina kao i ostale kartice */
        min-height: calc(3 * 1.2 * 1.125rem) !important;
    }

    .marbo-hm-heading-cake::before,
    .marbo-hm-heading-birthday::before,
    .marbo-hm-heading-cupcake::before,
    .marbo-hm-heading-cookie::before,
    .marbo-hm-heading-donut::before,
    .marbo-hm-heading-pie::before,
    .marbo-hm-heading-custard::before,
    .marbo-hm-heading-subscribe::before {
        font-size: 0.624em;
        /* Smanjeno za još 10% (0.693 * 0.9) */
        margin-right: 0.4rem;
    }

    .marbo-hm-heading-primary,
    .marbo-hm-heading-text {
        margin-bottom: 1.5rem !important;
        padding-bottom: 1rem;
    }

    .marbo-hm-heading-primary::after,
    .marbo-hm-heading-text::after {
        width: 60px;
        height: 3px;
    }

    .marbo-header .wp-block-search__input {
        width: 147px !important;
        /* Povećano za +5% */
        max-width: 147px !important;
        font-size: 0.8125rem !important;
        /* 13px - ORIGINALNA VISINA */
        padding: 0.45rem 87px 0.45rem 0.78rem !important;
        /* Povećano za +5% */;
    }

    .marbo-header .wp-block-search__button {
        padding: 0.3rem 0.72rem !important;
        /* Povećano za +5% */
        font-size: 0.75rem !important;
        /* 12px - ORIGINALNA VISINA */;
    }

    /* Target Columns and Query Loop Grid */
    .wp-block-columns,
    .wp-block-query .wp-block-post-template {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: initial !important;
        gap: 0.75rem !important;
    }

    .wp-block-columns > .wp-block-column,
    .wp-block-query .wp-block-post-template > .wp-block-group {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Osiguravamo da se pojedinačni post element pravilno uklapa */
    .wp-block-query .wp-block-post-template > * {
        width: auto !important;
    }

    /* Category Row on Mobile (forces 2 items per row) */
    .ss-category-row {
        flex-wrap: wrap;
    }

    .ss-category-row .wp-block-button {
        flex-basis: calc(50% - 1rem);
        /* 2 items per row with 0.5rem gap on each side */
        margin: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

    /* Hamburger toggle button */
    .marbo-header .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    /* Sakrij desktop meni, prikaži hamburger overlay */
    .marbo-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none;
    }

    .marbo-header .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
    }

    /* Desktop navigacija - sakrij linkove, prikaži samo hamburger */
    .marbo-header .wp-block-navigation__container {
        display: none;
    }

    /* Hamburger overlay navigacija */
    .marbo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: flex;
        flex-direction: column;
    }

    /* === HEADER CONTAINER === */
    .marbo-header {
        height: 100px !important;
        /* Smanjeno sa 150px */
        min-height: 100px !important;
        /* Smanjeno sa 150px */
        padding: 0.75rem 1rem !important;
        /* Optimizovani paddingovi */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .wp-site-blocks {
        margin-top: 100px;
        /* Smanjeno sa 150px */;
    }

    .marbo-header.header-hidden {
        transform: translateY(-100px);
        /* Smanjeno sa -150px */;
    }

    /* === DESNA VERTIKALNA GRUPA - Pozicioniranje i alignment === */
    .marbo-header .wp-block-group.is-vertical {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        /* Sve dece poravnato desno */
        justify-content: space-between !important;
        /* Razdvoji gore/dole */
        gap: 1.5rem !important;
    }

    /* Navigation (hamburger) - IDE GORE */
    .marbo-header .wp-block-group.is-vertical > nav.wp-block-navigation {
        order: 1 !important;
    }

    /* Social + Search roditeljska grupa - IDE DOLE, DESNO */
    .marbo-header .marbo-socsearch {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        /* VERTIKALNO U SREDINU */
        justify-content: flex-end !important;
        /* Horizontalno desno */
        gap: 1rem !important;
        margin: 0 !important;
    }

    /* Social ikonice - vertikalno poravnanje */
    .marbo-header .marbo-socsearch .wp-block-social-links {
        margin: 0 !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Search form - vertikalno poravnanje */
    .marbo-header .marbo-socsearch .wp-block-search {
        margin: 0 !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
    }

    /* === MODERNA HAMBURGER IKONA - SVG u CSS === */
    .marbo-header .wp-block-navigation__responsive-container-open {
        position: relative;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Sakrij WordPress default SVG */
    .marbo-header .wp-block-navigation__responsive-container-open svg {
        display: none !important;
    }

    /* Dodaj modernu SVG ikonicu kao background */
    .marbo-header .wp-block-navigation__responsive-container-open::before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A06767' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: opacity 0.3s ease;
    }

    /* Hover efekat */
    .marbo-header .wp-block-navigation__responsive-container-open:hover::before {
        opacity: 0.7;
    }

    /* === SEARCH - Samo ikonica, bez input polja === */
    .marbo-header .wp-block-search__input {
        display: none !important;
    }

    /* Reset search form layout */
    .marbo-header .marbo-socsearch .wp-block-search {
        position: relative !important;
        /* Reset za form */;
    }

    /* Reset search button - ukloni absolute positioning */
    .marbo-header .marbo-socsearch .wp-block-search__button {
        position: static !important;
        /* NE absolute */
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        padding: 0.5rem !important;
        min-width: 40px !important;
        height: 40px !important;
        width: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* === HAMBURGER OVERLAY MENU - Full Screen === */

    /* Overlay je SAKRIVEN po defaultu */
    .marbo-header .wp-block-navigation__responsive-container {
        display: none !important;
    }

    /* Prikaži SAMO kada je otvoren (.is-menu-open klasa) */
    .marbo-header .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 99999 !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Wrapper za centriranje */
    .marbo-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    .marbo-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Meni container - centiran */
    .marbo-header .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 600px !important;
        padding: 2rem !important;
    }

    /* Menu stavke - vertikalno i horizontalno centirrane */
    .marbo-header .wp-block-navigation__responsive-container .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Pojedinačne stavke menija */
    .marbo-header .wp-block-navigation__responsive-container .wp-block-navigation-item {
        width: auto !important;
        text-align: center !important;
        list-style: none !important;
    }

    /* Linkovi - kao dugmići sa pink/primary bojom */
    .marbo-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        display: inline-block !important;
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        padding: 0.875rem 2rem !important;
        min-width: 180px !important;
        /* Minimalna širina da budu jednaki */

        /* Boje kao primary button */
        background-color: var(--ss-color-primary) !important;
        /* Dark Pink */
        color: var(--ss-color-light) !important;
        /* Beli tekst */
        border: none !important;
        border-radius: 8px !important;
        /* Shadow */
        box-shadow: 0 2px 8px rgba(160, 103, 103, 0.3) !important;
        /* Transitions */
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        text-align: center !important;
    }

    /* Hover efekat na linkovima */
    .marbo-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
        background-color: var(--ss-color-primary-dark) !important;
        box-shadow: 0 4px 12px rgba(160, 103, 103, 0.4) !important;
        transform: translateY(-2px) !important;
    }

    /* Close button - gore desno (gde je bio hamburger) */
    .marbo-header .wp-block-navigation__responsive-container-close {
        position: fixed !important;
        top: 1rem !important;
        right: 1.5rem !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 100000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Close X ikonica - bela boja */
    .marbo-header .wp-block-navigation__responsive-container-close svg {
        width: 32px !important;
        height: 32px !important;
    }

    .marbo-header .wp-block-navigation__responsive-container-close svg path {
        fill: var(--ss-color-light) !important;
        /* Bela boja */
        stroke: var(--ss-color-light) !important;
    }

    .ssk-search-wrapper {
        padding: 1.5rem 0.75rem 2rem 0.75rem;
    }

    .ssk-search-container {
        margin-bottom: 2rem;
        width: 100%;
        max-width: 100%;
    }

    .ssk-search-form {
        padding: 0.6rem 0.75rem;
    }

    .ssk-search-input {
        font-size: 0.875rem;
    }

    .ssk-search-icon {
        width: 20px;
        height: 20px;
        margin-right: 0.5rem;
    }

    .ssk-search-close {
        width: 36px;
        height: 36px;
        margin-bottom: 0.75rem;
        /* Jos manji margin */;
    }

    .ssk-search-close svg {
        width: 20px;
        height: 20px;
    }

    .ssk-search-results-grid {
        gap: 0.5rem;
        grid-template-columns: 1fr;
        /* 1 kolona na jako malim ekranima */;
    }

    .ssk-search-card {
        min-width: 0;
        /* Dozvoli sužavanje kartica */;
    }

    .ssk-search-card-content {
        padding: 0.75rem;
        /* Manji padding */;
    }

    .ssk-search-card-title {
        font-size: clamp(0.875rem, 2vw, 1rem);
        /* Manji font na mobilnom */;
    }

    .ssk-search-message {
        padding: 2rem 0.5rem;
    }

    .marbo-search-section .wp-block-search__input {
        padding: 0.55rem 100px 0.55rem 1rem !important;
        font-size: 0.9rem !important;
    }

    .marbo-search-section .wp-block-search__button {
        padding: 0.4rem 0.9rem !important;
        font-size: 0.85rem !important;
    }

    /* SAMO za marbo-search-section - forsira kolone u novi red */
    .marbo-search-section.wp-block-columns,
    .marbo-search-section.is-layout-flex {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        row-gap: var(--wp--preset--spacing--medium) !important;
    }

    .marbo-search-section > .wp-block-column,
    .marbo-search-section .wp-block-column {
        flex-basis: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .marbosoft-story {
        /* Padding se podešava ručno u WordPress control panelu */;
    }

    .marbo-category-6 .wp-block-cover {
        border-radius: 10px;
        /* aspect-ratio 1/1 održava kvadratni oblik automatski */;
    }

    .marbo-category-6 .wp-block-cover h3 {
        font-size: clamp(1.04rem, 2.6vw, 1.17rem) !important;
        /* Povećano za 30% */
        padding: 0.4rem 0.8rem !important;
        /* Manji padding na mobilnom */;
    }

    .marbo-category-4 .wp-block-cover {
        border-radius: 10px;
        /* aspect-ratio 1/1 održava kvadratni oblik automatski */;
    }

    .marbo-category-4 .wp-block-cover h3 {
        font-size: clamp(1.04rem, 2.6vw, 1.17rem) !important;
        /* Povećano za 30% */
        padding: 0.4rem 0.8rem !important;
        /* Manji padding na mobilnom */;
    }

    .wp-block-query-pagination {
        gap: 0.5rem !important;
        padding: 1rem 0.5rem !important;
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .marbo-category-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .marbo-category-grid-5 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .marbo-category-grid {
        gap: 1rem;
    }

    .marbo-category-grid-5,
    .marbo-category-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .marbo-category-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .marbo-category-card {
        min-height: 180px;
    }

    .marbo-category-content {
        padding: 1.5rem 1rem;
    }

    .marbo-category-name {
        font-size: clamp(1.125rem, 2.5vw, 1.25rem) !important;
    }

    .marbo-category-count {
        font-size: 0.8rem;
    }

    .marbo-category-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .wp-block-query-pagination-numbers {
        gap: 0.375rem !important;
    }

    .wp-block-query-pagination a,
    .wp-block-query-pagination .page-numbers {
        min-width: 38px !important;
        height: 38px !important;
        padding: 0.3rem 0.65rem !important;
        font-size: 0.875rem !important;
    }

    .wp-block-query-pagination-previous,
    .wp-block-query-pagination-next {
        padding: 0.3rem 0.85rem !important;
        font-size: 0.875rem !important;
    }

    .wp-block-query-pagination-previous,
        .wp-block-query-pagination-next {
        font-size: 0 !important;
        /* Sakriva tekst */
            padding: 0.4rem !important;
        min-width: 38px !important;
    }

    .wp-block-query-pagination-previous-arrow,
        .wp-block-query-pagination-next-arrow {
        font-size: 1.125rem !important;
        /* Strelice ostaju vidljive */;
    }

    /* ==========================================================================
       NEWSLETTER POPUP - MOBILE RESPONSIVE (ISPRAVLJENA VERZIJA)
       ========================================================================== */

    /* Popup Content - Max 80vh visina, auto scroll, box-sizing */
    .ssk-newsletter-content {
        width: 92%;
        max-width: 92%;
        max-height: 80vh !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* Two-column layout → Single column za mobilni */
    .ssk-newsletter-inner {
        flex-direction: column;
        min-height: auto;
        box-sizing: border-box !important;
    }

    /* Slika - SAKRIJ potpuno na mobilnom (ušteda prostora) */
    .ssk-newsletter-image {
        display: none !important;
    }

    /* Popup Body - Kompaktan padding, box-sizing */
    .ssk-newsletter-body {
        padding: 1.5rem 1.25rem;
        box-sizing: border-box !important;
    }

    /* Close Button - Veće za touch, vidljivo */
    .ssk-newsletter-close {
        width: 44px !important;
        height: 44px !important;
        top: 0.5rem;
        right: 0.5rem;
        background: rgba(255, 255, 255, 0.95) !important;
        opacity: 1 !important;
        z-index: 10;
    }

    .ssk-newsletter-close:hover {
        background: var(--ss-color-accent) !important;
    }

    /* Title - Smanji font za mobilni */
    .ssk-newsletter-title {
        font-size: clamp(1.25rem, 4.5vw, 1.5rem) !important;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    /* Subtitle - Smanji font i margin */
    .ssk-newsletter-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 1.25rem;
        line-height: 1.4;
    }

    /* Input i Button - Stack vertikalno, kompaktno */
    .ssk-newsletter-input-wrapper {
        flex-direction: column;
        gap: 0.625rem;
    }

    /* Input - Full width, box-sizing */
    .ssk-newsletter-input {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0.875rem 1rem !important;
        font-size: 0.9375rem !important;
        box-sizing: border-box !important;
    }

    /* Submit - Full width, box-sizing */
    .ssk-newsletter-submit {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
        box-sizing: border-box !important;
    }

    /* Newsletter Form - Smanji margin */
    .ssk-newsletter-form {
        margin-bottom: 1rem;
    }

    /* Privacy text - Smanji font */
    .ssk-newsletter-privacy {
        font-size: 0.75rem !important;
        line-height: 1.3;
    }

    .marbo-subscription .es_subscription_form {
        line-height: normal;
    }

    .marbo-subscription .es_caption {
        margin-bottom: 0.5rem !important;
    }

    .marbo-subscription .es-field-wrap {
        display: block !important;
        width: 90% !important;
        max-width: 90% !important;
        margin: 0.5rem auto !important;
        padding: 0 !important;
    }

    /* Email field (drugi field-wrap) - veći razmak dole */
    .marbo-subscription .es-field-wrap:nth-of-type(2) {
        margin-bottom: 1rem !important;
    }

    /* Input polja - fix padding na mobilnom */
    .marbo-subscription .es-field-wrap input[type="text"],
    .marbo-subscription .es-field-wrap input[type="email"] {
        margin-right: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .marbo-subscription .es_subscription_form > p {
        display: block !important;
        width: auto !important;
        max-width: 90% !important;
        margin: 0.5rem auto !important;
        padding: 0 !important;
        text-align: center;
    }

    /* Resetuj sve br tagove */
    .marbo-subscription br {
        display: none !important;
    }

    /* Subscribe button - auto širina, centriran, razmak gore */
    .marbo-subscription input[type="submit"],
    .marbo-subscription .es_subscription_form_submit {
        width: auto !important;
        margin: 1rem auto 0 auto !important;
        display: inline-block !important;
    }

    .marbo-footer-col .wp-block-column:first-child,
    .marbo-footer-col .wp-block-column:last-child {
        text-align: center !important;
    }

    .marbo-footer-col .wp-block-column:first-child *,
    .marbo-footer-col .wp-block-column:last-child * {
        justify-content: center !important;
    }

    .marbo-col-728 {
        padding-left: var(--wp--preset--spacing--small, 1rem);
        padding-right: var(--wp--preset--spacing--small, 1rem);
    }

    /* Targetiranje svih varijanti WordPress klasa */
    .marbo-2-col-layout.wp-block-columns,
    .marbo-2-col-layout.wp-block-columns.is-layout-flex,
    .marbo-2-col-layout.wp-block-columns.wp-block-columns-is-layout-flex,
    .wp-block-columns.marbo-2-col-layout.is-layout-flex {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        display: flex !important;
    }

    /* Targetiranje svih child columns */
    .marbo-2-col-layout.wp-block-columns > .wp-block-column,
    .marbo-2-col-layout.wp-block-columns.is-layout-flex > .wp-block-column,
    .marbo-2-col-layout.wp-block-columns > .wp-block-column.is-layout-flow,
    .marbo-2-col-layout.wp-block-columns > .wp-block-column.wp-block-column-is-layout-flow {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        flex-grow: 1 !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 1. SAKRIJ SOCIAL IKONICE - pojačan selektor */
    .marbo-social-header,
    .marbo-stack-right .marbo-social-header,
    .marbo-socsearch .marbo-social-header,
    ul.marbo-social-header.wp-block-social-links {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* 2. RESETUJ ORDER - prirodan HTML redosled (search pa hamburger) */
    .marbo-header .marbo-socsearch,
    .marbo-header .wp-block-group.is-vertical > nav.wp-block-navigation {
        order: unset !important;
    }

    /* 3. STACK DESNO - postaje row (horizontalno) */
    .marbo-stack-right,
    .marbo-header .wp-block-group.is-vertical {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: var(--wp--preset--spacing--30, 1rem) !important;
    }

    /* 4. SOCSEARCH - row layout sa search */
    .marbo-socsearch {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--wp--preset--spacing--30, 0.5rem) !important;
    }

    /* 5. HEADER ROW - standardna mobilna visina (override inline style) */
    /* MAKSIMALNA SPECIFIČNOST - targetiranje svih parent i child divova */
    header.marbo-header div.alignfull[style*="min-height"],
    header.marbo-header div.has-global-padding[style*="min-height"],
    header.marbo-header div.wp-block-group.alignwide.marbo-row-container,
    header.marbo-header div.marbo-row-container.is-layout-flex,
    .marbo-header div[style*="min-height:100px"] {
        min-height: 100px !important;
        /* Mobilni standard: 100px */
        max-height: 100px !important;
        /* Dodatno forsiranje */;
    }

}


/* ==========================================================================
   DESKTOP: >= 768px
   ========================================================================== */
@media (min-width: 768px) {

    /* Enhance the glossy effect for larger screens */
    :root {
        --ss-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
        --ss-border-radius: 12px;
    }

    .wp-block-button__link {
        padding: 1rem 1.75rem;
    }

    .marbo-header .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    .ssk-search-results-grid {
        grid-template-columns: repeat(4, 1fr);
        /* Desktop: 4 kolone */
        gap: 1.5rem;
    }

    .marbo-subscription .es_subscription_form {
        text-align: center;
        line-height: 0;
        font-size: 0;
        /* Ukloni white-space između inline elemenata */;
    }

    .marbo-subscription .es-field-wrap {
        display: inline-block !important;
        vertical-align: middle !important;
        width: 22% !important;
        margin: 0.5rem 2rem 0.5rem 0 !important;
        line-height: normal;
        font-size: 1rem;
    }

    /* Resetuj margin na INPUT poljima (wrapper ima margin) */
    .marbo-subscription .es-field-wrap input[type="text"],
    .marbo-subscription .es-field-wrap input[type="email"] {
        margin: 0 !important;
    }

    .marbo-subscription .es_subscription_form > p {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0.5rem 0 0.5rem 1rem !important;
        line-height: normal;
        font-size: 1rem;
    }

    /* Pojačan selektor za override inline style */
    div.wp-block-group.marbo-row-container.alignwide,
    .wp-block-group.alignwide.marbo-row-container.is-layout-flex,
    div.marbo-row-container[style*="min-height"] {
        min-height: 100px !important;
        /* Desktop: 100px (override inline 120px) */;
    }

}