/* === Prenavljam Header Component === */
#prenavljam-header,
#prenavljam-header * { box-sizing: border-box; }
#prenavljam-header ul,
#prenavljam-header li { list-style: none; margin: 0; padding: 0; }
#prenavljam-header a  { text-decoration: none; }

#prenavljam-header {
    --prh-primary  : #02152b;
    --prh-muted    : #44474d;
    --prh-bg       : rgba(255, 255, 255, 0.92);
    --prh-low      : #eff4ff;
    --prh-border   : rgba(196, 198, 205, 0.35);
    --prh-shadow   : 0 4px 24px rgba(24, 42, 64, 0.06);
    --prh-yellow   : #ffbb1a;
    --prh-yellow-h : #d4a71a;
    --prh-error    : #ba1a1a;
    --prh-on-error : #ffffff;
    --prh-radius   : 10px;
    --prh-t        : 0.2s ease;

    background              : var(--prh-bg);
    backdrop-filter         : blur(20px);
    -webkit-backdrop-filter : blur(20px);
    position                : sticky;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    width                   : 100%;
    z-index                 : 9999;
    box-shadow              : var(--prh-shadow);
    font-family             : 'Work Sans', 'Inter', sans-serif;
    border-bottom           : 1px solid var(--prh-border);
}

/* ── Inner container ── */
.prh-inner {
    display     : flex;
    align-items : center;
    max-width   : 1440px;
    margin      : 0 auto;
    padding     : 0 1.25rem;
    height      : 60px;
    gap         : 1rem;
}
@media (min-width: 768px) {
    .prh-inner { height: 72px; padding: 0 2rem; }
}

/* ── Logo ── */
.prh-logo              { display: flex; align-items: center; flex-shrink: 0; }
.prh-logo a            { display: flex; align-items: center; }
.prh-logo img,
.prh-logo .custom-logo { max-height: 38px; width: auto; display: block; }
@media (min-width: 768px) {
    .prh-logo img,
    .prh-logo .custom-logo { max-height: 46px; }
}
.prh-fallback-logo {
    font-family    : 'Work Sans', sans-serif;
    font-size      : 1.2rem;
    font-weight    : 900;
    letter-spacing : -0.04em;
    text-transform : uppercase;
    color          : var(--prh-primary) !important;
}

/* ── Desktop navigation ── */
.prh-nav-desktop {
    display         : none;
    align-items     : center;
    flex            : 1;
    justify-content : center;
}
@media (min-width: 768px) { .prh-nav-desktop { display: flex; } }

.prh-desktop-menu-list      { display: flex; align-items: center; gap: 0.125rem; }
.prh-desktop-menu-list > li { position: relative; }

.prh-desktop-menu-list > li > a {
    display        : flex;
    align-items    : center;
    gap            : 0.2rem;
    padding        : 0.45rem 0.85rem;
    font-size      : 0.9rem;
    font-weight    : 600;
    letter-spacing : -0.01em;
    color          : var(--prh-muted);
    border-radius  : 8px;
    white-space    : nowrap;
    transition     : color var(--prh-t), background var(--prh-t);
}
.prh-desktop-menu-list > li > a:hover,
.prh-desktop-menu-list > li.current-menu-item > a,
.prh-desktop-menu-list > li.current-menu-ancestor > a,
.prh-desktop-menu-list > li.prh-dd-open > a {
    color      : var(--prh-primary);
    background : var(--prh-low);
}

/* Desktop dropdown — toggled by JS class, not CSS :hover */
.prh-desktop-menu-list .sub-menu {
    display       : none;
    position      : absolute;
    top           : calc(100% + 8px);
    left          : 0;
    min-width     : 200px;
    background    : #fff;
    border        : 1px solid var(--prh-border);
    border-radius : var(--prh-radius);
    box-shadow    : 0 12px 40px rgba(24, 42, 64, 0.10);
    padding       : 0.4rem;
    z-index       : 100;
}
.prh-desktop-menu-list > li.prh-dd-open > .sub-menu { display: block; }
.prh-desktop-menu-list > li.prh-dd-open > .prh-category-mega + .sub-menu { display: none; }
.prh-desktop-menu-list .sub-menu a {
    display       : block;
    padding       : 0.5rem 0.75rem;
    font-size     : 0.875rem;
    font-weight   : 500;
    color         : var(--prh-muted);
    border-radius : 6px;
    transition    : color var(--prh-t), background var(--prh-t);
}
.prh-desktop-menu-list .sub-menu a:hover {
    color      : var(--prh-primary);
    background : var(--prh-low);
}

.prh-category-mega {
    display       : none;
    position      : absolute;
    top           : calc(100% + 8px);
    left          : 0;
    width         : min(720px, calc(100vw - 2rem));
    min-height    : 320px;
    background    : #fff;
    border        : 1px solid var(--prh-border);
    border-radius : 12px;
    box-shadow    : 0 18px 48px rgba(24, 42, 64, 0.14);
    padding       : 0.45rem;
    z-index       : 100;
}
.prh-desktop-menu-list > li.prh-dd-open > .prh-category-mega { display: block; }
.prh-category-main {
    position     : relative;
    width        : 260px;
    min-height   : 300px;
    border-right : 1px solid rgba(196, 198, 205, 0.35);
    padding      : 0.2rem;
}
.prh-category-row { position: static; }
.prh-category-link {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 0.75rem;
    min-height      : 42px;
    padding         : 0.55rem 0.65rem;
    border-radius   : 8px;
    color           : var(--prh-muted);
    font-size       : 0.88rem;
    font-weight     : 600;
    transition      : color var(--prh-t), background var(--prh-t);
}
.prh-category-link .material-symbols-outlined {
    font-size                : 18px;
    line-height              : 1;
    font-variation-settings  : 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.prh-category-row:hover > .prh-category-link,
.prh-category-row.is-active > .prh-category-link {
    color      : var(--prh-primary);
    background : var(--prh-low);
}
.prh-subcat-panel {
    display   : none;
    position  : absolute;
    top       : 0;
    left      : 100%;
    width     : calc(min(720px, calc(100vw - 2rem)) - 260px - 0.9rem);
    min-height: 300px;
    padding   : 0.65rem 0.8rem 0.8rem 1rem;
}
.prh-category-row.is-active > .prh-subcat-panel,
.prh-category-row:hover > .prh-subcat-panel { display: block; }
.prh-category-main:hover .prh-category-row.is-active:not(:hover) > .prh-subcat-panel { display: none; }
.prh-category-main:hover .prh-category-row.is-active:not(:hover) > .prh-category-link {
    color      : var(--prh-muted);
    background : transparent;
}
.prh-subcat-panel h3 {
    margin         : 0 0 0.55rem;
    color          : var(--prh-primary);
    font-family    : 'Work Sans', sans-serif;
    font-size      : 0.95rem;
    font-weight    : 800;
    letter-spacing : 0;
}
.prh-subcat-grid {
    display               : grid;
    grid-template-columns : repeat(2, minmax(0, 1fr));
    gap                   : 0.25rem;
}
.prh-subcat-grid a {
    display       : block;
    padding       : 0.5rem 0.55rem;
    border-radius : 7px;
    color         : var(--prh-muted);
    font-size     : 0.84rem;
    font-weight   : 500;
    line-height   : 1.25;
    transition    : color var(--prh-t), background var(--prh-t);
}
.prh-subcat-grid a:hover {
    color      : var(--prh-primary);
    background : var(--prh-low);
}

/* ── Right-side group ── */
.prh-right {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
    flex-shrink : 0;
    margin-left : auto;
}

/* ── Search (desktop lg+) ── */
.prh-search { display: none; position: relative; align-items: center; }
@media (min-width: 1024px) { .prh-search { display: flex; } }

.prh-search-icon {
    position                : absolute;
    left                    : 0.75rem;
    top                     : 50%;
    transform               : translateY(-50%);
    font-family             : 'Material Symbols Outlined';
    font-size               : 18px;
    font-variation-settings : 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    color                   : var(--prh-muted);
    pointer-events          : none;
    line-height             : 1;
    opacity                 : 0.7;
}
.prh-search-input {
    width         : 220px;
    background    : var(--prh-low);
    border        : 1px solid rgba(196, 198, 205, 0.2);
    border-radius : 8px;
    padding       : 0.45rem 0.75rem 0.45rem 2.35rem;
    font-size     : 0.85rem;
    font-family   : 'Inter', sans-serif;
    color         : var(--prh-primary);
    outline       : none;
    transition    : border-color var(--prh-t), box-shadow var(--prh-t);
    -webkit-appearance: none;
    appearance: none;
}
.prh-search-input::-webkit-search-decoration,
.prh-search-input::-webkit-search-cancel-button,
.prh-search-input::-webkit-search-results-button,
.prh-search-input::-webkit-search-results-decoration { display: none; }
.prh-search-input::placeholder { color: rgba(68, 71, 77, 0.55); }
.prh-search-input:focus {
    border-color : var(--prh-primary);
    box-shadow   : 0 0 0 2px rgba(2, 21, 43, 0.08);
}

/* ── Koristne vsebine CTA (desktop md+) ── */
.prh-cta {
    display         : none;
    align-items     : center;
    justify-content : center;
    padding         : 0.45rem 1.1rem;
    border-radius   : 10px;
    font-family     : 'Work Sans', sans-serif;
    font-size       : 0.875rem;
    font-weight     : 600;
    letter-spacing  : -0.01em;
    white-space     : nowrap;
    background      : var(--prh-yellow);
    color           : var(--prh-primary) !important;
    box-shadow      : 0 4px 12px rgba(124, 88, 0, 0.15);
    transition      : background var(--prh-t), box-shadow var(--prh-t);
}
.prh-cta:hover {
    background : var(--prh-yellow-h);
    box-shadow : 0 6px 16px rgba(124, 88, 0, 0.22);
}
@media (min-width: 768px) { .prh-cta { display: flex; } }

/* ── Cart icon ── */
.prh-cart-btn {
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 40px;
    height          : 40px;
    border-radius   : 8px;
    color           : var(--prh-primary) !important;
    transition      : background var(--prh-t);
}
.prh-cart-btn:hover { background: var(--prh-low); }
.prh-cart-btn .material-symbols-outlined {
    font-size                : 22px;
    font-variation-settings  : 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height              : 1;
    display                  : block;
}

/* Cart badge */
.prh-cart-badge {
    position        : absolute;
    top             : 4px;
    right           : 4px;
    min-width       : 16px;
    height          : 16px;
    background      : var(--prh-error);
    color           : var(--prh-on-error);
    font-size       : 10px;
    font-weight     : 700;
    font-family     : 'Inter', sans-serif;
    border-radius   : 999px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 0 3px;
    border          : 1.5px solid var(--prh-bg);
    opacity         : 0;
    transform       : scale(0.6);
    transition      : opacity var(--prh-t), transform var(--prh-t);
}
.prh-cart-badge--active { opacity: 1; transform: scale(1); }

/* Cart tooltip */
.prh-cart-tooltip {
    position      : absolute;
    top           : calc(100% + 6px);
    right         : 0;
    white-space   : nowrap;
    background    : #fff;
    color         : var(--prh-primary);
    font-size     : 0.75rem;
    font-family   : 'Inter', sans-serif;
    font-weight   : 500;
    padding       : 0.3rem 0.6rem;
    border-radius : 6px;
    border        : 1px solid var(--prh-border);
    box-shadow    : 0 4px 12px rgba(24, 42, 64, 0.08);
    opacity       : 0;
    pointer-events: none;
    transition    : opacity var(--prh-t);
}
.prh-cart-btn:hover .prh-cart-tooltip { opacity: 1; }

/* ── Hamburger (mobile only) ── */
.prh-hamburger {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 40px;
    height          : 40px;
    background      : none;
    border          : none;
    cursor          : pointer;
    border-radius   : 8px;
    color           : var(--prh-primary);
    flex-shrink     : 0;
    padding         : 0;
    transition      : background var(--prh-t);
}
.prh-hamburger:hover { background: var(--prh-low); }
@media (min-width: 768px) { .prh-hamburger { display: none; } }
.prh-hamburger .material-symbols-outlined {
    font-size                : 24px;
    font-variation-settings  : 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height              : 1;
    display                  : block;
}
.prh-hamburger .prh-icon-close                       { display: none; }
.prh-hamburger[aria-expanded="true"] .prh-icon-menu  { display: none; }
.prh-hamburger[aria-expanded="true"] .prh-icon-close { display: block; }

/* ── Mobile drawer ── */
.prh-mobile-drawer {
    overflow   : hidden;
    max-height : 0;
    opacity    : 0;
    transition : max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                 opacity 0.25s ease;
    border-top : 0px solid var(--prh-border);
}
.prh-mobile-drawer.is-open {
    max-height : 80vh;
    opacity    : 1;
    border-top : 1px solid var(--prh-border);
    overflow-y : auto;
}
.prh-mobile-menu-list {
    padding   : 0.5rem 1.25rem 1.25rem;
    max-width : 1440px;
    margin    : 0 auto;
}
.prh-mobile-menu-list > li > a {
    display        : block;
    padding        : 0.85rem 0.25rem;
    font-size      : 1rem;
    font-weight    : 600;
    letter-spacing : -0.01em;
    color          : var(--prh-muted);
    border-bottom  : 1px solid var(--prh-border);
    transition     : color var(--prh-t);
}
.prh-mobile-menu-list > li:last-child > a { border-bottom: none; }
.prh-mobile-menu-list > li > a:hover,
.prh-mobile-menu-list > li.current-menu-item > a { color: var(--prh-primary); }
.prh-mobile-menu-list .sub-menu { padding-left: 1rem; }
.prh-mobile-menu-list .sub-menu li a {
    display       : block;
    padding       : 0.65rem 0.25rem;
    font-size     : 0.9rem;
    font-weight   : 500;
    color         : var(--prh-muted);
    border-bottom : 1px solid rgba(196, 198, 205, 0.2);
    transition    : color var(--prh-t);
}
.prh-mobile-menu-list .sub-menu li:last-child a { border-bottom: none; }
.prh-mobile-menu-list .sub-menu li a:hover     { color: var(--prh-primary); }