.single-service .icon-wrapper img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
}

/* ==========================
   Global Typography
   ========================== */

:root {
  --bs-font-sans-serif: "Poppins", sans-serif;
  --bs-body-font-family: "Poppins", sans-serif;
}

body {
  /* NOTE:
     The frontend layout loads a dynamic stylesheet `assets/front/css/font.php`
     after `custom.css`, which sets `body/h1-h6/p/...` font-family based on DB settings.
     Use `!important` here so Poppins stays global regardless of that override. */
  font-family: "Poppins", sans-serif !important;
}

/* Make Poppins truly global, but don't break icon-font elements. */
/* NOTE: this must stay a single compound selector on one line. A line break before
   the `:not([class^="icofont-"])` part turns it into a descendant combinator, which
   made the rule match icon elements again and replaced every Font Awesome glyph
   with a Poppins tofu box. */
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-brands):not(.fal):not(.ion):not(.ionicons):not([class^="icofont-"]):not([class*=" icofont-"]) {
  font-family: "Poppins", sans-serif !important;
}

/* Global e-commerce disabled UI state (real enforcement is server-side). */
.ecommerce-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.commerce-hidden {
  display: none !important;
}

.whatsapp-order-btn {
  display: inline-flex;
  align-items: center;
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering */
  gap: 6px;
  padding: 12px 18px;
  border-radius: 4px;
  border: 1px solid #25d366;
  background: #25d366;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.whatsapp-order-btn:hover,
.whatsapp-order-btn:focus {
  background: #1ebe5d;
  border-color: #1ebe5d;
  color: #fff;
  text-decoration: none;
}
.whatsapp-order-btn i {
  font-size: 16px;
  font-family: "Poppins", sans-serif;
}

/* SVG icon alignment */
.whatsapp-order-btn svg {
  display: block;             /* prevents inline SVG baseline shift */
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Ensure WhatsApp icon uses Font Awesome Brands (prevents tofu/box glyphs). */
.whatsapp-order-btn i.fab,
.whatsapp-order-btn i.fa-brands {
  font-family: "Poppins", sans-serif;
  font-weight: 400 !important;
}

.wa-order-btn-enabled {
  margin-top: 10px;
}
.single-offer-product.verticle .promo-img {
  width: 100%;
  height: 680px !important;
  object-fit: cover !important;
}
.single-offer-product .promo-img {
  width: 100%;
  height: 328px !important;
  object-fit: cover !important;
}

.gs-footer-section .footer-row .left-info .social-links a i {
  color: black;
  transition: all 0.3s;
}
.gs-footer-section .footer-row .left-info .social-links a:hover i {
  color: white;
}

#cardNumber,
#securityCode,
#expirationDate {
  height: 60px;
  transition: color 0.25s, background-color 0.25s, border-color 0.25s;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #fff;
  color: #505050;
  font-size: 14px;
  padding: 0px 18px;
}

#cardNumber,
#securityCode,
#expirationDate {
  margin-bottom: 18px;
}

@media screen and (max-width: 767px) {
  .single-offer-product .promo-img {
    height: 200px !important;
  }
  .single-offer-product.verticle .promo-img {
    height: 400px !important;
  }
}


.sidebar-active-color {
  color: #ff4c3b!important;
}

/* ==========================
   Theme 4 (Figma SVG mock)
   ========================== */
.theme4-home {
  /* Design tokens — scoped: resolve only inside the homepage wrapper */
  --t4-sp-1: 4px;
  --t4-sp-2: 8px;
  --t4-sp-3: 12px;
  --t4-sp-4: 16px;
  --t4-sp-5: 24px;
  --t4-sp-6: 32px;
  --t4-sp-7: 48px;
  --t4-r-sm: 8px;
  --t4-r-md: 12px;
  --t4-r-lg: 16px;
  --t4-r-pill: 999px;
  --t4-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --t4-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --t4-shadow-lg: 0 12px 28px rgba(17, 24, 39, 0.14);
  --t4-accent: #e11d2e;
  --t4-accent-dark: #b91626;
  --t4-ink: #111827;
  --t4-muted: #6b7280;
  --t4-muted-strong: #374151;
  --t4-border: #e5e7eb;
  --t4-surface: #fff;
  --t4-bg: #f6f7f9;
  --t4-container-max: 1520px;
  --t4-hero-min: 380px;
  --t4-dur: 180ms;
  --t4-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  background: var(--t4-bg);
}

/* Theme4 is now implemented as real HTML/CSS (interactive). Keep the mock rules unused for reference. */

/* Homepage containers: full width up to a premium cap on ultra-wide screens.
   The .t4-categories variant must be listed at (0,3,0) so it beats the unscoped
   `.t4-categories .container { max-width: 100% !important }` rule further down
   and the strip stays aligned with the capped sections. */
.theme4-home .container,
.theme4-home .t4-categories .container {
  max-width: var(--t4-container-max) !important;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--t4-sp-5);
  padding-right: var(--t4-sp-5);
}

@media (min-width: 1200px) {
  .theme4-home { --t4-hero-min: 440px; } /* taller, more dominant hero on large screens */
  .theme4-home .container,
  .theme4-home .t4-categories .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.theme4-home .t4-section:not(.t4-categories) {
  padding: var(--t4-sp-6) 0;
}
.theme4-home .t4-section.t4-hero {
  padding-top: var(--t4-sp-4); /* keep hero anchored near the category strip (beats the :not() shorthand) */
}
/* category strip: spacing intentionally frozen — do not fold into the scale */
.theme4-home .t4-section.t4-categories {
  padding: 16px 0;
}

.theme4-home .t4-title-row {
  padding: 0 0 var(--t4-sp-5);
}
.theme4-home .t4-title {
  font-weight: 700;
  font-size: clamp(18px, 1.4vw + 6px, 22px);
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0;
  color: var(--t4-ink);
}
.theme4-home .t4-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: var(--t4-sp-2);
  border-radius: var(--t4-r-pill);
  background: var(--t4-accent);
}

/* Categories strip */
.theme4-home .t4-categories {
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.theme4-home .t4-cat {
  padding: 14px 6px;
}
.theme4-home .t4-cat__link {
  display: grid;
  grid-template-rows: 34px auto;
  gap: 8px;
  justify-items: center;
  text-align: center;
  color: #111827;
}
.theme4-home .t4-cat__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.theme4-home .t4-cat__icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.theme4-home .t4-cat__icon span {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #e5e7eb;
}
.theme4-home .t4-cat__title {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  max-width: 140px;
}

/* Unified categories section - works for both homepage and category page */
.t4-categories {
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.t4-categories .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1200px) {
  .t4-categories .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.t4-cat {
  padding: 14px 6px;
}
.t4-cat__link {
  display: grid;
  grid-template-rows: 34px auto;
  gap: 8px;
  justify-items: center;
  text-align: center;
  color: #111827;
  text-decoration: none;
}
.t4-cat__link.is-active {
  color: #e11d2e;
}

/* Active indicator (category strip + item strip).
   `text-decoration: underline` drew a rule under every wrapped line, so on
   narrow screens the first line's underline struck through the second line.
   An indicator bar pinned to the bottom of the tile can never collide. */
.t4-categories--category-page .t4-cat__link,
.t4-categories--product-page .t4-cat__link {
  position: relative;
  padding-bottom: 9px;
}
.t4-categories--category-page .t4-cat__link.is-active,
.t4-categories--product-page .t4-cat__link.is-active {
  color: #e11d2e;
  text-decoration: none;
}
.t4-categories--category-page .t4-cat__link.is-active .t4-cat__title,
.t4-categories--product-page .t4-cat__link.is-active .t4-cat__title {
  font-weight: 700;
}
.t4-categories--category-page .t4-cat__link.is-active::after,
.t4-categories--product-page .t4-cat__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: #e11d2e;
}
.t4-cat__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.t4-cat__icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.t4-cat__icon span {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #e5e7eb;
}
.t4-cat__title {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  max-width: 140px;
}

/* Hero */
.theme4-home .t4-hero__media {
  border-radius: var(--t4-r-lg); /* standalone hero card (offer strip detached below) */
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: var(--t4-hero-min);
}
.theme4-home .t4-hero__overlay {
  min-height: var(--t4-hero-min);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0) 78%);
  display: flex;
  align-items: center;
  padding: clamp(20px, 4vw, 48px);
}
.theme4-home .t4-hero__content {
  max-width: 620px;
}
.theme4-home .t4-hero__title {
  color: #fff;
  font-size: clamp(26px, 2vw + 14px, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 10px;
}
.theme4-home .t4-hero__sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(14px, 0.4vw + 10px, 16px);
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 52ch;
}
.theme4-home .t4-hero__cta {
  display: inline-block;
  background: var(--t4-accent);
  color: #fff;
  padding: 12px 28px;
  border-radius: var(--t4-r-pill);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  box-shadow: var(--t4-shadow-sm);
  transition: transform var(--t4-dur) var(--t4-ease), box-shadow var(--t4-dur) var(--t4-ease);
}
.theme4-home .t4-hero__slide:hover .t4-hero__cta,
.theme4-home .t4-hero__slide:focus-visible .t4-hero__cta {
  background: var(--t4-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--t4-shadow-md);
}

/* Hero slick dots (override the generic blue dots from style.css) */
.theme4-home .t4-hero__slider .slick-dots {
  bottom: 18px;
  gap: var(--t4-sp-2);
  margin-top: 0;
}
.theme4-home .t4-hero__slider .slick-dots li button {
  width: 8px;
  height: 8px;
  box-sizing: content-box;
  padding: 6px; /* 20px hit area, visible dot stays 8px */
  border: 0;
  background-color: rgba(255, 255, 255, 0.55);
  background-clip: content-box;
  border-radius: var(--t4-r-pill);
}
.theme4-home .t4-hero__slider .slick-dots li.slick-active button {
  width: 26px;
  height: 8px;
  background-color: #fff;
}

/* Pre-init CLS guard: show only the first slide until slick boots */
.theme4-home .t4-hero__slider:not(.slick-initialized) .t4-hero__slide {
  display: none;
}
.theme4-home .t4-hero__slider:not(.slick-initialized) .t4-hero__slide:first-child {
  display: block;
}

/* Slide content reveal on fade (transform/opacity only) */
.theme4-home .t4-hero__slider .slick-slide .t4-hero__content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--t4-ease), transform 420ms var(--t4-ease);
}
.theme4-home .t4-hero__slider .slick-slide.slick-active .t4-hero__content {
  opacity: 1;
  transform: none;
}

/* Under-hero offer strip → standalone premium deal tiles */
.theme4-home .t4-hero-offers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--t4-sp-4);
  margin-top: var(--t4-sp-4);
}
.theme4-home .t4-offer {
  padding: var(--t4-sp-4) var(--t4-sp-3);
  text-align: center;
  background: var(--t4-surface);
  border: 1px solid var(--t4-border);
  border-radius: var(--t4-r-md);
  box-shadow: var(--t4-shadow-sm);
  font-size: 11.5px; /* brand = eyebrow */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t4-muted-strong);
  transition: transform var(--t4-dur) var(--t4-ease),
              box-shadow var(--t4-dur) var(--t4-ease),
              border-color var(--t4-dur) var(--t4-ease);
}
.theme4-home .t4-offer:hover {
  transform: translateY(-2px);
  box-shadow: var(--t4-shadow-md);
  border-color: #d7dbe0;
}
.theme4-home .t4-offer span {
  /* deal value = dominant line */
  display: block;
  margin-top: var(--t4-sp-1);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t4-accent-dark);
}
.theme4-home .t4-offer--highlight {
  /* "Next Day Delivery" = feature tile */
  background: linear-gradient(135deg, var(--t4-accent), var(--t4-accent-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--t4-shadow-md);
}
.theme4-home .t4-offer--highlight span {
  color: rgba(255, 255, 255, 0.92);
}

/* Promo row */
.theme4-home .t4-promo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--t4-sp-4);
  padding-top: var(--t4-sp-4);
}
.theme4-home .t4-promo {
  border-radius: var(--t4-r-md);
  overflow: hidden;
  background: var(--t4-surface);
  border: 1px solid var(--t4-border);
  box-shadow: var(--t4-shadow-sm);
  transition: transform var(--t4-dur) var(--t4-ease), box-shadow var(--t4-dur) var(--t4-ease);
}
.theme4-home .t4-promo:hover {
  transform: translateY(-3px);
  box-shadow: var(--t4-shadow-md);
}
.theme4-home .t4-promo img {
  width: 100%;
  aspect-ratio: 3 / 1; /* matches the previous ~330x108 desktop crop; reserves space (no CLS) */
  height: auto;
  object-fit: cover;
  display: block;
}

/* Bestsellers product card (outer slide gutter only — card internals are frozen) */
.theme4-home .t4-product {
  padding: var(--t4-sp-2);
}
.theme4-home .t4-product__link {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  color: inherit;
}
.theme4-home .t4-product__imgwrap {
  height: 190px;
  display: grid;
  place-items: center;
  background: #fff;
}
.theme4-home .t4-product__img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.theme4-home .t4-product__meta {
  padding: 12px;
}
.theme4-home .t4-product__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.theme4-home .t4-product__rating-badge {
  background: #0a7a2f;
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
}
.theme4-home .t4-product__rating-count {
  font-size: 12px;
  color: #6b7280;
}
.theme4-home .t4-product__title {
  font-size: 14px;
  line-height: 1.25;
  color: #111827;
  min-height: 36px;
  margin-bottom: 10px;
}
.theme4-home .t4-product__price {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
.theme4-home .t4-product__price-now {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}
.theme4-home .t4-product__price-old {
  font-size: 13px;
  color: #6b7280;
  text-decoration: line-through;
}
.theme4-home .t4-product__price-off {
  font-size: 13px;
  font-weight: 800;
  color: #0a7a2f;
}

/* Bottom banners */
.theme4-home .t4-bottom-banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--t4-sp-4);
  margin-top: var(--t4-sp-6);
}
.theme4-home .t4-bottom-banner {
  display: block;
  border-radius: var(--t4-r-lg);
  overflow: hidden;
  border: 1px solid var(--t4-border);
  background: var(--t4-surface);
  height: clamp(140px, 10vw, 170px); /* explicit height: equalizes the trio + reserves space (no CLS) */
  box-shadow: var(--t4-shadow-sm);
  transition: transform var(--t4-dur) var(--t4-ease), box-shadow var(--t4-dur) var(--t4-ease);
}
.theme4-home .t4-bottom-banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--t4-shadow-md);
}
.theme4-home .t4-bottom-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.theme4-home .t4-track {
  height: 100%;
  display: grid;
  align-items: center;
  padding: var(--t4-sp-5);
  background: linear-gradient(135deg, #ffe9df, #fff);
}
.theme4-home .t4-track__title {
  font-size: clamp(18px, 1.2vw + 8px, 22px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--t4-ink);
  margin-bottom: 10px;
}
.theme4-home .t4-track__btn {
  display: inline-block;
  background: var(--t4-accent);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  border-radius: var(--t4-r-sm);
  padding: 12px 16px;
  width: max-content;
  transition: transform var(--t4-dur) var(--t4-ease), box-shadow var(--t4-dur) var(--t4-ease);
}
.theme4-home .t4-bottom-banner:hover .t4-track__btn {
  background: var(--t4-accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--t4-shadow-sm);
}

.theme4-home .t4-empty {
  background: var(--t4-surface);
  border: 1px dashed #cbd5e1;
  border-radius: var(--t4-r-md);
  padding: var(--t4-sp-4);
  color: #475569;
}

/* Bestsellers slider dots (override the generic blue dots from style.css) */
.theme4-home .t4-bestsellers__slider .slick-dots {
  margin-top: var(--t4-sp-3);
  gap: var(--t4-sp-2);
}
.theme4-home .t4-bestsellers__slider .slick-dots li button {
  width: 8px;
  height: 8px;
  box-sizing: content-box;
  padding: 6px; /* 20px hit area, visible dot stays 8px */
  border: 0;
  background-color: #d1d5db;
  background-clip: content-box;
  border-radius: var(--t4-r-pill);
}
.theme4-home .t4-bestsellers__slider .slick-dots li.slick-active button {
  width: 26px;
  background-color: var(--t4-accent);
}

/* Pre-init CLS guard: keep a single clipped 4-up row until slick boots */
.theme4-home .t4-bestsellers__slider:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
}
.theme4-home .t4-bestsellers__slider:not(.slick-initialized) .t4-product {
  flex: 0 0 25%;
  max-width: 25%;
}

/* Keyboard focus (in-scope homepage elements only) */
.theme4-home .t4-hero__slide:focus-visible,
.theme4-home .t4-promo:focus-visible,
.theme4-home .t4-bottom-banner:focus-visible {
  outline: 2px solid var(--t4-accent);
  outline-offset: 3px;
  border-radius: inherit;
}
.theme4-home .slick-dots li button:focus-visible {
  outline: 2px solid var(--t4-accent);
  outline-offset: 2px;
}

@media (max-width: 992px) {
  .theme4-home { --t4-hero-min: 320px; }
  .theme4-home .t4-hero-offers { grid-template-columns: 1fr 1fr; }
  .theme4-home .t4-offer--highlight {
    grid-column: 1 / -1; /* full-width tile: fixes the orphan 5th cell */
  }
  .theme4-home .t4-promo-row { grid-template-columns: 1fr 1fr; gap: var(--t4-sp-3); }
  .theme4-home .t4-bottom-banners { grid-template-columns: 1fr; }
  .theme4-home .t4-bottom-banner { height: clamp(120px, 18vw, 150px); }
}

@media (max-width: 768px) {
  .theme4-home { --t4-hero-min: 280px; }
  .theme4-home .container,
  .theme4-home .t4-categories .container {
    padding-left: var(--t4-sp-4);
    padding-right: var(--t4-sp-4);
  }
  .theme4-home .t4-section:not(.t4-categories) { padding: var(--t4-sp-5) 0; }
  .theme4-home .t4-hero__overlay { padding: var(--t4-sp-5); }
  .theme4-home .t4-track { padding: var(--t4-sp-4); }
}

@media (max-width: 576px) {
  .theme4-home { --t4-hero-min: 240px; }
  .theme4-home .container,
  .theme4-home .t4-categories .container {
    padding-left: var(--t4-sp-3);
    padding-right: var(--t4-sp-3);
  }
  .theme4-home .t4-offer { padding: var(--t4-sp-3) var(--t4-sp-2); font-size: 11px; }
  .theme4-home .t4-offer span { font-size: 14px; }
  .theme4-home .t4-hero__sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .theme4-home .t4-hero__slider .slick-dots { bottom: 10px; }
  .theme4-home .t4-product { padding: var(--t4-sp-1) var(--t4-sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  .theme4-home *,
  .theme4-home *::before,
  .theme4-home *::after {
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   Theme4 HOMEPAGE-ONLY newsletter restyle.
   footer.blade.php markup is untouched; body:has() scopes
   these rules to the homepage (the only page rendering
   .theme4-home). Browsers without :has() keep the stock look.
   Tokens re-declared locally: the footer is a sibling of
   .theme4-home, so the scoped tokens above do not reach it.
   ===================================================== */
body:has(.theme4-home) .gs-footer-section .newslatter.newslatter2 {
  --t4-accent: #e11d2e;
  --t4-accent-dark: #b91626;
  --t4-ink: #111827;
  --t4-border: #e5e7eb;
  --t4-r-md: 12px;
  background-color: #f3f4f6;
  border-top: 1px solid var(--t4-border);
}
body:has(.theme4-home) .gs-footer-section .newslatter.newslatter2 .newslatter-content h2 {
  color: var(--t4-ink);
  font-size: clamp(20px, 1.6vw + 8px, 28px);
  font-weight: 700;
  letter-spacing: 0.01em;
}
body:has(.theme4-home) .gs-footer-section .newslatter.newslatter2 input.news-latter-input {
  height: 52px;
  border: 1px solid var(--t4-border);
  border-radius: var(--t4-r-md) 0 0 var(--t4-r-md);
  background: #fff;
}
body:has(.theme4-home) .gs-footer-section .newslatter.newslatter2 form input[type="email"]::placeholder {
  font-size: 15px;
  color: #9ca3af;
}
body:has(.theme4-home) .gs-footer-section .newslatter.newslatter2 .newsletter-btn {
  height: 52px;
  width: 96px;
  background-color: var(--t4-accent);
  border-radius: 0 var(--t4-r-md) var(--t4-r-md) 0;
  font-weight: 600;
  font-size: 15px;
}
body:has(.theme4-home) .gs-footer-section .newslatter.newslatter2 .newsletter-btn:hover {
  background-color: var(--t4-accent-dark);
}

/* ==========================
   Theme 4 Header (matches provided design)
   ========================== */
.t4-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.t4-header .t4-header__row {
  height: 78px;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  gap: 16px;
}
.t4-header .t4-header__brand {
  color: #1f0b05;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0.3px;
}
.t4-header .t4-nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
  margin: 0;
  padding: 0;
}
.t4-header .t4-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.t4-header .t4-nav__link {
  color: #111827;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
}
.t4-header .t4-nav__chev {
  width: 8px;
  height: 8px;
  border-right: 2px solid #111827;
  border-bottom: 2px solid #111827;
  transform: rotate(45deg);
  margin-top: 2px;
}
.t4-header .t4-nav__item--dropdown:hover .t4-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.t4-header .t4-nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px;
  margin-top: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.15s ease;
  z-index: 1000;
}
.t4-header .t4-nav__menu-link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #111827;
  font-weight: 600;
  font-size: 14px;
}
.t4-header .t4-nav__menu-link:hover {
  background: #f3f4f6;
}
.t4-header .t4-nav__menu-link.is-active {
  background: #eef2ff;
  color: #1d4ed8;
}

.t4-header .t4-actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.t4-header .t4-action {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #f3f4f6;
  display: grid;
  place-items: center;
}
.t4-header .t4-action__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

@media (max-width: 1200px) {
  .t4-header .t4-header__row { grid-template-columns: 180px 1fr 200px; }
  .t4-header .t4-nav__list { gap: 26px; }
}
@media (max-width: 992px) {
  .t4-header .t4-nav { display: none; }
  .t4-header .t4-header__row { grid-template-columns: 1fr auto; }
}

/* ==========================
   Theme 4 (Moglix-like) header-top replacement
   Only used on home when Theme 4 is active
   ========================== */
.t4-header-top {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.t4-header-top__row {
  display: grid;
  grid-template-columns: 420px 1fr 360px;
  align-items: center;
  gap: 18px;
  height: 72px;
}
.t4-header-top__left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.t4-brand__logo {
  height: 45px;
  width: auto;
  display: block;
}
.t4-location {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.t4-location__text {
  min-width: 0;
  line-height: 1.1;
}
.t4-location__line1 {
  font-size: 14px;
  color: #111827;
  font-weight: 600;
}
.t4-location__line2 {
  font-size: 13px;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 6px;
}
.t4-location__chev {
  width: 7px;
  height: 7px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: rotate(45deg);
  margin-top: -2px;
}
.t4-search {
  display: grid;
  grid-template-columns: 1fr 56px;
  align-items: stretch;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.t4-search__input {
  border: 0;
  padding: 0 14px;
  height: 44px;
  font-size: 14px;
}
.t4-search__btn {
  background: #e11d2e;
  display: grid;
  place-items: center;
}
.t4-header-top__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
}
.t4-mobile-only {
  display: none;
}
.t4-mobile-toggle {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111827;
}
.t4-iconlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.t4-kebab {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #111827;
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 1200px) {
  .t4-header-top__row { grid-template-columns: 360px 1fr 320px; }
  .t4-iconlink__label { display: none; }
}
@media (max-width: 1199.97px) {
  .t4-header-top__row { display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 8px 0; gap: 12px; }
  .t4-header-top__left { flex: 1; gap: 10px; }
  .t4-header-top__center { display: none; }
  .t4-location { display: none; }
  .t4-header-top__right { justify-content: flex-end; gap: 12px; }
  .t4-mobile-only { display: inline-flex; }
  .t4-iconlink--hide-mobile { display: none; }
  .t4-iconlink--essential { min-width: 40px; min-height: 40px; justify-content: center; }
  .t4-iconlink--essential .t4-iconlink__label { display: none; }
}

/* ==========================
   Theme 4 Category Page
   ========================== */
.t4-category-page {
  background: #ffffff;
  padding: 0 0 10px;
}
.t4-category-page .t4-categories--category-page {
  margin-top: 0;
  margin-bottom: 2px;
}
.t4-category-page .t4-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}
.t4-category-page .t4-category-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.t4-category-page .t4-main {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.t4-category-page .t4-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}

/* Sidebar */
.t4-category-page .t4-sidebar {
  align-self: start;
}
.t4-category-page .t4-filter {
  padding: 16px;
  overflow-x: hidden;
  box-sizing: border-box;
}
.t4-category-page .t4-filterbar {
  display: none; /* shown on tablet/mobile only */
  margin: 0 0 14px;
  justify-content: flex-end;
}
.t4-category-page .t4-filter__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.t4-category-page .t4-filter__close {
  display: none; /* shown on tablet/mobile only */
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.t4-category-page .t4-filter__close:hover {
  background: #f9fafb;
}
.t4-category-page .t4-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(17, 24, 39, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.t4-category-page .t4-filter__title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.t4-category-page .t4-filter__section {
  padding: 12px 0;
  border-top: 1px solid #f1f1f1;
}
.t4-category-page .t4-filter__section:first-child {
  border-top: 0;
  padding-top: 0;
}
.t4-category-page .t4-filter__section:last-child {
  padding-bottom: 0;
}
.t4-category-page .t4-filter__label {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}
.t4-category-page .t4-filter__list {
  margin: 0;
  padding: 0;
}
.t4-category-page .t4-filter__list li a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: #374151;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.t4-category-page .t4-filter__list li a.is-active {
  color: #e11d2e;
  font-weight: 700;
}
.t4-category-page .t4-check {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  margin: 6px 0;
}
.t4-category-page .t4-check input {
  margin-top: 2px;
  flex: 0 0 auto;
}

.t4-category-page .price-range {
  padding: 0 10px;
  box-sizing: border-box;
}
.t4-category-page #slider-range {
  margin: 0;
}
.t4-category-page .price-range .range_output {
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
  margin-top: 10px;
}

/* Buttons */
.t4-category-page .t4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.t4-category-page .t4-btn--primary {
  background: #e11d2e;
  color: #fff;
  border-color: #e11d2e;
}
.t4-category-page .t4-btn--ghost {
  background: #fff;
  color: #e11d2e;
  border-color: #e11d2e;
}
.t4-category-page .t4-btn--outline {
  background: transparent;
  color: #e11d2e;
  border: 1px solid #e11d2e;
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: 700;
}

/* Main */
.t4-category-page .t4-hero {
  height: 184px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  position: relative;
  border: 1px solid #e5e7eb;
}
.t4-category-page .t4-hero__dots {
  position: absolute;
  bottom: 12px;
  right: 14px;
  display: flex;
  gap: 6px;
}
.t4-category-page .t4-hero__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9ca3af;
}
.t4-category-page .t4-hero__dots span.is-active {
  width: 12px;
  height: 12px;
  background: #ffffff;
  border: 2px solid #6b7280;
}

.t4-category-page .t4-explore {
  margin-top: 20px;
}
.t4-category-page .t4-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}
.t4-category-page .t4-explore__grid {
  display: grid;
  /* Auto-fit prevents "empty columns" that look like an infinite right-side gap */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.t4-category-page .t4-tile {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  color: #111827;
}
.t4-category-page .t4-tile img {
  width: 70px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 8px;
}
.t4-category-page .t4-tile span {
  font-size: 12px;
  font-weight: 600;
}

.t4-category-page .t4-featured {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
}
.t4-category-page .t4-featured__img img {
  width: 100%;
  border-radius: 16px;
}
.t4-category-page .t4-featured__content h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.t4-category-page .t4-featured__content p {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 12px;
}

.t4-category-page .t4-brands {
  padding: 12px 0 6px;
}
.t4-category-page .t4-brands__row,
.t4-category-page .t4-brands__slider:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.t4-category-page .t4-brand {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;
  display: grid;
  place-items: center;
}
.t4-category-page .t4-brand img {
  width: 60px;
  height: 28px;
  object-fit: contain;
}

.t4-category-page .t4-section {
  margin-top: 2px;
}
.t4-category-page .t4-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.t4-category-page .t4-section__header h4 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.t4-category-page .t4-section__controls {
  display: flex;
  gap: 6px;
}
.t4-category-page .t4-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e11d2e;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.t4-category-page .t4-product-grid,
.t4-category-page .t4-product-slider:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Slick integration (Theme 4 category only) */
.t4-category-page .t4-product-slider.slick-initialized {
  display: block;
}
.t4-category-page .t4-product-slider .slick-slide {
  padding: 0 6px;
  height: auto;
}
.t4-category-page .t4-product-slider .slick-list {
  margin: 0 -6px;
}
.t4-category-page .t4-product-slider .t4-slide {
  height: 100%;
}

.t4-category-page .t4-brands__slider.slick-initialized {
  display: block;
}
.t4-category-page .t4-brands__slider .slick-slide {
  padding: 0 5px;
  height: auto;
}
.t4-category-page .t4-brands__slider .slick-list {
  margin: 0 -5px;
}

.t4-category-page .t4-product-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.t4-category-page .t4-product-card__top {
  position: relative;
  height: 150px;
  display: grid;
  place-items: center;
}
.t4-category-page .t4-product-card__img img {
  max-height: 130px;
  max-width: 100%;
  object-fit: contain;
}
.t4-category-page .t4-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e11d2e;
  color: #fff;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 6px;
}
.t4-category-page .t4-product-card__body {
  padding: 10px;
}
.t4-category-page .t4-rating {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.t4-category-page .t4-rating__score {
  background: #0a7a2f;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}
.t4-category-page .t4-rating__count {
  font-size: 11px;
  color: #6b7280;
}
.t4-category-page .t4-product-card__title {
  display: block;
  font-size: 12px;
  color: #111827;
  min-height: 32px;
  margin-bottom: 6px;
}
.t4-category-page .t4-product-card__price {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.t4-category-page .t4-price-now {
  font-size: 14px;
  font-weight: 800;
}
.t4-category-page .t4-price-old {
  font-size: 11px;
  color: #6b7280;
  text-decoration: line-through;
}
.t4-category-page .t4-product-card__actions {
  display: flex;
  gap: 6px;
}

.t4-category-page .t4-divider {
  margin: 14px 0;
  height: 4px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.t4-category-page .t4-divider span {
  display: block;
  width: 50%;
  height: 100%;
  background: #e11d2e;
}
.t4-category-page .t4-pagination {
  margin-top: 8px;
}
.t4-category-page .t4-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 1200px) {
  .t4-category-page .t4-category-grid { grid-template-columns: 1fr; }
  .t4-category-page .t4-explore__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .t4-category-page .t4-brands__row,
  .t4-category-page .t4-brands__slider:not(.slick-initialized) { grid-template-columns: repeat(6, 1fr); }
  .t4-category-page .t4-product-grid,
  .t4-category-page .t4-product-slider:not(.slick-initialized) { grid-template-columns: repeat(3, 1fr); }

  /* Mobile/tablet filter UX: drawer + trigger button (desktop unchanged) */
  .t4-category-page .t4-filterbar {
    display: flex;
  }

  /* Turn the existing filter card into an off-canvas drawer (no display:none) */
  .t4-category-page .t4-filter {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 360px;
    max-width: 92vw;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10050;
    border-radius: 16px 0 0 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);

    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .t4-category-page .t4-filter.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .t4-category-page .t4-filter__top {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 2px 0 10px;
    z-index: 1;
  }
  .t4-category-page .t4-filter__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.t4-filter-open {
    overflow: hidden;
  }
  body.t4-filter-open .t4-filter-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease;
  }
}
@media (max-width: 768px) {
  .t4-category-page .t4-explore__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .t4-category-page .t4-featured { grid-template-columns: 1fr; }
  .t4-category-page .t4-brands__row,
  .t4-category-page .t4-brands__slider:not(.slick-initialized) { grid-template-columns: repeat(4, 1fr); }
  .t4-category-page .t4-product-grid,
  .t4-category-page .t4-product-slider:not(.slick-initialized) { grid-template-columns: repeat(2, 1fr); }

  /* Full-width drawer on mobile */
  .t4-category-page .t4-filter {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }
}

/* ==========================
   HOTFIX: Theme4 Category overflow + slick gap bug
   ========================== */

/* stop horizontal scrollbar */
/* `overflow-x: hidden` on <body> turns it into a scroll container, which kills
   `position: sticky` for every descendant (category filter + blog sidebar).
   `clip` hides the same overflow without creating a scroll container. */
html { overflow-x: hidden; }
body { overflow-x: clip; }

/* restore Slick’s default behavior only on category page */
/* .t4-category-page .slick-track{
  display: block !important;
  gap: 0 !important;
} */
 /* Fix slick layout ONLY for product/brand sliders, NOT category slider */
.t4-category-page .t4-product-slider .slick-track,
.t4-category-page .t4-brands__slider .slick-track {
  display: block !important;
  gap: 0 !important;
}

/* Ensure category slider keeps Slick defaults */
.t4-category-page .home-cate-slider .slick-track {
  display: flex !important;
}


/* ensure slick viewport clips properly */
.t4-category-page .slick-list{
  overflow: hidden !important;
} 

.t4-category-page .t4-hero__slider,
.t4-category-page .t4-hero__slide,
.t4-category-page .t4-hero__media {
  height: 100%;
}

.t4-category-page .t4-hero__media {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
}

/* Defensive: if Slick fails to add .slick-initialized (or gets interrupted),
   slick.css keeps slides display:none. Force visibility only on Theme4 category page. */
/* NOTE: Do NOT force all slick slides to display:block globally on category page.
   Slick uses clones for infinite mode; forcing display makes "duplicate" slides visible. */

/* ==========================
   Theme 4 Category v2 (Figma layout)
   ========================== */
.t4-category-page {
  background: #f7f7f7;
  /* `clip` (not `hidden`) so the sticky filter sidebar keeps working. */
  overflow-x: clip;
}
.t4-category-page .t4-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1200px) {
  .t4-category-page .t4-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.t4-topcats {
  background: #ffffff;
  border-bottom: 1px solid #ececec;
  padding: 10px 0 12px;
}
.t4-topcats__row {
  display: flex;
  gap: 26px;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 6px;
}
.t4-topcat {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  color: #111827;
  font-size: 11px;
  font-weight: 600;
  min-width: 80px;
}
.t4-topcat__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.t4-topcat__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.t4-topcat.is-active {
  color: #e11d2e;
}

.t4-category-page .t4-card {
  background: #fff;
}
.t4-hero-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid #ededed;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.t4-category-page .t4-hero {
  min-height: 170px;
  height: 170px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.t4-category-page .t4-hero__slider {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
}

/* Before Slick initializes: hide all slides except first to prevent showing multiple containers */
.t4-category-page .t4-hero__slider:not(.slick-initialized) .t4-hero__slide {
  display: none !important;
}
.t4-category-page .t4-hero__slider:not(.slick-initialized) .t4-hero__slide:first-child {
  display: block !important;
  width: 100%;
}

/* (Category hero carousel removed from customer category page) */

/* After Slick initializes: ensure proper single container structure */
.t4-category-page .t4-hero__slider.slick-initialized {
  display: block;
}

.t4-category-page .t4-hero__slider.slick-initialized .slick-list {
  width: 100% !important;
  overflow: hidden;
  position: relative;
  display: block;
}

.t4-category-page .t4-hero__slider.slick-initialized .slick-track {
  width: 100% !important;
  display: flex !important;
  position: relative;
  left: 0;
  top: 0;
}

.t4-category-page .t4-hero__slider.slick-initialized .slick-slide {
  width: 100% !important;
  display: block !important;
  float: none !important;
  height: 170px;
  min-height: 170px;
}

.t4-category-page .t4-hero__slider.slick-initialized .slick-slide:not(.slick-active) {
  display: none !important;
}

.t4-category-page .t4-hero__slider.slick-initialized .slick-slide.slick-active {
  display: block !important;
  width: 100% !important;
}

.t4-category-page .t4-hero__slide {
  height: 170px;
  width: 100%;
  outline: none;
  display: block;
}

.t4-category-page .t4-hero__media {
  border-radius: 14px;
  width: 100%;
  height: 100%;
  min-height: 170px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block !important;
}

/* Ensure hero slider is always visible */
.t4-category-page .t4-hero-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.t4-category-page .t4-hero {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent horizontal overflow on category page */
.t4-category-page {
  max-width: 100vw;
  /* `clip` (not `hidden`) so the sticky filter sidebar keeps working. */
  overflow-x: clip;
}

.t4-category-page * {
  box-sizing: border-box;
}

/* Media elements should not overflow containers (without breaking Slick track sizing) */
.t4-category-page img,
.t4-category-page video,
.t4-category-page svg,
.t4-category-page iframe {
  max-width: 100%;
}

/* Ensure Slick slider doesn't cause overflow */
.t4-category-page .t4-hero__slider.slick-initialized {
  width: 100% !important;
  max-width: 100% !important;
}

.t4-category-page .t4-hero__slider.slick-initialized .slick-list,
.t4-category-page .t4-hero__slider.slick-initialized .slick-track {
  width: 100% !important;
  max-width: 100% !important;
}

.t4-category-page .t4-hero__slider.slick-initialized .slick-slide {
  width: 100% !important;
  max-width: 100% !important;
}
.t4-explore-row {
  margin-top: 14px;
}
.t4-explore-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.t4-explore-row__header h4 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.t4-arrow-group {
  display: flex;
  gap: 8px;
}
.t4-circle-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e11d2e;
  background: #fff;
  color: #e11d2e;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.t4-explore-scroll {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding-bottom: 6px;
}
/* .t4-explore-item {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 100px;
  color: #111827;
} */
.t4-explore-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
/* .t4-explore-name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.t4-explore-count {
  font-size: 10px;
  color: #e11d2e;
  font-weight: 600;
} */
 /* ============================================
   Explore Products Sub-Categories
   Stable image + title + product-count alignment
   ============================================ */

.t4-category-page .t4-explore-scroll {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}

.t4-category-page .t4-explore-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  flex: 0 0 118px;
  width: 118px;
  min-width: 118px;

  color: #111827;
  text-decoration: none;

  position: relative;
  z-index: 1;
  cursor: pointer;
}

/* Fixed image area keeps every title starting at the same height */
.t4-category-page .t4-explore-item img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 auto 6px;
}

/* Name + product count stay together */
.t4-category-page .t4-explore-text {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 2px;

  text-align: center;
}

/* Product/category name */
.t4-category-page .t4-explore-name {
  display: block;
  width: 100%;

  margin: 0;
  padding: 0;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;

  color: #111827;
  text-align: center;

  overflow-wrap: break-word;
}

/* Product count directly below the name */
.t4-category-page .t4-explore-count {
  display: block;
  width: 100%;

  margin: 0;
  padding: 0;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;

  color: #e11d2e;
  text-align: center;
}

.t4-category-page .t4-explore-item.is-active {
  border-bottom: 2px solid #e11d2e;
  padding-bottom: 6px;
}
.t4-explore-item.is-active {
  border-bottom: 2px solid #e11d2e;
  padding-bottom: 6px;
}

.t4-feature-spotlight {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 16px;
  padding: 16px;
}
.t4-feature-spotlight__media img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.t4-feature-spotlight__content h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}
.t4-feature-spotlight__content p {
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 10px;
}
.t4-feature-spotlight__content ul {
  padding-left: 16px;
  margin: 0 0 12px;
  color: #374151;
  font-size: 12px;
}
.t4-feature-spotlight__content li {
  margin-bottom: 6px;
}

.t4-brand-strip {
  margin-top: 14px;
}
.t4-brand-strip__row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
.t4-brand-pill {
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 999px;
  padding: 6px 12px;
  display: grid;
  place-items: center;
  min-width: 70px;
}
.t4-brand-pill.is-active {
  background: #e11d2e;
  border-color: #e11d2e;
}
.t4-brand-pill img {
  height: 18px;
  width: auto;
  object-fit: contain;
}

.t4-category-page .t4-section__header h4 {
  font-size: 14px;
}
.t4-category-page .t4-section__controls .t4-nav-btn {
  border: 1px solid #e11d2e;
  color: #e11d2e;
  background: #fff;
}
.t4-category-page .t4-section__controls .t4-nav-btn:hover {
  background: #e11d2e;
  color: #fff;
}

.t4-card-product {
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 12px;
  position: relative;
}
.t4-card-product__badges {
  display: flex;
  gap: 6px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.t4-card-badge {
  font-size: 10px;
  color: #e11d2e;
  border: 1px solid #e11d2e;
  border-radius: 999px;
  padding: 2px 8px;
  background: #fff;
}
.t4-card-product__media {
  display: block;
  position: relative;
  height: 150px;
  margin-bottom: 10px;
}
.t4-card-product__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.t4-card-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: #fff;
  border: 1px solid #e11d2e;
  color: #e11d2e;
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 8px;
}
.t4-card-discount {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #0ea5e9;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  padding: 4px 8px;
  z-index: 2;
}
.t4-card-product__title {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  display: block;
  min-height: 30px;
}
.t4-card-product__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
.t4-card-rating__score {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
}
.t4-card-rating__stars {
  color: #fbbf24;
  font-size: 11px;
}
.t4-card-rating__count {
  font-size: 10px;
  color: #6b7280;
}
.t4-card-product__price {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.t4-card-price__now {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
}
.t4-card-price__old {
  font-size: 11px;
  color: #6b7280;
  text-decoration: line-through;
}
.t4-card-product__actions {
  display: flex;
  gap: 6px;
}

.t4-card-product__actions .t4-btn--ghost {
  background: #e11d2e;
  color: #fff;
  border-color: #e11d2e;
}

.t4-card-product__actions .t4-btn--ghost:hover {
  background: #c91a2a;
  border-color: #c91a2a;
  color: #fff;
}

.t4-divider span {
  background: #e11d2e;
}

@media (max-width: 991px) {
  .t4-feature-spotlight {
    grid-template-columns: 1fr;
  }
}

.t4-categories {
  min-height: 90px;
}

/* ==========================
   FIX: Decouple categories from .theme4-home
   ========================== */

   .t4-categories {
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  
  .t4-categories .container {
    max-width: 100%;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  @media (min-width: 1200px) {
    .t4-categories .container {
      padding-left: 40px;
      padding-right: 40px;
    }
  }
  
  .t4-categories .t4-cat {
    padding: 14px 6px;
  }
  
  .t4-categories .t4-cat__link {
    display: grid;
    grid-template-rows: 54px auto;
    gap: 8px;
    justify-items: center;
    text-align: center;
    color: #111827;
    text-decoration: none;
  }
  
  .t4-categories .t4-cat__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }
  
  .t4-categories .t4-cat__icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
  }
  
  .t4-categories .t4-cat__icon span {
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background: #e5e7eb;
  }
  
  .t4-categories .t4-cat__title {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    max-width: 140px;
  }
  
  
/* ==========================
   FIX: Theme4 category page top category strip (CLONE)
   - Home page uses .home-cate-slider (unchanged)
   - Category page uses .t4-cat-strip-slider (new)
   ========================== */

/* If Slick doesn't init for any reason, keep items visible */
.t4-categories--category-page .t4-cat-strip-slider:not(.slick-initialized) {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
}

/* Slick sizing: undo the aggressive ".t4-category-page * { max-width: 100% }" for track/list/slide */
.t4-category-page .t4-cat-strip-slider,
.t4-category-page .t4-cat-strip-slider .slick-list,
.t4-category-page .t4-cat-strip-slider .slick-track,
.t4-category-page .t4-cat-strip-slider .slick-slide {
  max-width: none !important;
}

/* Ensure slides are visible (Slick base css sets display:none until init) */
.t4-category-page .t4-cat-strip-slider .slick-slide {
  display: block !important;
}

.t4-category-page .t4-cat-strip-slider .slick-list {
  overflow: hidden !important;
}

.t4-category-page .t4-cat-strip-slider .slick-track {
  display: flex !important;
}

/* ==========================
   Theme4 Category Page - Banner slider (Option B)
   Category-page-only (unique classes)
   ========================== */

.t4-category-page .t4-cat-banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0; /* Remove margin to fill container */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box;
}

/* Ensure skeleton is properly positioned and hidden when not loading */
.t4-category-page .t4-cat-banner.t4-skeleton-only {
  margin-bottom: 0;
}

/* Ensure carousel shows properly after loading */
.t4-category-page .t4-cat-banner.t4-hide-while-loading {
  transition: opacity 0.3s ease;
  display: block !important;
  visibility: visible !important;
}

body:not(.t4-loading) .t4-category-page .t4-cat-banner.t4-hide-while-loading {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.t4-category-page .t4-cat-banner__viewport {
  width: 100%;
  height: 220px; /* Fixed height */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ededed;
  background: #fff;
  position: relative;
  box-sizing: border-box;
}

.t4-category-page .t4-cat-banner-slider {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Pre-init: show first slide with image */
.t4-category-page .t4-cat-banner-slider:not(.slick-initialized) .t4-cat-banner-slide {
  display: none !important;
}

.t4-category-page .t4-cat-banner-slider:not(.slick-initialized) .t4-cat-banner-slide:first-child {
  display: block !important;
  width: 100% !important;
}

.t4-category-page .t4-cat-banner-slider:not(.slick-initialized) .t4-cat-banner-slide:first-child {
  height: 100%;
}

.t4-category-page .t4-cat-banner-slider:not(.slick-initialized) .t4-cat-banner-slide:first-child img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.t4-category-page .t4-cat-banner-slide {
  outline: none;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.t4-category-page .t4-cat-banner-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Image styling - using img tags */
.t4-category-page .t4-cat-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0; /* Remove - viewport has border-radius */
}

/* Premium fade polish (image-only)
   - inactive: slight blur + slight scale + slightly lower opacity
   - active: crisp, scale 1, opacity 1
   Keeps layout stable; transitions are purely visual. */
.t4-category-page .t4-cat-banner-slider.slick-initialized .t4-cat-banner-img {
  opacity: 0.9;
  transform: scale(1.03);
  filter: blur(3px);
  will-change: opacity, transform, filter;
  transition:
    opacity 0.52s ease-in-out,
    transform 0.62s ease-out,
    filter 0.62s ease-out;
}
.t4-category-page .t4-cat-banner-slider.slick-initialized .slick-slide.slick-active .t4-cat-banner-img {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Pre-init: do NOT show blur/scale on the first visible slide */
.t4-category-page .t4-cat-banner-slider:not(.slick-initialized) .t4-cat-banner-img {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .t4-category-page .t4-cat-banner-slider.slick-initialized .t4-cat-banner-img {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-width: 768px) {
  .t4-category-page .t4-cat-banner__viewport {
    height: 170px;
  }
  .t4-category-page .t4-cat-banner-img {
    height: 100%;
  }
}

/* Arrows: only show when slick initialized */
.t4-category-page .t4-cat-banner-arrows {
  display: none;
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  transform: translateY(-50%);
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}
.t4-category-page .t4-cat-banner.is-slick .t4-cat-banner-arrows {
  display: flex;
}
.t4-category-page .t4-cat-banner-arrow {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.92);
  color: #111827;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}

/* Dots (slick-generated) */
.t4-category-page .t4-cat-banner-slider .slick-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.t4-category-page .t4-cat-banner-slider .slick-dots li button {
  font-size: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.6);
  padding: 0;
}
.t4-category-page .t4-cat-banner-slider .slick-dots li.slick-active button {
  background: rgba(255,255,255,0.95);
}

/* CRITICAL FIX: Override global max-width:100% rule that breaks Slick */
.t4-category-page .t4-cat-banner-slider,
.t4-category-page .t4-cat-banner-slider .slick-list,
.t4-category-page .t4-cat-banner-slider .slick-track,
.t4-category-page .t4-cat-banner-slider .slick-slide {
  max-width: none !important;
}

.t4-category-page .t4-cat-banner {
  min-height: 220px;
}

.t4-category-page .t4-cat-banner__viewport {
  position: relative;
}

.t4-category-page .t4-cat-banner-slider {
  position: relative;
}

.t4-category-page .t4-cat-banner-slider .slick-list {
  overflow: hidden !important;
  height: 100% !important;
  position: relative;
  display: block;
}

.t4-category-page .t4-cat-banner-slider .slick-track {
  height: 100% !important;
}

.t4-category-page .t4-cat-banner-slider .slick-slide {
  height: 100% !important;
}

/* Ensure images are visible in active slides */
.t4-category-page .t4-cat-banner-slider .slick-slide.slick-active img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure slide content is visible */
.t4-category-page .t4-cat-banner-slider .slick-slide .t4-cat-banner-slide {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Duplicate removed - handled above */

/* Removed - using .t4-cat-banner-img instead */

.t4-category-page .t4-cat-banner-arrows {
  z-index: 10;
}

.t4-category-page .t4-cat-banner-arrow {
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.t4-category-page .t4-cat-banner-arrow:hover {
  background: #fff;
  border-color: rgba(0,0,0,0.15);
}

.t4-category-page .t4-cat-banner-slider .slick-dots {
  z-index: 10;
}

.t4-category-page .t4-cat-banner-slider .slick-dots li {
  margin: 0;
  padding: 0;
}

.t4-category-page .t4-cat-banner-slider .slick-dots li button {
  cursor: pointer;
  transition: all 0.2s;
}

.t4-category-page .t4-cat-banner-slider .slick-dots li.slick-active button {
  width: 12px;
  height: 12px;
}

@media (max-width: 768px) {
  .t4-category-page .t4-cat-banner {
    min-height: 170px;
  }
  .t4-category-page .t4-cat-banner-slider .slick-slide {
    height: 170px !important;
  }
}

/* ==========================
   Theme 4 Category Page - New Figma Design Sections
   ========================== */

/* Brand Spotlight (Two-column layout) */
.t4-brand-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 24px;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #ededed;
}

.t4-brand-spotlight__media {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: 12px;
  overflow: hidden;
}

.t4-brand-spotlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.t4-brand-spotlight__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.t4-brand-spotlight__title {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  margin: 0;
  line-height: 1.2;
}

.t4-brand-spotlight__description {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

.t4-brand-spotlight__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.t4-brand-spotlight__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #111827;
  line-height: 1.5;
}

.t4-brand-spotlight__icon {
  color: #e11d2e;
  font-size: 12px;
  margin-top: 4px;
  flex-shrink: 0;
}

.t4-brand-spotlight__cta {
  align-self: flex-start;
  margin-top: 8px;
}

/* Brand Logos Strip */
.t4-brand-logos-strip {
  margin-top: 24px;
  margin-bottom: 24px;
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  border: 1px solid #ededed;
  overflow: hidden;
}

.t4-brand-logos-strip__slider {
  display: flex;
  gap: 24px;
  align-items: center;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.t4-brand-logos-strip__slider::-webkit-scrollbar {
  display: none;
}

.t4-brand-logo-item {
  flex-shrink: 0;
  padding: 12px 20px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.t4-brand-logo-item.is-active {
  background: #e11d2e;
  border-color: #e11d2e;
}

.t4-brand-logo-item img {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.t4-brand-logo-item.is-active img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Product Carousel Sections */
.t4-product-carousel-section {
  margin-top: 32px;
  margin-bottom: 32px;
}

.t4-product-carousel-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.t4-product-carousel-section__title {
  font-size: 24px;
  font-weight: 800;
  color: #111827;
  margin: 0;
}

.t4-product-carousel-section__controls {
  display: flex;
  gap: 8px;
}

.t4-product-carousel-section__controls .t4-circle-btn {
width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e11d2e;
    background: #fff;
    color: #e11d2e;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.t4-product-carousel-section__controls .t4-circle-btn:hover {
  background: #c91a2a;
  transform: scale(1.05);
}

/* Product carousel - Horizontal scroll (no Slick) */
.t4-product-carousel {
  position: relative;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}

.t4-product-carousel::-webkit-scrollbar {
  display: none;
}

.t4-product-carousel__slide {
  flex: 0 0 auto;
  width: 280px;
  min-width: 280px;
  height: 100%;
}

.t4-product-carousel__slide .t4-card-product {
  margin: 0;
  height: 100%;
  width: 100%;
}

/* Progress bar for carousel */
.t4-carousel-progress {
  width: 100%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  margin-top: 16px;
  overflow: hidden;
}

.t4-carousel-progress__bar {
  height: 100%;
  background: #e11d2e;
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
}

/* Override max-width rule for slick elements */
.t4-product-carousel,
.t4-product-carousel .slick-list,
.t4-product-carousel .slick-track,
.t4-product-carousel .slick-slide {
  max-width: none !important;
}

.t4-product-carousel .slick-slide {
  display: block !important;
  float: left;
  height: 100%;
  min-height: 1px;
}

.t4-product-carousel .slick-list {
  display: block;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

.t4-product-carousel .slick-track {
  display: block;
  left: 0;
  top: 0;
  position: relative;
  transform: translate3d(0, 0, 0);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .t4-brand-spotlight {
    grid-template-columns: 1fr;
  }
  
  .t4-brand-spotlight__media {
    min-height: 200px;
  }
  
  .t4-product-carousel__slide {
    width: 260px;
    min-width: 260px;
  }
}

@media (max-width: 768px) {
  .t4-product-carousel-section__title {
    font-size: 20px;
  }
  
  .t4-product-carousel-section__controls .t4-circle-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  
  .t4-product-carousel__slide {
    width: 240px;
    min-width: 240px;
  }
}

@media (max-width: 480px) {
  .t4-product-carousel__slide {
    width: 220px;
    min-width: 220px;
  }
}

/* Main Category Spotlight Section */
.t4-main-category-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 2px;
  margin-bottom: 32px;
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  border: 1px solid #ededed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.t4-main-category-spotlight__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 12px;
  overflow: hidden;
  background: #f7f7f7;
}

.t4-main-category-spotlight__media img {
  position: absolute;
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
  object-position: center;
}

.t4-main-category-spotlight__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.t4-main-category-spotlight__title {
  font-size: 32px;
  font-weight: 800;
  color: #111827;
  margin: 0;
  line-height: 1.2;
}

.t4-main-category-spotlight__description {
  font-size: 15px;
  color: #111827;
  line-height: 1.6;
  margin: 0;
  text-align: justify;
}

.t4-main-category-spotlight__description p {
  margin: 0 0 12px 0;
  text-align: justify;
}

.t4-main-category-spotlight__description p:last-child {
  margin-bottom: 0;
}

.t4-main-category-spotlight__description ul,
.t4-main-category-spotlight__description ol {
  margin: 12px 0;
  padding-left: 20px;
}

.t4-main-category-spotlight__description strong,
.t4-main-category-spotlight__description b {
  font-weight: 600;
}

.t4-main-category-spotlight__description em,
.t4-main-category-spotlight__description i {
  font-style: italic;
}

.t4-main-category-spotlight__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.t4-main-category-spotlight__features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #111827;
  line-height: 1.5;
}

.t4-main-category-spotlight__icon {
  color: #e11d2e;
  font-size: 14px;
  margin-top: 4px;
  flex-shrink: 0;
}

.t4-main-category-spotlight__cta {
  align-self: flex-start;
  margin-top: 8px;
  border: 1px solid #e11d2e;
  color: #e11d2e;
  background: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.t4-main-category-spotlight__cta:hover {
  background: #e11d2e;
  color: #fff;
}

/* Responsive */
@media (max-width: 991px) {
  .t4-main-category-spotlight {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  
  .t4-main-category-spotlight__media {
    min-height: 300px;
  }
  
  .t4-main-category-spotlight__title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .t4-main-category-spotlight {
    padding: 20px;
  }
  
  .t4-main-category-spotlight__title {
    font-size: 24px;
  }
  
  .t4-main-category-spotlight__description {
    font-size: 14px;
  }
  
  .t4-main-category-spotlight__features li {
    font-size: 14px;
  }
}

/* Skeleton - same size as carousel */
.t4-cat-banner-skeleton {
  width: 100%;
  margin-bottom: 14px;
  border-radius: 16px;
  overflow: hidden;
}

/* Carousel container - ensure proper width */
.t4-cat-banner {
  width: 100%;
  max-width: 100%;
  margin-bottom: 14px;
  position: relative;
}

/* Image sizing - general rule (category page specific rules above) */
.t4-cat-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0; /* Viewport handles border-radius */
}

.t4-cat-banner__viewport {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

/* Force carousel visibility - override loading state if needed */
.t4-category-page .t4-cat-banner.t4-hide-while-loading {
  min-height: 160px;
}

/* Ensure images are always visible in first slide */
.t4-category-page .t4-cat-banner-slider:not(.slick-initialized) .t4-cat-banner-slide:first-child img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* ============================================
   Product Details Page - Figma Redesign Styles
   ============================================ */

.product-details-page-figma {
  font-family: "Poppins", sans-serif;
  background: #ffffff;
  min-height: 100vh;
}

.product-details-page-figma .container {
  max-width: 1320px;
  padding-left: 15px;
  padding-right: 15px;
}

/* Category chip + page title (replaces the long breadcrumb) */
.product-title-block {
  padding: 10px 0 0;
  margin-bottom: 20px;
}

.product-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 12px 5px 8px;
  border: 1px solid #F0E2C4;
  border-radius: 999px;
  background: #FDF6E7;
  color: #8A6A1F;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.product-category-chip:hover,
.product-category-chip:focus {
  background: #F8ECD2;
  border-color: #E4D0A6;
  color: #6F5316;
  text-decoration: none;
}

.product-category-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.product-category-chip__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-category-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-page-title {
  margin: 10px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: #111;
}

.product-title-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: #777;
}

.product-title-meta__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C4C4C4;
}

.product-title-meta__stock {
  font-weight: 600;
}

.product-title-meta__stock.is-in {
  color: #1B9C4B;
}

.product-title-meta__stock.is-out {
  color: #D30000;
}

/* Breadcrumb */
.product-breadcrumb-simple {
  padding: 10px 0 2px;
  margin-bottom: 0;
}

.product-breadcrumb-simple .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.product-breadcrumb-simple .breadcrumb-item {
  font-size: 14px;
  color: #666;
}

.product-breadcrumb-simple .breadcrumb-item a {
  color: #666;
  text-decoration: none;
}

.product-breadcrumb-simple .breadcrumb-item a:hover {
  color: #D30000;
}

.product-breadcrumb-simple .breadcrumb-item.active {
  color: #000;
}

.product-breadcrumb-simple .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 8px;
  color: #999;
}

/* Product Gallery */
.product-gallery-wrapper {
  position: relative;
  width: 100%;
}

.product-gallery-hero-card {
  background: #fff;
  border-radius: 18px;
  padding: 8px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-areas: "thumbs main";
  gap: 28px;
  position: relative;
  overflow: visible;
  /* Contain the gallery's internal stacking (hotspots/overlay/controls z-index 5–30) so
     it cannot paint over the fixed nav-drawer blur (.overlay, z-index 10). No z-index changes. */
  isolation: isolate;
}

.product-main-image-container {
  position: relative;
  background: #fff;
  border-radius: 18px;
  /* Allow hotspot tooltips to overflow outside the card */
  overflow: visible;
  margin-bottom: 0;
  box-shadow: none;
  width: 100%;
  grid-area: main;
}

.product-image-view-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  gap: 8px;
  flex-direction: row;
}

.view-control-btn {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

.view-control-btn:hover {
  background: #fff;
  border-color: #D30000;
  color: #D30000;
  transform: translateY(-1px);
}

.view-control-btn svg {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  /* Reference-style icon-only controls on desktop */
  .view-control-btn span {
    display: none;
  }
}

.main-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 450px;
  background: #F6F7F9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  border-radius: 18px;
  /* Allow hotspot tooltips to overflow outside the image box */
  overflow: visible;
}

.main-product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18px;
  transition: transform 0.25s ease;
}

/* Hotspots */
.hotspots-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Ensure hotspots/tooltip layer sits above surrounding UI */
  z-index: 20;
}

.hotspot-dot {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: all;
  z-index: 25;
}

.hotspot-dot.active-hotspot {
  /* Lifts above sibling dots (25) but stays far below modal layers
     (image modal 9999, Bootstrap video modal ~1055) so an active dot
     can never paint over a fullscreen modal's blurred backdrop. */
  z-index: 30;
}

.dot-pulse {
  display: block;
  width: 24px;
  height: 24px;
  background: #D30000;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(211, 0, 0, 0.7);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(211, 0, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(211, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(211, 0, 0, 0);
  }
}

.hotspot-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  min-width: 200px;
  max-width: 280px;
  display: none;
  z-index: 2;
  pointer-events: auto;
}

.hotspot-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
}

.hotspot-tooltip strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1px;
  color: #111;
}

.hotspot-tooltip p {
  font-size: 12.5px;
  line-height: 1.5;
  color: #5f5f5f;
  margin: 10px 0 0;
}

.hotspot-tooltip-media {
  margin-top: 10px;
}

.hotspot-tooltip-media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  border: 1px solid #E5E5E5;
  background: #fff;
}

/* Hotspot video: 16:9 poster + centered play button (opens fullscreen modal) */
.hotspot-tooltip-video {
  position: relative;
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid #E5E5E5;
  cursor: pointer;
}

.hotspot-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Static preview only — never intercept clicks; the play button below stays the target. */
  pointer-events: none;
}

.hotspot-video-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(211, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.hotspot-video-play-btn:hover {
  transform: scale(1.08);
  background: #D30000;
}

/* Image Navigation */
.img-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #E5E5E5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 5;
}

.img-nav-arrow svg {
  width: 14px;
  height: 14px;
}

.img-nav-arrow:hover {
  background: #fff;
  border-color: #D30000;
  color: #D30000;
}

.img-nav-prev {
  left: 10px;
}

.img-nav-next {
  right: 10px;
}

/* Thumbnails */
.product-thumbnails-wrapper {
  position: relative;
  grid-area: thumbs;
}

.thumbnail-scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-height: 620px;
  padding-right: 6px;
}

.thumbnails-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 0;
  justify-content: flex-start;
  align-items: center;
}

.thumbnail-item {
  flex-shrink: 0;
  width: 72px;
  height: 92px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

.thumbnail-item:hover,
.thumbnail-item.active {
  border-color: #D30000;
  transform: translateY(-1px);
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumbnail {
  position: relative;
}

.video-thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail-nav {
  position: absolute;
  left: 50%;
  bottom: -10px;
  top: auto;
  transform: translateX(-50%);
  background: #fff;
  /* Vertical thumbnail strip on desktop scrolls on its own, so the detached
     arrow that used to float under the gallery is not rendered there. */
  display: none;
  border: 1px solid #E5E5E5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  color: #666;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.thumbnail-nav:hover {
  border-color: #D30000;
  color: #D30000;
}

.thumbnail-nav-prev,
.thumbnail-nav-next {
  display: none;
}

/* Arrow is rendered only while there is more of the strip to scroll to. */
.thumbnail-nav.is-hidden {
  display: none;
}

/* Product Info Content Wrapper */
.product-info-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.product-header-info {
  margin-bottom: 0;
  padding-bottom: 0;
}

.product-title-figma {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 0px;
  line-height: 1.4;
}

.product-subtitle-figma {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.5;
}

.product-rating-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.rating-text {
  font-size: 14px;
  color: #666;
}

/* Product Tabs */
.product-tabs-figma {
  border-bottom: none;
  margin-bottom: 0px;
  margin-top: 0;
  gap: 0;
  row-gap: 8px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.product-tabs-figma .nav-item {
  margin-right: 6px;
  margin-bottom: 0;
}

.product-tabs-figma .nav-link {
  border: 1px solid #E5E5E5;
  background: #fff;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 0;
  margin-bottom: 0;
  white-space: nowrap;
}

.product-tabs-figma .nav-link:hover {
  background: #F5F5F5;
  border-color: #D30000;
  color: #D30000;
}

.product-tabs-figma .nav-link.active {
  background: #D30000;
  border-color: #D30000;
  color: #fff;
}

.product-tab-content-figma {
  min-height: 300px;
  padding-top: 8px;
  width: 100%;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 16px;
  margin-top: 0;
}

.product-description-section {
  margin-bottom: 32px;
}

.product-description-text {
  color: #333;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 0;
  text-align: justify;
}

.product-description-text p {
  margin-bottom: 12px;
}

.product-description-text ul {
  list-style: none;
  padding-left: 0;
  margin-top: 12px;
}

.product-description-text ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}

.product-description-text ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #D30000;
  font-size: 18px;
  font-weight: bold;
}

/* Key Features Grid */
.key-features-section {
  margin-top: 0;
}

.features-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 16px;
}

.feature-card {
  background: #F9F9F9;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.3s;
}

.feature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.feature-icon-wrapper {
  width: 64px;
  height: 64px;
  background: #F0F0F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.feature-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 12px;
}

.feature-description {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Pricing Section */
.product-pricing-actions-figma {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: fit-content;
}

.product-sidebar-card {
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 20px 20px 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.pricing-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
  box-shadow: none;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.current-price {
  font-size: 28px;
  font-weight: 700;
  color: #D30000;
  line-height: 1.2;
}

.original-price {
  font-size: 18px;
  color: #999;
  line-height: 1.2;
}

.discount-badge {
  background: transparent;
  color: #2E7D32;
  padding: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.tax-info {
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* Stock Status */
/* Stock + Quantity same row */
.stock-quantity-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 20px;
  margin-bottom: 20px;
}

/* Left: stock information */
.stock-quantity-row .stock-status-section {
  margin-bottom: 0;
  min-width: 0;
  padding-top: 8px;
}

/* Right: Quantity label above controls */
.stock-quantity-row .quantity-section {
  margin-bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

/* Quantity label */
.stock-quantity-row .quantity-section label {
  display: block;
  margin: 0;
  white-space: nowrap;
}

/* Keep "In Stock" in one line */
.stock-quantity-row .stock-status {
  margin-bottom: 4px;
  white-space: nowrap;
}

/* Ready to Ship directly below In Stock */
.stock-quantity-row .ready-ship {
  margin-top: 2px;
  margin-bottom: 0;
  white-space: nowrap;
}

.stock-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 14px;
}

.status-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.in-stock .status-icon {
  background: #2E7D32;
}

.out-of-stock .status-icon {
  background: #D32F2F;
}

.stock-status.in-stock {
  color: #2E7D32;
  font-weight: 500;
}

.stock-status.out-of-stock {
  color: #D32F2F;
  font-weight: 500;
}

.ready-ship {
  font-size: 13px;
  color: #666;
  margin: 0;
  margin-left: 18px;
}

/* Quantity Selector */
.quantity-section {
  margin-bottom: 20px;
  padding: 0;
}

.quantity-section label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.quantity-input-group {
  display: flex;
  align-items: center;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  width: fit-content;
  overflow: hidden;
  background: #fff;
}

.qty-btn {
  background: #fff;
  border: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  font-size: 18px;
  transition: all 0.3s;
  padding: 0;
}

.qty-btn:hover {
  background: #F5F5F5;
  color: #D30000;
}

.qty-input {
  width: 50px;
  height: 36px;
  border: none;
  border-left: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
}

/* Delivery Check */
.delivery-check-section {
  margin-bottom: 20px;
  padding: 0;
}

.delivery-check-section label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.delivery-input-group {
  display: flex;
  gap: 8px;
}

.delivery-input-group .form-control {
  flex: 1;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}

.btn-check-delivery {
  background: #666;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.btn-check-delivery:hover {
  background: #555;
  color: #fff;
}

/* CTA Buttons */
.cta-buttons-section {
  margin-bottom: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-buy-now {
  background: #D30000;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(211, 0, 0, 0.2);
}

.btn-buy-now:hover {
  background: #B00000;
  color: #fff;
  box-shadow: 0 4px 8px rgba(211, 0, 0, 0.3);
}

.btn-add-cart {
  background: #fff;
  color: #D30000;
  border: 1px solid #D30000;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Icons will be added via HTML/SVG */

.btn-add-cart:hover {
  background: #D30000;
  color: #fff;
}

.btn-add-wishlist {
  background: transparent;
  border: none;
  color: #666;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto;
  padding: 8px 0;
  transition: all 0.3s;
}

.btn-add-wishlist:hover {
  color: #D30000;
}

.btn-add-wishlist:hover {
  color: #D30000;
}

/* Seller Info Card */
.seller-info-card {
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 20px;
  margin: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.seller-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E5E5E5;
}

.seller-logo {
  width: 56px;
  height: 56px;
  background: #2196F3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
}

.seller-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.seller-details h4 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.seller-tagline {
  font-size: 13px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.5;
  font-weight: 500;
}

.seller-description {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

.seller-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.seller-feature-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  font-size: 12px;
  color: #D30000;
  font-weight: 500;
}

.seller-feature-badge svg {
  flex-shrink: 0;
}

/* Download Resources */
.download-resources-section {
  margin-bottom: 0;
  padding: 0;
}

.download-resources-section h4 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin-bottom: 16px;
  padding: 0;
}

.download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #F9F9F9;
  border-radius: 6px;
  border: 1px solid #E5E5E5;
}

.download-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.download-info svg {
  color: #666;
  flex-shrink: 0;
}

.download-info > div {
  display: flex;
  flex-direction: column;
}

.download-info span {
  font-size: 14px;
  color: #666;
}

.download-info small {
  font-size: 12px;
  color: #999;
}

.download-btn {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 8px;
  transition: all 0.3s;
}

.download-btn:hover {
  color: #D30000;
}

/* When there is no public documentation link */
.download-item.is-disabled {
  opacity: 0.65;
}

.download-item.is-disabled .download-btn {
  cursor: not-allowed;
}

/* Similar Products Section */
.similar-products-section {
  background: #F9F9F9;
  margin-top: 0px;
  padding: 0px 0;
}

.section-heading {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  /* Heading sat almost on top of the first card row, which let the hover
     "Save" overlay collide with the Best Seller badge. */
  margin-bottom: 32px;
  text-align: center;
}

/* Similar products: spacing stays INSIDE grey section */
@media (min-width: 1440px) {
.similar-products-section {
  padding-top: 12px;
}

.similar-products-section .section-heading {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  margin-top: 0;
  margin-bottom: 32px;
  text-align: center;
}
}

.similar-products-slider {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.similar-products-empty {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}

.similar-products-empty__card {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px dashed #D6D6D6;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
}

.similar-products-empty__title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}

.similar-products-empty__sub {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.similar-product-card {
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 16px;
  position: relative;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.similar-product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.product-badge-best,
.product-badge-discount {
  position: absolute;
  top: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  z-index: 2;
}

.product-badge-best {
  left: 12px;
  background: #4CAF50;
  color: #fff;
}

.product-badge-discount {
  right: 12px;
  background: #E8F5E9;
  color: #2E7D32;
}

.similar-product-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: 12px;
}

.similar-product-card h5 {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
  min-height: 40px;
  line-height: 1.3;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
}

.product-price {
  margin-bottom: 12px;
}

.price-current {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-right: 8px;
}

.price-original {
  font-size: 14px;
  color: #999;
}

.product-actions {
  display: flex;
  gap: 8px;
}

.btn-add-cart-sm,
.btn-buy-now-sm {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.btn-add-cart-sm {
  background: #fff;
  color: #D30000;
  border: 1px solid #D30000;
}

.btn-add-cart-sm:hover {
  background: #D30000;
  color: #fff;
}

.btn-buy-now-sm {
  background: #D30000;
  color: #fff;
}

.btn-buy-now-sm:hover {
  background: #B00000;
}

/* Specification Table */
.specification-table {
  width: 100%;
  border-collapse: collapse;
}

.specification-table td {
  padding: 12px 0;
  border-bottom: 1px solid #E5E5E5;
}

.spec-label {
  font-weight: 600;
  color: #000;
  width: 40%;
}

.spec-value {
  color: #666;
}

/* Reviews */
.reviews-content {
  max-width: 800px;
}

.reviews-title {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin-bottom: 24px;
}

.review-item {
  padding: 20px 0;
  border-bottom: 1px solid #E5E5E5;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.reviewer-info {
  display: flex;
  gap: 12px;
  align-items: center;
}

.reviewer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.review-rating {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.review-date {
  font-size: 12px;
  color: #999;
}

.review-text {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.review-form-section h5 {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 16px;
}

.rating-input label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.star-rating-selector {
  display: flex;
  gap: 4px;
}

.star-btn {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.star-btn svg path {
  transition: fill 0.3s;
}

/* Modal Styles */
.viewer-360-container,
.viewer-3d-container {
  width: 100%;
  min-height: 500px;
  background: #F9F9F9;
  border-radius: 8px;
}

/* Responsive Design */
@media (max-width: 991.98px) {
  /* 2-column layout starts at md (>=768), so avoid extra top gaps */
  .product-info-content-wrapper,
  .product-info-actions-wrapper {
    margin-top: 0;
  }

  .product-gallery-wrapper {
    position: relative;
  }

  .product-pricing-actions-figma {
    position: relative;
    top: 0;
  }

  .similar-products-slider {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .stock-status-section,
  .quantity-section,
  .delivery-check-section,
  .cta-buttons-section,
  .download-resources-section {
    padding: 0;
  }

  .seller-info-card {
    margin: 0;
  }
}

@media (max-width: 767.98px) {
  .product-title-figma {
    font-size: 24px;
  }

  /* Collapse feature cards only on mobile */
  .features-grid-2x2 {
    grid-template-columns: 1fr;
  }

  .product-tabs-figma .nav-link {
    padding: 8px 12px;
    font-size: 12px;
  }

  .current-price {
    font-size: 24px;
  }

  /* On mobile, keep thumbnails horizontal below the main image.
     minmax(0, 1fr) is required: a plain `1fr` track takes its automatic
     minimum from the widest content (the thumbnail strip), which pushed the
     whole gallery past the right edge of the screen. */
  .product-gallery-hero-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "thumbs";
  }

  /* Keep the gallery inside the viewport even if a child measures wider. */
  .product-gallery-wrapper,
  .product-main-image-container,
  .product-thumbnails-wrapper {
    max-width: 100%;
  }

  .product-image-view-controls {
    top: 10px;
    right: 10px;
  }

  .view-control-btn span {
    display: none;
  }

  .thumbnail-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding-right: 0;
  }

  .thumbnails-strip {
    flex-direction: row;
    gap: 12px;
    padding: 8px 0;
    justify-content: flex-start;
    align-items: center;
  }

  /* Reserve the gutters the arrows sit in so they never cover a thumbnail. */
  .product-thumbnails-wrapper {
    padding: 0 40px;
  }

  .thumbnail-item {
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }

  .thumbnail-nav {
    top: 50%;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  }

  .thumbnail-nav-prev,
  .thumbnail-nav-next {
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .product-thumbnails-wrapper:hover .thumbnail-nav-prev,
  .product-thumbnails-wrapper:hover .thumbnail-nav-next,
  .product-thumbnails-wrapper:focus-within .thumbnail-nav-prev,
  .product-thumbnails-wrapper:focus-within .thumbnail-nav-next {
    opacity: 1;
    pointer-events: auto;
  }

  .thumbnail-nav-prev {
    left: 0;
    right: auto;
  }

  .thumbnail-nav-next {
    right: 0;
    left: auto;
  }

  .thumbnail-nav[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .seller-features-grid {
    grid-template-columns: 1fr;
  }

  .similar-products-slider {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 575.98px) {
  .similar-products-slider {
    grid-template-columns: 1fr;
  }

  .product-actions {
    flex-direction: column;
  }
}

/* ===============================
   RFQ FORM – Scoped Styling
   =============================== */

.rfq-wrapper {
    padding: 0px 0;
}

.rfq-card {
    max-width: 820px;
    background: #ffffff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.rfq-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.rfq-subtitle {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
    max-width: 620px;
}

.rfq-label {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.rfq-input,
.rfq-textarea {
    width: 100%;
    height: 46px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.rfq-textarea {
    height: auto;
    resize: none;
}

.rfq-input:focus,
.rfq-textarea:focus {
    border-color: #2563eb;
    outline: none;
}

.rfq-upload {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 22px;
    text-align: center;
    background: #f8fafc;
}

.rfq-upload p {
    font-size: 14px;
    color: #475569;
    margin-bottom: 10px;
}

.rfq-upload-btn {
    background: #22c55e;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rfq-upload-btn:hover {
    background: #16a34a;
}

.rfq-submit-btn {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 26px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.rfq-submit-btn:hover {
    background: #1e40af;
}


/* =========================
   PRODUCT FAQ – MODERN UI
   ========================= */

.product-faq-wrapper {
    margin-top: 12px;
}

.product-faq-wrapper h4 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #111;
}

/* Accordion container */
#productFaqAccordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Remove default Bootstrap card look */
#productFaqAccordion .card {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s ease, border-color .2s ease;
}

#productFaqAccordion .card:hover {
    border-color: #D30000;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Header */
#productFaqAccordion .card-header {
    padding: 0;
    background: none;
    border: none;
}

/* Question button */
#productFaqAccordion .card-header .btn {
    width: 100%;
    text-align: left;
    padding: 18px 56px 18px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    background: none;
    border: none;
    position: relative;
}

/* Remove ugly focus outline */
#productFaqAccordion .btn:focus {
    box-shadow: none;
}

/* Plus / Minus icon */
#productFaqAccordion .btn::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 500;
    color: #D30000;
    transition: transform .2s ease;
}

/* When expanded */
#productFaqAccordion .btn[aria-expanded="true"] {
    color: #D30000;
}

#productFaqAccordion .btn[aria-expanded="true"]::after {
    content: "–";
}

/* Answer body */
#productFaqAccordion .card-body {
    padding: 0 20px 20px;
    font-size: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* Smooth collapse animation */
.accordion-collapse {
    transition: height .25s ease;
}

/* Empty state */
.product-faq-wrapper .text-muted {
    font-size: 15px;
    padding: 16px;
    background: #F9FAFB;
    border-radius: 10px;
    border: 1px dashed #E5E7EB;
}


/* ---------------- Hotspot Image Focus Button ---------------- */

/* ---------- Hotspot Tooltip Media ---------- */
.hotspot-tooltip-media {
    position: relative;
    margin-top: 8px;
}

.hotspot-tooltip-image {
    width: 100%;
    border-radius: 6px;
    display: block;
}

/* ---------- Camera Focus Icon ---------- */
.hotspot-tooltip-focus-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 6px;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: hotspotFocusPulse 1.8s ease-in-out infinite;
}

@keyframes hotspotFocusPulse {
    0% { transform: scale(1); opacity: .9; }
    50% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: .9; }
}

/* ---------- Modal ---------- */
.hotspot-image-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.hotspot-image-modal.active {
    display: block;
}

.hotspot-image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
}

.hotspot-image-modal-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hotspot-image-modal-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
}

.hotspot-image-modal-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    max-width: 90vw;
}

.hotspot-image-modal-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    max-width: min(720px, 90vw);
}

.hotspot-image-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 32px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* Hotspot video modal metadata (shared video modal; populated only for hotspot triggers) */
.media-video-meta-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 600;
    color: #111;
}

.media-video-meta-desc {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: #5f5f5f;
}

/* ============================================================
   Product Documentation — PDF Preview Modal (customer product page)
   Scoped to #modalPdfView. Additive; reuses the Bootstrap modal base.
   ============================================================ */
#modalPdfView .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

#modalPdfView .modal-header {
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f3;
}

.pdf-preview-modal__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pdf-preview-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fdecec;
    color: #e23b3b;
    flex: 0 0 auto;
}

.pdf-preview-modal__titles {
    min-width: 0;
}

#modalPdfView .modal-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: #1f2430;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-preview-modal__subtitle {
    display: block;
    font-size: 12px;
    color: #8a909c;
    margin-top: 2px;
}

#modalPdfView .modal-body {
    padding: 0;
    background: #f4f5f7;
}

.pdf-preview-modal__viewport {
    position: relative;
    width: 100%;
    height: 75vh;
    min-height: 360px;
}

.pdf-preview-modal__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #f4f5f7;
}

.pdf-preview-modal__loading,
.pdf-preview-modal__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: #f4f5f7;
}

.pdf-preview-modal__fallback svg {
    color: #e23b3b;
    margin-bottom: 12px;
}

.pdf-preview-modal__fallback-text {
    font-size: 15px;
    color: #4b5563;
    margin: 0 0 16px;
}

#modalPdfView .modal-footer {
    padding: 14px 22px;
    border-top: 1px solid #eef0f3;
    gap: 8px;
}

#modalPdfView .modal-footer .js-media-pdf-download svg {
    vertical-align: -3px;
    margin-right: 6px;
}

/* Uploaded-PDF card body acts as the preview trigger. */
.download-item .download-info[role="button"] {
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .pdf-preview-modal__viewport {
        height: 68vh;
        min-height: 300px;
    }

    #modalPdfView .modal-header,
    #modalPdfView .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================
   FAQ Page
   ============================================ */

.gs-faq-section .faq-page-title {
  font-size: 20px;
  font-weight: 700;
  color: #1f0300;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Question headers were 24px against 18px answers; match them up. */
.gs-faq-section .faq-box .hyp-accordians .accordion-button {
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .gs-faq-section .faq-page-title {
    font-size: 17px;
  }

  .gs-faq-section .faq-box .hyp-accordians .accordion-button {
    font-size: 16px;
  }
}

/* Theme 4 header: live cart count badge on the cart icon. */
.t4-iconlink--cart {
  position: relative;
}

.t4-iconlink--cart .t4-cart-count {
  position: absolute;
  top: -6px;
  left: 12px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e11d2e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

/* ============================================
   Cart Page - typography + real tabular layout
   ============================================ */

/* Headers were 20px Saira against 18px body text, and the table had no
   column structure at all. Normalise the type scale and give the table
   header/rows proper tabular separation. */
.gs-cart-section .gs-cart-container .gs-cart-row .cart-table {
  border: 1px solid #e6e2e1;
  border-radius: 8px;
  overflow-x: auto;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table {
  margin-bottom: 0;
  table-layout: fixed;
  min-width: 620px;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table thead tr {
  background-color: #f8f7f7;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table thead th {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1f0300;
  text-align: center;
  padding: 14px 10px;
  border-bottom: 1px solid #e6e2e1;
  white-space: nowrap;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table thead th:first-child {
  text-align: left;
  padding-left: 16px;
}

/* Fixed column proportions so header labels sit above their own cells. */
.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table thead th:nth-child(1) { width: 40%; }
.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table thead th:nth-child(2) { width: 14%; }
.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table thead th:nth-child(3) { width: 18%; }
.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table thead th:nth-child(4) { width: 16%; }
.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table thead th:nth-child(5) { width: 12%; }

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody td {
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f0edec;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody tr:last-child td {
  border-bottom: none;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-product-area {
  width: auto;
  text-align: left;
  padding-left: 16px;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-product {
  width: auto;
  align-items: center;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-product img {
  height: 72px;
  width: 72px;
  object-fit: contain;
  flex: 0 0 72px;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-product .cart-product-info .cart-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 0;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-price {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-quantity {
  justify-content: center;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-quantity input {
  font-size: 15px;
  font-weight: 500;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-quantity .cart-quantity-btn {
  /*width: 32px;*/
  height: 32px;
  padding: 0;
  border-radius: 4px;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-remove-btn svg {
  width: 20px;
  height: 20px;
}

/* Summary column: match the same type scale as the table. */
.gs-cart-section .gs-cart-container .gs-cart-row .cart-summary .cart-summary-title {
  font-size: 18px;
  margin-bottom: 24px;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-summary .cart-summary-content .cart-summary-subtitle {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.gs-cart-section .gs-cart-container .gs-cart-row .cart-summary .cart-summary-content .cart-summary-price {
  font-size: 15px;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table thead th,
  .gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-price,
  .gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-product .cart-product-info .cart-title {
    font-size: 13px;
  }

  .gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table tbody .cart-product img {
    height: 56px;
    width: 56px;
    flex: 0 0 56px;
  }
}

/* ============================================
   Mobile: Theme 4 category strip + product breadcrumb
   ============================================ */

@media (max-width: 767.98px) {
  /* The icon box is 44px but the image inside was hard-set to 64px, so icons
     spilled out of their slide and got clipped by the slick viewport at both
     edges (and collided with the neighbouring item). */
  .t4-categories .t4-cat__icon {
    width: 40px;
    height: 40px;
  }

  .t4-categories .t4-cat__icon img,
  .t4-cat__icon img {
    width: 40px;
    height: 40px;
    max-width: 100%;
  }

  .t4-categories .t4-cat__link {
    grid-template-rows: 40px auto;
    gap: 6px;
    width: 100%;
  }

  /* Titles were capped at a fixed 140px which is wider than a mobile slide,
     so long names ran under the next item. */
  .t4-categories .t4-cat,
  .t4-cat {
    padding: 12px 4px;
  }

  .t4-categories .t4-cat__title,
  .t4-cat__title {
    max-width: 100%;
    font-size: 12px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Category chip + title: tighter type so the block stays compact on phones. */
  .product-title-block {
    margin-bottom: 14px;
  }

  .product-category-chip {
    font-size: 12px;
    padding: 4px 10px 4px 7px;
  }

  .product-page-title {
    font-size: 19px;
    margin-top: 8px;
  }

  .product-title-meta {
    font-size: 12px;
    gap: 6px;
  }

  /* Breadcrumb wrapped into an indented staircase; keep every line flush left. */
  .product-breadcrumb-simple .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 2px;
  }

  .product-breadcrumb-simple .breadcrumb-item {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
  }

  .product-breadcrumb-simple .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 6px;
  }
}

/* ============================================
   Order Tracking page - breathing room under the header
   ============================================ */

.rc-order-track-page {
  padding-top: 56px !important;
}

.rc-order-track-page__head {
  margin-bottom: 40px !important;
}

.rc-order-track-page__head h2 {
  margin-bottom: 10px;
}

@media (max-width: 767.98px) {
  .rc-order-track-page {
    padding-top: 32px !important;
  }

  .rc-order-track-page__head {
    margin-bottom: 28px !important;
  }
}

/* ============================================
   Theme 4 home hero - video play button + demo modal
   ============================================ */

.theme4-home .t4-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.theme4-home .t4-hero__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  cursor: pointer;
  padding-left: 3px; /* optically centre the triangle */
  transition: background var(--t4-dur) var(--t4-ease), transform var(--t4-dur) var(--t4-ease);
}

.theme4-home .t4-hero__play:hover,
.theme4-home .t4-hero__play:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.06);
  outline: none;
}

.t4-video-modal__content {
  position: relative;
  background: #000;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.t4-video-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  padding: 8px;
  opacity: 1;
}

.t4-video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.t4-video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 575.98px) {
  .theme4-home .t4-hero__play {
    width: 40px;
    height: 40px;
  }

  .theme4-home .t4-hero__actions {
    gap: 12px;
  }
}

/* ============================================
   CMS pages (Terms, Privacy, About...) - spacing + section/title rhythm
   ============================================ */

/* The shared blog wrapper padded 120px top/bottom, which left a large empty
   band between the breadcrumb banner and the first line of content. */
.rc-cms-page {
  padding: 48px 0 72px;
}

.rc-cms-page .gs-blog-card {
  background: #fff;
  border-radius: 10px;
  padding: 40px;
}

.rc-cms-content {
  font-size: 15px;
  line-height: 1.75;
  color: #3d3d3d;
}

.rc-cms-content > *:first-child {
  margin-top: 0;
}

.rc-cms-content > *:last-child {
  margin-bottom: 0;
}

.rc-cms-content p {
  margin: 0 0 16px;
}

/* Section / sub-section titles: give each level its own size and air. */
.rc-cms-content h1,
.rc-cms-content h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #1f0300;
  margin: 40px 0 16px;
}

.rc-cms-content h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: #1f0300;
  margin: 32px 0 12px;
}

.rc-cms-content h4,
.rc-cms-content h5,
.rc-cms-content h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f0300;
  margin: 24px 0 10px;
}

.rc-cms-content ul,
.rc-cms-content ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.rc-cms-content li {
  margin-bottom: 8px;
}

.rc-cms-content strong,
.rc-cms-content b {
  color: #1f0300;
  font-weight: 600;
}

.rc-cms-content a {
  color: #d30000;
  text-decoration: underline;
}

.rc-cms-content table {
  width: 100%;
  margin-bottom: 20px;
}

.rc-cms-content img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 991.98px) {
  .rc-cms-page {
    padding: 32px 0 48px;
  }

  .rc-cms-page .gs-blog-card {
    padding: 24px 18px;
  }
}

@media (max-width: 575.98px) {
  .rc-cms-content {
    font-size: 14px;
    line-height: 1.7;
  }

  .rc-cms-content h1,
  .rc-cms-content h2 {
    font-size: 20px;
    margin: 30px 0 12px;
  }

  .rc-cms-content h3 {
    font-size: 17px;
    margin: 24px 0 10px;
  }

  .rc-cms-content h4,
  .rc-cms-content h5,
  .rc-cms-content h6 {
    font-size: 15px;
    margin: 20px 0 8px;
  }
}

/* ============================================
   Blog listing page - title, spacing, sticky sidebar
   ============================================ */

/* Shared blog wrapper padded 120px, leaving a dead band under the banner. */
.rc-blog-page {
  padding: 40px 0 72px;
}

.rc-blog-page__head {
  margin-bottom: 24px;
}

.rc-blog-page__title {
  font-size: 26px;
  font-weight: 700;
  color: #1f0300;
  margin: 0;
}

/* Post card headline was h4-sized and overpowered the excerpt. */
.rc-blog-page .gs-main-single-blog .right-side-content h4 {
  margin-bottom: 0;
}

.rc-blog-page .gs-main-single-blog .right-side-content .title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
}

.rc-blog-page .gs-main-single-blog .right-side-content .des {
  font-size: 14px;
  line-height: 1.6;
}

/* Recent posts: 20px titles pushed the thumbnail/text rows out of alignment. */
.rc-blog-page .single-blog-widget .gs-sm-recent-post-wrapper .recent-post {
  align-items: center;
}

.rc-blog-page .single-blog-widget .gs-sm-recent-post-wrapper .recent-post img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex: 0 0 64px;
  border-radius: 6px;
}

.rc-blog-page .single-blog-widget .gs-sm-recent-post-wrapper .post-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 4px;
}

.rc-blog-page .single-blog-widget .gs-sm-recent-post-wrapper .post-date {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.rc-blog-page .single-blog-widget .gs-sm-recent-post-wrapper .post-date svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* Sidebar follows the (much taller) post list instead of leaving dead space. */
@media (min-width: 992px) {
  /* The Bootstrap column is the sticky containing block, so it must be allowed
     to stretch to the full row height for the sidebar to travel with the list. */
  .rc-blog-page .row > .col-lg-4 {
    align-self: stretch;
  }

  .rc-blog-page .gs-blog-sidebar-wrapper {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Hide scrollbar - Firefox */
    scrollbar-width: none;

    /* Hide scrollbar - IE / old Edge */
    -ms-overflow-style: none;
  }

  /* Hide scrollbar - Chrome, Edge, Safari */
  .rc-blog-page .gs-blog-sidebar-wrapper::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .rc-blog-page {
    padding: 28px 0 48px;
  }

  .rc-blog-page__title {
    font-size: 22px;
  }
}

/* ============================================
   Theme 4 home - promo strip + bottom banners as sliders
   ============================================ */

/* Grid is only the pre-init fallback; slick swaps in its own track. */
.theme4-home .t4-promo-row.slick-initialized {
  display: block;
  grid-template-columns: none;
}

.theme4-home .t4-promo-row:not(.slick-initialized) .t4-promo:nth-child(n + 5) {
  display: none;
}

.theme4-home .t4-promo-row .slick-list {
  margin: 0 calc(var(--t4-sp-4) / -2);
}

.theme4-home .t4-promo-row .slick-slide {
  height: auto;
}

.theme4-home .t4-promo-row .slick-slide > div {
  margin: 0 calc(var(--t4-sp-4) / 2);
}

.theme4-home .t4-promo-row .t4-promo {
  display: block;
}

/* Bottom banners: each of the two image tiles is its own slider. */
.theme4-home .t4-title-row--bottom {
  padding-top: var(--t4-sp-6);
}

.theme4-home .t4-bottom-banner--slider {
  position: relative;
  padding: 0;
}

.theme4-home .t4-bottom-banner--slider:not(.slick-initialized) .t4-bottom-banner__slide:not(:first-child) {
  display: none;
}

.theme4-home .t4-bottom-banner__slide {
  display: block;
}

/* Fixed slide height keeps the pair level with the Track Order tile and
   avoids relying on a % height chain through slick's generated wrappers. */
.theme4-home .t4-bottom-banner__slide img {
  width: 100%;
  height: clamp(140px, 10vw, 170px);
  object-fit: cover;
  display: block;
}

.theme4-home .t4-bottom-banner--slider .slick-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
}

.theme4-home .t4-bottom-banner--slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.theme4-home .t4-bottom-banner--slider .slick-dots li button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  border: none;
  text-indent: -9999px;
  overflow: hidden;
}

.theme4-home .t4-bottom-banner--slider .slick-dots li button:before {
  content: none;
}

.theme4-home .t4-bottom-banner--slider .slick-dots li.slick-active button {
  background: #fff;
}

@media (max-width: 767.98px) {
  .theme4-home .t4-bottom-banner__slide img {
    height: clamp(120px, 18vw, 150px);
  }
}

/* The banner tile no longer lifts on hover while sliding (avoids clipping). */
.theme4-home .t4-bottom-banner--slider:hover {
  transform: none;
}

/* ============================================
   Theme 4 category page - review fixes (desktop)
   ============================================ */

/* Filter panel follows the (much taller) main column instead of leaving a
   long empty gutter below it. */
@media (min-width: 992px) {
  .t4-category-page .t4-sidebar {
    position: sticky;
    top: 50px;
    align-self: start;

    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Hide scrollbar - Firefox */
    scrollbar-width: none;

    /* Hide scrollbar - IE/old Edge */
    -ms-overflow-style: none;
  }

  /* Hide scrollbar - Chrome, Edge, Safari */
  .t4-category-page .t4-sidebar::-webkit-scrollbar {
    display: none;
  }
}

  .t4-category-page .t4-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .t4-category-page .t4-sidebar::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
  }
}
@media (min-width: 1440px) {
.t4-sidebar {
  margin-top: 15px;
}
}

/* "Filters" header sat flush against the card edge and out of line with the
   sections below it. Give it the same inner rhythm + a divider. */
.t4-category-page .t4-filter {
  padding: 18px 18px 12px;
}

.t4-category-page .t4-filter__top {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f1f1;
  min-height: 34px;
}

.t4-category-page .t4-filter__title {
  line-height: 1.2;
}

/* Explore tiles: icons were 42px, much smaller than the top category strip. */
.t4-category-page .t4-explore-item {
  min-width: 118px;
  /* Each tile is a link to its subcategory page - keep it above any sibling
     that could otherwise sit over it and swallow the click. */
  position: relative;
  z-index: 1;
  cursor: pointer;
  text-decoration: none;
}

.t4-category-page .t4-explore-item img {
  width: 64px;
  height: 64px;
}

.t4-category-page .t4-explore-name {
  font-size: 12px;
}

.t4-category-page .t4-explore-count {
  font-size: 11px;
}

.t4-category-page .t4-explore-row__header {
  margin-bottom: 14px;
}

.t4-category-page .t4-explore-row__header h4 {
  font-size: 16px;
}

/* Arrow buttons: the glyph was not optically centred and the hit area was
   too small. Align the explore arrows with the carousel controls. */
.t4-category-page .t4-circle-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  flex: 0 0 auto;
}

.t4-category-page .t4-arrow-group {
  align-items: center;
  flex: 0 0 auto;
}

.t4-category-page .t4-product-carousel-section__controls .t4-circle-btn.is-disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: default;
  pointer-events: none;
}

.t4-category-page .t4-product-carousel-section__header {
  gap: 16px;
  flex-wrap: nowrap;
}

.t4-category-page .t4-product-carousel-section__title {
  min-width: 0;
}

.t4-category-page .t4-product-carousel-section__controls {
  flex: 0 0 auto;
}

/* Category spotlight: 400px media + 32px title made the block far taller
   than its content needed, and `cover` chopped both edges off the image. */
.t4-category-page .t4-main-category-spotlight {
  padding: 24px;
  gap: 28px;
  margin-bottom: 24px;
}

/* Standard 16:9 frame instead of an arbitrary pixel height, so the media box
   keeps one predictable ratio at every breakpoint. */
.t4-category-page .t4-main-category-spotlight__media {
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  /* Grid items stretch by default, which would override the ratio. */
  align-self: start;
  padding: 0;
}

.t4-category-page .t4-main-category-spotlight__title {
  font-size: 22px;
}

.t4-category-page .t4-main-category-spotlight__content {
  gap: 14px;
}

.t4-category-page .t4-main-category-spotlight__description {
  font-size: 14px;
}

.t4-category-page .t4-main-category-spotlight__features li {
  font-size: 13px;
}

/* Brand logos strip now sits above "Explore Products Categories". */
.t4-category-page .t4-hero-card .t4-brand-logos-strip {
  margin-top: 0;
  margin-bottom: 18px;
}

@media (max-width: 991.98px) {
  .t4-category-page .t4-main-category-spotlight__media {
    height: auto;
  }

  .t4-category-page .t4-main-category-spotlight__title {
    font-size: 19px;
  }
}

/* ============================================
   Theme 4 category page - mobile review fixes (30.png)
   ============================================ */

@media (min-width: 768px) and (max-width: 1199.98px) {

  .t4-category-page .t4-explore-scroll {
    gap: 16px;
  }

  .t4-category-page .t4-explore-item {
    flex: 0 0 110px;
    width: 110px;
    min-width: 110px;
  }

  .t4-category-page .t4-explore-item img {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
  }

  .t4-category-page .t4-explore-name {
    font-size: 11px;
    line-height: 1.25;
  }

  .t4-category-page .t4-explore-count {
    font-size: 10px;
    line-height: 1.2;
  }
}

@media (max-width: 767.98px) {
  /* Page gutters were 24px each side, squeezing every card. */
  .t4-category-page .t4-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .t4-category-page .t4-category-grid {
    gap: 14px;
  }

  /* The Filters trigger sat alone on a wide row of dead space. */
  .t4-category-page .t4-filterbar {
    margin: 0 0 10px;
    justify-content: stretch;
  }

  .t4-category-page .t4-filterbar .t4-filter-toggle {
    width: 100%;
    height: 40px;
  }

  /* Explore tiles: 22px gaps ate most of the row on a phone. */
  .t4-category-page .t4-explore-scroll {
    gap: 12px;
  }

  .t4-category-page .t4-explore-item {
    min-width: 96px;
  }

  .t4-category-page .t4-explore-item img {
    width: 52px;
    height: 52px;
  }

  .t4-category-page .t4-explore-row {
    margin-bottom: 14px;
  }

  .t4-category-page .t4-explore-row__header {
    margin-bottom: 10px;
  }

  .t4-category-page .t4-explore-row__header h4 {
    font-size: 14px;
  }

  /* Spotlight + brand strip stretched to the full column width. */
  .t4-category-page .t4-main-category-spotlight {
    padding: 16px;
    gap: 16px;
    margin-top: 0;
    margin-bottom: 18px;
  }

  .t4-category-page .t4-main-category-spotlight__media {
    height: auto;
    padding: 8px;
  }

  .t4-category-page .t4-brand-logos-strip {
    padding: 14px 12px;
    margin-bottom: 14px;
  }

  .t4-category-page .t4-brand-logo-item {
    padding: 8px 14px;
  }

  /* Section header arrows collided with the wrapped title. */
  .t4-category-page .t4-product-carousel-section {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .t4-category-page .t4-product-carousel-section__header {
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }

  .t4-category-page .t4-product-carousel-section__title {
    font-size: 16px;
    line-height: 1.3;
  }

  .t4-category-page .t4-product-carousel-section__controls .t4-circle-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  /* Two cards fully visible at a time instead of 1.5 clipped ones. */
  .t4-category-page .t4-product-carousel {
    gap: 10px;
  }

  .t4-category-page .t4-product-carousel__slide {
    width: calc(50% - 5px);
    min-width: calc(50% - 5px);
  }

  .t4-category-page .t4-product-grid {
    gap: 10px;
  }

  /* "Add to Cart" was clipped to "to" - let the pair share the row evenly. */
  .t4-category-page .t4-card-product__actions {
    gap: 6px;
  }

  .t4-category-page .t4-card-product__actions .t4-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    padding: 0 6px;
    font-size: 11px;
    white-space: nowrap;
    text-align: center;
  }

   .t4-category-page .t4-explore-scroll {
    gap: 12px;
  }

  .t4-category-page .t4-explore-item {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
  }

  .t4-category-page .t4-explore-item img {
    width: 52px;
    height: 52px;
    margin-bottom: 5px;
  }

  .t4-category-page .t4-explore-text {
    gap: 1px;
  }

  .t4-category-page .t4-explore-name {
    font-size: 11px;
    line-height: 1.2;
  }

  .t4-category-page .t4-explore-count {
    font-size: 10px;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .t4-category-page .t4-product-carousel__slide {
    width: calc(50% - 5px);
    min-width: calc(50% - 5px);
  }
}

/* ============================================
   Theme 4 home - hero copy on small phones
   The title floor was 26px, which on a ~280px viewport wrapped across the
   mechanic photo and left the CTA cramped. Scale the whole copy block down.
   ============================================ */

/* Two versions of the hero description live in the markup; only one is ever
   shown. Default (tablet and up) = the full sentence. */
.theme4-home .t4-hero__sub--short {
  display: none;
}

@media (max-width: 575.98px) {
  .theme4-home .t4-hero__title {
    font-size: clamp(18px, 5.2vw, 26px);
    line-height: 1.18;
    margin-bottom: 8px;
  }

  /* On phones the full sentence was clamped and cut mid-word; swap in the
     3-word version so the line always reads complete. */
  .theme4-home .t4-hero__sub--full {
    display: none;
  }

  .theme4-home .t4-hero__sub--short {
    display: block;
  }

  .theme4-home .t4-hero__sub {
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 12px;
  }

  .theme4-home .t4-hero__cta {
    padding: 10px 20px;
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .theme4-home .t4-hero__title {
    font-size: clamp(16px, 6vw, 20px);
  }

  .theme4-home .t4-hero__sub {
    font-size: 12px;
  }

  .theme4-home .t4-hero__cta {
    padding: 9px 16px;
    font-size: 12px;
  }
}

/* ============================================
   Theme 4 home - BESTSELLERS card
   The thumbnail sized itself from its own intrinsic dimensions (only capped by
   a percentage max-height), so a tall image grew past the fixed media box and
   painted over the rating / title / price rows. Pin the media box, clip it and
   let the image scale to fit inside it; the meta block then gets its own row
   and its own background so nothing can ever land on top of it.
   ============================================ */

.theme4-home .t4-product__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.theme4-home .t4-product__imgwrap {
  flex: 0 0 190px;
  height: 190px;
  min-height: 290px;
  overflow: hidden;
  padding: 12px;
  box-sizing: border-box;
}

.theme4-home .t4-product__img {
  width: 100%;
  height: 100%;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.theme4-home .t4-product__meta {
  position: relative;
  z-index: 1;
  background: #fff;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #f3f4f6;
}

/* Two lines max, so a long name can't push the price row around. */
.theme4-home .t4-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.theme4-home .t4-product__price {
  margin-top: auto;
}

@media (max-width: 767.98px) {
  .theme4-home .t4-product__imgwrap {
    flex-basis: 150px;
    height: 150px;
    min-height: 250px;
    padding: 10px;
  }
}

/* ============================================
   Theme 4 - carousel arrow marks
   The raw "‹ / ›" glyphs render thin, sit off the optical centre and change
   shape with the font. Keep the circular buttons (they are the wanted part)
   and draw a real chevron inside them instead. Markup is untouched: the glyph
   text is hidden and the chevron is painted as a mask in `currentColor`, so
   every existing colour/hover rule still applies.
   ============================================ */

.t4-category-page .t4-circle-btn,
.t4-category-page .t4-cat-banner-arrow {
  /* Hide the ‹ / › text node without removing it from the DOM. */
  font-size: 0 !important;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.t4-category-page .t4-circle-btn::before,
.t4-category-page .t4-cat-banner-arrow::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

/* "Previous" points the other way. Covers every arrow flavour on the page:
   explore row, product carousels, paginated ALL PRODUCTS header and the
   category banner - including the disabled <span> variants, which carry no
   direction class and are matched structurally. */
.t4-category-page .t4-circle-btn[data-dir="prev"]::before,
.t4-category-page .t4-product-carousel-prev::before,
.t4-category-page .t4-cat-banner-prev::before,
.t4-category-page .t4-arrow-group > *:first-child::before,
.t4-category-page .t4-product-carousel-section__controls > *:first-child::before {
  transform: rotate(180deg);
}

/* Slightly larger chevron in the bigger solid buttons. */
.t4-category-page .t4-product-carousel-section__controls .t4-circle-btn::before {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.t4-category-page .t4-cat-banner-arrow::before {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

/* Give the outlined explore arrows the same affordance as the solid ones. */
.t4-category-page .t4-arrow-group .t4-circle-btn {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.t4-category-page .t4-arrow-group .t4-circle-btn:hover {
  background: #e11d2e;
  color: #fff;
}

@media (max-width: 767.98px) {
  .t4-category-page .t4-circle-btn::before {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }

  .t4-category-page .t4-product-carousel-section__controls .t4-circle-btn::before {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}

/* ============================================
   Product page - "Similar In Stock Products" on mobile
   The auto-fill grid collapsed to a single column, so every card landed on its
   own line and the strip could not scroll. Turn it into the same two-up
   horizontal strip the category page carousels use.
   ============================================ */

@media (max-width: 767.98px) {
  .similar-products-slider {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .similar-products-slider::-webkit-scrollbar {
    display: none;
  }

  /* Exactly two cards per page. */
  .similar-product-card {
    flex: 0 0 calc(50% - 6px);
    width: calc(50% - 6px);
    min-width: calc(50% - 6px);
    scroll-snap-align: start;
    padding: 12px;
  }

  /* Hover lift inside a scroller just makes the row twitch. */
  .similar-product-card:hover {
    transform: none;
  }

  .similar-product-card img {
    height: 120px;
    margin-bottom: 10px;
  }

  .similar-product-card h5 {
    font-size: 13px;
    min-height: 34px;
  }

  .similar-product-card .product-badge-best,
  .similar-product-card .product-badge-discount {
    top: 8px;
    padding: 3px 6px;
    font-size: 10px;
  }

  /* The empty state is no longer a grid item. */
  .similar-products-empty {
    flex: 0 0 100%;
    width: 100%;
  }

  .similar-products-section .section-heading {
    font-size: 18px;
    margin-bottom: 18px;
  }
}