.internal-page {
  --internal-navy: #073b86;
  --internal-yellow: #ffb400;
  --internal-cream: #f7efe5;
  --internal-gray: #687386;
  background: var(--internal-cream);
  overflow-x: hidden;
}

.internal-page,
.internal-page html {
  max-width: 100%;
}

.internal-page .site-shell {
  overflow-x: hidden;
}

.internal-page .site-header {
  position: sticky;
}

.internal-page .mobile-search-chips {
  display: none;
}

.internal-top-frame {
  position: relative;
  z-index: 5;
}

.internal-hero-light{
  position: relative;
  overflow: hidden;
  padding: 72px 0 86px;
  background: var(--internal-cream);
}

.internal-hero-light::before,
.category-hero::before,
.handyman-hero::before{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(7, 59, 134, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 59, 134, .045) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
}

.internal-hero-grid,
.category-hero-grid,
.handyman-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr);
  align-items: center;
  gap: 58px;
}

.internal-hero-copy,
.category-copy,
.handyman-copy {
  display: grid;
  min-width: 0;
  gap: 18px;
  align-content: center;
}

.internal-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--internal-gray);
  font-size: 14px;
  font-weight: 800;
}

.internal-breadcrumbs a:hover {
  color: var(--internal-navy);
}

.internal-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(7, 59, 134, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: var(--internal-navy);
  font-size: 14px;
  font-weight: 900;
}

.internal-hero-copy h1,
.category-copy h1,
.handyman-copy h1 {
  max-width: 780px;
  margin: 0;
  color: var(--internal-navy);
  font-size: clamp(44px, 5vw, 84px);
  line-height: .98;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.internal-hero-copy h1 em{
  color: var(--internal-yellow);
  font-style: normal;
}

.internal-hero-copy p,
.category-copy p,
.handyman-copy p {
  max-width: 620px;
  margin: 0;
  color: #344054;
  font-size: 20px;
  line-height: 1.65;
}

.internal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.internal-primary,
.internal-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
}

.internal-primary {
  border: 1px solid var(--internal-yellow);
  background: var(--internal-yellow);
  color: #061f5c;
}

.internal-secondary {
  border: 1px solid rgba(7, 59, 134, .24);
  background: rgba(255, 255, 255, .62);
  color: var(--internal-navy);
}

.internal-hero-visual,
.category-visual,
.handyman-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

.product-index-visual {
  background: transparent;
  border-radius: 0;
}

.internal-hero-visual img {
  width: 100%;
  filter: drop-shadow(0 24px 30px rgba(3, 29, 71, .14));
}

.catalog-page-section,
.category-content,
.handyman-editorial,
.handyman-process,
.handyman-faq,
.final-service-cta,
.internal-status {
  padding: 74px 0;
  background: #fff;
}

.compact-search {
  margin: 28px 0 34px;
  min-height: 62px;
}

.department-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 28px;
}

.department-pills a,
.subcategory-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(7, 59, 134, .14);
  border-radius: 999px;
  background: #fff;
  color: var(--internal-navy);
  font-weight: 900;
}

.department-pills a.active,
.department-pills a:hover {
  border-color: var(--internal-yellow);
  background: var(--internal-yellow);
}

.catalog-count-line,
.internal-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  color: var(--internal-gray);
  font-weight: 800;
}

.catalog-count-line strong,
.internal-section-head h2 {
  margin: 0;
  color: var(--internal-navy);
  font-size: 28px;
}

.internal-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.internal-product-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 348px;
  border: 1px solid rgba(7, 59, 134, .1);
  border-radius: 16px;
  background: var(--internal-cream);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease;
}

.internal-product-card.is-ready {
  opacity: 0;
  transform: translateY(14px);
  animation: card-in 420ms cubic-bezier(.22, 1, .36, 1) var(--card-delay, 0ms) forwards;
}

.internal-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(7, 59, 134, .22);
}

@keyframes card-in {
  to { opacity: 1; transform: translateY(0); }
}

.internal-product-link {
  display: grid;
  min-width: 0;
  grid-template-rows: 190px 1fr;
}

.internal-product-media {
  display: grid;
  place-items: center;
  padding: 18px;
  background: #fff;
}

.internal-product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.internal-product-copy {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px 16px 12px;
}

.internal-product-category {
  color: var(--internal-gray);
  font-size: 13px;
  font-weight: 900;
}

.internal-product-card h3 {
  margin: 0;
  color: var(--internal-navy);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.internal-product-card strong {
  color: #111827;
  font-size: 18px;
}

.internal-product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  align-self: end;
  background: rgba(7, 59, 134, .1);
}

.internal-product-actions a {
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  background: #fff;
  color: var(--internal-navy);
  font-size: 14px;
  font-weight: 900;
}

.internal-product-actions a:last-child {
  color: #087a3d;
}

.internal-empty {
  margin: 30px 0 0;
  padding: 26px;
  border-radius: 16px;
  background: var(--internal-cream);
  color: var(--internal-gray);
  text-align: center;
  font-weight: 800;
}

.internal-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
  color: var(--internal-navy);
  font-weight: 900;
}

.internal-pagination a {
  min-width: 86px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--internal-yellow);
  text-align: center;
}
.category-help-cta {
  border: 1px solid rgba(7, 59, 134, .13);
  border-radius: 18px;
  background: #fff;
}
.handyman-editorial h2,
.handyman-process h2,
.handyman-faq h2,
.final-service-cta h2 {
  margin: 0;
  color: var(--internal-navy);
}
.handyman-editorial-grid,
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 22px;
}
.internal-section-head a {
  color: var(--internal-navy);
  font-weight: 900;
}

.category-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 82px;
  background: var(--internal-navy);
  color: #fff;
}

.category-copy h1,
.category-copy p,
.category-copy .internal-breadcrumbs,
.category-copy .internal-breadcrumbs a {
  color: #fff;
}

.category-copy .internal-eyebrow {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: var(--internal-yellow);
}

.category-stat {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
}

.category-stat strong {
  color: var(--internal-yellow);
  font-size: 28px;
}

.category-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.subcategory-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-help-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-top: 42px;
  padding: 20px;
  background: var(--internal-cream);
}

.category-help-cta div {
  display: grid;
  gap: 4px;
}

.category-help-cta strong {
  color: var(--internal-navy);
  font-size: 22px;
}

.category-help-cta span {
  color: var(--internal-gray);
  font-weight: 800;
}

.category-help-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 10px;
  background: #fff;
  color: var(--internal-navy);
  font-weight: 900;
}

.handyman-hero {
  position: relative;
  overflow: hidden;
  padding: 68px 0 82px;
  background: var(--internal-cream);
}

.handyman-media img {
  width: 100%;
  aspect-ratio: 1.36 / 1;
  object-fit: cover;
}

.handyman-lead {
  color: var(--internal-navy) !important;
  font-weight: 900;
}

.handyman-editorial article {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 34px;
  border-radius: 20px;
  background: var(--internal-cream);
}

.handyman-editorial article span {
  color: var(--internal-gray);
  font-weight: 900;
}

.handyman-editorial article p {
  margin: 0;
  color: #344054;
  font-size: 19px;
  line-height: 1.65;
}

.handyman-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.handyman-service-list li {
  display: grid;
  min-height: 112px;
  align-items: end;
  padding: 20px;
  border: 1px solid rgba(7, 59, 134, .13);
  border-radius: 16px;
  background: #fff;
  color: var(--internal-navy);
  font-size: 20px;
  font-weight: 900;
}

.handyman-process {
  background: var(--internal-cream);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.process-steps article {
  display: grid;
  gap: 22px;
  min-height: 150px;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
}

.process-steps span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--internal-yellow);
  color: #061f5c;
  font-weight: 900;
}

.process-steps strong {
  color: var(--internal-navy);
  font-size: 21px;
}

.service-area {
  width: fit-content;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--internal-gray);
  font-weight: 900;
}

.service-area strong {
  color: var(--internal-navy);
}

.faq-grid {
  grid-template-columns: .55fr 1fr;
}

.faq-grid details {
  grid-column: 2;
  border-bottom: 1px solid rgba(7, 59, 134, .12);
  padding: 18px 0;
}

.faq-grid h2 {
  grid-row: 1 / span 4;
  font-size: 42px;
}

.faq-grid summary {
  cursor: pointer;
  color: var(--internal-navy);
  font-size: 19px;
  font-weight: 900;
}

.faq-grid p {
  margin: 12px 0 0;
  color: #344054;
  line-height: 1.6;
}

.final-service-cta {
  background: var(--internal-navy);
  color: #fff;
  text-align: center;
}

.final-service-inner {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.final-service-cta h2 {
  color: #fff;
  font-size: 46px;
}

.final-service-cta > .site-container > a {
  color: var(--internal-yellow);
  font-size: 32px;
  font-weight: 900;
}

.internal-status {
  min-height: 50vh;
}

.internal-status h1 {
  color: var(--internal-navy);
}

@media (max-width: 1120px) {
  .internal-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .internal-hero-grid,
  .category-hero-grid,
  .handyman-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
    gap: 34px;
  }
}

@media (max-width: 760px) {
  /* Same fix as the desktop block further down: sticky is bounded by
     .internal-top-frame, so making only .site-header sticky can never
     keep it on screen — the wrapper itself has to carry it. This was
     desktop-only before, so the header scrolled away on mobile while
     everything below it (search bar, category pills) had been made
     sticky instead — backwards from what the header is for. */
  .internal-page .internal-top-frame {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    /* No transform here: it would make this header the containing block for
       position:fixed descendants, and the mobile drawer lives inside it -
       the drawer would then be pinned to the header instead of the viewport. */
  }

  .internal-page .site-header {
    position: relative;
    top: auto;
    z-index: auto;
  }

  .internal-hero-light,
  .category-hero,
  .handyman-hero {
    padding: 34px 0 42px;
  }

  .internal-hero-grid,
  .category-hero-grid,
  .handyman-hero-grid,
  .handyman-editorial-grid,
  .faq-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .internal-hero-copy,
  .category-copy,
  .handyman-copy {
    width: 100%;
  }

  .category-visual,
  .handyman-media {
    order: -1;
    width: 100%;
    min-height: 0;
  }

  .internal-hero-copy h1,
  .category-copy h1,
  .handyman-copy h1 {
    width: 100%;
    max-width: 100%;
    font-size: 38px;
    line-height: 1.04;
    text-wrap: balance;
  }

  .products-index-page .internal-hero-copy h1 {
    max-width: 330px;
    justify-self: end;
    font-size: 30px;
  }

  .product-index-visual {
    width: 100%;
    overflow: hidden;
  }

  .product-index-visual img {
    width: 100%;
    max-width: none;
  }

  .internal-hero-copy p,
  .category-copy p,
  .handyman-copy p {
    font-size: 17px;
  }

  .internal-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .internal-primary,
  .internal-secondary {
    width: 100%;
  }

  .catalog-page-section,
  .category-content,
  .handyman-editorial,
  .handyman-process,
  .handyman-faq,
  .final-service-cta {
    padding: 46px 0;
  }

  .department-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .department-pills::-webkit-scrollbar {
    display: none;
  }

  .department-pills a {
    flex: 0 0 auto;
  }

  .internal-product-grid {
    /* Two columns on phones; a single column is reserved for very narrow
       devices in the 360px block. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .internal-product-card {
    min-height: 292px;
    border-radius: 12px;
  }

  .internal-product-link {
    grid-template-rows: 140px 1fr;
  }

  .internal-product-copy {
    padding: 12px;
  }

  .internal-product-card h3 {
    font-size: 15px;
  }

  .internal-product-actions {
    grid-template-columns: 1fr;
  }

  .internal-product-actions a {
    min-height: 42px;
    font-size: 13px;
  }

  .category-help-cta,
  .process-steps,
  .handyman-service-list {
    grid-template-columns: 1fr;
  }

  .faq-grid details,
  .faq-grid h2 {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .internal-product-card,
  .internal-product-card.is-ready {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* =========================================================
   CATALOG V2 — compact catalogue, Wolt-like system / own style
   ========================================================= */

.products-index-page.catalog-v2-page {
  background: #f8f5ef;
}

.products-index-page .catalog-v2-section {
  position: relative;
  min-height: 70vh;
  padding: 44px 0 84px;
  background:
    linear-gradient(rgba(7, 59, 134, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 59, 134, .018) 1px, transparent 1px),
    #f8f5ef;
  background-size: 48px 48px;
}

.catalog-compact-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(7, 59, 134, .08);
}

.catalog-compact-copy {
  display: grid;
  max-width: 760px;
  gap: 8px;
}

.catalog-kicker {
  width: fit-content;
  color: #d89500;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.catalog-compact-head h1 {
  margin: 0;
  color: var(--internal-navy);
  font-size: clamp(40px, 4.4vw, 68px);
  font-weight: 900;
  line-height: .98;
}

.catalog-compact-head p {
  max-width: 700px;
  margin: 2px 0 0;
  color: #5f6b7c;
  font-size: 17px;
  line-height: 1.55;
}

.catalog-head-meta {
  display: grid;
  min-width: 120px;
  justify-items: end;
  padding: 14px 0 4px;
}

.catalog-head-meta strong {
  color: var(--internal-navy);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.catalog-head-meta span {
  margin-top: 5px;
  color: #7f8998;
  font-size: 12px;
  font-weight: 800;
}

.catalog-v2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 228px;
  gap: 30px;
  align-items: start;
}

.catalog-v2-main {
  min-width: 0;
}

.catalog-sidebar {
  position: static;
  padding: 10px;
  border: 1px solid rgba(7, 59, 134, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 28px rgba(7, 59, 134, .04);
  backdrop-filter: blur(10px);
}

.catalog-sidebar nav {
  display: grid;
  gap: 4px;
}

.catalog-sidebar a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 5px 9px;
  border-radius: 12px;
  color: #22446f;
  font-size: 13px;
  font-weight: 800;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.catalog-sidebar a:hover {
  background: rgba(7, 59, 134, .045);
  transform: translateX(-2px);
}

.catalog-sidebar a.active {
  background: rgba(255, 180, 0, .13);
  color: var(--internal-navy);
  font-weight: 900;
}

.catalog-thumb {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(7, 59, 134, .07);
  border-radius: 50%;
  background: var(--internal-cream);
}

.catalog-thumb img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
}

.catalog-thumb.all-thumb {
  color: var(--internal-navy);
}

.catalog-mobile-pills {
  display: none;
}

.catalog-v2-count {
  margin: 24px 0 16px;
}

.catalog-v2-count strong {
  font-size: 18px;
}

.catalog-v2-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.catalog-v2-grid .internal-product-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 344px;
  border: 1px solid rgba(7, 59, 134, .075);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(7, 59, 134, .035);
  overflow: hidden;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), box-shadow 280ms ease, border-color 280ms ease;
}

.catalog-v2-grid .internal-product-card:hover {
  border-color: rgba(7, 59, 134, .15);
  box-shadow: 0 16px 38px rgba(7, 59, 134, .085);
  transform: translateY(-4px);
}

.catalog-v2-grid .internal-product-card.is-ready {
  opacity: 0;
  transform: translateY(8px);
  animation: catalog-card-in 280ms cubic-bezier(.22, 1, .36, 1) var(--card-delay, 0ms) forwards;
}

@keyframes catalog-card-in {
  to { opacity: 1; transform: translateY(0); }
}

.catalog-v2-grid .internal-product-link {
  display: grid;
  grid-template-rows: 188px minmax(0, 1fr);
  color: inherit;
}

.catalog-v2-grid .internal-product-media {
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  background: var(--internal-cream);
}

.catalog-v2-grid .internal-product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.catalog-v2-grid .internal-product-card:hover .internal-product-media img {
  transform: translateY(-3px) scale(1.035);
}

.catalog-v2-grid .internal-product-copy {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 6px;
  padding: 15px 16px 12px;
}

.catalog-v2-grid .internal-product-category {
  color: #8a94a4;
  font-size: 11px;
  font-weight: 800;
}

.catalog-v2-grid .internal-product-card h3 {
  display: -webkit-box;
  min-height: 42px;
  margin: 0;
  overflow: hidden;
  color: var(--internal-navy);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.internal-product-info {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: #7b8595;
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-v2-grid .internal-product-price {
  align-self: end;
  color: var(--internal-navy);
  font-size: 20px;
  font-weight: 900;
  direction: ltr;
  text-align: right;
}

.catalog-v2-grid .internal-product-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px 13px;
  border-top: 1px solid rgba(7, 59, 134, .07);
  background: #fff;
}

.catalog-v2-grid .internal-product-actions a {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: transparent;
  color: var(--internal-navy);
  font-size: 11px;
  font-weight: 900;
  transition: color 180ms ease, transform 180ms ease;
}

.catalog-v2-grid .internal-product-details:hover {
  transform: translateX(-3px);
}

.catalog-v2-grid .internal-product-availability {
  color: #28517f;
}

.catalog-v2-grid .internal-product-availability i {
  color: var(--internal-yellow);
}

.catalog-no-results {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 34px;
  border: 1px solid rgba(7, 59, 134, .08);
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  text-align: center;
}

.catalog-no-results-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 180, 0, .12);
  color: var(--internal-navy);
}

.catalog-no-results h2 {
  margin: 8px 0 0;
  color: var(--internal-navy);
  font-size: 28px;
}

.catalog-no-results p {
  max-width: 520px;
  margin: 0;
  color: #697386;
}

.catalog-no-results > div {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* Search modal */
body.catalog-search-open {
  overflow: hidden;
}

.internal-page .search-overlay {
  display: none !important;
}

@keyframes search-shimmer {
  to { background-position: -220% 0; }
}

@media (max-width: 1220px) {
  .catalog-v2-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .catalog-v2-layout {
    grid-template-columns: 1fr;
  }

  .catalog-sidebar {
    display: none;
  }

  .catalog-mobile-pills {
    display: flex;
    gap: 8px;
    margin: 14px 0 22px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .catalog-mobile-pills::-webkit-scrollbar {
    display: none;
  }

  .catalog-mobile-pills a {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(7, 59, 134, .10);
    border-radius: 999px;
    background: #fff;
    color: var(--internal-navy);
    font-size: 12px;
    font-weight: 900;
  }

  .catalog-mobile-pills a.active {
    border-color: var(--internal-yellow);
    background: var(--internal-yellow);
  }

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

@media (max-width: 760px) {
  .products-index-page .catalog-v2-section {
    padding: 24px 0 54px;
  }

  .catalog-compact-head {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 18px;
  }

  .catalog-compact-head h1 {
    font-size: 36px;
  }

  .catalog-compact-head p {
    font-size: 15px;
  }

  .catalog-head-meta {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-items: start;
    gap: 7px;
    padding: 0;
  }

  .catalog-head-meta strong {
    font-size: 22px;
  }

  .catalog-v2-count {
    margin: 18px 0 12px;
  }

  .catalog-v2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .catalog-v2-grid .internal-product-card {
    min-height: 284px;
    border-radius: 16px;
  }

  .catalog-v2-grid .internal-product-link {
    grid-template-rows: 142px minmax(0, 1fr);
  }

  .catalog-v2-grid .internal-product-media {
    padding: 12px;
  }

  .catalog-v2-grid .internal-product-copy {
    gap: 4px;
    padding: 11px 11px 9px;
  }

  .catalog-v2-grid .internal-product-category {
    font-size: 9px;
  }

  .catalog-v2-grid .internal-product-card h3 {
    min-height: 36px;
    font-size: 13px;
  }

  .internal-product-info {
    min-height: 0;
    font-size: 10px;
    -webkit-line-clamp: 1;
  }

  .catalog-v2-grid .internal-product-price {
    font-size: 17px;
  }

  .catalog-v2-grid .internal-product-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 9px 10px 10px;
  }

  .catalog-v2-grid .internal-product-actions a {
    justify-content: flex-start;
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .catalog-v2-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-v2-grid .internal-product-card,
  .catalog-v2-grid .internal-product-card.is-ready,
  .catalog-search-modal,
  .catalog-search-surface,
  .search-skeleton {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* =========================================================
   CATALOG V3 — product cards aligned with homepage shelf
   ========================================================= */

.products-index-page .catalog-v2-section {
  position: relative;
  isolation: isolate;
  background: #f7f3ea;
  padding: 44px 0 90px;
}

.products-index-page .catalog-v2-section::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(7, 59, 134, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 59, 134, .045) 1px, transparent 1px),
    linear-gradient(rgba(7, 59, 134, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 59, 134, .075) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 90px), transparent 100%);
}

.products-index-page .catalog-v2-section > .site-container {
  position: relative;
  z-index: 1;
}

.catalog-compact-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom-color: rgba(7, 59, 134, .07);
}

.catalog-search-panel.catalog-search-launch,
.catalog-sidebar {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(7, 59, 134, .08);
  box-shadow: 0 8px 24px rgba(3, 29, 71, .045);
}

.catalog-v2-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.catalog-v2-grid .internal-product-card,
.catalog-v2-grid .internal-product-card.is-ready {
  display: flex;
  min-width: 0;
  min-height: 306px;
  flex-direction: column;
  padding: 14px 13px 13px;
  border: 1px solid rgba(7, 59, 134, .07);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
  opacity: 1;
  transform: none;
  overflow: hidden;
  animation: catalog-home-card-in 520ms cubic-bezier(.22, 1, .36, 1) both;
  transition:
    transform 300ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 300ms cubic-bezier(.22, 1, .36, 1),
    border-color 300ms cubic-bezier(.22, 1, .36, 1);
}

.catalog-v2-grid .internal-product-card:nth-child(1) { animation-delay: 70ms; }
.catalog-v2-grid .internal-product-card:nth-child(2) { animation-delay: 120ms; }
.catalog-v2-grid .internal-product-card:nth-child(3) { animation-delay: 170ms; }
.catalog-v2-grid .internal-product-card:nth-child(4) { animation-delay: 220ms; }
.catalog-v2-grid .internal-product-card:nth-child(5) { animation-delay: 270ms; }
.catalog-v2-grid .internal-product-card:nth-child(6) { animation-delay: 320ms; }
.catalog-v2-grid .internal-product-card:nth-child(7) { animation-delay: 370ms; }
.catalog-v2-grid .internal-product-card:nth-child(8) { animation-delay: 420ms; }

@keyframes catalog-home-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.catalog-v2-grid .internal-product-link {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  color: inherit;
  text-align: center;
}

.catalog-v2-grid .internal-product-media {
    display: flex;
    height: 146px;
    place-items: center;
    margin: 0 0 13px;
    padding: 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #faf7f1;
    transition: background 300ms cubic-bezier(.22, 1, .36, 1);
}

.catalog-v2-grid .internal-product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.catalog-v2-grid .internal-product-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  text-align: center;
}

.catalog-v2-grid .internal-product-category {
  color: #97a1b1;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.catalog-v2-grid .internal-product-card h3 {
  display: -webkit-box;
  min-height: 40px;
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--internal-navy);
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: color 240ms cubic-bezier(.22, 1, .36, 1);
}

.catalog-v2-grid .internal-product-info {
  display: -webkit-box;
  min-height: 0;
  margin-top: 4px;
  overflow: hidden;
  color: #8c96a6;
  font-size: 11.5px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.catalog-v2-grid .internal-product-price {
  margin-top: auto;
  padding-top: 10px;
  color: var(--internal-navy);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  direction: ltr;
  text-align: center;
}

.catalog-v2-grid .internal-product-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  direction: rtl;
}

.catalog-v2-grid .internal-product-actions a {
  display: inline-flex;
  width: auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  white-space: nowrap;
}

.catalog-v2-grid .internal-product-availability {
  height: 38px;
  padding-inline: 13px !important;
  border-radius: 9px !important;
  background: var(--internal-navy) !important;
  color: #fff !important;
  font-weight: 800 !important;
  transition: background 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

.catalog-v2-grid .internal-product-availability i,
.catalog-v2-grid .internal-product-availability svg {
  color: var(--internal-yellow);
}

.catalog-v2-grid .internal-product-details {
  color: #6b7688 !important;
  font-weight: 700 !important;
  transition: color 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

@media (hover: hover) and (min-width: 900px) {
  .catalog-v2-grid .internal-product-card:hover,
  .catalog-v2-grid .internal-product-card.is-ready:hover {
    border-color: rgba(255, 180, 0, .38);
    box-shadow: 0 18px 38px rgba(3, 29, 71, .10);
    transform: translateY(-4px);
  }

  .catalog-v2-grid .internal-product-card:hover .internal-product-media {
    background: #f6f1e7;
  }

  .catalog-v2-grid .internal-product-card:hover .internal-product-media img {
    transform: translateY(-6px) scale(1.03);
  }

  .catalog-v2-grid .internal-product-card:hover h3 {
    color: #05306f;
  }

  .catalog-v2-grid .internal-product-availability:hover {
    background: #021d48 !important;
    transform: translateY(-2px);
  }

  .catalog-v2-grid .internal-product-details:hover {
    color: var(--internal-navy) !important;
    transform: translateX(-3px);
  }
}

/* Search results use the same visual language. */

@media (max-width: 1120px) {
  .catalog-v2-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .products-index-page .catalog-v2-section {
    padding: 30px 0 58px;
  }

  .products-index-page .catalog-v2-section::before {
    background-attachment: scroll;
  }

  .catalog-v2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .catalog-v2-grid .internal-product-card,
  .catalog-v2-grid .internal-product-card.is-ready {
    min-height: 272px;
    padding: 12px 10px 11px;
    border-radius: 15px;
  }

  .catalog-v2-grid .internal-product-media {
    height: 118px;
    flex-basis: 118px;
    margin-bottom: 11px;
  }

  .catalog-v2-grid .internal-product-card h3 {
    min-height: 37px;
    font-size: 13.5px;
  }

  .catalog-v2-grid .internal-product-category {
    font-size: 11px;
  }

  .catalog-v2-grid .internal-product-info {
    display: none;
  }

  .catalog-v2-grid .internal-product-price {
    font-size: 19px;
  }

  .catalog-v2-grid .internal-product-actions {
    gap: 7px;
  }

  .catalog-v2-grid .internal-product-actions a {
    font-size: 11.5px;
  }

  .catalog-v2-grid .internal-product-availability {
    height: 35px;
    padding-inline: 10px !important;
  }
}

@media (max-width: 360px) {
  .catalog-v2-grid {
    grid-template-columns: 1fr;
  }

  .catalog-v2-grid .internal-product-card,
  .catalog-v2-grid .internal-product-card.is-ready {
    width: min(100%, 390px);
    min-height: 292px;
    margin-inline: auto;
  }

  .catalog-v2-grid .internal-product-media {
    height: 142px;
    flex-basis: 142px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-v2-grid .internal-product-card,
  .catalog-v2-grid .internal-product-card.is-ready {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .catalog-v2-grid .internal-product-media img {
    transition: none !important;
  }
}

/* =========================================================
   CATALOG V4 — Wolt-like information architecture,
   Huleo/Shia visual language
   ========================================================= */
.products-index-page.catalog-v4-page {
  background:
    radial-gradient(circle at 88% 9%, rgba(255,180,0,.10), transparent 24%),
    radial-gradient(circle at 8% 54%, rgba(7,59,134,.045), transparent 28%),
    linear-gradient(180deg, #fbf8f2 0%, #f7f2e9 48%, #fbf8f2 100%);
}

.products-index-page .catalog-v4-section {
  position: relative;
  isolation: isolate;
  padding: 44px 0 96px;
  overflow: clip;
  background: transparent;
}

.products-index-page .catalog-v4-section::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  opacity: .65;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,180,0,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 42%, rgba(255,180,0,.18) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 0 6%, rgba(7,59,134,.055) 6% calc(6% + 1px), transparent calc(6% + 1px) 100%),
    linear-gradient(0deg, transparent 0 78%, rgba(7,59,134,.045) 78% calc(78% + 1px), transparent calc(78% + 1px) 100%);
  background-size: 260px 260px, 340px 340px, 620px 620px, 460px 460px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 55px, #000 calc(100% - 80px), transparent 100%);
}

.products-index-page .catalog-v4-section::after {
  position: absolute;
  top: 230px;
  right: -120px;
  z-index: 0;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255,180,0,.15);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 58px rgba(255,180,0,.025),
    0 0 0 118px rgba(7,59,134,.018);
  pointer-events: none;
}

.catalog-v4-section > .site-container {
  position: relative;
  z-index: 1;
}

.catalog-v4-layout {
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 28px;
  align-items: start;
}

.catalog-compact-head {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 26px;
  padding: 0 4px 24px;
  border-bottom: 1px solid rgba(7,59,134,.09);
}

.catalog-compact-head::after {
  position: absolute;
  right: 4px;
  bottom: -1px;
  width: 82px;
  height: 3px;
  border-radius: 999px;
  background: var(--internal-yellow);
  content: "";
}

.catalog-compact-copy h1 {
  margin-top: 7px;
}

.catalog-head-meta {
  min-width: 128px;
  padding: 14px 18px;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 10px 28px rgba(3,29,71,.04);
  backdrop-filter: blur(10px);
}

.catalog-head-meta strong {
  color: var(--internal-navy);
}

.catalog-local-search {
  position: static;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin-bottom: 18px;
  padding: 7px 10px 7px 18px;
  border: 1px solid rgba(7,59,134,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 34px rgba(3,29,71,.07);
  backdrop-filter: blur(14px);
}

.catalog-local-search::before {
  position: absolute;
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--internal-yellow);
  content: "";
}

.catalog-local-search-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,180,0,.14);
  color: var(--internal-navy);
}

.catalog-local-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--internal-navy);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
}

.catalog-local-search input::placeholder {
  color: #8b95a4;
}

.catalog-local-search-count {
  color: #8b95a4;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.catalog-local-search button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f2eee6;
  color: var(--internal-navy);
  cursor: pointer;
}

.catalog-sidebar {
  position: sticky;
  top: 14px;
  padding: 12px;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 38px rgba(3,29,71,.06);
  backdrop-filter: blur(14px);
  max-height: calc(100vh - 28px);
  overflow: hidden;
}

.catalog-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 12px;
  color: var(--internal-navy);
  font-size: 14px;
  font-weight: 900;
}

.catalog-sidebar-head small {
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,180,0,.14);
  color: #b77900;
  font-size: 11px;
}

.catalog-sidebar nav {
  max-height: calc(100vh - 92px);
  padding-left: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(7,59,134,.18) transparent;
}

.catalog-sidebar a {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  margin-bottom: 4px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--internal-navy);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.catalog-sidebar a:hover {
  background: rgba(255,180,0,.075);
  border-color: rgba(255,180,0,.16);
  transform: translateX(-2px);
}

.catalog-sidebar a.active {
  background: linear-gradient(90deg, rgba(255,180,0,.18), rgba(255,180,0,.08));
  border-color: rgba(255,180,0,.24);
  box-shadow: inset -3px 0 0 var(--internal-yellow);
}

.catalog-thumb {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #f7f1e7;
}

.catalog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.catalog-sidebar-label {
  min-width: 0;
}

.catalog-sidebar-label strong,
.catalog-sidebar-label small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-sidebar-label strong {
  font-size: 12.5px;
  font-weight: 850;
}

.catalog-sidebar-label small {
  margin-top: 1px;
  color: #929cac;
  font-size: 10.5px;
  font-weight: 600;
}

.catalog-v4-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 15px;
}

.catalog-v4-grid .internal-product-card,
.catalog-v4-grid .internal-product-card.is-ready {
  min-height: 300px;
  padding: 12px;
  border-color: rgba(7,59,134,.075);
  border-radius: 19px;
  background: rgba(255,255,255,.96);
}

.catalog-v4-grid .internal-product-media {
    height: 200px;
    margin-bottom: 11px;
    border-radius: 14px;
    background: radial-gradient(circle at 68% 32%, rgba(255,180,0,.10), transparent 34%),
    #faf7f1;
}

.catalog-v4-grid .internal-product-price {
  align-self: center;
  min-width: max-content;
  margin: 8px auto 0;
  padding: 8px 14px 0;
  color: var(--internal-navy);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: center;
}

.catalog-v4-grid .internal-product-actions {
  width: 100%;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  direction: rtl;
}

.catalog-v4-grid .internal-product-availability {
  min-width: 118px;
  height: 38px;
  padding-inline: 14px !important;
  border: 1px solid rgba(255,180,0,.55) !important;
  border-radius: 999px !important;
  background: var(--internal-yellow) !important;
  color: var(--internal-navy) !important;
  box-shadow: 0 8px 18px rgba(255,180,0,.14);
  font-weight: 900 !important;
}

.catalog-v4-grid .internal-product-availability i,
.catalog-v4-grid .internal-product-availability svg {
  color: var(--internal-navy) !important;
}

.catalog-v4-grid .internal-product-details {
  min-height: 38px !important;
  padding-inline: 4px !important;
  color: #697589 !important;
}

@media (hover:hover) and (min-width:900px) {
  .catalog-v4-grid .internal-product-card:hover {
    border-color: rgba(255,180,0,.38);
    box-shadow: 0 18px 40px rgba(3,29,71,.10);
  }

  .catalog-v4-grid .internal-product-availability:hover {
    background: #ffc633 !important;
    box-shadow: 0 10px 24px rgba(255,180,0,.22);
    transform: translateY(-2px);
  }
}

.catalog-local-empty {
  margin-top: 20px;
  padding: 30px;
  border: 1px dashed rgba(7,59,134,.16);
  border-radius: 20px;
  background: rgba(255,255,255,.6);
  text-align: center;
}

.catalog-local-empty > span {
  display: grid;
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,180,0,.14);
  color: var(--internal-navy);
}

.catalog-local-empty strong {
  display: block;
  color: var(--internal-navy);
  font-size: 18px;
}

.catalog-local-empty p {
  margin: 6px 0 0;
  color: #788394;
  font-size: 13px;
}

/* Global navbar search: same top-sheet feeling as homepage, full-site data. */

.search-yellow-mark {
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: var(--internal-yellow);
}

@keyframes catalog-search-shimmer {
  to { background-position-x: -200%; }
}

body.catalog-search-open {
  overflow: hidden;
}

@media (max-width: 1280px) {
  .catalog-v4-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 980px) {
  .catalog-v4-layout {
    grid-template-columns: 1fr;
  }

  .catalog-sidebar {
    display: none;
  }

  .catalog-v4-mobile-pills {
    display: flex;
  }

  .catalog-local-search {
    top: 8px;
  }
}

@media (max-width: 760px) {
  .products-index-page .catalog-v4-section {
    padding: 28px 0 62px;
  }

  .catalog-compact-head {
    align-items: stretch;
  }

  .catalog-head-meta {
    display: none;
  }

  .catalog-local-search {
    grid-template-columns: auto minmax(0,1fr) auto;
    padding: 7px 9px 7px 12px;
  }

  .catalog-local-search-count {
    display: none;
  }

  .catalog-v4-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
  }

  .catalog-v4-grid .internal-product-card,
  .catalog-v4-grid .internal-product-card.is-ready {
    min-height: 268px;
  }

  .catalog-v4-grid .internal-product-media {
    height: 116px;
    flex-basis: 116px;
  }

  .catalog-v4-grid .internal-product-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-v4-grid .internal-product-availability,
  .catalog-v4-grid .internal-product-details {
    width: 100% !important;
    justify-content: center;
  }

  .catalog-v4-grid .internal-product-details {
    min-height: 30px !important;
  }
}

@media (max-width: 360px) {
  .catalog-v4-grid {
    grid-template-columns: 1fr;
  }

  .catalog-v4-grid .internal-product-card,
  .catalog-v4-grid .internal-product-card.is-ready {
    width: min(100%,390px);
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-search-modal,
  .catalog-search-surface,
  .catalog-sidebar a,
  .search-product-card,
  .search-category-suggestions a,
  .search-category-result {
    transition: none !important;
  }
}

/* =========================================================
   CATALOG V5 — fixed rails, image-led categories, soft swaps
   ========================================================= */
/* The catalogue environment: base cream, the two soft glows and the
   blueprint grid. Scoped to .catalog-environment so the catalogue and the
   product page share one implementation instead of two lookalikes. */
.catalog-environment.catalog-v5-page {
  --catalog-cream: #f7f3ea;
  --catalog-paper: #fbf9f4;
  --catalog-navy: #073b86;
  --catalog-yellow: #ffb400;
  background:
    radial-gradient(circle at 92% 7%, rgba(255,180,0,.075), transparent 20%),
    radial-gradient(circle at 4% 38%, rgba(7,59,134,.035), transparent 26%),
    var(--catalog-cream);
}

.catalog-environment .catalog-v5-section {
  padding-top: 34px;
  background: transparent;
}

.catalog-environment .catalog-v5-section::before {
  opacity: .26;
  background-image:
    linear-gradient(rgba(7,59,134,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,59,134,.035) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 100px, #000 calc(100% - 100px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 100px, #000 calc(100% - 100px), transparent);
}

.catalog-environment .catalog-v5-section::after {
  top: 220px;
  right: auto;
  left: -90px;
  width: 250px;
  height: 250px;
  border-color: rgba(255,180,0,.09);
  box-shadow: 0 0 0 46px rgba(255,180,0,.018), 0 0 0 92px rgba(7,59,134,.012);
}

.catalog-v5-layout {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 286px !important;
  grid-template-areas: "main sidebar";
  gap: 26px;
  align-items: start;
}

.catalog-v5-main {
  grid-area: main;
  min-width: 0;
  direction: rtl;
}

.catalog-v5-layout > .catalog-sidebar {
  grid-area: sidebar;
  direction: rtl;
}

/* Keep local search visible while only the products move beneath it. */
.catalog-v5-page .catalog-local-search {
  top: 14px;
  z-index: 40;
  min-height: 62px;
  margin-bottom: 16px;
  padding: 7px 9px 7px 14px;
  border: 1px solid rgba(7,59,134,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.965);
  box-shadow: 0 12px 32px rgba(3,29,71,.07);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.catalog-v5-page .catalog-local-search:focus-within {
  border-color: rgba(255,180,0,.62);
  box-shadow: 0 14px 36px rgba(3,29,71,.08), 0 0 0 3px rgba(255,180,0,.09);
}

.catalog-v5-page .catalog-local-search::before {
  top: 11px;
  bottom: 11px;
  width: 4px;
  background: var(--catalog-yellow);
}

.catalog-v5-page .catalog-local-search-icon {
  width: 40px;
  height: 40px;
  background: rgba(255,180,0,.16);
}

.catalog-v5-page .catalog-local-search input {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
  font-size: 15px;
}

.catalog-v5-page .catalog-local-search-count {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f6f1e8;
  color: #778395;
}

.catalog-v5-layout.is-loading-category .catalog-local-search::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--catalog-yellow) 35%, #ffd86a 50%, var(--catalog-yellow) 65%, transparent 100%);
  background-size: 220% 100%;
  content: "";
  animation: catalog-loading-line 800ms linear infinite;
}

@keyframes catalog-loading-line {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* Category rail lives physically on the RIGHT, independent of RTL flow. */
.catalog-v5-page .catalog-sidebar {
  position: sticky;
  top: 14px;
  z-index: 35;
  max-height: calc(100vh - 28px);
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(7,59,134,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 14px 36px rgba(3,29,71,.07);
  backdrop-filter: blur(16px);
}

.catalog-v5-page .catalog-sidebar-head {
  padding: 9px 9px 13px;
}

.catalog-v5-page .catalog-sidebar-head > div {
  min-width: 0;
}

.catalog-v5-page .catalog-sidebar-head span,
.catalog-v5-page .catalog-sidebar-head em {
  display: block;
}

.catalog-v5-page .catalog-sidebar-head span {
  color: var(--catalog-navy);
  font-size: 15px;
  font-weight: 950;
}

.catalog-v5-page .catalog-sidebar-head em {
  margin-top: 2px;
  color: #8b95a4;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 650;
}

.catalog-v5-page .catalog-sidebar nav {
  position: relative;
  max-height: calc(100vh - 92px);
  padding: 2px 2px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(7,59,134,.14) transparent;
}

.catalog-active-pill {
  --pill-y: 0px;
  --pill-h: 50px;
  position: absolute;
  top: 0;
  right: 2px;
  left: 2px;
  z-index: 0;
  height: var(--pill-h);
  border: 1px solid rgba(255,180,0,.28);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,180,0,.08), rgba(255,180,0,.18));
  box-shadow: inset -3px 0 0 var(--catalog-yellow), 0 7px 18px rgba(255,180,0,.07);
  transform: translate3d(0,var(--pill-y),0);
  transition: transform 360ms cubic-bezier(.22,1,.36,1), height 360ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}

.catalog-v5-page .catalog-sidebar a {
  position: relative;
  z-index: 1;
  min-height: 50px;
  margin-bottom: 4px;
  padding: 5px 7px;
  border-color: transparent;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 220ms ease, transform 250ms cubic-bezier(.22,1,.36,1);
}

.catalog-v5-page .catalog-sidebar a:hover {
  border-color: transparent;
  background: rgba(255,180,0,.06) !important;
  transform: translateX(-3px);
}

.catalog-v5-page .catalog-sidebar a.active {
  border-color: transparent;
  background: transparent !important;
  box-shadow: none !important;
}

.catalog-v5-page .catalog-sidebar a.active .catalog-sidebar-label strong {
  color: #062f70;
}

.catalog-v5-page .catalog-sidebar a.active .catalog-thumb {
  border-color: rgba(255,180,0,.46);
  transform: scale(1.04);
}

.catalog-v5-page .catalog-thumb {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(7,59,134,.07);
  background: #f7f3eb;
  transition: border-color 240ms ease, transform 300ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease;
}

.catalog-v5-page .catalog-thumb img {
  width: 100%;
  height: 100%;
  padding: 2px;
  object-fit: cover;
  mix-blend-mode: normal;
}

.catalog-v5-page .catalog-sidebar-label strong {
  font-size: 12.5px;
  transition: color 220ms ease;
}

/* Header and result content switch as a soft editorial crossfade. */
[data-catalog-head-dynamic],
[data-catalog-results-shell] {
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.22,1,.36,1), filter 160ms ease;
  will-change: opacity, transform;
}

[data-catalog-head-dynamic].is-switching {
  opacity: .32;
  transform: translateY(-4px);
  filter: blur(1.5px);
}

[data-catalog-results-shell].is-switching {
  opacity: .18;
  transform: translateY(7px);
}

[data-catalog-head-dynamic].is-entering {
  animation: catalog-head-in 420ms cubic-bezier(.22,1,.36,1) both;
}

[data-catalog-results-shell].is-entering {
  animation: catalog-results-in 500ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes catalog-head-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes catalog-results-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.catalog-v5-grid .internal-product-card {
  transition: opacity 180ms ease, transform 300ms cubic-bezier(.22,1,.36,1), border-color 260ms ease, box-shadow 260ms ease;
}

.catalog-v5-grid .internal-product-card.is-local-hidden {
  opacity: 0;
  transform: translateY(7px) scale(.985);
  pointer-events: none;
}

/* Product card finish: keep the good V4 structure, improve RTL price/action balance. */
.catalog-v5-page .catalog-v4-grid .internal-product-price {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  margin-inline: auto;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: center;
  letter-spacing: -.02em;
}

.catalog-v5-page .catalog-v4-grid .internal-product-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  direction: rtl;
}

.catalog-v5-page .catalog-v4-grid .internal-product-availability {
  justify-content: center;
  min-width: 126px;
}

.catalog-v5-page .catalog-v4-grid .internal-product-details {
  justify-self: start;
  white-space: nowrap;
}

/* =========================================================
   GLOBAL SEARCH V5 — homepage language + richer Wolt-like results
   ========================================================= */

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .catalog-v5-layout {
    grid-template-columns: minmax(0,1fr) 250px !important;
    gap: 18px;
  }
  .catalog-v5-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* The v5 grid had no rule below 1100px, so phones inherited three columns of
   ~105px. Its ladder is completed here, after the rule that was winning. */
@media (max-width: 767px) {
  .catalog-v5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 360px) {
  .catalog-v5-grid,
  .internal-product-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .catalog-v5-layout {
    display: block;
    direction: rtl;
  }
  .catalog-v5-layout > .catalog-sidebar { display: none; }
  .catalog-v5-page .catalog-local-search { top: 8px; }
  .catalog-v4-mobile-pills {
    position: static;
    z-index: 34;
    margin: 0 -16px 16px;
    padding: 8px 16px;
    background: rgba(247,243,234,.94);
    backdrop-filter: blur(12px);
  }
  .catalog-v4-mobile-pills a {
    transition: background 240ms ease, color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
  }
  .catalog-v4-mobile-pills a.active {
    background: #ffb400;
    color: #073b86;
    box-shadow: 0 7px 16px rgba(255,180,0,.16);
    transform: translateY(-1px);
  }
}

@media (max-width: 760px) {
}

@media (prefers-reduced-motion: reduce) {
  .catalog-active-pill,
  [data-catalog-head-dynamic],
  [data-catalog-results-shell],
  .catalog-v5-grid .internal-product-card,
  .catalog-search-surface,
  .search-category-showcase > a,
  .search-product-link { transition-duration: 1ms !important; animation: none !important; }
}

/* =========================================================
   CATALOG V6 — sticky workspace + full category rail + search polish
   ========================================================= */

/* `overflow-x:hidden` creates a scroll container in modern browsers and can
   silently break descendants using position:sticky. Clip keeps the same visual
   protection without becoming the sticky containing block. */
.internal-page {
  overflow-x: clip;
}

.internal-page .site-shell {
  overflow: visible;
  overflow-x: clip;
}

.catalog-environment .catalog-page-section,
.catalog-environment .catalog-page-section > .site-container,
.catalog-v5-layout,
.catalog-v5-main {
  overflow: visible !important;
}

/* Desktop becomes a true catalogue workspace: controls stay in place while the
   document scroll moves the product grid. */
@media (min-width: 901px) {
  .catalog-v5-layout {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 28px;
  }

  .catalog-v5-page .catalog-local-search {
    position: static;
    z-index: 70;
    isolation: isolate;
  }

  .catalog-v5-page .catalog-sidebar {
    position: static;
    z-index: 65;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 10px;
  }

  /* All real categories stay visible at once. Two compact columns avoid the
     awkward internal scrollbar while keeping the rail shorter than the viewport
     on normal laptop/desktop screens. */
  .catalog-v5-page .catalog-sidebar nav {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    max-height: none;
    padding: 2px;
    overflow: visible;
  }

  .catalog-v5-page .catalog-sidebar a {
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 4px 5px;
    border-radius: 13px;
  }

  .catalog-v5-page .catalog-thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .catalog-v5-page .catalog-sidebar-label {
    min-width: 0;
  }

  .catalog-v5-page .catalog-sidebar-label strong {
    display: block;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-v5-page .catalog-sidebar-label small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #9aa2ae;
    font-size: 9.5px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The highlight can now travel in both X and Y because the category rail is
     two columns. */
  .catalog-active-pill {
    --pill-x: 0px;
    --pill-y: 0px;
    --pill-w: 0px;
    --pill-h: 48px;
    top: 0;
    right: auto;
    left: 0;
    width: var(--pill-w);
    height: var(--pill-h);
    transform: translate3d(var(--pill-x), var(--pill-y), 0);
    transition:
      transform 380ms cubic-bezier(.22,1,.36,1),
      width 380ms cubic-bezier(.22,1,.36,1),
      height 380ms cubic-bezier(.22,1,.36,1),
      border-radius 280ms ease;
  }
}

/* Search image treatment: the visual itself fills the frame. No inset white/
   beige gutter around category or result images. */

/* Loading state uses the exact same visual grammar as the final result state,
   so there is no tiny skeleton jumping into a completely different layout. */

/* Reduce the feeling of an empty white sheet while search is resolving. */

@media (max-width: 1100px) and (min-width: 901px) {
  .catalog-v5-layout {
    grid-template-columns: minmax(0, 1fr) 324px !important;
    gap: 20px;
  }

  .catalog-v5-page .catalog-sidebar a {
    min-height: 46px;
  }

  .catalog-v5-page .catalog-sidebar-label strong { font-size: 10.8px; }
  .catalog-v5-page .catalog-sidebar-label small { display: none; }
  .catalog-v5-page .catalog-thumb { width: 32px; height: 32px; }
}

@media (max-width: 900px) {
}

@media (max-width: 620px) {
}

@media (prefers-reduced-motion: reduce) {
}

/* =========================================================
   CATEGORY V6 — department catalogue pages
   ========================================================= */
.category-v6-page.catalog-environment.catalog-v5-page {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background:
    linear-gradient(rgba(7,59,134,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,59,134,.026) 1px, transparent 1px),
    #f7f3ea;
  background-size: 48px 48px;
}

.category-v6-hero,
.category-v6-section {
  position: relative;
  background: transparent;
}

.category-v6-hero {
  padding: clamp(34px, 4vw, 56px) 0 clamp(28px, 3.5vw, 48px);
}

.category-v6-inner {
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  grid-template-areas:
    "visual intro"
    "visual main";
  gap: 16px clamp(34px, 4vw, 64px);
  align-items: center;
  min-height: clamp(410px, 31vw, 480px);
  direction: ltr;
}

.category-v6-copy {
  grid-area: intro;
  display: grid;
  align-self: end;
  gap: 10px;
  min-width: 0;
  direction: rtl;
  text-align: right;
}

.category-v6-copy .internal-breadcrumbs {
  flex-wrap: nowrap;
  overflow: hidden;
  color: #7b8493;
  font-size: 12.5px;
  white-space: nowrap;
}

.category-v6-copy .internal-breadcrumbs span,
.category-v6-copy .internal-breadcrumbs a {
  color: inherit;
}

.category-v6-copy .internal-breadcrumbs span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-v6-department-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(7,59,134,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  color: #073b86;
  font-size: 11.5px;
  font-weight: 950;
  letter-spacing: 0;
}

.category-v6-eyebrow {
  display: inline-flex;
  width: fit-content;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255,180,0,.20);
  border-radius: 999px;
  background: rgba(255,180,0,.10);
  color: #073b86;
  font-size: 12.5px;
  font-weight: 850;
}

.category-v6-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffb400;
}

.category-v6-main-copy {
  grid-area: main;
  display: grid;
  align-self: start;
  gap: 14px;
  min-width: 0;
  direction: rtl;
  text-align: right;
}

.category-v6-main-copy h1 {
  position: relative;
  max-width: 720px;
  margin: 0;
  padding-bottom: 16px;
  color: #073b86;
  font-size: clamp(52px, 5.1vw, 78px);
  font-weight: 900;
  line-height: .94;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.category-v6-main-copy h1::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 74px;
  height: 5px;
  border-radius: 999px;
  background: #ffb400;
  content: "";
}

.category-v6-main-copy p {
  max-width: 650px;
  margin: 0;
  color: #687386;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.65;
}

.category-v6-meta {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 0 16px;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 12px 30px rgba(7,59,134,.055);
}

.category-v6-meta span {
  color: #7b8493;
  font-size: 13px;
  font-weight: 900;
}

.category-v6-meta i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffb400;
}

.category-v6-visual {
  grid-area: visual;
  position: relative;
  display: grid;
  min-height: 360px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(7,59,134,.07);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,180,0,.16), transparent 45%),
    rgba(255,255,255,.56);
  box-shadow: 0 20px 48px rgba(7,59,134,.07);
}

.category-v6-visual::before {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(7,59,134,.055);
  border-radius: 22px;
  content: "";
}

.category-v6-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.category-v6-plus,
.category-v6-line,
.category-v6-index {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.category-v6-plus {
  top: 24px;
  left: 26px;
  color: rgba(255,180,0,.72);
  font-size: 24px;
  font-weight: 900;
}

.category-v6-line {
  right: 24px;
  bottom: 26px;
  width: 78px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,180,0,.72);
}

.category-v6-index {
  right: 24px;
  top: 22px;
  color: rgba(7,59,134,.34);
  font-size: 12px;
  font-weight: 950;
}

.category-v6-section {
  padding: 0 0 74px;
}

.category-v6-products {
  min-width: 0;
  direction: rtl;
}

.category-v6-department-nav {
  margin-bottom: 32px;
  padding: 20px;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 16px 42px rgba(7,59,134,.055);
}

.category-v6-nav-head,
.category-v6-products-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.category-v6-nav-head div,
.category-v6-products-head div {
  display: grid;
  gap: 4px;
}

.category-v6-nav-head span,
.category-v6-products-head span {
  color: #7b8493;
  font-size: 13px;
  font-weight: 850;
}

.category-v6-nav-head h2,
.category-v6-products-head h2 {
  margin: 0;
  color: #073b86;
  font-size: clamp(25px, 2vw, 34px);
  font-weight: 950;
  line-height: 1.05;
}

.category-v6-nav-head a,
.category-v6-products-head a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(7,59,134,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  color: #073b86;
  font-size: 12.5px;
  font-weight: 900;
  text-decoration: none;
  transition: background 220ms ease, transform 220ms cubic-bezier(.22,1,.36,1);
}

.category-v6-nav-head a:hover,
.category-v6-products-head a:hover {
  background: #fff;
  transform: translateY(-1px);
}

.category-v6-category-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
}

.category-v6-category-card {
  display: grid;
  min-height: 166px;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  color: #073b86;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(7,59,134,.05);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 260ms cubic-bezier(.22,1,.36,1);
}

.category-v6-category-card:hover {
  border-color: rgba(7,59,134,.18);
  box-shadow: 0 16px 30px rgba(7,59,134,.08);
  transform: translateY(-3px);
}

.category-v6-category-thumb {
  display: grid;
  height: 86px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #f5f1e8;
  color: #073b86;
}

.category-v6-category-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms cubic-bezier(.22,1,.36,1);
}

.category-v6-category-card:hover .category-v6-category-thumb img {
  transform: scale(1.025);
}

.category-v6-category-title {
  min-height: 2.35em;
  color: #073b86;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.18;
}

.category-v6-category-count {
  color: #7b8493;
  font-size: 12px;
  font-weight: 850;
}

.category-v6-page .catalog-local-search {
  margin-bottom: 18px;
}

.category-v6-search-clear {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #f2eee6;
  color: #073b86;
}

.category-v6-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 0 2px;
  background: transparent;
}

.category-v6-result-head strong {
  color: #073b86;
  font-size: 20px;
  font-weight: 950;
}

.category-v6-result-head span {
  color: #7b8493;
  font-size: 13px;
  font-weight: 800;
}

.category-v6-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 38px 24px;
  border: 1px dashed rgba(7,59,134,.16);
  border-radius: 22px;
  background: rgba(255,255,255,.62);
  text-align: center;
}

.category-v6-empty > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,180,0,.14);
  color: #073b86;
}

.category-v6-empty h2 {
  margin: 0;
  color: #073b86;
  font-size: 24px;
}

.category-v6-empty p {
  max-width: 420px;
  margin: 0;
  color: #687386;
  line-height: 1.55;
}

.category-v6-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 20px;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 22px;
  background: rgba(255,255,255,.62);
}

.category-v6-help div {
  display: grid;
  gap: 4px;
}

.category-v6-help strong {
  color: #073b86;
  font-size: 22px;
  font-weight: 950;
}

.category-v6-help span {
  color: #687386;
  font-weight: 750;
}

.category-v6-page.category-motion-ready [data-category-hero-beat] {
  opacity: .01;
  transition:
    opacity var(--category-hero-duration, 560ms) ease var(--category-hero-delay, 0ms),
    transform var(--category-hero-duration, 560ms) cubic-bezier(.22,1,.36,1) var(--category-hero-delay, 0ms);
}

.category-v6-page.category-motion-ready [data-category-hero="breadcrumb"] {
  --category-hero-delay: 0ms;
  --category-hero-duration: 450ms;
  transform: translate3d(12px,0,0);
}

.category-v6-page.category-motion-ready [data-category-hero="badge"] {
  --category-hero-delay: 35ms;
  --category-hero-duration: 470ms;
  transform: translate3d(14px,0,0);
}

.category-v6-page.category-motion-ready [data-category-hero="eyebrow"] {
  --category-hero-delay: 70ms;
  --category-hero-duration: 500ms;
  transform: translate3d(18px,0,0);
}

.category-v6-page.category-motion-ready [data-category-hero="title"] {
  --category-hero-delay: 125ms;
  --category-hero-duration: 640ms;
  transform: translate3d(var(--category-title-x, 30px),0,0);
}

.category-v6-page.category-motion-ready [data-category-hero="description"] {
  --category-hero-delay: 180ms;
  --category-hero-duration: 560ms;
  transform: translate3d(var(--category-description-x, 20px),0,0);
}

.category-v6-page.category-motion-ready [data-category-hero="count"] {
  --category-hero-delay: 235ms;
  --category-hero-duration: 520ms;
  transform: translate3d(0,var(--category-count-y, 12px),0) scale(var(--category-count-scale, 1));
}

.category-v6-page.category-motion-ready [data-category-hero="visual"] {
  --category-hero-delay: 100ms;
  --category-hero-duration: 720ms;
  transform:
    translate3d(var(--category-visual-x, -28px), var(--category-visual-y, 0px), 0)
    scale(var(--category-visual-scale, .985));
}

.category-v6-page.category-motion-in [data-category-hero-beat] {
  opacity: 1;
  transform: none;
}

/* Resting offsets go through custom properties so that breakpoints can retune
   them without re-declaring `transform`: a media block that re-declared it
   outranked the settled rules below on source order and froze the entrance. */
.category-v6-page.category-motion-ready [data-category-reveal] {
  opacity: .86;
  transform:
    translate3d(0, var(--category-reveal-y, 12px), 0)
    scale(var(--category-reveal-scale, .993));
}

.category-v6-page.category-motion-ready [data-category-card] {
  transform: translate3d(0,10px,0) scale(.99);
}

.category-v6-page [data-category-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms ease var(--category-reveal-delay,0ms),
    transform 480ms cubic-bezier(.22,1,.36,1) var(--category-reveal-delay,0ms);
}

@media (min-width: 901px) {
  .category-v6-page .internal-product-grid.catalog-v5-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .category-v6-inner {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 14px 28px;
  }
}

@media (max-width: 900px) {
  .category-v6-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "visual"
      "main";
    min-height: 0;
    direction: rtl;
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  .category-v6-hero {
    padding: 24px 0 26px;
  }

  .category-v6-inner {
    gap: 16px;
  }

  .category-v6-visual {
    width: 100%;
    max-width: 100%;
    min-height: 210px;
    border-radius: 20px;
  }

  .category-v6-visual::before {
    inset: 12px;
    border-radius: 16px;
  }

  .category-v6-visual img {
    min-height: 210px;
  }

  .category-v6-copy,
  .category-v6-main-copy {
    gap: 10px;
  }

  .category-v6-copy .internal-breadcrumbs {
    font-size: 11.5px;
  }

  .category-v6-eyebrow {
    min-height: 30px;
    font-size: 12px;
  }

  .category-v6-main-copy h1 {
    max-width: 100%;
    padding-bottom: 12px;
    font-size: clamp(32px, 9vw, 42px);
    line-height: .98;
  }

  .category-v6-main-copy h1::after {
    width: 56px;
    height: 4px;
  }

  .category-v6-main-copy p {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.55;
  }

  .category-v6-meta {
    min-height: 38px;
    padding-inline: 13px;
  }

  .category-v6-section {
    padding-bottom: 48px;
  }

  .category-v6-department-nav {
    margin-bottom: 24px;
    padding: 15px;
    border-radius: 20px;
  }

  .category-v6-nav-head,
  .category-v6-products-head {
    align-items: flex-start;
    margin-bottom: 12px;
    padding-inline-end: 0;
  }

  .category-v6-nav-head h2,
  .category-v6-products-head h2 {
    font-size: 24px;
  }

  .category-v6-category-rail {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .category-v6-category-rail::-webkit-scrollbar {
    display: none;
  }

  .category-v6-category-card {
    flex: 0 0 152px;
    min-height: 154px;
    scroll-snap-align: start;
  }

  .category-v6-category-thumb {
    height: 78px;
  }

  .category-v6-page .catalog-local-search {
    margin-top: 20px;
    margin-bottom: 12px;
  }

  .category-v6-result-head {
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .category-v6-result-head strong {
    font-size: 18px;
  }

  .category-v6-help {
    grid-template-columns: 1fr;
    margin-top: 26px;
    padding: 17px;
  }

  .category-v6-help .internal-primary,
  .category-v6-help .internal-secondary {
    width: 100%;
    min-height: 46px;
  }

  .category-v6-page.category-motion-ready [data-category-hero="visual"] {
    --category-visual-x: 0px;
    --category-visual-y: 10px;
  }

  .category-v6-page.category-motion-ready [data-category-hero="title"] {
    --category-title-x: 18px;
  }

  .category-v6-page.category-motion-ready [data-category-hero="description"] {
    --category-description-x: 12px;
  }

  .category-v6-page.category-motion-ready [data-category-hero="count"] {
    --category-count-y: 8px;
    --category-count-scale: .993;
  }

  .category-v6-page.category-motion-ready [data-category-reveal] {
    --category-reveal-y: 8px;
  }

  .category-v6-page.category-motion-ready [data-category-hero-beat] {
    transition-duration: 420ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-v6-page *,
  .category-v6-page *::before,
  .category-v6-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .category-v6-page [data-category-hero-beat],
  .category-v6-page [data-category-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

.catalog-v5-page .catalog-thumb img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
}

@media (min-width: 901px) {
  .catalog-v5-page .catalog-sidebar a { min-height: 44px; }
  .catalog-v5-page .catalog-thumb { width: 31px; height: 31px; }
  .catalog-active-pill { --pill-h: 44px; }
  .catalog-v5-page .catalog-sidebar-head { padding: 7px 8px 10px; }
}

/* =========================================================
   CATALOG V7 — preload structure + true sticky workspace fix
   ========================================================= */

/* The previous loading state inherited `.search-loading { display:grid; ... }`
   from an older search implementation. That made the two V6 loading sections
   become grid cells, compressing the category/product skeletons into the right
   half of the overlay. V7 explicitly restores the loading state to a normal
   full-width document flow so its geometry matches the final results. */

/* Keep the skeleton headings aligned exactly like the real results headings. */

/* The header lived inside `.internal-top-frame`; making only `.site-header`
   sticky could never keep it on screen because sticky is bounded by that
   short wrapper. The wrapper itself must own the sticky behavior. */
@media (min-width: 901px) {
  .internal-page .internal-top-frame {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    /* No transform here: it would make this header the containing block for
       position:fixed descendants, and the mobile drawer lives inside it -
       the drawer would then be pinned to the header instead of the viewport. */
  }

  .internal-page .site-header {
    position: relative;
    top: auto;
    z-index: auto;
  }

  /* Search + category rail lock directly below the real sticky header.
     Only the product results continue moving through the workspace. */
  .catalog-v5-page .catalog-local-search,
  .catalog-v5-page .catalog-sidebar {
    top: var(--catalog-sticky-top, 128px) !important;
  }

  .catalog-v5-page .catalog-local-search {
    z-index: 90;
  }

  .catalog-v5-page .catalog-sidebar {
    z-index: 85;
  }
}

@media (max-width: 900px) {
}

@media (max-width: 620px) {
}

/* =========================================================
   CATALOG V8 — stable local search + cleaner global search bar
   ========================================================= */

/* Local search can reduce a long grid to one item or zero items. Keep a full
   viewport-sized results stage so the footer never jumps into view while the
   visitor is still typing in the sticky search field. */
.catalog-v5-page [data-catalog-results-shell].is-local-searching {
  min-height: calc(100vh - var(--catalog-sticky-top, 128px) - 92px);
}

.catalog-v5-page [data-local-empty]:not([hidden]) {
  display: grid;
  min-height: calc(100vh - var(--catalog-sticky-top, 128px) - 160px);
  place-items: start center;
  align-content: start;
  margin: 0;
  padding: 34px 28px;
  border: 1px dashed rgba(7,59,134,.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,180,0,.08), transparent 36%),
    rgba(255,255,255,.58);
  color: #687386;
  text-align: center;
}

/* Global navbar search: one elegant search surface, not a capsule inside
   another capsule. Live results make a separate yellow submit button
   unnecessary, so yellow becomes a refined focus/accent color. */

/* Remove styling residue from the old explicit submit CTA in case an older
   cached template still renders it for one request. */

/* Give the overlay a calmer header rhythm now that the search bar itself is
   visually strong. */

@media (max-width: 760px) {

  .catalog-v5-page [data-catalog-results-shell].is-local-searching,
  .catalog-v5-page [data-local-empty]:not([hidden]) {
    min-height: 62vh;
  }
}

/* =========================================================
   V9 — Global search header hard reset
   Fixes legacy .catalog-global-form button / form rules leaking
   into the current search modal.
   ========================================================= */

@media (max-width: 760px) {
}

/* =========================================================
   V10 — ONE GLOBAL SEARCH SYSTEM / HOME + INTERNAL PAGES
   ========================================================= */
body.catalog-search-open { overflow: hidden; }

/* Category cards — full-bleed image, rounded frame on every edge. */

/* Product results — compact rows inspired by the reference, but branded. */

/* Skeleton uses the exact destination structure to prevent layout jumps. */

@media (max-width: 1050px) {
}

@media (max-width: 760px) {
}

@media (prefers-reduced-motion: reduce) {
}

/* ═════════════════════════════════════════════════════════════
   MOBILE PASS — catalogue grid, card, local search and chips.
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Nothing may push a card past its column. */
  .internal-product-grid,
  .catalog-v2-grid,
  .catalog-v4-grid,
  .catalog-v5-grid { gap: 10px; }

  .internal-product-card {
    min-width: 0;
    width: 100%;
    min-height: 0;
  }
  .internal-product-card * { min-width: 0; }

  /* Matching the depth the catalogue's own rules use, rather than piling
     weight on top of them. */
  /* The media is a column flex item: its size comes from flex-basis, so
     setting `height` alone does nothing at all here. */
  .catalog-v5-page .catalog-v4-grid .internal-product-media,
  .catalog-v5-page .catalog-v5-grid .internal-product-media,
  .catalog-v2-grid .internal-product-media,
  .catalog-v4-grid .internal-product-media,
  .internal-product-media { height: 126px; flex-basis: 200px; }
  .internal-product-copy { padding: 11px; }
  .internal-product-card h3 {
    font-size: 13.5px;
    line-height: 1.3;
    /* A long unbroken model name must wrap, not widen the card. */
    overflow-wrap: anywhere;
  }
  .internal-product-price { font-size: 19px; }
  /* One button per row: side by side, the availability pill overflows its
     40px track and lands on top of the details link. */
  .catalog-v5-page .catalog-v4-grid .internal-product-actions,
  .catalog-v5-page .catalog-v5-grid .internal-product-actions,
  .internal-product-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .catalog-v5-page .internal-product-availability,
  .catalog-v5-page .internal-product-details,
  .internal-product-availability,
  .internal-product-details {
    width: 100%;
    min-height: 36px;
    font-size: 12px;
  }

  /* ── Local catalogue search ─────────────────────────────── */
  .catalog-v5-page .catalog-local-search,
  .catalog-local-search {
    min-height: 50px;
    height: 50px;
    margin-inline: 14px;
    padding: 0 8px 0 14px;
    border-radius: 16px;
  }
  .catalog-local-search input {
    height: 100%;
    /* Kept optically centred whatever the field height. */
    padding-block: 0;
    line-height: normal;
  }

  /* ── Category chips ─────────────────────────────────────── */
  .catalog-mobile-pills {
    scroll-snap-type: x proximity;
    padding-inline: 12px;
    scrollbar-width: none;
  }
  .catalog-mobile-pills::-webkit-scrollbar { display: none; }
  .catalog-mobile-pills a {
    scroll-snap-align: start;
    height: 36px;
    padding-inline: 12px;
    font-size: 11.5px;
  }
  .catalog-mobile-pills a.active { transform: scale(1.03); }

  /* ── Category page title ────────────────────────────────── */
  .category-copy h1,
  .internal-hero-copy h1 {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .catalog-v5-page .catalog-v4-grid .internal-product-media,
  .catalog-v5-page .catalog-v5-grid .internal-product-media,
  .catalog-v2-grid .internal-product-media,
  .catalog-v4-grid .internal-product-media,
  .internal-product-media { height: 150px; flex-basis: 150px; }
}

/* ── Global search modal: contained, never edge to edge ─────── */

@media (max-width: 760px) {
  /* One column of horizontal cards: the desktop pair is too tight here. */
  .search-product-list,
  .search-product-grid,
  .search-loading-product-list { grid-template-columns: minmax(0, 1fr); }
  .search-category-showcase,
  .search-loading-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-mobile-pills a.active { transform: none; }
}

/* ═════════════════════════════════════════════════════════════
   PRODUCT SHOWROOM — /products/<id>/
   The page background, the grid layer and the product card all
   come from the catalogue's own rules; only the showroom
   composition is defined here.
   ═════════════════════════════════════════════════════════════ */

.pdp-inner {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 46px);
}

/* ── Breadcrumb row ───────────────────────────────────────── */

.pdp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.pdp-top .internal-breadcrumbs { margin: 0; font-size: 12.5px; }

.pdp-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid rgba(7, 59, 134, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--internal-navy);
  font-size: 13px;
  font-weight: 800;
  transition: border-color 180ms ease, background 180ms ease;
}
.pdp-back:hover { border-color: rgba(255, 180, 0, .55); background: rgba(255, 180, 0, .1); }
.pdp-back .fa-solid { transition: transform 180ms ease; }
.pdp-back:hover .fa-solid { transform: translateX(-3px); }

/* ── Showroom: two connected surfaces, not one white card ─── */

.pdp-showroom {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  align-items: stretch;
  gap: 20px;
  margin-bottom: 72px;
}
.pdp-showroom > * { direction: rtl; }

/* ── Visual stage ─────────────────────────────────────────── */

.pdp-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 540px;
  margin: 0;
  padding: 44px;
  border: 1px solid rgba(7, 59, 134, .06);
  border-radius: 28px;
  background: #f3e9dd;
  overflow: hidden;
}

/* Presence without a flat yellow disc behind the product. */
.pdp-stage-halo {
  position: absolute;
  inset: 12% 14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 0, .14), rgba(255, 180, 0, .04) 45%, transparent 70%);
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
}

/* Two of the catalogue's technical marks, nothing more. */
.pdp-stage-marks i {
  position: absolute;
  color: var(--internal-yellow);
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  opacity: .5;
}
.pdp-stage-marks i:first-child { inset-block-start: 26px; inset-inline-start: 30px; }
.pdp-stage-marks i:last-child { inset-block-end: 30px; inset-inline-end: 34px; font-size: 14px; opacity: .35; }

/* Smart fit: the box takes most of the stage and `contain` scales the packshot
   to the largest size that fits it. A tall product ends up height-bound, a wide
   one width-bound — automatically, and never stretched or cropped. Sizing the
   element by its own ratio instead left small products floating. */
.pdp-stage img {
  position: relative;
  z-index: 1;
  /* Bounds, not sizes. A percentage height here is indefinite, so grid sized
     the row from the image's intrinsic height instead — a portrait packshot
     stretched the stage to 1199px. Pixel caps keep the track honest and give
     the smart fit for free: a tall product is height-bound, a wide one
     width-bound, neither stretched nor cropped. */
  width: auto;
  height: auto;
  max-width: min(86%, 560px);
  max-height: 440px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
}

.pdp-stage-tag {
  position: absolute;
  z-index: 1;
  inset-block-end: 22px;
  inset-inline-start: 24px;
  color: rgba(7, 59, 134, .45);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

@media (hover: hover) {
  .pdp-stage:hover img { transform: translateY(-4px) scale(1.012); }
  .pdp-stage:hover .pdp-stage-halo { transform: scale(1.03); }
}

/* ── Information stage ────────────────────────────────────── */

.pdp-info {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid rgba(7, 59, 134, .07);
  border-radius: 28px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 50px rgba(7, 59, 134, .055);
}

.pdp-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 30px;
  padding-inline: 12px;
  border: 1px solid rgba(255, 180, 0, .25);
  border-radius: 999px;
  background: rgba(255, 180, 0, .1);
  color: #c98300;
  font-size: 12.5px;
  font-weight: 800;
}
.pdp-pill:hover { background: rgba(255, 180, 0, .2); }

/* Yellow rule beside the title, echoing the catalogue headings. */
.pdp-info h1 {
  position: relative;
  max-width: 620px;
  margin: 18px 0 0;
  padding-inline-start: 16px;
  color: var(--internal-navy);
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.03em;
}
.pdp-info h1::before {
  position: absolute;
  inset-block: 6px 8px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 999px;
  background: var(--internal-yellow);
  content: "";
}

.pdp-price-row {
  display: grid;
  gap: 2px;
  margin-top: 22px;
}
.pdp-price-label { color: var(--internal-gray); font-size: 12.5px; font-weight: 800; }
.pdp-price {
  /* Isolated so ₪10.00 keeps its own order inside the RTL column. */
  direction: ltr;
  unicode-bidi: isolate;
  width: fit-content;
  color: var(--internal-navy);
  font-size: clamp(32px, 2.8vw, 38px);
  font-weight: 900;
  line-height: 1.1;
}

.pdp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.pdp-facts li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(7, 59, 134, .08);
  border-radius: 12px;
  background: rgba(7, 59, 134, .025);
}
.pdp-facts span { color: var(--internal-gray); font-size: 12px; font-weight: 700; }
.pdp-facts b { color: var(--internal-navy); font-size: 13.5px; font-weight: 900; }

/* ── Conversion panel ─────────────────────────────────────── */

.pdp-convert {
  margin-top: auto;
  padding-top: 26px;
}
.pdp-convert-eyebrow { display: block; color: var(--internal-navy); font-size: 14px; font-weight: 900; }
.pdp-convert > p { margin: 4px 0 0; color: var(--internal-gray); font-size: 14px; }

.pdp-phone {
  display: inline-block;
  width: fit-content;
  margin-top: 10px;
  color: var(--internal-navy);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.01em;
  transition: opacity 180ms ease;
}
.pdp-phone:hover { opacity: .82; }

.pdp-actions { display: flex; gap: 10px; margin-top: 16px; }

.pdp-call,
.pdp-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 14px;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.pdp-call {
  height: 54px;
  padding-inline: 26px;
  background: var(--internal-yellow);
  color: var(--internal-navy);
  font-size: 16px;
}
.pdp-call:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 180, 0, .22); }

.pdp-whatsapp {
  height: 50px;
  padding-inline: 18px;
  border: 1px solid rgba(7, 59, 134, .16);
  background: transparent;
  color: var(--internal-navy);
  font-size: 14.5px;
  font-weight: 800;
}
.pdp-whatsapp .fa-brands { color: #128c4a; }
.pdp-whatsapp:hover { border-color: rgba(7, 59, 134, .34); }

.pdp-convert > small {
  display: block;
  margin-top: 14px;
  color: var(--internal-gray);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ── Specifications ───────────────────────────────────────── */

.pdp-specs { margin-bottom: 64px; }
.pdp-specs h2 {
  margin: 0 0 16px;
  color: var(--internal-navy);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 900;
}
.pdp-specs-surface {
  padding: 26px 30px;
  border: 1px solid rgba(7, 59, 134, .07);
  border-radius: 22px;
  background: rgba(255, 255, 255, .65);
}
.pdp-specs dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 52px;
  margin: 0;
}
.pdp-specs dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(7, 59, 134, .07);
}
.pdp-specs dt { color: var(--internal-gray); font-size: 14px; font-weight: 700; }
.pdp-specs dd { margin: 0; color: var(--internal-navy); font-size: 14.5px; font-weight: 800; }
.pdp-specs dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1100px) {
  .pdp-showroom { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pdp-stage { min-height: 420px; }
  .pdp-info { margin-top: 0; }
}

@media (max-width: 860px) {
  .pdp-top { margin-bottom: 16px; }
  .pdp-showroom { margin-bottom: 46px; }
  .pdp-stage { min-height: 320px; padding: 20px; border-radius: 22px; }
  .pdp-stage img { max-width: min(84%, 380px); max-height: 280px; }

  /* Lighter on mobile: only the action area keeps a surface, so the page
     never reads as a card inside a card inside a card. */
  .pdp-info {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .pdp-info h1 { font-size: clamp(30px, 9vw, 44px); line-height: .98; margin: 18px 0 10px; overflow-wrap: anywhere; }
  .pdp-price-row { margin-top: 0; }
  .pdp-price { font-size: 30px; }

  .pdp-convert {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid rgba(7, 59, 134, .08);
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
  }
  .pdp-actions { flex-direction: column; gap: 8px; }
  .pdp-call, .pdp-whatsapp { width: 100%; height: 52px; padding-inline: 16px; }

  .pdp-specs { margin-bottom: 44px; }
  .pdp-specs-surface { padding: 18px 20px; border-radius: 18px; }
  .pdp-specs dl { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-page .pdp-top,
  .product-detail-page .pdp-stage,
  .product-detail-page .pdp-stage img,
  .product-detail-page .pdp-info { animation: none; }
  .pdp-stage:hover img,
  .pdp-stage:hover .pdp-stage-halo { transform: none; }
}

/* ── Product page: five related items, category button, staggered entrance ── */

/* ── Related products as a slider ─────────────────────────────
   Five columns of fixed tracks left the last card stranded on a
   second row. A carousel shows more products and always ends on a
   clean edge.
   ───────────────────────────────────────────────────────────── */

.pdp-carousel { position: relative; }

.pdp-carousel-track {
  /* Cancels the catalogue's column template; the classes stay on the element
     because the shared card styles are scoped through them. */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 14px) / 5);
  gap: 14px;
  padding: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pdp-carousel-track::-webkit-scrollbar { display: none; }
.pdp-carousel-track > * { scroll-snap-align: start; }

.pdp-carousel-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(7, 59, 134, .1);
  border-radius: 50%;
  background: #fff;
  color: var(--internal-navy);
  box-shadow: 0 6px 18px rgba(3, 29, 71, .12);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
}
.pdp-carousel-prev { inset-inline-end: -18px; }
.pdp-carousel-next { inset-inline-start: -18px; }
.pdp-carousel-next .fa-arrow-left { transform: scaleX(-1); }
.pdp-carousel-nav:hover { background: var(--internal-yellow); }
.pdp-carousel-nav[disabled] { opacity: .3; cursor: default; }

.pdp-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
}
.pdp-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 59, 134, .18);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease;
}
.pdp-carousel-dots button[aria-selected="true"] { width: 22px; background: var(--internal-yellow); }

@media (max-width: 1280px) { .pdp-carousel-track { grid-auto-columns: calc((100% - 3 * 14px) / 4); } }
@media (max-width: 1040px) { .pdp-carousel-track { grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; } }
@media (max-width: 767px) {
  .pdp-carousel-track { grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; }
  .pdp-carousel-nav { display: none; }
}
/* One card with a peek only on genuinely narrow phones; 375px keeps two. */
@media (max-width: 360px) { .pdp-carousel-track { grid-auto-columns: 78%; } }

.pdp-related-head { align-items: center; }

.pdp-category-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 42px;
  padding-inline: 18px;
  border: 1px solid rgba(7, 59, 134, .14);
  border-radius: 999px;
  background: #fff;
  color: var(--internal-navy);
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.pdp-category-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 180, 0, .55);
  background: rgba(255, 180, 0, .12);
}
.pdp-category-button .fa-arrow-left { transition: transform 200ms ease; }
.pdp-category-button:hover .fa-arrow-left { transform: translateX(-3px); }

.product-detail-page .pdp-info > :nth-child(1) { animation-delay: 220ms; }
.product-detail-page .pdp-info > :nth-child(2) { animation-delay: 280ms; }
.product-detail-page .pdp-info > :nth-child(3) { animation-delay: 340ms; }
.product-detail-page .pdp-info > :nth-child(4) { animation-delay: 400ms; }
.product-detail-page .pdp-info > :nth-child(5) { animation-delay: 460ms; }
.product-detail-page .pdp-convert > :nth-child(1) { animation-delay: 500ms; }
.product-detail-page .pdp-convert > :nth-child(2) { animation-delay: 545ms; }
.product-detail-page .pdp-convert > :nth-child(3) { animation-delay: 590ms; }
.product-detail-page .pdp-convert > :nth-child(4) { animation-delay: 635ms; }
.product-detail-page .pdp-convert > :nth-child(5) { animation-delay: 680ms; }
.product-detail-page .pdp-facts li:nth-child(1) { animation-delay: 420ms; }
.product-detail-page .pdp-facts li:nth-child(2) { animation-delay: 465ms; }
.product-detail-page .pdp-facts li:nth-child(3) { animation-delay: 510ms; }
.product-detail-page .pdp-specs dl > :nth-child(1) { animation-delay: 60ms; }
.product-detail-page .pdp-specs dl > :nth-child(2) { animation-delay: 105ms; }
.product-detail-page .pdp-specs dl > :nth-child(3) { animation-delay: 150ms; }
.product-detail-page .pdp-specs dl > :nth-child(4) { animation-delay: 195ms; }
.product-detail-page .pdp-related .internal-product-card:nth-child(1) { animation-delay: 80ms; }
.product-detail-page .pdp-related .internal-product-card:nth-child(2) { animation-delay: 135ms; }
.product-detail-page .pdp-related .internal-product-card:nth-child(3) { animation-delay: 190ms; }
.product-detail-page .pdp-related .internal-product-card:nth-child(4) { animation-delay: 245ms; }
.product-detail-page .pdp-related .internal-product-card:nth-child(5) { animation-delay: 300ms; }
.product-detail-page .pdp-related .internal-product-card:nth-child(n+6) { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  .product-detail-page .pdp-info > *,
  .product-detail-page .pdp-specs > *,
  .product-detail-page .pdp-related > *,
  .product-detail-page .pdp-convert > *,
  .product-detail-page .pdp-facts li,
  .product-detail-page .pdp-specs dl > div,
  .product-detail-page .pdp-related .internal-product-card { animation: none; }
}

/* ═════════════════════════════════════════════════════════════
   PRODUCT PAGE — MOTION
   One easing, one personality. Above the fold nothing depends on
   JavaScript or on opacity: the hero animates transform only, so a
   stalled animation costs a few pixels of offset and never a blank
   page. Below the fold, where a blank frame is never on screen,
   sections may prepare an opacity — but only once JS is alive.
   ═════════════════════════════════════════════════════════════ */

.product-detail-page {
  --pm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── Hero timeline ────────────────────────────────────────────
   Transform only. The stagger uses animation-delay with fill
   `backwards`; the state held during the delay is an offset.
   ───────────────────────────────────────────────────────────── */

@keyframes pm-rise { from { transform: translateY(12px); } to { transform: none; } }
@keyframes pm-drop { from { transform: translateY(-5px); } to { transform: none; } }
@keyframes pm-slide-x { from { transform: translateX(8px); } to { transform: none; } }
@keyframes pm-stage { from { transform: translateY(14px) scale(.988); } to { transform: none; } }
@keyframes pm-media { from { transform: translateY(12px) scale(.95); } to { transform: none; } }
@keyframes pm-pop { from { transform: scale(.94); } to { transform: none; } }
@keyframes pm-cta { from { transform: translateY(10px) scale(.97); } to { transform: none; } }
@keyframes pm-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.product-detail-page .pdp-top .internal-breadcrumbs { animation: pm-drop 280ms var(--pm-ease) backwards; }
.product-detail-page .pdp-back { animation: pm-slide-x 320ms var(--pm-ease) backwards; }
.product-detail-page .pdp-stage { animation: pm-stage 600ms var(--pm-ease) 80ms backwards; }
.product-detail-page .pdp-stage img { animation: pm-media 700ms var(--pm-ease) 150ms backwards; }
.product-detail-page .pdp-pill { animation: pm-pop 280ms var(--pm-ease) 220ms backwards; }
.product-detail-page .pdp-info h1 { animation: pm-rise 480ms var(--pm-ease) 280ms backwards; }
.product-detail-page .pdp-price-row { animation: pm-rise 350ms var(--pm-ease) 350ms backwards; }
.product-detail-page .pdp-facts li { animation: pm-rise 320ms var(--pm-ease) backwards; }
.product-detail-page .pdp-facts li:nth-child(1) { animation-delay: 410ms; }
.product-detail-page .pdp-facts li:nth-child(2) { animation-delay: 455ms; }
.product-detail-page .pdp-facts li:nth-child(3) { animation-delay: 500ms; }
.product-detail-page .pdp-convert-eyebrow,
.product-detail-page .pdp-convert > p { animation: pm-rise 340ms var(--pm-ease) 480ms backwards; }
.product-detail-page .pdp-phone { animation: pm-rise 340ms var(--pm-ease) 540ms backwards; }
.product-detail-page .pdp-call { animation: pm-cta 360ms var(--pm-ease) 610ms backwards; }
.product-detail-page .pdp-whatsapp { animation: pm-cta 360ms var(--pm-ease) 680ms backwards; }
.product-detail-page .pdp-convert > small { animation: pm-rise 320ms var(--pm-ease) 760ms backwards; }

/* The yellow rule draws itself in — the page's small signature. */
.product-detail-page .pdp-info h1::before {
  transform-origin: top;
  animation: pm-bar 450ms var(--pm-ease) 400ms backwards;
}

/* ── Hover: visual stage ──────────────────────────────────── */

.pdp-stage-marks i { transition: transform 480ms var(--pm-ease); }
.pdp-stage img,
.pdp-stage-halo { transition: transform 480ms var(--pm-ease); }

@media (hover: hover) {
  .pdp-stage:hover img { transform: translateY(-5px) scale(1.018); }
  .pdp-stage:hover .pdp-stage-halo { transform: scale(1.04); }
  .pdp-stage:hover .pdp-stage-marks i:first-child { transform: translate(-3px, 2px); }
  .pdp-stage:hover .pdp-stage-marks i:last-child { transform: translate(3px, -2px); }
}

/* ── Hover and press: actions ─────────────────────────────── */

.pdp-back,
.pdp-call,
.pdp-whatsapp,
.pdp-category-button,
.pdp-carousel-nav { transition: transform 220ms var(--pm-ease), box-shadow 220ms var(--pm-ease), background-color 220ms var(--pm-ease), border-color 220ms var(--pm-ease); }

.pdp-call .fa-solid { transition: transform 220ms var(--pm-ease); }
.pdp-call:hover { background: #ffbe22; box-shadow: 0 12px 28px rgba(255, 180, 0, .22); }
.pdp-call:hover .fa-solid { transform: translateY(-1px) rotate(5deg); }

.pdp-whatsapp .fa-brands { transition: transform 220ms var(--pm-ease); }
.pdp-whatsapp:hover { border-color: rgba(18, 140, 74, .45); background: rgba(18, 140, 74, .05); }
.pdp-whatsapp:hover .fa-brands { transform: scale(1.08); }

.pdp-phone { transition: color 200ms var(--pm-ease), opacity 200ms var(--pm-ease); }
.pdp-phone:hover { color: #052a63; opacity: 1; }

/* Press feedback everywhere, barely there. */
.pdp-back:active,
.pdp-call:active,
.pdp-whatsapp:active,
.pdp-category-button:active,
.pdp-carousel-nav:active {
  transform: scale(.975);
  transition-duration: 110ms;
}

/* ── Below the fold ───────────────────────────────────────────
   Prepared only when JS is alive (html.motion-ready) and released
   by an observer, once. Without JS the sections render normally.
   ───────────────────────────────────────────────────────────── */

.motion-ready .pdp-specs:not(.is-in) > h2,
.motion-ready .pdp-related:not(.is-in) .internal-section-head h2 {
  opacity: 0;
  transform: translateY(12px);
}
.motion-ready .pdp-specs:not(.is-in) .pdp-specs-surface {
  opacity: 0;
  transform: translateY(16px) scale(.99);
}
.motion-ready .pdp-related:not(.is-in) .pdp-category-button {
  opacity: 0;
  transform: translateX(8px);
}
.motion-ready .pdp-related:not(.is-in) .internal-product-card {
  opacity: 0;
  transform: translateY(14px) scale(.985);
}
.motion-ready .pdp-specs:not(.is-in) dl > div {
  opacity: 0;
  transform: translateY(5px);
}

/* Reusing the catalogue's grid classes also inherits its card entrance
   (catalog-home-card-in). That animation is released by catalogue JS which
   never runs here, so the cards stayed at its first keyframe — invisible. An
   animation always beats a plain declaration, so it has to be cancelled, not
   overridden. The card's design is untouched; only its entrance changes. */
.product-detail-page .pdp-related .internal-product-card { animation: none; }

.pdp-specs > h2,
.pdp-specs-surface,
.pdp-specs dl > div,
.pdp-related .internal-section-head h2,
.pdp-related .pdp-category-button,
.pdp-related .internal-product-card {
  opacity: 1;
  transform: none;
  transition: opacity 450ms var(--pm-ease), transform 450ms var(--pm-ease);
}

.pdp-specs.is-in dl > :nth-child(1) { transition-delay: 120ms; }
.pdp-specs.is-in dl > :nth-child(2) { transition-delay: 155ms; }
.pdp-specs.is-in dl > :nth-child(3) { transition-delay: 190ms; }
.pdp-specs.is-in dl > :nth-child(4) { transition-delay: 225ms; }
.pdp-specs.is-in .pdp-specs-surface { transition-delay: 90ms; }

.pdp-related.is-in .pdp-category-button { transition-delay: 90ms; }
.pdp-related.is-in .internal-product-card { transition-duration: 420ms; }
.pdp-related.is-in .internal-product-card:nth-child(1) { transition-delay: 120ms; }
.pdp-related.is-in .internal-product-card:nth-child(2) { transition-delay: 175ms; }
.pdp-related.is-in .internal-product-card:nth-child(3) { transition-delay: 230ms; }
.pdp-related.is-in .internal-product-card:nth-child(4) { transition-delay: 285ms; }
.pdp-related.is-in .internal-product-card:nth-child(5) { transition-delay: 340ms; }
.pdp-related.is-in .internal-product-card:nth-child(n+6) { transition-delay: 380ms; }

/* ── Spec rows ────────────────────────────────────────────── */

.pdp-specs dl > div { transition: opacity 450ms var(--pm-ease), transform 450ms var(--pm-ease), background-color 180ms var(--pm-ease); }
.pdp-specs dd { transition: transform 180ms var(--pm-ease); }
@media (hover: hover) {
  .pdp-specs dl > div:hover { background: rgba(255, 180, 0, .035); }
  .pdp-specs dl > div:hover dd { transform: translateX(-2px); }
}

/* ── Carousel ─────────────────────────────────────────────── */

.pdp-carousel-track { cursor: grab; }
.pdp-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.pdp-carousel-track.is-dragging * { pointer-events: none; }

.pdp-carousel-nav .fa-solid { transition: transform 180ms var(--pm-ease); }
.pdp-carousel-nav:hover { transform: translateY(-50%) scale(1.05); background: var(--internal-yellow); }
.pdp-carousel-nav:active { transform: translateY(-50%) scale(.92); }

.pdp-carousel-dots button { transition: width 220ms var(--pm-ease), background-color 220ms var(--pm-ease), transform 220ms var(--pm-ease); }
.pdp-carousel-dots button[aria-selected="true"] { animation: pm-pop 220ms var(--pm-ease); }

/* ── Mobile: fewer, shorter moves ─────────────────────────── */

@media (max-width: 860px) {
  .product-detail-page .pdp-pill,
  .product-detail-page .pdp-facts li,
  .product-detail-page .pdp-convert-eyebrow,
  .product-detail-page .pdp-convert > p,
  .product-detail-page .pdp-convert > small,
  .product-detail-page .pdp-top .internal-breadcrumbs,
  .product-detail-page .pdp-back { animation: none; }

  .product-detail-page .pdp-stage { animation-delay: 0ms; animation-duration: 480ms; }
  .product-detail-page .pdp-stage img { animation-delay: 90ms; animation-duration: 520ms; }
  .product-detail-page .pdp-info h1 { animation-delay: 160ms; }
  .product-detail-page .pdp-price-row { animation-delay: 220ms; }
  .product-detail-page .pdp-phone { animation-delay: 280ms; }
  .product-detail-page .pdp-call { animation-delay: 340ms; }
  .product-detail-page .pdp-whatsapp { animation-delay: 390ms; }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-page *,
  .product-detail-page *::before,
  .product-detail-page *::after {
    animation: none !important;
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }
  .motion-ready .pdp-specs:not(.is-in) > h2,
  .motion-ready .pdp-specs:not(.is-in) .pdp-specs-surface,
  .motion-ready .pdp-specs:not(.is-in) dl > div,
  .motion-ready .pdp-related:not(.is-in) .internal-section-head h2,
  .motion-ready .pdp-related:not(.is-in) .pdp-category-button,
  .motion-ready .pdp-related:not(.is-in) .internal-product-card {
    opacity: 1;
    transform: none;
  }
}

/* ═════════════════════════════════════════════════════════════
   PRODUCT PAGE — MOBILE
   One continuous canvas instead of a stack of white cards. Cards
   are kept only where they carry hierarchy: the visual stage, the
   conversion panel, the details. Desktop is untouched.
   ═════════════════════════════════════════════════════════════ */

/* The context row and sticky bar exist for phones only. */
.pdp-context,
.pdp-sticky { display: none; }

@media (max-width: 860px) {
  /* ── Context row replaces the trail ─────────────────────── */
  .pdp-top { display: none; }

  .pdp-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin-bottom: 14px;
  }
  .pdp-context-back,
  .pdp-context-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding-inline: 4px;
    font-size: 13.5px;
    font-weight: 800;
  }
  .pdp-context-back { color: var(--internal-navy); }
  .pdp-context-category { color: var(--internal-gray); }
  .pdp-context-back .fa-solid { transition: transform 180ms var(--pm-ease); }
  .pdp-context-back:active .fa-solid { transform: translateX(-3px); }

  /* The product appears almost immediately under the navbar. */
  .product-detail-page .pdp { padding-top: 14px; }

  /* ── Visual stage: shorter, product larger ──────────────── */
  .pdp-showroom { display: block; margin-bottom: 0; }

  .pdp-stage {
    min-height: 0;
    aspect-ratio: 1 / .82;
    max-height: 350px;
    padding: 18px;
    border-radius: 22px;
  }
  /* A percentage height on this box resolved against nothing (the box's
     own height comes from `aspect-ratio`, not a plain definite height,
     and that isn't a valid percentage reference here) and rendered the
     packshot taller than the stage — the tall product got clipped by
     `overflow: hidden`. `width: 100%` is a safe percentage — the stage's
     width is always definite — so the bounding box is sized from that
     via its own `aspect-ratio` instead, which is definite by construction
     whenever the width is. `object-fit: contain` then letterboxes any
     packshot, tall or wide, inside it without ever cropping. */
  .pdp-stage img {
    width: 82%;
    aspect-ratio: 1 / .78;
    height: auto;
    max-width: 82%;
    max-height: none;
  }
  /* Already named in the context row and the header — no third time. */
  .pdp-stage-tag { display: none; }
  .pdp-stage-marks i:last-child { display: none; }
  /* Touch has no hover; the product must not drift while scrolling. */
  .pdp-stage:hover img,
  .pdp-stage:hover .pdp-stage-halo,
  .pdp-stage:hover .pdp-stage-marks i { transform: none; }

  /* ── Header sits on the page, not in a card ─────────────── */
  .pdp-info {
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .pdp-pill { height: 30px; font-size: 12px; }

  .pdp-info h1 {
    margin: 6px 0 8px;
    padding-inline-start: 13px;
    font-size: clamp(29px, 8vw, 38px);
    line-height: 1.02;
    overflow-wrap: anywhere;
  }
  .pdp-info h1::before { inset-block: 4px auto; height: clamp(42px, 12vw, 56px); width: 3px; }

  /* One row, not a block. */
  .pdp-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
  }
  .pdp-price { font-size: 30px; }
  .pdp-price-label { font-size: 12.5px; }

  /* Pills scroll rather than wrapping onto a third line. */
  .pdp-facts {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pdp-facts::-webkit-scrollbar { display: none; }
  .pdp-facts li { flex: 0 0 auto; min-height: 32px; padding: 6px 12px; }

  /* ── Conversion panel ───────────────────────────────────── */
  .pdp-convert {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(7, 59, 134, .08);
    border-radius: 18px;
    background: #fff;
  }
  .pdp-convert-eyebrow { font-size: 14.5px; }
  .pdp-convert > p { font-size: 13px; }

  /* The CTA already says "call"; the number is a quiet confirmation. */
  .pdp-phone { margin-top: 8px; font-size: 18px; font-weight: 850; }

  /* Call takes the space, WhatsApp keeps its own square. */
  .pdp-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 12px;
  }
  .pdp-call { width: auto; height: 50px; border-radius: 13px; padding-inline: 18px; font-size: 15.5px; }
  .pdp-whatsapp { width: auto; height: 50px; min-width: 50px; padding-inline: 14px; border-radius: 13px; font-size: 0; gap: 0; }
  .pdp-whatsapp .fa-brands { font-size: 18px; }
  .pdp-convert > small { margin-top: 10px; font-size: 12px; }

  @media (max-width: 340px) {
    .pdp-actions { grid-template-columns: minmax(0, 1fr); }
    .pdp-whatsapp { font-size: 14px; gap: 8px; }
  }

  /* ── Details as a disclosure ────────────────────────────── */
  .pdp-specs { margin-top: 30px; margin-bottom: 0; }
  .pdp-specs-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
  }
  .pdp-specs-disclosure > summary::-webkit-details-marker { display: none; }
  .pdp-specs h2 { margin: 0; font-size: 20px; }
  .pdp-specs-disclosure > summary i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: rgba(7, 59, 134, .05);
    color: var(--internal-navy);
    transform: rotate(-90deg);
    transition: transform 220ms var(--pm-ease);
  }
  .pdp-specs-disclosure[open] > summary i { transform: rotate(90deg); }

  .pdp-specs-surface { margin-top: 10px; padding: 4px 14px; border-radius: 16px; }
  .pdp-specs dl { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .pdp-specs dl > div { padding: 12px 0; }
  .pdp-specs dl > div:last-child { border-bottom: 0; }

  /* ── Related: earlier, and a swipeable rail ─────────────── */
  .pdp-related { margin-top: 32px; }
  .pdp-related .internal-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .pdp-related h2 { font-size: 20px; }
  .pdp-category-button { height: 40px; padding-inline: 13px; font-size: 12.5px; }

  /* Breaks the rail out of .site-container so it runs edge-to-edge —
     the classic centered-container escape: the parent is centered, so
     this cancels its inset exactly regardless of viewport width. The
     heading and pills above stay inside the container as normal. */
  .pdp-carousel {
    width: 100vw;
    margin-inline: calc(50% - 50vw);  /* both sides — direction-agnostic even if an
       ancestor or this element itself overrides `direction` */
  }

  /* Native scroll and snap; no JS drag on touch. */
  .pdp-carousel-track {
    grid-auto-columns: 78%;
    gap: 10px;
    /* The scroll area is edge-to-edge (see .pdp-carousel above), but the
       resting card still lines up with "מוצרים נוספים מהקטגוריה" above
       it — zero padding here left it flush with the screen edge while
       the heading stayed on the page's normal 18px margin, reading as
       misaligned/broken against the rest of the page. */
    padding-inline: 18px;
    scroll-padding-inline: 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    cursor: auto;
  }
  .pdp-carousel-dots { margin-top: 14px; }
  .pdp-carousel-dots button { width: 6px; height: 6px; }
  .pdp-carousel-dots button[aria-selected="true"] { width: 18px; }

  /* Flows into the footer instead of leaving a hole. */
  .product-detail-page .pdp { padding-bottom: 48px; }

  /* ── Sticky conversion bar ──────────────────────────────── */
  .pdp-sticky {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(7, 59, 134, .08);
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(100%);
    transition: transform 220ms var(--pm-ease);
  }
  .pdp-sticky.is-visible { transform: none; transition-duration: 260ms; }
  .pdp-sticky[hidden] { display: none; }

  .pdp-sticky-price {
    flex: 0 0 auto;
    color: var(--internal-navy);
    font-size: 19px;
    font-weight: 900;
  }
  .pdp-sticky-call {
    display: inline-flex;
    min-height: 46px;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    background: var(--internal-yellow);
    color: var(--internal-navy);
    font-size: 15px;
    font-weight: 900;
  }
  .pdp-sticky-call:active { transform: scale(.985); }

  /* ── Motion: short and immediate ────────────────────────── */
  .pdp-context { animation: none; }
  .product-detail-page .pdp-stage { animation: pm-rise 300ms var(--pm-ease); }
  .product-detail-page .pdp-stage img { animation: pm-rise 300ms var(--pm-ease) 60ms backwards; }
  .product-detail-page .pdp-pill,
  .product-detail-page .pdp-info h1,
  .product-detail-page .pdp-price-row { animation: pm-rise 280ms var(--pm-ease) 100ms backwards; }
  .product-detail-page .pdp-facts li { animation: none; }
  .product-detail-page .pdp-convert,
  .product-detail-page .pdp-convert > * { animation: pm-rise 300ms var(--pm-ease) 160ms backwards; }
  .product-detail-page .pdp-info h1::before { animation: pm-bar 320ms var(--pm-ease) 200ms backwards; }
  .product-detail-page .pdp-phone,
  .product-detail-page .pdp-call,
  .product-detail-page .pdp-whatsapp,
  .product-detail-page .pdp-convert-eyebrow { animation-delay: 160ms; animation-duration: 300ms; }

  /* The grid reads lighter on a small screen. */
  .catalog-environment .catalog-v5-section::before { opacity: .17; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .pdp-sticky { transition: none; }
  .product-detail-page .pdp-stage,
  .product-detail-page .pdp-stage img,
  .product-detail-page .pdp-pill,
  .product-detail-page .pdp-info h1,
  .product-detail-page .pdp-price-row,
  .product-detail-page .pdp-convert,
  .product-detail-page .pdp-convert > * { animation: none; }
}

@media (max-width: 767px) {
  .pdp-specs > h2,
  .pdp-specs summary,
  .pdp-specs-surface,
  .pdp-specs dl > div,
  .pdp-related .internal-section-head h2,
  .pdp-related .pdp-category-button,
  .pdp-related .internal-product-card,
  .pdp-carousel,
  .pdp-related-track {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-delay: 0ms !important;
  }

  .pdp-mm-beat {
    --pdp-mm-x: 0px;
    --pdp-mm-y: 0px;
    --pdp-mm-scale: 1;
    --pdp-mm-duration: 660ms;
    opacity: .76 !important;
    transform: translate3d(var(--pdp-mm-x), var(--pdp-mm-y), 0) scale(var(--pdp-mm-scale)) !important;
    transition:
      opacity var(--pdp-mm-duration) cubic-bezier(.20,.72,.24,1),
      transform var(--pdp-mm-duration) cubic-bezier(.20,.72,.24,1) !important;
    will-change: opacity, transform;
  }

  .pdp-mm-copy {
    --pdp-mm-x: 18px;
    --pdp-mm-y: 1px;
    --pdp-mm-duration: 680ms;
  }

  .pdp-mm-media {
    --pdp-mm-x: -22px;
    --pdp-mm-y: 7px;
    --pdp-mm-scale: .99;
    --pdp-mm-duration: 760ms;
  }

  .pdp-mm-beat.pdp-mm-in {
    opacity: 1 !important;
    transform: translate3d(0,0,0) scale(1) !important;
    will-change: auto;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .pdp-mm-beat,
  .pdp-mm-beat.pdp-mm-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   PROBLEM PAGES — solution-led navigation
   ========================================================= */
.problem-page {
  overflow-x: clip;
  background:
    linear-gradient(rgba(7,59,134,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,59,134,.026) 1px, transparent 1px),
    #f7f3ea;
  background-size: 46px 46px;
}

.problem-page-hero,
.problem-hub-hero {
  position: relative;
  padding: clamp(38px, 5vw, 72px) 0 clamp(30px, 4vw, 58px);
}

.problem-page-hero-inner {
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  direction: ltr;
}

.problem-page-copy,
.problem-hub-hero .site-container {
  display: grid;
  gap: 13px;
  direction: rtl;
  text-align: right;
}

.problem-page-copy .internal-breadcrumbs,
.problem-hub-hero .internal-breadcrumbs {
  color: #7b8493;
  font-size: 12.5px;
  font-weight: 800;
}

.problem-page-kicker,
.problem-page-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255,180,0,.24);
  border-radius: 999px;
  background: rgba(255,180,0,.12);
  color: #073b86;
  font-size: 12.5px;
  font-weight: 950;
}

.problem-page-badge {
  min-height: 30px;
  border-color: rgba(7,59,134,.12);
  background: rgba(255,255,255,.68);
}

.problem-page h1,
.problem-hub-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #073b86;
  font-size: clamp(48px, 5.2vw, 78px);
  font-weight: 950;
  line-height: .98;
  letter-spacing: 0;
}

.problem-page-copy > p,
.problem-hub-hero p {
  max-width: 680px;
  margin: 0;
  color: #687386;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.65;
}

.problem-safety-note {
  max-width: 560px !important;
  padding: 11px 13px;
  border: 1px solid rgba(7,59,134,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.64);
  font-size: 14px !important;
  font-weight: 800;
}

.problem-page-visual {
  position: relative;
  display: grid;
  min-height: 370px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 28px;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,180,0,.20), transparent 34%),
    rgba(255,255,255,.62);
  box-shadow: 0 22px 54px rgba(7,59,134,.08);
}

.problem-page-visual > span {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 24px;
  color: rgba(255,180,0,.82);
  font-size: 28px;
  font-weight: 950;
}

.problem-page-visual img {
  width: 100%;
  height: 100%;
  min-height: 370px;
  object-fit: cover;
}

.problem-page-strip,
.problem-solutions,
.problem-products,
.problem-help-flow,
.problem-help-cta,
.problem-hub-grid-section {
  position: relative;
  padding-bottom: clamp(34px, 4vw, 62px);
}

.problem-strip-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 22px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 14px 34px rgba(7,59,134,.055);
}

.problem-strip-panel h2 {
  margin: 0;
  color: #073b86;
  font-size: 20px;
  font-weight: 950;
}

.problem-strip-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.problem-strip-questions span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  background: #f5f1e8;
  color: #073b86;
  font-size: 13px;
  font-weight: 850;
}

.problem-section-head {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
}

.problem-section-head span {
  color: #7b8493;
  font-size: 13px;
  font-weight: 900;
}

.problem-section-head h2,
.problem-help-steps h2,
.problem-common-links h2 {
  margin: 0;
  color: #073b86;
  font-size: clamp(27px, 2.4vw, 40px);
  font-weight: 950;
  line-height: 1.08;
}

.problem-section-head p {
  max-width: 620px;
  margin: 0;
  color: #687386;
  font-size: 16px;
  font-weight: 750;
}

.problem-category-grid {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.problem-category-card {
  position: relative;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 40px;
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  row-gap: 3px;
  min-height: 138px;
  align-items: center;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(7,59,134,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  color: #073b86;
  direction: rtl;
  box-shadow: 0 14px 34px rgba(7,59,134,.06);
  text-decoration: none;
  transition: border-color 220ms ease, box-shadow 260ms ease, transform 300ms cubic-bezier(.22,1,.36,1), background 220ms ease;
}

.problem-category-card::after {
  position: absolute;
  inset-inline-end: -34px;
  bottom: -46px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: rgba(255,180,0,.055);
  pointer-events: none;
  content: "";
}

.problem-category-card:hover,
.problem-category-card:focus-visible {
  border-color: rgba(255,180,0,.42);
  background: rgba(255,255,255,.96);
  box-shadow: 0 20px 44px rgba(7,59,134,.10);
  transform: translateY(-3px);
}

.problem-category-card:focus-visible {
  outline: 3px solid rgba(255,180,0,.22);
  outline-offset: 3px;
}

.problem-category-thumb {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 148px;
  height: 112px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(7,59,134,.06);
  border-radius: 17px;
  background:
    linear-gradient(rgba(7,59,134,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,59,134,.032) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(255,180,0,.10), transparent 58%),
    #f8f1e7;
  background-size: 22px 22px, 22px 22px, auto, auto;
}

.problem-category-thumb img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transform: scale(.96);
  transition: transform 320ms cubic-bezier(.22,1,.36,1);
}

.problem-category-card:hover .problem-category-thumb img {
  transform: scale(1);
}

.problem-category-thumb:not(:has(img)) {
  color: rgba(7,59,134,.72);
}

.problem-category-type {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: #9a7a28;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: .01em;
}

.problem-category-card strong {
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  color: #073b86;
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 950;
  line-height: 1.12;
}

.problem-category-card small {
  z-index: 1;
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  color: #7b8493;
  font-size: 12px;
  font-weight: 850;
}

.problem-category-card em {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 3;
  grid-row: 1 / 4;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(7,59,134,.09);
  border-radius: 50%;
  background: #fff8df;
  color: #073b86;
  font-style: normal;
  transition: background 220ms ease, transform 260ms cubic-bezier(.22,1,.36,1);
}

.problem-category-card:hover em {
  background: #ffb400;
  transform: translateX(-2px);
}

.problem-product-grid {
  --problem-product-max: 8;
}

.problem-help-cta .site-container,
.problem-help-steps,
.problem-common-links {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 38px rgba(7,59,134,.065);
}

.problem-help-cta .site-container {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.problem-help-cta strong {
  color: #073b86;
  font-size: 24px;
  font-weight: 950;
}

.problem-help-cta p {
  max-width: 720px;
  margin: 4px 0 0;
  color: #687386;
  font-weight: 750;
  line-height: 1.55;
}

.problem-help-flow .site-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 22px;
}

.problem-help-steps ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.problem-help-steps li {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  background: #f7f3ea;
}

.problem-help-steps b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #ffb400;
  color: #073b86;
  font-size: 12px;
  font-weight: 950;
}

.problem-help-steps strong {
  color: #073b86;
  font-size: 17px;
  font-weight: 950;
}

.problem-whatsapp-primary {
  display: inline-flex;
  width: fit-content;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 14px;
  background: #ffb400;
  color: #073b86;
  font-weight: 950;
}

.problem-common-links div {
  display: grid;
  gap: 8px;
}

.problem-common-links a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 13px;
  background: #f7f3ea;
  color: #073b86;
  font-weight: 900;
}

.problem-hub-hero .site-container {
  max-width: 900px;
}

.problem-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.problem-hub-card {
  position: relative;
  display: grid;
  min-height: 292px;
  overflow: hidden;
  border: 1px solid rgba(7,59,134,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.70);
  color: #073b86;
  box-shadow: 0 14px 34px rgba(7,59,134,.06);
}

.problem-hub-card.is-help {
  grid-column: span 2;
}

.problem-hub-image {
  height: 178px;
  overflow: hidden;
  background: #f5f1e8;
}

.problem-hub-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 280ms cubic-bezier(.22,1,.36,1);
}

.problem-hub-card:hover .problem-hub-image img {
  transform: scale(1.025);
}

.problem-hub-copy {
  display: grid;
  gap: 6px;
  padding: 16px 16px 18px;
}

.problem-hub-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #ffb400;
}

.problem-hub-copy strong {
  color: #073b86;
  font-size: 22px;
  font-weight: 950;
}

.problem-hub-copy small {
  color: #687386;
  font-size: 13px;
  font-weight: 850;
}

.problem-hub-arrow {
  position: absolute;
  left: 16px;
  bottom: 18px;
  color: #073b86;
}

/* opacity .01 made whole sections read as washed-out while the reader was
   already looking at them, and it dimmed the hero photograph with them. The
   floor is now .94 — enough to register a change, never enough to look faded. */
.problem-page.problem-motion-ready [data-problem-hero-beat],
.problem-page.problem-motion-ready [data-problem-page-reveal],
.problem-page.problem-motion-ready [data-problem-category-card],
.problem-page.problem-motion-ready .problem-product-grid .internal-product-card {
  opacity: .94;
  transition:
    opacity var(--problem-motion-duration, 480ms) cubic-bezier(.22,1,.36,1) var(--problem-motion-delay, 0ms),
    transform var(--problem-motion-duration, 480ms) cubic-bezier(.22,1,.36,1) var(--problem-motion-delay, 0ms);
}

/* Every resting offset is declared through a custom property, and every
   resting transform is declared exactly once. Breakpoints retune the numbers
   by reassigning the properties — they must never re-declare `transform`,
   because the settled rule below carries the same specificity and would lose
   to a later media block on source order, freezing the entrance mid-flight. */
.problem-page.problem-motion-ready [data-problem-hero-beat] {
  transform: translate3d(var(--problem-beat-x, 28px), 0, 0);
}

/* The hero visual moves, it never fades: an above-the-fold photograph must
   stay at full strength at every moment of the entrance. */
.problem-page.problem-motion-ready [data-problem-hero-visual] {
  --problem-motion-duration: 650ms;
  --problem-motion-delay: 50ms;
  opacity: 1;
  transform:
    translate3d(var(--problem-visual-x, -18px), var(--problem-visual-y, 8px), 0)
    scale(var(--problem-visual-scale, .988));
  transition: transform var(--problem-motion-duration) cubic-bezier(.22,1,.36,1) var(--problem-motion-delay);
}

.problem-page.problem-motion-ready [data-problem-page-reveal],
.problem-page.problem-motion-ready [data-problem-category-card],
.problem-page.problem-motion-ready .problem-product-grid .internal-product-card {
  transform:
    translate3d(0, var(--problem-reveal-y, 12px), 0)
    scale(var(--problem-reveal-scale, .995));
}

/* Images never take part in the fade, whatever their wrapper is doing. */
.problem-page [data-problem-hero-visual] img,
.problem-page [data-problem-category-card] img,
.problem-page .problem-product-grid .internal-product-card img { opacity: 1; }

/* Settled state — last, so it wins every resting declaration above. */
.problem-page.problem-motion-in [data-problem-hero-beat],
.problem-page.problem-motion-in [data-problem-hero-visual],
.problem-page [data-problem-page-reveal].is-revealed,
.problem-page [data-problem-category-card].is-revealed,
.problem-page .problem-product-grid .internal-product-card.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 1024px) {
  .problem-page-hero-inner {
    grid-template-columns: minmax(310px, 400px) minmax(0, 1fr);
    gap: 28px;
  }

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

@media (max-width: 767px) {
  .problem-page-hero {
    padding: 24px 0 30px;
  }

  .problem-page-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    direction: rtl;
  }

  .problem-page-copy .internal-breadcrumbs {
    order: -2;
  }

  .problem-page-visual {
    order: -1;
    min-height: 236px;
    border-radius: 20px;
  }

  .problem-page-visual img {
    min-height: 236px;
  }

  .problem-page h1,
  .problem-hub-hero h1 {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.02;
  }

  .problem-page-copy > p,
  .problem-hub-hero p {
    font-size: 16px;
    line-height: 1.55;
  }

  .problem-strip-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }

  .problem-strip-questions {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .problem-strip-questions::-webkit-scrollbar {
    display: none;
  }

  .problem-strip-questions span {
    flex: 0 0 auto;
  }


  .problem-help-cta .site-container,
  .problem-help-flow .site-container {
    grid-template-columns: 1fr;
  }

  .problem-help-cta .internal-primary,
  .problem-help-cta .internal-secondary,
  .problem-whatsapp-primary {
    width: 100%;
    min-height: 46px;
  }

  .problem-hub-hero {
    padding: 28px 0;
  }

  .problem-hub-grid {
    grid-template-columns: 1fr;
  }

  .problem-hub-card.is-help {
    grid-column: auto;
  }

  .problem-hub-card {
    min-height: 240px;
    border-radius: 20px;
  }

  .problem-hub-image {
    height: 138px;
  }

  .problem-page.problem-motion-ready [data-problem-hero-visual] {
    --problem-visual-x: 0px;
    --problem-visual-y: 10px;
    --problem-visual-scale: .99;
  }

  .problem-page.problem-motion-ready [data-problem-page-reveal],
  .problem-page.problem-motion-ready [data-problem-category-card],
  .problem-page.problem-motion-ready .problem-product-grid .internal-product-card {
    --problem-reveal-y: 10px;
    --problem-reveal-scale: .99;
  }

  .problem-page.problem-motion-ready [data-problem-hero-beat] {
    --problem-beat-x: 18px;
    transition-duration: 420ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-page *,
  .problem-page *::before,
  .problem-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .problem-page [data-problem-hero-beat],
  .problem-page [data-problem-hero-visual],
  .problem-page [data-problem-page-reveal],
  .problem-page [data-problem-category-card],
  .problem-page .problem-product-grid .internal-product-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   PROBLEM DISCOVERY V3 — count-independent category sizing
   Every category keeps the same desktop footprint whether the
   problem has 1, 2, 3, 4 or 5+ categories.
   ========================================================= */
.problem-category-grid {
  --problem-category-card-width: 352px;
  direction: rtl;
  justify-content: start;
}

.problem-category-grid--1 {
  grid-template-columns: minmax(0, var(--problem-category-card-width));
}

.problem-category-grid--2 {
  grid-template-columns: repeat(2, minmax(0, var(--problem-category-card-width)));
  max-width: 1120px;
}

.problem-category-grid--3,
.problem-category-grid--4 {
  grid-template-columns: repeat(3, minmax(0, var(--problem-category-card-width)));
}

.problem-category-grid--1 .problem-category-card,
.problem-category-grid--2 .problem-category-card,
.problem-category-grid--3 .problem-category-card,
.problem-category-grid--4 .problem-category-card {
  width: 100%;
  min-width: 0;
}

.problem-products {
  padding-bottom: clamp(42px, 5vw, 74px);
}

.problem-products > .site-container {
  position: relative;
}

.problem-products-toolbar-wrap {
  position: static;
  z-index: 920;
  margin-bottom: 20px;
  padding-top: 2px;
}

.problem-products-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(390px, 1.28fr);
  grid-template-areas:
    "title search"
    "chips chips";
  gap: 12px 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(7,59,134,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 16px 40px rgba(3,37,90,.07);
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.problem-products-toolbar-wrap.is-stuck .problem-products-toolbar {
  border-color: rgba(7,59,134,.13);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 46px rgba(3,37,90,.12);
}

.problem-products-toolbar-title {
  grid-area: title;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.problem-products-toolbar-title > span {
  color: #8992a1;
  font-size: 10.5px;
  font-weight: 900;
}

.problem-products-toolbar-title h2 {
  margin: 0;
  color: #073b86;
  font-size: clamp(20px, 1.6vw, 27px);
  font-weight: 950;
  line-height: 1.08;
}

.problem-product-search {
  grid-area: search;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: 54px;
  padding: 6px 8px 6px 13px;
  overflow: hidden;
  border: 1px solid rgba(7,59,134,.11);
  border-radius: 17px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.problem-product-search:focus-within {
  border-color: rgba(255,180,0,.72);
  box-shadow: 0 0 0 4px rgba(255,180,0,.10);
}

.problem-product-search-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #073b86;
}

.problem-product-search input {
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #19365e;
  direction: rtl;
  text-align: right;
  font-size: 14.5px;
  font-weight: 750;
  unicode-bidi: plaintext;
}

.problem-product-search input::placeholder {
  color: #8c96a6;
  opacity: 1;
}

.problem-product-search-count {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding-inline: 10px;
  border-radius: 999px;
  background: #f7f2e9;
  color: #718096;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

.problem-product-search-clear {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f4f6f9;
  color: #073b86;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.problem-product-search-clear:hover {
  background: #fff1c9;
  transform: rotate(3deg);
}

.problem-product-category-chips {
  grid-area: chips;
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding-top: 2px;
  scrollbar-width: none;
}

.problem-product-category-chips::-webkit-scrollbar {
  display: none;
}

.problem-product-category-chips a {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding-inline: 12px;
  border: 1px solid rgba(7,59,134,.09);
  border-radius: 999px;
  background: rgba(247,243,234,.92);
  color: #073b86;
  font-size: 11.5px;
  font-weight: 900;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.problem-product-category-chips a small {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #7d8796;
  font-size: 9px;
  font-weight: 900;
}

.problem-product-category-chips a:hover {
  border-color: rgba(255,180,0,.45);
  background: #fff8df;
  transform: translateY(-1px);
}

.problem-product-grid:not(.is-searching):not(.is-expanded) > .internal-product-card:nth-child(n+9) {
  display: none;
}


.problem-product-empty {
  display: grid;
  min-height: 220px;
  margin-top: 4px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  border: 1px dashed rgba(7,59,134,.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,180,0,.09), transparent 42%),
    rgba(255,255,255,.62);
  text-align: center;
}

.problem-product-empty > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,180,0,.16);
  color: #073b86;
}

.problem-product-empty strong {
  color: #073b86;
  font-size: 18px;
  font-weight: 950;
}

.problem-product-empty p {
  margin: 0;
  color: #778395;
  font-size: 13px;
  font-weight: 700;
}

.problem-products-more {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 22px auto 0;
  padding-inline: 18px;
  border: 1px solid rgba(7,59,134,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #073b86;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 28px rgba(7,59,134,.05);
  transition: border-color 180ms ease, transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease;
}

.problem-products-more:hover {
  border-color: rgba(255,180,0,.48);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(7,59,134,.08);
}

@media (max-width: 1024px) {
  .problem-category-grid {
    --problem-category-card-width: min(352px, calc((100vw - 64px) / 2));
  }

  .problem-category-grid--3,
  .problem-category-grid--4 {
    grid-template-columns: repeat(2, minmax(0, var(--problem-category-card-width)));
  }

  .problem-products-toolbar {
    grid-template-columns: minmax(190px, .6fr) minmax(330px, 1.4fr);
  }
}

@media (max-width: 900px) {
  .problem-products-toolbar-wrap {
    top: var(--problem-sticky-top, 122px);
  }

  .problem-products-toolbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "search"
      "chips";
    gap: 9px;
    padding: 11px;
    border-radius: 19px;
  }

  .problem-products-toolbar-title {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
  }

  .problem-products-toolbar-title > span {
    order: 2;
  }

  .problem-products-toolbar-title h2 {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .problem-category-grid {
    --problem-category-card-width: 100%;
    direction: rtl;
    justify-content: stretch;
  }

  .problem-category-grid,
  .problem-category-grid--1,
  .problem-category-grid--2,
  .problem-category-grid--3,
  .problem-category-grid--4 {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-width: none;
    justify-content: stretch;
  }

  .problem-category-card {
    grid-template-columns: 92px minmax(0, 1fr) 34px;
    min-height: 104px;
    column-gap: 11px;
    padding: 9px;
    border-radius: 18px;
  }

  .problem-category-thumb {
    width: 92px;
    height: 84px;
    border-radius: 14px;
    background-size: 18px 18px, 18px 18px, auto, auto;
  }

  .problem-category-thumb img {
    padding: 7px 8px;
  }

  .problem-category-type {
    font-size: 9px;
  }

  .problem-category-card strong {
    font-size: 14px;
  }

  .problem-category-card small {
    font-size: 10.5px;
  }

  .problem-category-card em {
    width: 32px;
    height: 32px;
  }

  .problem-products-toolbar-wrap {
    top: var(--problem-sticky-top, 120px);
    margin-inline: -2px;
    margin-bottom: 14px;
  }

  .problem-products-toolbar {
    gap: 8px;
    padding: 9px;
    border-radius: 17px;
    backdrop-filter: blur(16px) saturate(1.03);
    -webkit-backdrop-filter: blur(16px) saturate(1.03);
  }

  .problem-products-toolbar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-inline: 3px;
  }

  .problem-products-toolbar-title > span {
    display: none;
  }

  .problem-products-toolbar-title h2 {
    font-size: 16px;
  }

  .problem-product-search {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 48px;
    padding: 4px 6px 4px 9px;
    border-radius: 15px;
  }

  .problem-product-search input {
    height: 38px;
    padding-inline: 4px;
    font-size: 13.5px;
  }

  .problem-product-search-count {
    display: none;
  }

  .problem-product-search-clear {
    width: 30px;
    height: 30px;
  }

  .problem-product-category-chips {
    gap: 6px;
  }

  .problem-product-category-chips a {
    min-height: 31px;
    padding-inline: 10px;
    font-size: 10.5px;
  }

  .problem-product-grid:not(.is-searching):not(.is-expanded) > .internal-product-card:nth-child(n+7) {
    display: none;
  }

  .problem-product-empty {
    min-height: 180px;
    padding: 22px 18px;
  }

  .problem-products-more {
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
  }
}

@media (max-width: 374px) {
  .problem-category-card {
    grid-template-columns: 82px minmax(0, 1fr) 30px;
    column-gap: 9px;
  }

  .problem-category-thumb {
    width: 82px;
    height: 76px;
  }

  .problem-product-category-chips a small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-category-card,
  .problem-category-thumb img,
  .problem-category-card em,
  .problem-products-toolbar,
  .problem-product-category-chips a,
  .problem-products-more {
    transition: none !important;
  }
}


.category-v6-category-rail,
.problem-category-grid,
.problem-category-grid.problem-category-grid--1,
.problem-category-grid.problem-category-grid--2,
.problem-category-grid.problem-category-grid--3,
.problem-category-grid.problem-category-grid--4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
  max-width: none;
  margin-inline: 0;
  direction: rtl;
}

.category-v6-category-card,
.problem-category-card {
  position: relative;
  display: grid;
  /* The arrow used to own a 46px grid column, leaving the title only
     ~130px inside a 390px card - narrow enough that Hebrew words broke
     character by character. It is absolutely positioned now, and the
     padding-left below reserves its lane instead. */
  flex: 0 0 clamp(370px, 28vw, 400px);
  width: clamp(370px, 28vw, 400px);
  min-width: 0;
  min-height: 156px;
  grid-template-columns: minmax(150px, 1fr) 138px;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid rgba(7, 59, 134, .09);
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  color: #073b86;
  box-shadow: 0 12px 30px rgba(3, 37, 90, .065);
  text-decoration: none;
  direction: ltr;
  transition: transform 280ms cubic-bezier(.22,1,.36,1), border-color 220ms ease, box-shadow 280ms ease;
}

/* Department cards: thumb + title + count, no arrow. Title and count stack
   in the text column so the count can't be pushed onto an implicit row on
   top of the decorative circle, and no width is reserved for an arrow that
   this markup doesn't have. */
.category-v6-category-card {
  grid-template-areas:
    "title media"
    "count media";
  align-content: center;
  padding: 16px 18px;
}

.category-v6-category-title {
  grid-area: title;
  align-self: end;
}

.category-v6-category-count {
  grid-area: count;
  align-self: start;
}

/* Both are direct grid children here (no copy wrapper), so they carry their
   own RTL alignment - which also keeps them clear of the bottom-left circle. */
.category-v6-category-title,
.category-v6-category-count {
  direction: rtl;
  text-align: right;
}

/* Problem cards keep their arrow + copy composition. */
.problem-category-card {
  grid-template-areas: "copy media";
  padding: 16px 18px 16px 54px;
}

/* .category-v6-category-card::after, */
.problem-category-card::after {
  position: absolute;
  bottom: -42px;
  left: -38px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: rgba(247, 239, 229, .92);
  pointer-events: none;
  content: "";
}

.category-v6-category-card:hover,
.category-v6-category-card:focus-visible,
.problem-category-card:hover,
.problem-category-card:focus-visible {
  border-color: rgba(255, 180, 0, .42);
  box-shadow: 0 18px 38px rgba(3, 37, 90, .10);
  transform: translateY(-3px);
}

.problem-category-arrow {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  place-items: center;
  border: 1px solid rgba(7, 59, 134, .11);
  border-radius: 50%;
  background: #fff7dc;
  color: #073b86;
  direction: rtl;
}

.category-v6-category-copy,
.problem-category-copy {
  position: relative;
  z-index: 2;
  grid-area: copy;
  display: grid;
  min-width: 0;
  gap: 7px;
  align-content: center;
  text-align: right;
  direction: rtl;
}

.category-v6-category-label,
.problem-category-type {
  color: #ae841f;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.1;
}

.category-v6-category-title,
.problem-category-card strong {
  display: block;
  width: 100%;
  min-height: 0;
  color: #073b86;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.28;
  text-align: right;
  /* Wrap between words only. A long Hebrew title takes two or three
     lines here rather than being split mid-word, which destroys it. */
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.category-v6-category-count,
.problem-category-card small {
  color: #7d8798;
  font-size: 12px;
  font-weight: 850;
}

.category-v6-category-thumb,
.problem-category-thumb {
  position: relative;
  z-index: 2;
  grid-area: media;
  display: grid;
  width: 138px;
  height: 112px;
  min-height: 112px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(7, 59, 134, .07);
  border-radius: 17px;
  background: #f7efe5;
}

.category-v6-category-thumb img,
.problem-category-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transform: none;
  transition: transform 360ms cubic-bezier(.22,1,.36,1);
}

.category-v6-category-card:hover .category-v6-category-thumb img,
.problem-category-card:hover .problem-category-thumb img {
  transform: scale(1.035);
}

.problem-category-card em {
  display: none;
}

.category-v6-page .catalog-local-search {
  position: static;
  z-index: 950;
  min-height: 62px;
  margin-top: 18px;
  margin-bottom: 18px;
  border-color: rgba(7, 59, 134, .11);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 38px rgba(3, 37, 90, .09);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.category-v6-page .catalog-local-search:focus-within {
  border-color: rgba(255, 180, 0, .62);
  box-shadow: 0 16px 42px rgba(3, 37, 90, .10), 0 0 0 3px rgba(255, 180, 0, .09);
}

.category-v6-page .category-v6-search-submit {
  display: grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 180, 0, .16);
  color: #073b86;
  cursor: pointer;
}

/* =============================================================
   שירותי הנדימן — WORK-ORDER PAGE
   A dedicated creative direction for this one page: a job-ticket
   hero clipped onto the photo, a pegboard for services (tools hang
   off pegs, not sit in cards), a tape-measure for the process, and
   toolbox drawers for the FAQ. Every class below is exclusive to
   this page — nothing here is shared with any other template.
   ============================================================= */

.handyman-page { background: #f7f3ea; }

/* ── HERO ──────────────────────────────────────────────────── */
.hm2-hero {
  position: relative;
  overflow: hidden;
  background: #f7f3ea;
}

.hm2-hero-media {
  position: relative;
  height: clamp(340px, 46vw, 560px);
  overflow: hidden;
}

.hm2-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hm2-hero-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 29, 71, .05) 0%, rgba(3, 29, 71, .12) 55%, #f7f3ea 100%);
  content: "";
}

.hm2-hero-pin {
  position: absolute;
  top: 22px;
  inset-inline-end: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(7, 59, 134, .82);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(3, 29, 71, .22);
}

.hm2-hero-wrap { position: relative; }

/* The ticket overlaps the photo/cream seam — half on the image,
   half on the page — like a work order clipped to the job. */
.hm2-ticket {
  position: relative;
  max-width: 700px;
  margin-top: clamp(-160px, -14vw, -90px);
  padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.6vw, 46px) clamp(32px, 3.8vw, 46px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(3, 29, 71, .16);
}

.hm2-ticket-tape {
  position: absolute;
  top: -14px;
  inset-inline-start: 40px;
  width: 92px;
  height: 30px;
  background: rgba(255, 180, 0, .82);
  box-shadow: 0 6px 14px rgba(3, 29, 71, .14);
  transform: rotate(-3deg);
}

.hm2-ticket .internal-breadcrumbs { margin-bottom: 14px; }

.hm2-eyebrow {
  gap: 7px;
  margin-bottom: 14px;
  border-color: rgba(255, 180, 0, .28);
  background: rgba(255, 180, 0, .12);
}

.hm2-ticket h1 {
  margin: 0 0 10px;
  color: var(--internal-navy);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: .98;
  letter-spacing: -.02em;
}

.hm2-lead {
  margin: 0 0 8px;
  color: var(--internal-navy);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.hm2-copy {
  max-width: 520px;
  margin: 0 0 24px;
  color: #667184;
  font-size: 16px;
  line-height: 1.65;
}

.hm2-actions { gap: 12px; }

/* ── SERVICES — pegboard ──────────────────────────────────── */
.hm2-services {
  padding: clamp(70px, 7vw, 108px) 0 clamp(64px, 6vw, 96px);
  background: #f7f3ea;
}

.hm2-section-head { max-width: 640px; margin: 0 0 clamp(38px, 4vw, 56px); }

.hm2-section-head > span {
  display: block;
  margin-bottom: 10px;
  color: var(--internal-yellow);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
}

.hm2-section-head h2 {
  margin: 0 0 12px;
  color: var(--internal-navy);
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.08;
}

.hm2-section-head p {
  margin: 0;
  color: #667184;
  font-size: 16px;
  line-height: 1.65;
}

.hm2-section-head--light > span { color: var(--internal-yellow); }
.hm2-section-head--light h2 { margin: 0; color: #fff; }

.hm2-pegboard {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 46px 30px 30px;
  border-radius: 26px;
  /* background:
    radial-gradient(rgba(7, 59, 134, .12) 1.6px, transparent 1.6px) 0 0 / 26px 26px,
    #fff;
  box-shadow: 0 20px 50px rgba(3, 29, 71, .08); */
}

.hm2-peg {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-top: 26px;
  text-align: center;
}

.hm2-peg-hook {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 3px;
  height: 34px;
  background: rgba(7, 59, 134, .22);
  transform: translateX(-50%);
}

.hm2-peg-hook::after {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(7, 59, 134, .3);
  content: "";
  transform: translateX(-50%);
}

.hm2-peg-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 16px;
  background: rgba(7, 59, 134, .07);
  color: var(--internal-navy);
  box-shadow: inset 0 0 0 1px rgba(7, 59, 134, .1);
  transition: transform 260ms cubic-bezier(.22,1,.36,1), background 220ms ease;
}

.hm2-peg-label {
  color: var(--internal-navy);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

@media (hover: hover) {
  .hm2-peg:hover .hm2-peg-icon {
    background: var(--internal-yellow);
    color: #061f5c;
    transform: translateY(-3px) rotate(-4deg);
  }
}

/* ── PROCESS — tape measure ───────────────────────────────── */
.hm2-process {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 7vw, 108px) 0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(135deg, #073b86, #032f70);
  background-size: 48px 48px, 48px 48px, auto;
}

.hm2-tape {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 12px;
}

.hm2-tape::before {
  position: absolute;
  top: 22px;
  right: calc(16.66% - 1px);
  left: calc(16.66% - 1px);
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 8px, transparent 8px 16px);
  content: "";
}

.hm2-tape-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 0 18px;
  text-align: center;
}

.hm2-tape-mark {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--internal-yellow);
  color: #061f5c;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0, 20, 55, .3);
}

.hm2-tape-step strong {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.hm2-service-area {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(38px, 4vw, 54px);
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 700;
}

.hm2-service-area strong { color: var(--internal-yellow); }

/* ── FAQ — toolbox drawers ─────────────────────────────────── */
.hm2-faq {
  padding: clamp(70px, 7vw, 106px) 0;
  background: #f7f3ea;
}

.hm2-faq-inner { max-width: 780px; }

.hm2-faq-inner > h2 {
  margin: 0 0 clamp(30px, 3vw, 44px);
  color: var(--internal-navy);
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.08;
}

.hm2-drawers { display: grid; gap: 12px; }

.hm2-drawer {
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(3, 29, 71, .06), inset 0 0 0 1px rgba(7, 59, 134, .08);
}

.hm2-drawer summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 16px 22px;
  color: var(--internal-navy);
  font-size: 16px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.hm2-drawer summary::-webkit-details-marker { display: none; }

.hm2-drawer-handle {
  flex: 0 0 auto;
  width: 26px;
  height: 8px;
  border-radius: 999px;
  background: rgba(7, 59, 134, .16);
  transition: background 220ms ease, width 220ms ease;
}

.hm2-drawer[open] .hm2-drawer-handle {
  width: 26px;
  background: var(--internal-yellow);
}

.hm2-drawer summary::after {
  margin-inline-start: auto;
  color: rgba(7, 59, 134, .4);
  font-size: 15px;
  content: "+";
  transition: transform 240ms cubic-bezier(.22,1,.36,1);
}

.hm2-drawer[open] summary::after { transform: rotate(45deg); }

.hm2-drawer p {
  margin: 0;
  padding: 0 22px 20px 58px;
  color: #667184;
  font-size: 15px;
  line-height: 1.6;
}

/* ── FINAL CTA — the yellow closing chapter ─────────────────
   Was a narrow centred stack in a wide navy band, which left most
   of the width empty on both sides. The band is now the shop's
   yellow with navy on top - the site's own two colours, inverted -
   and the same three pieces of content are laid across the width:
   the question on the reading side, the number and the two actions
   opposite it, a rule between them. A blueprint grid and a corner
   of dots carry the rest of the width so nothing is left blank.
   Content is unchanged: heading, phone, call, WhatsApp. ───────── */
.hm2-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 5.6vw, 88px) 0;
  background: var(--internal-yellow);
  color: var(--internal-navy);
}

/* Blueprint grid, the same device the departments band uses, drawn
   in navy on the yellow so the ground is never a flat rectangle. */
.hm2-cta::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(7, 59, 134, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 59, 134, .08) 1px, transparent 1px);
  background-size: 54px 54px;
  content: "";
  pointer-events: none;
}

/* Dotted grain in the outer corner - the sides used to be empty. */
.hm2-cta::after {
  position: absolute;
  inset-inline-end: -30px;
  bottom: -46px;
  width: 260px;
  height: 260px;
  background-image: radial-gradient(circle, rgba(7, 59, 134, .3) 1.6px, transparent 1.6px);
  background-size: 20px 20px;
  opacity: .5;
  content: "";
  pointer-events: none;
}

.hm2-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* The two blocks take the width they need at the two outer edges; the
     middle track is what is left, and it is not empty - it carries the
     dimension line below. */
  grid-template-columns: auto minmax(90px, 1fr) auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.hm2-cta-inner h2 {
  margin: 0;
  color: var(--internal-navy);
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 950;
  line-height: 1.04;
  letter-spacing: -.01em;
}

/* A dimension line, the way a measurement is drawn on a plan: a dashed run
   between two end ticks. It is what turns two blocks parked at opposite
   edges into one composition, and it gives the middle of the band something
   to do rather than leaving it blank. */
.hm2-cta-rule {
  position: relative;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(7, 59, 134, .42) 0 9px,
    rgba(7, 59, 134, 0) 9px 17px
  );
}

.hm2-cta-rule::before,
.hm2-cta-rule::after {
  position: absolute;
  top: 50%;
  width: 1.5px;
  height: 16px;
  background: rgba(7, 59, 134, .5);
  transform: translateY(-50%);
  content: "";
}

.hm2-cta-rule::before { inset-inline-start: 0; }
.hm2-cta-rule::after { inset-inline-end: 0; }

.hm2-cta-side {
  display: grid;
  /* The far edge, not the edge nearest the rule: with `start` the number and
     the buttons hugged the middle and left a third of the band empty on the
     outside. */
  justify-items: end;
  gap: 18px;
}

.hm2-cta-phone {
  color: var(--internal-navy);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.02em;
  transition: opacity 180ms ease;
}

.hm2-cta-phone:hover { opacity: .78; }

/* .internal-actions is a grid elsewhere on the page, which put these two on
   separate rows even with room for both. Here they are one row. */
.hm2-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Navy button on yellow: the inverse of the same pair used above. */
.hm2-cta .internal-primary {
  min-height: 54px;
  padding-inline: 26px;
  border: 0;
  background: var(--internal-navy);
  color: #fff;
  font-size: 16px;
}

.hm2-cta .internal-primary:hover { background: #0a4ba8; }

.hm2-cta-whatsapp {
  width: 54px;
  min-width: 54px;
  min-height: 54px;
  padding: 0;
  border: 1.5px solid rgba(7, 59, 134, .34);
  background: rgba(255, 255, 255, .5);
  color: var(--internal-navy);
}

.hm2-cta-whatsapp:hover {
  border-color: var(--internal-navy);
  background: rgba(255, 255, 255, .8);
}

@media (max-width: 860px) {
  /* One column, and the rule becomes the divider between the two
     halves rather than a column of its own. */
  .hm2-cta-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    text-align: center;
    justify-items: center;
  }

  .hm2-cta-rule { width: min(240px, 66%); }

  .hm2-cta-side { justify-items: center; }

  /* Side by side, as on desktop: the two together are narrower than the
     column, so the primary must not stretch to fill it and push the
     WhatsApp button onto a second row. */
  .hm2-cta-actions {
    justify-content: center !important;
    flex-wrap: nowrap;
  }

  .hm2-cta-actions > * { flex: 0 0 auto; }
  .hm2-cta .internal-primary { width: auto; padding-inline: 20px; }
  .hm2-cta::after { width: 190px; height: 190px; }
}

/* ── Entrance — reuses the page's existing WAAPI controller;
     these are only the resting/settled states the JS animates
     from/to, and the safety floor if it never runs. ─────────── */
[data-handyman-beat],
[data-handyman-hero-media],
[data-handyman-reveal],
.hm2-peg,
.hm2-tape-step,
.hm2-drawer { opacity: 1; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hm2-hero-media { height: 300px; }

  .hm2-ticket {
    /* .site-container already insets us 18px each side on mobile —
       only the vertical pull-up belongs to this rule. */
    max-width: none;
    margin: -70px 0 0;
    padding: 24px 20px 28px;
  }

  .hm2-ticket h1 { font-size: clamp(30px, 8vw, 40px); }

  .hm2-pegboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 40px 18px 18px;
  }

  .hm2-tape { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hm2-tape::before { display: none; }

  .hm2-drawer p { padding-inline-start: 22px; }
}

@media (max-width: 520px) {
  .hm2-pegboard { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hm2-peg-icon,
  .hm2-drawer-handle,
  .hm2-drawer summary::after {
    transition: none !important;
  }
}


@media (max-width: 1100px) {
  .category-v6-category-card,
  .problem-category-card {
    flex: 1 1 calc(50% - 8px);
    width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    grid-template-columns: minmax(140px, 1fr) 126px;
  }

  .category-v6-category-card { padding: 14px 16px; }
  .problem-category-card { padding: 14px 16px 14px 52px; }

  .category-v6-category-thumb,
  .problem-category-thumb {
    width: 126px;
  }
}

@media (max-width: 767px) {
  .category-v6-category-rail,
  .problem-category-grid,
  .problem-category-grid.problem-category-grid--1,
  .problem-category-grid.problem-category-grid--2,
  .problem-category-grid.problem-category-grid--3,
  .problem-category-grid.problem-category-grid--4 {
    gap: 12px;
  }

  .category-v6-category-card,
  .problem-category-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) 105px;
    min-height: 120px;
    gap: 12px;
    border-radius: 18px;
  }

  .category-v6-category-card { padding: 12px; }
  .problem-category-card { padding: 12px 12px 12px 48px; }

  .category-v6-category-arrow,
  .problem-category-arrow {
    left: 10px;
    width: 34px;
    height: 34px;
  }

  .category-v6-category-thumb,
  .problem-category-thumb {
    width: 105px;
    height: 88px;
    min-height: 88px;
    border-radius: 14px;
  }

  .category-v6-category-title,
  .problem-category-card strong {
    font-size: 14px;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: normal;
  }

  .category-v6-category-label,
  .problem-category-type {
    font-size: 10.5px;
  }

  .category-v6-page .catalog-local-search {
    top: var(--internal-sticky-top, 92px);
    z-index: 950;
  }

}

@media (prefers-reduced-motion: reduce) {
  .category-v6-category-card,
  .problem-category-card,
  .category-v6-category-thumb img,
  .problem-category-thumb img {
    transition: none !important;
  }
}

/* ── Card CTA: the phone icon alone ──────────────────────────
   The label and the "details" link were colliding inside the
   card's action row. The call action is now a square icon button
   with an accessible name; the details link keeps the words and
   the room it needs.
   ─────────────────────────────────────────────────────────── */

.internal-product-availability,
.catalog-v2-grid .internal-product-availability,
.catalog-v4-grid .internal-product-availability,
.problem-product-grid .internal-product-availability,
.catalog-v5-page .catalog-v4-grid .internal-product-availability {
  display: inline-grid;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  gap: 0;
  border-radius: 999px;
  font-size: 0;
  line-height: 0;
}

.internal-product-availability svg,
.internal-product-availability i,
.internal-product-availability .fa-solid {
  font-size: 14px;
  line-height: 1;
}

/* The row is now: details link takes the space, call sits at the end. */
.internal-product-actions,
.catalog-v5-page .catalog-v4-grid .internal-product-actions,
.catalog-v5-page .catalog-v5-grid .internal-product-actions {
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
}

.internal-product-details,
.catalog-v5-page .catalog-v4-grid .internal-product-details {
  width: auto;
  justify-content: flex-start;
}

@media (max-width: 767px) {
  /* Matching the depth the mobile pass used, otherwise `width: 100%` from
     there stretched the now-empty button into a wide blank pill. */
  .catalog-v5-page .internal-product-availability,
  .catalog-v5-page .catalog-v4-grid .internal-product-availability,
  .catalog-v5-page .catalog-v5-grid .internal-product-availability,
  .catalog-v2-grid .internal-product-availability,
  .catalog-v4-grid .internal-product-availability,
  .internal-product-availability {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    padding: 0;
  }

  .catalog-v5-page .catalog-v4-grid .internal-product-actions,
  .catalog-v5-page .catalog-v5-grid .internal-product-actions,
  .catalog-v2-grid .internal-product-actions,
  .catalog-v4-grid .internal-product-actions,
  .internal-product-actions {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 6px;
  }

  .catalog-v5-page .internal-product-details,
  .catalog-v5-page .catalog-v4-grid .internal-product-details,
  .internal-product-details {
    width: auto;
    min-height: 36px;
    justify-content: flex-start;
  }
}

/* ── The whole card is the link ──────────────────────────────
   The "details" link is gone: the product link now stretches
   over the entire card, and only the call button sits above it.
   ─────────────────────────────────────────────────────────── */

.internal-product-card { position: relative; }

/* One overlay covering the card; the anchor itself keeps its own layout. */
.internal-product-link::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  content: "";
}

/* Above the overlay, so calling never opens the product page. */
.internal-product-actions { position: relative; z-index: 2; }

.internal-product-actions,
.catalog-v5-page .catalog-v4-grid .internal-product-actions,
.catalog-v5-page .catalog-v5-grid .internal-product-actions,
.catalog-v2-grid .internal-product-actions,
.catalog-v4-grid .internal-product-actions {
  display: flex;
  grid-template-columns: none;
  justify-content: flex-start;
}

/* Keyboard users still get a visible target on the card. */
.internal-product-card:focus-within { outline: 3px solid rgba(255, 180, 0, .5); outline-offset: 3px; }
.internal-product-link:focus-visible { outline: none; }

@media (hover: hover) {
  .internal-product-card:hover { cursor: pointer; }
}

@media (max-width: 767px) {
  .catalog-v5-page .catalog-v4-grid .internal-product-actions,
  .catalog-v5-page .catalog-v5-grid .internal-product-actions,
  .catalog-v2-grid .internal-product-actions,
  .catalog-v4-grid .internal-product-actions,
  .internal-product-actions {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    gap: 0;
  }
}

/* ── Call button pinned to the card's top-right corner ────── */

.internal-product-card > .internal-product-actions,
.catalog-v2-grid .internal-product-actions,
.catalog-v4-grid .internal-product-actions,
.catalog-v5-page .catalog-v4-grid .internal-product-actions,
.catalog-v5-page .catalog-v5-grid .internal-product-actions,
.problem-product-grid .internal-product-actions {
  position: absolute;
  /* Inside the image, not on the card's white margin: the media starts one
     card-padding plus its border in from the corner, so the button clears
     that first and then takes its own 9px inset. */
  top: calc(12px + 1px + 9px);
  right: calc(12px + 1px + 9px);
  left: auto;
  bottom: auto;
  z-index: 3;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* It sits over the image now, so it needs to hold its own against it. */
.internal-product-availability,
.catalog-v2-grid .internal-product-availability,
.catalog-v4-grid .internal-product-availability,
.problem-product-grid .internal-product-availability,
.catalog-v5-page .catalog-v4-grid .internal-product-availability {
  box-shadow: 0 4px 12px rgba(3, 29, 71, .18);
}

@media (max-width: 767px) {
  .internal-product-card > .internal-product-actions,
  .catalog-v2-grid .internal-product-actions,
  .catalog-v4-grid .internal-product-actions,
  .catalog-v5-page .catalog-v4-grid .internal-product-actions,
  .catalog-v5-page .catalog-v5-grid .internal-product-actions {
    top: calc(12px + 1px + 7px);
    right: calc(12px + 1px + 7px);
  }
}

/* ── Clipped category titles: a popover on hover ─────────────
   JS marks only the rows whose name is actually cut. Those get a
   small panel that scales up beside the row with the full name —
   no layout shift, no text crawling under a mask.
   ─────────────────────────────────────────────────────────── */

/* inline-block so its scrollWidth reports the real text width; without it the
   inner element measures the same as its clipped parent and nothing is ever
   detected as truncated. */
.catalog-sidebar-label strong > i {
  display: inline-block;
  font-style: inherit;
  white-space: nowrap;
}

@media (min-width: 901px) and (hover: hover) {
  .catalog-v5-page .catalog-sidebar a.is-clipped { position: relative; }

  .catalog-v5-page .catalog-sidebar a.is-clipped::after {
    position: absolute;
    z-index: 40;
    top: 50%;
    /* Opens toward the catalogue, away from the rail's edge. */
    inset-inline-end: calc(100% + 10px);
    max-width: 260px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--internal-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(3, 29, 71, .26);
    content: attr(data-full-title);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) scale(.9);
    transform-origin: center right;
    transition:
      opacity 180ms cubic-bezier(.22, 1, .36, 1),
      transform 220ms cubic-bezier(.22, 1, .36, 1);
  }

  /* The little beak, sharing the panel's timing. */
  .catalog-v5-page .catalog-sidebar a.is-clipped::before {
    position: absolute;
    z-index: 41;
    top: 50%;
    inset-inline-end: calc(100% + 5px);
    width: 8px;
    height: 8px;
    background: var(--internal-navy);
    content: "";
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) rotate(45deg) scale(.6);
    transition:
      opacity 180ms cubic-bezier(.22, 1, .36, 1),
      transform 220ms cubic-bezier(.22, 1, .36, 1);
  }

  .catalog-v5-page .catalog-sidebar a.is-clipped:hover::after,
  .catalog-v5-page .catalog-sidebar a.is-clipped:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    transition-delay: 60ms;
  }

  .catalog-v5-page .catalog-sidebar a.is-clipped:hover::before,
  .catalog-v5-page .catalog-sidebar a.is-clipped:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg) scale(1);
    transition-delay: 60ms;
  }

  /* The row itself acknowledges the hover, quietly. */
  .catalog-v5-page .catalog-sidebar a.is-clipped .catalog-thumb {
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
  }
  .catalog-v5-page .catalog-sidebar a.is-clipped:hover .catalog-thumb {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-v5-page .catalog-sidebar a.is-clipped::after,
  .catalog-v5-page .catalog-sidebar a.is-clipped::before { transition-duration: 1ms; transform: translateY(-50%); }
  .catalog-v5-page .catalog-sidebar a.is-clipped:hover .catalog-thumb { transform: none; }
}