/* ============================================================
   OTO Wellness style — header & footer
   Tokens captured from www.otowellness.com.sg:
   font: Montserrat / weight 300 / 16px base
   announce bg: #171717 / text white / height 33px
   text body: #333
   menu link: #171717 default, #cc3366 active
   cta orange: #ee852a
   search pill: bg rgba(217,217,217,0.46) radius 30px height 41
   footer bg: #f2f2f2 / heading #000 25/600 / link #333 16/300
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --oto-bg:             #ffffff;
    --oto-text:           #171717;
    --oto-text-soft:      #333333;
    --oto-text-muted:     #898989;
    --oto-border:         #e5e5e5;
    --oto-border-soft:    #ececec;

    --oto-announce-bg:    #171717;
    --oto-announce-text:  #ffffff;

    --oto-footer-bg:      #f2f2f2;
    --oto-footer-text:    #333333;
    --oto-footer-heading: #000000;
    --oto-footer-divider: #d6d6d6;

    --oto-search-bg:      rgba(217, 217, 217, 0.46);
    --oto-search-bg-hov:  rgba(217, 217, 217, 0.7);

    --oto-cta:            #ee852a;
    --oto-cta-hov:        #d97619;
    --oto-accent:         #cc3366;

    /* Compatibility with theme code expecting orange brand */
    --primary: #ee852a !important;
    --hov-primary: #d97619 !important;
    --soft-primary: rgba(238, 133, 42, 0.15) !important;
}

/* ============================================================
   GLOBAL FONT
   ============================================================ */
body,
.body,
.front-app,
.aiz-main-wrapper,
header,
footer,
.oto-header,
.oto-footer {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    color: var(--oto-text-soft);
    font-weight: 300;
    font-size: 16px;
}

/* ============================================================
   ANNOUNCEMENT BAR (top thin black strip)
   ============================================================ */
.oto-announce {
    background-color: var(--oto-announce-bg);
    color: var(--oto-announce-text);
    width: 100%;
}

.oto-announce-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    padding: 8px 0;
    text-align: center;
}

.oto-announce-text {
    color: var(--oto-announce-text);
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

/* Hidden legacy top-bar — kept for #lang-change / #currency-change JS bindings */
.oto-top-navbar-hidden {
    display: none !important;
}

/* ============================================================
   MAIN HEADER — single row: left menu / center logo / right cluster
   ============================================================ */
header.oto-header,
header.allegro-header,
header.sticky-top,
header.bg-white {
    background-color: var(--oto-bg) !important;
    border-bottom: 1px solid var(--oto-border-soft) !important;
    box-shadow: none !important;
}

.oto-header-main,
header .logo-bar-area {
    background-color: var(--oto-bg) !important;
    padding: 14px 0 !important;
}

.oto-header-row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 60px !important;
    width: 100% !important;
}

/* LEFT: menu links */
.oto-nav-left {
    grid-column: 1 !important;
    justify-self: start !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 4px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

/* CENTER: logo */
.oto-logo {
    grid-column: 2 !important;
    justify-self: center !important;
    flex: 0 0 auto !important;
}

/* RIGHT cluster */
.oto-nav-right {
    grid-column: 3 !important;
    justify-self: end !important;
    flex: 0 0 auto !important;
}

.oto-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 9px !important;
    color: var(--oto-text) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    letter-spacing: 0.2px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: color 0.15s ease !important;
}

.oto-nav-link::after {
    display: none !important;
}

.oto-nav-link i.la-angle-down {
    font-size: 11px !important;
    margin-left: 5px !important;
    color: var(--oto-text-muted) !important;
}

.oto-nav-link:hover,
.oto-nav-link:hover i {
    color: var(--oto-cta) !important;
}

/* Logo (centered) */
.oto-logo {
    display: block !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.oto-logo img {
    display: block !important;
    height: 48px !important;
    width: auto !important;
    max-width: 200px !important;
}

/* RIGHT: cluster (search pill + account + icons) */
.oto-nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* Search pill */
.oto-search-pill {
    position: relative !important;
    width: 200px !important;
    flex-shrink: 0 !important;
    max-width: 100% !important;
    background-color: transparent !important;
    border: none !important;
}

.oto-search-pill form {
    margin: 0 !important;
    width: 100% !important;
}

.oto-search-box,
.oto-search-pill .allegro-search-box {
    border: none !important;
    border-radius: 30px !important;
    background-color: var(--oto-search-bg) !important;
    height: 41px !important;
    padding: 0 16px !important;
    overflow: visible !important;
    transition: background-color 0.15s ease !important;
}

.oto-search-box:hover,
.oto-search-pill .allegro-search-box:hover,
.oto-search-box:focus-within,
.oto-search-pill .allegro-search-box:focus-within {
    background-color: var(--oto-search-bg-hov) !important;
}

.oto-search-leading-icon {
    color: var(--oto-text-muted) !important;
    font-size: 16px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.oto-search-input,
.oto-search-pill .allegro-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    height: 100% !important;
    background: transparent !important;
    color: var(--oto-text) !important;
    min-width: 0 !important;
}

.oto-search-input::placeholder {
    color: var(--oto-text-muted) !important;
}

.oto-search-submit-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

/* Typed search dropdown anchored to pill */
.oto-search-pill .typed-search-box {
    top: calc(100% + 6px) !important;
    left: 0 !important;
    width: 360px !important;
    border: 1px solid var(--oto-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* Account text + icon */
.oto-account {
    display: inline-flex !important;
    align-items: center !important;
}

.oto-account-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--oto-text) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    padding: 8px 6px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: color 0.15s ease !important;
}

.oto-account-link::after {
    display: none !important;
}

.oto-account-link i {
    font-size: 20px !important;
    color: var(--oto-text) !important;
}

.oto-account-text {
    color: var(--oto-text) !important;
}

.oto-account-link:hover,
.oto-account-link:hover i,
.oto-account-link:hover .oto-account-text {
    color: var(--oto-cta) !important;
}

/* Icon pills (cart / wishlist / compare / notifications) */
.oto-icon-pill {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.oto-icon-pill > a,
.oto-icon-pill .oto-icon-link,
.oto-icon-pill .nav-cart-box > a,
.oto-icon-pill .allegro-icon-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: var(--oto-text) !important;
    background: transparent !important;
    text-decoration: none !important;
    flex-direction: row !important;
    font-size: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    position: relative !important;
}

.oto-icon-pill > a:hover,
.oto-icon-pill .oto-icon-link:hover,
.oto-icon-pill .nav-cart-box > a:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: var(--oto-cta) !important;
}

.oto-icon-pill i {
    font-size: 22px !important;
    color: inherit !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Hide the inline text label coming from partials */
header .nav-cart-box .nav-box-text,
header #compare .nav-box-text,
header #wishlist .nav-box-text {
    display: none !important;
}

/* Shrink the wrapper span so icon stays centered; badge floats absolutely */
header .nav-cart-box > a > span.flex-grow-1,
header #compare > a > span.flex-grow-1,
header #wishlist > a > span.flex-grow-1 {
    flex: 0 0 auto !important;
    margin: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    position: relative !important;
    display: inline-block !important;
}

header .nav-cart-box .badge,
header #compare .badge,
header #wishlist .badge,
.oto-badge-dot,
.allegro-badge-dot {
    background-color: var(--oto-cta) !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 8px !important;
    padding: 0 4px !important;
    line-height: 16px !important;
    text-align: center !important;
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    display: inline-block !important;
}

.oto-badge-dot,
.allegro-badge-dot {
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    top: -2px !important;
    right: -2px !important;
}

/* Hide empty badges (count = 0 spans rendered as ".badge-pill" with text "0") */
/* We can't use :empty since "0" exists, so leave them visible but ensure they read clearly */

/* Account dropdown menu */
.allegro-account-dropdown .dropdown-menu {
    min-width: 220px !important;
    border: 1px solid var(--oto-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 !important;
    margin-top: 12px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.allegro-account-dropdown .dropdown-item {
    padding: 9px 18px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--oto-text-soft) !important;
}

.allegro-account-dropdown .dropdown-item:hover {
    background-color: #fafafa !important;
    color: var(--oto-cta) !important;
}

/* ============================================================
   KATEGORIE DROPDOWN (Shop menu)
   ============================================================ */
.kategorie-dropdown-menu {
    min-width: 280px !important;
    max-height: 460px !important;
    overflow-y: auto !important;
    padding: 8px 0 !important;
    border: 1px solid var(--oto-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    margin-top: 10px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.kategorie-dropdown-menu .dropdown-item {
    padding: 9px 18px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--oto-text-soft) !important;
    display: flex !important;
    align-items: center !important;
}

.kategorie-dropdown-menu .dropdown-item:hover {
    background-color: #fafafa !important;
    color: var(--oto-cta) !important;
}

.kategorie-dropdown-menu .dropdown-item .cat-icon {
    width: 22px !important;
    margin-right: 10px !important;
    text-align: center !important;
    color: var(--oto-text-muted) !important;
}

.kategorie-dropdown-menu .see-all-link {
    font-weight: 500 !important;
    color: var(--oto-cta) !important;
}

.kategorie-dropdown-menu .dropdown-divider {
    margin: 6px 0 !important;
    border-color: var(--oto-border) !important;
}

/* ============================================================
   PRIMARY COLOR UTILITY OVERRIDES (now orange #ee852a)
   ============================================================ */
.text-primary { color: var(--oto-cta) !important; }
.bg-primary { background-color: var(--oto-cta) !important; }
.border-primary { border-color: var(--oto-cta) !important; }
.badge-primary { background-color: var(--oto-cta) !important; color: #fff !important; }
.btn-primary {
    background-color: var(--oto-cta) !important;
    border-color: var(--oto-cta) !important;
    font-family: 'Montserrat', sans-serif !important;
}
.btn-primary:hover {
    background-color: var(--oto-cta-hov) !important;
    border-color: var(--oto-cta-hov) !important;
}
a.hov-text-primary:hover { color: var(--oto-cta) !important; }

/* ============================================================
   FOOTER — light gray, 4 columns
   ============================================================ */
.oto-footer,
.allegro-footer-section {
    background-color: var(--oto-footer-bg) !important;
    color: var(--oto-footer-text) !important;
    padding: 56px 0 24px !important;
    border-top: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300 !important;
}

.oto-footer .container > .row {
    padding-bottom: 24px !important;
}

.oto-footer-col {
    color: var(--oto-footer-text) !important;
}

.oto-footer-brand .oto-footer-logo {
    height: 44px !important;
    width: auto !important;
    max-width: 200px !important;
}

.oto-footer-about {
    color: var(--oto-footer-text) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.7 !important;
    margin-bottom: 14px !important;
}

.oto-footer-title,
.allegro-footer-title {
    color: var(--oto-footer-heading) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-bottom: 18px !important;
    line-height: 1.3 !important;
}

.oto-footer-links,
.allegro-footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.oto-footer-links li,
.allegro-footer-links li {
    margin-bottom: 8px !important;
}

.oto-footer-links a,
.allegro-footer-links a {
    color: var(--oto-footer-text) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    line-height: 1.6 !important;
}

.oto-footer-links a:hover,
.allegro-footer-links a:hover {
    color: var(--oto-cta) !important;
    text-decoration: none !important;
}

.oto-footer-contact li {
    display: block !important;
    color: var(--oto-footer-text) !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

.oto-contact-label {
    color: var(--oto-footer-text) !important;
    margin-right: 6px !important;
}

.oto-footer-contact li a,
.oto-footer-contact li span {
    color: var(--oto-footer-text) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
}

/* Bottom row inside footer (copyright + social) */
.oto-footer-bottom {
    padding-top: 20px !important;
    border-top: 1px solid var(--oto-footer-divider) !important;
    margin-top: 16px !important;
}

.oto-copyright {
    color: var(--oto-footer-text) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
}

/* Social icons — circular outline / fill on hover (brand colors) */
.oto-social-links,
.allegro-social-links {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.oto-social-links .social-icon,
.allegro-social-links .social-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--oto-footer-heading) !important;
    color: #fff !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
    opacity: 1 !important;
}

.oto-social-links .social-icon i,
.allegro-social-links .social-icon i {
    font-size: 14px !important;
    color: #fff !important;
}

.oto-social-links .social-icon:hover,
.allegro-social-links .social-icon:hover {
    transform: translateY(-2px) !important;
}

.oto-social-links .social-facebook:hover,
.allegro-social-links .social-facebook:hover { background-color: #1877f2 !important; }
.oto-social-links .social-instagram:hover,
.allegro-social-links .social-instagram:hover { background-color: #e4405f !important; }
.oto-social-links .social-youtube:hover,
.allegro-social-links .social-youtube:hover { background-color: #ff0000 !important; }
.oto-social-links .social-linkedin:hover,
.allegro-social-links .social-linkedin:hover { background-color: #0a66c2 !important; }
.oto-social-links .social-pinterest:hover,
.allegro-social-links .social-pinterest:hover { background-color: #e60023 !important; }

/* Suppress legacy app-buttons / settings list / footer-bar - not used by OTO design */
.allegro-app-buttons,
.allegro-footer-settings,
.allegro-footer-bottom-row,
.allegro-footer-bar {
    display: none !important;
}

/* ============================================================
   MOBILE HEADER
   ============================================================ */
.allegro-mobile-header {
    background-color: #fff !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--oto-border-soft) !important;
}

.mobile-header-row1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
}

.mobile-logo img {
    height: 32px !important;
    width: auto !important;
}

.mobile-header-icons {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

.mobile-icon-item {
    position: relative !important;
    color: var(--oto-text) !important;
    font-size: 22px !important;
    text-decoration: none !important;
}

.mobile-icon-item:hover {
    color: var(--oto-cta) !important;
}

.mobile-icon-badge {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background-color: var(--oto-cta) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
}

.mobile-header-row2 {
    padding: 10px 16px 14px !important;
}

.mobile-search-form { width: 100% !important; }

.mobile-search-box {
    display: flex !important;
    align-items: center !important;
    border: none !important;
    border-radius: 30px !important;
    background-color: var(--oto-search-bg) !important;
    height: 42px !important;
    overflow: hidden !important;
    padding-left: 14px !important;
}

.mobile-search-leading-icon {
    color: var(--oto-text-muted) !important;
    font-size: 16px !important;
    margin-right: 8px !important;
}

.mobile-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    padding: 0 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    height: 100% !important;
    background: transparent !important;
    color: var(--oto-text) !important;
}

.mobile-search-input::placeholder {
    color: var(--oto-text-muted) !important;
}

.mobile-search-btn {
    background-color: var(--oto-cta) !important;
    border: none !important;
    color: #fff !important;
    width: 50px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    border-radius: 0 30px 30px 0 !important;
}

/* ============================================================
   MOBILE BOTTOM NAV (fixed bar)
   ============================================================ */
.allegro-mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #fff !important;
    border-top: 1px solid var(--oto-border) !important;
    z-index: 1030 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.mobile-bottom-nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 56px !important;
}

.mobile-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: var(--oto-text-muted) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    padding: 6px 12px !important;
    position: relative !important;
    transition: color 0.15s ease !important;
}

.mobile-bottom-nav-item i {
    font-size: 22px !important;
    margin-bottom: 2px !important;
}

.mobile-bottom-nav-item.active,
.mobile-bottom-nav-item:hover {
    color: var(--oto-cta) !important;
}

.mobile-bottom-nav-badge {
    position: absolute !important;
    top: 2px !important;
    right: 4px !important;
    background-color: var(--oto-cta) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
}

@media (max-width: 991.98px) {
    body { padding-bottom: 64px !important; }
    .oto-footer,
    .allegro-footer-section { padding-bottom: 24px !important; }
}

/* ============================================================
   Misc — keep neutral
   ============================================================ */
.dropdown-menu {
    border: 1px solid var(--oto-border) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.product-price {
    color: var(--oto-text) !important;
    font-weight: 600 !important;
}

.product-price-old {
    color: var(--oto-text-muted) !important;
    text-decoration: line-through !important;
}

/* Narrower screens: shrink right cluster */
@media (max-width: 1399.98px) {
    .oto-search-pill { width: 160px !important; }
    .oto-account-text { display: none !important; }
    .oto-account-link { padding: 8px 4px !important; }
    .oto-nav-link { padding: 8px 8px !important; font-size: 13px !important; }
    .oto-header-row { gap: 12px !important; }
    .oto-nav-right { gap: 6px !important; }
}

@media (max-width: 1199.98px) {
    .oto-search-pill { width: 140px !important; }
    .oto-icon-pill.allegro-icon-item.dropdown.d-none.d-xl-inline-flex,
    .oto-icon-pill.allegro-icon-item.d-none.d-xl-inline-flex { display: none !important; }
}