:root {
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.04);
  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.04);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  /* lock the viewport against horizontal scroll/drag site-wide.
     overflow-x:hidden = fallback for old browsers; overflow-x:clip = modern,
     clips the overflow WITHOUT becoming a scroll container (so position:sticky,
     e.g. the desktop product image, keeps working). */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--bg);
  overflow-x: clip;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button,
a {
  transition: color 200ms var(--ease-standard), background 200ms var(--ease-standard), border-color 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}

:focus-visible {
  outline: 3px solid hsl(199 89% 48% / 0.36);
  outline-offset: 3px;
}

/* skip link */
.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  color: #fff;
  background: var(--wp--preset--color--brand-ink);
  border-radius: var(--r);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* announcement bar — scrolling ticker */
.announcement-bar {
  overflow: hidden;
  height: 40px;
  background: hsl(199 89% 56%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.announcement-bar__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;          /* size to the content so -50% == exactly one half */
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll 38s linear infinite;
}

.announcement-bar__item {
  flex-shrink: 0;
  padding-inline: 1.5rem;
}

/* no separator dots between items */
.announcement-bar__item::after {
  content: none;
}

/* base button */
.button {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--r-pill);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--text);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.button--primary {
  color: #fff;
  background: var(--wp--preset--color--brand);
  border-color: var(--wp--preset--color--brand);
}

/* site header group — sticky wrapper */
.site-header-group {
  position: sticky;
  top: 0;
  z-index: 200;
}

.site-header {
  background: rgb(255 255 255 / 0.96);
  border-bottom: 1px solid var(--wp--preset--color--border);
  backdrop-filter: blur(16px);
}

/* container: 3-column CSS Grid — wider so all nav text + logo + tagline + actions fit
   [LEFT 1fr] [LOGO auto] [RIGHT 1fr] */
.site-header__container {
  position: relative;
  display: grid;
  /* side tracks size to their content (min-content floor) so the no-wrap nav
     can never overflow and crash into the centered logo — it pushes instead */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 1rem;
  width: min(100% - 2rem, 1440px);
  min-height: 88px;
  margin-inline: auto;
  transition: min-height 300ms var(--ease-out);
}

.site-header.is-compact .site-header__container {
  min-height: 72px;
}

/* LEFT column — full nav text is shown (no clipping) */
.site-header__left {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  overflow: visible;
}

.site-header__nav {
  display: flex;
  align-items: center;
  overflow: visible;
}

/* CENTER column — logo (icon + 2-line text), natural width, perfectly centered */
.site-header__logo {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.site-logo__icon {
  flex-shrink: 0;
  display: block;
  width: 40px;
  height: 40px;
}

.site-logo__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1;
}

.site-logo__wordmark {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--wp--preset--color--brand-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.site-logo__wordmark b {
  color: var(--wp--preset--color--brand);
  font-weight: 800;
  font-style: italic;
}

.site-logo__tagline {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--wp--preset--color--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* ----- New image logo (replaces the inline SVG + wordmark) ----- */
.site-logo-img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}
.site-logo-img--header {
  height: 56px;
  max-height: 56px;
  max-width: 260px;
}
.site-logo-img--mobile {
  height: 44px;
  max-height: 44px;
  max-width: 200px;
}
.site-logo-img--footer {
  height: 48px;
  max-height: 48px;
  max-width: 240px;
}
@media (max-width: 768px) {
  .site-logo-img--header { height: 44px; max-width: 200px; }
}

/* RIGHT column — mirror of .site-header__left */
.site-header__actions {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

.site-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--brand-ink);
  cursor: pointer;
  flex-shrink: 0;
}

.site-header__icon-btn:hover {
  background: var(--wp--preset--color--surface-2);
}

.site-header__cart-btn {
  position: relative;
  background: #19b4eb;
  color: #fff;
}
.site-header__cart-btn:hover {
  background: #0f9bd0;
}
/* Vertically center the (slightly bottom-heavy) cart glyph inside the circle */
.site-header__cart-btn svg {
  display: block;
  margin-top: -1px;
}

.site-header__cart-count {
  position: absolute;
  top: -1px;
  right: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0.875rem;
  height: 0.875rem;
  padding: 0 0.125rem;
  background: #fff;
  color: #0b1f33;
  border: 1px solid #e3e9f0;
  box-shadow: 0 1px 3px rgba(11, 31, 51, 0.18);
  border-radius: var(--r-pill);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
}

.site-header__account-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  color: var(--wp--preset--color--brand-ink);
  background: var(--wp--preset--color--surface-2);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-header__account-link:hover {
  background: var(--wp--preset--color--brand-ink);
  color: #fff;
  border-color: var(--wp--preset--color--brand-ink);
}

.site-header__hamburger {
  /* visible only on mobile — toggled via media query */
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--r);
  background: transparent;
  color: var(--wp--preset--color--brand-ink);
  cursor: pointer;
  flex-shrink: 0;
  order: -1; /* always first inside .site-header__left */
}

/* scrolling ticker */
.scrolling-ticker {
  overflow: hidden;
  height: 36px;
  background: var(--wp--preset--color--brand);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: ticker-scroll 28s linear infinite;
}

.ticker-item {
  flex-shrink: 0;
  padding-inline: 2rem;
}

.ticker-item::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 5px;
  height: 5px;
  margin-left: 2rem;
  background: rgb(255 255 255 / 0.5);
  border-radius: 50%;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* mega menu */
.toop-mega-menu {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toop-mega-menu__item {
  position: static;
}

.toop-mega-menu__link,
.toop-mega-menu__toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.55rem;
  color: var(--wp--preset--color--text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.toop-mega-menu__link:hover,
.toop-mega-menu__toggle:hover,
.toop-mega-menu__item--dropdown.is-open .toop-mega-menu__toggle {
  background: var(--wp--preset--color--surface-2);
  color: var(--wp--preset--color--brand-ink);
}

.toop-mega-menu__chevron {
  transition: transform 200ms var(--ease-out);
}

.toop-mega-menu__item--dropdown.is-open .toop-mega-menu__chevron {
  transform: rotate(180deg);
}

.toop-mega-menu__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #f4f6f8;
  color: #1f2d4a;
  border-top: 1px solid #e6eaef;
  box-shadow: 0 18px 36px -18px rgb(20 33 59 / 0.28);
  z-index: 10;
}

.toop-mega-menu__item--dropdown.is-open .toop-mega-menu__panel {
  display: block;
}

/* Hover-to-open on devices with a real pointer (desktop). */
@media (hover: hover) and (pointer: fine) {
  .toop-mega-menu__item--dropdown:hover > .toop-mega-menu__panel {
    display: block;
  }
  .toop-mega-menu__item--dropdown:hover > .toop-mega-menu__toggle {
    background: var(--wp--preset--color--surface-2);
    color: var(--wp--preset--color--brand-ink);
  }
  .toop-mega-menu__item--dropdown:hover > .toop-mega-menu__toggle .toop-mega-menu__chevron {
    transform: rotate(180deg);
  }
}

.toop-mega-menu__panel-inner {
  width: min(100% - 2rem, 1280px);
  margin-inline: auto;
  padding-block: 1.75rem;
  max-height: 76vh;
  overflow-y: auto;
}

.toop-mega-menu__cat-title {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a93a0;
}

.toop-mega-menu__cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 22px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toop-mega-menu__cat-grid--pallet {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 920px;
  margin-inline: auto;
  gap: 32px;
  padding-block: 8px;
}

.toop-mega-menu__cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 6px;
  background: transparent;
  border: 0;
  color: #1f2d4a;
  text-decoration: none;
}

.toop-mega-menu__cat-thumb {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px -14px rgb(20 33 59 / 0.4);
  transition: transform 260ms var(--ease-out), box-shadow 260ms;
}

.toop-mega-menu__cat-card--pallet .toop-mega-menu__cat-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  padding: 28px;
  background: #fff;
}
.toop-mega-menu__cat-card--pallet .toop-mega-menu__cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.toop-mega-menu__cat-card:hover .toop-mega-menu__cat-thumb {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px -16px rgb(20 33 59 / 0.5);
}

.toop-mega-menu__cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.toop-mega-menu__cat-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2c3e50;
  transition: color 200ms;
}

.toop-mega-menu__cat-card:hover .toop-mega-menu__cat-name {
  color: #19b4eb;
}

.toop-mega-menu__cat-card--pallet .toop-mega-menu__cat-name {
  font-size: 0.95rem;
}

/* Carousel (Refrigerants by LBS / Refrigerant by Type) */
.toop-mega-menu__carousel {
  position: relative;
}

.toop-mega-menu__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.toop-mega-menu__track::-webkit-scrollbar {
  display: none;
}

.toop-mega-menu__track .toop-mega-menu__cat-card {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
}

.toop-mega-menu__car-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1f2d4a;
  box-shadow: 0 6px 18px -6px rgb(20 33 59 / 0.4);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, color 200ms, opacity 200ms;
}

.toop-mega-menu__car-arrow:hover {
  background: #19b4eb;
  color: #fff;
}

.toop-mega-menu__car-prev {
  left: -8px;
}

.toop-mega-menu__car-next {
  right: -8px;
}

.toop-mega-menu__car-arrow[hidden] {
  opacity: 0;
  pointer-events: none;
}

/* Legacy dialog rules kept harmless — only .search-drawer below is in active use. */
.cart-drawer { display: none; }

/* ---- Search drawer (slides down from top) ---- */
.search-drawer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.search-drawer[hidden] { display: none; }
.search-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 18, 31, 0.5);
  opacity: 0; transition: opacity .22s ease;
  pointer-events: none;
}
.search-drawer.is-open .search-drawer__backdrop { opacity: 1; pointer-events: auto; }
.search-drawer__panel {
  position: absolute; top: 0; left: 0; right: 0;
  background: #fff;
  padding: 18px 16px;
  transform: translateY(-100%);
  transition: transform .26s ease;
  pointer-events: auto;
  box-shadow: 0 6px 28px -10px rgba(20, 33, 59, 0.35);
}
.search-drawer.is-open .search-drawer__panel { transform: translateY(0); }
.search-drawer__form {
  display: flex; align-items: center; gap: 10px;
  max-width: 720px; margin: 0 auto;
}
.search-drawer__icon { color: #8a93a0; flex-shrink: 0; }
.search-drawer__form input[type="search"] {
  flex: 1; min-width: 0;
  font-size: 1rem; font-weight: 500;
  border: 0; outline: 0; background: transparent;
  padding: 10px 4px;
  color: #1f2d4a;
  -webkit-appearance: none;
}
.search-drawer__form input::placeholder { color: #8a93a0; }
.search-drawer__submit {
  border: 0; background: #19b4eb; color: #fff;
  font-weight: 700; font-size: .9rem;
  padding: 10px 18px; border-radius: 8px;
  cursor: pointer;
}
.search-drawer__submit:hover { background: #0f9bd0; }
.search-drawer__close {
  border: 0; background: transparent; color: #1f2d4a;
  padding: 8px; cursor: pointer; display: flex; align-items: center;
}

.search-dialog__panel,
.mobile-nav__panel,
.cart-drawer__panel {
  min-height: 100vh;
  padding: 1.25rem;
}

.search-dialog__panel {
  min-height: auto;
}

.search-dialog__header,
.mobile-nav__header,
.cart-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.search-dialog__close,
.mobile-nav__close,
.cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.search-dialog form {
  display: flex;
  gap: 0.5rem;
}

.search-dialog input[type="search"] {
  flex: 1;
  min-height: 2.75rem;
  padding: 0.65rem 0.875rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--r);
  font: inherit;
}

/* mobile nav links (legacy) */
.mobile-nav__links { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav__links a { display: block; padding: 0.75rem 0.875rem; color: var(--wp--preset--color--text); text-decoration: none; border-radius: var(--r); font-weight: 600; }
.mobile-nav__links a:hover { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--brand-ink); }

/* ---- Enhanced mobile nav drawer (.mnav) — slides in from the left ---- */
.mnav { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.mnav[hidden] { display: none; }
.mnav__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 18, 31, 0.5);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.mnav.is-open .mnav__backdrop { opacity: 1; pointer-events: auto; }
.mnav__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(82vw, 380px);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .26s ease;
  box-shadow: 6px 0 32px -10px rgba(20, 33, 59, 0.35);
  pointer-events: auto;
  overflow: hidden;
}
.mnav.is-open .mnav__panel { transform: translateX(0); }

/* search row */
.mnav__search {
  display: flex; align-items: center;
  padding: 18px 16px;
  border-bottom: 1px solid #eef1f5;
  gap: 8px;
}
.mnav__search input[type="search"] {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-size: 1rem; font-weight: 600;
  color: #1f2d4a;
  padding: 4px 0;
  -webkit-appearance: none;
}
.mnav__search input::placeholder { color: #8a93a0; font-weight: 500; }
.mnav__search button {
  border: 0; background: transparent; color: #1f2d4a;
  padding: 4px; cursor: pointer; display: flex; align-items: center;
}

/* tabs */
.mnav__tabs {
  display: flex; align-items: stretch;
  background: #f4f6f8;
  border-bottom: 1px solid #e4e8ee;
}
.mnav__tab {
  flex: 1 1 0;
  background: #f4f6f8;
  border: 0;
  padding: 16px 8px;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a93a0;
  cursor: pointer;
  position: relative;
  transition: background .18s, color .18s;
}
.mnav__tab.is-active {
  background: #fff;
  color: #1f2d4a;
}
.mnav__tab.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: #19b4eb;
}

/* tab panels */
.mnav__panels { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mnav__tabpanel { display: none; padding: 8px 0 32px; }
.mnav__tabpanel.is-active { display: block; }
.mnav__tabpanel[hidden] { display: none !important; }

/* root + flat items */
.mnav__item {
  display: block;
  padding: 16px 18px;
  color: #1f2d4a;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #eef1f5;
}
.mnav__item--root { color: #1f2d4a; }

/* expandable groups */
.mnav__group { border-bottom: 1px solid #eef1f5; }
.mnav__grouphead {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 16px 18px;
  background: transparent; border: 0;
  color: #19b4eb;
  font-size: 1rem; font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.mnav__grouplabel { flex: 1; min-width: 0; }
.mnav__chevron { transition: transform .2s ease; color: #1f2d4a; flex-shrink: 0; }
.mnav__group.is-open .mnav__chevron { transform: rotate(90deg); }

/* sub-items (rendered only when group expanded) */
.mnav__sublist { background: #f8fafc; padding: 4px 0 8px; }
.mnav__subitem {
  display: block;
  padding: 12px 18px 12px 32px;
  color: #1f2d4a;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  border-top: 1px solid #eef1f5;
}
.mnav__subitem:first-child { border-top: 0; }
.mnav__subitem:hover, .mnav__subitem:active { color: #19b4eb; background: #fff; }

/* page main — no top padding so the Elementor hero sits flush
   against the announcement bar (hero's own top padding is 0) */
.site-main {
  padding-top: 0;
  padding-bottom: clamp(2rem, 6vw, 5rem);
}

/* site footer */
.site-footer {
  padding-block: 3rem;
  color: hsl(200 38% 88%);
  background: var(--wp--preset--color--brand-ink);
}

/* ---- tablet + mobile (hamburger takes over) ----
   1200px so the full desktop nav only shows when there's room for
   nav + centered logo + actions without crowding */
@media (max-width: 1200px) {
  /* hamburger: far left, inside .site-header__left */
  .site-header__hamburger {
    display: flex;
  }

  /* hide desktop nav — mobile-nav dialog handles it */
  .site-header__nav {
    display: none;
  }

  /* hide search button and login link — only cart stays */
  .site-header__search-btn,
  .site-header__account-link {
    display: none;
  }
}

/* ---- small mobile tweaks ---- */
@media (max-width: 480px) {
  .site-logo__icon {
    width: 30px;
    height: 30px;
  }

  .site-logo__wordmark {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   HERO (front-page) — recreated from viprefrigerant.com layout
   ============================================================ */
.toop-hero {
  width: 100%;
  background: var(--wp--preset--color--bg, #f7f9fb);
  padding-block: clamp(2rem, 5vw, 4.5rem);
}
.toop-hero__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.toop-hero__title {
  font-family: var(--wp--preset--font-family--display, system-ui, sans-serif);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--wp--preset--color--text, #14213b);
  margin: 0 0 1.1rem;
}
.toop-hero__accent { color: var(--wp--preset--color--brand, #1aa3e8); }
.toop-hero__flake { white-space: nowrap; }
.toop-hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--wp--preset--color--text-muted, #5b6675);
  max-width: 46ch;
  margin: 0 0 1.8rem;
}

/* marquee feature strip */
.toop-hero__marquee {
  overflow: hidden;
  background: var(--wp--preset--color--surface-2, #eef2f6);
  border-radius: 999px;
  padding-block: 0.85rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.toop-hero__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  white-space: nowrap;
  width: max-content;
  animation: toop-hero-marquee 22s linear infinite;
}
.toop-hero__marquee:hover .toop-hero__track { animation-play-state: paused; }
.toop-hero__feature {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wp--preset--color--text, #14213b);
}
.toop-hero__feature svg { color: var(--wp--preset--color--brand, #1aa3e8); flex: none; }
@keyframes toop-hero-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* media */
.toop-hero__media { line-height: 0; }
.toop-hero__media img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 24px 48px -24px rgba(20, 33, 59, 0.35);
}

/* responsive */
@media (max-width: 900px) {
  .toop-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .toop-hero__media { order: -1; }
  .toop-hero__lead { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toop-hero__track { animation: none; }
}

/* ============================================================
   SHOP BY REFRIGERANT — marquee slider (Elementor tiles + theme behaviour)
   catgridwrap is a classic Elementor COLUMN; its .elementor-widget-wrap is the
   horizontal track, each image-box widget is a tile. cat-slider.js scrolls it.
   ============================================================ */
/* the column clips the moving track (transform marquee) */
[class*="gridwrap"] { overflow: hidden; }
[class*="gridwrap"] > .elementor-widget-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 22px;
  width: max-content;
  will-change: transform;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
[class*="gridwrap"] > .elementor-widget-wrap::-webkit-scrollbar { display: none; }
[class*="gridwrap"] > .elementor-widget-wrap.is-dragging { cursor: grabbing; }
[class*="gridwrap"] > .elementor-widget-wrap > .elementor-element {
  flex: 0 0 auto !important;
  width: 138px !important;
  max-width: 138px !important;
  margin: 0 !important;
}

/* tile = big white disc + label below (force, regardless of Elementor widget settings) */
[class*="gridwrap"] .elementor-image-box-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
[class*="gridwrap"] .elementor-image-box-img {
  width: auto !important;
  margin: 0 0 12px !important;
}
/* the whole disc is the link: anchor wraps the image and is the hit target */
[class*="gridwrap"] .elementor-image-box-img a {
  display: inline-block;
  line-height: 0;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
}
[class*="gridwrap"] .elementor-image-box-img img {
  width: 116px !important;
  height: 116px !important;
  max-width: none !important;
  object-fit: cover;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff;
  box-shadow: 0 16px 34px -12px rgba(20, 33, 59, 0.22);
  display: block;
  margin: 0 auto;
  /* don't ghost-drag the image while scrubbing the marquee, but DO let the
     wrapping <a> receive clicks (pointer-events:none here would also block
     the anchor's click in some engines) */
  -webkit-user-drag: none;
  user-select: none;
}
[class*="gridwrap"] .elementor-image-box-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #14213b !important;
  letter-spacing: 0.01em;
}
[class*="gridwrap"] .elementor-image-box-title a {
  color: inherit !important;
  text-decoration: none !important;
}
[class*="gridwrap"] .elementor-image-box-description { display: none; }

@media (max-width: 600px) {
  [class*="gridwrap"] > .elementor-widget-wrap > .elementor-element { width: 100px !important; max-width: 100px !important; }
  [class*="gridwrap"] .elementor-image-box-img img { width: 84px !important; height: 84px !important; }
  [class*="gridwrap"] .elementor-image-box-title { font-size: 13px !important; }
}

/* ============================================================
   PRODUCT GRID — card styling for any [products] shortcode placed in an
   Elementor Shortcode widget (covers every refrigerant section: R454B,
   R134A, …). Hook: .elementor-widget-shortcode ul.products
   ============================================================ */
.elementor-widget-shortcode ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.elementor-widget-shortcode ul.products::before,
.elementor-widget-shortcode ul.products::after { display: none !important; }
.elementor-widget-shortcode ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  float: none !important;
  background: #f4f6f8;            /* light gray = the bottom (title/stars/price) section */
  border: 1px solid #e8ebee;
  border-radius: 0 !important;    /* sharp rectangular corners */
  box-shadow: none;
  text-align: center;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.elementor-widget-shortcode ul.products li.product::before,
.elementor-widget-shortcode ul.products li.product::after { display: none !important; }
.elementor-widget-shortcode ul.products li.product:hover {
  box-shadow: 0 12px 28px -18px rgba(20, 33, 59, 0.3);
}
.elementor-widget-shortcode ul.products li.product .woocommerce-loop-product__link {
  display: block;
  padding: 0 !important;
}
/* image sits in its own WHITE block at the top, spanning the full card width */
.elementor-widget-shortcode ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
  background: #fff;
  padding: 18px 18px 16px !important;   /* less padding = much larger image */
  margin: 0 0 0 0 !important;
}
.elementor-widget-shortcode ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #14213b !important;
  line-height: 1.35 !important;
  min-height: 2.7em;
  padding: 16px 14px 0 !important;      /* top space below the white image block */
  margin: 0 0 10px !important;
}
.elementor-widget-shortcode ul.products li.product .star-rating {
  margin: 0 auto 10px !important;
  float: none !important;
  font-size: 15px;
}
.elementor-widget-shortcode ul.products li.product .star-rating::before { color: #d9dde1 !important; }
.elementor-widget-shortcode ul.products li.product .star-rating span::before { color: #febe01 !important; }
.elementor-widget-shortcode ul.products li.product .price {
  display: block;
  color: #1aa3e8 !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  margin: 0 0 16px !important;
}
.elementor-widget-shortcode ul.products li.product .price del {
  color: #9aa3ad !important;
  font-weight: 400 !important;
  margin-right: 6px;
  opacity: 1;
}
.elementor-widget-shortcode ul.products li.product .price ins {
  text-decoration: none !important;
  color: #1aa3e8 !important;
}
.elementor-widget-shortcode ul.products li.product .button,
.elementor-widget-shortcode ul.products li.product .added_to_cart {
  display: inline-block !important;
  width: auto !important;
  margin: 0 auto 18px !important;
  padding: 10px 24px !important;
  border: 1px solid #1aa3e8 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #1aa3e8 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background 0.2s, color 0.2s;
}
.elementor-widget-shortcode ul.products li.product .button:hover {
  background: #1aa3e8 !important;
  color: #fff !important;
}
.elementor-widget-shortcode ul.products li.product .onsale {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto !important;
  margin: 0 !important;
  min-width: 46px;
  min-height: 46px;
  padding: 0 !important;
  line-height: 46px !important;
  border-radius: 50% !important;
  background: #9aa017 !important;
  color: #fff !important;
}
.elementor-widget-shortcode ul.products li.product { position: relative; }
/* widen the product-grid sections (desktop) so the cards stretch closer to the
   screen edges — matches the wider hero (1340) and the reference layout */
@media (min-width: 1025px) {
  [class*="elementor-element-prodr"] > .elementor-container {
    max-width: 1340px !important;
  }
}
@media (max-width: 900px) {
  .elementor-widget-shortcode ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .elementor-widget-shortcode ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ---- MOBILE: compact product cards (match reference) ---- */
@media (max-width: 768px) {
  /* wider cards: trim the section side padding + tighten the grid gap */
  .elementor-section[class*="elementor-element-prodr"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .elementor-widget-shortcode ul.products { gap: 10px !important; }
  /* hide the green Sale! badge */
  .elementor-widget-shortcode ul.products li.product .onsale { display: none !important; }
  /* hide the Add to cart / Select options buttons */
  .elementor-widget-shortcode ul.products li.product .button,
  .elementor-widget-shortcode ul.products li.product .added_to_cart { display: none !important; }
  /* tighter card + bigger image (less padding around it) */
  .elementor-widget-shortcode ul.products li.product { padding-bottom: 12px !important; }
  .elementor-widget-shortcode ul.products li.product img { padding: 9px 9px 6px !important; }
  /* title: one short truncated line (no multi-line min-height) */
  .elementor-widget-shortcode ul.products li.product .woocommerce-loop-product__title {
    min-height: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px !important;
    padding: 10px 12px 0 !important;
    margin: 0 0 5px !important;
  }
  /* compact stars + price (price on one line) */
  .elementor-widget-shortcode ul.products li.product .star-rating { margin: 0 auto 5px !important; font-size: 13px; }
  .elementor-widget-shortcode ul.products li.product .price {
    font-size: 14px !important;
    white-space: nowrap;
    margin: 0 !important;
  }
}

/* R407C promo block: right-column product grid is 2-up (not the default 4-up) */
.elementor-element-r407cpR ul.products { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 1024px) {
  .elementor-element-r407cpromo { --e-con-grid-template-columns: 1fr; }
}

/* ============================================================
   SINGLE PRODUCT PAGE (templates/single-product.html)
   ============================================================ */
.wc-single .wp-block-post-title { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 800; line-height: 1.18; color: #14213b; margin: 0 0 4px; }
.wc-single .woocommerce-product-rating { margin: 4px 0 10px; }
.wc-single .star-rating span::before { color: #febe01; }
.wc-single .price, .wc-single .woocommerce-Price-amount { color: #19b4eb !important; font-weight: 800; }
.wc-single .price { font-size: clamp(1.25rem, 2vw, 1.55rem); margin: 6px 0 4px; }

/* smaller text overall to match the design proportions */
.wc-single .tps-rating .stars { font-size: 18px !important; }
.wc-single .tps-rating .count { font-size: 15px !important; }
.wc-single .tps-badges .flash, .wc-single .tps-badges .disc { font-size: 12px !important; padding: 4px 11px !important; }
.wc-single .tps-features h4 { font-size: 14px !important; }
.wc-single .tps-features p { font-size: 12px !important; }
.wc-single .tps-features .ic { width: 42px !important; height: 42px !important; font-size: 18px !important; }
.wc-single .single_add_to_cart_button, .wc-single .tps-buynow { font-size: 15px !important; min-height: 52px !important; }
.wc-single .tps-stock { font-size: 13px !important; }
.wc-single .price del { color: #9aa3ad !important; font-weight: 400; font-size: .6em; }
.wc-single .price ins { text-decoration: none; }

/* PALLET SIZE label sits inline (same row) with the swatches; Clear shows below */
.wc-single .variations_form { margin-top: 4px; }
.wc-single table.variations { margin: 0 0 8px; }
.wc-single table.variations th.label label { display: block; margin: 0; line-height: 1; font-weight: 700; color: #14213b; letter-spacing: .3px; text-transform: uppercase; font-size: 14px; }
.wc-single table.variations th.label label::after { content: " :"; }
.wc-single .wd-reset-var { display: none !important; }
.wc-single table.variations,
.wc-single table.variations tbody { display: block; width: 100%; margin: 0; }
.wc-single table.variations tr { display: flex; align-items: center; gap: 10px; width: 100%; }
.wc-single table.variations th.label { display: flex; align-items: center; flex: none; width: auto; margin: 0; padding: 0; border: 0; text-align: left; white-space: nowrap; }
/* value cell height == the swatch row only (Clear is taken out of the flow,
   below), so the label centers perfectly on the circles */
.wc-single table.variations td.value { display: flex; align-items: center; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border: 0; text-align: left; position: relative; }
.wc-single table.variations td.value .tps-swatches { margin: 0; }
.wc-single table.variations { margin: 0 0 28px; }
/* Clear (reset) link — sits just below the swatches once a size is selected */
.wc-single .reset_variations {
  position: absolute; top: calc(100% + 5px); left: 0;
  margin: 0; color: #6b7280; font-size: 14px; text-decoration: none; line-height: 1;
}
.wc-single .reset_variations::before { content: "\00d7\00a0"; font-size: 16px; }

/* round image swatches */
/* swatches: ALL in one row (never wrap); each shrinks to share the width.
   align-items:center keeps the WIDTH flex-driven (not stretched to row height),
   which is what prevented them fitting before. */
.tps-swatches { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; margin: 0; width: 100%; min-width: 0; }
.tps-sw {
  flex: 1 1 0; min-width: 0; width: auto; height: auto;
  aspect-ratio: 1 / 1; max-width: 70px;
  box-sizing: border-box;
  border-radius: 50%; border: 2px solid #e3e7ec; background: #fff; padding: 4px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  display: flex; align-items: center; justify-content: center;
}
.tps-sw { overflow: hidden; }
.tps-sw img { width: 100%; height: 100%; min-width: 0; object-fit: contain; border-radius: 50%; }
.tps-sw span { font-size: 9px; line-height: 1.1; text-align: center; color: #4b5563; }
.tps-sw:hover { border-color: #19b4eb; }
.tps-sw.active { border-color: #19b4eb; box-shadow: 0 0 0 3px rgba(25,180,235,.22); }

/* quantity stepper + Add to cart + Buy Now — all in ONE horizontal row */
.wc-single .woocommerce-variation-add-to-cart,
.wc-single form.cart:not(.variations_form) {
  display: flex !important; gap: 10px; align-items: stretch; flex-wrap: nowrap; margin-top: 12px;
}
/* quantity box: [ − | input | + ] */
.wc-single .quantity {
  display: inline-flex !important; align-items: stretch; flex: 0 0 auto;
  border: 1px solid #d7dde3; border-radius: 12px; overflow: hidden; height: 56px;
}
.wc-single .quantity label { display: none !important; }
.wc-single .quantity .qty {
  width: 40px; border: 0; background: #fff; text-align: center;
  font-size: 16px; font-weight: 700; color: #14213b; padding: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.wc-single .quantity .qty::-webkit-outer-spin-button,
.wc-single .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wc-single .tps-qbtn {
  width: 36px; border: 0; background: #fff; color: #14213b;
  font-size: 20px; line-height: 1; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.wc-single .tps-qbtn:hover { background: #eef2f6; }
/* the two action buttons share the remaining space equally */
.wc-single .single_add_to_cart_button,
.wc-single .tps-buynow {
  flex: 1 1 0; min-width: 0; min-height: 56px; border: 0 !important; border-radius: 12px !important;
  font-size: 15px !important; font-weight: 700 !important; text-transform: none !important;
  white-space: nowrap; cursor: pointer; padding: 0 12px !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.wc-single .single_add_to_cart_button { background: #19b4eb !important; color: #fff !important; }
.wc-single .single_add_to_cart_button:hover { background: #128fc0 !important; }
.wc-single .tps-buynow { background: #111111 !important; color: #fff !important; }
.wc-single .tps-buynow:hover { background: #000 !important; }
.wc-single .single_add_to_cart_button.disabled { opacity: .55; }

/* sticky CTA bar — slides up from the bottom on scroll (added by product.js).
   MOBILE: full-width blue "Select Options" bar (unchanged). DESKTOP: detailed white bar. */
.tps-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9600;
  display: flex; align-items: stretch;
  transform: translateY(110%); transition: transform .28s ease;
  background: #19b4eb;
  box-shadow: 0 -6px 20px -8px rgba(20, 33, 59, 0.35);
  padding-bottom: env(safe-area-inset-bottom);
}
.tps-cta-bar.is-visible { transform: translateY(0); }
/* mobile: only the centred Select Options text shows */
.tps-cta-bar .tps-cta-info,
.tps-cta-bar .tps-cta-price,
.tps-cta-bar .tps-cta-buy,
.tps-cta-bar .tps-cta-icon { display: none; }
.tps-cta-bar .tps-cta-actions { flex: 1; display: flex; }
.tps-cta-bar .tps-cta-select {
  flex: 1; border: 0; background: transparent; color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: .2px;
  text-align: center; cursor: pointer; padding: 18px 16px;
}
.tps-cta-bar .tps-cta-select:hover { background: rgba(0,0,0,.06); }

/* ---- DESKTOP: detailed bar (thumb + title left; price/buttons/icons right) ---- */
@media (min-width: 769px) {
  .tps-cta-bar {
    background: #fff;
    border-top: 1px solid #e6eaef;
    box-shadow: 0 -4px 18px -10px rgba(20, 33, 59, 0.18);
    align-items: center; justify-content: space-between;
    gap: 24px; padding: 10px 30px;
  }
  .tps-cta-bar .tps-cta-info { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 1 auto; }
  .tps-cta-bar .tps-cta-thumb { width: 54px; height: 54px; object-fit: contain; border-radius: 8px; background: #f4f6f8; border: 1px solid #eef1f4; flex: none; }
  .tps-cta-bar .tps-cta-title { font-size: 16px; font-weight: 700; color: #1f2d4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tps-cta-bar .tps-cta-actions { flex: none; display: flex; align-items: center; gap: 12px; }
  .tps-cta-bar .tps-cta-price { display: inline; color: #19b4eb; font-weight: 800; font-size: 18px; white-space: nowrap; }
  .tps-cta-bar .tps-cta-price del { color: #9aa3ad; font-weight: 400; font-size: .82em; margin-right: 7px; text-decoration: line-through; }
  .tps-cta-bar .tps-cta-price del .woocommerce-Price-amount { color: #9aa3ad; }
  .tps-cta-bar .tps-cta-price ins { text-decoration: none; color: #19b4eb; }
  .tps-cta-bar .tps-cta-select,
  .tps-cta-bar .tps-cta-buy {
    flex: none; border: 0; border-radius: 10px; cursor: pointer;
    font-size: 15px; font-weight: 700; padding: 13px 24px; letter-spacing: 0;
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
  }
  .tps-cta-bar .tps-cta-select { background: #19b4eb; color: #fff; }
  .tps-cta-bar .tps-cta-select:hover { background: #128fc0; }
  .tps-cta-bar .tps-cta-buy { display: inline-flex; background: #111; color: #fff; }
  .tps-cta-bar .tps-cta-buy:hover { background: #000; }
  .tps-cta-bar .tps-cta-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none;
    border: 1px solid #e0e5ea; border-radius: 9px; background: #fff; color: #4b5563; cursor: pointer;
  }
  .tps-cta-bar .tps-cta-icon svg { width: 22px; height: 22px; }
  .tps-cta-bar .tps-cta-icon:hover { border-color: #19b4eb; color: #19b4eb; }
}

@media (max-width: 480px) {
  .wc-single .woocommerce-variation-add-to-cart,
  .wc-single form.cart:not(.variations_form) { gap: 7px; }
  .wc-single .quantity .qty { width: 30px; }
  .wc-single .tps-qbtn { width: 30px; font-size: 18px; }
  .wc-single .single_add_to_cart_button,
  .wc-single .tps-buynow { font-size: 13px !important; padding: 0 6px !important; }
}

/* light-grey page + each side in a white rounded card (matches the design) */
.wc-single { background: #f4f6f8; }
/* start the product section right under the header — kill the big top gap
   (overrides the inline padding-top:32px on <main>, removes columns top margin
   and any empty store-notices spacing) */
.wc-single { padding-top: 8px !important; }
.wc-single .wc-single__cols { margin-top: 0 !important; }
.wc-single > .woocommerce-notices-wrapper { margin: 0 !important; }
.wc-single > .woocommerce-notices-wrapper:empty { display: none !important; }
.wc-single__cols { gap: 26px !important; align-items: stretch; }
.wc-single__cols > .wp-block-column {
  background: #fff;
  border: 1px solid #edf0f3;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 12px 34px -22px rgba(20, 33, 59, 0.20);
}
/* DESKTOP ONLY: make the image (left) column sticky so it follows the user as
   they scroll the taller details column — no empty white space on the left.
   align-items:flex-start stops the column being stretched to full height
   (which would disable position:sticky). */
@media (min-width: 992px) {
  .wc-single__cols { align-items: flex-start !important; }
  .wc-single__cols > .wp-block-column:first-child {
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }
}
.wc-single__cols > .wp-block-column .woocommerce-product-gallery { margin: 0; }
@media (max-width: 781px) {
  .wc-single__cols > .wp-block-column { padding: 16px; }
}

/* ---- product gallery: tighter image + relocated expand button ---- */
/* the gallery column (first one) hugs the image instead of a big white frame */
.wc-single__cols > .wp-block-column:first-child { padding: 12px !important; }
@media (max-width: 781px) {
  .wc-single__cols > .wp-block-column:first-child { padding: 10px !important; }
}
.wc-single .woocommerce-product-gallery { position: relative; margin: 0 !important; }
.wc-single .woocommerce-product-gallery__wrapper,
.wc-single .woocommerce-product-gallery__image { margin: 0 !important; }
.wc-single .woocommerce-product-gallery__image a,
.wc-single .woocommerce-product-gallery__image img { display: block; margin: 0 auto !important; }

/* magnifier trigger → small white circular EXPAND button in the bottom-left */
.wc-single .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 14px !important;
  left: 14px !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 19px 19px !important;
  box-shadow: 0 4px 14px -3px rgba(20, 33, 59, 0.3) !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: 0 !important;
  z-index: 6;
}
/* kill the original magnifying-glass glyph (emoji / ::before / inner img-svg) */
.wc-single .woocommerce-product-gallery__trigger::before,
.wc-single .woocommerce-product-gallery__trigger::after { content: none !important; display: none !important; }
.wc-single .woocommerce-product-gallery__trigger img,
.wc-single .woocommerce-product-gallery__trigger svg { display: none !important; }

/* ============================================================
   PRODUCT PACKAGES section ([toop_product_packages] shortcode, all products)
   ============================================================ */
.tps-pdesc{max-width:1200px;margin:40px auto 0;padding:0 16px;box-sizing:border-box;color:#2b3a55;}
.tps-pdesc .ph{background:linear-gradient(180deg,#eef2f9,#f8fafd);border-radius:16px;padding:34px 24px;text-align:center;margin-bottom:30px;}
.tps-pdesc .ph h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:800;color:var(--tps-pkg,#8ed1fc);margin:0 0 10px;}
.tps-pdesc .ph p{font-size:1.05rem;color:#6b7280;margin:0;}
.tps-pdesc .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px;}
.tps-pdesc .fcard{background:#fff;border:1.5px solid var(--tps-pkg,#8ed1fc);border-radius:16px;padding:20px;}
.tps-pdesc .fcard .ic{font-size:26px;margin-bottom:10px;}
.tps-pdesc .fcard h3{font-size:16px;font-weight:700;color:#1f2d4a;margin:0 0 6px;}
.tps-pdesc .fcard p{font-size:13.5px;color:#5b6675;line-height:1.55;margin:0;}
.tps-pdesc .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:30px 0;}
.tps-pdesc .pgrid-one{grid-template-columns:minmax(0,520px);justify-content:center;}
.tps-pdesc .pcard{position:relative;background:#fff;border:1.5px solid var(--tps-pkg,#8ed1fc);border-radius:16px;padding:30px 24px;text-align:center;}
.tps-pdesc .pcard.best{background:linear-gradient(180deg,#f2f6fc,#fff);box-shadow:0 16px 36px -22px rgba(43,74,130,.45);}
.tps-pdesc .badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#34528c;color:#fff;font-size:13px;font-weight:600;padding:6px 18px;border-radius:999px;white-space:nowrap;}
.tps-pdesc .pcard h3{font-size:18px;font-weight:700;color:#1f2d4a;letter-spacing:.5px;margin:0 0 14px;}
.tps-pdesc .amt{font-size:30px;font-weight:800;color:#34528c;margin-bottom:16px;}
.tps-pdesc .amt .woocommerce-Price-amount{color:#34528c!important;font-weight:800;}
.tps-pdesc .det{font-size:13.5px;color:#5b6675;line-height:1.95;}
.tps-pdesc .det strong{color:#3a4a66;}
.tps-pdesc .desc{margin:30px 0;font-size:16px;line-height:1.7;color:#3a4a66;background:#fff;border:1px solid #d6e0f0;border-left:5px solid var(--tps-pkg,#8ed1fc);border-radius:16px;padding:32px;box-shadow:0 14px 32px -24px rgba(20,33,59,.22);}
.tps-pdesc .desc p{margin:0 0 18px;}
.tps-pdesc .desc p:last-child{margin-bottom:0;}
.tps-pdesc .hl{color:#34528c;font-weight:700;text-decoration:underline;}
.tps-pdesc .kpts{margin:22px 0;background:#f3f6f9;border-radius:12px;padding:22px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.tps-pdesc .kpt{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#3a4a66;line-height:1.4;}
.tps-pdesc .kpt .ki{font-size:20px;flex:none;line-height:1;}
.tps-pdesc .ship{background:#fff;border:1.5px solid #2f5496;color:#1f2d4a;border-radius:14px;padding:20px;text-align:center;margin-top:24px;font-size:18px;font-weight:600;}
.tps-pdesc .ship .free{font-weight:800;color:#34528c;}
@media(max-width:768px){.tps-pdesc .fgrid,.tps-pdesc .pgrid,.tps-pdesc .kpts{grid-template-columns:1fr;gap:14px;}.tps-pdesc .ph{padding:26px 20px;}}

/* hover lift (independent 'translate' prop so it doesn't fight the reveal transform) */
.tps-pdesc .fcard,.tps-pdesc .pcard{transition:transform .6s ease,translate .25s ease,box-shadow .25s ease,opacity .6s ease;}
.tps-pdesc .fcard:hover,.tps-pdesc .pcard:hover{translate:0 -5px;box-shadow:0 18px 38px -18px rgba(43,74,130,.38);}
/* scroll-reveal: hidden state applies ONLY after JS adds .tps-anim (no-JS = visible) */
.tps-pdesc.tps-anim .ph,.tps-pdesc.tps-anim .fcard,.tps-pdesc.tps-anim .pcard,.tps-pdesc.tps-anim .ship{opacity:0;transform:translateY(28px);}
.tps-pdesc.tps-anim .ph,.tps-pdesc.tps-anim .ship{transition:opacity .6s ease,transform .6s ease;}
.tps-pdesc.tps-anim .is-in{opacity:1;transform:translateY(0);}
.tps-pdesc.tps-anim .fgrid .fcard:nth-child(2),.tps-pdesc.tps-anim .pgrid .pcard:nth-child(2){transition-delay:.09s;}
.tps-pdesc.tps-anim .fgrid .fcard:nth-child(3),.tps-pdesc.tps-anim .pgrid .pcard:nth-child(3){transition-delay:.18s;}
@media(prefers-reduced-motion:reduce){.tps-pdesc.tps-anim .ph,.tps-pdesc.tps-anim .fcard,.tps-pdesc.tps-anim .pcard,.tps-pdesc.tps-anim .ship{opacity:1!important;transform:none!important;transition:none!important;}}

/* ============================================================
   SHOP / PRODUCT-CATEGORY ARCHIVE
   ============================================================ */
.wc-archive{background:#fff;}
/* hide native WC breadcrumb / page title everywhere — the gray topbar
   (.tps-shopcats) renders the "Shop" title + "Home / Shop" breadcrumb on
   both desktop AND mobile, so these would be duplicates. */
.wc-archive .woocommerce-breadcrumb,
.wc-archive .wc-archive__title,
.wc-archive .wp-block-query-title{display:none !important;}
.wc-archive__desc{color:#5b6675;font-size:.95rem;margin:0 0 18px;max-width:760px;}
.wc-archive__cols{gap:34px;align-items:flex-start;}

/* sidebar: no card background, clean column like the reference design */
.wc-archive__sidebar{background:transparent;border:0;border-radius:0;padding:0;position:sticky;top:90px;}
.wc-archive__filter-title{font-size:1.05rem;font-weight:700;color:#1f2d4a;margin:0 0 18px;padding-bottom:0;}

/* ===== Price filter slider ===== */
.toop-price-filter,
.toop-price-filter *{box-sizing:border-box;}
.toop-price-filter{margin:0;width:100%;max-width:100%;}
.toop-price-filter .price_slider_wrapper{margin:0 0 14px;width:100%;max-width:100%;}

/* track */
.toop-price-filter .price_slider,
.toop-price-filter .ui-slider-horizontal,
.toop-price-filter .ui-slider{
	display:block !important;
	position:relative !important;
	width:100% !important;
	max-width:100% !important;
	height:4px !important;
	background:#e3e8ee !important;
	background-color:#e3e8ee !important;
	border:0 !important;
	border-radius:999px !important;
	margin:18px 0 26px !important;
	padding:0 !important;
}
/* active range */
.toop-price-filter .ui-slider .ui-slider-range,
.toop-price-filter .ui-slider-horizontal .ui-slider-range{
	position:absolute !important;
	top:0 !important;
	height:4px !important;
	background:#19b4eb !important;
	background-color:#19b4eb !important;
	border:0 !important;
	border-radius:999px !important;
	display:block !important;
}
/* handles — round white circles, BOTH visible at each end of the active range */
.toop-price-filter .ui-slider .ui-slider-handle,
.toop-price-filter .ui-slider-horizontal .ui-slider-handle{
	position:absolute !important;
	top:50% !important;
	width:16px !important;
	height:16px !important;
	margin:0 0 0 -8px !important;
	padding:0 !important;
	background:#fff !important;
	background-color:#fff !important;
	border:1px solid #d6dde4 !important;
	border-radius:50% !important;
	box-shadow:0 1px 4px rgba(20,33,59,.22) !important;
	transform:translateY(-50%) !important;
	cursor:grab !important;
	outline:none !important;
	z-index:2 !important;
	opacity:1 !important;
	display:block !important;
	box-sizing:border-box !important;
}
.toop-price-filter .ui-slider .ui-slider-handle:hover{box-shadow:0 2px 8px rgba(20,33,59,.3) !important;}
.toop-price-filter .ui-slider .ui-slider-handle:active{cursor:grabbing !important;}
.toop-price-filter .ui-slider .ui-slider-handle:focus{box-shadow:0 0 0 3px rgba(25,180,235,.25),0 1px 4px rgba(20,33,59,.22) !important;}

/* "Price: $X — $Y" + Filter button row */
.toop-price-filter .price_slider_amount{display:flex !important;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0;}
.toop-price-filter .price_label{font-size:.95rem;color:#5b6675;flex:1 1 auto;order:1;text-align:left;line-height:1.2;}
.toop-price-filter .price_label strong{color:#1f2d4a;font-weight:700;}
.toop-price-filter .price_slider_amount .button{
	background:#1f2d4a !important;
	color:#fff !important;
	border:0 !important;
	border-radius:8px !important;
	padding:12px 28px !important;
	font-size:.95rem !important;
	font-weight:700 !important;
	letter-spacing:.01em;
	cursor:pointer;
	order:2;
	text-transform:none;
	float:none !important;
	min-width:90px;
}
.toop-price-filter .price_slider_amount .button:hover{background:#19b4eb !important;}
.toop-price-filter input[type="text"].price_slider_amount__input,
.toop-price-filter .price_slider_amount input[type="text"]{display:none !important;}
.toop-price-filter .clear{display:none;}

/* result count + ordering bar — WC defaults float result-count left, ordering right */
.wc-archive .woocommerce-notices-wrapper{margin-bottom:0;}
.wc-archive .woocommerce-result-count{color:#5b6675;font-size:.9rem;margin:0;line-height:38px;}
.wc-archive .woocommerce-ordering{margin:0 0 0;}
.wc-archive .woocommerce-ordering select{padding:8px 32px 8px 14px;border:1px solid #dfe5ec;border-radius:8px;background:#fff;color:#1f2d4a;font-size:.85rem;cursor:pointer;}

/* product grid — 4 columns to match the reference */
.wc-archive ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:22px;margin:18px 0 0;padding:0;list-style:none;clear:both;}
.wc-archive ul.products::before,.wc-archive ul.products::after{content:none !important;}
.wc-archive ul.products li.product{width:auto !important;margin:0 !important;float:none !important;background:#fff;border:1px solid #eef1f5;border-radius:14px;padding:18px;text-align:center;box-shadow:0 6px 20px -14px rgba(20,33,59,.25);transition:transform .3s ease,box-shadow .3s ease;display:flex !important;flex-direction:column;align-items:stretch;justify-content:flex-start;height:100%;}
.wc-archive ul.products li.product > a{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center;}
.wc-archive ul.products{align-items:stretch;}
.wc-archive ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 18px 34px -16px rgba(20,33,59,.35);}
.wc-archive ul.products li.product img{border-radius:10px;margin:0 auto 14px;}
.wc-archive ul.products li.product .woocommerce-loop-product__title{font-size:.95rem;font-weight:600;color:#1f2d4a;padding:0 0 8px;}
.wc-archive ul.products li.product .star-rating{margin:0 auto 8px;color:#febe01;}
.wc-archive ul.products li.product .price{color:#19b4eb;font-weight:700;display:block;margin-bottom:12px;}
.wc-archive ul.products li.product .price del{color:#9aa5b1;font-weight:400;margin-right:6px;}
.wc-archive ul.products li.product .price ins{text-decoration:none;color:#19b4eb;}
.wc-archive ul.products li.product .button,
.wc-archive ul.products li.product .add_to_cart_button,
.wc-archive ul.products li.product .added_to_cart{
	display:block !important;
	width:100%;
	margin:auto 0 0 !important;   /* auto top → pin to bottom across all cards */
	background:#19b4eb !important;
	color:#fff !important;
	border-radius:999px !important;
	padding:14px 24px !important;
	font-size:.95rem !important;
	font-weight:700 !important;
	text-decoration:none !important;
	text-align:center !important;
	border:0 !important;
	cursor:pointer;
	box-sizing:border-box;
	transition:background .25s,transform .2s;
	float:none !important;
}
.wc-archive ul.products li.product .button:hover,
.wc-archive ul.products li.product .add_to_cart_button:hover{background:#0f9bd0 !important;transform:translateY(-1px);}
/* spacer above the button so it sits at the bottom even on short cards */
.wc-archive ul.products li.product .price{margin-bottom:18px !important;}
.wc-archive ul.products li.product .button:hover{background:#0f9bd0;}
.wc-archive .onsale{background:#e3514f;color:#fff;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;}

/* pagination */
.wc-archive .woocommerce-pagination{margin:40px 0 0 !important;text-align:center !important;clear:both;}
.wc-archive .woocommerce-pagination ul,
.wc-archive .woocommerce-pagination ul.page-numbers{display:inline-flex !important;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none !important;padding:0 !important;margin:0 !important;border:0 !important;}
.wc-archive .woocommerce-pagination ul li,
.wc-archive .woocommerce-pagination ul.page-numbers li{display:block;list-style:none !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;float:none !important;}
.wc-archive .woocommerce-pagination .page-numbers,
.wc-archive .woocommerce-pagination a.page-numbers,
.wc-archive .woocommerce-pagination span.page-numbers,
.wc-archive .woocommerce-pagination li a,
.wc-archive .woocommerce-pagination li span{
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	min-width:42px !important;
	height:42px !important;
	padding:0 12px !important;
	border-radius:10px !important;
	border:1px solid #e3e8ee !important;
	background:#fff !important;
	color:#1f2d4a !important;
	font-size:.95rem !important;
	font-weight:600 !important;
	line-height:1 !important;
	text-decoration:none !important;
	box-sizing:border-box !important;
	transition:background .2s,color .2s,border-color .2s;
}
.wc-archive .woocommerce-pagination a.page-numbers:hover,
.wc-archive .woocommerce-pagination li a:hover{background:#f4f6f8 !important;border-color:#19b4eb !important;color:#19b4eb !important;}
.wc-archive .woocommerce-pagination .page-numbers.current,
.wc-archive .woocommerce-pagination li .current,
.wc-archive .woocommerce-pagination span.current{background:#19b4eb !important;color:#fff !important;border-color:#19b4eb !important;}
.wc-archive .woocommerce-pagination .page-numbers.dots,
.wc-archive .woocommerce-pagination li .dots{border-color:transparent !important;background:transparent !important;color:#8a93a0 !important;}

@media(max-width:1100px){.wc-archive ul.products{grid-template-columns:repeat(3,1fr);}}
@media(max-width:900px){
  .wc-archive__cols{flex-wrap:wrap;}
  .wc-archive__sidebar{position:static;flex-basis:100% !important;}
  .wc-archive__content{flex-basis:100% !important;}
  .wc-archive ul.products{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){.wc-archive ul.products{grid-template-columns:1fr;}}

/* ============================================================
   MOBILE — viprefrigerant-style layout
   2-col grid, sidebar drawer, bottom tab bar, no carousel
   ============================================================ */
/* Mobile-only "Show sidebar" toolbar row — hidden by default, shown < 769px */
.wc-archive__mobilebar { display: none; }
.wc-archive__showbar {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 6px 0;
  font-size: 1rem; font-weight: 700; color: #1f2d4a; cursor: pointer;
}

/* Bottom tab bar — hidden on desktop, shown on mobile */
.toop-mtab { display: none; }
.toop-fdrawer-backdrop { display: none; }

@media (max-width: 768px) {
  /* prevent any element from causing horizontal scroll */
  html, body { overflow-x: hidden !important; max-width: 100vw; }

  /* archive main content gets safe side padding */
  .wc-archive,
  main.wc-archive,
  .wp-block-group.wc-archive {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 88px !important; /* room for bottom tab bar */
    box-sizing: border-box;
  }
  .wc-archive__cols { gap: 0 !important; flex-wrap: wrap; }

  /* SHOW the category carousel topbar on mobile (like the reference):
     "Shop" title + "Home / Shop" breadcrumb stacked above a swipeable
     row of round category thumbnails. */
  .tps-shopcats { display: block !important; }
  .tps-shopcats__wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 0 14px !important;
  }
  .tps-shopcats__heading {
    width: 100% !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
  .tps-shopcats__title { font-size: 1.7rem !important; margin-bottom: 4px !important; }
  .tps-shopcats__carousel { width: 100% !important; }
  .tps-shopcats__track { gap: 12px !important; }
  .tps-shopcat { width: 84px !important; gap: 10px !important; }
  .tps-shopcat__thumb { width: 72px !important; height: 72px !important; padding: 10px !important; }
  .tps-shopcat__name { font-size: .66rem !important; }
  .tps-shopcats__dots { display: flex !important; margin-top: 14px !important; }

  /* Match the reference: carousel block has a comfortable cushion of gray below the dots,
     then the white content area begins with "Show sidebar" flush at the top. */
  .tps-shopcats { padding: 20px 0 36px !important; margin: 0 !important; }
  main.wc-archive,
  .wp-block-group.wc-archive {
    padding-top: 0 !important;
    --wp--style--block-gap: 0 !important;
    --wp--style--unstable-gallery-gap: 0 !important;
  }
  /* Empty WooCommerce store-notices wrapper at the top of the main collapses the gap */
  .wc-archive > .wc-block-store-notices,
  .wc-archive > [data-block-name="woocommerce/store-notices"] { display: none !important; }
  .wc-archive .woocommerce-notices-wrapper:empty,
  .wc-archive__desc:empty,
  .wc-archive .woocommerce-products-header:empty,
  .wc-archive .woocommerce-breadcrumb { display: none !important; margin: 0 !important; padding: 0 !important; }
  .wc-archive__cols { margin-top: 0 !important; --wp--style--block-gap: 0 !important; }
  .wc-archive__content { padding-top: 0 !important; margin-top: 0 !important; --wp--style--block-gap: 0 !important; }
  .wc-archive__content > main#main,
  .wc-archive__content > .content-area { margin: 0 !important; padding: 0 !important; --wp--style--block-gap: 0 !important; }

  /* "Show sidebar" toolbar row — sits flush under the carousel */
  .wc-archive__mobilebar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 14px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .wc-archive__showbar {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: #1f2d4a !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    cursor: pointer;
  }

  /* SIDEBAR — hidden inline, only shown as slide-out drawer */
  .wc-archive__sidebar {
    display: none !important;
    flex-basis: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* … but when JS adds .is-fdrawer-open, become a fixed drawer panel */
  .wc-archive__sidebar.is-fdrawer-open {
    display: block !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: min(86vw, 360px) !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 9999 !important;
    padding: 70px 22px 22px !important;
    overflow-y: auto !important;
    transform: translateX(-100%);
    transition: transform .26s ease;
    box-shadow: 6px 0 32px -10px rgba(20,33,59,.35);
    box-sizing: border-box;
  }
  .wc-archive__sidebar.is-fdrawer-open.is-on { transform: translateX(0); }
  /* close button (injected by JS when drawer opens) */
  .toop-fdrawer-close {
    position: absolute; top: 16px; right: 16px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    color: #1f2d4a; cursor: pointer;
    border: 0; border-radius: 50%; background: #f4f6f8;
    padding: 0;
  }
  .toop-fdrawer-close:hover { background: #19b4eb; color: #fff; }

  /* filter by price — constrain to drawer width */
  .toop-price-filter,
  .toop-price-filter .price_slider_wrapper,
  .toop-price-filter .price_slider,
  .toop-price-filter .ui-slider {
    width: 100% !important;
    max-width: 100% !important;
  }
  .toop-price-filter .price_slider_amount {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .toop-price-filter .price_label {
    flex: 1 1 100% !important;
    text-align: left !important;
    margin-bottom: 0 !important;
  }
  .toop-price-filter .price_slider_amount .button {
    padding: 11px 24px !important;
    font-size: .9rem !important;
    width: 100% !important;
  }

  /* content column takes full width */
  .wc-archive__content {
    flex-basis: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* results count + sort row — sort icon only style, count hidden (matches reference) */
  .wc-archive .woocommerce-result-count {
    display: none !important;
  }
  /* Sort dropdown — render as an icon-only control floated to the right of the
     "Show sidebar" row, matching the reference. The native select is invisible
     but still receives taps for accessibility. */
  .wc-archive .woocommerce-ordering {
    position: absolute !important;
    top: 18px !important;
    right: 0 !important;
    margin: 0 !important;
    width: 28px !important;
    height: 28px !important;
    /* descending-bars sort icon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2d4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='20' y2='6'/><line x1='4' y1='12' x2='14' y2='12'/><line x1='4' y1='18' x2='8' y2='18'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
    pointer-events: auto !important;
  }
  .wc-archive .woocommerce-ordering select {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
  }
  /* Anchor the mobilebar so the absolutely-positioned ordering control attaches to it */
  .wc-archive__content { position: relative !important; }
  .wc-archive__mobilebar { position: relative !important; }

  /* PRODUCT GRID — 2 columns, compact viprefrigerant-style */
  .wc-archive ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin-top: 16px !important;
    clear: both !important;
  }
  .wc-archive ul.products li.product {
    padding: 0 0 14px !important;
    max-width: 100% !important;
    overflow: hidden;
    position: relative !important;
    border-radius: 10px !important;
    background: #f6f7f9 !important;
    box-shadow: none !important;
    border: 0 !important;
    text-align: left !important;
    align-items: stretch !important;
  }
  .wc-archive ul.products li.product > a {
    display: block !important;
    text-align: left !important;
  }
  .wc-archive ul.products li.product img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    margin: 0 0 12px !important;
    display: block !important;
    border-radius: 10px 10px 0 0 !important;
    background: #fff !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* readable, regular-weight title — clamped to 2 lines so every card is
     uniform and tidy (no 4-line walls of text like before) */
  .wc-archive ul.products li.product .woocommerce-loop-product__title {
    font-size: .9rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #1f2d4a !important;
    padding: 0 12px !important;
    margin: 0 0 6px !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 2.34em !important; /* reserve 2 lines so prices align */
  }
  /* stars */
  .wc-archive ul.products li.product .star-rating {
    font-size: .85em !important;
    margin: 2px 0 8px !important;
    width: 5.4em !important;
    padding: 0 12px !important;
    box-sizing: content-box !important;
  }
  /* price — readable, single line where it fits */
  .wc-archive ul.products li.product .price {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    color: #19b4eb !important;
    text-align: left !important;
    line-height: 1.4 !important;
  }
  .wc-archive ul.products li.product .price del {
    font-size: .82em !important;
    color: #9aa5b1 !important;
    font-weight: 400 !important;
    margin-right: 5px !important;
  }
  .wc-archive ul.products li.product .price ins,
  .wc-archive ul.products li.product .price > span:not(del) {
    color: #19b4eb !important;
    text-decoration: none !important;
  }

  /* HIDE Add to cart / Select options buttons on mobile cards
     (matches the viprefrigerant reference — tap card to view product) */
  .wc-archive ul.products li.product .button,
  .wc-archive ul.products li.product .add_to_cart_button,
  .wc-archive ul.products li.product .product_type_variable,
  .wc-archive ul.products li.product .added_to_cart {
    display: none !important;
  }

  /* Sale badge — smaller, less obtrusive */
  .wc-archive .onsale {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    position: absolute !important;
    transform: none !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    font-size: 9px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* pagination — compact on mobile */
  .wc-archive .woocommerce-pagination { padding: 0 !important; }
  .wc-archive .woocommerce-pagination ul,
  .wc-archive .woocommerce-pagination ul.page-numbers {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .wc-archive .woocommerce-pagination .page-numbers,
  .wc-archive .woocommerce-pagination li a,
  .wc-archive .woocommerce-pagination li span {
    min-width: 36px !important;
    height: 36px !important;
    font-size: .85rem !important;
    padding: 0 8px !important;
  }

  /* ===== Bottom tab bar (sticky) ===== */
  .toop-mtab {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 9000;
    background: #fff;
    border-top: 1px solid #eef1f5;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    justify-content: space-around;
    box-shadow: 0 -2px 14px -8px rgba(20,33,59,.25);
  }
  .toop-mtab__item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: transparent; border: 0; padding: 6px 4px;
    color: #1f2d4a; text-decoration: none;
    font-size: .72rem; font-weight: 600; line-height: 1;
    cursor: pointer;
  }
  .toop-mtab__item svg { color: #1f2d4a; }
  .toop-mtab__item:hover, .toop-mtab__item:focus-visible {
    color: #19b4eb;
  }
  .toop-mtab__item:hover svg, .toop-mtab__item:focus-visible svg { color: #19b4eb; }
  /* homepage: no product filters here, so drop the Filters tab (Shop + My account
     only) to match the reference; it stays on shop/archive pages where it works */
  .home .toop-mtab [data-mtab-filters] { display: none; }
  .home .toop-mtab { justify-content: space-between; padding-inline: 28px; }

  /* ===== Drawer backdrop =====
     IMPORTANT: must stay display:none while [hidden] is present, otherwise this
     fixed, full-viewport, transparent layer (z-index 9998) silently intercepts
     every tap on mobile and the whole site behaves like a dead static image. */
  .toop-fdrawer-backdrop { display: none; }
  .toop-fdrawer-backdrop:not([hidden]) {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20,33,59,.45);
    z-index: 9998;
    opacity: 0;
    transition: opacity .26s ease;
  }
  .toop-fdrawer-backdrop.is-on { opacity: 1; }
  body.toop-fdrawer-locked { overflow: hidden; }
}

/* extra-small phones */
@media (max-width: 420px) {
  .wc-archive,
  main.wc-archive,
  .wp-block-group.wc-archive {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .tps-shopcats__wrap { padding: 0 12px !important; }
  .tps-shopcats__title { font-size: 1.5rem !important; }
  .wc-archive ul.products li.product { padding: 14px !important; }
  .toop-price-filter .price_slider_amount .button { padding: 10px 18px !important; font-size: .85rem !important; }
}

/* ============================================================
   MOBILE HEADER — ensure logo shows between hamburger and cart
   ============================================================ */
@media (max-width: 768px) {
  /* Use simple flex on small screens so the logo can't collapse to 0 */
  .site-header__container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: calc(100% - 24px) !important;
    min-height: 64px !important;
    padding: 0;
  }
  .site-header__left,
  .site-header__actions {
    flex: 0 0 auto;
  }
  .site-header__logo {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    display: flex;
  }
  .site-logo-img,
  .site-logo-img--header {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 60vw !important;
    object-fit: contain;
    display: block;
  }
  .site-header__icon-btn { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .site-logo-img--header { height: 34px !important; max-width: 55vw !important; }
  .site-header__container { min-height: 56px !important; }
}

/* ============================================================
   MY ACCOUNT — Login / Register
   Branded two-card layout (side-by-side on desktop, stacked on mobile).
   ============================================================ */
.woocommerce-account .entry-content,
.woocommerce-account .woocommerce { max-width: 1100px; margin-inline: auto; }

#customer_login.u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
#customer_login .u-column1,
#customer_login .u-column2 {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 14px 38px -24px rgba(20, 33, 59, 0.4);
}
/* Register card gets a subtle highlight so it stands out */
#customer_login .u-column2 {
  border-color: #cfeefb;
  background: linear-gradient(180deg, #f7fcff 0%, #fff 120px);
}

#customer_login h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1f2d4a;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.toop-acct__intro {
  color: #5b6675;
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 18px;
}

/* form fields */
.woocommerce-account .woocommerce-form-row label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: #1f2d4a;
  margin-bottom: 6px;
}
.woocommerce-account .woocommerce-form-row .required { color: #e3514f; border: 0; }
.woocommerce-account form .input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #dfe5ec;
  border-radius: 10px;
  font-size: 1rem;
  color: #1f2d4a;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.woocommerce-account form .input-text:focus,
.woocommerce-account form input:focus {
  outline: 0;
  border-color: #19b4eb;
  box-shadow: 0 0 0 3px rgba(25, 180, 235, 0.18);
}

/* first/last name on one row (desktop), stacked on small screens */
.woocommerce-account .form-row-first { width: 48%; float: left; }
.woocommerce-account .form-row-last  { width: 48%; float: right; }
.woocommerce-account .woocommerce-form-register::after { content: ""; display: table; clear: both; }

/* note text for the auto-password flow */
.woocommerce-account .woocommerce-form-register > p:not(.form-row):not(.toop-acct__intro) {
  font-size: .85rem;
  color: #8a93a0;
  margin: 4px 0 16px;
}

/* buttons */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .2s;
  margin-top: 6px;
}
.woocommerce-account .woocommerce-form-register__submit {
  background: #19b4eb; color: #fff;
}
.woocommerce-account .woocommerce-form-register__submit:hover { background: #0f9bd0; transform: translateY(-1px); }
.woocommerce-account .woocommerce-form-login__submit {
  background: #1f2d4a; color: #fff;
}
.woocommerce-account .woocommerce-form-login__submit:hover { background: #16223a; transform: translateY(-1px); }

/* remember-me + lost password */
.woocommerce-account .woocommerce-form-login__rememberme { font-size: .9rem; color: #5b6675; }
.woocommerce-account .lost_password a { color: #19b4eb; text-decoration: none; font-size: .9rem; }
.woocommerce-account .lost_password a:hover { text-decoration: underline; }

/* ---- mobile: stack the two cards ---- */
@media (max-width: 768px) {
  #customer_login.u-columns { grid-template-columns: 1fr; gap: 18px; }
  #customer_login .u-column1,
  #customer_login .u-column2 { padding: 22px 18px; border-radius: 14px; }
  .woocommerce-account .form-row-first,
  .woocommerce-account .form-row-last { width: 100%; float: none; }
  .woocommerce-account .entry-content { padding-bottom: 88px !important; } /* clear bottom tab bar */
}

/* ============================================================
   HOMEPAGE HERO (Elementor) — match reference design
   Scoped to the hero section's stable element IDs only, so it
   never affects other Elementor pages/sections.
   ============================================================ */

/* widen the hero content (kit caps it at 1140 → too narrow, heading wrapped to 3
   lines). 1340 gives a ~777px text column so "Viprefrigerant Your Cooling" fits
   on one line AND a bigger image column — matches the reference width.
   DESKTOP ONLY — mobile/tablet keep Elementor's responsive container + padding. */
@media (min-width: 1025px) {
  .site-main > .elementor,
  .site-main .elementor-element-toophero1 { max-width: none !important; width: 100% !important; }
  .elementor-element-toophero1 > .elementor-container {
    max-width: 1340px !important;
    width: 100% !important;
    margin-inline: auto !important;
  }
}
/* vertically center the two columns + tighten the gap between them */
.elementor-element-toophero1 .elementor-container { align-items: center; }
/* override Elementor's default 20px column-gap padding so the columns sit close */
.elementor-element-toophero1 > .elementor-container.elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
.elementor-element-toophero1 .elementor-element-populated { padding: 0 !important; }
/* columns 58% / 40% with a ~24px gap — matches the reference layout */
.elementor-element-toophero1 .elementor-element-heroleft1  { width: 58% !important; }
.elementor-element-toophero1 .elementor-element-heroright1 { width: 40% !important; }
.elementor-element-toophero1 .elementor-element-heroleft1  > .elementor-element-populated { padding: 0 12px 0 0 !important; }
.elementor-element-toophero1 .elementor-element-heroright1 > .elementor-element-populated { padding: 0 0 0 12px !important; }

/* HERO IMAGE — fits its column, light 8px rounding + subtle saturation (reference) */
.elementor-element-heroim001 { text-align: right; line-height: 0; }
.elementor-element-heroim001 img {
  width: 100% !important;
  max-width: none !important;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  filter: saturate(1.19);
}

/* Geologica typeface across the hero text (matches viprefrigerant.com) — forced
   so no theme/Elementor default font can win */
.elementor-element-toophero1 .elementor-element-heroleft1,
.elementor-element-herohd001 .elementor-heading-title,
.elementor-element-herohd001 .elementor-heading-title u,
.elementor-element-herotx001,
.elementor-element-herotx001 p,
.elementor-element-herols001 .wd-marquee-item {
  font-family: "Geologica", -apple-system, "Segoe UI", sans-serif !important;
}
/* heading: tight 2-line block, capped width so the line breaks match the reference */
.elementor-element-herohd001 .elementor-heading-title {
  line-height: 1.1;
  max-width: 760px;
}
/* colored words use <u> (Woodmart wd-underline-colored) — coloured, no underline */
.elementor-element-herohd001 .elementor-heading-title u {
  color: #19b4eb;
  text-decoration: none;
}

/* FEATURES — Woodmart-style scrolling marquee (matches viprefrigerant.com) */
.elementor-element-herols001 .elementor-widget-container { margin-top: 22px; }
.elementor-element-herols001 .wd-marquee {
  display: flex;
  overflow: hidden;
  padding: 12px 0;
  background: #f5f6f8;
  border-radius: 16px;
  -webkit-user-select: none;
          user-select: none;
}
/* two identical content tracks slide left in lockstep for a seamless loop */
.elementor-element-herols001 .wd-marquee-content {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  animation: wd-marquee-scroll 18s linear infinite;
}
.elementor-element-herols001 .wd-marquee:hover .wd-marquee-content {
  animation-play-state: paused;   /* pause on hover */
}
@keyframes wd-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-element-herols001 .wd-marquee-content { animation: none; }
}
.elementor-element-herols001 .wd-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 600;
  color: #1f2d4a;
}
.elementor-element-herols001 .wd-marquee-item img {
  width: 42px;
  height: 42px;
  flex: none;
}

/* ---- hero: tablet + mobile (columns stack) ---- */
@media (max-width: 1024px) {
  .elementor-element-toophero1 .elementor-element-heroleft1,
  .elementor-element-toophero1 .elementor-element-heroright1 { width: 100% !important; }
  /* vertical gap only; horizontal inset is handled by the section padding below */
  .elementor-element-toophero1 .elementor-element-heroleft1  > .elementor-element-populated { padding: 0 0 14px 0 !important; }
  .elementor-element-toophero1 .elementor-element-heroright1 > .elementor-element-populated { padding: 0 0 0 0 !important; }
}

/* ============================================================
   HERO — MOBILE TYPOGRAPHY + SPACING (match viprefrigerant.com)
   High-specificity + !important so it beats Elementor's inline
   sizing and any critical-CSS the optimizer inlines.
   ============================================================ */
@media (max-width: 767px) {
  /* 1) side padding on the SECTION so NOTHING touches the edges */
  .elementor-250 .elementor-element.elementor-element-toophero1 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-250 .elementor-element.elementor-element-toophero1 > .elementor-container {
    max-width: 100% !important;
  }

  /* 2) heading — Geologica, semibold, tight, reference size */
  .elementor-250 .elementor-element.elementor-element-herohd001 .elementor-heading-title {
    font-family: "Geologica", -apple-system, "Segoe UI", sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  /* 3) paragraph — Geologica, regular, reference size + colour */
  .elementor-250 .elementor-element.elementor-element-herotx001,
  .elementor-250 .elementor-element.elementor-element-herotx001 .elementor-widget-container,
  .elementor-250 .elementor-element.elementor-element-herotx001 p {
    font-family: "Geologica", -apple-system, "Segoe UI", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #767676 !important;
  }

  /* 4) image + marquee insets handled by section padding */
  .elementor-element-heroim001 img { border-radius: 8px; }
  .elementor-element-herols001 .wd-marquee-item { font-size: .9rem; padding: 0 18px; }
}