/**
 * Layout1 — "New Layout bold modern" — Responsive CSS
 * MEGA-BOLD-RESPONSIVE-BUILD: 20260522-v1
 *
 * Breakpoints:
 *   <=479.98px  — tiny phones (iPhone SE, Galaxy A-series small)
 *   <=575.98px  — phones
 *   576-767.98px — small tablets (landscape phones)
 *   <=767.98px  — all phones + small tablets
 *   <=991.98px  — tablets (portrait iPad, Android 10")
 *   992-1199.98px — small desktop / large tablet landscape
 *   >=992px     — desktop
 *
 * This file covers ONLY what style.css, storefront-modern-bem.css,
 * and layout-bem.css do not already handle:
 *   - storefront-modern-bem handles: header fixed positioning (mobile+desktop),
 *     inner-page padding offsets via --sf-bold-header-offset
 *   - layout-bem handles: main padding-top, hero negative-margin, section spacing
 *   - style.css handles: nav, about, banner, footer padding, heading sizes
 *
 * Scope:
 *   hero heights/typography, product grids, benefit/blog/home sections,
 *   footer columns, product detail (PDP), cart/checkout, user dashboard,
 *   events, booking, blog listing, classification, authentication pages,
 *   search overlay, typography scale, touch targets
 *
 * Naming: strict BEM — storefront-bold__*, mega-commerce__*, user-panel__*
 * No CDN, no third-party.
 */

/* ============================================================
   GLOBAL: prevent horizontal scroll on all breakpoints
   ============================================================ */
html, body {
  overflow-x: hidden;
}

/* Better default wrapping for long strings (URLs, product names) */
body.storefront-bold {
  overflow-wrap: anywhere;
}

/* Prevent flex children from forcing overflow (iOS Safari common bug) */
body.storefront-bold * {
  min-width: 0;
}

/* ============================================================
   HEADER — mobile toolbar and layout fixes
   ============================================================ */

/*
 * Toolbar button sizes on phones.
 * The CSS guard (inline <style> at bottom of page) sets
 *   width:var(--sf-theme-toolbar-btn-size,44px)  WITHOUT !important
 * so our !important rules here always win, regardless of source order.
 * 44px × 4 buttons = 176px; on a 375-390px phone the aside column
 * has ~200-250px available — fine normally, but reduce slightly to give
 * breathing room and match the 36px logo row height on mobile.
 */
@media (max-width: 575.98px) {
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-btn:not(.storefront-bold__menu-toggle),
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__strip-icon,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__search-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  /* Hamburger: CSS guard sizes it separately; keep in sync (legacy row only — v45) */
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__menu-toggle.menu_btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  /* Tighten toolbar gap so 4 buttons don't push the row (legacy row only — v45) */
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__header-toolbar.setrightmobileviewmenu,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__header-toolbar-shell > .storefront-bold__header-toolbar {
    gap: 4px;
  }

  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .saf_search_wrap.menu_btn_wrap.managemobilemenun,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__header-toolbar-shell {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/*
 * ≤480px (iPhone 7/8/X width): logo + phone + email + search + hamburger must fit in one row.
 * Without this, col-7 logo (~46vw) + 4×44px buttons overflow and clip the hamburger at the edge.
 */
@media (max-width: 480px) {
  /* Legacy Bootstrap col-7/col-5 row only — skipped when .sf-mheader BEM bar is present (v20) */
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) > .container-fluid,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .saf_header_wrapper,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .saf_header_wrapper > .storefront-bold__header-row.row {
    max-width: 100%;
    overflow-x: visible !important;
    box-sizing: border-box;
  }

  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .col-7.storefront-bold__header-brand,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .mobilesetlogo.col-7,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .storefront-bold__header-brand,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .mobilesetlogo {
    flex: 0 1 auto !important;
    max-width: min(34vw, 8.75rem) !important;
  }

  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .col-5.storefront-bold__header-col,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .mobilesetlogosp.col-5,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .storefront-bold__header-col,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .mobilesetlogosp {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 0.2rem !important;
    padding-right: 0 !important;
  }

  body.storefront-bold.theme-layout1 {
    --sf-theme-toolbar-btn-size: 36px;
  }

  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-btn,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__strip-icon,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__search-btn,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__menu-toggle.menu_btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__header-toolbar,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__header-toolbar-shell > .storefront-bold__header-toolbar,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .setrightmobileviewmenu {
    gap: 3px !important;
    max-width: 100%;
    flex-wrap: nowrap !important;
  }

  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .setrightmobileviewmenu > .storefront-bold__toolbar-menu,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-menu {
    flex: 0 0 auto !important;
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 99 !important;
    position: relative !important;
    z-index: 8 !important;
  }

  /*
   * storefront-modern-bem.css forces search visible at ≤991px with a more specific selector;
   * must match it here or hamburger is pushed off-screen (phone + email + search only).
   */
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .setrightmobileviewmenu > .storefront-bold__toolbar-search,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-search {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
  }
}

/* Very small phones (≤ 360px) — hide email contact icon (legacy header only) */
@media (max-width: 360px) {
  body.storefront-bold:not(:has(.l1-mbar)) .storefront-bold__header .storefront-bold__toolbar-strip-item--email {
    display: none !important;
  }
}

/* =============================================================================
   Layout1 v57 — l1-header toolbar + contact (.l1-contact / .l1-tool only)
   ============================================================================= */
@media (max-width: 991.98px) {
  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-mbar__contact {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.3rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-mbar__contact > .l1-contact {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 575.98px) {
  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header {
    --l1-contact-btn-size: 40px;
  }
}

@media (max-width: 479.98px) {
  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-mbar__brand {
    max-width: 32% !important;
  }
}

@media (max-width: 360px) {
  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-mbar__contact > .l1-contact--email {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-mbar__tools > .l1-tool {
    flex: 0 0 auto !important;
  }

  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-mbar__tools > .l1-tool--menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-nav__item--cart.desktopcart {
    display: none !important;
  }
}

/*
 * Home page: hero sits flush under the fixed header — handled by layout-bem.css
 * (padding-top:0 on main + negative margin-top on .mega-commerce--home).
 * Inner pages already get padding-top via --sf-bold-header-offset-mobile in
 * storefront-modern-bem.css (.storefront-bold--inner-page).
 * No additional override needed here.
 */

/* Desktop contact strip layout: ensure it never wraps on a two-row header */
@media (min-width: 992px) {
  body.storefront-bold .storefront-bold__header .storefront-bold__header-strip--desktop {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.1rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    box-sizing: border-box;
  }

  body.storefront-bold .storefront-bold__header .storefront-bold__header-strip--desktop > ul.display_flex {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* ============================================================
   SECTION TITLE — typography scale
   ============================================================ */
@media (max-width: 991.98px) {
  .section-title h2 {
    font-size: 1.5rem;
  }
}
@media (max-width: 767.98px) {
  .section-title h2 {
    font-size: 1.35rem;
  }
  .section-title {
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 575.98px) {
  .section-title h2 {
    font-size: 1.2rem;
  }
}

/* ============================================================
   HERO SLIDER — heights and typography
   ============================================================ */

/* Desktop: generous hero */
@media (min-width: 992px) {
  .hero__slide,
  .saf_hero_wrapper .hero__slide,
  .hero__slider .swiper-slide {
    min-height: 540px;
  }
}

/* Tablet: medium hero */
@media (min-width: 576px) and (max-width: 991.98px) {
  .hero__slide,
  .saf_hero_wrapper .hero__slide,
  .hero__slider .swiper-slide {
    min-height: 380px;
  }
  .hero__slider,
  .saf_hero_slider {
    min-height: 380px;
  }
}

/* Phone: compact hero, full-width cover */
@media (max-width: 575.98px) {
  .hero__slide,
  .saf_hero_wrapper .hero__slide,
  .hero__slider .swiper-slide {
    min-height: 260px;
    align-items: flex-end;
    padding-bottom: 2rem;
  }
  .hero__slider,
  .saf_hero_slider {
    min-height: 260px;
  }
}

/* Hero slide text — scale down on small screens */
@media (max-width: 991.98px) {
  .hero__slide .hero__caption,
  .hero__slide .saf_hero_caption,
  .saf_hero_slide .hero__caption {
    padding: 1.5rem 1.25rem;
  }
  .hero__slide h1,
  .saf_hero_slide h1 {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    margin-bottom: 0.75rem;
  }
  .hero__slide h2,
  .saf_hero_slide h2 {
    font-size: clamp(1.1rem, 4vw, 1.75rem);
  }
  .hero__slide p,
  .saf_hero_slide p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}
@media (max-width: 575.98px) {
  .hero__slide h1,
  .saf_hero_slide h1 {
    font-size: clamp(1.15rem, 6vw, 1.6rem);
  }
  .hero__slide .saf_btn,
  .saf_hero_slide .saf_btn {
    font-size: 0.8rem;
    padding: 6px 16px;
    min-width: 110px;
    margin: 0 6px;
  }
}

/* Swiper nav arrows: hide on tiny phones */
@media (max-width: 479.98px) {
  .hero__slider .swiper-button-next,
  .hero__slider .swiper-button-prev,
  .saf_hero_slider .swiper-button-next,
  .saf_hero_slider .swiper-button-prev {
    display: none !important;
  }
}

/* ============================================================
   HERO — old banner slider (saf_banner_section)
   ============================================================ */
@media (max-width: 991.98px) {
  .saf_banner_section {
    min-height: 320px;
  }
  .saf_banner_text h1 {
    font-size: 2rem;
  }
}
@media (max-width: 575.98px) {
  .saf_banner_section {
    min-height: 240px;
    text-align: center;
  }
  .saf_banner_text {
    padding: 0 0 1rem;
  }
  .saf_banner_text h1 {
    font-size: 1.4rem;
  }
}

/* ============================================================
   BREADCRUMB — page header banner
   ============================================================ */
@media (max-width: 991.98px) {
  .breacrumb-section {
    padding: 2.5rem 0;
    min-height: auto;
  }
  .breacrumb-section h3 {
    font-size: 1.4rem;
  }
}
@media (max-width: 575.98px) {
  .breacrumb-section {
    padding: 1.5rem 0;
  }
  .breacrumb-section h3 {
    font-size: 1.2rem;
  }
  .breadcrumb-text {
    font-size: 0.8rem;
  }
}

/* ============================================================
   PRODUCT GRID — listing page
   ============================================================ */

/* 3-up on smaller desktops */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .product-shop .col-lg-3 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

/* 2-up on tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
  .product-shop .col-lg-3,
  .product-shop .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 1-up on phones */
@media (max-width: 575.98px) {
  .product-shop .col-lg-3,
  .product-shop .col-md-4,
  .product-shop .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .product-item .pi-pic ul {
    bottom: 0;
    opacity: 1;
  }
}

/* ============================================================
   PRODUCT GRID — home sections (category & product strips)
   ============================================================ */
@media (max-width: 991.98px) {
  .saf_products_wrapper .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .saf_category_wrapper .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .saf_class_data_wrapper .col-lg-3,
  .saf_class_data_5_wrapper .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 575.98px) {
  .saf_products_wrapper .col-lg-3,
  .saf_products_wrapper .col-md-4,
  .saf_products_wrapper .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .saf_category_wrapper .col-lg-3,
  .saf_category_wrapper .col-md-4,
  .saf_category_wrapper .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 359.98px) {
  .saf_products_wrapper .col-lg-3,
  .saf_products_wrapper .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Product card image heights on small screens */
@media (max-width: 575.98px) {
  .product-item.home-class-card--tall .pi-pic img {
    height: 200px;
  }
  .product-item.home-class-card .pi-pic img {
    height: 160px;
  }
  .product-item .pi-text h5 {
    font-size: 0.85rem;
  }
  .product-item .pi-text .product-price {
    font-size: 0.95rem;
  }
}

/* ============================================================
   PRODUCT SWIPER — padding on small screens
   ============================================================ */
@media (max-width: 767.98px) {
  .saf_products_wrapper .product-swiper,
  .saf_category_wrapper .product-swiper,
  .saf_class_data_wrapper .product-swiper,
  .saf_class_data_5_wrapper .product-swiper {
    padding: 0 28px;
  }
}
@media (max-width: 479.98px) {
  .saf_products_wrapper .product-swiper,
  .saf_category_wrapper .product-swiper,
  .saf_class_data_wrapper .product-swiper,
  .saf_class_data_5_wrapper .product-swiper {
    padding: 0 10px;
  }
  .saf_products_wrapper .product-swiper .swiper-button-next,
  .saf_products_wrapper .product-swiper .swiper-button-prev,
  .saf_category_wrapper .product-swiper .swiper-button-next,
  .saf_category_wrapper .product-swiper .swiper-button-prev {
    display: none !important;
  }
}

/* ============================================================
   BENEFIT SECTION
   ============================================================ */
@media (max-width: 991.98px) {
  .benefit-items .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 575.98px) {
  .benefit-items .col-lg-3,
  .benefit-items .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .single-benefit {
    padding: 14px 12px;
    gap: 12px;
  }
  .single-benefit .sb-icon img {
    width: 36px;
    height: 36px;
  }
  .benefit-main {
    padding: 1.5rem 0;
  }
}

/* ============================================================
   BLOG SECTION — latest-blog cards
   ============================================================ */
@media (max-width: 991.98px) {
  .latest-blog .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 767.98px) {
  .latest-blog .col-lg-4,
  .latest-blog .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .single-latest-blog img {
    height: 180px;
  }
}
@media (max-width: 575.98px) {
  .single-latest-blog img {
    height: 160px;
  }
  .single-latest-blog .latest-text h4 {
    font-size: 0.9rem;
  }
}

/* ============================================================
   FOOTER — column stacking
   ============================================================ */
@media (max-width: 991.98px) {
  .saf_footer_wrapper .col-lg-4,
  .saf_footer_wrapper .col-lg-3,
  .saf_footer_wrapper .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 2rem;
  }
  .saf_widgets {
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 767.98px) {
  .saf_footer_wrapper .col-lg-4,
  .saf_footer_wrapper .col-lg-3,
  .saf_footer_wrapper .col-md-6,
  .saf_footer_wrapper .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.75rem;
  }
  .saf_footer_about--centered {
    text-align: center;
  }
  .saf_footer_about--centered .saf_newsLetter_wrap {
    justify-content: center;
  }
  img.footer_logo {
    max-height: 48px;
  }
}
@media (max-width: 575.98px) {
  .saf_footer_wrapper {
    padding: 2.5rem 0 2rem;
  }
  .saf_footer_heading {
    font-size: 1rem;
  }
  .saf_footer_menu ul li a,
  .saf_footer_address ul li {
    font-size: 0.875rem;
  }
  .storefront-bold__footer-copy {
    text-align: center;
    padding: 0.75rem 0;
  }
  .storefront-bold__footer-copy .row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .storefront-bold__footer-copy .col-lg-6,
  .storefront-bold__footer-copy .col-md-6 {
    text-align: center;
  }
}

/* ============================================================
   PRODUCT DETAIL (PDP)
   ============================================================ */
@media (max-width: 991.98px) {
  .page-details .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .page-details .product-pic-zoom {
    margin-bottom: 1.5rem;
  }
  .product-pic-zoom img.product-big-img {
    max-height: 360px;
  }
}
@media (max-width: 767.98px) {
  .product-pic-zoom img.product-big-img {
    max-height: 300px;
  }
  .product-thumbs-track .pt {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }
  .page-details h3,
  .page-details .product-detail__title {
    font-size: 1.25rem;
  }
  .page-details .product-price {
    font-size: 1.1rem;
  }
}

/* PDP: keep title readable but compact on all devices */
body.storefront-bold .page-details h3,
body.storefront-bold .page-details .product-detail__title {
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* PDP: thumb rail should scroll, not squeeze */
@media (max-width: 767.98px) {
  body.storefront-bold .product-thumbs-track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
  }
  body.storefront-bold .product-thumbs-track::-webkit-scrollbar {
    height: 6px;
  }
  body.storefront-bold .product-thumbs-track::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
  }
}
@media (max-width: 575.98px) {
  .product-pic-zoom img.product-big-img {
    max-height: 260px;
  }
  .page-details h3,
  .page-details .product-detail__title {
    font-size: 1.1rem;
  }
  .related-products .col-lg-3,
  .related-products .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .related-products {
    padding: 2rem 0;
  }
}
@media (max-width: 479.98px) {
  .product-thumbs-track .pt {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }
}

/* ============================================================
   PRODUCTS LISTING — sidebar filter
   ============================================================ */
@media (max-width: 767.98px) {
  .produts-sidebar-filter {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
  .product-shop .col-lg-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Listing cards: clamp title to avoid uneven heights */
body.storefront-bold .product-item .pi-text h5 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  body.storefront-bold .product-item {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
  }
  body.storefront-bold .product-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  }
}

/* ============================================================
   CART PAGE
   ============================================================ */
@media (max-width: 767.98px) {
  .shopping-cart-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cart-content-right {
    margin-top: 1.5rem;
  }
  .cart-content-right .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .cart-continue-btn,
  .cart-update-btn {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
}

/* Cart: long product names should wrap */
body.storefront-bold .shopping-cart-table td,
body.storefront-bold .shopping-cart-table th {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 575.98px) {
  .shoping-cart-item {
    flex-wrap: wrap;
  }
  .minicart-line-top {
    border-top-width: 3px;
  }
}

/* ============================================================
   CHECKOUT — multi-step form
   ============================================================ */
@media (max-width: 991.98px) {
  .checkout-section .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .checkout-section .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 1.5rem;
  }
}

/* Checkout: keep buttons full width on phones */
@media (max-width: 575.98px) {
  body.storefront-bold .checkout-section .site-btn,
  body.storefront-bold .checkout-section .place-btn,
  body.storefront-bold .checkout-section .primary-btn {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 575.98px) {
  .checkout-section.spad {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .checkout-same-as-label {
    font-size: 0.875rem;
  }
  .checkout-term-label {
    font-size: 0.875rem;
  }
}

/* ============================================================
   USER DASHBOARD / ACCOUNT
   ============================================================ */
@media (max-width: 767.98px) {
  .storefront__main.sunilclasscont {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
}

@media (max-width: 767.98px) {
  .user-panel--profile .col-md-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .user-panel--profile .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 575.98px) {
  .user-panel__heading {
    font-size: 1.1rem;
  }
  .user-auth__label {
    font-size: 0.85rem;
  }
  .user-auth__input,
  .form-control.user-auth__input {
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
  }
  .user-panel__submit {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  .user-orders-table,
  .orders-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   AUTHENTICATION — login / register / forgot password
   ============================================================ */
@media (max-width: 991.98px) {
  .mega-commerce--auth .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .mega-commerce--auth .register-form,
  .mega-commerce--auth .login-form {
    padding: 1.75rem 1.25rem;
  }
}
@media (max-width: 575.98px) {
  .mega-commerce--auth h3 {
    font-size: 1.3rem;
  }
  .mega-commerce--auth .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .mega-commerce--auth .row {
    justify-content: center;
  }
}

/* ============================================================
   EVENTS & BOOKING
   ============================================================ */
@media (max-width: 991.98px) {
  .mega-commerce--events .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .event-detail .col-lg-8,
  .event-detail .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  .mega-commerce--events .col-lg-4,
  .mega-commerce--events .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .saf_events_wrapper .col-lg-4,
  .saf_events_wrapper .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .bookdata-form .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 575.98px) {
  .event-time-picker,
  .bookdata-time-select {
    flex-direction: column;
  }
  .event-time-picker > *,
  .bookdata-time-select > * {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ============================================================
   BLOG LISTING & DETAIL
   ============================================================ */
@media (max-width: 991.98px) {
  .blog-detail .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
    order: 1;
  }
  .blog-detail .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
    order: 2;
    margin-top: 2rem;
  }
  .blog-listing .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 767.98px) {
  .blog-listing .col-lg-4,
  .blog-listing .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .blog-detail img {
    max-width: 100%;
    height: auto;
  }
}

/* ============================================================
   CLASSIFICATION / CATEGORY DETAIL
   ============================================================ */
@media (max-width: 991.98px) {
  .classification-page .col-lg-3,
  .classification-page .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
  .classification-page .col-lg-9,
  .classification-page .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .nav-side-menu {
    border-radius: 8px;
    margin-bottom: 1.5rem;
  }
}

/* ============================================================
   CONTACT / CMS PAGES
   ============================================================ */
@media (max-width: 991.98px) {
  .contact-section .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
  .saf_contact_map iframe {
    height: 280px;
  }
}
@media (max-width: 575.98px) {
  .saf_contact_map iframe {
    height: 220px;
  }
}

@media (max-width: 767.98px) {
  .mega-commerce--cms img,
  .mega-commerce--page img {
    max-width: 100%;
    height: auto;
  }
  .saf_about_wrapper .col-lg-6 {
    margin-bottom: 1.5rem;
  }
}

/* ============================================================
   IMAGE BOX / PHOTOGALLERY
   ============================================================ */
@media (max-width: 991.98px) {
  .imagebox-grid .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 575.98px) {
  .imagebox-grid .col-lg-3,
  .imagebox-grid .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ============================================================
   SEARCH OVERLAY (storefront-bold)
   ============================================================ */
@media (max-width: 767.98px) {
  .storefront-bold__search-panel {
    width: 95vw;
    max-width: 480px;
    padding: 1.25rem 1rem;
    border-radius: 12px;
  }
  .storefront-bold__search-panel__head {
    margin-bottom: 0.75rem;
  }
  .storefront-bold__search-panel__title {
    font-size: 1rem;
  }
  .storefront-bold__search-input {
    font-size: 1rem;
    padding: 0.7rem 0.9rem;
  }
}
@media (max-width: 479.98px) {
  .storefront-bold__search-panel {
    width: 100vw;
    max-width: 100%;
    border-radius: 0 0 12px 12px;
    top: 0 !important;
  }
}

/* ============================================================
   MOBILE NAVIGATION DRAWER
   ============================================================ */
@media (max-width: 991.98px) {
  body.storefront-bold .main_menu_wrapper.open,
  body.storefront-bold .main_menu_wrapper.storefront-bold__nav-portal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100dvh;
  }

  body.storefront-bold .main_menu_wrapper ul li a,
  body.storefront-bold .saf_nav_items ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .menu_btn,
  .storefront-bold__menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   HEADER ICONS — cart / search / wishlist tap targets
   ============================================================ */
@media (max-width: 991.98px) {
  .minicart,
  .storefront-bold__cart-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Legacy toolbar only — .sf-mheader uses layout1-header-toolbar-bem.css sizes */
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .searchBtn,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__search-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   HEADER — desktop contact strip on mobile
   ============================================================ */
@media (max-width: 575.98px) {
  .storefront-bold__header-strip--empty-mobile {
    display: none !important;
  }
}

/* ============================================================
   HEADER LOGO — responsive sizing
   ============================================================ */
@media (max-width: 991.98px) {
  .header-logo-img--layout1,
  .storefront__header .header-logo-img--layout1 {
    max-height: 42px;
  }
}
@media (max-width: 575.98px) {
  .header-logo-img--layout1,
  .storefront__header .header-logo-img--layout1 {
    max-height: 34px;
  }
  .saf_logo {
    padding: 8px 0;
  }
}

/* ============================================================
   FAQs PAGE
   ============================================================ */
@media (max-width: 767.98px) {
  .faq-section .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .faq-section .accordion-header button {
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
  }
}

/* ============================================================
   MUSIC / SONGS
   ============================================================ */
@media (max-width: 767.98px) {
  .songs-listing .col-lg-4,
  .songs-listing .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .song-detail .col-lg-8,
  .song-detail .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
@media (max-width: 991.98px) {
  .services-section .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 575.98px) {
  .services-section .col-lg-4,
  .services-section .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ============================================================
   SECTION PADDING — reduce spad on mobile
   ============================================================ */
@media (max-width: 767.98px) {
  .spad {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .saf_about_wrapper,
  .layout-page__main .saf_about_wrapper {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
@media (max-width: 575.98px) {
  .spad {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ============================================================
   ABOUT / COUNTER SECTIONS
   ============================================================ */
@media (max-width: 767.98px) {
  .saf_about_wrapper .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .saf_about_img {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .saf_about_img img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .saf_counter_wrapper .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 1.5rem;
  }
  .saf_counter_item {
    text-align: center;
  }
}
@media (max-width: 479.98px) {
  .saf_counter_wrapper .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
@media (max-width: 767.98px) {
  .saf_testimonials_section {
    padding: 2rem 0;
  }
  .saf_client_quote {
    padding: 1.25rem;
  }
  .gallery-thumbs {
    height: 60px;
  }
  .gallery-thumbs .swiper-slide img {
    height: 52px;
    width: 52px;
    object-fit: cover;
    border-radius: 50%;
  }
}

/* ============================================================
   MODULE ROWS — home top/bottom CMS slots
   ============================================================ */
@media (max-width: 767.98px) {
  .layout-page__module-row .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  .storefront-bold__module .module_body_2,
  .storefront-bold__module .module_body_3 {
    margin-bottom: 1rem;
  }
}

/* ============================================================
   SORT / FILTER TOOLBAR — product listing top bar
   ============================================================ */
@media (max-width: 767.98px) {
  .shopify-sortby-label {
    margin-left: 0;
    text-align: left;
    width: 100%;
    float: none;
  }
  .shopify-sortby-select {
    width: 100%;
  }
  .shopify-filter-select {
    width: 100%;
  }
  .shopify-search-input {
    width: 75%;
  }
  .shopify-search-submit {
    width: 22%;
  }
}
@media (max-width: 479.98px) {
  .shopify-search-input {
    width: 100%;
    float: none;
    margin-bottom: 0.5rem;
  }
  .shopify-search-submit {
    width: 100%;
    float: none;
  }
}

/* ============================================================
   PRODUCT REVIEWS — within PDP
   ============================================================ */
@media (max-width: 767.98px) {
  .page-details .product-reviews__header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .page-details .product-reviews__tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .page-details .product-reviews__tab {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ============================================================
   ERROR 404
   ============================================================ */
@media (max-width: 575.98px) {
  .error-section h1,
  .error-section .error-404-number {
    font-size: 5rem;
  }
  .error-section h2 {
    font-size: 1.25rem;
  }
}

/* ============================================================
   ACCESSIBILITY — focus indicators on touch screens
   ============================================================ */
@media (max-width: 991.98px) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--skin-accent, #c45c5c);
    outline-offset: 2px;
  }
}

/* ============================================================
   PRINT — minimal print styles
   ============================================================ */
@media print {
  .storefront__header,
  .storefront-bold__header,
  .storefront__footer,
  .storefront-bold__footer,
  .searchBox,
  .preloader_wrapper,
  .menu_btn,
  .storefront-bold__search-btn {
    display: none !important;
  }
  body.layout-page {
    padding-top: 0 !important;
  }
  .layout-page__main {
    padding-top: 0 !important;
  }
  img {
    max-width: 100% !important;
  }
}

/*
 * Mobile toolbar: force hamburger visible (loads after storefront-modern-bem.css).
 * Desktop @media (min-width:992px) hides .toolbar-menu; comman.css hides .menu_btn on desktop only.
 * Bars need display:block — desktop rule hides .storefront-bold__menu-toggle__bar at ≥992px.
 */
@media (max-width: 991.98px) {
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .setrightmobileviewmenu > .storefront-bold__toolbar-menu,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: var(--sf-theme-toolbar-btn-size, 36px) !important;
    height: auto !important;
    overflow: visible !important;
    order: 10 !important;
    align-self: center !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    float: none !important;
    list-style: none !important;
  }

  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-menu .storefront-bold__menu-toggle.menu_btn,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-menu button.storefront-bold__menu-toggle,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__menu-toggle.menu_btn.storefront-bold__toolbar-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--sf-theme-toolbar-btn-size, 36px) !important;
    min-width: var(--sf-theme-toolbar-btn-size, 36px) !important;
    height: var(--sf-theme-toolbar-btn-size, 36px) !important;
    min-height: var(--sf-theme-toolbar-btn-size, 36px) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  body.storefront-bold .storefront-bold__header .storefront-bold__menu-toggle .storefront-bold__menu-toggle__bar,
  body.storefront-bold .storefront-bold__header .storefront-bold__menu-toggle.menu_btn .storefront-bold__menu-toggle__bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 0 auto 4px !important;
    background: currentColor !important;
  }

  body.storefront-bold .storefront-bold__header .storefront-bold__menu-toggle .storefront-bold__menu-toggle__bar:last-child {
    margin-bottom: 0 !important;
  }

  /*
   * Legacy mobile toolbar row: hide search (not .sf-mheader BEM bar).
   * .sf-mheader__item--search stays visible — see layout1-header-toolbar-bem.css.
   */
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .setrightmobileviewmenu > .storefront-bold__toolbar-search,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-search,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .setrightmobileviewmenu > li.storefront-bold__toolbar-search {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
    opacity: 0 !important;
  }

  /* Open drawer must paint above hero/Swiper even before/without body nav-open class */
  body.storefront-bold .main_menu_wrapper.main_menu_wrapper.open,
  body.storefront-bold .main_menu_wrapper.storefront-bold__nav-portal.open,
  body.storefront-bold.storefront-bold--nav-open .main_menu_wrapper.storefront-bold__nav-portal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 130010 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/*
 * v13: one toolbar row — logo | phone | email | hamburger (legacy Bootstrap row only).
 * v16: skipped when .sf-mheader is present (see layout1-header-modern.css).
 */
@media (max-width: 991.98px) {
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-col.storefront-bold__header-aside,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-aside {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.storefront-bold .storefront-bold__header .storefront-bold__header-aside > .storefront-bold__nav-drawer:not(.open):not(.storefront-bold__nav-portal),
  body.storefront-bold .storefront-bold__header .storefront-bold__header-aside > #mega-layout-main-nav:not(.open):not(.storefront-bold__nav-portal),
  body.storefront-bold .storefront-bold__header .storefront-bold__header-aside > #mega-layout-user-nav:not(.open):not(.storefront-bold__nav-portal) {
    position: absolute !important;
    left: -100vw !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    flex: 0 0 0 !important;
    pointer-events: none !important;
  }

  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__menu-row.main_menu_parent,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__header-toolbar-shell {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }

  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .setrightmobileviewmenu.storefront-bold__header-toolbar,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .setrightmobileviewmenu {
    display: flex !important;
    flex-flow: row nowrap !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(0.08rem, 1vw, 0.28rem) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .setrightmobileviewmenu > li,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .setrightmobileviewmenu > .storefront-bold__toolbar-strip-item,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .setrightmobileviewmenu > .sf-dheader__item,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .setrightmobileviewmenu > .storefront-bold__toolbar-menu,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .setrightmobileviewmenu > .mobilecart {
    display: flex !important;
    flex: 0 0 auto !important;
    float: none !important;
    list-style: none !important;
    align-items: center !important;
    align-self: center !important;
  }

  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .setrightmobileviewmenu > .storefront-bold__toolbar-search,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-search,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header .storefront-bold__toolbar-search--desktop-only,
  body.storefront-bold:not(:has(.l1-mbar)):not(:has(.sf-mheader)) .storefront-bold__header [data-sf-mobile-toolbar="hide"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
    opacity: 0 !important;
    flex: 0 0 0 !important;
  }

  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .storefront-bold__header-brand,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .mobilesetlogo.col-7,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .mobilesetlogo {
    flex: 0 1 auto !important;
    max-width: min(30vw, 7.25rem) !important;
  }

  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .storefront-bold__header-col,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .mobilesetlogosp.col-5,
  body.storefront-bold .storefront-bold__header:not(:has(.sf-mheader)):not(:has(.l1-mbar)) .storefront-bold__header-row > .mobilesetlogosp {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 0.15rem !important;
  }
}

/* ============================================================
   LAYOUT1 BEM — v40 guards (do not fight layout1-bem.css grids)
   ============================================================ */
@media (max-width: 991.98px) {
  body.storefront-bold .sf-cart__layout.cart-page__grid > .col-lg-8,
  body.storefront-bold .sf-cart__layout.cart-page__grid > .col-lg-4,
  body.storefront-bold .cart-page__grid.sf-cart__layout > [class*="col-lg-"] {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.storefront-bold .sf-minicart-drop__footer {
    grid-template-columns: 1fr;
  }

  body.storefront-bold .sf-account-panel__shell.row,
  body.storefront-bold .sf-account-panel__shell > [class*="col-"] {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  body.storefront-bold .sf-minicart-drop__line {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: 0.35rem 0.5rem;
  }

  body.storefront-bold .sf-cart__layout .cart-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.storefront-bold .sf-booknow-modal__header {
    grid-template-columns: 1fr auto;
  }
}

/* =============================================================================
   Layout1 v64 — viewport split reinforcement (loads before layout1-h.css v64)
   ============================================================================= */
@media (max-width: 991.98px) {
  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-header__viewport-desktop {
    display: none !important;
  }
}

@media (min-width: 992px) {
  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-header__viewport-mobile {
    display: none !important;
  }

  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-dbar__toolbar-pills--hide-desktop {
    display: none !important;
  }

  body.theme-layout1.storefront-bold:has(.l1-header) .l1-header .l1-dbar .l1-tool--menu {
    display: none !important;
  }
}