/* =====================================================================
   Storefront Top Bar + Header - Premium skin
   Load AFTER custom-style.css (and after seller-premium.css if used).
   Pure CSS: no markup / logic touched. Desktop (>=992px) is restyled;
   mobile keeps the original layout.
   Re-theme: change --hp-accent / --hp-accent-2.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --hp-accent: #2f6bff;
    --hp-accent-2: #6a5cff;
    --hp-accent-soft: rgba(47, 107, 255, 0.10);
    --hp-ink: #0f172a;
    --hp-muted: #64748b;
    --hp-line: #e8ecf4;
    --hp-shadow-lg: 0 14px 34px rgba(47, 107, 255, 0.28);
}

/* ---------------------------------------------------------------------
   TOP BAR
   --------------------------------------------------------------------- */
.header .top-navbar {
    background: #ffffff;
    border-bottom: 1px solid var(--hp-line);
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    position: relative;
}
/* hide language + currency switchers in the top bar */
.header .top-navbar #lang-change,
.header .top-navbar #currency-change { display: none !important; }
.header .top-navbar .top-bar-item {
    padding: 9px 0;
    font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
    color: #475569 !important;
    transition: color .15s ease;
}
.header .top-navbar a:hover,
.header .top-navbar .top-bar-item:hover,
.header .top-navbar .dropdown.show > a { color: var(--hp-accent) !important; }
.header .top-navbar .dropdown-toggle::after { opacity: .65; margin-left: .45em; }

/* divider between right-hand links */
.header .top-navbar .col-5 .inline-links > li { position: relative; }
.header .top-navbar .col-5 .inline-links > li + li { padding-left: 12px; }
.header .top-navbar .col-5 .inline-links > li + li::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px;
    margin-top: -6px; background: rgba(15, 23, 42, .14);
}

/* language / currency dropdown */
.header .top-navbar .inline-links .flag {
    margin-right: 8px; border-radius: 2px; vertical-align: -1px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}
.header .top-navbar .dropdown-menu {
    min-width: 11rem; padding: 6px;
    background: #fff; border: 1px solid var(--hp-line);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
}
.header .top-navbar .dropdown-menu .dropdown-item {
    border-radius: 9px; background: transparent;
}
.header .top-navbar .dropdown-menu .dropdown-item a {
    padding: 8px 10px; font-size: 13px !important; font-weight: 500;
    color: #334155 !important; border-radius: 9px;
}
.header .top-navbar .dropdown-menu .dropdown-item:hover,
.header .top-navbar .dropdown-menu .dropdown-item.active { background: var(--hp-accent-soft); }
.header .top-navbar .dropdown-menu .dropdown-item:hover a,
.header .top-navbar .dropdown-menu .dropdown-item.active a { color: var(--hp-accent) !important; }

/* ---------------------------------------------------------------------
   HEADER / LOGO BAR  (desktop)
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
    .header .logo-bar-area {
        padding: 14px 0;
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: saturate(160%) blur(10px);
        backdrop-filter: saturate(160%) blur(10px);
        border-bottom: 1px solid var(--hp-line);
        box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
        font-family: 'Inter', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    }
    .header .logo-bar-area .navbar-brand img { max-height: 46px; transition: transform .2s ease; }
    .header .logo-bar-area .navbar-brand:hover img { transform: scale(1.03); }

    /* category button (inner pages) : Etsy-style "☰ Categories" pill */
    .header .category-menu-icon-box { width: auto; min-width: 0; flex: 0 0 auto; margin: 0 16px 0 6px; }
    .header .category-menu-icon {
        display: inline-flex; align-items: center; gap: .55rem;
        height: 46px; padding: 0 1rem 0 .85rem; line-height: 1; white-space: nowrap;
        background: #fff; border: 1.5px solid var(--hp-line); border-radius: 999px;
        color: var(--hp-ink); font-size: 13.5px; font-weight: 600; letter-spacing: .005em;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
        transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .header .category-menu-icon .navbar-toggler-icon {
        width: 1.25em; height: 1.25em; flex: 0 0 auto; opacity: .85; transition: filter .18s ease;
    }
    .header .category-menu-icon::after {                  /* caret -> chevron */
        margin: 0 0 0 .1rem; border: 0;
        width: .5rem; height: .5rem; vertical-align: 0;
        border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
        transform: rotate(45deg) translateY(-2px); transition: transform .18s ease, border-color .18s ease;
    }
    .header .category-menu-icon:hover {
        background: var(--hp-accent-soft); border-color: rgba(47, 107, 255, .4); color: var(--hp-accent);
        transform: translateY(-1px); box-shadow: 0 8px 20px rgba(47, 107, 255, .14);
    }
    .header .category-menu-icon:hover::after { border-color: var(--hp-accent); }
    .header .category-menu-icon.active {
        background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2)); border-color: transparent;
        color: #fff; box-shadow: var(--hp-shadow-lg);
    }
    .header .category-menu-icon.active .navbar-toggler-icon { filter: invert(1) brightness(2); opacity: 1; }
    .header .category-menu-icon.active::after { border-color: #fff; transform: rotate(-135deg) translateY(-2px); }

    /* ---------- search pill ---------- */
    .header .search-box form > .d-flex {
        align-items: center;
        height: 50px;
        background: #f1f5f9;
        border: 1.5px solid transparent;
        border-radius: 999px;
        padding: 0 5px 0 6px;
        transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .header .search-box form > .d-flex:hover { background: #eaeff7; }
    .header .search-box form > .d-flex:focus-within {
        background: #fff; border-color: var(--hp-accent);
        box-shadow: 0 0 0 4px var(--hp-accent-soft), 0 10px 28px rgba(47, 107, 255, .12);
    }
    .header .search-box input[type="text"] {
        height: 44px; padding: 0 1rem 0 1.1rem;
        background: transparent; border: 0 !important; border-radius: 0 !important;
        font-size: 14px; color: var(--hp-ink); box-shadow: none; outline: 0;
    }
    .header .search-box input[type="text"]::placeholder { color: #94a3b8; }
    .header .search-box button.d-lg-block {
        flex: 0 0 auto;
        width: 42px; height: 40px; padding: 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2)) !important;
        color: #fff; font-size: 22px; line-height: 40px;
        box-shadow: var(--hp-shadow-lg);
        display: inline-flex !important; align-items: center; justify-content: center;
        transition: transform .15s ease, filter .15s ease;
    }
    .header .search-box button.d-lg-block:hover { transform: scale(1.06); filter: brightness(1.08); }

    /* live-search dropdown */
    .header .typed-search-box {
        top: calc(100% + 12px); left: 0; width: 100%;
        border: 1px solid var(--hp-line); border-radius: 18px; overflow: hidden;
        box-shadow: 0 28px 70px rgba(15, 23, 42, .20);
    }

    /* ---------- compare / wishlist / cart ---------- */
    .header .logo-bar-icons { display: flex; align-items: center; margin-left: 12px; }
    .header .logo-bar-icons > div:not(:first-of-type) { margin-left: 4px; }

    .header .logo-bar-icons .nav-compare-box .nav-box-link,
    .header .logo-bar-icons .nav-wishlist-box .nav-box-link,
    .header .logo-bar-icons .nav-cart-box .nav-box-link,
    .header .logo-bar-icons .nav-search-box .nav-box-link {
        display: flex; flex-direction: column; align-items: center; gap: 1px;
        padding: 6px 12px 5px;
        border-radius: 14px;
        color: #475569;
        transition: background .18s ease, color .18s ease, transform .18s ease;
    }
    .header .logo-bar-icons .nav-compare-box .nav-box-link:hover,
    .header .logo-bar-icons .nav-wishlist-box .nav-box-link:hover,
    .header .logo-bar-icons .nav-cart-box .nav-box-link:hover,
    .header .logo-bar-icons .nav-search-box .nav-box-link:hover,
    .header .logo-bar-icons .nav-cart-box.show .nav-box-link {
        background: var(--hp-accent-soft); color: var(--hp-accent); transform: translateY(-1px);
    }
    .header .logo-bar-icons .nav-compare-box .nav-box-icon,
    .header .logo-bar-icons .nav-wishlist-box .nav-box-icon,
    .header .logo-bar-icons .nav-cart-box .nav-box-icon,
    .header .logo-bar-icons .nav-search-box .nav-box-icon {
        font-size: 27px; width: auto; line-height: 30px; color: inherit;
        transition: transform .18s ease;
    }
    .header .logo-bar-icons .nav-box-link:hover .nav-box-icon { transform: scale(1.08); }
    .header .logo-bar-icons .nav-compare-box .nav-box-text,
    .header .logo-bar-icons .nav-wishlist-box .nav-box-text,
    .header .logo-bar-icons .nav-cart-box .nav-box-text {
        font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: inherit;
    }

    /* count badges */
    .header .logo-bar-icons .nav-compare-box .nav-box-number,
    .header .logo-bar-icons .nav-wishlist-box .nav-box-number,
    .header .logo-bar-icons .nav-cart-box .nav-box-number,
    .header .logo-bar-icons .nav-search-box .nav-box-number {
        top: 0; left: auto; right: 4px;
        min-width: 19px; height: 19px; line-height: 16px; padding: 0 5px;
        font-size: 10.5px; font-weight: 700;
        background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2)) !important;
        border: 2px solid #fff; border-radius: 999px;
        box-shadow: 0 4px 10px rgba(47, 107, 255, .35);
    }

    /* mini cart dropdown */
    .header .nav-cart-box .dropdown-menu {
        margin-top: 8px; padding: 0; min-width: 22rem;
        border: 1px solid var(--hp-line); border-radius: 18px; overflow: hidden;
        box-shadow: 0 28px 70px rgba(15, 23, 42, .20);
    }
    .header .dropdown-cart .dc-header {
        padding: 14px 18px; text-align: left;
        background: linear-gradient(180deg, #fbfcff, #f6f8fd); border-bottom: 1px solid var(--hp-line);
    }
    .header .dropdown-cart .dc-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--hp-ink); }
    .header .dropdown-cart .dc-item { padding: 10px 18px; }
    .header .dropdown-cart .dc-btn .link--style-1 {
        background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2)) !important;
        border: 0; border-radius: 10px; color: #fff; font-weight: 600;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header * { transition: none !important; }
}