.modal-backdrop {
      display: none;
    }

    .modal {
      display: none;
    }

    #mobileFilterModal {
      display: none;
    }

    @media (max-width: 768px) {

      .html .body {
        overflow-x: hidden !important;
      }

      .footer .row {
        text-align: center;
      }

      .footer .footer-links {
        display: none;
      }

      .footer .social-links {
        justify-content: center;
      }

      .footer .footer-links li {
        display: inline-block;
        margin: 0 10px;
      }

      .footer .footer-brand,
      .footer .footer-text {
        text-align: center;
      }

      .navmenu {
        display: none !important;
      }

      /* Show only mobile navbar (already set in HTML with d-lg-none) */
      .header .navbar.fixed-top {
        background-color: #fff;
        padding: 0.75rem 1rem;
      }

      .navbar-collapse {
        background-color: #fff;
        padding: 1rem 0;
      }

      .navbar-nav .nav-link {
        padding: 0.75rem 1.5rem;
        border-bottom: 1px solid #eee;
      }

      .navbar-brand img {
        height: 30px;
      }

      .container-fluid {
        width: 100% !important;
        padding-top: 0;
      }

      .filter-menu {
        display: none;
      }

      .text-label-mobile-hide {
        display: none !important;
      }

      .sort-menu {
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
        min-width: 120px;
        max-width: calc(100vw - 20px);
        overflow-wrap: break-word;
        z-index: 9999;
      }

      .badge-new,
      .badge-price {
        font-size: 0.9rem;
        transition: none;
      }

      .btn.re-filter {
        padding: 0.25rem;
        /* หรือ 0 ถ้าต้องการแนบสนิท */
        width: auto;
        height: auto;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        /* เอาไว้ถ้าไม่ต้องการสีพื้น */
        border: none;
        /* ถ้าไม่อยากให้มีกรอบ */
      }

      .product-container.shrink .card-body {
        font-size: 1rem;
        /* กลับไปขนาดปกติ */
        transition: none;
      }

      .product-container.shrink .color-dot {
        width: 15px;
        height: 15px;
        transition: none;
      }

      .product-container.shrink .badge-new,
      .product-container.shrink .badge-price {
        font-size: 0.9rem;
        transition: none;
      }

      .filter-menu.active {
        left: -100%;
        /* ซ่อน filter ออกไป */
        opacity: 0;
        visibility: hidden;
        transition: none;
      }

      #mobileFilterModal a {
        text-decoration: none;
        color: #000;
      }

      #mobileFilterModal a:hover {
        text-decoration: underline;
        color: #000;
      }

      .modal-backdrop {
        display: block;
      }

      .btn .re-filter {
        display: none;
      }
    }

    .cart-container {
      position: relative;
      /* นี่คือหัวใจสำคัญของการแก้ไขปัญหานี้ */
      display: flex;
      align-items: center;
    }

    /* CSS สำหรับ Dropdown Cart (ปรับปรุง) */
    .cart-dropdown {
      position: absolute;
      top: 60px;
      /* ปรับให้ Dropdown อยู่ด้านล่างไอคอนตะกร้า */
      right: -10px;
      /* ให้เส้นขวาของ Dropdown ตรงกับเส้นขวาของ container */
      width: 350px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
      transition: opacity 0.3s ease, transform 0.3s ease;
      visibility: hidden;
      font-family: "IBM Plex Sans Thai Looped", sans-serif;
      color: #333;
    }

    .cart-dropdown.active {
      opacity: 1;
      transform: translateY(0) scale(1);
      visibility: visible;
    }

    /* ส่วนหัวของตะกร้า */
    .cart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
      background-color: #f8f9fa;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    .cart-header h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }

    .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #888;
      transition: color 0.2s;
    }

    .close-btn:hover {
      color: #333;
    }

    /* รายการสินค้า */
    .cart-items {
      padding: 15px 20px;
      max-height: 300px;
      overflow-y: auto;
    }

    .cart-item .item-quantity input {
      width: 50px;
      /* กำหนดความกว้างของช่อง input ตามที่คุณต้องการ */
      text-align: center;
      /* จัดตำแหน่งข้อความให้อยู่กึ่งกลาง */
    }

    .empty-cart-text {
      text-align: center;
      color: #888;
      padding: 20px 0;
    }

    .cart-item {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
      border-bottom: 1px dashed #eee;
      padding-bottom: 15px;
    }

    .cart-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .cart-item img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      margin-right: 15px;
      border-radius: 5px;
    }

    .item-img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 6px;
    }

    .item-details {
      flex-grow: 1;
    }

    .item-name {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 5px;
    }

    .item-price {
      font-size: 14px;
      color: #555;
    }

    .item-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .remove-item-btn {
      background: none;
      border: none;
      color: #dc3545;
      font-size: 18px;
      cursor: pointer;
      transition: color 0.2s;
    }

    .remove-item-btn:hover {
      color: #c82333;
    }

    /* ส่วนท้ายของตะกร้า */
    .cart-footer {
      padding: 15px 20px;
      border-top: 1px solid #eee;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background-color: #f8f9fa;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    .total-price {
      text-align: right;
      font-size: 16px;
      font-weight: 600;
    }

    .total-price span {
      color: #28a745;
    }

    .checkout-btn {
      width: 100%;
      padding: 12px;
      background-color: #19233e;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.2s;
      /* เพิ่ม 2 บรรทัดนี้ */
      text-align: center;
      /* จัดข้อความให้อยู่กึ่งกลาง */
      text-decoration: none;
      /* ลบเส้นใต้ข้อความออก */
    }

    .checkout-btn:hover {
      background-color: rgba(31, 47, 87, 1);
    }

    /* --- Login CTA inside cartDropdown --- */
    .cart-login-cta {
      padding: 16px 20px;
      border-bottom: 1px solid #eee;
      background: #fffdfd;
    }

    .btn-login-cta {
      width: 100%;
      padding: 10px 14px;
      border-radius: 8px;
      background: #19233e;
      color: #fff;
      border: none;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-login-cta:hover {
      background: rgba(31, 47, 87, 1);
    }

    /* เส้นขอบรอบ loginModal */
    #loginModal .modal-content {
      border: 1px solid #dee2e6;
      /* สีเทาอ่อน */
      border-radius: 8px;
      /* มุมโค้งเล็กน้อย */
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      /* เงาเบาๆ */
    }

    /* --- Login Modal --- */
    #loginModal .brand {
      font-size: 28px;
      font-weight: 700;
      color: #19233e;
      /* สีธีม */
      letter-spacing: .5px;
    }

    #loginModal .subtitle {
      font-size: 14px;
      color: #6c757d;
      margin-top: 4px;
    }

    #loginModal .welcome {
      font-size: 18px;
      font-weight: 700;
      margin: 18px 0 10px 0;
      text-align: center;
    }

    /* ปุ่ม OAuth */
    #loginModal .oauth-btn {
      width: 100%;
      border: 1px solid #e5e7eb;
      border-radius: 30px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      font-weight: 600;
      justify-content: center;
      color: #000 !important;
      text-decoration: none !important;
    }

    #loginModal .oauth-btn:hover {
      background: #f8f9fa;
      color: #000 !important;
    }

    #loginModal .oauth-icon {
      font-size: 20px;
    }

    /* icon แบรนด์ */
    .oauth-btn.google .oauth-icon {
      color: #ea4335;
    }

    /* Google */
    .oauth-btn.line .oauth-icon {
      color: #00c300;
    }

    /* LINE */
    .oauth-btn.facebook .oauth-icon {
      color: #1877f2;
    }

    /* Facebook */

    /* เส้นคั่น */
    #loginModal .or-row {
      position: relative;
      text-align: center;
      margin: 10px 0;
      color: #6c757d;
    }

    #loginModal .or-row::before,
    #loginModal .or-row::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 45%;
      height: 1px;
      background: #eee;
    }

    #loginModal .or-row::before {
      left: 0;
    }

    #loginModal .or-row::after {
      right: 0;
    }

    /* ปุ่มเข้าสู่ระบบด้วยอีเมล */
    #loginModal .email-btn {
      border-radius: 30px;
      border: 1px solid #19233e;
      color: #19233e;
    }

    #loginModal .email-btn:hover {
      background: #19233e;
      color: #fff;
    }

    /* ลิงก์เล็กด้านล่าง */
    #loginModal .small-link {
      font-size: 13px;
      color: #6c757d;
    }

    #loginModal .small-link a {
      color: #19233e;
      text-decoration: none;
    }

    #loginModal .small-link a:hover {
      text-decoration: underline;
    }

    /* ============================
   VIEW: ฟอร์มอีเมล/รหัสผ่าน
   ============================ */
    #loginModal #emailLoginView .form-label {
      font-weight: 600;
    }

    #loginModal #emailLoginView .form-control {
      border-color: #e5e7eb;
      box-shadow: none;
    }

    #loginModal #emailLoginView .form-control:focus {
      border-color: #19233e;
      box-shadow: 0 0 0 .2rem rgba(25, 35, 62, .15);
    }

    #loginModal #emailLoginView .btn-primary {
      background: #19233e;
      border-color: #19233e;
    }

    #loginModal #emailLoginView .btn-primary:hover {
      background: #141c31;
      border-color: #141c31;
    }

    /* ปุ่มตาโชว์/ซ่อนรหัสผ่าน */
    #loginModal #emailLoginView .btn-link {
      color: #6c757d;
    }

    #loginModal #emailLoginView .btn-link:hover {
      color: #19233e;
      text-decoration: none;
    }

    /* ============================
   ICON ล็อกอินบน navbar
   ============================ */
    .login-icon {
      transition: color 0.2s;
    }

    .login-icon:hover {
      color: #19233e;
      /* สีธีม */
    }

    /* ปุ่มปิด modal */
    #loginModal .btn-close {
      z-index: 1057;
    }

    /* ปุ่มเข้าสู่ระบบด้วยอีเมล (หน้าแรก modal) */
    #loginModal .email-btn {
      border-radius: 30px;
      background: #19233e;
      border: 1px solid #19233e;
      color: #fff;
      font-weight: 600;
    }

    #loginModal .email-btn:hover {
      background: #141c31;
      /* เฉดเข้มกว่า */
      border-color: #141c31;
      color: #fff;
    }

    /* ฟอร์มอีเมล/รหัสผ่าน */
    #loginModal #emailLoginView .form-label {
      font-weight: 600;
    }

    #loginModal #emailLoginView .form-control {
      border-color: #e5e7eb;
      box-shadow: none;
    }

    #loginModal #emailLoginView .form-control:focus {
      border-color: #19233e;
      box-shadow: 0 0 0 .2rem rgba(25, 35, 62, .15);
    }

    /* ปุ่ม submit */
    #loginModal #emailLoginView .btn-primary {
      background: #19233e;
      border-color: #19233e;
      font-weight: 600;
    }

    #loginModal #emailLoginView .btn-primary:hover {
      background: #141c31;
      border-color: #141c31;
    }

    /* ปุ่มตาโชว์/ซ่อนรหัสผ่าน */
    #loginModal #emailLoginView .btn-link {
      color: #6c757d;
    }

    #loginModal #emailLoginView .btn-link:hover {
      color: #19233e;
      text-decoration: none;
    }


    /* ===== Register View (สมัครสมาชิก) ===== */
    #loginModal #registerView {
      font-size: 13px;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "IBM Plex Sans Thai Looped", sans-serif;
    }

    /* หัวข้อย่อย */
    #loginModal #registerView h5 {
      font-size: 22px;
      font-weight: 800;
      color: #19233e;
      margin-bottom: 14px;
    }

    /* ฟอร์มพื้นฐานให้หน้าตา “นุ่ม–สะอาด” แบบตัวอย่าง */
    #loginModal #registerView .form-label {
      font-weight: 600;
      color: #1d2436;
      font-size: 12px;
      margin-bottom: 3px;
    }

    #loginModal #registerView .form-control {
      height: 46px;
      font-size: 12.5px;
      padding: 4px 8px;
      /* ลด padding */
      height: 32px;
      /* กำหนดความสูง */
      border-radius: 4px;
      /* โค้งน้อยลง */
      background: #fff;
      box-shadow: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    #loginModal #registerView .form-control:focus {
      border-color: #19233e;
      box-shadow: 0 0 0 .2rem rgba(25, 35, 62, .12);
    }

    /* ปุ่มตาโชว์/ซ่อนรหัสผ่าน */
    #loginModal #registerView .btn-link {
      color: #a0a7b4;
      font-size: 14px;
      padding: 0;
    }

    #loginModal #registerView .btn-link:hover {
      color: #19233e;
      text-decoration: none;
    }

    /* Checklist ความแรงรหัสผ่านแบบ 2 คอลัมน์ */
    #loginModal #registerView #pwdChecklist {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* 2 คอลัมน์ */
      gap: 2px 10px;
      /* ระยะห่างแนวตั้ง 4px แนวนอน 12px */
      margin: 6px 0;
      padding-left: 0;
      font-size: 10px;
      /* ขนาดเล็กลง */
      line-height: 1.3;
    }

    #loginModal #registerView #pwdChecklist li {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #6b7280;
      /* เทาอ่อนอ่านง่าย */
    }

    #loginModal #registerView #pwdChecklist li i {
      font-size: 0.75rem;
      /* ไอคอนเล็กลง */
      flex-shrink: 0;
      /* ไม่ให้บีบ */
    }


    /* เส้นคั่น “หรือ สมัครสมาชิกด้วย” */
    #loginModal #registerView .or-row {
      position: relative;
      text-align: center;
      color: #8a93a4;
      margin: 18px 0 12px;
    }

    #loginModal #registerView .or-row::before,
    #loginModal #registerView .or-row::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 45%;
      height: 1px;
      background: #e9edf2;
    }

    #loginModal #registerView .or-row::before {
      left: 0;
    }

    #loginModal #registerView .or-row::after {
      right: 0;
    }

    /* ปุ่ม Submit ใหญ่ แบบ pill */
    #loginModal #registerView .btn-primary {
      background: #19233e;
      border-color: #19233e;
      border-radius: 999px;
      font-weight: 700;
      font-size: 13px;
      padding: 6px 10px;
      height: 34px;
      border-radius: 4px;
    }

    #loginModal #registerView .btn-primary:hover {
      background: #141c31;
      border-color: #141c31;
    }

    /* ปุ่มโซเชียลล่างให้เป็นวงกลม ขาว ขอบบาง */
    #loginModal #registerView .btn-light {
      background: #fff;
      border-color: #e6e8ec;
      width: 44px;
      height: 44px;
      border-radius: 999px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
    }

    #loginModal #registerView .btn-light:hover {
      background: #f7f8fa;
      border-color: #dfe3e8;
    }

    /* ลิงก์นโยบาย */
    #loginModal #registerView a {
      color: #3b6becff;
      text-decoration: none;
    }

    #loginModal #registerView a:hover {
      text-decoration: underline;
    }

    /* ช่อง type="date" ให้สูงและโค้งเท่ากัน */
    #loginModal #registerView input[type="date"] {
      padding-right: .75rem;
    }

    /* ปรับช่องว่างรวม ๆ ให้โล่งแบบตัวอย่าง */
    #loginModal #registerView .row.g-3>[class^="col"] {
      margin-bottom: .4rem;
    }

    /* เส้นแบ่ง */
    .divider {
      display: inline-block;
      width: 1px;
      height: 24px;
      background-color: #ccc;
      margin: 0 8px;
    }

    .login-wrapper {
      display: inline-flex;
      /* icon + text แนวนอน */
      align-items: center;
      /* จัดให้อยู่กึ่งกลางแนวตั้ง */
      gap: 6px;
      /* ระยะห่าง */
      color: #000;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      /* ❌ ห้ามตัดบรรทัด */
    }

    .login-wrapper:hover {
      color: #19233e;
    }

    .account-btn {
      background: transparent;
      border: none;
      color: #000;
      font-weight: 500;
      font-size: 14px;
    }

    .account-btn:hover,
    .account-btn:focus {
      color: #19233e;
      /* สีธีม */
      box-shadow: none;
    }

    .dropdown-menu {
      font-size: 14px;
    }

    /* ปุ่มตาให้ลอยเหนือ input และกดได้ */
    .btn.toggle-eye {
      z-index: 2;
      pointer-events: auto;
    }

    /* Checklist สองคอลัมน์ ขนาดเล็ก แนบชิด */
    #pwdChecklist {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px 12px;
      /* แถว x คอลัมน์ */
      font-size: .82rem;
      line-height: 1.1;
      margin: .25rem 0 0 0;
      padding: 0;
    }

    #pwdChecklist li {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      white-space: nowrap;
      /* กันตัดบรรทัดกลางประโยค */
    }

    #pwdChecklist i {
      font-size: .9rem;
    }

    @media (max-width: 390px) {
      #loginModal #registerView .form-control {
        height: 44px;
      }

      #loginModal #registerView .btn-primary {
        height: 46px;
      }
    }

    /* ============================
   Responsive
   ============================ */
    @media (max-width: 375px) {
      #loginModal .brand {
        font-size: 24px;
      }

      #loginModal .oauth-btn {
        font-size: 14px;
      }
    }


    /* น้ำเงิน Facebook */
    /* ============================
      CBI Shop demo additions
      ใช้เพิ่มเฉพาะหน้า shop โดยไม่ไปแตะโครง nav/filter/product เดิม
    ============================ */
    .shop-hero-video {
      /* Hero video only: no overlay text/content.
         Video height is kept balanced; brand section is pushed down by its own top spacing. */
      width: 100%;
      position: relative;
      overflow: hidden;
      min-height: clamp(500px, 78vh, 820px);
      max-height: 820px;
      background: #f7f3ec;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0;
    }

    .shop-hero-video video,
    .shop-hero-video .shop-hero-fallback {
      width: 100%;
      height: clamp(500px, 78vh, 820px);
      object-fit: cover;
      display: block;
    }

    .shop-brand-section {
      padding: clamp(110px, 9vw, 140px) 0 clamp(22px, 4vw, 46px);
      background: #fff;
    }

    .shop-section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 22px;
    }

    .shop-section-head h2 {
      margin: 0;
      font-size: clamp(1.55rem, 3vw, 2.35rem);
      font-weight: 800;
      letter-spacing: -.03em;
    }

    .shop-section-head p {
      margin: 7px 0 0;
      color: #666;
      font-size: 15px;
    }

    .shop-brand-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
    }

    .shop-brand-card {
      min-height: 128px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(0,0,0,.075);
      border-radius: 22px;
      background: #fff;
      padding: 18px 14px 20px;
      text-decoration: none;
      color: #111;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
      box-shadow: 0 8px 24px rgba(0,0,0,.026);
      position: relative;
      overflow: hidden;
    }

    .shop-brand-card::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 13px;
      width: 36px;
      height: 2px;
      border-radius: 999px;
      background: transparent;
      transform: translateX(-50%);
      transition: background .2s ease, width .2s ease, opacity .2s ease;
      opacity: 0;
    }

    .shop-brand-card:hover {
      transform: translateY(-2px);
      border-color: rgba(0,0,0,.16);
      box-shadow: 0 13px 30px rgba(0,0,0,.052);
      color: #111;
      background: #fff;
    }

    .shop-brand-card.active {
      transform: translateY(-1px);
      border-color: #cdbb9f;
      background: linear-gradient(180deg, #fffdf9 0%, #faf7f0 100%);
      box-shadow: 0 14px 32px rgba(78, 54, 24, .075), inset 0 0 0 1px rgba(205, 187, 159, .25);
      color: #111;
    }

    .shop-brand-card.active::after {
      width: 32px;
      background: #b49b77;
      opacity: 1;
    }

    .shop-brand-logo-wrap {
      width: 100%;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    .shop-brand-logo {
      max-width: 104px;
      max-height: 48px;
      width: auto;
      height: auto;
      object-fit: contain;
      filter: grayscale(.12);
      opacity: .9;
      transition: filter .2s ease, opacity .2s ease, transform .2s ease;
    }

    .shop-brand-card:hover .shop-brand-logo {
      filter: grayscale(.04);
      opacity: .98;
      transform: translateY(-1px);
    }

    .shop-brand-card.active .shop-brand-logo {
      filter: none;
      opacity: 1;
      transform: translateY(-1px);
    }

    .shop-brand-card[data-brand-logo-key="nico pola"] .shop-brand-logo {
      max-width: 118px;
      max-height: 42px;
    }

    .shop-brand-card[data-brand-logo-key="on apex"] .shop-brand-logo {
      max-width: 96px;
      max-height: 46px;
    }

    .shop-brand-card[data-brand-logo-key="hmh"] .shop-brand-logo,
    .shop-brand-card[data-brand-logo-key="mhm"] .shop-brand-logo {
      max-width: 88px;
      max-height: 48px;
    }

    .shop-brand-info {
      width: 100%;
      text-align: center;
    }

    .shop-brand-card strong {
      display: block;
      font-size: 14.5px;
      line-height: 1.2;
      margin-bottom: 0;
      font-weight: 800;
      letter-spacing: .005em;
    }

    .shop-brand-card span {
      display: none;
    }

    .shop-brand-card.active strong {
      color: #1f1b16;
    }

    .shop-card-brand {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      max-width: 100%;
      margin-bottom: 7px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #f6f1ea;
      color: #555;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
    }

    .shop-active-filter {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      color: #777;
      font-size: 13px;
      margin-left: 10px;
    }

    @media (max-width: 992px) {
      .shop-brand-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 768px) {
      .shop-hero-video,
      .shop-hero-video video,
      .shop-hero-video .shop-hero-fallback {
        min-height: 500px;
        height: 72vh;
      }

      .shop-brand-section {
        padding-top: 84px;
      }

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

      .shop-section-head {
        display: block;
      }
    }

    @media (max-width: 420px) {
      .shop-brand-grid {
        grid-template-columns: 1fr;
      }
    }