/* public/assets/css/styles-append.css */

/*====================================
  Brand Color Variables — Overrides
  These use CSS variables set from
  Settings via the main layout blade.
=====================================*/

/* ============================================
   NAVIGATION BACKGROUND
   ============================================ */
.header,
.navbar-default,
.header.header-fixed,
.header.header-transparent.header-fixed {
    background-color: var(--nav-bg-color) !important;
    background: var(--nav-bg-color) !important;
    /* Must be above Bootstrap sticky-top (1020) so dropdowns appear over sticky sidebars */
    z-index: 1030 !important;
}

/* Mobile off-canvas panel must sit ABOVE the overlay (z-index 19999) */
.navigation-portrait .nav-menus-wrapper {
    background-color: var(--nav-bg-color) !important;
    background: var(--nav-bg-color) !important;
    z-index: 20000 !important;
}

/* Ensure sticky sidebars/cards never overlap the nav dropdown */
.sticky-top {
    z-index: 900 !important;
}

/* Nav dropdown must paint above sticky sidebars (z-index 900) and fixed header (z-index 1030).
   The base .header has no position so doesn't create a stacking context until header-fixed is added;
   the dropdown's own z-index must therefore beat sticky-top directly. */
.nav-dropdown,
.nav-menu > li > .nav-dropdown {
    z-index: 1050 !important;
}

/* The markup marks dropdown triggers with `.relative`, but the theme never
   defines that class — so the nearest positioned ancestor was #navigation
   itself, and navigation.js's `right: 0` pinned the menu to the header's right
   edge (i.e. off past the cart icon) instead of under its trigger. */
.navigation-landscape .nav-menu > li.relative {
    position: relative;
}

/* The icon row (user / wishlist / cart) sits at the far right of the header,
   so its dropdown always opens right-aligned to the icon — otherwise a 250px
   panel would hang outside the container. */
.navigation-landscape .nav-menu-social > li {
    position: relative;
}
/* Hang the panel off the bottom of the <li>, which the rules in the 1200px
   block stretch to the full header row — so it opens level with the category
   dropdowns, with the arrow poking up into the header the same way. */
.navigation-landscape .nav-menu-social > li > .nav-dropdown {
    top: 100%;
    left: auto;
    right: 0;
}
/* Arrow centred on the trigger icon. The panel's right edge sits on the link's
   right edge, the link has 10px of right padding, and the arrow is 22px wide —
   so right = 10 + half the icon - 11. Guest icon box is 18px (theme rule on
   .nav-menu > li > a > i); the signed-in avatar is 32px. */
.navigation-landscape .nav-menu-social > li > .nav-dropdown:before {
    left: auto;
    right: 8px;
}
.navigation-landscape .nav-menu-social > li:has(> a > img) > .nav-dropdown:before {
    right: 15px;
}

/* ============================================
   NAVIGATION TEXT COLORS
   ============================================ */

/* Normal State */
.nav-brand,
.nav-brand:focus,
.nav-brand:hover,
.nav-menu>li>a {
    color: var(--nav-text-color) !important;
}

/* Hover State */
.nav-menu>li:hover>a,
.nav-menu>li>a:hover,
.nav-menu>li>a:focus {
    color: var(--nav-text-hover-color) !important;
}

/* Active State */
.nav-menu>.active>a,
.nav-menu>.focus>a,
.nav-menu>li>a.active {
    color: var(--nav-text-active-color) !important;
}

/* ============================================
   DROPDOWN MENU
   ============================================ */
.nav-dropdown>li>a {
    color: #333c56;
}

.nav-dropdown>li>a:hover,
.nav-dropdown>li>a:focus {
    color: var(--nav-text-hover-color) !important;
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */
.mobile_nav ul li a {
    color: var(--nav-text-color) !important;
}

.mobile_nav ul li a:hover,
.mobile_nav ul li a:focus {
    color: var(--nav-text-hover-color) !important;
}

/* The user menu was centred on its icon (left: 50% + translateX(-50%)), which
   pushed a 250px panel past the right edge on small phones — the last items
   ended up off-screen. Hang it from the icon's right edge instead, where it
   always has the whole header width to grow into. */
.mobile_nav li.mobile_dropdown ul.mobile_dropdown_menu {
    left: auto;
    right: 0;
    transform: none;
    max-width: calc(100vw - 24px);
}

/* ============================================
   SUBMENU INDICATORS (CHEVRONS)
   ============================================ */
.submenu-indicator-chevron {
    border-color: transparent var(--nav-text-color) var(--nav-text-color) transparent !important;
}

.nav-menu>li:hover>a .submenu-indicator-chevron,
.nav-menu>.active>a .submenu-indicator-chevron,
.nav-menu>.focus>a .submenu-indicator-chevron {
    border-color: transparent var(--nav-text-hover-color) var(--nav-text-hover-color) transparent !important;
}

/* ============================================
   SALES MENU
   ============================================ */

/* Default (inactive) state */
.sales-menu-link .sales-menu-text {
    color: var(--nav-text-color) !important;
}

.sales-menu-link i {
    color: var(--nav-text-color) !important;
}

/* Hover state */
.sales-menu-link:hover .sales-menu-text,
.sales-menu-link:focus .sales-menu-text {
    color: var(--nav-text-hover-color) !important;
}

.sales-menu-link:hover i,
.sales-menu-link:focus i {
    color: var(--nav-text-hover-color) !important;
}

/* Active state */
.sales-menu-link.active .sales-menu-text {
    color: var(--nav-text-active-color) !important;
}

.sales-menu-link.active i {
    color: var(--nav-text-active-color) !important;
}

/* ============================================
   USER AVATAR
   ============================================ */
.nav-menu img.rounded-circle {
    border: none !important;
}

/* ============================================
   CART & WISHLIST BADGES
   ============================================ */

/* Wishlist badge */
.wishlist-count.dn-counter {
    background-color: var(--wishlist-badge-color) !important;
}

/* Cart badge */
.cart-count.dn-counter {
    background-color: var(--cart-badge-color) !important;
}

/* ============================================
   FOOTER
   ============================================ */
footer.dark-footer,
footer.skin-dark-footer {
    background: var(--color-footer-bg) !important;
}

footer.dark-footer p,
footer.skin-dark-footer p,
footer.dark-footer a,
footer.skin-dark-footer a,
footer.dark-footer li,
footer.skin-dark-footer li,
footer.dark-footer span,
footer.skin-dark-footer span {
    color: var(--text-footer) !important;
}

footer.dark-footer h1,
footer.skin-dark-footer h1,
footer.dark-footer h2,
footer.skin-dark-footer h2,
footer.dark-footer h3,
footer.skin-dark-footer h3,
footer.dark-footer h4,
footer.skin-dark-footer h4,
footer.dark-footer h5,
footer.skin-dark-footer h5,
footer.dark-footer h6,
footer.skin-dark-footer h6 {
    color: var(--text-footer-heading) !important;
}

footer.dark-footer a:hover,
footer.skin-dark-footer a:hover {
    color: #ffffff !important;
}

.skin-dark-footer .footer-bottom {
    border-top-color: color-mix(in srgb, var(--color-footer-bg) 60%, #fff 40%);
}

/* ============================================
   BODY & TEXT
   ============================================ */
body {
    color: var(--text-body) !important;
}

p,
li,
td,
th,
label,
.form-label,
.card-text {
    color: var(--text-body);
}

.text-muted,
.text-secondary,
small {
    color: var(--text-muted) !important;
}

/* ============================================
   HEADINGS
   ============================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-heading);
}

/* ============================================
   LINKS (storefront only, not Filament)
   ============================================ */
/* .training-tag excluded: this rule's high specificity painted the chips
   primary-colored, which on a selected chip (primary background) made the
   text invisible — the chips manage their own colors below. */
.content a:not(.btn):not(.nav-brand):not(.nav-menu a):not([class*="filament"]):not(.training-tag) {
    color: var(--color-primary);
}

.content a:not(.btn):not(.nav-brand):not(.training-tag):hover {
    color: color-mix(in srgb, var(--color-primary) 75%, black 25%);
}

/* Product card name link */
.product_grid .card a.text-dark-hover,
.product_grid .card h5 a {
    color: var(--text-heading) !important;
}

.product_grid .card a.text-dark-hover:hover,
.product_grid .card h5 a:hover {
    color: var(--color-primary) !important;
}

/* ============================================
   BUTTONS — PRIMARY
   ============================================ */
.btn-primary,
.btn-primary:visited {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: color-mix(in srgb, var(--color-primary) 80%, black 20%) !important;
    border-color: color-mix(in srgb, var(--color-primary) 80%, black 20%) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* ============================================
   BUTTONS — DARK / FOOTER BG
   ============================================ */
.btn-dark,
.btn-dark:visited {
    background-color: var(--color-footer-bg) !important;
    border-color: var(--color-footer-bg) !important;
    color: #fff !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: color-mix(in srgb, var(--color-footer-bg) 80%, white 20%) !important;
    border-color: color-mix(in srgb, var(--color-footer-bg) 80%, white 20%) !important;
    color: #fff !important;
}

/* ============================================
   BUTTONS — SUCCESS
   ============================================ */
.btn-success,
.btn-success:visited {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: color-mix(in srgb, var(--color-success) 80%, black 20%) !important;
    border-color: color-mix(in srgb, var(--color-success) 80%, black 20%) !important;
    color: #fff !important;
}

/* ============================================
   BADGES
   ============================================ */

/* Bootstrap warning badge (used for price) */
.badge.bg-warning,
.badge.text-bg-warning {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Bootstrap danger badge (used for sale) */
.badge.bg-danger,
.badge.text-bg-danger {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
}

/* Bootstrap success badge */
.badge.bg-success,
.badge.text-bg-success {
    background-color: var(--color-success) !important;
    color: #fff !important;
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
#back2Top,
.top-scroll {
    background: var(--color-footer-bg) !important;
    border-color: var(--color-footer-bg) !important;
}

#back2Top:hover,
.top-scroll:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.page-link {
    color: var(--color-primary) !important;
}

.page-link:hover {
    color: color-mix(in srgb, var(--color-primary) 75%, black 25%) !important;
}

/* Storefront paginator (resources/views/vendor/pagination/bootstrap-5.blade.php) */
.store-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.store-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0 0 !important;
}

.store-pagination .pagination > li {
    display: block;
}

.store-pagination .page-link {
    float: none;
    min-width: 2.75rem;
}

.store-pagination .pg-xs-only {
    display: none;
}

.pagination-meta {
    margin: 0;
    font-size: 0.875rem;
    color: #6c757d;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-btn, 999px);
    background: color-mix(in srgb, var(--color-primary) 8%, white 92%);
}

.pagination-meta strong {
    color: var(--color-primary);
    font-weight: 600;
}

.pagination-meta__sep {
    opacity: 0.5;
}

@media (max-width: 575.98px) {
    .store-pagination .pg-xs-hide {
        display: none;
    }

    .store-pagination .pg-xs-only {
        display: block;
    }

    .store-pagination .page-link {
        padding: 0.6rem 0.75rem;
        font-size: 1rem;
        min-width: 2.5rem;
    }
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumb-item a {
    color: var(--color-primary) !important;
}

.breadcrumb-item.active {
    color: var(--text-muted) !important;
}

/* ============================================
   FILTER SIDEBAR
   ============================================ */

/* Price range slider handle */
.irs--flat .irs-handle > i:first-child,
.irs--flat .irs-bar {
    background-color: var(--color-primary) !important;
}

.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
    background-color: var(--color-primary) !important;
}

/* Checkbox / radio filter active */
.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 30%, transparent 70%) !important;
}

/* ============================================
   PRODUCT DETAIL PAGE
   ============================================ */

/* Add to cart / buy buttons */
.btn-cart,
.add-to-cart-btn,
[class*="cart-btn"] {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Quantity controls */
.qty-btn,
.quantity-btn {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* ============================================
   SECTION / DIVIDER ACCENTS
   ============================================ */

/* Section title underline accents */
.sec-heading h2::after,
.section-title::after {
    background-color: var(--color-primary) !important;
}

/* ============================================
   FACEBOOK SHARE BUTTON (exception — keeps Facebook blue)
   ============================================ */
.btn-facebook,
.btn-facebook:visited {
    background-color: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #fff !important;
}

.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active {
    background-color: #145dbf !important;
    border-color: #145dbf !important;
    color: #fff !important;
}

/* ============================================
   FORM FOCUS STATES
   ============================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 25%, transparent 75%) !important;
}

/* ============================================
   TYPOGRAPHY — Inter font
   ============================================ */
body,
p, li, td, th, label,
input, select, textarea, button,
.form-label, .card-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 60%, transparent 100%);
    z-index: 1;
}

/* Multi-image banner: stacked slides crossfade beneath the overlay.
   The first image stays as the section background so there is no flash
   before the JS rotation kicks in. */
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

/* Slideshow controls: arrows on the sides, dots at the bottom (above overlay). */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}
.hero-nav:hover { background: rgba(0,0,0,.6); }
.hero-nav--prev { left: 12px; }
.hero-nav--next { right: 12px; }

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.hero-dot:hover { background: rgba(255,255,255,.75); }
.hero-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

@media (max-width: 767px) {
    .hero-nav { width: 32px; height: 32px; font-size: 1rem; }
    .hero-nav--prev { left: 6px; }
    .hero-nav--next { right: 6px; }
    .hero-compact .hero-nav,
    .hero-compact .hero-dots { display: none; }
}

/* ============================================
   PRODUCT CARD — equal height + chips
   ============================================ */
/* Force all cards in a row to stretch to the same height */
.rows-products {
    align-items: stretch !important;
}

.product_grid .card-footer {
    background: transparent;
    border-top: none;
}

/* Card-level info chips (smaller than product detail chips) */
.card-info-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.card-chip-label {
    color: var(--text-muted);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .2px;
    flex-shrink: 0;
}

.card-chip-value {
    font-weight: 600;
    color: var(--text-heading);
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

/* ============================================
   PRODUCT DETAIL — info chips
   ============================================ */
.product-info-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: .875rem;
    white-space: nowrap;
}

.chip-label {
    color: var(--text-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.chip-value {
    font-weight: 600;
    color: var(--text-heading);
}

.chip-unit {
    color: var(--text-muted);
    font-size: .72rem;
}

/* ============================================
   MODERN SEARCH OVERLAY  (mobile-first)
   ============================================ */

/* Prevent body scroll when overlay is open */
body.search-open { overflow: hidden; }

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    visibility: hidden;
}

.search-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
}

/* Semi-transparent backdrop */
.search-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .22s ease;
}

.search-overlay.is-open .search-overlay-backdrop {
    opacity: 1;
}

/* The white panel — slides up from bottom on mobile */
.search-overlay-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    overflow: hidden;
}

.search-overlay.is-open .search-overlay-panel {
    transform: translateY(0);
}

/* Header row */
.search-overlay-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

/* Input wrapper */
.search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 0 12px;
    height: 46px;
    gap: 8px;
}

.search-icon-left {
    color: var(--text-muted);
    font-size: 1rem;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 1rem;
    color: var(--text-heading);
    min-width: 0;
}

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

.search-clear-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .8rem;
    line-height: 1;
    flex-shrink: 0;
}

.search-cancel-btn {
    background: none;
    border: none;
    padding: 6px 4px;
    color: var(--color-primary);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Suggestions list */
.search-suggestions {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.search-results-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.search-result-item { border-bottom: 1px solid #f5f5f5; }
.search-result-item:last-child { border-bottom: none; }

.search-result-item.is-active { background: #fafafa; }

.search-result-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}

.search-result-link:hover,
.search-result-link:focus { background: #f8f8f8; text-decoration: none; }

.search-result-img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-img-placeholder { color: #ccc; font-size: 1.4rem; }

.search-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.search-result-name {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-name mark {
    background: none;
    color: var(--color-primary);
    font-weight: 700;
    padding: 0;
}

.search-result-price {
    font-size: .8rem;
    color: var(--color-primary);
    font-weight: 600;
}

/* Empty / loading states */
.search-no-results,
.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
    color: var(--text-muted);
    gap: 10px;
}

.search-no-results i { font-size: 2rem; opacity: .4; }
.search-no-results p { margin: 0; font-size: .9rem; }

/* Spinner */
.search-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #eee;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

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

/* Footer submit button */
.search-footer {
    padding: 12px 16px 20px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.search-submit-btn {
    width: 100%;
    padding: 13px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s;
}

.search-submit-btn:hover { opacity: .9; }

/* ── Desktop: center panel instead of bottom sheet ── */
@media (min-width: 768px) {
    .search-overlay-panel {
        position: absolute;
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        transform: translate(-50%, -40%);
        width: min(560px, 92vw);
        border-radius: 16px;
        max-height: 80vh;
        opacity: 0;
        transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
    }

    .search-overlay.is-open .search-overlay-panel {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* ============================================
   NAV SPACER — offsets fixed nav on pages
   that don't have a banner/hero section
   ============================================ */
.nav-spacer { height: 66px; }

/* Below 992px the theme makes .header position:fixed with top:auto
   (styles.css), so hero sections on pages without a .nav-spacer slide
   under it. Pin the header to the viewport top and reserve space with
   padding — NOT margin: a top margin collapses onto <body> and drags
   the header's static position down with it, re-creating the overlap.
   section.* specificity beats the hero variants' own inline <style>
   padding shorthand, which loads after this file. */
@media (max-width: 992px) {
    .header { top: 0; }

    section.hero-section,
    section.yarn-hero,
    section.ch-hero { padding-top: calc(66px + 1.5rem); }
}

/* ============================================
   HERO — compact mode when search is active
   ============================================ */
@media (max-width: 767px) {
    .hero-compact,
    .hero-compact .row { min-height: 120px !important; }
    .hero-compact .hero-title { font-size: 1.1rem !important; }
    .hero-compact p,
    .hero-compact .btn { display: none; }
}

/* ============================================
   HOME PAGE — featured sections
   ============================================ */

.hp-section { padding: 20px 0 4px; }

.hp-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.hp-section-icon { font-size: 1.2rem; line-height: 1; }

.hp-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0;
    flex: 1;
}

.hp-section-more {
    font-size: .8rem;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 600;
}
.hp-section-more:hover { text-decoration: underline; }

/* Horizontal scroll row */
.hp-scroll-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
    scroll-snap-type: x mandatory;
}
.hp-scroll-row::-webkit-scrollbar { display: none; }

/* Mini card */
.mini-card {
    flex: 0 0 148px;
    width: 148px;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f0f0f0;
    transition: box-shadow .15s;
}
.mini-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

.mini-card-img-wrap {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8f8f8;
}
.mini-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.mini-card:hover .mini-card-img-wrap img { transform: scale(1.04); }

.mini-card-badge {
    position: absolute;
    top: 6px; right: 6px;
    background: var(--color-secondary);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 1;
}
.mini-card-group-badge {
    position: absolute;
    top: 6px; left: 6px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .6rem;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 1;
}

.mini-card-body { padding: 8px 10px 10px; }

.mini-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-heading);
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 5px;
}
.mini-card-name:hover { color: var(--color-primary); }

.mini-card-price { display: flex; flex-direction: column; gap: 1px; }

.mini-price-orig {
    font-size: .68rem;
    color: var(--text-muted);
    text-decoration: line-through;
}
.mini-price-final {
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-secondary);
}

/* Desktop: wider cards */
@media (min-width: 768px) {
    .hp-section { padding: 28px 0 8px; }
    .mini-card { flex: 0 0 186px; width: 186px; }
    .hp-section-title { font-size: 1.2rem; }
}

/* Category cards scroll */
.hp-cat-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
}
.hp-cat-scroll::-webkit-scrollbar { display: none; }

.hp-cat-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 20px;
    border-radius: 12px;
    background: #f8f8f8;
    text-decoration: none;
    color: var(--text-heading);
    border: 1px solid #eee;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.hp-cat-card:hover {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    text-decoration: none;
}
.hp-cat-card i { font-size: 1.5rem; }
.hp-cat-card-name { font-size: .82rem; font-weight: 600; }
.hp-cat-card-count { font-size: .7rem; opacity: .65; }


/* ============================================
   HEADER — persistent search bar (desktop)
============================================ */
/* Right-side stack: search bar on top, icon row below.
   Enabled from xl up; below that only the icon row shows and the
   search overlay is reached via the plain icon. `display: contents`
   keeps the wrapper out of the theme's float layout until then. */
.nav-right-stack {
    display: contents;
}
.nav-search-bar {
    display: none;
    align-items: center;
    gap: 8px;
    /* Narrowest the bar may get before the placeholder stops being worth
       showing and navigation.js swaps it for the icon-only button. Read by
       nav.measureSteps(); it lives here so it stays next to the dimensions it
       relates to. */
    --search-label-min: 150px;
    width: 220px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #e2e5ea;
    border-radius: 19px;
    background: #f5f6f8;
    color: #8a919c;
    font-size: .85rem;
    text-align: left;
    cursor: text;
    transition: border-color .15s, background .15s;
}
.nav-search-bar:hover,
.nav-search-bar:focus {
    border-color: var(--color-primary);
    background: #fff;
}
.nav-search-bar i {
    font-size: .9rem;
    flex-shrink: 0;
}
.nav-search-bar span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media (min-width: 1200px) {
    /* Flex instead of the theme's floats so the logo and the
       single-row nav links center vertically against the taller
       two-row right stack */
    .navigation-landscape {
        display: flex;
        align-items: center;
    }
    .navigation-landscape .nav-header {
        float: none;
    }
    .navigation-landscape .nav-menus-wrapper {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        /* Breathing room between the last nav link and the search box */
        column-gap: 16px;
    }
    /* NOTE: not :first-child — navigation.js prepends a close button
       into the wrapper, so the nav list is never the first child */
    /* Keep nav links (categories, training) on one line, always. They can't be
       allowed to shrink: there is nowhere for the overflow to go (a scroll
       container here would clip the hover dropdowns, which hang below the row).
       So when the links genuinely don't fit, navigation.js collapses the whole
       header to the off-canvas menu instead — see nav.measureRowWidth(). */
    .navigation-landscape .nav-menus-wrapper > .nav-menu {
        flex: 1 1 auto;
        min-width: max-content;
    }
    .navigation-landscape .nav-menus-wrapper > .nav-menu > li > a {
        white-space: nowrap;
    }
    /* Search + icons: always ONE row pinned to the right edge. There used to be
       a JS-applied `is-stacked` mode that moved the search bar onto a second
       row when things got tight; it could latch on when it shouldn't and left
       an empty band under the nav links, so it's gone. The search bar gives up
       width instead — that degrades in place and can't change the row count. */
    .navigation-landscape .nav-right-stack {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        column-gap: 10px;
        margin-left: auto;
        /* Stretch to the full header row rather than sizing to its own content,
           so the icon <li> bottoms line up with the nav links — that's what the
           user dropdown hangs off (see top: 100% above). min-height keeps the
           row height the old 10px padding used to give it. */
        align-self: stretch;
        min-height: 64px;
        padding: 0;
    }
    /* Pass the stretch down: stack → icon list → each <li> */
    .navigation-landscape .nav-right-stack .nav-menu-social {
        float: none;
        display: flex;
        align-self: stretch;
        align-items: stretch;
        flex-shrink: 0;
    }
    .navigation-landscape .nav-right-stack .nav-menu-social > li {
        display: flex;
        align-items: center;
    }
    /* Shrinkable, not fixed: when the nav links need the room the bar gives it
       up (the placeholder ellipsises away) rather than forcing the icons out of
       the row. At the 44px floor only the magnifier is left. */
    .navigation-landscape .nav-right-stack .nav-search-bar {
        display: flex;
        width: 230px;
        flex: 0 1 230px;
        min-width: 44px;
        margin: 0;
    }
    .navigation-landscape .nav-right-stack .nav-menu-social > li > a {
        padding: 6px 10px;
    }

    /* Rung 2 of the ladder (nav.applyLayoutStep in navigation.js): the search
       bar drops its placeholder to become an icon button and the links tighten,
       which is enough to keep a menu that would otherwise overflow on one row.
       Applied by measurement rather than at a fixed width — how much room the
       links need depends on how many there are and how long the titles run,
       and this nav is built from each site's own categories. */
    .navigation-landscape.nav-compact .nav-menus-wrapper {
        column-gap: 10px;
    }
    .navigation-landscape.nav-compact .nav-menus-wrapper > .nav-menu > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
    .navigation-landscape.nav-compact .nav-right-stack .nav-search-bar {
        flex: 0 0 44px;
        width: 44px;
        padding: 0;
        justify-content: center;
    }
    .navigation-landscape.nav-compact .nav-right-stack .nav-search-bar span {
        display: none;
    }
}

/* ============================================
   HEADER — off-canvas menu above the mobile range
   ============================================ */
/* navigation.js switches to the off-canvas menu below 1200px instead of below
   993px, and above 1200px too whenever the nav links are too long to share a
   row with the icons. The theme gates its portrait header styling on
   max-width: 992px, so re-apply the parts that matter for every width above
   that — keyed on the portrait class, since the width no longer decides it.

   992.02px, not 993px: the theme's block ends at max-width 992px, so a 993px
   floor leaves widths like 992.5px matching neither, with no icon row at all.
   Browser zoom produces fractional viewport widths routinely. */
@media (min-width: 992.02px) {
    /* Logo left, icon row right, hamburger over the far left */
    .navigation-portrait .nav-header {
        width: 100%;
    }
    .navigation-portrait .nav-brand {
        flex: 1;
        margin-left: 25px;
        /* The theme's 13px vertical padding would push the 40px logo past the
           60px portrait row */
        padding-top: 0;
        padding-bottom: 0;
    }

    /* One icon row, in .mobile_nav — the desktop icon list is hidden below */
    .navigation-portrait .mobile_nav {
        display: block;
        margin-top: 4px;
    }
    .navigation-portrait .mobile_nav ul {
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    .navigation-portrait .mobile_nav ul li {
        display: inline-block;
        padding-left: 12px;
    }
    .navigation-portrait .mobile_nav ul li:first-child {
        padding-left: 0;
    }
    .navigation-portrait .mobile_nav ul li a {
        display: inline-flex;
        font-size: 17px;
        font-weight: 600;
        font-family: "DM Sans", sans-serif;
    }
    .navigation-portrait .nav-menu.nav-menu-social {
        display: none;
    }

    /* styles.css hides the chevron above 992px, because the desktop menu opens
       its submenus on hover and has no use for it. The off-canvas menu has no
       hover: tapping that chevron is the only way to open a submenu there, so
       with it hidden the categories looked like they had no children at all.
       Bring it back whenever the portrait layout is the one on screen. */
    .navigation-portrait .submenu-indicator {
        display: block;
    }
}

/* ============================================
   PRODUCT CARD — quick action buttons
============================================ */
.card-action-btns {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}
.card-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e5ea;
    color: #444;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.card-action-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.card-action-btn:disabled {
    opacity: .6;
}
.card-action-btn i {
    font-size: .95rem;
    line-height: 1;
}

/* ============================================
   PRODUCT CARD — low-stock scarcity chip
============================================ */
.card-chip-low-stock {
    background: #fff7ed;
    border-color: #fed7aa;
}
.card-chip-low-stock .card-chip-value {
    color: #c2410c;
}

/* ============================================
   TOASTS — repeat counter
   Identical toasts collapse into one with a ×N
   counter instead of stacking (see utils.js).
============================================ */
.toast-content {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.toast-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5rem;
}
.toast-count-pop {
    animation: toast-count-pop .25s ease-out;
}
@keyframes toast-count-pop {
    0%   { transform: scale(.6); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ============================================
   QUANTITY CONTROLS — touch behaviour
   Bigger, calmer targets on phones: no double-tap
   zoom, no text selection from a held press and no
   hover state stuck on after a tap.
============================================ */
.quantity-group .btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}
.quantity-group .quantity-select {
    touch-action: manipulation;
}

@media (hover: none) {
    /* Touch devices keep :hover after a tap — keep the button looking idle */
    .quantity-group .btn:hover {
        background: #f8f9fa !important;
        color: #495057 !important;
        transform: none;
    }
    .quantity-group .btn:active {
        background: var(--color-primary) !important;
        color: #fff !important;
    }
}

@media (max-width: 768px) {
    /* Keep the tap target at the 44px accessibility minimum */
    .quantity-group .btn {
        min-width: 44px !important;
        width: 44px !important;
        height: 48px !important;
        font-size: 15px !important;
    }
}

/* ============================================
   TRAINING & TEACHER PAGES
   Brings /surgaltuud onto the same card system as
   the product and cart pages.
============================================ */

/* Flex-truncation helper — Bootstrap 5.3-alpha3 ships no .min-w-0,
   and without it text-truncate never shrinks inside a flex row. */
.min-w-0 { min-width: 0; }

/* ── Cards (trainings + teachers) ─────────────────────────── */
.training-card {
    border-radius: 10px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
    .training-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
    }
}

.training-card-thumb {
    background: #f8f9fa;
    line-height: 0;
}
.training-card-thumb img {
    aspect-ratio: 16 / 10;
    transition: transform .3s ease;
}
.training-card-thumb-tall img {
    aspect-ratio: 1 / 1;
}
@media (hover: hover) {
    .training-card:hover .training-card-thumb img { transform: scale(1.04); }
}

.training-card-title {
    font-size: 1rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.training-card-excerpt {
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.training-card-btn {
    border: 1px solid var(--color-primary);
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}
.training-card-btn:hover,
.training-card-btn:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ── Section headings ─────────────────────────────────────── */
.training-section-head {
    border-bottom: 2px solid #f1f3f5;
    padding-bottom: .75rem;
}

/* ── Hero media: ratios instead of fixed pixel heights ────── */
.training-hero-media {
    aspect-ratio: 16 / 9;
    background: #f8f9fa;
}
.training-hero-media img {
    width: 100%;
    height: 100%;
}
@media (max-width: 575.98px) {
    .training-hero-media { aspect-ratio: 4 / 3; }
}

/* Carousel dots — the arrows alone are a poor mobile target */
.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    margin-inline: 4px;
}

/* ── Sticky enrolment sidebar (desktop only) ──────────────── */
.training-sticky {
    position: sticky;
    top: 80px;
}
@media (max-width: 991.98px) {
    .training-sticky { position: static; }
}

/* ── Calls to action ──────────────────────────────────────── */
.training-cta {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}
.training-cta:hover,
.training-cta:focus {
    filter: brightness(.94);
    color: #fff;
}

.training-btn-fb {
    border: 1px solid #1877f2;
    background: #fff;
    color: #1877f2;
}
.training-btn-fb:hover,
.training-btn-fb:focus {
    background: #1877f2;
    color: #fff;
}

/* ── "How to enrol" steps ─────────────────────────────────── */
.training-step {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin-bottom: .5rem;
}
.training-step:last-child { margin-bottom: 0; }
.training-step-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Rich text coming out of the Tiptap editor ────────────── */
.rich-content {
    line-height: 1.8;
    word-break: break-word;
}
.rich-content > :last-child { margin-bottom: 0; }
.rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.rich-content h1, .rich-content h2, .rich-content h3,
.rich-content h4, .rich-content h5, .rich-content h6 {
    font-weight: 700;
    color: var(--text-heading);
    margin-top: 1.25rem;
    margin-bottom: .5rem;
}
.rich-content h1 { font-size: 1.4rem; }
.rich-content h2 { font-size: 1.25rem; }
.rich-content h3 { font-size: 1.1rem; }
.rich-content h4, .rich-content h5, .rich-content h6 { font-size: 1rem; }
.rich-content ul, .rich-content ol { padding-left: 1.25rem; }
.rich-content li { margin-bottom: .35rem; }
.rich-content a {
    color: var(--color-primary);
    text-decoration: underline;
}
.rich-content blockquote {
    border-left: 3px solid var(--color-primary);
    padding: .25rem 0 .25rem 1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
/* Wide tables scroll inside the card instead of stretching the page */
.rich-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.rich-content th, .rich-content td {
    border: 1px solid #e9ecef;
    padding: .5rem .75rem;
}

/* "Юу сурах вэ" reads as a checklist whatever markup the teacher wrote */
.rich-content-checklist ul {
    list-style: none;
    padding-left: 0;
}
.rich-content-checklist ul li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: .6rem;
}
.rich-content-checklist ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .15rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: rgba(16, 185, 129, .12);
    color: var(--color-success);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Training tags ────────────────────────────────────────── */
.training-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border: 1px solid #e2e5ea;
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.training-tag i {
    font-size: .72rem;
    opacity: .7;
}
.training-tag:hover,
.training-tag:focus {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.training-tag.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}
.training-tag.is-active:hover,
.training-tag.is-active:focus {
    color: #fff;
}
.training-tag.is-active i { opacity: 1; }

.training-tag-more {
    cursor: default;
    background: #f8f9fa;
}

/* The filter row scrolls sideways on a phone instead of stacking
   into a tall block that pushes the cards off screen. */
@media (max-width: 767.98px) {
    .training-tag-filter {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem;
    }
    .training-tag-filter::-webkit-scrollbar { display: none; }
    .training-tag-filter .training-tag { flex-shrink: 0; }
}

/* ── Training format badge (Онлайн / Танхим) ──────────────── */
.training-format-badge {
    background: #334155;
}
.training-format-badge.is-tankhim {
    background: #b45309;
}

/* ── Search results: type badges, tags, group headings ────── */
.search-group-heading {
    padding: .5rem 1rem .25rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
}
.search-result-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 4px;
    background: #eef1f5;
    color: #475569;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    vertical-align: middle;
}
.search-result-badge-training {
    background: rgba(180, 83, 9, .12);
    color: #b45309;
}
.search-result-meta {
    margin-left: .5rem;
    color: var(--text-muted);
    font-weight: 400;
}
.search-result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .2rem;
}
.search-result-tag {
    padding: .05rem .4rem;
    border: 1px solid #e2e5ea;
    border-radius: 999px;
    font-size: .66rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.search-result-tag mark {
    padding: 0;
    background: rgba(245, 158, 11, .3);
}

/* ============================================
   THEME DESIGN TOKENS
   The active theme (app/Support/ThemeCatalog)
   injects --radius-card / --radius-btn /
   --radius-input / --shadow-card into :root via
   the main layout. These rules make every theme
   reshape the shared components consistently.
   Per-theme flavour lives in assets/css/themes/.
   ============================================ */

.product_grid.card,
.mini-card,
.training-card {
    border-radius: var(--radius-card, 10px);
}

.btn,
.training-card-btn {
    border-radius: var(--radius-btn, 6px);
}

.form-control,
.form-select,
.custom-select {
    border-radius: var(--radius-input, 6px);
}

.product_grid.card:hover,
.mini-card:hover {
    box-shadow: var(--shadow-card, 0 4px 16px rgba(0, 0, 0, .10));
}

/* ============================================
   MOBILE FOOTER NAV
   App-style bottom bar. Visible whenever the
   header nav is NOT in landscape (full-links)
   mode — navigation.js switches to portrait by
   CONTENT overflow, not a fixed width, so a
   width-only media query would leave a gap
   where neither menu exists. Styles are
   unconditional; a min-width rule at the end
   hides the bar only while the desktop nav's
   links are actually on screen.
   Markup: resources/views/nav/mobile-footer-nav.blade.php
   ============================================ */

    .mobile-footer-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040; /* above sticky header (1030), below off-canvas nav (20000) */
        display: flex;
        align-items: stretch;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--color-nav-bg, #fff);
        border-top: 1px solid rgba(0, 0, 0, .08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    }

    .mfn-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: 0;
        padding: 6px 2px;
        text-decoration: none;
        color: var(--nav-text-color, #333d46);
        -webkit-tap-highlight-color: transparent;
    }
    .mfn-item i {
        font-size: 20px;
        line-height: 1;
    }
    .mfn-item > span:last-child {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .01em;
    }
    .mfn-item.active,
    .mfn-item:hover,
    .mfn-item:focus {
        color: var(--color-primary);
        text-decoration: none;
    }
    /* Sale tab (only rendered while a sale is running) gets the badge accent */
    .mfn-item-sale,
    .mfn-item-sale.active,
    .mfn-item-sale:hover,
    .mfn-item-sale:focus {
        color: var(--color-secondary, #e53935);
    }

    /* Reserve space so content and floating buttons clear the bar */
    body.has-mfn {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
    body.has-mfn .top-scroll {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Category bottom sheet ──
       Backdrop and sheet sit BELOW the bar (1040), so the bar stays
       visible and tappable — "Ангилал" toggles the sheet closed. */
    .mfn-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }
    .mfn-sheet-backdrop.open {
        opacity: 1;
        visibility: visible;
    }

    /* Full-screen category panel — slides up from the bottom, covers the
       whole viewport; the footer bar (z 1040) stays on top so "Ангилал"
       toggles it closed. */
    .mfn-sheet {
        position: fixed;
        inset: 0;
        z-index: 1036;
        background: #fff;
        display: flex;
        flex-direction: column;
        transform: translateY(105%);
        transition: transform .25s ease;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
    .mfn-sheet.open { transform: translateY(0); }

    body.mfn-sheet-open { overflow: hidden; }

    .mfn-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 18px 8px;
        flex-shrink: 0;
    }
    .mfn-sheet-header h6 {
        margin: 0;
        font-weight: 700;
        font-size: 1rem;
        color: var(--text-heading, #000);
    }
    .mfn-sheet-close {
        background: #f3f4f6;
        border: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        font-size: 13px;
    }

    .mfn-sheet-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 14px 18px;
    }

    /* Accordion category list */
    .mfn-cat-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .mfn-cat-row {
        border: 1px solid #eee;
        border-radius: var(--radius-input, 10px);
        background: #fafafa;
        overflow: hidden;
    }
    .mfn-cat-head {
        display: flex;
        align-items: stretch;
    }
    .mfn-cat-link {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 12px;
        text-decoration: none;
        color: var(--text-heading, #222);
        min-width: 0;
    }
    .mfn-cat-link:hover,
    .mfn-cat-link:focus {
        color: var(--color-primary);
        text-decoration: none;
    }
    .mfn-cat-title {
        font-size: .88rem;
        font-weight: 600;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mfn-cat-toggle {
        flex-shrink: 0;
        width: 54px;
        background: none;
        border: 0;
        border-left: 1px solid #f0f0f0;
        color: #888;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        -webkit-tap-highlight-color: transparent;
    }
    .mfn-cat-toggle i { transition: transform .2s ease; }
    .mfn-cat-row.open .mfn-cat-toggle i { transform: rotate(180deg); }
    .mfn-cat-row.open .mfn-cat-toggle { color: var(--color-primary); }

    .mfn-subcats {
        background: #fff;
        border-top: 1px solid #f0f0f0;
        padding: 4px 0;
    }
    .mfn-subcat-link {
        display: block;
        padding: 13px 16px 13px 54px;
        text-decoration: none;
        color: var(--text-body, #555);
        font-size: .92rem;
        font-weight: 500;
        border-bottom: 1px solid #f7f7f7;
    }
    .mfn-subcat-link:last-child { border-bottom: 0; }
    .mfn-subcat-link:hover,
    .mfn-subcat-link:focus {
        color: var(--color-primary);
        background: #fafafa;
        text-decoration: none;
    }
    .mfn-subcat-deep {
        padding-left: 72px;
        font-size: .86rem;
        color: var(--text-muted, #888);
        font-weight: 400;
        position: relative;
    }
    .mfn-subcat-deep::before {
        content: "";
        position: absolute;
        left: 58px;
        top: 50%;
        width: 6px;
        height: 1px;
        background: #ccc;
    }

    .mfn-quick-links {
        margin-top: 14px;
        border-top: 1px solid #f0f0f0;
        padding-top: 6px;
    }
    .mfn-quick-links a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 4px;
        text-decoration: none;
        color: var(--text-body, #555);
        font-size: .88rem;
        font-weight: 500;
        border-bottom: 1px solid #f5f5f5;
    }
    .mfn-quick-links a:last-child { border-bottom: 0; }
    .mfn-quick-links a i {
        color: var(--color-primary);
        font-size: 15px;
    }
    .mfn-quick-links a:hover { color: var(--color-primary); }

/* Desktop: hide the bar only while the header's landscape nav (with its
   visible category links) is actually active. When navigation.js falls
   back to portrait mode on a wide screen (too many categories to fit),
   the bar stays — otherwise there would be no menu anywhere. */
@media (min-width: 992px) {
    body:not(:has(#navigation.navigation-portrait)) .mobile-footer-nav,
    body:not(:has(#navigation.navigation-portrait)) .mfn-sheet,
    body:not(:has(#navigation.navigation-portrait)) .mfn-sheet-backdrop {
        display: none !important;
    }
    body.has-mfn:not(:has(#navigation.navigation-portrait)) {
        padding-bottom: 0;
    }
    body.has-mfn:not(:has(#navigation.navigation-portrait)) .top-scroll {
        bottom: 10px; /* theme default from styles.css #back2Top */
    }
}

/* ============================================
   FAQ ACCORDION
   Storefront "Түгээмэл асуулт хариулт" page.
   Each Бүлэг is a compact panel with a plain
   text label; questions inside are separated by
   hairlines rather than floating as their own
   cards. Spacing is deliberately tight — the
   page should fit on one screen where possible.
   Driven by the theme tokens (--color-primary /
   --radius-* / --shadow-card).
   ============================================ */

/* ---- Page header ---- */

.faq-head {
    margin-bottom: 16px;
}

.faq-head h3 {
    font-size: 1.32rem;
    line-height: 1.3;
}

.faq-head p {
    font-size: .89rem;
}

/* ---- Search ----
   The wrapper carries the border/height and the input is chrome-free, so the
   icon is inside the field by construction. This also sidesteps styles.css,
   which pins every .form-control to `height: 52px !important`. */

.faq-search-row {
    margin-bottom: 20px;
}

.faq-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    margin: 0;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: var(--radius-input, 6px);
    cursor: text;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.faq-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 13%, transparent);
}

.faq-search > i {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    color: var(--text-muted, #9a9a9a);
}

.faq-search:focus-within > i {
    color: var(--color-primary);
}

.faq-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    font-size: .92rem;
    color: var(--text-body, #444);
    background: transparent;
    border: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.faq-search-input::placeholder {
    color: var(--text-muted, #a8a8a8);
}

.faq-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ---- Group panel ---- */

.faq-group {
    display: block;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-card, 10px);
    overflow: hidden;
}

.faq-group + .faq-group {
    margin-top: 14px;
}

/* Just a label — no icon, no count, minimal height. */
.faq-group-head {
    margin: 0;
    padding: 9px 16px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 7%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, #fff);
}

/* ---- Question rows ---- */

.faq-accordion .accordion-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
}

.faq-accordion .accordion-item + .accordion-item {
    border-top: 1px solid #f0f0f0;
}

.faq-accordion .accordion-button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    color: var(--text-heading, #232323);
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    box-shadow: none;
    transition: background-color .16s ease, color .16s ease;
}

.faq-accordion .accordion-button:hover {
    background: #fafafa;
    color: var(--color-primary);
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -3px;
}

/* Bootstrap's chevron is a hard-coded SVG; draw our own +/- so it follows the
   theme colour and folds shut when the row opens. */
.faq-accordion .accordion-button::after {
    display: none;
}

.faq-q {
    flex: 1 1 auto;
}

.faq-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 11%, #fff);
    transition: background-color .2s ease, transform .25s ease;
}

.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
    transform: translate(-50%, -50%);
    transition: opacity .2s ease, background-color .2s ease;
}

.faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* ---- Open row ---- */

.faq-accordion .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--color-primary) 6%, #fff);
    color: var(--color-primary);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.faq-accordion .accordion-button:not(.collapsed) .faq-toggle {
    background: var(--color-primary);
    transform: rotate(180deg);
}

.faq-accordion .accordion-button:not(.collapsed) .faq-toggle::before,
.faq-accordion .accordion-button:not(.collapsed) .faq-toggle::after {
    background: #fff;
}

.faq-accordion .accordion-button:not(.collapsed) .faq-toggle::after {
    opacity: 0;
}

/* Question and answer share the tint and accent so an open item reads as one
   block lifted out of the list. */
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    background: color-mix(in srgb, var(--color-primary) 6%, #fff);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.faq-accordion .accordion-body {
    padding: 0 16px 14px 16px;
    color: var(--text-body, #4a4a4a);
    font-size: .91rem;
    line-height: 1.75;
}

.faq-accordion .accordion-body > :last-child {
    margin-bottom: 0;
}

.faq-accordion .accordion-body p {
    margin-bottom: .6rem;
}

.faq-accordion .accordion-body ul,
.faq-accordion .accordion-body ol {
    margin-bottom: .6rem;
    padding-left: 1.15rem;
}

.faq-accordion .accordion-body li + li {
    margin-top: .2rem;
}

.faq-accordion .accordion-body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-accordion .accordion-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card, 10px);
}

/* ---- Empty / no-result states ---- */

.faq-empty {
    text-align: center;
    padding: 34px 20px;
    color: var(--text-muted, #8a8a8a);
}

.faq-empty i {
    display: block;
    margin-bottom: 9px;
    font-size: 1.8rem;
    color: color-mix(in srgb, var(--color-primary) 45%, #ccc);
}

.faq-empty p {
    margin: 0;
    font-size: .92rem;
}

/* ---- Closing contact card ---- */

.faq-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding: 18px 22px;
    border-radius: var(--radius-card, 12px);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 10%, #fff),
        color-mix(in srgb, var(--color-primary) 4%, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, #fff);
}

.faq-contact-text h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading, #222);
    margin: 0 0 3px;
}

.faq-contact-text p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--text-muted, #6f6f6f);
}

.faq-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.faq-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, #fff);
    border-radius: var(--radius-btn, 999px);
    transition: transform .16s ease, box-shadow .16s ease;
}

.faq-contact-btn:hover {
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .09);
}

.faq-contact-btn.is-primary {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.faq-contact-btn.is-primary:hover {
    color: #fff;
}

.faq-contact-btn i {
    font-size: 14px;
}

/* ---- Small screens ---- */

@media (max-width: 575.98px) {
    .faq-head {
        margin-bottom: 12px;
    }

    .faq-search-row {
        margin-bottom: 16px;
    }

    .faq-group + .faq-group {
        margin-top: 11px;
    }

    .faq-group-head {
        padding: 8px 13px;
        font-size: .76rem;
    }

    .faq-accordion .accordion-button {
        gap: 11px;
        padding: 11px 13px;
        font-size: .92rem;
    }

    .faq-accordion .accordion-body {
        padding: 0 13px 12px 13px;
        font-size: .89rem;
    }

    .faq-contact {
        padding: 16px 16px;
        gap: 12px;
    }

    .faq-contact-actions {
        width: 100%;
    }

    .faq-contact-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .faq-toggle,
    .faq-search,
    .faq-contact-btn,
    .faq-accordion .accordion-button {
        transition: none;
    }
}