/* ============================
   XL - max-width: 1399.98px
   ============================ */
@media (max-width: 1399.98px) {
  .category-flyout {
    width: 560px;
    gap: 24px;
  }

  .flyout-columns {
    gap: 32px;
  }
}

/* ============================
   LG - max-width: 1199.98px
   ============================ */
@media (max-width: 1199.98px) {
  .header-hotline {
    display: none;
  }

  .category-sidebar {
    width: 250px;
  }

  .category-flyout {
    width: 460px;
  }

  .hero-banner-photo {
    height: 240px;
  }

  .about-intro-title {
    font-size: 34px;
  }

  .about-intro-photo {
    width: 220px;
    height: 260px;
  }

  .branches-title {
    font-size: 28px;
  }

  .page-hero-title {
    font-size: 42px;
  }

  /* Below 992px the heading+text pair already doesn't leave room for the
     form on the same line, so it wraps to its own row for free. From
     992px up, Bootstrap's .container jumps straight to 960px - just wide
     enough for all three to squeeze onto one row, forcing .newsletter-text
     down near its 200px min-width and wrapping the coupon copy at an
     awkward point. (Raising the form's own flex-basis to force a break
     doesn't work - its max-width clamps the hypothetical size the wrap
     calculation uses, before flex-basis ever gets a say.) Raise the
     text's floor instead: high enough that heading + text + form no
     longer fit on one 960px row (forcing the same clean two-row split as
     the tier below), but still under the 1140px .container above this
     tier, where a single row has room to look right again. */
  .newsletter-text {
    min-width: 260px;
  }

  /* mobile: table flattens into cards */
  .cart-table-head {
    display: none;
  }

  /* Order-history table (account.html "My Orders") - scoped to
     ._history so it doesn't clash with the shopping-cart table below,
     which reuses the same .cart-table/.cart-row markup for a
     differently-shaped row (product/price/qty/total/remove instead of
     order#/date/status/total/details). */
  .cart-table._history .cart-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
    "hist-order hist-status"
    "hist-date hist-status"
    "hist-total hist-details";
    align-items: center;
    column-gap: 10px;
    row-gap: 14px;
    margin-bottom: 14px;
    padding: 16px;
    border-bottom: none;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .cart-table._history .cart-row > *:nth-child(1) {
    grid-area: hist-order;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .cart-table._history .cart-row > *:nth-child(2) {
    grid-area: hist-date;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
  }

  .cart-table._history .cart-row > *:nth-child(3) {
    grid-area: hist-status;
    align-self: start;
    justify-self: end;
  }

  .cart-table._history .cart-row > *:nth-child(4) {
    grid-area: hist-total;
    align-self: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
  }

  .cart-table._history .cart-row > *:nth-child(5) {
    grid-area: hist-details;
    align-self: center;
    justify-self: end;
  }

  /* Shopping cart table (cart.html) - flattens into a card per row,
     product spanning the top, price/qty/total sharing the bottom. */
  .cart-table:not(._history) .cart-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "product product product"
    "divider divider divider"
    "price qty total";
    align-items: center;
    column-gap: 10px;
    row-gap: 14px;
    /* Top/left match .cart-remove-inner's -20px offset exactly, so the
       select checkbox has room to sit fully outside the thumbnail without
       poking past the card's own edge - right/bottom stay tighter since
       nothing sits in those corners. */
    padding: 20px 16px 16px 20px;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    border-bottom: none;
  }

  .cart-table:not(._history) .cart-row::before {
    content: "";
    grid-area: divider;
    height: 1px;
    background: var(--color-border);
  }

  .cart-table:not(._history) .cart-row > div {
    display: block;
    flex: none;
    padding: 0;
    border: none;
  }

  .cart-table:not(._history) .cart-row .cart-product {
    grid-area: product;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding-right: 34px;
    min-width: 0;
  }

  .cart-table:not(._history) .cart-row .cart-product-thumb img {
    width: 84px;
    height: 84px;
  }

  .cart-table:not(._history) .cart-row .cart-product-info {
    flex: 1;
    min-width: 0;
  }

  .cart-table:not(._history) .cart-row .cart-price {
    grid-area: price;
    min-width: 0;
  }

  .cart-table:not(._history) .cart-row .cart-qty {
    grid-area: qty;
    display: flex;
    justify-content: center;
    min-width: 0;
  }

  .cart-table:not(._history) .cart-row .cart-total {
    grid-area: total;
    text-align: right;
    min-width: 0;
  }

  .cart-table:not(._history) .cart-row .cart-remove-cell {
    grid-area: unset;
    position: absolute;
    top: 16px;
    right: 16px;
    margin-top: 0;
  }

  /* Cart / checkout: sidebar drops below the product list */
  .cart-page {
    flex-direction: column !important;
    gap: 30px !important;
  }

  .cart-layer,
  .totals-wrapper {
    max-width: 100%;
  }

  .totals-wrapper {
    position: static;
  }
}

/* ============================
   MD-LG - max-width: 1024px
   ============================ */
@media (max-width: 1024px) {
  .header-main-inner {
    gap: 20px;
  }

  .header-search-categories .dropdown-toggle span {
    display: none;
  }
}

/* ============================
   MD - max-width: 991.98px
   ============================ */
@media (max-width: 991.98px) {
  .topbar-message {
    display: none;
  }

  .main-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Black backdrop over the page background while a drawer is open. Runs
     full-width, including underneath the open drawer itself: .main-nav /
     .category-dropdown sit at z-index: 300, well above this overlay's 150,
     and .site-header deliberately carries no z-index of its own (see its
     rule above) so it can't trap them into a lower stacking context - the
     drawer stays visible on top wherever the two overlap. */
  .drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    /* Dark enough that the topbar's icons (shield/document) underneath
       stop being individually legible - at 0.6 they stayed recognizable
       right next to the drawer's own header row, reading as a stray
       glyph/rendering glitch rather than an intentionally dimmed page. */
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Off-canvas drawer: primary nav. Appears from the left edge, sliding
     left-to-right into view. */
  .main-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    z-index: 300;
    width: min(320px, 86vw);
    max-height: none;
    background: var(--color-surface);
    border-top: none;
    box-shadow: var(--shadow-md);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  .main-nav.is-open {
    visibility: visible;
    transform: translateX(0);
  }

  .main-nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav-drawer-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
  }

  .main-nav-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    color: var(--color-text);
  }

  .main-nav-drawer-close:hover {
    background: var(--color-highlight-bg);
    color: var(--color-primary);
  }

  .main-nav > ul {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px;
  }

  .main-nav a {
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav li:last-child > a {
    border-bottom: none;
  }

  .main-nav .flyout-col a {
    border-bottom: none;
  }

  .main-nav li.is-active::after {
    display: none;
  }

  .header-nav-inner {
    position: relative;
  }

  /* Sidebar becomes a toggleable dropdown panel */
  .home-hero-inner {
    flex-direction: column;
  }

  .category-sidebar {
    display: none;
    width: 100%;
  }

  .category-sidebar.is-open {
    display: block;
  }

  .hero-banner {
    width: 100%;
  }

  .shop-filter-toggle {
    display: inline-flex;
  }

  /* Shop sidebar: off-canvas filter drawer instead of stacking below the
     product grid - same left-to-right entrance as the header drawers
     above, opened via the "Filters" button injected into .shop-main.
     Taken out of .shop-layout's normal flow entirely (position: fixed),
     so .shop-main's flex: 1 just claims the row on its own - no need to
     touch .shop-layout's own flex-direction here. */
  .shop-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    width: min(320px, 86vw);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  .shop-sidebar.is-open {
    visibility: visible;
    transform: translateX(0);
  }

  /* The head sits flush against the drawer's own edges (no padding on
     .shop-sidebar itself); the 24px gap the base rule already puts
     between .shop-sidebar's flex children covers the space beneath it,
     and .shop-sidebar-card gets its own left/right inset below. */
  .shop-sidebar-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
  }

  .shop-sidebar-drawer-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
  }

  .shop-sidebar-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    color: var(--color-text);
  }

  .shop-sidebar-drawer-close:hover {
    background: var(--color-highlight-bg);
    color: var(--color-primary);
  }

  .shop-sidebar-card {
    margin: 0 20px;
    padding: 0;
    border: none;
  }

  .shop-sidebar-card:last-child {
    margin-bottom: 20px;
  }

  /* Off-canvas drawer: "Catalog" categories. Same left-to-right entrance as
     the primary nav drawer above. */
  .category-dropdown {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    width: min(320px, 86vw);
    max-height: none;
    border: none;
    border-radius: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  .browse-categories.is-open > .category-dropdown {
    visibility: visible;
    transform: translateX(0);
  }

  .category-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
  }

  .category-dropdown-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
  }

  .category-dropdown-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    color: var(--color-text);
  }

  .category-dropdown-close:hover {
    background: var(--color-highlight-bg);
    color: var(--color-primary);
  }

  .category-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .category-show-more {
    flex-shrink: 0;
  }

  /* Flyout becomes a second panel that slides in from the left, over the
     drawer - same entrance direction as the drawer itself - with a "Back"
     row pinned to its top */
  .category-flyout {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 2;
    width: auto;
    min-height: 0;
    gap: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: var(--color-surface);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  .category-item.has-flyout:hover > .category-flyout {
    visibility: hidden;
    transform: translateX(-100%);
  }

  .category-item.has-flyout.is-open > .category-flyout {
    visibility: visible;
    transform: translateX(0);
  }

  .flyout-columns {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
  }

  /* .flyout-col{flex:1} (base styles.css) is meant to split equal WIDTHS in
     the desktop side-by-side layout; stacked vertically here it would split
     equal HEIGHTS instead, leaving each column's leftover space as a big
     gap below its last link. Size by content instead. */
  .flyout-col {
    flex: none;
  }

  .flyout-col h3 {
    margin-bottom: 8px;
  }

  .flyout-col ul {
    gap: 10px;
  }

  /* Simple nav dropdown becomes a second panel too, sliding in the same way */
  .main-nav li.has-dropdown:hover > .nav-dropdown {
    visibility: hidden;
    transform: translateX(-100%);
  }

  .main-nav li.has-dropdown.is-open > .nav-dropdown {
    visibility: visible;
    transform: translateX(0);
  }

  .nav-dropdown {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2;
    width: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background: var(--color-surface);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  .nav-dropdown a {
    padding: 10px 20px 10px 24px;
  }

  /* Sticky "Back" row pinned to the top of a slid-in sub-panel */
  .nav-dropdown-back,
  .category-flyout-back {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-dropdown-back-btn,
  .category-flyout-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
    flex-shrink: 0;
  }

  .nav-dropdown-back-btn:hover,
  .category-flyout-back-btn:hover {
    color: var(--color-primary);
  }

  .nav-dropdown-back-title,
  .category-flyout-back-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
  }

  .nav-dropdown-back-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-banner-photo {
    height: 200px;
  }

  /* Company intro: stack text above the photo pair */
  .about-intro-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .about-intro-media {
    width: 100%;
  }

  .about-intro-photo {
    flex: 1;
    width: auto;
    height: 280px;
  }

  .deal-banner-content {
    padding: 28px 24px;
  }

  .deal-banner-eyebrow {
    font-size: 20px;
  }

  /* No hover on touch devices, so keep the arrows always visible here -
     but keep them on the image's edges (same spot as desktop's hover
     state) rather than moving them to the bottom-center, which used to
     land them right on top of the pagination dots sitting below the
     image. */
  .hero-swiper-btn {
    opacity: 1;
    pointer-events: auto;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .product-reviews-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-locations-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .branches-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .footer-main-inner {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  /* Three product-card columns plus the 220px label spacer is fine at full
     desktop width, but at tablet width it squeezes each card well below
     what a product-card needs. Drop to the same two-up layout the default
     (two-item) compare grid already uses at every width - the label column
     still lines up with the table below either way. */
  .compare-table-section--triple .compare-products {
    grid-template-columns: 220px repeat(2, 1fr);
  }

  .error-code {
    font-size: 80px;
  }

  .error-page h2 {
    font-size: 24px;
  }

  .wish-list-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Paired deal banners: stack to one column instead of squeezing two
     countdown cards side by side into half-width columns. */
  .deal-overlay-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .deal-overlay-card--featured {
    min-height: 500px;
  }

  .deal-overlay-card--featured .deal-overlay-title {
    font-size: 34px;
  }

  .deal-overlay-card--featured .deal-overlay-cd {
    font-size: 20px;
  }

  /* The countdown no longer breaks mid-unit (see .deal-overlay-cd's own
     white-space: nowrap), so at card widths too narrow to fit both it and
     the CTA on one row, let the whole row wrap instead - the countdown
     keeps its own line and the button drops to one below it. */
  .deal-overlay-foot {
    flex-wrap: wrap;
  }

  /* Every homepage section shares the same 56px top/bottom padding, which
     doubles up at each section boundary (one section's bottom + the next
     one's top, plus .section-more's own 32px margin-top before that) into
     100px+ of empty space on a tablet/phone screen. */
  .features,
  .products,
  .categories,
  .new-arrivals,
  .related-items,
  .discounts {
    padding: 32px 0;
  }
}

/* ============================
   SM - max-width: 767.98px
   ============================ */
@media (max-width: 767.98px) {
  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 8px;
  }

  /* Belt-and-braces: each side is still nowrap internally (see .topbar-link),
     so if a side's own items ever don't fit its wrapped row at some width
     between here and the XS icon-only tier below, let them wrap onto their
     own line individually rather than overflow. */
  .topbar-left,
  .topbar-right {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .topbar-left {
    order: 1;
  }

  .topbar-right {
    order: 2;
    margin-left: auto;
    justify-content: flex-end;
  }

  .header-main-inner {
    flex-wrap: wrap;
  }

  .header-search {
    order: 3;
    max-width: none;
    width: 100%;
  }

  .header-actions {
    margin-left: auto;
  }

  .flyout-columns {
    flex-direction: column;
    gap: 24px;
  }
  

  .hero-banner-photo {
    height: 160px;
  }

  .about-intro-title {
    font-size: 28px;
  }

  .about-intro-photo {
    height: 220px;
  }

  .branches-title {
    font-size: 24px;
  }

  .branches-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .page-hero {
    padding: 64px 0;
  }

  .page-hero-title {
    font-size: 34px;
  }

  .page-hero-actions {
    flex-direction: column;
  }

  .page-hero-btn {
    width: 100%;
  }

  .contact-map {
    height: 300px;
  }

  .contact-locations-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .review-form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-title {
    font-size: 28px;
  }

  /* Pagination dots + swipe gesture cover navigation on mobile */
  .hero-swiper-btn {
    display: none;
  }

  /* Hero banner: shorter than the desktop 80vh (which would eat most of
     a phone's screen) and the text overlay drops its left-to-right fade
     - too narrow a column to fade across on a phone-width image - for a
     flatter, full-width scrim so the text stays legible at any crop. */
  .hero-swiper {
    height: 70vh;
    min-height: 460px;
  }

  .hero-slide-overlay {
    max-width: none;
    padding: 28px 24px;
    background: linear-gradient(180deg, rgba(15, 20, 18, 0.15) 0%, rgba(15, 20, 18, 0.75) 100%);
  }

  .hero-slide-subtitle {
    max-width: none;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Compare table: a product-card needs more room than two (or three) per
     row leaves it once the grid has to wrap, so swipe through them instead
     - one card per view, with the prev/next nav below (JS-driven, see
     initCompareProductsNav) as a non-swipe way to step through them. Drops
     the spacer that otherwise lines the cards up with the table's label
     column - no room for it once it's a single-column strip, and
     .compare-table-wrap already scrolls horizontally on its own. */
  .compare-products,
  .compare-table-section--triple .compare-products {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 24px;
  }

  .compare-products::-webkit-scrollbar {
    display: none;
  }

  /* Two per view at this tier - the gap between them still comes from the
     desktop .compare-products rule's own gap: 24px, so each card gets half
     of what's left over once that gap is accounted for. Narrowed to one per
     view at the XS tier below. */
  .compare-products .product-card {
    flex: 0 0 calc(50% - 12px);
    scroll-snap-align: start;
  }

  /* :not([hidden]) so this doesn't fight the [hidden] attribute
     initCompareProductsNav sets when a section only has one card. */
  .compare-products-nav:not([hidden]) {
    display: flex;
  }

  .compare-products-spacer {
    display: none;
  }

  .compare-table th,
  .compare-table td,
  .compare-table-section--triple .compare-table td {
    min-width: 200px;
  }

  .newsletter-inner {
    flex-direction: column;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .newsletter-text {
    text-align: center;
  }

  .newsletter-form {
    max-width: none;
  }

  .footer-main-inner {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  /* mobile: sidebar becomes an off-canvas drawer under 768px */
  .content-heading {
    row-gap: 16px;
  }

  .acc-filter-row {
    width: 100%;
    justify-content: space-between;
  }

  .account-menu-trigger {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background 0.2s ease;
  }

  .account-menu-trigger:hover {
    background: #f2f2f2;
  }

  aside.account-menu {
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 1001;
    width: 80%;
    max-width: 300px;
    height: 100%;
    margin-top: 0 !important;
    padding: 30px 20px;
    background: var(--color-surface);
    overflow-y: auto;
    transition: left 0.3s ease;
  }

  aside.account-menu._active {
    left: 0;
  }

  .account-menu-close {
    display: block;
    flex-shrink: 0;
    font-size: var(--font-size-lg);
    cursor: pointer;
  }

  .account-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
  }

  .account-links {
    gap: 2px !important;
  }

  .account-nav ul a {
    padding: 8px 15px;
  }

  .auth-form .form-text p {
    max-width: 100%;
  }

  /* Cart / checkout: tighter row and image sizing */
  .checkout-steps.small::before,
  .checkout-steps.small::after {
    left: 12px;
    right: 12px;
  }

  .checkout-steps.small .step-index {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-xs);
  }

  .checkout-steps.small .step-label {
    font-size: 11px;
  }

  .cart-info {
    align-items: start !important;
    flex-direction: column !important;
    gap: 20px;
  }

  .cart-table:not(._history) .cart-row {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 20px 14px 14px 20px;
  }

  .cart-table:not(._history) .cart-row .cart-product {
    gap: 10px;
  }

  .cart-table:not(._history) .cart-row .cart-product-thumb img {
    width: 64px;
    height: 64px;
  }

  .cart-product-info strong a {
    font-size: var(--font-size-sm);
  }

  .cart-code,
  .stock {
    font-size: var(--font-size-xs);
  }

  .cart-price .price-new {
    font-size: var(--font-size-base);
  }

  .cart-total {
    font-size: var(--font-size-lg);
  }

  .qty-control button {
    width: 30px;
    height: 30px;
  }

  .qty-control input {
    width: 38px;
    font-size: var(--font-size-sm);
  }

  /* Receipt: two-column info grid and side-by-side actions both stack */
  .receipt-info-grid,
  .receipt-actions {
    flex-direction: column;
  }

  /* Promo concept modals: image-beside-copy layouts stack on mobile */
  .promo-season-modal .modal-content {
    flex-direction: column;
  }

  .promo-season-media {
    width: 100%;
    min-width: 0;
    height: 160px;
  }

  .promo-arrival-modal .modal-content {
    flex-direction: column;
  }

  .promo-arrival-media {
    width: 100%;
  }

  .deal-overlay-card--featured .deal-overlay-scrim{
    padding: 30px 20px;
  }

  .deal-overlay-card--featured .deal-overlay-badge {
    margin: 20px 20px 0;
  }
}

/* ============================
   XS - max-width: 575.98px
   ============================ */
@media (max-width: 575.98px) {
  /* Icon-only from here down: drop "Our location", and the text label on
     every topbar-right control - including the language toggle's "English"
     (a <button>, not an <a>, hence the separate .topbar-right span rather
     than folding it into the .topbar-right a span selector above it used to
     be), so all three read the same way instead of two icons sitting next
     to one full-text control. */
  .topbar-left a:last-child,
  .topbar-right span {
    display: none;
  }

  .hero-swiper {
    height: 65vh;
    min-height: 420px;
  }

  .hero-slide-overlay {
    padding: 20px 16px;
    gap: 8px;
  }

  .hero-slide-eyebrow {
    padding: 5px 12px;
    font-size: 11px;
  }

  .hero-slide-cta {
    padding: 11px 22px;
  }

  /* Every product-card swiper (New Arrivals, Best Selling, Reduceri) shows
     2 cards per view down to the narrowest phones - .arrival-card-body's
     16px padding was sized for a wider single-card view and crowded out
     the title/price/buttons at half that width. wish-list.html/history.html's
     plain (non-swiper) product grids now also show 2 cards per row at this
     size (see .wish-list-wrapper below), so they need the same treatment. */
  .new-arrivals-swiper .arrival-card-body,
  .related-items-swiper .arrival-card-body,
  .discounts-swiper .arrival-card-body,
  .wish-list-wrapper .arrival-card-body {
    padding: 10px;
  }

  /* Price was sized for a full-width desktop card - at 2-per-view phone
     width it was crowding the title/rating below it out of the card. */
  .arrival-card-price-current,
  .product-card-price-current {
    font-size: 18px;
  }

  .arrival-card-price-old,
  .product-card-price-old {
    font-size: 12px;
  }

  /* "Add to Cart" collapses to just the bag icon at this width, matching
     the compare/wishlist buttons next to it, which are already icon-only -
     the full label was crowding those two off the row or forcing it onto
     two lines. No markup change: the button's own font-size drops to 0
     (hiding the text node without touching it) and the ::before icon sets
     its own font-size back up, reusing the header cart icon's bi-bag
     glyph for consistency. */
  /* All three actions grow to share the row equally instead of sitting at
     a fixed 38px with leftover gap space, so the row fills the card's
     full width edge to edge. */
  .arrival-card-cart-btn,
  .product-card-cart,
  .arrival-card-action,
  .product-card-action {
    flex: 1 1 0;
    width: auto;
    height: 38px;
    padding: 0;
  }

  .arrival-card-cart-btn,
  .product-card-cart {
    gap: 0;
    font-size: 0;
  }

  .arrival-card-cart-btn::before,
  .product-card-cart::before {
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 16px;
    line-height: 1;
    content: "\f179";
  }

  /* Mint cards (arrival-card and product-card variants alike) keep their
     own full-width Adaugă în coș row + labeled Compară/Favorite pills down
     to tablet width, but at 2-per-view phone width there isn't room for
     both labels side by side - they wrapped onto their own full-width rows
     instead. Drop to icon-only (matching every other card's compare/
     wishlist buttons at this size) and tighten the card's own padding to
     match its siblings. */
  .arrival-card--mint,
  .product-card--mint {
    padding: 10px;
  }

  .arrival-card--mint .arrival-card-price-current,
  .product-card--mint .product-card-price-current {
    font-size: 18px;
  }

  .arrival-card--mint .arrival-card-price-old,
  .product-card--mint .product-card-price-old {
    font-size: 12px;
  }

  .arrival-card--mint .arrival-card-action-label,
  .product-card--mint .product-card-action-label {
    display: none;
  }

  .arrival-card--mint .arrival-card-cart-btn,
  .product-card--mint .product-card-cart {
    height: 42px;
    gap: 5px;
    font-size: 11px;
  }

  .arrival-card--mint .arrival-card-action,
  .product-card--mint .product-card-action {
    height: 38px;
  }

  .hero-banner {
    min-height: 280px;
    padding: 24px;
  }

  .hero-banner-title {
    font-size: 22px;
  }

  .page-hero-title {
    font-size: 28px;
  }

  .about-intro-media {
    flex-direction: column;
  }

  .about-intro-photo {
    width: 100%;
    height: 240px;
  }

  .about-intro-photo--offset {
    margin-top: 0;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  /* The slider itself kicks in from the SM tier down at two cards per view
     (see there) - narrow that to one per view at phone width, where two
     would leave each card too cramped. */
  .compare-products .product-card {
    flex-basis: 100%;
  }

  /* This tier also stacks the two compare actions instead of squeezing them
     side by side. */
  .compare-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .product-info-title {
    font-size: 22px;
  }

  .product-gallery-thumb {
    width: 52px;
    height: 52px;
  }

  .product-tabs {
    gap: 20px;
  }

  .product-tabs-spec-list li {
    flex-direction: column;
    gap: 2px;
  }

  .product-tabs-spec-list li span:first-child {
    flex-basis: auto;
  }

  .qa-item {
    flex-direction: column;
  }

  .qa-author {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .product-icon-btn {
    width: 44px;
    height: 44px;
  }

  /* Qty + wishlist share a row (space-between); Add to cart wraps below, full width */
  .product-info-actions {
    justify-content: space-between;
  }

  .product-qty {
    order: 1;
  }

  .product-icon-btn.wishlist-toggle {
    order: 2;
  }

  .product-add-to-cart {
    order: 3;
    flex-basis: 100%;
  }

  .products-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .shop-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }

  .shop-grid .product-card-body {
    padding: 10px;
  }

  .shop-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .shop-toolbar-controls {
    width: 100%;
    /* Side by side, each dropdown only gets ~50% of the row's width, which
       forced "Sortează după: Recomandate" to wrap onto two lines. Stack
       them into their own full-width rows instead, so each toggle's text
       fits on one line without needing to shrink or wrap. */
    flex-wrap: wrap;
  }

  .shop-toolbar-dropdown {
    flex: 1 1 100%;
    min-width: 0;
  }

  .shop-toolbar-dropdown .dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    white-space: nowrap;
  }

  .pagination-list {
    gap: 4px;
  }

  .pagination-link,
  .pagination-ellipsis {
    min-width: 34px;
    height: 34px;
  }

  /* Mobile: static 2-column grid instead of a swipeable carousel */
  .features-swiper-pagination {
    display: none;
  }

  .features-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    transform: none !important;
  }

  .features-swiper .swiper-slide.feature-card {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px 12px 18px;
  }

  .feature-card-media {
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    font-size: 30px;
  }

  .feature-card-label {
    white-space: normal;
  }

  /* Mobile: tabs stay on one (scrollable) line, View More drops below the grid */
  .products .container {
    display: flex;
    flex-direction: column;
  }

  .products-head {
    display: contents;
  }

  .products-tabs {
    order: 1;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 24px;
    scrollbar-width: none;
  }

  .products-tabs::-webkit-scrollbar {
    display: none;
  }

  .products-tabs .nav-link {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: var(--font-size-sm);
  }

  #productsTabContent {
    order: 2;
  }

  .products-view-more {
    order: 3;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    padding: 12px 28px;
    border-radius: var(--radius);
    background: var(--color-topbar-bg);
  }

  .cig-select {
    width: 100%;
  }

  .wish-list-wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
}