/** Shopify CDN: Minification failed

Line 1418:65 Unexpected "*"
Line 1419:69 Unterminated string token
Line 1420:15 Expected identifier but found "{"
Line 1420:16 Expected identifier but found "."
Line 1420:49 Unexpected ","
Line 1421:21 Unexpected ")"

**/
/* slider placeholder image */
.custom_slider_placeholder_image {
  background-color: aliceblue;
  height: 100px;
  width: 100px;
  text-align: center;
}
.custom_slider_placeholder_shape_image {
  background-color: aliceblue;
  height: 100px;
  width: 100px;
  text-align: center;
}
.custom_slider_2_placeholder_image {
  background-color: aliceblue;
  height: 740px;
  width: 500px;
  text-align: center;
}

.tp-category-thumb-2 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.tp-category-menu nav ul li img {
  max-width: 100%;
  width: auto;
}

.tp-shop-widget .filter-content ul li {
  list-style-type: none;
}

.tp-shop-widget .filter-content ul li a .checkbox.checked {
  background-color: #0989ff;
  border-color: #0989ff;
  color: #fff;
}

.tps__link-filter .checkbox:before {
  content: "" !important;
}

.tp-shop-widget-categories {
  height: auto;
}

.tp-select-sort-by {
  display: inline-block;
  z-index: 2;
}

.tp-select-sort-by ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #cccccc;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1;
}

.tp-select-sort-by li {
  padding: 8px;
  cursor: pointer;
}

/* Show the dropdown when the button is hovered */
.tp-select-sort-by:hover ul {
  display: block;
}

.tp-product-details-thumb-wrapper .nav-tabs .nav-link img {
  object-fit: contain;
}

.m-img img {
  max-width: 100%;
}

.tp-error-thumb h1 {
  font-size: 150px;
  font-weight: 700;
  color: #000;
  margin-bottom: 0;
}

.tp-product-action-btn-2.active {
  background-color: #010f1c;
  border-color: #ffffff;
  color: #fff;
}

.tp-compare-thumb {
  margin: 0 auto;
}

.tp-shop-top-select {
  background-color: #f9f9f9;
  border: 1px solid rgba(1, 15, 28, 0.1);
  border-radius: 0;
  font-size: 14px;
  color: var(--tp-common-black);
  height: 40px;
  line-height: 38px;
  padding: 0 25px;
  min-width: 204px;
  float: none;
  position: relative;
}
.tp-shop-top-select ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #cccccc;
  background-color: #fff;
  display: none;
  z-index: 4;
  width: 178px;
  position: absolute;
  left: 0;
  width: 100%;
}

.tp-product-item-2 .tp-product-details-action-sm-btn:hover {
  color: #fff;
}
.tp-footer-payment .payment-icons {
  height: 200px;
  width: 200px;
  margin: 0 auto;
}

.tp-product-details-variation-list button {
  margin-right: 5px;
}

.shopify-payment-button__button--unbranded {
  background: transparent;
  padding: 5px 30px;
}

.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: transparent;
}

.tp-footer-social a {
  margin-right: 5px;
}

.tp-header-side-menu ul li a .vertical_svg_icon {
  display: inline-block;
  width: 11%;
  margin-right: 5px;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  font-size: 21px;
  line-height: 1;
  height: auto;
}

.loading-icon {
  display: none;
}

.loading-icon.active {
  display: block;
}

.cart_load_spinning {
  /* spinning animation */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  color: #000;
}

.tp-product-action-btn-3.active {
  background-color: #010f1c;
  border-color: #ffffff;
  color: #fff;
}
.tp-product-action-btn.active {
  background-color: #010f1c;
  border-color: #ffffff;
  color: #fff;
}

.tp-postbox-details-comment-thumb{
  margin-right: 15px;
}


.tp-featured-title {  width: 60%;
}

.tp-contact-social-icon a {
  display: inline-block;
  width: 38px;
  height: 38px;
  line-height: 36px;
  text-align: center;
  border: 1px solid #E6E7E8;
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
}

.tp-product-item .tp-product-rating .jdgm-prev-badge__text{
  color: #55585B;
}

.shop-mega-menu-img{
  box-shadow: 0px 2px 6px rgba(1, 15, 28, 0.2);
}

.tp-header-top-menu-item ul {
  width: 130px;
}


/* keyfrem for cart svg spnner */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-icon .cart_load_spinning {
  /* spinning animation */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  color: #fff;
}

.tp-special-item .tp-product-details-action-sm-btn {
  background-color: #010f1c;
  border-color: #ffffff;
  color: #fff;
}

.tp-postbox-details-input-box:not(:last-child) {
  margin-bottom: 30px;
}

.tp-contact-btn {
  border: none;
}

.tp-contact-social-icon a {
  margin-right: 5px;
}

.tp-shop-widget-product-content .tp-shop-widget-product-price-wrapper .tp-product-price {
  font-size: 14px;
  font-weight: 400;
}

.tp-cart-title a {
  margin-left: 20px;
  font-weight: 400;
  font-size: 16px;
  color: var(--tp-common-black);
  display: inline-block;
  margin-right: 45px;
}

.tp-product-details-title {
  line-height: 1.3;
}

.tp-cart-list tr td .tp-cart-action-btn {
  display: flex;
  align-items: center;
}

.tp-cart-list tr td .tp-cart-action-btn svg {
  margin-right: 5px;
  margin-top: 4px;
}

.cartmini__title {
  margin-right: 3px;
}

.tp-login-wrapper .tp-login-btn {
  border: none;
}

.tp-link-btn-3 span {
  margin-left: 5px;
}

.tp-link-btn-3 span svg {
  margin-top: 2px;
}

.tp-product-price-inner-4 .tp-product-price-add-to-cart .loading-icon .cart_load_spinning{
  color: #000;
}


.tp-featured-slider .tp-featured-thumb {
  z-index: -1;
  width: 300px;
  left: auto;
  right: 0;
}

.back-to-top-wrapper.back-to-top-btn-show {
  bottom: 90px;
}

.tp-shop-top-select ul {
  padding: 10px 0;
}

.tp-select-sort-by li {
  padding: 10px 26px;
}

.tp-category-item-2 .loading-icon .cart_load_spinning {
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  color: #000;
}

.tp-category-item-2 .loading-icon{
  display: none;
}

.tp-category-item-2 .tp-btn-border:hover  {
  .loading-icon .cart_load_spinning {
    color: #fff;
  }
}

@media (max-width: 768px) {
  .tp-postbox-wrapper {
    padding-right: 0px;
  }
}

@media only screen and (min-width: 991px) {
  .tp-slider-title {
    font-size: var(--slider-1-section-heading-font-size);
    font-weight: var(--slider-1-section-heading-font-weight);
  }
}
.tp-slider-content > span {
  font-size: var(--slider-1-section-subheading-font-size);
  font-weight: var(--slider-1-section-subheading-font-weight);
}

.tp-slider-content p {
  font-size: var(--slider-1-section-description-font-size);
  font-weight: var(--slider-1-section-description-font-weight);
}

@media only screen and (min-width: 991px) {
  .tp-slider-title-2 {
    font-size: var(--slider-2-section-heading-font-size);
    font-weight: var(--slider-2-section-heading-font-weight);
  }
}

.tp-slider-content-2 > span {
  font-size: var(--slider-2-section-subheading-font-size);
  font-weight: var(--slider-2-section-subheading-font-weight);
}

@media only screen and (min-width: 991px) {
  .tp-slider-title-3 {
    font-size: var(--slider-3-section-heading-font-size);
    font-weight: var(--slider-3-section-heading-font-weight);
  }
}

.tp-slider-content-3 > span {
  font-size: var(--slider-3-section-subheading-font-size);
  font-weight: var(--slider-3-section-subheading-font-weight);
}

@media only screen and (min-width: 991px) {
  .tp-slider-title-4 {
    font-size: var(--slider-4-section-heading-font-size);
    font-weight: var(--slider-4-section-heading-font-weight);
  }
}

.tp-slider-content-4 > span {
  font-size: var(--slider-4-section-subheading-font-size);
  font-weight: var(--slider-4-section-subheading-font-weight);
}

.tp-product-modal .tp-product-details-thumb-wrapper {
  flex: 0 0 47%;
}

.tp-product-details-buy-now-btn{
  margin-bottom: 15px;
}

/* 2nd check */
.tp-work-item {
  padding: 70px 30px 65px;
}

.tp-select-sort-by li {
  padding: 8px 26px;
  line-height: 1.5;
}

@media only screen and (max-width: 767px) {
  .tp-featured-slider .tp-featured-thumb {
    transform: translateX(31%);
  }
}

/* =====================================================================
   HOM Technology — UX/visual restyle (draft theme only)
   Navy/blue design refresh matching the approved mockup direction.
   Pure styling only — no text, pricing, image, or logo changes.
   ===================================================================== */
:root {
  --hom-navy: #0a1442;
  --hom-navy-2: #101c56;
  --hom-blue: #2547c9;
  --hom-blue-dark: #1b3499;
  --hom-line: #e7e9f2;
}

/* Buttons */
.tp-btn,
.tp-btn-border,
.tps__product-addtocart,
.tp-product-action-btn,
.tp-cart-btn,
button[type="submit"].tp-btn {
  border-radius: 6px !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease !important;
}
.tp-btn:not(.tp-btn-border) {
  background-color: var(--hom-navy) !important;
  border-color: var(--hom-navy) !important;
  color: #ffffff !important;
}
.tp-btn:not(.tp-btn-border):hover {
  background-color: var(--hom-blue) !important;
  border-color: var(--hom-blue) !important;
  color: #ffffff !important;
}
.tp-btn:not(.tp-btn-border) * {
  color: #ffffff !important;
}
.tp-btn-border:hover {
  background-color: var(--hom-navy) !important;
  border-color: var(--hom-navy) !important;
  color: #ffffff !important;
}

/* Links / interactive accents */
.tps__product-name a:hover,
.tp-product-title a:hover,
.tp-product-category-title a:hover,
.tp-banner-title-2 a:hover,
.tp-category-title-3 a:hover {
  color: var(--hom-blue) !important;
}
.tp-shop-widget .filter-content ul li a .checkbox.checked,
.tp-product-action-btn.active,
.tp-product-action-btn-2.active,
.tp-product-action-btn-3.active {
  background-color: var(--hom-navy) !important;
  border-color: var(--hom-navy) !important;
}

/* Product cards */
.tps__product-item {
  position: relative;
  border: 1px solid var(--hom-line);
  border-radius: 10px;
  overflow: visible;
  background: #fff;
  padding-bottom: 64px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.tps__product-item:hover {
  box-shadow: 0 12px 28px rgba(10, 20, 66, 0.10);
  transform: translateY(-3px);
  border-color: var(--hom-blue);
}
.tps__product-item .tps__product-name a,
.tps__product-item .tp-product-title a {
  font-weight: 600;
  color: var(--hom-navy);
}
.tps__product-item .tps__product-price,
.tps__product-item .price {
  color: var(--hom-navy) !important;
  font-weight: 700 !important;
}

/* Fix: the image wrapper used to clip its own rounded corners, which also
   clipped the quick-action / add-to-cart controls nested inside it on
   hover. Let the thumb overflow freely and round the image itself instead. */
.tps__product-item .tp-product-thumb {
  overflow: visible;
}
.tps__product-item .tp-product-thumb img,
.tps__product-item .tp_image_product {
  border-radius: 8px;
}

/* Turn the hover-only "Add to Cart" overlay into a persistent action bar
   pinned to the bottom of the card, below the price -- so the controls
   never sit on top of (or get clipped by) the product photo. */
.tps__product-item .tp-product-action {
  position: absolute !important;
  left: 14px;
  right: 14px;
  bottom: 14px;
  top: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 5;
}
.tps__product-item .tp-product-action-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.tps__product-item .tps__product-addtocart {
  flex: 1;
  display: block !important;
}
.tps__product-item .tps__product-addtocart form {
  width: 100%;
}
.tps__product-item .tp-product-add-cart-btn {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background: var(--hom-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  transition: background-color .2s ease;
}
.tps__product-item .tp-product-add-cart-btn:hover {
  background: var(--hom-blue);
}
.tps__product-item .tp-product-add-cart-btn .tp-product-tooltip {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none !important;
}
.tps__product-item .tp-product-quick-view-btn,
.tps__product-item .tp-product-add-to-wishlist-btn,
.tps__product-item .tp-product-add-to-compare-btn {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--hom-line);
  background: #ffffff;
  color: var(--hom-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tps__product-item .tp-product-quick-view-btn:hover,
.tps__product-item .tp-product-add-to-wishlist-btn:hover,
.tps__product-item .tp-product-add-to-compare-btn:hover {
  background: var(--hom-navy);
  color: #ffffff;
  border-color: var(--hom-navy);
}
.tps__product-item .tp-product-quick-view-btn svg,
.tps__product-item .tp-product-add-to-wishlist-btn svg,
.tps__product-item .tp-product-add-to-compare-btn svg {
  width: 16px;
  height: 16px;
}

/* Review stars (now enabled via theme setting) */
.tps__product-item .tp-product-rating-icon i {
  color: #ffb020;
  font-size: 12px;
}
.tps__product-item .tp-product-rating {
  min-height: 16px;
  margin-bottom: 4px;
}

/* Bottom "products list" section: Cabinets Racks / VOIP Solutions / Switches.
   Card UI now reuses the exact same tp-product-item-3 component (and its
   CSS, further up this file under "Trending Products cards") as the
   Trending Products section -- see sections/products-list.liquid. Only
   the section-specific chrome (heading row, "View all" link, and the
   narrower 2-up product grid needed to fit three columns side by side)
   is styled here; no separate card styling remains. */
.tp-product-sm-list .tp-section-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tp-sm-list-viewall {
  font-size: 12px;
  font-weight: 700;
  color: var(--hom-blue);
  white-space: nowrap;
  text-decoration: none;
}
.tp-sm-list-viewall:hover {
  color: var(--hom-navy);
  text-decoration: underline;
}
/* The reused tp-product-item-3 card carries its own mb-50 bottom margin
   and the row/col-6 grid supplies its own negative-margin gutters, so
   this wrapper no longer needs any layout rules of its own. */

/* Category grid (design-1) */
.tp-product-category-item {
  padding: 20px 14px 24px;
  border: 1px solid var(--hom-line);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.tp-product-category-item:hover {
  box-shadow: 0 12px 26px rgba(10, 20, 66, 0.10);
  transform: translateY(-3px);
  border-color: var(--hom-blue);
}
.tp-product-category-thumb img {
  border-radius: 8px;
}
.tp-product-category-title a {
  font-weight: 600;
  color: var(--hom-navy);
  letter-spacing: .2px;
}

/* Main horizontal navigation menu */
.main-menu .tp-main-menu-content > ul > li > a {
  font-weight: 600;
  letter-spacing: .2px;
  transition: color .25s ease, box-shadow .25s ease;
}
.main-menu .tp-main-menu-content > ul > li > a:hover {
  color: var(--hom-blue) !important;
  box-shadow: inset 0 -2px 0 0 var(--hom-blue);
}

/* Sidebar "Shop by category" vertical menu */
.tp-category-menu nav ul li a:hover {
  color: var(--hom-blue) !important;
}

/* Top bar accent */
.topbar {
  background-color: var(--hom-navy) !important;
}

/* Trending Products tabs */
.tp-tab .nav-tabs .nav-link.active,
.collection-tab .nav-link.active,
.tp-product-tab-menu .nav-link.active {
  color: var(--hom-blue) !important;
  border-color: var(--hom-blue) !important;
}
/* Keep the tab list on a single line: when the collection names don't
   all fit the row width, scroll horizontally instead of wrapping onto
   a second line (the base theme's nav-tabs defaults to flex-wrap). */
.tp-product-tab.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
  justify-content: flex-start !important;
}
.tp-product-tab.nav-tabs::-webkit-scrollbar {
  display: none;
  height: 0;
}
.tp-product-tab.nav-tabs .nav-link {
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (min-width: 992px) {
  .tp-product-tab.nav-tabs {
    justify-content: flex-end !important;
  }
}

/* Empty state for a Trending Products tab whose collection has no
   products yet — replaces the base theme's default behaviour of
   rendering a row of fake placeholder cards (generic icon, "Product
   Placeholder" title, made-up $100.00/$120.00 prices). */
.tp-product-tab-empty {
  width: 100%;
  padding: 48px 24px;
  text-align: center;
  background: #f7f8fa;
  border: 1px dashed var(--hom-line);
  border-radius: 10px;
}
.tp-product-tab-empty p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #5b6478;
}

/* Banner / promo cards */
.tp-banner-item-2,
.tp-category-item-3,
.tp-category-item-5 {
  border-radius: 10px;
  overflow: hidden;
}
/* =====================================================================
   HOM Technology — Promo banners (mockup match)
   Flat brand-color backdrops behind full, uncropped product photos,
   replacing the theme's default full-bleed cropped background-image.
   ===================================================================== */
.tp-banner-item {
  background-color: #f7f8fc;
  border-radius: 10px;
  overflow: hidden;
}
.tp-banner-item .tp-banner-thumb {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
}
.tp-banner-item.tp-banner-item-sm {
  background-color: var(--hom-navy);
}
.tp-banner-item.tp-banner-item-sm .tp-banner-content span,
.tp-banner-item.tp-banner-item-sm .tp-banner-content h3,
.tp-banner-item.tp-banner-item-sm .tp-banner-content h3 a,
.tp-banner-item.tp-banner-item-sm .tp-banner-content p {
  color: #ffffff !important;
}
.tp-banner-item.tp-banner-item-sm .tp-banner-btn .tp-btn-border {
  border-color: #ffffff !important;
  color: #ffffff !important;
}
.tp-banner-item.tp-banner-item-sm .tp-banner-btn .tp-btn-border * {
  color: #ffffff !important;
}
.tp-banner-item.tp-banner-item-sm .tp-banner-btn .tp-btn-border:hover {
  background-color: #ffffff !important;
  color: var(--hom-navy) !important;
}
.tp-banner-item.tp-banner-item-sm .tp-banner-btn .tp-btn-border:hover * {
  color: var(--hom-navy) !important;
}

/* =====================================================================
   HOM Technology — Trending Products cards (tp-product-item-3 variant)
   Give this card variant the same persistent, always-visible action
   treatment already applied above to the New Arrivals (.tps__product-item)
   cards: small icon buttons pinned over the photo, full-width Add to
   Cart button pinned below the price instead of a hover-only overlay.
   ===================================================================== */
.tp-product-item-3.tps__product-item {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--hom-line);
  border-radius: 10px;
  overflow: visible;
  background: #fff;
  padding: 10px 10px 14px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.tp-product-item-3.tps__product-item:hover {
  box-shadow: 0 12px 28px rgba(10, 20, 66, 0.10);
  transform: translateY(-3px);
  border-color: var(--hom-blue);
}

/* Let the image wrapper's own box disappear from layout so the photo,
   the icon row, and the add-to-cart button (which the theme nests three
   levels deep inside the image wrapper) can be reordered as if they were
   direct children of the card. */
.tp-product-item-3 .tp-product-thumb-3 {
  display: contents;
}
.tp-product-item-3 .tp-product-thumb-3 > a {
  order: 1;
  display: block;
  position: relative;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}
.tp-product-item-3 .tp-product-thumb-3 > a img {
  border-radius: 8px;
}

/* Small icon buttons (compare / quick view / wishlist): pinned to the
   top-right corner of the card, always visible instead of hover-only. */
.tp-product-item-3 .tp-product-action-3 {
  order: 2;
  position: absolute !important;
  top: 10px;
  right: 10px;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 5;
}
.tp-product-item-3 .tp-product-action-item-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
}
.tp-product-item-3 .tp-product-action-btn-3 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hom-line);
  background: #ffffff;
  color: var(--hom-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-product-item-3 .tp-product-action-btn-3:hover {
  background: var(--hom-navy);
  color: #ffffff;
  border-color: var(--hom-navy);
}
.tp-product-item-3 .tp-product-action-btn-3 svg {
  width: 15px;
  height: 15px;
}
.tp-product-item-3 .tp-product-action-btn-3 .tp-product-tooltip,
.tp-product-item-3 .tp-product-action-btn-3 .tps__product-tooltip {
  z-index: 6;
}

.tp-product-item-3 .tp-product-content-3 {
  order: 3;
}
.tp-product-item-3 .tp-product-title-3 a {
  font-weight: 600;
  color: var(--hom-navy);
}
.tp-product-item-3 .tp-product-price-3 {
  color: var(--hom-navy) !important;
  font-weight: 700 !important;
}

/* Add to Cart: was an absolutely-positioned, opacity:0 overlay pinned to
   the bottom of the image; promote it into normal flow, below the price,
   as a persistent full-width button. */
.tp-product-item-3 .tp-product-add-cart-btn-large-wrapper {
  order: 4;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  display: block !important;
  margin-top: 10px;
  width: 100%;
}
.tp-product-item-3 .add-to-cart-rendom {
  width: 100%;
}
.tp-product-item-3 .tp-product-add-cart-btn-large {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background: var(--hom-navy);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color .2s ease;
}
/* The base theme has its own, MORE specific rule targeting this exact
   button -- .tp-product-item-3 .tp-product-add-cart-btn-large-wrapper
   .tp-product-add-cart-btn-large { padding: 5px 30px; font-size: 16px; }
   (3 classes vs. our 2 above) -- which was winning the cascade and
   silently overriding the padding/font-size override we tried to set on
   the 2-class selector. That padding + font-size was sized for a
   full-width Trending Products card (~260px); in the narrower 2-up cards
   reused in the bottom Cabinets Racks / VOIP Solutions / Switches
   columns (~155px) it left no room for "Add To Cart" + the cart icon on
   one line, so the text wrapped onto a second line and overflowed the
   fixed 40px button height. Matching the base rule's selector exactly
   (same specificity, declared later so it wins) is what actually beats
   it -- this applies at every width the component renders at, so both
   sections stay identical. */
.tp-product-item-3 .tp-product-add-cart-btn-large-wrapper .tp-product-add-cart-btn-large {
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.tp-product-item-3 .tp-product-add-cart-btn-large:hover {
  background: var(--hom-blue);
}

/* =====================================================================
   HOM Technology — Header / main menu (mockup color/style parity)
   Live theme keeps its two-row header_layout_1 DOM (top-bar +
   header-layout-1 with the Shop by Category mega-menu, then a sticky
   row with logo/menu/icons) rather than the mockup's single-row
   layout — restructuring the shared, site-wide header markup is out
   of scope for a styling pass, so this brings the existing rows to
   the same navy/blue brand language and pill-shaped category button
   the mockup uses.
   ===================================================================== */
.tp-category-menu-btn.tp-category-menu-toggle {
  background-color: var(--hom-navy) !important;
  color: #ffffff !important;
  border-radius: 4px;
  border: none !important;
}
.tp-category-menu-btn.tp-category-menu-toggle:hover {
  background-color: var(--hom-blue) !important;
}
/* The button's ::after chevron (Font Awesome) sits at a fixed distance
   from the button's right edge (right: 30px), independent of padding.
   The title text, however, flows within the padding box, and at the
   button's current width "Shop by category" runs all the way out to
   that same edge — so the last few letters render underneath the
   arrow instead of next to it. Extra right padding pulls the text's
   right edge in, clearing space for the arrow. */
.tp-category-menu-btn.tp-category-menu-toggle {
  padding-right: 46px !important;
}
.tp-category-menu-btn.tp-category-menu-toggle svg,
.tp-category-menu-btn.tp-category-menu-toggle path {
  stroke: #ffffff !important;
}

.main-menu.menu-style-1 > nav > ul > li > a {
  color: var(--hom-navy);
  font-weight: 500;
}
.main-menu.menu-style-1 > nav > ul > li > a:hover {
  color: var(--hom-blue);
}
.main-menu.menu-style-1 > nav > ul > li.has-dropdown > a::after {
  color: inherit;
}

#hom-header-sticky {
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(10, 20, 66, 0.06);
}

.tp-header-action-badge {
  background-color: var(--hom-blue) !important;
  color: #ffffff !important;
}

.tp-header-action-btn:hover {
  color: var(--hom-blue);
}

.tp-header-top {
  background-color: var(--hom-navy) !important;
}

/* =====================================================================
   HOM Technology — Header rebuild (single-row, mockup match)
   snippets/header.liquid (header_layout_1 branch) was rewritten to
   output ONE flex row — logo, category button, nav, search, action
   icons — instead of the theme's original 3 stacked rows (top-bar,
   a separate logo+search+icons row, a separate category+nav row).
   This CSS lays that single row out to match the mockup's header
   exactly: everything inline, search + icons pushed to the right.
   ===================================================================== */
.hom-header-row {
  background-color: #ffffff;
  border-bottom: 1px solid var(--hom-line);
}
.hom-header-row.header-sticky {
  box-shadow: 0 2px 12px rgba(10, 20, 66, 0.08);
}
.hom-header-row-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.hom-header-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.hom-header-logo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: none !important;
}
.hom-header-category {
  flex: 0 0 auto;
}
.hom-header-category .tp-header-category {
  margin: 0 !important;
}
.hom-header-nav {
  flex: 0 0 auto;
  min-width: 0;
}
.hom-header-nav .main-menu {
  width: auto;
}
.hom-header-nav .tp-main-menu-content > ul {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}
.hom-header-nav .tp-main-menu-content > ul > li {
  white-space: nowrap;
  /* The base theme puts a 25-27px margin-right on every top-level nav
     item (sized for a much wider mega-menu header). In this compact
     single-row header that margin, stacked on top of our own gap
     above, was pushing the nav to ~760px wide — far more than the row
     has room for once the logo, category pill, search box and account
     icons are also on the same line. That forced the search box to
     collapse to 0 width, and its content then visually overlapped the
     account icon next to it. Zeroing the margin here (we already
     control spacing via the gap above) is the actual fix. */
  margin: 0 !important;
}
/* =====================================================================
   HOM Technology — Header search: icon-only, click-to-expand popup
   Previously the input box was permanently squeezed into a fixed
   ~150-200px slot in the nav row, which looked cramped and was what
   forced the row-overlap workaround below. Now the search box is just
   the round icon button in normal flow; clicking it drops down a
   floating input panel (position: absolute, out of the row's flex
   flow) instead of permanently occupying header width. Toggled via
   the small script at the bottom of snippets/top-search.liquid, which
   adds/removes the "is-open" class used below.
   ===================================================================== */
.hom-header-search {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  margin-left: auto;
  position: relative;
}
.hom-header-search .tp-header-search {
  padding-left: 0 !important;
}
.hom-header-search .tp-header-search-wrapper {
  /* Base theme markup floats .tp-header-search-btn with
     position:absolute on top of a full-width input (the search icon
     sits over the corner of the text box). Since our input panel
     (.hom-header-search-box) is now ALSO position:absolute (it's a
     floating popup, not inline), this wrapper was left with no
     in-flow children at all -- it collapsed to ~0 width, and the
     absolutely-positioned button then anchored itself against that
     collapsed box instead of sitting in a predictable spot in the
     header row. Giving the wrapper an explicit size matching the
     button fixes that: it's a real 36x36 anchor box again. */
  border: none;
  padding: 0;
  margin-left: 0;
  position: relative;
  width: 36px;
  height: 36px;
}
.hom-header-search .tp-header-search-box {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border: 1px solid var(--hom-line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(10, 20, 66, 0.14);
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.hom-header-search.is-open .tp-header-search-box {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hom-header-search .tp-header-search-box input {
  width: 100%;
  border: none;
  padding: 10px 12px;
  font-size: 14px;
  min-width: 0;
}
.hom-header-search .tp-header-search-box input:focus {
  outline: none;
}
.hom-header-search .tp-header-search-btn button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Base theme's .tp-header-search-btn button rule sets
     background: var(--tp-theme-primary) (theme blue) with no resting
     override here previously -- that left the icon rendering as a
     solid blue circle with a near-invisible navy-on-blue glyph.
     Explicit transparent background restores a plain icon button at
     rest; hover/is-open still swap to a solid navy circle below. */
  background: transparent;
  color: var(--hom-navy);
  transition: background-color .18s ease, color .18s ease;
}
.hom-header-search .tp-header-search-btn button:hover,
.hom-header-search.is-open .tp-header-search-btn button {
  background: var(--hom-navy);
  color: #ffffff;
}
.hom-header-actions {
  flex: 0 0 auto;
  gap: 16px;
}
.hom-header-actions .tp-header-action-item {
  margin: 0 !important;
}
.hom-header-actions .tp-header-login-content {
  /* Icon-only account button in this compact header — the "Hello
     Guest / Login here" text was eating ~100px that the row doesn't
     have to spare, and was part of what pushed the actions cluster
     past the edge of the header (clipping the cart icon). */
  display: none !important;
}
.hom-header-actions .tp-header-login-icon {
  margin: 0;
}

/* Collapse the (now redundant) mobile off-canvas / duplicate spacing
   utility classes the reused snippets still carry from their old
   grid-column context. */
.hom-header-row .tp-header-login.d-none.d-lg-block,
.hom-header-row .tp-header-action-item.d-none.d-lg-block {
  display: flex !important;
}

@media (max-width: 1199px) {
  .hom-header-nav,
  .hom-header-search {
    display: none !important;
  }
  .hom-header-search {
    margin-left: 0;
  }
}
@media (max-width: 991px) {
  .hom-header-category {
    display: none !important;
  }
}

/* =====================================================================
   HOM Technology — Shop by Category icons (mockup match)
   snippets/list-collection-item.liquid (design-1 branch) now swaps in
   these theme-hosted icon PNGs for the 5 known category titles instead
   of the old stock photos, keyed off title_collection. This just sizes
   them consistently inside the existing card layout.
   ===================================================================== */
.tp-product-category-thumb img.hom-category-icon {
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 0;
}

/* =====================================================================
   HOM Technology — Shop by Category cards: equal height
   The grid's bootstrap columns already stretch to match the tallest
   row (a 2-line collection title vs. a 1-line one), but the visible
   card itself (.tp-product-category-item) only sized to its own
   content instead of filling that stretched column — so cards with
   longer titles rendered visibly taller than the others. Filling the
   column and reserving 2 lines of title height makes every card the
   same size regardless of title length.
   ===================================================================== */
.tp-product-category-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tp-product-category-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: flex-start;
}
.tp-product-category-title {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-product-category-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   HOM Technology — Trending Products cards: fix broken Add to Cart
   placement + match mockup's contained image / eyebrow label styling
   The base theme's product.css sets `.tp-product-thumb-3 { display:
   flex !important; height: 200px !important; }`, which beat our
   `display: contents` rule (no !important) below — so the thumb never
   actually collapsed out of the box tree, the flex `order` values on
   its children never took effect, and the Add to Cart button rendered
   pinned inside the 200px image box (overlapping the wishlist icon)
   instead of in normal flow below the price. Adding !important here
   is what actually makes the reorder happen.
   ===================================================================== */
.tp-product-item-3 .tp-product-thumb-3 {
  display: contents !important;
}
.tp-product-item-3 .tp-product-thumb-3 > a {
  order: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 200px !important;
  background: #ffffff;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}
/* The product photos themselves are shot on inconsistent studio
   backdrops (some pure white, some a cooler light gray) and, at full
   size, fill this box edge-to-edge — so a photo with a grayer backdrop
   reads as a visibly different-colored box next to its neighbors.
   Capping the rendered image at ~82% of the box (object-fit: contain
   already preserves aspect ratio) leaves a consistent white margin —
   matching the card background — around every photo regardless of its
   own backdrop tone, so the cards read as a uniform set. */
.tp-product-item-3 .tp-product-thumb-3 > a img {
  border-radius: 0;
  width: 82% !important;
  height: 82% !important;
  object-fit: contain;
}
/* Category / collection eyebrow label above the product title, to
   match the mockup's small label-above-title treatment. */
.tp-product-tag-3 {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--hom-blue);
  font-weight: 600;
  margin-bottom: 4px;
}
.tp-product-tag-3 a {
  color: inherit;
}
.tp-product-tag-3 a:hover {
  text-decoration: underline;
}

/* =====================================================================
   HOM Technology — Unified section-title redesign (draft theme only)
   The theme renders section titles inconsistently out of the box:
   mixed fonts (Jost vs Roboto), mixed colors, mixed sizes, and a
   hand-drawn squiggle underline that only appears under some titles
   (New Arrivals, Cabinets Racks/VOIP Solutions/Switches) but not
   others (Shop by category, Trending Products, Recently viewed
   products on the product page, Popular Brands on the collection
   page). This gives every section title on the storefront one clean,
   modern, brand-consistent look -- one heading font, the brand navy
   color, a slightly tightened size scale, and a short blue-to-navy
   accent bar in place of the mismatched squiggle. Covers every
   section-title markup family actually in use site-wide:
   tp-section-title / -sm / -3, tps__section-heading (collection page
   "Popular Brands", homepage "Shop by category"), bls__section-heading
   (product page "Recently viewed products").
   ===================================================================== */

/* Retire the old hand-drawn squiggle underlines -- inconsistent
   coverage, and their stock-theme blue clashes with the brand palette. */
.tp-section-title > svg {
  display: none;
}

/* One typographic voice for every section title in the theme. */
.tps__section-heading,
.bls__section-heading,
.tp-section-title,
.tp-section-title-3 {
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: var(--hom-navy);
  letter-spacing: -0.02em;
}
.tp-section-title-sm {
  font-size: 22px;
}
@media only screen and (max-width: 767px) {
  .tps__section-heading,
  .bls__section-heading,
  .tp-section-title,
  .tp-section-title-3 {
    font-size: 26px;
  }
  .tp-section-title-sm {
    font-size: 20px;
  }
}

/* Modern accent bar beneath every title, replacing the squiggle. */
.tps__section-heading::after,
.bls__section-heading::after,
.tp-section-title::after,
.tp-section-title-3::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--hom-blue), var(--hom-navy));
}

/* Smaller accent for the compact column headings (Cabinets Racks /
   VOIP Solutions / Switches) to match their smaller type size. */
.tp-section-title-sm::after {
  width: 32px;
  height: 3px;
  margin-top: 10px;
}

/* Center the accent bar under titles whose wrapper is center-aligned
   (the Trending Products heading centers on mobile; tps__/bls__
   section headers can be centered via their alignment setting) so
   the bar always matches the text alignment already in place. */
.text-center .tp-section-title-3::after,
.tps__section-header.text-center .tps__section-heading::after,
.bls__section-header.text-center .bls__section-heading::after {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px) {
  .text-lg-start .tp-section-title-3::after {
    margin-left: 0;
    margin-right: 0;
  }
}

/* =====================================================================
   HOM Technology — Hero slider redesign (draft theme only)
   sections/slideshow.liquid was rewritten to add a "hom-hero-*" class
   on every element (eyebrow icon+label, headline, description, promo
   badge chip, primary/secondary buttons, network-mesh graphic, product
   glow, arrows, dots) alongside the original tp-slider-*/swiper-*
   classes Swiper's JS init (main.js: new Swiper(".tp-slider-active",
   {navigation:{...".tp-slider-button-prev/next"}, pagination:{el:
   ".tp-slider-dot"}})) and the fade-effect CSS depend on -- those
   original classes are left completely alone so the carousel keeps
   working; every visual property below targets only the new classes.
   ===================================================================== */
.hom-hero-section {
  overflow: hidden;
}
.hom-hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 92px 0 60px;
  background:
    radial-gradient(ellipse 780px 620px at 80% 65%, rgba(37, 71, 201, 0.45), transparent 68%),
    linear-gradient(135deg, #050a24 0%, var(--hom-navy) 55%, #101f5c 100%);
}

/* Network-mesh decoration: nodes + connecting lines behind the product
   photo, replacing the old generic logo-shape watermark images. */
.hom-hero-mesh {
  position: absolute;
  top: 50%;
  /* This element's positioning parent is .hom-hero-slide, which is full-
     bleed (it stretches edge-to-edge to carry the navy background),
     while the actual page content sits in a centered .container capped
     at 1230px. A plain "right: -4%" is a percentage of that unbounded
     full-bleed width, so it was never really anchored to the product
     photo/content column -- it only lined up by coincidence at a
     typical desktop width. Browser page zoom-out enlarges the effective
     CSS viewport (and so the full-bleed slide) without changing the
     content column's capped width at all, so the mesh kept sliding
     further right and away from the product photo the more a visitor
     zoomed out. max() keeps the same responsive "-4%" behavior at and
     below the width where it was tuned (~1920px, i.e. -76.8px) and
     simply holds at that pixel offset beyond it, so the graphic stays
     locked to the product photo regardless of zoom or an unusually wide
     browser window. (Browser-level zoom itself can't be blocked from a
     website -- this keeps the layout from visibly breaking when it happens.) */
  right: max(-4%, -76.8px);
  transform: translateY(-50%);
  width: min(52%, 620px);
  height: auto;
  max-height: 100%;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 991px) {
  .hom-hero-mesh {
    width: 70%;
    opacity: 0.55;
  }
}
@media (max-width: 767px) {
  .hom-hero-mesh {
    display: none;
  }
}

.hom-hero-content {
  position: relative;
  z-index: 2;
}

.hom-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8fa2ff;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hom-hero-eyebrow svg {
  flex: none;
  color: #8fa2ff;
}

.hom-hero-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 46px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
@media (min-width: 1200px) {
  .hom-hero-title {
    font-size: 56px !important;
  }
}
@media (max-width: 575px) {
  .hom-hero-title {
    font-size: 32px !important;
  }
}

.hom-hero-desc {
  color: #c3c9ea !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6;
  max-width: 440px;
  margin-bottom: 26px;
}

.hom-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 26px;
}
.hom-hero-badge-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--hom-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hom-hero-badge-text {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #b9c2e8;
}
.hom-hero-badge-text strong {
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  margin-right: 4px;
}
.hom-hero-badge-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 10px;
  font-style: normal;
}

.hom-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.hom-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.hom-hero-btn:hover {
  transform: translateY(-1px);
}
.hom-hero-btn-primary {
  background: var(--hom-blue);
  color: #ffffff;
  border: 1px solid var(--hom-blue);
}
.hom-hero-btn-primary:hover {
  background: var(--hom-blue-dark);
  border-color: var(--hom-blue-dark);
  color: #ffffff;
}
.hom-hero-btn-outline {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.hom-hero-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.hom-hero-thumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hom-hero-thumb-glow {
  position: absolute;
  width: 78%;
  height: 60%;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(37, 71, 201, 0.55), rgba(37, 71, 201, 0) 70%);
  filter: blur(6px);
  z-index: 0;
}
.hom-hero-thumb-img {
  position: relative;
  z-index: 1;
  max-width: 92%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35));
}
@media (max-width: 991px) {
  .hom-hero-thumb-img {
    max-height: 300px;
  }
}
@media (max-width: 767px) {
  .hom-hero-thumb {
    margin-top: 32px;
  }
  .hom-hero-thumb-img {
    max-height: 220px;
  }
}

/* Prev/next arrows: pinned to the slide's left/right edges instead of
   grouped together, matching a standard full-bleed hero slider. The
   wrapper is taken out of layout (display:contents) so it no longer
   needs its own positioning -- each button positions itself relative
   to .swiper-container (already position:relative via swiper-bundle.css). */
.hom-hero-arrows {
  display: contents;
}
.hom-hero-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 11, 38, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background-color .2s ease, border-color .2s ease;
}
.hom-hero-arrow-btn:hover {
  background: var(--hom-blue);
  border-color: var(--hom-blue);
}
.tp-slider-button-prev.hom-hero-arrow-btn {
  left: 20px;
}
.tp-slider-button-next.hom-hero-arrow-btn {
  right: 20px;
}
@media (max-width: 575px) {
  .hom-hero-arrow-btn {
    width: 36px;
    height: 36px;
  }
  .tp-slider-button-prev.hom-hero-arrow-btn {
    left: 10px;
  }
  .tp-slider-button-next.hom-hero-arrow-btn {
    right: 10px;
  }
}

/* Pagination dots: plain small dots, active one an elongated pill,
   matching the reference. Swiper renders each bullet as a
   .swiper-pagination-bullet span (with a numbered <button> inside,
   from the renderBullet callback in main.js) directly into
   .tp-slider-dot -- style those generated elements, and hide the
   number button since only a plain dot is wanted. */
.hom-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
}
.hom-hero-dot-track {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hom-hero-dot-track .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  margin: 0;
  transition: width .25s ease, background-color .25s ease;
  cursor: pointer;
}
.hom-hero-dot-track .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--hom-blue);
}
.hom-hero-dot-track .swiper-pagination-bullet button {
  display: none;
}

/* =====================================================================
   HOM Technology — Hero slider slide isolation fix
   The theme's Swiper init specifies effect:"fade", but in practice the
   slides were rendering with position:relative and per-slide transform
   offsets while more than one carried opacity:1 at the same time. That
   let the previous (or next) slide's content -- including its own
   "Shop Now" / "Explore Collection" buttons -- stay visible on screen
   stacked underneath the current slide's content, both mid-transition
   and, in some cases, at rest.
   Fix: stop relying on Swiper's own fade/transform positioning for
   visibility and instead stack every slide in the exact same CSS Grid
   cell (so the wrapper's height is always driven by the tallest slide,
   with no manual height needed), neutralize any inline transform
   Swiper applies to individual slides, and drive visibility purely off
   the "swiper-slide-active" class Swiper already maintains for us.
   Exactly one slide is ever opaque/interactive at a time; every other
   slide (prev/next/duplicate/duplicate-active) is fully transparent,
   non-interactive, and removed from the accessibility tree, so no
   content or buttons from another banner can remain visible or be
   clicked. The opacity transition below is what makes the swap a
   smooth crossfade rather than an instant cut.
   ===================================================================== */
.tp-slider-active.swiper-container > .swiper-wrapper,
.tp-slider-active .swiper-wrapper {
  display: grid !important;
  align-items: stretch;
}
.tp-slider-active .swiper-wrapper > .swiper-slide.hom-hero-slide {
  grid-area: 1 / 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  z-index: 1;
}
.tp-slider-active .swiper-wrapper > .swiper-slide.hom-hero-slide.swiper-slide-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 0.6s ease, visibility 0s linear 0s;
  z-index: 2;
}
/* Belt-and-braces: even if some other rule keeps a non-active slide's
   opacity above 0 for a moment, its interactive controls (including
   the Shop Now / Explore Collection buttons) must never be reachable
   by click or keyboard focus. */
.tp-slider-active .swiper-wrapper > .swiper-slide.hom-hero-slide:not(.swiper-slide-active) * {
  pointer-events: none !important;
}
.tp-slider-active .swiper-wrapper > .swiper-slide.hom-hero-slide:not(.swiper-slide-active) a,
.tp-slider-active .swiper-wrapper > .swiper-slide.hom-hero-slide:not(.swiper-slide-active) button {
  visibility: hidden !important;
}

/* =====================================================================
   HOM Technology — Top bar Arabic announcement: readability upgrade
   The announcement text was rendering in Roboto (a Latin-only face) at
   13px via the theme's generic paragraph styles, which out-competed the
   inline 15px hint on its wrapper because the inline style lives on the
   *parent* div and the child <p> the richtext field emits gets its own
   font-size from the base stylesheet. Loading a proper Arabic-optimized
   webface (Cairo, added in theme.liquid via Google Fonts) and re-
   targeting the actual text node fixes both the typeface and the size/
   spacing in one place, and marks the text direction explicitly so
   Arabic script always flows and wraps correctly.
   ===================================================================== */
.tp-header-top .tp-header-welcome,
.tp-header-top .tp-header-welcome p,
.tp-header-top .tp-header-welcome div {
  font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.01em !important;
  word-spacing: 1px !important;
}
.tp-header-top .tp-header-welcome {
  direction: rtl !important;
  text-align: center !important;
}
.tp-header-top .tp-header-welcome p {
  margin: 0 !important;
  direction: rtl !important;
}
@media (max-width: 991px) {
  .tp-header-top .tp-header-welcome,
  .tp-header-top .tp-header-welcome p,
  .tp-header-top .tp-header-welcome div {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
}

/* =====================================================================
   HOM Technology — Header action icons: wishlist & cart circle match
   The account icon renders inside a light circular outline (a theme-
   native span with border-radius: 50%), but the wishlist heart and
   cart bag buttons never got the same wrapper, so they showed as bare
   icons next to a circled account icon -- inconsistent, and not what
   the approved header reference shows (all three action icons share
   one matching circle treatment). Giving them the identical circle
   here brings all three into visual alignment, and nudges each badge
   in slightly so it still sits neatly on the new, larger circle's
   top-right edge instead of floating too far off it.
   ===================================================================== */
.tps-header-wishlist .tp-header-action-btn,
.tp-header-action-cart .tp-header-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.6px solid rgba(1, 15, 28, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease, background-color .2s ease;
}
.tps-header-wishlist .tp-header-action-btn:hover,
.tp-header-action-cart .tp-header-action-btn:hover {
  border-color: var(--hom-navy);
}
.tps-header-wishlist .tp-header-action-badge,
.tp-header-action-cart .tp-header-action-badge {
  top: -4px !important;
  right: -4px !important;
}

/* =====================================================================
   HOM Technology — Fixed top bar / header row spacing fix
   The theme pins the announcement bar (.tp-header-top) to the top of
   the viewport with position: fixed, and reserves room for it by
   hardcoding body's padding-top in an inline <style> block elsewhere
   in the theme (body { padding-top: 38px !important; }, tucked into
   the same snippet as the back-to-top button, near the end of <body>
   -- after this stylesheet in document order). Our earlier Arabic-
   readability pass increased the announcement bar's font-size/line-
   height, which grew its real rendered height to ~52.5px at 992px+
   (and ~49px between 768-991px) without that hardcoded offset keeping
   up, so the header row underneath started higher than the bar's
   actual bottom edge and rendered partly hidden behind it instead of
   sitting cleanly below it with the breathing room the reference
   design shows. A plain "body" selector here has the same specificity
   as the theme's inline rule, so being later in this file isn't
   enough -- the inline block, being later in the DOM, still won. Using
   "html body" raises the specificity so this rule wins regardless of
   source order, while keeping the same !important weight. */
html body {
  padding-top: 53px !important;
}
@media (max-width: 991px) {
  html body {
    padding-top: 50px !important;
  }
}

/* =====================================================================
   HOM Technology — Shop by solution (premium redesign)
   Replaces the earlier product-grid-style "Shop by solution" cards
   (category eyebrow + product photo + price + View) with a
   solution-discovery layout: each card represents an entire solution
   (a real collection) rather than a single product, matching the
   "Business Need -> Solution -> Explore -> Relevant Products" flow.
   Markup: sections/products-list.liquid. Navy stays dominant; the
   brand blue (--hom-blue, reused from the site's existing palette)
   is used sparingly for hover accents, the CTA arrow, and
   illustration highlight details only.
   ===================================================================== */
:root {
  --hom-muted: #6b7280;
}

.hom-solutions-area {
  overflow: hidden;
}

/* ---------- Header ---------- */
.hom-solutions-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
.hom-solutions-heading-wrap {
  max-width: 640px;
}
.hom-solutions-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hom-blue);
  margin-bottom: 8px;
}
/* HOM Technology — Top bar message icon: the icon's own SVG ships with
   fixed width/height attributes (24x24) larger than the 18x18 box that
   wraps it, so without this it overflows the box and encroaches on the
   gap next to the Arabic message text, making the two look like they're
   touching. Forcing the svg to fill its box exactly removes the overflow. */
.hom-topbar-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}
.hom-topbar-icon span {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Shared section eyebrow style, matching .hom-solutions-eyebrow exactly, reused
   above "Shop by category", "Trending Products", and "New Arrivals" headings. */
.hom-section-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hom-blue);
  margin-bottom: 8px;
}
.hom-solutions-title {
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: var(--hom-navy);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.hom-solutions-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--hom-muted);
  margin: 0;
  max-width: 46ch;
}
@media (max-width: 767px) {
  .hom-solutions-title {
    font-size: 26px;
  }
  .hom-solutions-subtitle {
    font-size: 15px;
  }
}

.hom-solutions-viewall {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hom-navy);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hom-line);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hom-solutions-viewall:hover {
  color: var(--hom-blue);
  border-color: var(--hom-blue);
}
.hom-solutions-viewall-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hom-solutions-viewall:hover .hom-solutions-viewall-arrow {
    transform: translateX(3px);
  }
}

/* ---------- Grid: editorial 2-up (pairs with the 4th "need help" card
   to form a balanced 2x2 on tablet/desktop) ---------- */
.hom-solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .hom-solutions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

/* ---------- Solution card ---------- */
.hom-solutions-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid var(--hom-line);
  border-radius: 16px;
  padding: 28px 26px 26px;
  box-shadow: 0 1px 2px rgba(10, 20, 66, 0.05);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
@media (hover: hover) {
  .hom-solutions-card:hover {
    border-color: rgba(37, 71, 201, 0.25);
    box-shadow: 0 18px 40px rgba(10, 20, 66, 0.14);
    background-color: #fafbff;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hom-solutions-card:hover {
    transform: translateY(-5px);
  }
}
.hom-solutions-card:focus-visible {
  outline: 2px solid var(--hom-blue);
  outline-offset: 3px;
}

/* Illustration area: light backdrop with a faint dot-grid pattern so the
   large SVG illustration doesn't sit in a big empty white rectangle. */
.hom-solutions-card-illustration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  border-radius: 12px;
  margin-bottom: 22px;
  overflow: hidden;
  background-color: #eef1f9;
  background-image:
    radial-gradient(circle, rgba(10, 20, 66, 0.09) 1px, transparent 1.6px),
    linear-gradient(160deg, #f4f6fb 0%, #e9edf8 100%);
  background-size: 18px 18px, 100% 100%;
  background-position: -2px -2px, 0 0;
}
.hom-solutions-card-illustration svg {
  position: relative;
  width: 76%;
  max-width: 220px;
  height: auto;
  display: block;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hom-solutions-card:hover .hom-solutions-card-illustration svg {
    transform: scale(1.045);
    transition: transform 0.3s ease;
  }
}
.hom-solutions-card-illustration svg {
  transition: transform 0.3s ease;
}

.hom-solutions-card-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a90a3;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}
@media (hover: hover) {
  .hom-solutions-card:hover .hom-solutions-card-eyebrow {
    color: var(--hom-blue);
  }
}

.hom-solutions-card-title {
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  color: var(--hom-navy);
  margin: 0 0 10px;
}

.hom-solutions-card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #55596b;
  margin: 0 0 16px;
}

.hom-solutions-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.hom-solutions-card-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hom-navy);
  background: #f3f4fa;
  border: 1px solid var(--hom-line);
  border-radius: 999px;
  padding: 4px 12px;
}

.hom-solutions-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--hom-line);
}
.hom-solutions-card-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--hom-muted);
}
.hom-solutions-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hom-navy);
  transition: color 0.2s ease;
}
@media (hover: hover) {
  .hom-solutions-card:hover .hom-solutions-card-cta {
    color: var(--hom-blue);
  }
}
.hom-solutions-card-cta-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hom-solutions-card:hover .hom-solutions-card-cta-arrow {
    transform: translateX(4px);
  }
}

/* ---------- Solution-specific illustration micro-animations
   (desktop hover only, off entirely under prefers-reduced-motion) ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hom-solutions-card:hover .hom-illus-accent {
    animation: hom-illus-pulse 1.6s ease-in-out infinite;
  }
  .hom-wave-bar {
    transform-box: fill-box;
    transform-origin: center bottom;
  }
  .hom-solutions-card:hover .hom-wave-bar {
    animation: hom-illus-wave 1.3s ease-in-out infinite;
  }
  .hom-solutions-card:hover .hom-wave-bar:nth-of-type(2) {
    animation-delay: 0.07s;
  }
  .hom-solutions-card:hover .hom-wave-bar:nth-of-type(3) {
    animation-delay: 0.14s;
  }
  .hom-solutions-card:hover .hom-wave-bar:nth-of-type(4) {
    animation-delay: 0.21s;
  }
  .hom-solutions-card:hover .hom-wave-bar:nth-of-type(5) {
    animation-delay: 0.28s;
  }
  .hom-solutions-card:hover .hom-wave-bar:nth-of-type(6) {
    animation-delay: 0.35s;
  }
}
@keyframes hom-illus-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes hom-illus-wave {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.32);
  }
}

/* ---------- "Need some help?" conversion card ---------- */
.hom-solutions-card--cta {
  background: linear-gradient(155deg, var(--hom-navy) 0%, #101c56 100%);
  border-color: transparent;
  color: #ffffff;
  justify-content: center;
}
.hom-solutions-card--cta .hom-solutions-card-eyebrow {
  color: #8fa2ff;
}
.hom-solutions-card--cta .hom-solutions-cta-title {
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 10px;
}
.hom-solutions-card--cta .hom-solutions-cta-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #c3c9ea;
  margin: 0 0 22px;
  max-width: 40ch;
}
.hom-solutions-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  color: var(--hom-navy);
  background: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hom-solutions-cta-btn:hover {
  background: var(--hom-blue);
  color: #ffffff;
}
.hom-solutions-cta-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.hom-solutions-cta-btn .hom-solutions-card-cta-arrow {
  transition: transform 0.25s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hom-solutions-cta-btn:hover .hom-solutions-card-cta-arrow {
    transform: translateX(4px);
  }
}

/* ---------- "Find my solution" dialog ---------- */
.hom-solutions-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(440px, calc(100vw - 48px));
  box-shadow: 0 24px 60px rgba(10, 20, 66, 0.28);
}
.hom-solutions-dialog::backdrop {
  background: rgba(10, 20, 66, 0.55);
}
.hom-solutions-dialog-inner {
  position: relative;
  padding: 32px 28px 28px;
}
.hom-solutions-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #f3f4fa;
  color: var(--hom-navy);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hom-solutions-dialog-close:hover {
  background: var(--hom-navy);
  color: #ffffff;
}
.hom-solutions-dialog-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--hom-blue);
  margin-bottom: 8px;
}
.hom-solutions-dialog-title {
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--hom-navy);
  margin: 0 0 8px;
}
.hom-solutions-dialog-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--hom-muted);
  margin: 0 0 20px;
}
.hom-solutions-dialog-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hom-solutions-dialog-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--hom-line);
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hom-navy);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.hom-solutions-dialog-option:hover,
.hom-solutions-dialog-option:focus-visible {
  border-color: var(--hom-blue);
  background: #eef1fb;
  color: var(--hom-blue-dark);
}
.hom-solutions-dialog-option-arrow {
  flex: none;
  transition: transform 0.2s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hom-solutions-dialog-option:hover .hom-solutions-dialog-option-arrow {
    transform: translateX(3px);
  }
}

/* ---------- Reduced motion: kill transforms/animations, keep instant
   color/border feedback so hover and focus states stay informative. ---------- */
@media (prefers-reduced-motion: reduce) {
  .hom-solutions-card,
  .hom-solutions-card-illustration svg,
  .hom-solutions-card-cta-arrow,
  .hom-solutions-viewall-arrow,
  .hom-solutions-cta-btn,
  .hom-solutions-dialog-option-arrow,
  .hom-illus-accent,
  .hom-wave-bar {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* =====================================================================
   HOM Technology — Limited Time Offer (draft theme only)
   Redesign v2: ONE unified premium dark hero banner rather than a pale
   card with a separate blue box. The whole card now uses the same navy
   hero gradient as other dark sections on the site, with a subtle
   dot-grid texture and glow tying the promo (left) and product
   showcase (right) together as one composition. Reuses the site's
   existing navy/blue palette (--hom-navy, --hom-navy-2, --hom-blue,
   --hom-blue-dark, --hom-line) and existing button/pill/eyebrow
   conventions rather than introducing new colors. All copy, pricing,
   product data, and CTAs continue to come from the section settings /
   live collection data — nothing here is hardcoded content.

   Product imagery: the real catalog photos have an opaque white studio
   background baked into the pixels (not a transparent cutout), so no
   CSS trick can erase it without either distorting product color
   (blend modes) or breaking on non-white pixels. Instead each slide
   gets a deliberate, intentionally-visible "photography stage" — a
   soft off-white/blue-gray rounded card behind the image — so the
   product reads as a lit product shot sitting inside the dark
   carousel shell, rather than a stray white rectangle. This also
   solves contrast for the black rack cabinets, which had little
   separation against the previous all-navy backdrop.
   ===================================================================== */
.hom-offer-section {
  background: transparent;
}

.hom-offer-card {
  position: relative;
  width: 92%;
  max-width: 1360px;
  margin: 0 auto;
  background: linear-gradient(135deg, #050a24 0%, var(--hom-navy) 55%, #101f5c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(6, 12, 46, 0.28);
  overflow: hidden;
}
.hom-offer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7c93ff, transparent);
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}
.hom-offer-card-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 60% at 82% 30%, rgba(64, 96, 230, 0.28) 0%, rgba(64, 96, 230, 0) 70%),
    radial-gradient(38% 50% at 6% 92%, rgba(37, 71, 201, 0.22) 0%, rgba(37, 71, 201, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hom-offer-card-texture {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(75% 75% at 50% 50%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 0%, transparent 100%);
}

.hom-offer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
  grid-template-areas: "left visual";
  align-items: stretch;
  column-gap: 56px;
  padding: 40px 48px;
}
.hom-offer-left { grid-area: left; }
.hom-offer-visual { grid-area: visual; }

.hom-offer-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  min-width: 0;
}

@media (max-width: 1199px) {
  .hom-offer-grid {
    column-gap: 36px;
    padding: 36px 36px;
  }
}
@media (max-width: 991px) {
  .hom-offer-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "visual";
    row-gap: 30px;
    padding: 32px 26px;
  }
  .hom-offer-left {
    gap: 18px;
  }
}
@media (max-width: 575px) {
  .hom-offer-grid {
    padding: 26px 16px;
    row-gap: 24px;
  }
}

/* ---------- Offer info: eyebrow, heading, description, benefits ---------- */
.hom-offer-eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #9fb1ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.hom-offer-eyebrow-chip svg {
  flex: none;
}

.hom-offer-heading {
  font-family: var(--tp-ff-heading);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.hom-offer-heading-line1 {
  display: block;
  color: #ffffff;
}
.hom-offer-heading-line2 {
  display: block;
  background: linear-gradient(90deg, #8fa4ff 0%, #4f70e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #8fa4ff;
}
@media (max-width: 767px) {
  .hom-offer-heading {
    font-size: 29px;
  }
}

.hom-offer-desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(226, 231, 250, 0.68);
  max-width: 42ch;
  margin: 0;
}

.hom-offer-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}
.hom-offer-benefit {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hom-offer-benefit-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(124, 147, 255, 0.16);
  color: #9fb1ff;
}
.hom-offer-benefit-icon svg {
  width: 12px;
  height: 12px;
}
.hom-offer-benefit-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.hom-offer-benefit-line1 {
  font-size: 10px;
  font-weight: 500;
  color: rgba(226, 231, 250, 0.5);
}
.hom-offer-benefit-line2 {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

/* ---------- Countdown: label + digits, persisted client-side so the
   silent 12-hour reset never restarts visibly on a page refresh
   (see the section's own <script> tag for the storage logic). Sized
   as one of the primary visual elements of the left column, not a
   small secondary detail. ---------- */
.hom-offer-countdown-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(226, 231, 250, 0.75);
  margin-bottom: 12px;
}
.hom-offer-countdown-heading svg {
  flex: none;
  color: #7c93ff;
}
.hom-offer-countdown {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  max-width: 100%;
}
.hom-offer-countdown-unit {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 13px 10px 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 147, 255, 0.35);
  border-radius: 14px;
  box-sizing: border-box;
  box-shadow: 0 10px 22px rgba(6, 12, 46, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hom-offer-countdown-value {
  font-family: var(--tp-ff-heading);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.hom-offer-countdown-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226, 231, 250, 0.45);
  margin-top: 6px;
}
.hom-offer-countdown-sep {
  flex: none;
  font-size: 26px;
  font-weight: 700;
  color: rgba(226, 231, 250, 0.28);
}
@media (max-width: 1199px) {
  .hom-offer-countdown-unit {
    min-width: 72px;
    padding: 11px 8px 9px;
  }
  .hom-offer-countdown-value {
    font-size: 30px;
  }
}
@media (max-width: 420px) {
  .hom-offer-countdown {
    gap: 8px;
  }
  .hom-offer-countdown-unit {
    min-width: 60px;
    padding: 9px 6px 8px;
  }
  .hom-offer-countdown-value {
    font-size: 24px;
  }
  .hom-offer-countdown-sep {
    font-size: 20px;
  }
}

/* ---------- Buttons: primary keeps the site's real button convention;
   outline is now tuned for the dark banner background. ---------- */
.hom-offer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 2px;
}
.hom-offer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 26px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hom-offer-btn-primary {
  background: linear-gradient(135deg, #3a5be0, var(--hom-blue-dark));
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(37, 71, 201, 0.4);
}
.hom-offer-btn-primary:hover {
  background: linear-gradient(135deg, #4a6bef, var(--hom-blue));
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(37, 71, 201, 0.48);
}
.hom-offer-btn-primary .hom-offer-btn-label {
  color: inherit;
}
.hom-offer-btn-primary .hom-offer-btn-arrow {
  flex: none;
  transition: transform 0.2s ease;
}
.hom-offer-btn-primary:hover .hom-offer-btn-arrow {
  transform: translateX(3px);
}
.hom-offer-btn-outline {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff !important;
}
.hom-offer-btn-outline:hover {
  border-color: #7c93ff;
  color: #ffffff !important;
  background: rgba(124, 147, 255, 0.1);
}
.hom-offer-btn-outline .hom-offer-btn-arrow {
  flex: none;
  transition: transform 0.2s ease;
}
.hom-offer-btn-outline:hover .hom-offer-btn-arrow {
  transform: translateX(3px);
}

/* ---------- Product showcase: the visual anchor of the section. Pulls
   live products (image, name, tags, description excerpt, price) from
   the configured collection -- see sections/countdown-offer.liquid.
   The Swiper instance is initialized in that section's own <script>
   tag, reusing the same Swiper library the homepage hero already
   loads. No discount math happens anywhere here: the price shown is
   always the product's real price, and "Up to X% Off" is a static
   promotional badge only. ---------- */
.hom-offer-visual {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.hom-offer-visual-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(37, 71, 201, 0.18) 0%, rgba(37, 71, 201, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hom-offer-visual-mesh {
  position: absolute;
  inset: -22px;
  width: calc(100% + 44px);
  height: calc(100% + 44px);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 991px) {
  .hom-offer-visual {
    max-width: 640px;
    margin: 0 auto;
  }
}
@media (max-width: 575px) {
  .hom-offer-visual {
    max-width: 100%;
  }
}

.hom-offer-showcase {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  background: linear-gradient(155deg, var(--hom-navy) 0%, var(--hom-navy-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  color: #ffffff;
  padding: 72px 30px 56px;
  box-shadow: 0 24px 48px rgba(5, 10, 36, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  min-height: 480px;
  display: flex;
}
.hom-offer-showcase-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 45% at 50% 8%, rgba(124, 147, 255, 0.22) 0%, rgba(124, 147, 255, 0) 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 48px);
}
.hom-offer-promo-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(124, 147, 255, 0.14);
  border: 1px solid rgba(124, 147, 255, 0.4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #c3ceff;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 20px rgba(37, 71, 201, 0.25);
}
.hom-offer-promo-badge strong {
  font-family: var(--tp-ff-heading);
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.hom-offer-swiper {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.hom-offer-slide {
  height: 100%;
}
.hom-offer-slide-link {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 36px;
  text-decoration: none !important;
}

/* ---------- Product stage: an intentionally-visible, softly lit
   "photography backdrop" behind every product image. Real catalog
   photos have an opaque white background baked into the pixels, so
   instead of fighting that with a blend mode (which would also mute
   the black cabinets), the stage is built to look deliberate — a
   rounded light card floating inside the dark showcase shell — with
   its own soft shadow and glow so it reads as staged product
   photography rather than a leftover white box. ---------- */
.hom-offer-slide-media {
  position: relative;
  flex: 0 0 56%;
  max-width: 56%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hom-offer-slide-media::before {
  content: "";
  position: absolute;
  inset: -6%;
  background: radial-gradient(60% 60% at 50% 55%, rgba(124, 147, 255, 0.3) 0%, rgba(124, 147, 255, 0) 72%);
  pointer-events: none;
  z-index: 0;
}
.hom-offer-slide-stage {
  position: absolute;
  inset: 4% 6%;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0 26px 46px rgba(4, 9, 34, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 1;
}
.hom-offer-slide-img {
  position: relative;
  z-index: 2;
  max-width: 74%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 22px rgba(5, 10, 36, 0.25));
}
.hom-offer-slide-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 44%;
  min-width: 0;
  text-align: left;
}
.hom-offer-slide-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--tp-ff-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 12px;
}
.hom-offer-slide-spec {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(227, 231, 247, 0.62);
  margin-bottom: 16px;
  max-width: 42ch;
}
.hom-offer-slide-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
}
.hom-offer-slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: rgba(227, 231, 247, 0.85);
}
.hom-offer-slide-tag svg {
  flex: none;
  color: #7c93ff;
}
.hom-offer-slide-price {
  font-family: var(--tp-ff-heading);
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
@media (max-width: 1199px) {
  .hom-offer-slide-link {
    gap: 24px;
  }
  .hom-offer-slide-title {
    font-size: 20px;
  }
  .hom-offer-slide-price {
    font-size: 25px;
  }
}
@media (max-width: 991px) {
  .hom-offer-showcase {
    min-height: 0;
    padding: 64px 24px 52px;
  }
  .hom-offer-slide-link {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .hom-offer-slide-media {
    flex: 0 0 300px;
    max-width: 100%;
    width: 100%;
    height: 300px;
    margin-bottom: 22px;
  }
  .hom-offer-slide-body {
    align-items: center;
    text-align: center;
    flex: none;
    width: 100%;
    max-width: 440px;
  }
  .hom-offer-slide-tags {
    align-items: center;
  }
  .hom-offer-slide-title {
    -webkit-line-clamp: 2;
  }
  .hom-offer-slide-spec {
    -webkit-line-clamp: 2;
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 575px) {
  .hom-offer-showcase {
    padding: 58px 18px 48px;
  }
  .hom-offer-slide-media {
    height: 230px;
    margin-bottom: 18px;
  }
  .hom-offer-slide-stage {
    inset: 2% 4%;
    border-radius: 20px;
  }
  .hom-offer-slide-title {
    font-size: 17px;
  }
  .hom-offer-slide-price {
    font-size: 21px;
  }
}

/* ---------- Showcase controls: prev/next sit on the outer edges of the
   panel (vertically centered, outside the light stage) and pagination
   sits centered along the bottom — positioned independently so neither
   ever overlaps the product image or slide text. ---------- */
.hom-offer-showcase-controls {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hom-offer-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 20, 66, 0.55);
  color: #ffffff;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(3px);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hom-offer-arrow-prev {
  left: 14px;
}
.hom-offer-arrow-next {
  right: 14px;
}
.hom-offer-arrow-btn:hover {
  background: var(--hom-blue);
  border-color: var(--hom-blue);
}
.hom-offer-arrow-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.hom-offer-swiper-pagination {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: auto;
}
.hom-offer-swiper-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 1;
  margin: 0 !important;
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.hom-offer-swiper-pagination .swiper-pagination-bullet-active {
  width: 18px;
  background: var(--hom-blue);
}
@media (max-width: 575px) {
  .hom-offer-arrow-btn {
    width: 36px;
    height: 36px;
  }
  .hom-offer-arrow-prev {
    left: 8px;
  }
  .hom-offer-arrow-next {
    right: 8px;
  }
}

/* Reduced motion: keep instant hover feedback, drop the lift/slide.
   Swiper's own transition speed is set to 0 via JS for these visitors. */
@media (prefers-reduced-motion: reduce) {
  .hom-offer-btn,
  .hom-offer-btn span,
  .hom-offer-btn-arrow,
  .hom-offer-arrow-btn {
    transition: none !important;
    transform: none !important;
  }
  .hom-offer-swiper-pagination .swiper-pagination-bullet {
    transition: none !important;
  }
}

/* ================================================================
   HOM Technology — Footer redesign (premium navy/blue, 5-column)
   Replaces the earlier stock-footer color patch. All footer visuals
   below are driven by the .hft-* classes rendered in
   sections/footer-1.liquid.
   ================================================================ */

.hft-area {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #050a18 0%, #0a1442 42%, #123a86 100%) !important;
  color: #eaf2ff;
  font-family: 'IBM Plex Sans', 'Cairo', sans-serif;
  isolation: isolate;
}

/* ---------- decorative layer ---------- */
.hft-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hft-glow {
  position: absolute;
  border-radius: 50%;
}

.hft-glow-a {
  left: -18%;
  bottom: -30%;
  width: 640px;
  height: 640px;
  max-width: 60vw;
  max-height: 60vw;
  background: radial-gradient(circle, rgba(47, 107, 255, 0.30) 0%, rgba(47, 107, 255, 0) 68%);
}

.hft-glow-b {
  right: -12%;
  top: -25%;
  width: 720px;
  height: 720px;
  max-width: 60vw;
  max-height: 60vw;
  background: radial-gradient(circle, rgba(79, 216, 255, 0.16) 0%, rgba(79, 216, 255, 0) 70%);
}

.hft-globe-dotgrid {
  position: absolute;
  top: -190px;
  right: -170px;
  width: 660px;
  height: 660px;
  max-width: 62vw;
  max-height: 62vw;
  border-radius: 50%;
  background-image: radial-gradient(rgba(140, 196, 255, 0.5) 1.3px, transparent 1.6px);
  background-size: 21px 21px;
  -webkit-mask-image: radial-gradient(circle at 48% 48%, #000 0%, #000 52%, transparent 74%);
  mask-image: radial-gradient(circle at 48% 48%, #000 0%, #000 52%, transparent 74%);
  opacity: 0.55;
}

.hft-globe-rings {
  position: absolute;
  top: -190px;
  right: -170px;
  width: 660px;
  height: 660px;
  max-width: 62vw;
  max-height: 62vw;
  color: #8cc4ff;
  opacity: 0.6;
}

.hft-waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 160px;
  color: #8cc4ff;
}

.hft-sq {
  position: absolute;
  border: 1px solid rgba(111, 216, 255, 0.16);
  border-radius: 3px;
}

.hft-sq-1 { left: -46px; top: 26px; width: 100px; height: 100px; transform: rotate(8deg); }
.hft-sq-2 { left: -66px; bottom: 30px; width: 150px; height: 150px; transform: rotate(-6deg); }
.hft-sq-3 { right: -50px; top: 50px; width: 120px; height: 120px; transform: rotate(-9deg); }
.hft-sq-4 { right: -78px; bottom: 10px; width: 170px; height: 170px; transform: rotate(7deg); }

/* ---------- top / columns ---------- */
.hft-top {
  position: relative;
  z-index: 2;
  padding-top: 34px;
  padding-bottom: 18px;
}

.hft-row {
  row-gap: 20px;
}

.hft-col {
  padding-top: 4px;
}

.hft-col-about_us + .hft-col::before,
.hft-col-custom_html.hft-divider-before::before {
  content: none;
}

/* thin vertical divider before the last (Talk To Us) column on desktop */
.hft-row > .hft-col:last-child {
  position: relative;
}

@media (min-width: 1200px) {
  .hft-row > .hft-col:last-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(234, 242, 255, 0.14);
  }
}

/* ---------- brand column ---------- */
.hft-brand {
  max-width: 360px;
}

.hft-logo-wrap {
  display: inline-block;
  margin-bottom: 12px;
}

.hft-logo-img {
  display: block;
  height: 60px;
  width: auto;
  max-width: 100%;
}

.hft-headline {
  font-family: 'Space Grotesk', 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.15;
  margin: 0 0 8px 0;
}

.hft-headline-white { color: #f4f8ff; }
.hft-headline-blue { color: #0f1ef8; }

.hft-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(234, 242, 255, 0.62);
  margin: 0 0 12px 0;
}

.hft-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.hft-social-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  border: 1px solid rgba(234, 242, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  color: #eaf2ff;
  line-height: 0;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.hft-social-icon:hover {
  color: #0a1442;
  background: #6fe1ff;
  border-color: #6fe1ff;
}

.hft-tagline-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hft-tagline-accent {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4fd8ff, #2f6bff);
  flex: 0 0 auto;
}

.hft-tagline-text {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(234, 242, 255, 0.5);
  font-weight: 500;
}

/* ---------- link columns (Quick Links / Information / Our Solutions) ---------- */
.hft-heading {
  font-family: 'Space Grotesk', 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #f4f8ff;
  margin: 0 0 6px 0;
}

.hft-underline {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4fd8ff, #2f6bff);
  margin-bottom: 8px;
}

.hft-links {
  display: flex;
  flex-direction: column;
}

.hft-link-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
  color: rgba(234, 242, 255, 0.72);
  border-bottom: 1px solid transparent;
}

.hft-link-row:hover {
  color: #eaf2ff;
}

.hft-chev {
  color: rgba(234, 242, 255, 0.38);
  flex: 0 0 auto;
  transition: color 0.15s, transform 0.15s;
}

.hft-link-row:hover .hft-chev {
  color: #6fe1ff;
  transform: translateX(2px);
}

/* ---------- Talk To Us: contact rows ---------- */
.hft-contact {
  margin-bottom: 12px;
}

.hft-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  color: inherit;
  text-decoration: none;
}

.hft-contact-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(47, 107, 255, 0.16);
  border: 1px solid rgba(79, 216, 255, 0.35);
  box-shadow: 0 0 16px rgba(79, 216, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fd6ff;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.hft-contact-row:hover .hft-contact-icon {
  background: rgba(47, 107, 255, 0.28);
  border-color: rgba(79, 216, 255, 0.6);
  box-shadow: 0 0 20px rgba(79, 216, 255, 0.4);
}

.hft-contact-body {
  padding-top: 2px;
}

.hft-contact-body-inline {
  padding-top: 11px;
}

.hft-contact-label {
  display: block;
  font-size: 12px;
  color: rgba(234, 242, 255, 0.55);
  margin-bottom: 3px;
}

.hft-contact-value {
  font-family: 'Space Grotesk', 'Cairo', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #f4f8ff;
}

.hft-contact-value {
  color: rgba(234, 242, 255, 0.82);
  font-family: 'IBM Plex Sans', 'Cairo', sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  display: inline-block;
  max-width: 260px;
}

.hft-contact-row:first-child .hft-contact-value {
  font-family: 'Space Grotesk', 'Cairo', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #f4f8ff;
}

.hft-contact-row:hover .hft-contact-value {
  color: #6fe1ff;
}

/* ---------- newsletter card ---------- */
.hft-newsletter-card {
  border-radius: 12px;
  border: 1px solid rgba(79, 216, 255, 0.32);
  background: linear-gradient(135deg, rgba(47, 107, 255, 0.16), rgba(10, 20, 66, 0.35));
  padding: 12px 14px;
  box-shadow: 0 0 24px rgba(47, 107, 255, 0.14);
  max-width: 300px;
}

.hft-newsletter-desc {
  font-size: 12px;
  color: rgba(234, 242, 255, 0.6);
  line-height: 1.4;
  margin-bottom: 8px;
}

.hft-newsletter-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hft-newsletter-input {
  flex: 1;
  height: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(234, 242, 255, 0.18);
  padding: 0 14px;
  font-size: 12.5px;
  color: #eaf2ff;
  min-width: 0;
}

.hft-newsletter-input::placeholder {
  color: rgba(234, 242, 255, 0.42);
}

.hft-newsletter-input:focus {
  outline: none;
  border-color: rgba(79, 216, 255, 0.6);
}

.hft-newsletter-btn {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2f6bff, #4fd8ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(79, 216, 255, 0.5);
  cursor: pointer;
  transition: transform 0.15s;
}

.hft-newsletter-btn:hover {
  transform: translateX(2px);
}

/* ---------- bottom bar ---------- */
.hft-bottom {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(79, 216, 255, 0.22);
  padding: 10px 0;
}

.hft-copyright,
.hft-copyright p {
  font-size: 13px;
  color: rgba(234, 242, 255, 0.55);
  margin: 0;
}

.hft-copyright a {
  color: rgba(234, 242, 255, 0.75);
  text-decoration: underline;
}

.hft-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hft-bottom-accent {
  position: relative;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4fd8ff, #2f6bff);
  flex: 0 0 auto;
  margin-left: 8px;
}

.hft-bottom-accent::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6fe1ff;
  box-shadow: 0 0 6px 1px rgba(111, 216, 255, 0.7);
}

.hft-bottom-tagline {
  font-size: 13px;
  color: rgba(234, 242, 255, 0.6);
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .hft-globe-dotgrid,
  .hft-globe-rings {
    top: -140px;
    right: -140px;
  }
}

@media (max-width: 991px) {
  .hft-top { padding-top: 26px; }
  .hft-brand { max-width: 100%; }
  .hft-newsletter-card { max-width: 100%; }
  .hft-row > .hft-col:last-child::before { content: none; }
}

@media (max-width: 767px) {
  .hft-bottom .row > div {
    text-align: left !important;
  }
  .hft-bottom-right {
    margin-top: 10px;
    justify-content: flex-start;
  }
  .hft-glow-a, .hft-glow-b { display: none; }
  .hft-decor { display: none; }
}


/* ==================================================================
   HOM Technology — Collection/Shop page redesign (draft theme only)
   Reuses --hom-navy / --hom-blue / --hom-line / --hom-muted tokens
   defined above under :root. Scope: shop header/breadcrumb, search
   bar, filter sidebar (chips, accordions, price, category, brand),
   toolbar/sort, product grid spacing, mobile filter drawer,
   pagination. Global — applies to every collection, not just
   Switches.
================================================================== */

/* ---- Shop header / breadcrumb -------------------------------- */
.tps_page_section_heading_collection .breadcrumb__area {
  padding-top: 48px;
  padding-bottom: 28px;
}

.tps_page_section_heading_collection .breadcrumb__title {
  color: var(--hom-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tps_page_section_heading_collection .breadcrumb__list span,
.tps_page_section_heading_collection .breadcrumb__list a {
  color: var(--hom-muted);
  font-size: 14px;
}

.tps_page_section_heading_collection .breadcrumb__list a:hover {
  color: var(--hom-blue);
}

/* ---- Wide product search bar ---------------------------------- */
.hom-shop-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 32px;
  padding: 4px 6px 4px 18px;
  background: #ffffff;
  border: 1px solid var(--hom-line);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(10, 20, 66, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hom-shop-search:focus-within {
  border-color: var(--hom-blue);
  box-shadow: 0 2px 14px rgba(37, 71, 201, 0.12);
}

.hom-shop-search__icon {
  flex: 0 0 auto;
  color: var(--hom-muted);
}

.hom-shop-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--hom-navy);
}

.hom-shop-search__input::placeholder {
  color: #9aa2b1;
}

.hom-shop-search__btn {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--hom-navy);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hom-shop-search__btn:hover {
  background: var(--hom-blue);
}

@media (max-width: 576px) {
  .hom-shop-search {
    padding-left: 14px;
  }
  .hom-shop-search__btn {
    padding: 0 16px;
    font-size: 12px;
  }
}

/* ---- Sidebar shell ---------------------------------------------- */
.hom-shop-sidebar {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.hom-shop-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.hom-shop-sidebar__head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hom-shop-sidebar__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--hom-navy);
}

.hom-shop-sidebar__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--hom-navy);
}

.hom-shop-sidebar__head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.hom-shop-sidebar__subtitle {
  margin: 0 0 16px;
  color: var(--hom-muted);
  font-size: 12.5px;
}

.hom-shop-sidebar__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hom-line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--hom-navy);
  cursor: pointer;
}

/* ---- Active filter chips (solid pills) ---------------------------- */
.hom-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.hom-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--hom-navy);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.hom-chip:hover {
  background: var(--hom-blue);
}

.hom-chip__x {
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
}

.hom-clear-all {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--hom-blue);
  text-decoration: none;
  white-space: nowrap;
}

.hom-clear-all:hover {
  color: var(--hom-blue-dark);
  text-decoration: underline;
}

/* ---- Filter cards --------------------------------------------------
   Each filter (Category, Brands, Availability, Price Range, and any
   other facet Shopify exposes for the current collection) renders as
   its own bordered, rounded card -- fully generic, not tied to any
   specific filter name. --------------------------------------------- */
.hom-filter-card {
  background: #ffffff;
  border: 1px solid var(--hom-line);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}

.hom-filter-card:last-of-type {
  margin-bottom: 0;
}

.hom-filter-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.hom-filter-card__head::-webkit-details-marker {
  display: none;
}

.hom-filter-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eef2ff;
  color: var(--hom-navy);
  flex: 0 0 auto;
}

.hom-filter-card__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hom-navy);
}

.hom-filter-card__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 1.6px solid var(--hom-muted);
  border-bottom: 1.6px solid var(--hom-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.hom-filter-card[open] > .hom-filter-card__head .hom-filter-card__chevron {
  transform: rotate(-135deg);
}

.hom-filter-card__body {
  padding: 0 16px 16px;
}

/* Search box inside a filter card (shown for any filter with many values) */
.hom-filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid var(--hom-line);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--hom-muted);
}

.hom-filter-search input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--hom-navy);
}

.hom-filter-search input::placeholder {
  color: #9aa2b1;
}

/* ---- Filter checkbox lists ---------------------------------------- */
.hom-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}

.hom-filter-item {
  margin-bottom: 2px;
}

.hom-filter-item.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.hom-filter-item .tps__link-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-radius: 8px;
  color: #344054;
  font-size: 13.5px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hom-filter-item .tps__link-filter:hover {
  background: #f5f8ff;
  color: var(--hom-blue-dark);
}

.hom-filter-item.current-filter .tps__link-filter {
  color: var(--hom-navy);
  font-weight: 700;
}

.hom-check {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1.5px solid #cbd2e0;
  border-radius: 4px;
  background: #ffffff;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hom-check.is-checked,
.current-filter .hom-check {
  border-color: var(--hom-navy);
  background: var(--hom-navy);
}

.hom-check.is-checked::after,
.current-filter .hom-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 1.6px solid #ffffff;
  border-bottom: 1.6px solid #ffffff;
  transform: rotate(45deg);
}

.hom-filter-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hom-filter-item__count {
  flex: 0 0 auto;
  color: var(--hom-muted);
  font-size: 12px;
}

/* "Show more" */
.hom-show-more {
  margin-top: 6px;
}

.hom-show-more > summary {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hom-blue);
}

.hom-show-more > summary::-webkit-details-marker {
  display: none;
}

.hom-show-more > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--hom-blue);
  border-bottom: 1.5px solid var(--hom-blue);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.hom-show-more[open] > summary::after {
  transform: rotate(-135deg);
}

.hom-show-more > summary:hover {
  text-decoration: underline;
}

.hom-show-more[open] > summary {
  margin-bottom: 8px;
}

/* Price filter: range endpoint labels + number fields (the slider
   track/thumb/progress themselves ship from sidebar-category-tree.css,
   which loads after this file and owns that component). */
.ht-price-labels {
  margin-top: 2px;
}

.hom-price-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.hom-price-field {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--hom-line);
  border-radius: 8px;
  background: #f8fafc;
}

.hom-price-field span {
  color: var(--hom-muted);
  font-size: 13px;
}

.hom-price-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--hom-navy);
  -moz-appearance: textfield;
}

.hom-price-field input::-webkit-outer-spin-button,
.hom-price-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hom-price-sep {
  color: var(--hom-muted);
}

/* ---- Apply Filters button ------------------------------------------ */
.hom-apply-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--hom-navy);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hom-apply-filters:hover {
  background: var(--hom-blue);
}

.hom-apply-filters svg {
  flex: 0 0 auto;
}

/* ---- Legacy static sidebar blocks (popular_product / brands /
   categories block types) -- kept for back-compatibility wherever a
   merchant has one of these older blocks enabled in the theme editor.
   Not used by the default filter_by_dynamic setup above. ------------ */
.hom-filter {
  border-bottom: 1px solid var(--hom-line);
  padding: 16px 0;
}

.hom-filter:first-of-type {
  padding-top: 4px;
}

.hom-filter:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.hom-filter__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--hom-navy);
  text-transform: capitalize;
}

.hom-filter__title::-webkit-details-marker {
  display: none;
}

.hom-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--hom-blue);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.hom-filter__title--static {
  cursor: default;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hom-filter__body {
  margin-top: 14px;
}

.hom-filter--static {
  border-bottom: 1px solid var(--hom-line);
  padding: 16px 0;
}

.hom-filter--static:last-child {
  border-bottom: 0;
}

/* ---- Toolbar: result count + sort ---------------------------------- */
.tp-shop-top-result p {
  margin: 0 0 0 6px;
  color: var(--hom-muted);
  font-size: 13.5px;
}

.tp-shop-top-tab .nav-tabs {
  border: 0;
  gap: 6px;
}

.tp-shop-top-tab .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hom-line);
  border-radius: 8px;
  color: var(--hom-muted);
  background: #ffffff;
}

.tp-shop-top-tab .nav-link.active {
  border-color: var(--hom-navy);
  color: var(--hom-navy);
  background: #eef2ff;
}

.hom-filter-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  margin-right: 10px;
  border: 1px solid var(--hom-navy);
  border-radius: 8px;
  background: var(--hom-navy);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.hom-sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.hom-sort__label {
  color: var(--hom-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.hom-sort__select {
  height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--hom-line);
  border-radius: 8px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3e%3cpath d='M1 1L5 5L9 1' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  appearance: none;
  -webkit-appearance: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hom-navy);
  cursor: pointer;
  max-width: 240px;
}

.hom-sort__select:focus {
  outline: none;
  border-color: var(--hom-blue);
}

@media (max-width: 576px) {
  .hom-sort {
    justify-content: flex-start;
    margin-top: 12px;
  }
  .hom-sort__select {
    max-width: none;
    flex: 1 1 auto;
  }
}

/* ---- Product grid spacing (reuses tp-product-item-3 card) --------- */
.tp-shop-items-wrapper .infinite-container {
  row-gap: 4px;
}

/* ---- Pagination ------------------------------------------------------ */
.tp-shop-main-wrapper .tp-pagination nav ul {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  flex-wrap: wrap;
}

.tp-shop-main-wrapper .tp-pagination nav ul li a,
.tp-shop-main-wrapper .tp-pagination nav ul li span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border: 1px solid var(--hom-line);
  border-radius: 8px;
  color: var(--hom-navy);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.tp-shop-main-wrapper .tp-pagination nav ul li a:hover,
.tp-shop-main-wrapper .tp-pagination nav ul li a.current,
.tp-shop-main-wrapper .tp-pagination nav ul li span.current {
  border-color: var(--hom-navy);
  background: var(--hom-navy);
  color: #ffffff;
}

/* ---- Responsive: mobile off-canvas filter drawer -------------------- */
@media (min-width: 1025px) {
  .hom-filter-trigger {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hom-filter-trigger {
    display: inline-flex;
  }

  .hom-shop-sidebar__close {
    display: inline-flex;
  }

  .hom-shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    width: 320px;
    max-width: 85vw;
    background: #ffffff;
    padding: 20px;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .hom-shop-sidebar.hom-mobile-open {
    transform: translateX(0);
  }

  .col-xl-9.col-lg-8 {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .hom-shop-sidebar__title {
    font-size: 15px;
  }
}