/**
 * DZone storefront responsive layer.
 * Loaded after styles.css + responsive.css + website-theme.css so these
 * rules win without scattering !important overrides across the base theme.
 */

/* -------------------------------------------------------------------------- */
/* Tablet only (768–991) — light touch, do not shrink desktop                 */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .website-theme .container-fluid.px-lg-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .website-theme #header .logo-header .logo {
    max-height: 46px !important;
    max-width: 120px !important;
  }

  .website-theme .account-dashboard .box-check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .website-theme .my-account-nav {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .website-theme .my-account-nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile (≤767px)                                                            */
/* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html,
  body,
  .website-theme {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .website-theme *,
  .website-theme *::before,
  .website-theme *::after {
    min-width: 0;
  }

  .website-theme .home-hero .slider-wrap {
    min-height: 0;
  }

  .website-theme .home-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .website-theme .home-value-item {
    justify-content: flex-start;
    padding: 1rem 0.75rem;
    border-bottom: 1px solid #ece9e1;
  }

  .website-theme .home-value-item:nth-child(2n) {
    border-right: 0;
  }

  .website-theme .home-value-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .website-theme .home-value-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .website-theme .home-value-item strong {
    font-size: 0.75rem;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .website-theme .home-value-item small {
    font-size: 0.67rem;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .website-theme .home-section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .website-theme .home-section-head {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  .website-theme .home-section-head p {
    max-width: 100%;
    padding-right: 0;
    overflow-wrap: anywhere;
  }

  .website-theme .home-text-link {
    margin-top: 1rem;
  }

  .website-theme #categories .grid-cls,
  .website-theme #categories .grid-cls > *,
  .website-theme #categories .wg-cls,
  .website-theme #categories .wg-cls .image {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .website-theme #products .card-product,
  .website-theme #latest-products .card-product {
    padding: 0.35rem;
    border-radius: 0.9rem;
  }

  .website-theme .container-fluid.px-lg-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .website-theme section.py-5,
  .website-theme .py-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .website-theme .mb-5 {
    margin-bottom: 1.125rem !important;
  }

  /* Neutralize vendor template rules that break the storefront */
  .website-theme .banner-shop {
    height: auto !important;
    min-height: 0 !important;
  }

  .website-theme .footer-col-block .tf-collapse-content,
  .website-theme .footer .footer-col-block .tf-collapse-content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .website-theme .tf-page-title .breadcrumb-list {
    font-size: 0.75rem;
    gap: 0.25rem;
  }

  .website-theme .tf-page-title .title {
    line-height: 1.2 !important;
    margin-bottom: 0.35rem !important;
  }

  /* Shop listing — kill stacked 30px/24px control margins */
  .website-theme .shop-listing-section,
  .website-theme .shop-listing-section.py-3,
  .website-theme .shop-listing-section.py-5 {
    padding-top: 0.75rem !important;
    padding-bottom: 1.25rem !important;
  }

  .website-theme .tf-shop-control {
    margin-bottom: 0.5rem !important;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .website-theme .shop-filter-control {
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    position: static !important;
  }

  .website-theme .tf-shop-control .count-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    text-align: right;
  }

  .website-theme .meta-filter-shop {
    margin-bottom: 0.5rem !important;
  }

  .website-theme .wrapper-control-shop #gridLayout {
    margin-top: 0;
  }

  .website-theme #gridLayout.wrapper-shop.row,
  .website-theme #products .row,
  .website-theme #latest-products .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem !important;
    row-gap: 1.1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .website-theme #gridLayout.wrapper-shop.row > .col,
  .website-theme #products .row > [class*="col"],
  .website-theme #latest-products .row > [class*="col"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .website-theme .tf-btn-filter {
    min-height: 36px;
    padding: 6px 12px !important;
    font-size: 0.75rem;
  }

  .website-theme .wg-pagination.mt-5 {
    margin-top: 1.25rem !important;
  }

  /* Header */
  .website-theme #header.header-default,
  .website-theme #header.header-default.py-2 {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  .website-theme #header .nav-icon {
    gap: 0.25rem !important;
  }

  .website-theme #header .nav-icon-item {
    width: 34px;
    height: 34px;
  }

  .website-theme #header .nav-icon-item i,
  .website-theme #header .mobile-menu i {
    font-size: 1.2rem !important;
  }

  .website-theme #header .mobile-menu {
    width: 44px;
    height: 44px;
    min-width: 44px;
    color: #0d0d0d !important;
  }

  .website-theme #header .mobile-menu .mobile-menu-icon {
    display: block;
    width: 22px;
    height: 22px;
  }

  .website-theme #header .logo-header .logo {
    max-height: 40px !important;
    max-width: 105px !important;
  }

  /* Shop by Category — compact mosaic overlays on small screens */
  .website-theme #categories .wg-cls.style-abs .cls-btn {
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  .website-theme #categories .wg-cls .tf-btn {
    min-height: 34px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100%;
    padding: 6px 12px !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    height: auto !important;
  }

  .website-theme #categories .wg-cls .fs-5,
  .website-theme #categories .wg-cls h3 {
    margin-bottom: 0.35rem !important;
    line-height: 1.2 !important;
  }

  /* Match product grid min column gap (gx-1 = 0.25rem) */
  .website-theme #categories .grid-cls {
    gap: 0.25rem !important;
  }

  /*
   * Always 2 columns on phones. Vendor responsive.css sets:
   * - grid-cls-v5 → 2-col base (OK)
   * - grid-cls-v2 → 1-col at ≤575px (inconsistent)
   * Clear mosaic areas so both category blocks match.
   */
  .website-theme #categories .grid-cls-v5,
  .website-theme #categories .grid-cls-v2 {
    grid-template-columns: repeat(2, calc((100% - 0.25rem) / 2)) !important;
    grid-template-areas: none !important;
  }

  .website-theme #categories .grid-cls-v5 .item1,
  .website-theme #categories .grid-cls-v5 .item2,
  .website-theme #categories .grid-cls-v5 .item3,
  .website-theme #categories .grid-cls-v5 .item4,
  .website-theme #categories .grid-cls-v2 .item1,
  .website-theme #categories .grid-cls-v2 .item2,
  .website-theme #categories .grid-cls-v2 .item3,
  .website-theme #categories .grid-cls-v2 .item4,
  .website-theme #categories .grid-cls-v2 > * {
    grid-area: auto !important;
    width: 100% !important;
  }

  .website-theme .tf-grid-layout {
    column-gap: 0.25rem !important;
    row-gap: 1rem !important;
  }

  .website-theme #categories .grid-cls-v5 .item1,
  .website-theme #categories .grid-cls-v5 .item2,
  .website-theme #categories .grid-cls-v5 .item3,
  .website-theme #categories .grid-cls-v5 .item4,
  .website-theme #categories .grid-cls-v2 > * {
    height: auto !important;
    min-height: 160px;
  }

  .website-theme #categories .wg-cls .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Shop product grid uses Bootstrap row + gx/gy classes */
  .website-theme .card-product .card-product-wrapper {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
  }

  .website-theme .card-product .product-img.aspect-square,
  .website-theme .card-product .product-img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
  }

  .website-theme .card-product .list-product-btn {
    display: none !important;
  }

  .website-theme .card-product .card-product-info {
    padding-top: 6px !important;
    gap: 2px !important;
    text-align: left !important;
  }

  .website-theme .card-product .name-product,
  .website-theme .card-product .name-product a,
  .website-theme .card-product .product-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: left !important;
    text-transform: none !important;
  }

  .website-theme .card-product .price-wrap,
  .website-theme .card-product .price-new {
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .website-theme .card-product .price-old {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
  }

  /* Forms / buttons */
  .website-theme label,
  .website-theme .form-label {
    font-size: 0.8125rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
  }

  .website-theme .form-control,
  .website-theme .form-select,
  .website-theme .tf-input,
  .website-theme .tf-field-input,
  .website-theme input[type="text"],
  .website-theme input[type="email"],
  .website-theme input[type="tel"],
  .website-theme input[type="password"],
  .website-theme input[type="number"],
  .website-theme select {
    min-height: 42px;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
  }

  .website-theme textarea.form-control,
  .website-theme textarea.tf-input,
  .website-theme textarea.tf-field-input,
  .website-theme textarea {
    min-height: 80px;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
  }

  .website-theme .tf-btn,
  .website-theme .btn.site-btn,
  .website-theme a.tf-btn,
  .website-theme button.tf-btn {
    height: auto !important;
    min-height: 42px !important;
    max-width: 100%;
    padding: 10px 16px !important;
    gap: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center;
    overflow: visible !important;
    word-break: break-word;
    hyphens: auto;
  }

  .website-theme .tf-btn.btn-lg,
  .website-theme .btn-lg.tf-btn {
    width: 100%;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 18px !important;
    font-size: 0.75rem !important;
    white-space: normal !important;
  }

  .website-theme .tf-btn.btn-sm {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 0.6875rem !important;
  }

  .website-theme .tf-btn i,
  .website-theme .tf-btn .icon {
    flex-shrink: 0;
    line-height: 1 !important;
  }

  /* Product add-to-cart row: quantity + button without crushed text */
  .website-theme .tf-product-total-quantity .group-btn,
  .website-theme .group-btn {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    gap: 8px !important;
  }

  .website-theme .tf-product-total-quantity .group-btn .wg-quantity {
    flex: 0 0 auto;
  }

  .website-theme .tf-product-total-quantity .group-btn .tf-btn,
  .website-theme .group-btn .tf-btn {
    min-width: 0 !important;
    flex: 1 1 140px;
    width: auto;
  }

  /* Stack paired CTAs full-width on phones */
  .website-theme .d-flex.flex-column .tf-btn,
  .website-theme .cart-box .tf-btn,
  .website-theme .footer-newsletter .tf-btn,
  .website-theme .footer-direction-btn {
    width: 100%;
  }

  .website-theme .box-ip-checkout,
  .website-theme .tf-page-cart-sidebar,
  .website-theme .cart-box,
  .website-theme .account-panel,
  .website-theme .account-address-item,
  .website-theme .glass-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .website-theme .offcanvas-header {
    min-height: 52px;
    padding: 10px 14px !important;
  }

  .website-theme .offcanvas-title {
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
  }

  .website-theme .offcanvas-body.p-4,
  .website-theme .offcanvas:not(#mobileMenu) .offcanvas-body {
    padding: 12px 14px !important;
  }

  .website-theme #mobileMenu.mobile-menu-drawer {
    --mobile-menu-width: min(100vw - 2rem, 288px);
  }

  .website-theme #mobileMenu .offcanvas-header {
    min-height: 48px;
    padding: 0.5rem 0.875rem !important;
  }

  .website-theme #mobileMenu .mobile-nav-list {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  .website-theme #mobileMenu .mb-menu-link {
    padding: 0.45rem 0.55rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
  }

  .website-theme #mobileMenu .mobile-menu-section-label {
    font-size: 0.625rem !important;
    margin-bottom: 0.25rem !important;
  }

  .website-theme #mobileMenu .mobile-menu-icon-wrap {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }

  .website-theme #mobileMenu .mobile-menu-icon-wrap i {
    font-size: 0.875rem;
  }

  .website-theme #mobileMenu .mobile-menu-footer {
    padding: 0.65rem 0.875rem calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .website-theme #mobileMenu .mobile-menu-footer .tf-btn {
    min-height: 38px !important;
    font-size: 0.75rem !important;
    margin-bottom: 0.4rem !important;
  }

  .website-theme #mobileMenu .mobile-menu-contact a {
    font-size: 0.6875rem !important;
  }

  .website-theme #mobileMenu .mobile-menu-footer .social-item {
    width: 28px;
    height: 28px;
  }

  .website-theme .offcanvas .list-group-item {
    margin: 1px 6px;
    padding: 8px 10px !important;
    gap: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
  }

  .website-theme .modal-header {
    padding: 10px 12px;
  }

  .website-theme .modal-body {
    padding: 12px !important;
  }

  .website-theme .wg-quantity {
    min-height: 40px;
  }

  .website-theme .wg-quantity .btn-quantity,
  .website-theme .wg-quantity input {
    min-height: 40px !important;
  }

  .website-theme .accordion-item {
    margin-bottom: 6px;
  }

  .website-theme .accordion-button {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
  }

  .website-theme .accordion-body {
    padding: 10px 12px;
    font-size: 0.8125rem;
  }

  .website-theme .collapse .wd-form-address,
  .website-theme .collapse .form-default {
    padding: 12px;
  }

  .website-theme .main-content-account,
  .website-theme .tf-page-cart-main,
  .website-theme .tf-checkout-cart-main,
  .website-theme .py-5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .website-theme section.py-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .website-theme .account-dashboard .box-check-list {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
    padding-bottom: 2px;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
  }

  .website-theme .account-dashboard .box-check-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .website-theme .account-dashboard .box-check-list > .account-swipe-item {
    flex: 0 0 min(68vw, 200px);
    width: min(68vw, 200px);
    max-width: min(68vw, 200px);
    scroll-snap-align: start;
  }

  .website-theme .account-dashboard .box-check {
    padding: 12px 10px !important;
    gap: 0.4rem;
  }

  .website-theme .account-dashboard .box-check .icon i {
    font-size: 1.25rem !important;
  }

  .website-theme .account-dashboard .name-type {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
  }

  .website-theme .account-dashboard .sub-type {
    font-size: 0.6875rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .website-theme .account-dashboard .count-number {
    width: 18px;
    height: 18px;
    font-size: 0.625rem !important;
    line-height: 18px;
  }

  .website-theme .account-order-swipe {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
  }

  .website-theme .account-order-swipe::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .website-theme .account-order-swipe .account-swipe-card {
    flex: 0 0 min(74vw, 240px);
    width: min(74vw, 240px);
    max-width: min(74vw, 240px);
    scroll-snap-align: start;
  }

  .website-theme .account-dashboard .box-account-title {
    margin-bottom: 0.75rem !important;
  }

  .website-theme .account-dashboard .hello-name {
    font-size: 1.05rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
  }

  .website-theme .account-dashboard .notice {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }

  .website-theme .account-panel-title {
    font-size: 0.9375rem !important;
  }

  .website-theme .account-panel-link {
    font-size: 0.75rem !important;
  }

  .website-theme .account-card-title {
    font-size: 0.8125rem !important;
  }

  .website-theme .account-card-meta-text,
  .website-theme .account-card-action {
    font-size: 0.6875rem !important;
  }

  .website-theme .account-order-card {
    padding: 10px;
    border-radius: 10px;
  }

  .website-theme .account-order-card .badge {
    font-size: 0.625rem;
    padding: 0.2rem 0.4rem;
  }

  .website-theme .account-card-thumb {
    border-radius: 8px;
    margin-bottom: 0.5rem !important;
  }

  /* Account menu chips: swipe, no visible scrollbar */
  .website-theme .my-account-nav {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    gap: 6px;
  }

  .website-theme .my-account-nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .website-theme .my-account-nav li {
    scroll-snap-align: start;
  }

  .website-theme .my-account-nav-item {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.65rem !important;
    min-height: 36px;
    gap: 6px;
  }

  .website-theme .my-account-nav-item i {
    font-size: 0.9375rem;
  }

  .website-theme .account-order-card-stack {
    padding: 10px;
  }

  .website-theme .account-panel {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .website-theme .account-dashboard .content-account {
    gap: 0.5rem;
  }

  .website-theme .mb-5 {
    margin-bottom: 1.125rem !important;
  }

  .website-theme .mt-5 {
    margin-top: 1.125rem !important;
  }

  .website-theme .mb-4 {
    margin-bottom: 0.875rem !important;
  }

  .website-theme .mt-4 {
    margin-top: 0.875rem !important;
  }

  .website-theme .p-4,
  .website-theme .p-md-5 {
    padding: 0.875rem !important;
  }

  .website-theme .p-5 {
    padding: 1rem !important;
  }

  .website-theme .product-price .price-new,
  .website-theme .product-price #current-price {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
  }

  .website-theme .product-price .price-old {
    font-size: 0.875rem !important;
  }

  .website-theme .checkout-stepper .step-label {
    display: none !important;
  }

  .website-theme .info-banner {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
  }

  .website-theme .info-banner i {
    flex: 0 0 auto;
    margin-top: 0.05rem;
  }

  .website-theme .d-flex.gap-2:not(.nav-icon),
  .website-theme .d-flex.gap-3:not(.nav-icon),
  .website-theme .d-flex.gap-4:not(.nav-icon) {
    flex-wrap: wrap;
  }

  /* Search modal */
  .website-theme .popup-search .modal-content {
    padding: 48px 0 20px;
    border: 0;
    box-shadow: none;
  }

  .website-theme .popup-search .modal-dialog {
    margin: 0;
  }

  .website-theme .popup-search .header {
    padding: 8px 12px 0;
  }

  .website-theme .popup-search .looking-for-wrap {
    margin-bottom: 1rem !important;
    text-align: left !important;
  }

  .website-theme .popup-search .heading {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }

  .website-theme .popup-search .form-search {
    margin-bottom: 0.75rem !important;
  }

  .website-theme .popup-search .form-search input {
    min-height: 44px;
    font-size: 0.875rem !important;
    border-color: var(--site-border) !important;
    box-shadow: none !important;
  }

  .website-theme .popup-search .form-search input:focus {
    border-color: var(--brand-orange, #f15a24) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.12) !important;
  }

  .website-theme .popup-search .popular-searches {
    margin-top: 0.75rem !important;
  }

  .website-theme .popup-search .popular-searches .text {
    font-size: 0.8125rem !important;
    margin-bottom: 0.5rem !important;
  }

  .website-theme .popup-search .popular-searches ul {
    gap: 6px;
  }

  .website-theme .popup-search .popular-searches .btn-filter {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.75rem;
  }

  .website-theme .popup-search .featured-product-heading {
    font-size: 0.875rem !important;
    margin-bottom: 0.75rem !important;
  }

  .website-theme .popup-search .card-product .list-product-btn {
    display: none !important;
  }

  .website-theme .popup-search .card-product .card-product-info {
    text-align: left !important;
    padding-top: 6px !important;
  }

  .website-theme .popup-search .card-product .name-product,
  .website-theme .popup-search .card-product .name-product a {
    -webkit-line-clamp: 2 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-align: left !important;
  }

  .website-theme .popup-search .search-results-panel {
    max-height: min(42vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hero slider */
  .website-theme .tf-slideshow.slider-style-2,
  .website-theme .tf-slideshow.slider-viewport {
    min-height: 0 !important;
  }

  .website-theme .slider-style-2 .slider-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .website-theme .slider-style-2 .image {
    order: 1;
    width: 100% !important;
    height: auto !important;
    max-height: 200px;
    overflow: hidden;
  }

  .website-theme .slider-style-2 .image img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    aspect-ratio: auto !important;
  }

  .website-theme .slider-style-2 .box-content-left {
    order: 2;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    right: auto !important;
    padding: 0.85rem 0 1rem !important;
    display: block !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  .website-theme .slider-style-2 .box-content-left > .container-fluid {
    min-height: 0 !important;
    align-items: flex-start !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .website-theme .slider-style-2 .content-slider {
    gap: 0.75rem !important;
  }

  .website-theme .slider-style-2 .box-title-slider {
    gap: 0.35rem !important;
  }

  .website-theme .slider-style-2 .box-title-slider .sub {
    letter-spacing: 0.06em;
    font-weight: 500 !important;
  }

  .website-theme .slider-style-2 .box-title-slider .desc {
    line-height: 1.4 !important;
  }

  .website-theme .slider-style-2 .box-btn-slider {
    margin-top: 0.15rem;
  }

  .website-theme .slider-style-2 .box-btn-slider .tf-btn {
    min-height: 40px;
    padding: 8px 18px !important;
  }

  .website-theme .slider-style-2 .wrap-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: 0.25rem;
    padding-bottom: 0.75rem;
  }

  .website-theme .slider-style-2 .sw-dots {
    margin: 0 !important;
  }

  /* Offers — compact, no forced 400–500px heights */
  .website-theme #offers {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .website-theme #offers .mb-5 {
    margin-bottom: 1rem !important;
  }

  .website-theme #offers .banner-shop {
    height: auto !important;
    min-height: 0 !important;
    border-radius: 12px;
    overflow: hidden;
  }

  .website-theme #offers .banner-shop .image,
  .website-theme #offers .banner-shop .image.ratio {
    --bs-aspect-ratio: 42%;
    max-height: 140px;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
  }

  .website-theme #offers .banner-shop .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .website-theme #offers .banner-shop .box,
  .website-theme #offers .banner-shop .box.box-left {
    padding: 8px 2px 0 !important;
    margin: 0 !important;
  }

  .website-theme #offers .banner-shop .box p.text-uppercase {
    margin-bottom: 0.2rem !important;
    letter-spacing: 0.04em;
  }

  .website-theme #offers .banner-shop .box h3 {
    margin-bottom: 0.2rem !important;
    line-height: 1.25 !important;
  }

  .website-theme #offers .banner-shop .box .text-secondary {
    line-height: 1.35 !important;
  }

  .website-theme #offers .col-12 {
    margin-bottom: 0 !important;
  }

  /* Footer — compact spacing only on small screens */
  .website-theme .footer-heading,
  .website-theme .footer-default .footer-heading {
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    pointer-events: none;
  }

  .website-theme .footer-heading::before,
  .website-theme .footer-heading::after,
  .website-theme .footer-heading-mobile::before,
  .website-theme .footer-heading-mobile::after {
    display: none !important;
  }

  .website-theme .footer-col-block {
    margin: 0 !important;
    border: 0 !important;
  }

  .website-theme .footer-default .footer-contact,
  .website-theme .footer-default .footer-newsletter {
    margin: 0 !important;
  }

  .website-theme .footer-newsletter .tf-btn,
  .website-theme .footer-direction-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
    width: 100%;
  }

  .website-theme .footer-default .footer-top.py-4,
  .website-theme .footer-default .footer-body.py-4 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .website-theme .footer-menu-list a,
  .website-theme .footer-info a,
  .website-theme .footer-newsletter p,
  .website-theme .footer-bottom p {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .website-theme .footer-info .item {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Small phones (≤575px)                                                      */
/* -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .website-theme section.py-5,
  .website-theme .py-5 {
    padding-top: 1.125rem !important;
    padding-bottom: 1.125rem !important;
  }

  .website-theme .shop-listing-section {
    padding-top: 0.625rem !important;
    padding-bottom: 1rem !important;
  }

  .website-theme .tf-shop-control {
    margin-bottom: 0.35rem !important;
  }

  .website-theme .meta-filter-shop {
    margin-bottom: 0.35rem !important;
  }

  .website-theme .tf-btn,
  .website-theme .btn.site-btn {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
    height: auto !important;
    line-height: 1.25 !important;
  }

  .website-theme .tf-btn.btn-lg {
    max-width: 100%;
  }

  .website-theme .slider-style-2 .image,
  .website-theme .slider-style-2 .image img {
    max-height: 160px;
    height: 160px !important;
  }

  .website-theme .slider-style-2 .box-content-left {
    padding: 0.75rem 0 0.85rem !important;
  }

  .website-theme #categories .grid-cls-v5 .item1,
  .website-theme #categories .grid-cls-v5 .item2,
  .website-theme #categories .grid-cls-v5 .item3,
  .website-theme #categories .grid-cls-v5 .item4,
  .website-theme #categories .grid-cls-v2 > * {
    min-height: 140px;
  }

  .website-theme .footer-newsletter .tf-btn {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Desktop grids                                                              */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .website-theme .card-product .card-product-info {
    text-align: center;
  }

  .website-theme .card-product .name-product,
  .website-theme .card-product .name-product a {
    text-align: center;
    font-weight: 600 !important;
  }

  .website-theme .card-product .price-wrap,
  .website-theme .card-product .price-new {
    justify-content: center;
    font-weight: 600 !important;
    text-align: center;
  }

  .website-theme .footer-newsletter .tf-btn,
  .website-theme .footer-direction-btn {
    width: auto;
  }
}

/* Hover-capable desktops: product action buttons appear on hover */
@media (min-width: 992px) and (hover: hover) {
  .website-theme .card-product .list-product-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .website-theme .card-product:hover .list-product-btn,
  .website-theme .card-product:focus-within .list-product-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Homepage final responsive overrides (kept last to beat vendor utility rules). */
@media (max-width: 767px) {
  .website-theme .home-hero .content-slider,
  .website-theme .home-hero .box-title-slider,
  .website-theme .home-hero h1,
  .website-theme .home-hero .desc {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    min-width: 0 !important;
  }

  .website-theme .home-hero h1,
  .website-theme .home-hero .desc {
    text-wrap: balance;
    white-space: normal !important;
  }

  .website-theme .slider-style-2 .box-title-slider > h1,
  .website-theme .home-hero h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    line-height: 1.1 !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .website-theme .home-hero .desc {
    overflow-wrap: anywhere;
  }

  .website-theme .home-value-strip .container-fluid,
  .website-theme .home-section > .container-fluid {
    width: 100vw;
    max-width: 100vw;
  }

  .website-theme section.home-section.py-5 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .website-theme .home-section .home-section-head {
    margin-bottom: 2rem !important;
  }

  .website-theme #categories .grid-cls {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    overflow: hidden;
  }
}

/* Universal storefront rhythm on small screens. */
@media (max-width: 767px) {
  .website-theme {
    font-size: 15px;
  }

  .website-theme #wrapper > main > section.py-5:not(.home-section),
  .website-theme #wrapper > main > div.py-5 {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }

  .website-theme #wrapper > main > section.pt-5 {
    padding-top: 2.75rem !important;
  }

  .website-theme .tf-page-title .title {
    max-width: 100%;
    line-height: 1.08 !important;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  .website-theme.site-page--website-product .tf-page-title .title {
    max-width: min(29rem, 100%);
    line-height: 1.1 !important;
  }

  .website-theme .tf-page-title .breadcrumb-list {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .website-theme .tf-page-title .breadcrumb-list .breadcrumb-item {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .website-theme.site-page--website-product .tf-page-title .breadcrumb-list .breadcrumb-item.current {
    flex-basis: 100%;
    margin-top: 0.2rem;
  }

  .website-theme .card-product .name-product,
  .website-theme .card-product .name-product a,
  .website-theme .card-product .product-name,
  .website-theme .card-product .product-name a,
  .website-theme .card-product .price-wrap,
  .website-theme .card-product .price-new {
    line-height: 1.35 !important;
  }

  .website-theme .tf-page-title .breadcrumb-list {
    font-size: 0.75rem !important;
  }

  .website-theme.site-page--website-product .tf-main-product .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .website-theme.site-page--website-product .tf-main-product .row > [class*="col"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .website-theme .tf-product-media-wrap,
  .website-theme .tf-product-info-wrap,
  .website-theme .tf-product-info-list {
    width: 100%;
    max-width: 100%;
  }

  .website-theme .tf-product-heading .product-name {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .website-theme .tf-product-total-quantity .group-btn {
    display: grid !important;
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 0.5rem !important;
    width: 100%;
    max-width: 100%;
  }

  .website-theme .tf-product-total-quantity .group-btn .wg-quantity,
  .website-theme .tf-product-total-quantity .group-btn .tf-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .website-theme .card-body,
  .website-theme .box-ip-checkout,
  .website-theme .tf-page-cart-main,
  .website-theme .tf-page-cart-sidebar,
  .website-theme .account-panel,
  .website-theme .sidebar-account-wrap,
  .website-theme .wd-form-login,
  .website-theme .account-address-item,
  .website-theme .contact-wrap,
  .website-theme .content-page {
    padding: 1.1rem !important;
    border-radius: 16px !important;
  }

  .website-theme .tf-btn,
  .website-theme .btn.site-btn,
  .website-theme button.tf-btn {
    min-height: 46px;
    padding: 0.7rem 1.1rem !important;
    font-size: 0.8125rem;
  }

  .website-theme .form-control,
  .website-theme .form-select,
  .website-theme .tf-input,
  .website-theme .tf-field-input,
  .website-theme input[type="text"],
  .website-theme input[type="email"],
  .website-theme input[type="tel"],
  .website-theme input[type="password"],
  .website-theme input[type="number"],
  .website-theme select {
    min-height: 48px;
  }

  .website-theme .table-responsive,
  .website-theme .tf-page-cart-main {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .website-theme .table,
  .website-theme .table-page-cart,
  .website-theme table {
    font-size: 0.8125rem;
  }

  .website-theme .tf-product-info-wrap {
    padding: 1.25rem 0 0;
  }
}