/* ═══════════════════════════════════════════════════════════════
   StickDecor — Header CSS (Global)
   Re-skins announce bar, navbar, search, language switcher, mega menu
   Applies on EVERY page
   ═══════════════════════════════════════════════════════════════ */

:root {
    --font-family-base: 'Noto Sans Hebrew', system-ui, -apple-system, sans-serif;
    --font-family-headings: 'Noto Sans Hebrew', system-ui, -apple-system, sans-serif;
    --hd-blue: #4DAAD5;
    --hd-blue-hover: #3A95BF;
    --hd-brand-deep: #1A8A8A;
    --hd-ink: #0F0F10;
    --hd-ink-700: #2A2A2D;
    --hd-ink-500: #6B7280;
    --hd-ink-400: #9CA3AF;
    --hd-ink-200: #E5E7EB;
    --hd-ink-100: #F3F4F6;
    --hd-ink-50: #FAFAFA;
}

/* ── ANNOUNCE BAR (dark coupon bar — top of every page) ──────── */
.announce {
    background: linear-gradient(90deg, #0F0F10 0%, #1F1F22 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    padding: 10px 0;
    position: relative;
    overflow: hidden;
}
.announce__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}
.announce__pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    background: #4DAAD5;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
}
.announce__divider { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); flex-shrink: 0; }
.announce__label { color: rgba(255,255,255,.75); font-size: 13px; }
.announce__code {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    background: rgba(255,255,255,.10);
    border: 1px dashed rgba(255,255,255,.35);
    border-radius: 6px;
    padding: 3px 10px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: background .2s;
    color: #fff;
}
.announce__code:hover { background: rgba(255,255,255,.18); }
.announce__code.copied { background: #10B981; border-color: #10B981; }
.announce__cta {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: opacity .2s;
}
.announce__cta:hover { opacity: .75; }
.announce__close {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.6);
    padding: 4px;
    border-radius: 4px;
    transition: color .2s;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.announce__close:hover { color: #fff; }

/* keep old .promotion-bar rules for fallback compatibility */
.promotion-bar,
.promotion-bar.bg-gray-100 {
    background: linear-gradient(90deg, #0F0F10 0%, #1F1F22 100%) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 10px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;
}

/* ── NAVBAR ──────────────────────────────────────────────────── */
.navbar,
.navbar.py-2 {
    background: rgba(255,255,255,.96) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--hd-ink-100) !important;
    padding: 12px 0 !important;
    transition: box-shadow .25s, background .25s !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}
.navbar__container {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

/* Logo */
.navbar__logo { flex-shrink: 0; }
.navbar__logo-img { height: 42px !important; width: auto !important; }

/* Search */
.navbar__search-wrapper,
.search-dropdown__form {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* Pill container — no margin (form's mx-2 handles outer spacing) */
    height: 48px !important;
    background: #fff !important;
    border: 1.5px solid rgba(0,0,0,.18) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    transition: border-color .2s, box-shadow .2s !important;
    padding: 0 !important;
    width: auto !important;
}
.navbar__search-wrapper:focus-within,
.navbar__search-wrapper:has(input:focus) {
    border-color: var(--hd-ink) !important;
    box-shadow: 0 0 0 3px rgba(15,15,16,.06) !important;
}
.navbar__search-wrapper input[type="search"],
.search-dropdown input[type="search"] {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 22px !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    font-size: 15px !important;
    color: var(--hd-ink) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    height: 100% !important;
}
.navbar__search-wrapper input[type="search"]:focus { outline: 0 !important; box-shadow: none !important; }
.navbar__search-wrapper:focus-within,
.navbar__search-wrapper:has(input:focus) { box-shadow: 0 0 0 3px rgba(15,15,16,.06) !important; }
.navbar__search-hint {
    position: absolute !important;
    inset-inline-start: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--hd-ink-400) !important;
    font-size: 14.5px !important;
    pointer-events: none !important;
    transition: opacity .15s !important;
    font-weight: 500 !important;
    background: transparent !important;
    padding: 0 !important;
}
.navbar__search-button,
.navbar__search-wrapper button[type="submit"] {
    flex-shrink: 0 !important;
    width: 78px !important;
    background: var(--hd-ink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    margin: 3px !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    transition: background .2s !important;
}
.navbar__search-button:hover { background: #000 !important; }
.navbar__search-button svg { width: 20px !important; height: 20px !important; }
/* Input transparent → inherits gray pill bg */
.navbar__search-wrapper input[type="search"] { background: transparent !important; }

/* Language switcher */
.language-switcher {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 3px !important;
    background: var(--hd-ink-50) !important;
    border: 1.5px solid var(--hd-ink-200) !important;
    border-radius: 999px !important;
    gap: 0 !important;
    margin: 0 !important;
}
.language-switcher__option {
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--hd-ink-500) !important;
    border-radius: 999px !important;
    transition: color .15s, background .15s !important;
    cursor: pointer !important;
    border: 0 !important;
    line-height: 1 !important;
    background: transparent !important;
    text-decoration: none !important;
}
.language-switcher__option:hover { color: var(--hd-ink) !important; }
.language-switcher__option--active { background: var(--hd-ink) !important; color: #fff !important; }
.language-switcher__option--active:hover { color: #fff !important; }

/* Nav action buttons (cart, wishlist, account) */
.navbar__actions, .navbar__controls {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}
.navbar__action,
.navbar__action.bg-transparent,
.navbar__action.border-0 {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    color: var(--hd-ink) !important;
    background: transparent !important;
    border: 0 !important;
    transition: background .2s, color .2s !important;
    text-decoration: none !important;
    padding: 0 !important;
}
.navbar__action:hover {
    background: var(--hd-ink-50) !important;
    color: var(--hd-blue) !important;
}
.navbar__action-icon, .navbar__action svg {
    width: 22px !important;
    height: 22px !important;
}
.navbar__action-badge,
.navbar__action-badge.cart-contents-count {
    position: absolute !important;
    top: 4px !important;
    inset-inline-start: 4px !important;
    background: var(--hd-blue) !important;
    color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 4px !important;
    border: 2px solid #fff !important;
    line-height: 1 !important;
}

/* ── CATEGORY NAV (sub-nav with mega menu) ───────────────────── */
.category-nav,
.category-nav.bg-secondary {
    background: #fff !important;
    border-bottom: 1px solid var(--hd-ink-100) !important;
    position: relative !important;
    padding: 6px 0 !important;
}
.category-nav .container { max-width: 1320px !important; padding: 0 24px !important; }

/* Top promo strip above categories (if exists) */
.category-nav .text-center.py-1 {
    padding: 6px 0 !important;
    font-size: 12.5px !important;
    color: rgba(255,255,255,.85) !important;
    background: var(--hd-ink) !important;
    border-radius: 0 !important;
    margin: -6px -24px 8px !important;
}

/* Category items list */
.category-nav__list,
.category-nav ul,
.category-nav ol {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: none;
}
.category-nav__list::-webkit-scrollbar { display: none; }
.category-nav__item,
.category-nav li {
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
}
.category-nav li.has-megamenu,
.category-nav__item.has-megamenu {
    position: static !important;
}
.category-nav a,
.category-nav__link,
.category-nav li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--hd-ink-500) !important;
    border-radius: 999px !important;
    transition: background .2s, color .2s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
.category-nav a:hover { background: var(--hd-ink-50) !important; color: var(--hd-ink) !important; }
.category-nav .current-menu-item > a,
.category-nav .active > a,
.category-nav__link--active { background: var(--hd-ink) !important; color: #fff !important; }
.category-nav__link--active:hover { background: var(--hd-ink) !important; color: #fff !important; }
/* Sale/featured nav items — works for both WP menu items with class "sale"/"featured" and our fallback link */
.category-nav .sale > a,
.category-nav .featured > a,
.category-nav__link--sale { color: #ef4444 !important; font-weight: 600 !important; }
.category-nav .sale > a::before,
.category-nav .featured > a::before,
.category-nav__link--sale::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: #ef4444;
    border-radius: 50%;
    margin-inline-end: 6px;
    vertical-align: middle;
    animation: sd-pulse 1.6s infinite;
}
.category-nav .sale > a:hover,
.category-nav .featured > a:hover,
.category-nav__link--sale:hover { background: #ef4444 !important; color: #fff !important; }
.category-nav .sale > a:hover::before,
.category-nav .featured > a:hover::before,
.category-nav__link--sale:hover::before { background: #fff; animation: none; }
@keyframes sd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.7); }
}

/* ── MEGA MENU ───────────────────────────────────────────────── */
.megamenu, .mega-menu, .megamenu-wrapper {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border-top: 1px solid var(--hd-ink-100) !important;
    box-shadow: 0 16px 40px rgba(15,15,16,.10), 0 4px 12px rgba(15,15,16,.06) !important;
    z-index: 99 !important;
    border-radius: 0 0 16px 16px !important;
}
.megamenu__container, .megamenu-wrapper > .container, .megamenu .container {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 32px 24px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) 1.4fr !important;
    gap: 36px !important;
}
.megamenu__col, .megamenu .col,
.megamenu-col, .megamenu__column {
    list-style: none;
    padding: 0;
}
.megamenu__col h4,
.megamenu__title,
.megamenu-col h4,
.megamenu__column-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--hd-ink) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    margin: 0 0 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--hd-ink-100) !important;
}
.megamenu__list,
.megamenu__col ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.megamenu__list a,
.megamenu li a {
    font-size: 14px !important;
    color: var(--hd-ink-500) !important;
    transition: color .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    padding: 0 !important;
}
.megamenu__list a:hover { color: var(--hd-blue) !important; }
.megamenu__list a .count,
.megamenu .count { font-size: 12px; color: var(--hd-ink-400); }

/* Mega menu featured card (last column) */
.megamenu__featured {
    position: relative !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    aspect-ratio: 4/5 !important;
    background: var(--hd-ink-100) !important;
    display: block !important;
}
.megamenu__featured img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .5s; }
.megamenu__featured:hover img { transform: scale(1.05); }
.megamenu__featured::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15,15,16,.7), transparent 55%);
}
.megamenu__featured-body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px;
    color: #fff;
    z-index: 1;
}
.megamenu__featured-tag {
    display: inline-block;
    background: var(--hd-blue);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

/* ── SEARCH DROPDOWN ─────────────────────────────────────────── */
.search-dropdown {
    background: #fff !important;
    border: 1px solid var(--hd-ink-100) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(15,15,16,.10) !important;
    margin-top: 8px !important;
}
.search-dropdown__container {
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: 24px !important;
}
.search-dropdown__column { padding: 0 !important; }
.search-dropdown__column--suggestions { border-inline-end: 1px solid var(--hd-ink-100); padding-inline-end: 20px !important; }
.search-dropdown__column-heading,
.search-dropdown__heading {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--hd-ink-500) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--hd-ink-100) !important;
}
.search-dropdown__suggestion-item, .search-dropdown a {
    display: block !important;
    padding: 8px 0 !important;
    color: var(--hd-ink-700) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color .15s !important;
}
.search-dropdown__suggestion-item:hover, .search-dropdown a:hover { color: var(--hd-blue) !important; }
.search-dropdown__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}
.search-result-card {
    display: flex !important;
    gap: 10px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    transition: background .15s !important;
    text-decoration: none !important;
}
.search-result-card:hover { background: var(--hd-ink-50) !important; }
.search-result-card__image {
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: var(--hd-ink-100) !important;
}
.search-result-card__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.search-result-card__content { flex: 1; min-width: 0; }
.search-result-card__title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--hd-ink) !important;
    line-height: 1.3 !important;
    margin: 0 0 4px !important;
}
.search-result-card__price {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--hd-blue) !important;
    font-variant-numeric: tabular-nums !important;
}

/* ── OFFCANVAS / MOBILE MENU ─────────────────────────────────── */
.offcanvas {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}
.offcanvas,
.offcanvas__panel,
.offcanvas__content {
    background: #fff !important;
    border: 0 !important;
}
.offcanvas__content {
    height: 100% !important;
    overflow: hidden !important;
}
.offcanvas__panels {
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}
.offcanvas__panel {
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.offcanvas__header { flex-shrink: 0 !important; }
.offcanvas__list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.offcanvas__footer { flex-shrink: 0 !important; }
.offcanvas__overlay { background: rgba(15,15,16,.5) !important; backdrop-filter: blur(2px); }

/* ── HIDE BOOTSTRAP UTILITIES THAT INTERFERE ─────────────────── */
.navbar .py-2, .navbar.py-2 { padding-top: 12px !important; padding-bottom: 12px !important; }
.bg-gray-100 { background: var(--hd-ink-50) !important; }
.bg-secondary { background: #fff !important; }
.text-white { color: inherit; }

/* מבצעים — sale nav link with pulsing dot */
.category-nav__link[href*="/sale/"] { color: #EF4444 !important; font-weight: 700 !important; }
.category-nav__link[href*="/sale/"]:hover { color: #DC2626 !important; }
.category-nav__link[href*="/sale/"]::after {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    background: #EF4444;
    border-radius: 50%;
    vertical-align: super;
    margin-inline-start: 3px;
    animation: sale-pulse 1.6s ease-in-out infinite;
}
@keyframes sale-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.8); }
}

/* RESPONSIVE */
/* Hamburger must stay hidden on desktop (d-lg-none is overridden by our display:grid !important) */
@media (min-width: 992px) {
    .navbar__action.d-lg-none { display: none !important; }
}
@media (max-width: 1024px) {
    .navbar__search-wrapper { margin: 0 8px !important; }
}
@media (max-width: 768px) {
    .navbar__search-hint { display: none !important; }
    .navbar__container { gap: 8px !important; }
    .navbar__logo-img { height: 32px !important; }
    .language-switcher { display: none !important; }
    .promotion-bar__container { font-size: 11.5px; gap: 8px; padding: 0 16px; }
    .megamenu .container { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
    .search-dropdown__container { grid-template-columns: 1fr; }
    .category-nav__list { padding: 0 16px !important; }
}

/* ── DARK FOOTER ─────────────────────────────────────────────── */
.footer {
    background: #0A0A0B;
    color: rgba(255,255,255,.65);
    padding: 64px 0 24px;
    font-size: 14px;
}
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
    gap: 48px;
    margin-bottom: 48px;
}
.footer__brand img {
    height: 40px; width: auto; margin-bottom: 18px;
    filter: brightness(0) invert(1);
    display: block;
}
/* Text fallback if no logo image can be resolved */
.footer__wordmark {
    display: block; margin-bottom: 18px;
    font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff;
}
.footer__brand p { font-size: 14px; line-height: 1.6; margin-bottom: 18px; max-width: 320px; }
.footer__socials { display: flex; gap: 8px; }
.footer__social {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    display: grid; place-items: center;
    color: #fff;
    transition: background .2s ease;
    text-decoration: none;
}
.footer__social:hover { background: #4DAAD5; }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.footer__col h4 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.footer__col a { color: rgba(255,255,255,.65); font-size: 14px; transition: color .2s ease; text-decoration: none; }
.footer__col a:hover { color: #fff; }
.footer__contact-item { display: flex; align-items: start; gap: 10px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.5; }
.footer__contact-item svg { width: 16px; height: 16px; color: #4DAAD5; flex-shrink: 0; margin-top: 3px; fill: none; }
.footer__bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px;
    color: rgba(255,255,255,.45);
    flex-wrap: wrap;
    gap: 14px;
}
.footer__pay { display: flex; gap: 8px; }
.footer__pay span {
    padding: 4px 10px;
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
}
@media (max-width: 1080px) {
    .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
    .footer__brand { grid-column: span 4; }
}
@media (max-width: 768px) {
    .footer { padding: 40px 0 20px; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer__brand { grid-column: span 2; }
    .footer__bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .footer__grid { grid-template-columns: 1fr; }
    .footer__brand { grid-column: auto; }
}

/* ── INSPIRATION PAGE — FILTER BAR ──────────────────────────── */
.insp-filter-bar {
    position: sticky;
    top: 66px;
    z-index: 50;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--hd-ink-100);
    padding: 12px 0;
}
.insp-filter-bar__row {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}
.insp-filter-bar__label {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hd-ink-500);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.insp-filter-bar__pills {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 2px 0;
}
.insp-filter-bar__pills::-webkit-scrollbar { display: none; }
.insp-pill {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hd-ink-700);
    background: #fff;
    border: 1.5px solid var(--hd-ink-200);
    border-radius: 999px;
    transition: border-color .15s, background .15s, color .15s;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.insp-pill:hover { border-color: var(--hd-ink); color: var(--hd-ink); }
.insp-pill--active { background: var(--hd-ink); color: #fff; border-color: var(--hd-ink); }
.insp-pill--active:hover { color: #fff; }
.insp-pill__count { font-size: 11px; opacity: .55; font-weight: 500; }

/* ── Floating action buttons: WhatsApp right · back-to-top left (RTL) ── */
.whatsapp-btn  { inset-inline-end: auto !important; inset-inline-start: 1.5rem !important; }
.back-to-top-btn { inset-inline-start: auto !important; inset-inline-end: 1.5rem !important; }

/* ──────────────────────────────────────────────────────────────────
   Mobile off-canvas menu — fix sub-panels not appearing on click
   ────────────────────────────────────────────────────────────────────
   Root cause: .offcanvas__panels had no width and .offcanvas__panel
   used only min-width:100% (referring to an auto-sized parent →
   circular dependency → each panel ended up at its natural content
   width, not the container width). Result: tapping "טפטים"/"מדבקות קיר"
   slid the row by an unpredictable amount and the new panel didn't
   fill the visible drawer.
   ────────────────────────────────────────────────────────────────── */
.offcanvas__panels {
    width: 100% !important;
    flex-wrap: nowrap !important;
}
.offcanvas__panel {
    width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box;
}

/* Wider drawer on mobile (looks like a real app screen instead of a
   320-wide column). Full-height with dynamic viewport for iOS. */
@media (max-width: 768px) {
    .offcanvas .offcanvas__content {
        width: 100vw !important;
        max-width: 420px !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    .offcanvas__list { padding: 0 !important; }
    .offcanvas__link {
        padding: 14px 16px !important;
        min-height: 48px;
        font-size: 15px;
    }
    .offcanvas__header {
        padding: 12px 14px !important;
        min-height: 56px;
    }
    .offcanvas__title { font-size: 1.05rem !important; }
    .offcanvas__chevron::after { width: .55em !important; height: .55em !important; }
    /* Make the back button arrow visible (it was tiny + wrong direction) */
    .offcanvas__back {
        width: 40px; height: 40px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .04) !important;
    }
    .offcanvas__back svg { width: 22px !important; height: 22px !important; }
    .offcanvas__close { width: 40px !important; height: 40px !important; }
}
@media (max-width: 768px) and (orientation: portrait) {
    .offcanvas .offcanvas__content { max-width: 92vw !important; }
}

/* Phone (owner-approved 2026-09-24): the coupon bar is one line, ~34px instead of ~90px on the first screen. */
@media (max-width: 768px) {
    .announce { padding: 6px 0; font-size: 12.5px; }
    .announce__inner { flex-wrap: nowrap; gap: 8px; padding: 0 36px 0 12px; overflow: hidden; }
    .announce__label, .announce__divider, .announce__cta { display: none; }
    .announce__pill { padding: 3px 9px; font-size: 11px; white-space: nowrap; }
    .announce__code { white-space: nowrap; }
}