/* ==========================================================================
   emuujin.mn — Version 2 theme
   Black + gold luxury dark theme, layered on top of style.css.
   Loaded after style.css by frontend/assets/AppAsset.php, so everything here
   is an override. Remove the AppAsset entry to fall back to the old look.
   ========================================================================== */

/* Montserrat covers Cyrillic; Poppins and Oswald (used throughout style.css)
   do not, so Mongolian text fell back per-glyph and looked ragged. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap&subset=cyrillic,cyrillic-ext,latin");

:root {
    --v2-bg:            #0d0d0f;
    --v2-bg-raised:     #16161a;
    --v2-bg-card:       #1b1b20;
    --v2-bg-hover:      #22222a;
    --v2-line:          #2c2c34;
    --v2-line-soft:     #232329;

    --v2-gold:          #d4af37;
    --v2-gold-bright:   #edc75a;
    --v2-gold-deep:     #a8862a;
    --v2-gold-dim:      rgba(212, 175, 55, .18);

    --v2-text:          #ece9e2;
    --v2-text-muted:    #9c9a95;
    --v2-text-faint:    #6e6c69;

    --v2-sale:          #e2574c;
    --v2-new:           #3f9d7a;

    --v2-radius:        4px;
    --v2-radius-lg:     8px;
    --v2-shadow:        0 4px 24px rgba(0, 0, 0, .45);
    --v2-ease:          .25s cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
    background-color: var(--v2-bg);
    color: var(--v2-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.page-wrapper,
.main {
    background-color: var(--v2-bg);
}

a {
    color: var(--v2-text);
    transition: color var(--v2-ease);
}

a:hover,
a:focus {
    color: var(--v2-gold);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--v2-text);
}

hr {
    border-color: var(--v2-line);
}

::selection {
    background: var(--v2-gold);
    color: #000;
}

/* Thin gold scrollbar on desktop */
@media (min-width: 992px) {
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: var(--v2-bg); }
    ::-webkit-scrollbar-thumb {
        background: var(--v2-line);
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--v2-gold-deep); }
}

/* --------------------------------------------------------------------------
   2. Section headings
   -------------------------------------------------------------------------- */

.subtitle {
    color: var(--v2-text);
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 26px;
    font-size: 1.7rem;
}

.subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 2px;
    background: linear-gradient(90deg, var(--v2-gold), transparent);
}

.subtitle.subtitle-line {
    border: 0;
    text-align: center;
}

.subtitle.subtitle-line::before {
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    background: linear-gradient(90deg, transparent, var(--v2-gold), transparent);
}

.subtitle.subtitle-line::after {
    display: none;
}

.subtitle.subtitle-line span {
    background: transparent;
    color: var(--v2-text);
    padding: 0;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.header {
    background-color: var(--v2-bg);
    border-bottom: 1px solid var(--v2-line-soft);
}

.header-top {
    background-color: #08080a;
    border-bottom: 1px solid var(--v2-line-soft);
    color: var(--v2-text-faint);
    font-size: 1.15rem;
}

.header-top a,
.header-top a:visited {
    color: var(--v2-text-faint);
}

.header-top a:hover,
.header-top a:focus {
    color: var(--v2-gold);
}

.header-middle {
    background-color: var(--v2-bg);
    padding-top: 14px;
    padding-bottom: 14px;
}

.header-bottom,
.header-bottom.sticky-header {
    background-color: #08080a;
    border-top: 1px solid var(--v2-line-soft);
    border-bottom: 1px solid var(--v2-line-soft);
}

.sticky-header.fixed {
    background-color: rgba(8, 8, 10, .97);
    box-shadow: var(--v2-shadow);
}

/* Logo sits on dark now — lift it so a dark-on-white logo stays readable */
.logo img {
    filter: brightness(0) invert(1) drop-shadow(0 0 0 transparent);
    opacity: .95;
    transition: opacity var(--v2-ease);
}

.logo:hover img {
    opacity: 1;
}

/* Contact block */
.header-contact {
    color: var(--v2-text);
    line-height: 1.3;
}

.header-contact span {
    color: var(--v2-text-faint);
    display: block;
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Main nav */
/* The underline is painted with a background gradient rather than ::after,
   because superfish already owns ::before (dropdown pointer) and ::after (the
   caret glyph) on these links. Overriding ::after stretched that caret into a
   gold line straight through the label text. */
.main-nav .menu > li > a {
    color: var(--v2-text);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 1.25rem;
    padding: 1.35rem 1.6rem;
    position: relative;
    background-image: linear-gradient(var(--v2-gold), var(--v2-gold));
    background-repeat: no-repeat;
    background-position: 50% calc(100% - .7rem);
    background-size: 0 1px;
    transition: background-size var(--v2-ease), color var(--v2-ease);
}

.main-nav .menu > li:hover > a,
.main-nav .menu > li.active > a,
.main-nav .menu > li.show > a {
    color: var(--v2-gold);
    background-color: transparent;
    background-size: calc(100% - 3.2rem) 1px;
}

/* Keep superfish's own indicators, just recoloured for the dark theme */
.menu.sf-arrows .sf-with-ul::after {
    color: var(--v2-gold);
    background: none;
    height: auto;
    width: auto;
    left: auto;
}

.menu.sf-arrows > li > a.sf-with-ul::before {
    border-color: transparent transparent var(--v2-bg-raised);
}

/* Megamenu + dropdowns */
.megamenu,
.main-nav .menu ul,
.header-menu,
.dropdown-menu,
.dropdownmenu-wrapper {
    background-color: var(--v2-bg-raised);
    border: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow);
    border-radius: var(--v2-radius);
}

.megamenu a,
.main-nav .menu ul a,
.header-menu a,
.dropdown-menu a {
    color: var(--v2-text-muted);
}

.megamenu a:hover,
.main-nav .menu ul a:hover,
.header-menu a:hover,
.dropdown-menu a:hover {
    color: var(--v2-gold);
    background: transparent;
}

/* Lists inside a megamenu are plain columns, not dropdown cards of their own —
   style.css gives every `.menu ul` a white panel, and the dark-card rule above
   turned each one into a bordered box inside the megamenu. */
.main-nav .megamenu ul,
.megamenu ul,
.megamenu ul ul {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.megamenu ul li,
.header-menu ul li {
    border-bottom: 1px solid var(--v2-line-soft);
}

.megamenu ul li:last-child,
.header-menu ul li:last-child {
    border-bottom: 0;
}

/* Search */
.header-search .form-control,
.header-search input[type="text"],
.header-search input[type="search"] {
    background-color: var(--v2-bg-card);
    border: 1px solid var(--v2-line);
    color: var(--v2-text);
    border-radius: var(--v2-radius);
}

.header-search .form-control::placeholder {
    color: var(--v2-text-faint);
}

.header-search .form-control:focus {
    border-color: var(--v2-gold-deep);
    box-shadow: 0 0 0 2px var(--v2-gold-dim);
}

.header-search .btn,
.header-search button[type="submit"] {
    background-color: var(--v2-gold);
    border-color: var(--v2-gold);
    color: #111;
}

.header-search .btn:hover {
    background-color: var(--v2-gold-bright);
    border-color: var(--v2-gold-bright);
}

.search-toggle,
.header-search .search-toggle {
    color: var(--v2-text);
}

.search-toggle:hover {
    color: var(--v2-gold);
}

/* Cart icon + badge */
.cart-dropdown > a {
    color: var(--v2-text);
}

.cart-dropdown > a:hover {
    color: var(--v2-gold);
}

.cart-count {
    background-color: var(--v2-gold);
    color: #111;
    font-weight: 600;
}

.dropdown-cart-total {
    border-top: 1px solid var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
    color: var(--v2-text);
}

.cart-total-price {
    color: var(--v2-gold);
}

.dropdown-cart-products .product-title a {
    color: var(--v2-text);
}

/* --------------------------------------------------------------------------
   4. Header account link (new in v2)
   -------------------------------------------------------------------------- */

.v2-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 6px;
    border: 1px solid var(--v2-line);
    border-radius: 50%;
    color: var(--v2-text);
    font-size: 1.9rem;
    line-height: 1;
    transition: border-color var(--v2-ease), color var(--v2-ease), background-color var(--v2-ease);
}

.v2-account:hover,
.v2-account:focus {
    border-color: var(--v2-gold);
    color: var(--v2-gold);
    background-color: var(--v2-gold-dim);
}

.v2-account.is-signed-in {
    border-color: var(--v2-gold-deep);
    color: var(--v2-gold);
}

/* --------------------------------------------------------------------------
   5. Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumb-nav {
    background-color: #08080a;
    border-bottom: 1px solid var(--v2-line-soft);
}

.breadcrumb {
    background: transparent;
    margin-bottom: 0;
    padding: .9rem 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--v2-text-faint);
    font-size: 1.15rem;
}

.breadcrumb-item a:hover {
    color: var(--v2-gold);
}

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

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--v2-line);
}

/* --------------------------------------------------------------------------
   6. Info boxes (delivery / warranty strip)
   -------------------------------------------------------------------------- */

.info-boxes-container {
    background: linear-gradient(180deg, #101014, #0b0b0e);
    border-bottom: 1px solid var(--v2-line-soft);
    border-top: 1px solid var(--v2-line-soft);
}

.info-box {
    color: var(--v2-text-muted);
    padding: 1.6rem 1.5rem;
}

.info-box i {
    color: var(--v2-gold);
}

.info-box h4,
.info-box h3 {
    color: var(--v2-text);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 1.25rem;
    margin-bottom: .3rem;
}

.info-box p {
    color: var(--v2-text-faint);
    font-size: 1.15rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Sidebar / category widget
   -------------------------------------------------------------------------- */

.widget {
    background-color: var(--v2-bg-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    padding: 0;
    margin-bottom: 24px;
    overflow: hidden;
}

.widget-title {
    background: linear-gradient(90deg, var(--v2-gold-deep), #6f5a1c);
    color: #14140f;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 1.3rem;
    margin: 0;
    padding: 1.2rem 1.6rem;
    border: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-title i {
    margin-right: 4px;
}

.widget-cats .catAccordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* style.css styles these as `.widget-cats ul li { border: 1px solid #e6ebee;
   padding: 1.2rem 2rem }`, which left pale borders on the dark card and
   doubled the row height once the <span> got its own padding. */
.widget-cats .catAccordion > li,
.widget-cats .catAccordion > li:first-child,
.widget-cats .catAccordion ul li {
    padding: 0;
    border: 0;
}

.widget-cats .catAccordion > li {
    position: relative;
    border-bottom: 1px solid var(--v2-line-soft);
}

.widget-cats .catAccordion > li:last-child {
    border-bottom: 0;
}

.widget-cats .catAccordion > li > span {
    display: block;
    padding: 1.25rem 4.6rem 1.25rem 1.6rem;
    color: var(--v2-text);
    font-size: 1.35rem;
    letter-spacing: .04em;
    cursor: default;
}

.widget-cats .catAccordion > li > .accordion-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.6rem;
    height: 4.6rem;
    border-left: 1px solid var(--v2-line-soft);
}

/* Shared +/- toggle used by the home category widget and the shop sidebar */
.accordion-btn {
    background: transparent;
    border: 0;
    color: var(--v2-text-faint);
    cursor: pointer;
    transition: color var(--v2-ease), background-color var(--v2-ease);
}

.accordion-btn::before {
    content: '+';
    font-size: 2rem;
    line-height: 1;
}

.accordion-btn:not(.collapsed)::before {
    content: '\2013';
}

.accordion-btn:hover {
    color: var(--v2-gold);
    background-color: var(--v2-bg-hover);
}

/* --- Shop sidebar (category list on /type/<id>) --- */

/* style.css frames this widget with a light 1px #dae2e6 border and 2rem of
   padding, which fought the dark card look and pushed the title bar inward. */
.sidebar-shop .widget,
.sidebar-shop .widget:last-child {
    padding: 0;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Its own chevron would double up with the +/- button */
.sidebar-shop .widget-title a::after,
.sidebar-shop .widget-title a.collapsed::after {
    content: none !important;
    display: none !important;
}

.sidebar-shop .widget-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 0 1.6rem;
    margin: 0;
    background: linear-gradient(90deg, var(--v2-gold-deep), #6f5a1c);
    color: #14140f;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.2;
}

.sidebar-shop .widget-title > span {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.2rem 0;
}

/* Clearly tappable toggle, flush to the right edge of the gold bar */
.sidebar-shop .widget-title .accordion-btn {
    flex: 0 0 auto;
    width: 46px;
    align-self: stretch;
    min-height: 46px;
    color: #14140f;
    border-left: 1px solid rgba(0, 0, 0, .22);
    background-color: rgba(0, 0, 0, .10);
    font-size: 0;
}

.sidebar-shop .widget-title .accordion-btn::before {
    font-size: 2.2rem;
    font-weight: 400;
}

.sidebar-shop .widget-title .accordion-btn:hover,
.sidebar-shop .widget-title .accordion-btn:focus {
    color: #14140f;
    background-color: rgba(0, 0, 0, .24);
}

.sidebar-shop .widget-body {
    padding: 0;
}

.sidebar-shop .cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* style.css adds .8rem between items; the divider lines do that job here */
.sidebar-shop .cat-list li {
    margin: 0;
    padding: 0;
    border: 0;
}

.sidebar-shop .cat-list li a {
    display: block;
    padding: 1.1rem 1.6rem;
    color: var(--v2-text-muted);
    font-size: 1.3rem;
    line-height: 1.4;
    border-bottom: 1px solid var(--v2-line-soft);
}

.sidebar-shop .cat-list li:last-child a {
    border-bottom: 0;
}

.sidebar-shop .cat-list li a:hover {
    color: var(--v2-gold);
    background-color: var(--v2-bg-hover);
}

.widget-cats .catAccordion ul {
    list-style: none;
    margin: 0;
    padding: 0 0 .6rem;
    background-color: #131318;
}

.widget-cats .catAccordion ul li a {
    display: block;
    padding: .85rem 1.6rem .85rem 2.6rem;
    color: var(--v2-text-muted);
    font-size: 1.25rem;
}

.widget-cats .catAccordion ul li a:hover {
    color: var(--v2-gold);
    background-color: var(--v2-bg-hover);
}

/* --------------------------------------------------------------------------
   8. Product cards
   -------------------------------------------------------------------------- */

.product {
    background-color: var(--v2-bg-card);
    border: 1px solid var(--v2-line-soft);
    border-radius: var(--v2-radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--v2-ease), transform var(--v2-ease), box-shadow var(--v2-ease);
}

.product:hover {
    border-color: var(--v2-gold-deep);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}

.product-image-container {
    background-color: #fff;
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
}

.small_list_for_item .product-image-container img,
.small_list_for_item_new .product-image-container img {
    transition: transform .4s var(--v2-ease);
}

.small_list_for_item .product:hover .product-image-container img,
.small_list_for_item_new .product:hover .product-image-container img {
    transform: scale(1.04);
}

.product-details {
    padding: 1.2rem 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.product-title {
    color: var(--v2-text);
    font-size: 1.3rem;
    line-height: 1.45;
    margin-bottom: .8rem;
    /* keep card heights even without cutting titles too hard */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.8rem;
}

.product-title a {
    color: var(--v2-text);
    font-weight: 500;
}

.product-title a:hover {
    color: var(--v2-gold);
}

.price-box {
    margin-top: auto;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
}

.product-price {
    color: var(--v2-gold);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.old-price {
    color: var(--v2-text-faint);
    font-size: 1.25rem;
    text-decoration: line-through;
}

.old-price + .product-price {
    color: var(--v2-gold);
    margin-left: 0;
}

/* Labels */
.product-label {
    border-radius: 2px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .7rem;
    z-index: 2;
}

.label-sale {
    background-color: var(--v2-sale);
    color: #fff;
}

.label-new {
    background-color: var(--v2-new);
    color: #fff;
}

/* Quickview button */
.btn-quickview {
    background-color: rgba(8, 8, 10, .88);
    color: var(--v2-gold);
    border: 1px solid var(--v2-gold-deep);
    border-radius: 2px;
    font-size: 1.1rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    z-index: 3;
}

.btn-quickview:hover,
.product:hover .btn-quickview:hover,
.product:hover .btn-quickview:focus {
    background-color: var(--v2-gold);
    color: #111;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   8b. Product grid rebuild
   style.css pins these columns to fixed percentages (25% / 20% / 14%) with
   !important and no regard for viewport width. Combined with the ListView
   wrapper (.list-view > .item) those percentages nest, which collapsed every
   card into a narrow strip once the real viewport meta tag was enabled.
   Here the .item wrapper becomes the grid cell and the inner column is
   neutralised, so widths are driven by breakpoints only.
   -------------------------------------------------------------------------- */

/* yii2-bootstrap loads Bootstrap 3.4, which is float-based and defines no
   .col-6 / .justify-content-center. The product rows therefore were not flex
   containers at all, so every flex-basis was ignored and the cards stacked.
   Make those rows real flex containers here. */
.row.row-sm {
    display: flex;
    flex-wrap: wrap;
}

.row.row-sm.justify-content-center {
    justify-content: center;
}

.row-sm {
    margin-left: -6px;
    margin-right: -6px;
}

.row-sm > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

/* ListView container ("САНАЛ БОЛГОХ", "ЭРЭЛТТЭЙ") */
.list-view {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: -6px;
    margin-right: -6px;
}

.list-view > .item,
.justify-content-center > .list-view > .item {
    display: flex;
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 14px;
}

/* The inner col-* is no longer a grid cell — it just fills its .item */
.list-view > .item > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    display: flex;
}

/* Plain foreach list ("Шинээр нэмэгдсэн") — columns sit directly in .row.
   style.css forces `.row.row-sm [class*='col-'] { flex: 0 0 100% }` below
   600px, which is more specific than a single class, hence !important. */
.small_list_for_item_new {
    float: none !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    margin-bottom: 14px;
    display: flex;
}

.small_list_for_item {
    display: flex;
    margin-bottom: 14px;
}

.small_list_for_item > .product,
.small_list_for_item_new > .product {
    width: 100%;
}

@media (min-width: 576px) {
    .small_list_for_item_new {
        flex: 0 0 33.3333% !important;
        width: 33.3333% !important;
        max-width: 33.3333% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablets: three across, using the same grid the desktop uses so the
       card size stays consistent between sections. */
    .list-view,
    .row.row-sm.v2-product-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-left: 0;
        margin-right: 0;
    }

    /* Bootstrap 3 clears floats with `.row::before` / `.row::after`. Inside a
       grid container those pseudo-elements become real grid cells, which put
       an empty box in the first slot and pushed every card along by one. */
    .row.row-sm.v2-product-grid::before,
    .row.row-sm.v2-product-grid::after,
    .list-view::before,
    .list-view::after {
        display: none;
    }

    .row.row-sm.v2-product-grid > .list-view {
        grid-column: 1 / -1;
    }

    .list-view > .item,
    .justify-content-center > .list-view > .item,
    .row.row-sm.v2-product-grid > [class*="col-"] {
        display: flex;
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        padding: 0;
        margin: 0;
    }

    .list-view > .item > [class*="col-"] {
        padding: 0;
        margin: 0;
    }

    .list-view > .pagination,
    .list-view > .summary,
    .list-view > .empty {
        grid-column: 1 / -1;
    }
}

/* 992px and up is handled by the grid in section 15. */

/* Thumbnails: style.css locks these to ~102px / ~126px squares.
   Make them fill the card instead, keeping a square frame. */
.small_list_for_item .product-image-container,
.small_list_for_item_new .product-image-container,
.product-image-thumbnail-small,
.product-image-thumbnail-small-new {
    display: block;
    width: 100%;
}

.small_list_for_item .product-image-container img,
.small_list_for_item_new .product-image-container img,
.product-image-thumbnail-small img,
.product-image-thumbnail-small-new img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: #fff;
    padding: 8px;
    margin: 0;
    border-radius: 0;
}

/* Legacy min-height forced tall empty cards; let content decide */
.item > .col-6 > .product,
.list-view > .item > [class*="col-"] > .product {
    min-height: 0 !important;
    height: auto;
}

/* --------------------------------------------------------------------------
   9. Buttons & forms
   -------------------------------------------------------------------------- */

.btn,
.btn-primary {
    border-radius: 2px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.2rem;
    padding: 1.1rem 2.2rem;
    transition: all var(--v2-ease);
}

.btn-primary,
.btn.btn-primary,
.dropdown-cart-action .btn {
    background-color: var(--v2-gold);
    border: 1px solid var(--v2-gold);
    color: #111;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.dropdown-cart-action .btn:hover {
    background-color: var(--v2-gold-bright);
    border-color: var(--v2-gold-bright);
    color: #111;
}

.btn-secondary,
.btn-default {
    background-color: transparent;
    border: 1px solid var(--v2-line);
    color: var(--v2-text);
}

.btn-secondary:hover,
.btn-default:hover {
    border-color: var(--v2-gold);
    color: var(--v2-gold);
}

.btn-link,
.btn-logout-form {
    color: var(--v2-text-muted);
    text-transform: none;
    letter-spacing: normal;
    padding: 0;
}

.btn-link:hover,
.btn-logout-form:hover {
    color: var(--v2-gold);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
    background-color: var(--v2-bg-card);
    border: 1px solid var(--v2-line);
    color: var(--v2-text);
    border-radius: var(--v2-radius);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: var(--v2-bg-card);
    border-color: var(--v2-gold-deep);
    color: var(--v2-text);
    box-shadow: 0 0 0 2px var(--v2-gold-dim);
    outline: none;
}

.form-control::placeholder {
    color: var(--v2-text-faint);
}

label,
.control-label {
    color: var(--v2-text-muted);
}

/* Tables (cart, orders) */
.table {
    color: var(--v2-text-muted);
}

.table th {
    color: var(--v2-text);
    border-color: var(--v2-line);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 1.15rem;
}

.table td {
    border-color: var(--v2-line-soft);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--v2-line-soft);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .02);
}

/* Cards / panels / modals */
.card,
.panel,
.modal-content {
    background-color: var(--v2-bg-card);
    border: 1px solid var(--v2-line);
    color: var(--v2-text-muted);
}

.modal-header,
.modal-footer {
    border-color: var(--v2-line);
}

.close {
    color: var(--v2-text);
    text-shadow: none;
    opacity: .8;
}

.close:hover {
    color: var(--v2-gold);
    opacity: 1;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span,
.page-link {
    background-color: var(--v2-bg-card);
    border-color: var(--v2-line);
    color: var(--v2-text-muted);
}

.pagination > li > a:hover,
.page-link:hover {
    background-color: var(--v2-bg-hover);
    border-color: var(--v2-gold-deep);
    color: var(--v2-gold);
}

.pagination > .active > a,
.pagination > .active > span,
.page-item.active .page-link {
    background-color: var(--v2-gold);
    border-color: var(--v2-gold);
    color: #111;
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.footer {
    background-color: #08080a;
    border-top: 1px solid var(--v2-line);
    color: var(--v2-text-faint);
}

.footer a {
    color: var(--v2-text-muted);
}

.footer a:hover {
    color: var(--v2-gold);
}

.footer h3,
.footer h4,
.footer .widget-title {
    background: none;
    color: var(--v2-text);
    padding: 0 0 1rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 1.3rem;
}

.footer .social-icon {
    background-color: transparent;
    border: 1px solid var(--v2-line);
    color: var(--v2-text-muted);
    border-radius: 50%;
}

.footer .social-icon:hover,
.footer .social-icon:focus {
    background-color: var(--v2-gold);
    border-color: var(--v2-gold);
    color: #111;
}

.footer-bottom {
    border-top: 1px solid var(--v2-line-soft);
    color: var(--v2-text-faint);
}

/* Scroll-to-top */
#scroll-top {
    background-color: var(--v2-gold);
    color: #111;
    border-radius: 2px;
    border: 0;
}

#scroll-top:hover {
    background-color: var(--v2-gold-bright);
}

/* --------------------------------------------------------------------------
   11. Mobile menu
   -------------------------------------------------------------------------- */

.mobile-menu-container {
    background-color: #0b0b0e;
    border-right: 1px solid var(--v2-line);
}

.mobile-menu-overlay {
    background-color: rgba(0, 0, 0, .75);
}

.mobile-menu-close {
    color: var(--v2-text);
    font-size: 2.2rem;
    padding: 12px;
}

.mobile-menu li a {
    color: var(--v2-text);
    border-bottom: 1px solid var(--v2-line-soft);
    padding: 1.4rem 2rem;
    font-size: 1.4rem;
    letter-spacing: .04em;
}

.mobile-menu li a:hover {
    color: var(--v2-gold);
    background-color: var(--v2-bg-hover);
}

.mobile-menu ul li a {
    color: var(--v2-text-muted);
    font-size: 1.3rem;
    padding-left: 3.2rem;
}

.mobile-menu-toggler {
    color: var(--v2-text);
    font-size: 2.4rem;
    padding: 6px 10px;
}

.mobile-menu-toggler:hover {
    color: var(--v2-gold);
}

/* Account block pinned at the top of the drawer (markup added in v2) */
.v2-mobile-account {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--v2-line);
    background: linear-gradient(180deg, #121216, #0b0b0e);
}

.v2-mobile-account .v2-btn {
    flex: 1 1 auto;
    min-width: 120px;
    text-align: center;
    padding: 12px 14px;
    border-radius: 2px;
    font-size: 1.3rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.v2-mobile-account .v2-btn-gold {
    background-color: var(--v2-gold);
    border: 1px solid var(--v2-gold);
    color: #111;
}

.v2-mobile-account .v2-btn-gold:hover {
    background-color: var(--v2-gold-bright);
    color: #111;
}

.v2-mobile-account .v2-btn-ghost {
    background-color: transparent;
    border: 1px solid var(--v2-line);
    color: var(--v2-text);
}

.v2-mobile-account .v2-btn-ghost:hover {
    border-color: var(--v2-gold);
    color: var(--v2-gold);
}

.v2-mobile-account .v2-greeting {
    flex: 1 1 100%;
    color: var(--v2-text-faint);
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.v2-mobile-account .v2-greeting strong {
    color: var(--v2-gold);
    font-weight: 600;
}

/* Full-width logout button inside the drawer */
.v2-mobile-account form {
    flex: 1 1 100%;
    margin: 0;
}

.v2-mobile-account form .btn {
    width: 100%;
    color: var(--v2-text-muted);
}

/* --------------------------------------------------------------------------
   11a. Display utilities
   style.css ships the Bootstrap 4 grid but not the display utilities, so the
   few we rely on are defined here.
   -------------------------------------------------------------------------- */

.d-none  { display: none !important; }
.d-block { display: block !important; }

@media (min-width: 768px) {
    .d-md-none  { display: none !important; }
    .d-md-block { display: block !important; }
}

/* --------------------------------------------------------------------------
   11b. Login / signup pages
   -------------------------------------------------------------------------- */

.heading .title {
    color: var(--v2-text);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 1.9rem;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 22px;
}

.heading .title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 2px;
    background: linear-gradient(90deg, var(--v2-gold), transparent);
}

.heading p {
    color: var(--v2-text-faint);
}

/* Cross-link between the login and signup forms */
.v2-auth-switch {
    margin-top: 20px;
    padding: 16px 18px;
    background-color: var(--v2-bg-card);
    border: 1px solid var(--v2-line);
    border-left: 3px solid var(--v2-gold);
    border-radius: var(--v2-radius);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.v2-auth-switch span {
    color: var(--v2-text-muted);
    font-size: 1.3rem;
}

.v2-auth-switch-btn {
    color: var(--v2-gold);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--v2-gold-dim);
    padding-bottom: 1px;
}

.v2-auth-switch-btn:hover,
.v2-auth-switch-btn:focus {
    color: var(--v2-gold-bright);
    border-bottom-color: var(--v2-gold-bright);
}

/* Desktop side panel on the login page */
.v2-auth-aside {
    background: linear-gradient(160deg, #17171c, #0f0f13);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    padding: 32px 30px;
    margin-top: 52px;
}

.v2-auth-aside h3 {
    color: var(--v2-text);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 1.6rem;
    margin-bottom: 14px;
}

.v2-auth-aside p {
    color: var(--v2-text-muted);
    font-size: 1.3rem;
    line-height: 1.7;
    margin-bottom: 22px;
}

/* Yii form fields on dark */
.form-group .help-block,
.help-block {
    color: var(--v2-sale);
    font-size: 1.15rem;
}

.has-error .form-control {
    border-color: var(--v2-sale);
}

.has-success .form-control {
    border-color: var(--v2-new);
}

.form-group .checkbox label,
.checkbox label,
.form-group label {
    color: var(--v2-text-muted);
    font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   11c. Leftover brand colours from style.css
   These rules out-specify the generic ones above, so the old pink (#db3570,
   #c52e64, #ea3f7c, #eb2771) and checkout orange (#ff5501) survived. Listed
   here explicitly so no pink is left anywhere on the site.
   -------------------------------------------------------------------------- */

.main-nav,
.sticky-header.fixed .main-nav {
    background-color: transparent;
}

.menu > li.active > a,
.menu > li:hover > a,
.menu > li.show > a,
.sticky-header.fixed .menu > li.active > a,
.sticky-header.fixed .menu > li:hover > a,
.sticky-header.fixed .menu > li.show > a {
    background-color: transparent;
    color: var(--v2-gold);
}

.widget-cats .widget-title,
.sidebar-product .widget-title,
.widget-dashboard .widget-title {
    background: linear-gradient(90deg, var(--v2-gold-deep), #6f5a1c);
    color: #14140f;
}

.tip.tip-hot,
.tip.tip-new {
    background-color: var(--v2-gold);
    color: #111;
}

.tip.tip-hot::before,
.menu > li > a .tip.tip-hot::before {
    border-right-color: var(--v2-gold);
    border-top-color: var(--v2-gold);
}

.tip.tip-new::before,
.menu > li > a .tip.tip-new::before {
    border-right-color: var(--v2-gold);
    border-top-color: var(--v2-gold);
}

/* Checkout progress / address selection used a bright orange */
.checkout-progress-bar li.active > span::before,
.shipping-address-box.active::after {
    background-color: var(--v2-gold);
}

.shipping-address-box.active,
.form-extra-control {
    border-color: var(--v2-gold) !important;
}

/* --------------------------------------------------------------------------
   11d. Yii widgets (GridView / DetailView / ListView)
   Used by the order history, wishlist and account pages, which otherwise
   render Bootstrap's light tables on the dark background.
   -------------------------------------------------------------------------- */

.grid-view,
.detail-view {
    color: var(--v2-text-muted);
}

.grid-view table,
.detail-view {
    background-color: var(--v2-bg-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    overflow: hidden;
}

.grid-view th,
.detail-view th {
    background-color: var(--v2-bg-raised);
    color: var(--v2-text);
    border-color: var(--v2-line) !important;
}

.grid-view td,
.detail-view td {
    border-color: var(--v2-line-soft) !important;
}

.grid-view tbody tr:hover > td {
    background-color: var(--v2-bg-hover);
}

.grid-view .summary,
.list-view .summary,
.grid-view .empty,
.list-view .empty {
    color: var(--v2-text-faint);
    font-size: 1.2rem;
    padding: .6rem 0;
}

.grid-view .filters input,
.grid-view .filters select {
    background-color: var(--v2-bg-raised);
    border: 1px solid var(--v2-line);
    color: var(--v2-text);
}

.grid-view a.asc::after,
.grid-view a.desc::after {
    color: var(--v2-gold);
}

/* Cart / totals tables */
.table-cart th,
.table-totals th {
    color: var(--v2-text);
}

.table-cart td,
.table-totals td {
    color: var(--v2-text-muted);
}

.table-totals .summary-total,
.table-totals tr:last-child td {
    color: var(--v2-gold);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   11e. Small horizontal products (.product-sm)
   Used by the footer "Онцлох бараа" block and the shop sidebar. These are
   image-left / text-right rows, not cards, so the card styling from section 8
   has to be undone for them. Likewise .footer .widget must not become a
   bordered panel.
   -------------------------------------------------------------------------- */

.footer .widget,
.footer-featured .widget {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    margin-bottom: 22px;
}

.product.product-sm {
    display: block;
    height: auto;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    transform: none;
}

.product.product-sm:hover {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
}

.product.product-sm .product-image-container {
    max-width: 80px;
    float: left;
    margin-bottom: 0;
    background-color: transparent;
    border: 1px solid var(--v2-line);
    border-radius: 2px;
    overflow: hidden;
}

.product.product-sm .product-image-container img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: #fff;
    padding: 4px;
    margin: 0;
    transform: none !important;
}

.product.product-sm .product-details {
    display: block;
    padding: .2rem 0 0;
    text-align: left;
}

.product.product-sm .product-title {
    display: block;
    min-height: 0;
    margin-bottom: .4rem;
    overflow: visible;
    -webkit-line-clamp: unset;
    color: var(--v2-text);
    font-size: 1.3rem;
}

.product.product-sm .product-title a {
    color: var(--v2-text-muted);
}

.product.product-sm .product-title a:hover {
    color: var(--v2-gold);
}

.product.product-sm .price-box {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

.product.product-sm .product-price {
    font-size: 1.4rem;
}

/* The footer block lays the items out two per row */
.footer-featured .col-md-6 {
    padding-right: 12px;
}

/* --------------------------------------------------------------------------
   12. Alerts
   -------------------------------------------------------------------------- */

.alert {
    background-color: var(--v2-bg-card);
    border: 1px solid var(--v2-line);
    color: var(--v2-text);
    border-radius: var(--v2-radius);
}

.alert-success { border-left: 3px solid var(--v2-new); }
.alert-danger  { border-left: 3px solid var(--v2-sale); }
.alert-info    { border-left: 3px solid var(--v2-gold); }
.alert-warning { border-left: 3px solid var(--v2-gold-bright); }

/* --------------------------------------------------------------------------
   13. Responsive — the real mobile fixes
   -------------------------------------------------------------------------- */

/* Phones */
@media (max-width: 575px) {
    body {
        font-size: 14px;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Hide the cramped "Холбоос" dropdown — the account icon and the
       hamburger drawer cover it with much larger tap targets. */
    .header-top {
        display: none;
    }

    .header-middle {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .header-middle .container {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .header-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    .logo img {
        max-height: 34px;
        width: auto;
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-left: auto;
    }

    /* Every header control gets a 44px tap target */
    .header-right > a,
    .header-right > button,
    .mobile-menu-toggler,
    .search-toggle,
    .cart-dropdown > a,
    .v2-account {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-contact {
        display: none;
    }

    /* Two products per row with breathing room */
    .small_list_for_item,
    .small_list_for_item_new {
        margin-bottom: 12px;
    }

    .product-details {
        padding: 1rem 1rem 1.2rem;
    }

    .product-title {
        font-size: 1.25rem;
        min-height: 3.6rem;
    }

    .product-price {
        font-size: 1.45rem;
    }

    .old-price {
        font-size: 1.15rem;
    }

    /* Quickview needs a finger, not a mouse: full-width bar under the image */
    .product-image-container .btn-quickview {
        opacity: 1;
        visibility: visible;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: .7rem;
        font-size: 1.05rem;
    }

    .subtitle {
        font-size: 1.5rem;
        margin-bottom: 18px;
    }

    /* Sidebar drops below the products on phones */
    .sidebar-home {
        order: 2;
        margin-top: 8px;
    }

    .breadcrumb-nav {
        display: none;
    }

    .info-box {
        padding: 1.2rem 1rem;
    }

    .info-box i {
        font-size: 2.8rem;
        min-width: 2.8rem;
        margin-right: 1.2rem;
    }
}

/* Small tablets */
@media (min-width: 576px) and (max-width: 991px) {
    .header-contact {
        display: none;
    }

    .product-title {
        font-size: 1.3rem;
    }
}

/* Show the mobile logo, hide the desktop one, below the nav breakpoint */
@media (max-width: 991px) {
    .logo .desktop { display: none; }
    .logo .mobile  { display: block; }
}

/* --------------------------------------------------------------------------
   14. Kill sticky-header scroll thrash on touch devices
   main.js runs Waypoint.Sticky on every .sticky-header — the header bottom bar
   and, on product pages, .product-single-details .sticky-header. Each time the
   element toggles to fixed the document height changes, which on short pages
   (login, item detail) puts scrolling into a loop: you scroll down, the page
   shrinks, the threshold un-triggers and the view snaps back to the top.
   Below the desktop breakpoint we keep those elements in the normal flow so
   the class can toggle harmlessly.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    /* The desktop mega-menu bar is redundant here — the hamburger drawer
       carries the same navigation — and it is what Waypoint sticks. */
    .header-bottom {
        display: none !important;
    }

    /* Never let a stuck header take itself out of the flow on touch screens. */
    .sticky-header.fixed,
    .sticky-header.fixed-nav,
    .product-single-details .sticky-header.fixed,
    .product-single-details .sticky-header.fixed-nav {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        box-shadow: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }

    /* Waypoint's wrapper reserves the element height; releasing it prevents
       the page from growing and shrinking as the class toggles. */
    .sticky-wrapper {
        height: auto !important;
    }

    /* themeSticky (sidebar) is configured for >991px, but make sure a stale
       inline transform can never pin the sidebar mid-scroll. */
    .sidebar-wrapper {
        position: static !important;
        transform: none !important;
        width: auto !important;
    }
}

@media (min-width: 992px) {
    .logo .desktop { display: block; }
    .logo .mobile  { display: none; }
}

/* ==========================================================================
   15. Desktop refinements (>= 992px only)
   Everything in this section is scoped above the mobile breakpoint so the
   phone layout stays exactly as it is.
   ========================================================================== */

@media (min-width: 992px) {

    /* --- 15.1 Typography: Cyrillic-safe display font ---------------------
       style.css sets Poppins/Oswald on headings, neither of which ships
       Cyrillic glyphs, so Mongolian text was assembled from per-character
       fallbacks and looked ragged. Montserrat covers Cyrillic. */
    body,
    .info-box,
    .info-box p {
        font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    }

    h1, h2, h3, h4, h5, h6,
    .subtitle,
    .widget-title,
    .heading .title,
    .info-box h3,
    .info-box h4,
    .product-title,
    .product-price,
    .old-price,
    .main-nav .menu > li > a,
    .megamenu a,
    .breadcrumb-item,
    .btn,
    .cat-list li a,
    .widget-cats a {
        font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    }

    /* Subpixel rendering keeps light-on-dark text from thinning out */
    body {
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
    }

    /* --- 15.2 Header layout ---------------------------------------------
       The account icon added for mobile also lands here, which crowded the
       450px search form. Lay the three header regions out explicitly. */
    .header-middle .container {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    .header-middle .header-left {
        flex: 0 0 auto;
    }

    .header-middle .header-center {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
        margin: 0;
        padding-left: 0;
    }

    .header-middle .header-right {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 18px;
        margin-left: 0;
    }

    .logo img {
        max-height: 52px;
        width: auto;
    }

    /* --- 15.3 Search: one field, one button ------------------------------ */
    .header-search .search-toggle {
        display: none !important;
    }

    .header-search {
        width: 100%;
    }

    .header-search form,
    .header-search .item-search {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }

    .header-search .header-search-wrapper {
        display: flex !important;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        background-color: var(--v2-bg-card);
        border: 1px solid var(--v2-line);
        border-radius: 2px;
        overflow: hidden;
        box-shadow: none;
    }

    .header-search .header-search-wrapper::before,
    .header-search .header-search-wrapper::after {
        display: none;
    }

    .header-search .form-control {
        flex: 1 1 auto;
        min-width: 0;
        height: 42px;
        margin: 0;
        padding: 0 14px;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        color: var(--v2-text);
        font-size: 1.3rem;
        box-shadow: none;
    }

    .header-search .form-control:focus {
        box-shadow: none;
        border: 0;
    }

    .header-search .select-custom {
        flex: 0 0 150px;
        max-width: 150px;
        margin: 0;
        position: relative;
    }

    .header-search .select-custom::after {
        color: var(--v2-gold);
        right: 1.1rem;
    }

    .header-search select {
        width: 100%;
        height: 42px;
        margin: 0;
        padding: 0 26px 0 12px;
        background-color: var(--v2-bg-raised);
        border: 0;
        border-left: 1px solid var(--v2-line);
        border-radius: 0;
        color: var(--v2-text-muted);
        font-size: 1.25rem;
    }

    .header-search .btn {
        flex: 0 0 54px;
        max-width: 54px;
        height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background-color: var(--v2-gold);
        color: #111;
        font-size: 1.7rem;
        letter-spacing: 0;
    }

    .header-search .btn:hover,
    .header-search .btn:focus {
        background-color: var(--v2-gold-bright);
        color: #111;
    }

    .header-search .item-search {
        margin: 0;
    }

    /* --- 15.4 Contact + account + cart ---------------------------------- */
    .header-contact {
        padding-right: 0;
        margin-right: 0;
        font-size: 1.5rem;
        white-space: nowrap;
    }

    .header-contact::after {
        display: none;
    }

    .v2-account {
        width: 40px;
        height: 40px;
        font-size: 1.8rem;
    }

    /* --- 15.5 Top bar links -------------------------------------------- */
    .header-top {
        font-size: 1.2rem;
    }

    .header-top .header-menu ul {
        padding: .4rem 0;
    }

    .header-top .header-menu a {
        padding: .6rem 1.4rem;
        font-size: 1.25rem;
    }

    .header-dropdown > a::after {
        border-color: var(--v2-gold) transparent transparent transparent;
    }

    /* --- 15.6 Main navigation ------------------------------------------- */
    .main-nav .menu > li > a {
        font-size: 1.3rem;
        font-weight: 500;
        padding: 1.4rem 1.8rem;
    }

    /* --- 15.6b Megamenu panel -------------------------------------------
       style.css sets `.menu .megamenu, .menu ul { background-color: #fff }`
       with two classes, which beat the generic dark-panel rule and left a
       white sheet across the nav. It also forces `.menu li a` to uppercase
       600-weight nowrap, which made the sub-categories read as headings. */
    .main-nav .menu .megamenu,
    .menu .megamenu {
        background-color: #101014;
        background-image: linear-gradient(180deg, #17171d, #0f0f13);
        border: 1px solid var(--v2-line);
        border-top: 2px solid var(--v2-gold);
        border-radius: 0 0 var(--v2-radius) var(--v2-radius);
        box-shadow: 0 26px 50px rgba(0, 0, 0, .6);
        padding: 2rem 2.4rem;
    }

    .menu .megamenu ul,
    .main-nav .megamenu ul {
        background-color: transparent;
        background-image: none;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .menu .megamenu ul li,
    .megamenu ul li {
        border-bottom: 1px solid rgba(255, 255, 255, .05);
    }

    .menu .megamenu ul li:last-child,
    .megamenu ul li:last-child {
        border-bottom: 0;
    }

    .menu .megamenu li a,
    .megamenu ul li a {
        display: block;
        position: relative;
        padding: .8rem 1rem .8rem 1.8rem;
        border-radius: 2px;
        color: var(--v2-text);
        font-size: 1.45rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .01em;
        text-transform: none;
        white-space: normal;
        transition: color var(--v2-ease), background-color var(--v2-ease);
    }

    /* Small gold marker that appears on hover */
    .menu .megamenu li a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: .6rem;
        width: 5px;
        height: 5px;
        margin-top: -2.5px;
        border-radius: 50%;
        background-color: var(--v2-gold);
        opacity: 0;
        transform: scale(.4);
        transition: opacity var(--v2-ease), transform var(--v2-ease);
    }

    .menu .megamenu li a:hover,
    .menu .megamenu li a:focus,
    .megamenu ul li a:hover {
        color: var(--v2-gold);
        background-color: rgba(212, 175, 55, .08);
    }

    .menu .megamenu li a:hover::before {
        opacity: 1;
        transform: scale(1);
    }

    /* The markup nests the links in a col-lg-8, leaving a third of the bar
       empty. Let the columns spread across the whole dropdown instead. */
    .megamenu > .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
        padding: 0;
    }

    .megamenu > .row,
    .megamenu [class*="col-"] > .row {
        margin: 0;
    }

    .megamenu > .row::before,
    .megamenu > .row::after,
    .megamenu [class*="col-"] > .row::before,
    .megamenu [class*="col-"] > .row::after {
        display: none;
    }

    .megamenu [class*="col-"] > .row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0;
    }

    .megamenu [class*="col-"] > .row > div {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        float: none !important;
        padding: 0 1.6rem;
    }

    /* Faint divider between the link columns */
    .megamenu [class*="col-"] > .row > div + div {
        border-left: 1px solid rgba(255, 255, 255, .05);
    }

    .megamenu [class*="col-"] > .row > div:first-child {
        padding-left: 0;
    }

    /* --- 15.7 Info boxes ------------------------------------------------ */
    .info-box {
        padding: 1.8rem 1.5rem;
    }

    .info-box i {
        color: var(--v2-gold);
        font-size: 3rem;
        min-width: 3rem;
        margin-right: 1.5rem;
    }

    .info-box h4,
    .info-box h3 {
        font-size: 1.3rem;
        font-weight: 600;
        letter-spacing: .06em;
        line-height: 1.3;
        margin-bottom: .35rem;
        color: var(--v2-text);
    }

    .info-box p {
        font-size: 1.25rem;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.55;
        color: var(--v2-text-faint);
    }

    /* --- 15.8 Home category widget: tighter sub-items ------------------- */
    .widget-cats ul,
    .widget-cats ul ul {
        font-size: 1.3rem;
        font-weight: 400;
    }

    .widget-cats .widget-title {
        font-size: 1.3rem;
        padding: 1.1rem 1.5rem;
    }

    .widget-cats .catAccordion > li > span {
        padding: .95rem 4.2rem .95rem 1.5rem;
        font-size: 1.3rem;
    }

    .widget-cats .catAccordion > li > .accordion-btn {
        width: 4rem;
        height: 4rem;
    }

    .widget-cats .catAccordion ul {
        padding: .3rem 0 .5rem;
    }

    .widget-cats .catAccordion ul li a {
        padding: .55rem 1.5rem .55rem 2.4rem;
        font-size: 1.2rem;
        line-height: 1.45;
    }

    /* Shop sidebar list on /type/<id> */
    .sidebar-shop {
        font-size: 1.3rem;
    }

    .sidebar-shop .widget-title {
        font-size: 1.25rem;
    }

    .sidebar-shop .cat-list li a {
        padding: .85rem 1.5rem;
        font-size: 1.25rem;
    }

    /* --- 15.9 One product grid for every section ------------------------
       Percentage columns made cards a different size in each section: the
       ListView blocks sit in a 900px col-lg-9 while "Шинээр нэмэгдсэн" spans
       the full 1200px container. Switching to an auto-filling grid with a
       fixed minimum keeps every card the same size and lets the column count
       follow the available width, so no single card is stranded on its own
       row. Grid is desktop-only; phones keep the two-column flex layout. */
    .list-view,
    .row.row-sm.v2-product-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        margin-left: 0;
        margin-right: 0;
    }

    /* A ListView row nests one .list-view between the row and the cards, so
       that wrapper must span the whole grid instead of taking a single cell —
       otherwise the inner grid subdivides one column and the cards collapse
       into narrow strips. */
    /* Bootstrap 3 clears floats with `.row::before` / `.row::after`. Inside a
       grid container those pseudo-elements become real grid cells, which put
       an empty box in the first slot and pushed every card along by one. */
    .row.row-sm.v2-product-grid::before,
    .row.row-sm.v2-product-grid::after,
    .list-view::before,
    .list-view::after {
        display: none;
    }

    .row.row-sm.v2-product-grid > .list-view {
        grid-column: 1 / -1;
    }

    .list-view > .item,
    .justify-content-center > .list-view > .item,
    .row.row-sm.v2-product-grid > [class*="col-"] {
        display: flex;
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        padding: 0;
        margin: 0;
    }

    .list-view > .item > [class*="col-"] {
        padding: 0;
        margin: 0;
    }

    .list-view > .item > [class*="col-"] > .product,
    .row.row-sm.v2-product-grid > [class*="col-"] > .product {
        height: 100%;
    }

    /* The ListView pager must not become a grid cell */
    .list-view > .pagination,
    .list-view > .summary,
    .list-view > .empty {
        grid-column: 1 / -1;
    }

    .product-title {
        font-size: 1.3rem;
        min-height: 3.7rem;
    }

    .product-price {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 1.8rem;
    }

    /* --- 15.10 Footer --------------------------------------------------- */
    .footer h3,
    .footer h4,
    .footer .widget-title {
        font-size: 1.25rem;
    }

    .footer,
    .footer a {
        font-size: 1.25rem;
    }
}