/* ============================================================
   NYVOXA HOMEPAGE — targeted layout fixes
   Loaded only by customer/index.html, after style-v3.css, so no
   other page on the store is affected.

   Fixes:
   1. category labels were cut off ("Headphones & ...") because of
      white-space:nowrap inside a 110px box -> allow two lines
   2. hero trust chips landed on top of the product image because
      chip-3 was pinned at left:55%, which is exactly where the
      hero visual starts -> move all three into the empty top strip
   3. the two brand sidebars read as empty dark columns -> lighter,
      narrower, symmetric
   4. the sticky header clipped section headings on anchor jumps
      -> scroll-margin so the heading lands below the nav
   ============================================================ */

/* ---------- 1. category names readable in full ----------
   ROOT CAUSE: chat-widget.css (a chat stylesheet) also carries a stray copy of
   the store's category rules:
     .cat-grid .cat-card .cat-label, .cat-grid .cat-card span:last-child
       { max-width: 54px !important; font-size: 11px !important }
       @media (max-width: 480px)
   That selector is specificity (0,6,3) and it is !important, so anything
   simpler loses to it no matter which file loads later. The rule below walks
   the real DOM chain (section > div > div > a > div > span) which lands at
   (0,6,6) and therefore wins on specificity. */
.cat-card-label {
  max-width: clamp(112px, 21vw, 158px);
}
.cat-card-label span {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.25;
  text-overflow: clip;
}
.cat-section .wrap .cat-grid .cat-card .cat-card-label span,
.cat-section .wrap .cat-grid .cat-card .cat-card-label span:last-child {
  max-width: none !important;
  width: 100% !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: normal;
  word-break: normal;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

/* ---------- 2. hero chips off the product image ---------- */
/* The chips are absolutely positioned inside .hero-3d-stage, which is the
   533px product column on the right - not the whole hero. So they are placed
   with pixel offsets inside that box (percentages made them sit on top of each
   other, because each chip is ~125px wide). They also sit above the product
   photo, so nothing important is covered. */
.floating-chip {
  white-space: nowrap;
}
.floating-chip.chip-1,
.floating-chip.chip-2,
.floating-chip.chip-3 {
  top: 8px;
  bottom: auto;
  animation-delay: 0s;
}
.floating-chip.chip-1 { left: 0;    right: auto; }
.floating-chip.chip-2 { left: 136px; right: auto; top: 8px; }
.floating-chip.chip-3 { left: 272px; right: auto; top: 8px; }
.floating-chip.chip-2 .dot { background: #f59e0b; }
.floating-chip.chip-3 .dot { background: #8b5cf6; }

/* ---------- 3. brand sidebars: subtle and symmetric ---------- */
.featured-sidebar {
  width: 30px;
  opacity: .5;
  transition: opacity .25s ease;
}
.featured-sidebar-left { left: 14px; }
.featured-sidebar-right { right: 14px; }
.featured-sidebar:hover { opacity: .85; }
.ny-brand-box { border-radius: 8px; }

/* ---------- 4. sticky nav must not eat section headings ---------- */
.cat-section,
.featured-section,
.section-with-sidebars,
.mega-sale-hero,
.section-head,
.cat-head-box {
  scroll-margin-top: calc(var(--nav-h) + 30px);
}

/* ---------- mobile: keep the same guarantees ---------- */
@media (max-width: 900px) {
  .cat-card-label { max-width: 118px; }
  .cat-card-label span { font-size: 12px; }
}
@media (max-width: 640px) {
  /* covered by the (0,6,6) rule above, kept here only for the font size */
  .cat-grid .cat-card .cat-card-label span { font-size: 12px; }
}
@media (max-width: 500px) {
  /* The category strip scrolls sideways on phones. The cards were sizing to
     their 68px circle, which left the label about 54px wide - narrower than
     the word "Headphones", so names broke mid-word and the third line was
     clamped away. Widths are set explicitly here because leaving them to
     fit-content resolved the label to min-content inside the column flex
     card, no matter what max-width said. */
  .cat-grid .cat-card {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }
  .cat-grid .cat-card .cat-card-label {
    width: 108px !important;
    max-width: 108px !important;
  }
  .cat-grid .cat-card .cat-card-label span {
    font-size: 11px;
    line-height: 1.22;
    overflow-wrap: normal;
    word-break: normal;
  }
  /* chips would cover the headline on a small screen */
  .floating-chip { display: none !important; }
}

/* ============================================================
   5. TRUST BAR - the four promises a Pakistani buyer checks
   ============================================================ */
.ny-trust {
  margin: -34px auto 0;
  position: relative;
  z-index: 4;
  max-width: 1280px;
  padding: 0 28px;
}
.ny-trust-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #E2E8F0;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(11, 18, 32, .10);
}
.ny-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #fff;
}
.ny-trust-ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(15, 181, 165, .12);
  color: #0B7F76;
}
.ny-trust-ico svg { width: 20px; height: 20px; }
.ny-trust-txt { min-width: 0; }
.ny-trust-txt b {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px; font-weight: 800;
  color: #0B1220; line-height: 1.25;
}
.ny-trust-txt span {
  display: block;
  font-size: 11.5px; color: #64748B; line-height: 1.35;
  margin-top: 2px;
}

/* ============================================================
   6. BLOG TEASER - the store publishes buying guides; the home
      page had no link to them at all, only the footer.
   ============================================================ */
.ny-blog {
  padding: 72px 0 80px;
  background: #F6F7FB;
  border-top: 1px solid #E6E8F0;
}
.ny-blog-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 34px;
  padding: 0 28px;
}
.ny-blog-head .eyebrow {
  display: inline-block;
  background: rgba(15, 181, 165, .12);
  border: 1px solid rgba(15, 181, 165, .30);
  color: #0B7F76;
}
.ny-blog-head h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  color: #0B1220;
  margin: 12px 0 8px;
  line-height: 1.18;
}
/* 14.5px body copy is not "large text" for WCAG, so this needs the full 4.5:1.
   #64748B landed at 4.43 on the lightest panel, hence the small step darker. */
.ny-blog-head p { font-size: 14.5px; color: #5A6678; line-height: 1.6; }

.hbp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}
.hbp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  background: #fff;
  border: 1.5px solid #E6E8F0;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .22s var(--ease-smooth), box-shadow .22s, border-color .22s;
}
.hbp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 181, 165, .55);
  box-shadow: 0 18px 40px rgba(11, 18, 32, .12);
}
.hbp-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: #EEF2F7;
  overflow: hidden;
}
.hbp-media.is-blank { background: linear-gradient(135deg, #E2E8F0, #EEF2F7); }
.hbp-media-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease-smooth);
}
.hbp-card:hover .hbp-media-img { transform: scale(1.05); }
.hbp-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
}
.hbp-title {
  font-family: 'Manrope', sans-serif;
  font-size: 15.5px; font-weight: 800;
  color: #0B1220; line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hbp-excerpt {
  font-size: 13px; color: #64748B; line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hbp-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  /* was #94A3B8, which only reached 2.45:1 on the new white-light card.
     #64748B is the same tone already used for the excerpt and clears AA. */
  font-size: 11.5px; color: #64748B; font-weight: 600;
  margin-top: auto; padding-top: 4px;
}

.hbp-more {
  font-size: 12.5px; font-weight: 800; color: #0B7F76;
  padding-top: 10px; margin-top: 4px;
  border-top: 1px solid #EEF1F6;
}
.ny-blog-cta { text-align: center; margin-top: 34px; }

/* ============================================================
   7. POLISH - eyebrow contrast on the dark hero, and the
      floating dark box around "Featured Products".
   ============================================================ */
.hero .eyebrow {
  color: #7FF3E6;
  background: rgba(15, 181, 165, .16);
  border-color: rgba(127, 243, 230, .38);
}
.featured-section .section-head-box {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: 640px;
  margin: 0 auto 30px;
  text-align: center;
}
.featured-section .section-head-box .eyebrow {
  background: rgba(15, 181, 165, .12);
  border-color: rgba(15, 181, 165, .30);
  color: #0B7F76;
}
.featured-section .section-head-box .section-title { color: #0B1220; }
.featured-section .section-head-box .section-sub { color: #64748B; }
.section.featured-section { padding-top: 72px; }

@media (max-width: 980px) {
  .hbp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ny-trust { margin-top: -18px; padding: 0 16px; }
  .ny-trust-inner { grid-template-columns: minmax(0, 1fr); }
  .ny-trust-item { padding: 14px 14px; gap: 10px; }
  .ny-trust-ico { width: 34px; height: 34px; border-radius: 10px; }
  .ny-trust-ico svg { width: 17px; height: 17px; }
  .ny-trust-txt b { font-size: 12.5px; }
  .ny-trust-txt span { font-size: 10.5px; }
  .ny-blog { padding: 52px 0 58px; }
  .hbp-grid { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 14px; }
  .ny-blog-head { padding: 0 16px; }
}

/* ============================================================
   8. HERO HEADLINE - the old H1 ran to five lines and read like
      a keyword list. Same keywords, shorter sentence, and the
      accent line is set smaller so it stops shouting.
   ============================================================ */
.hero-content h1 {
  font-size: clamp(29px, 3.15vw, 44px);
  line-height: 1.14;
  letter-spacing: -.015em;
}
.hero-content h1 .accent {
  display: block;
  margin-top: 8px;
  font-size: .58em;
  line-height: 1.25;
  letter-spacing: 0;
  opacity: .95;
}
@media (max-width: 720px) {
  .hero-content h1 { font-size: clamp(25px, 7.4vw, 34px); }
  .hero-content h1 .accent { font-size: .62em; margin-top: 6px; }
}

/* ============================================================
   9. MOTION - homepage only.
      Everything animates on transform/opacity so scrolling stays
      smooth, and every block below is disabled for visitors who
      ask for reduced motion (see section 11).
   ============================================================ */

/* --- scroll progress hairline --- */
.ny-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #0FB5A5, #7FF3E6);
  z-index: 900;
  pointer-events: none;
  will-change: transform;
}

/* --- trust bar: rise in, then a single soft sheen --- */
@keyframes nyTrustIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ny-trust.reveal { opacity: 1; transform: none; }   /* our own timing */
.ny-trust-inner { will-change: transform; }
html.ny-motion .ny-trust.is-in .ny-trust-inner { animation: nyTrustIn .7s var(--ease-smooth) both; }
.ny-trust-item { will-change: transform, opacity; }
html.ny-motion .ny-trust.is-in .ny-trust-item {
  opacity: 0;
  animation: nyTrustIn .62s var(--ease-smooth) both;
  animation-delay: calc(.10s + var(--i, 0) * .085s);
}
@keyframes nySheen {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
.ny-trust-item::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0; width: 42%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(15,181,165,.10), transparent);
  transform: translateX(-120%);
}
.ny-trust-item { position: relative; overflow: hidden; }
html.ny-motion .ny-trust.is-in .ny-trust-item::after {
  animation: nySheen 1.1s var(--ease-smooth) both;
  animation-delay: calc(.55s + var(--i, 0) * .085s);
}

/* --- trust icons: gentle lift + halo on hover --- */
.ny-trust-item { transition: background .22s ease; }
.ny-trust-item:hover { background: #F8FAFC; }
.ny-trust-item:hover .ny-trust-ico {
  transform: translateY(-2px) scale(1.06);
  background: rgba(15, 181, 165, .20);
}
.ny-trust-ico { transition: transform .24s var(--ease-bounce), background .24s ease; }
.ny-trust-item:hover .ny-trust-txt b { color: #0B7F76; }
.ny-trust-txt b { transition: color .2s ease; }

/* --- blog cards: staggered rise --- */
@keyframes nyCardIn {
  from { opacity: 0; transform: translateY(30px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
html.ny-motion .hbp-card { opacity: 0; }
html.ny-motion .hbp-card.is-in { animation: nyCardIn .68s var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * .1s); }

/* --- section title accent underline that grows in --- */
@keyframes nyRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.ny-blog-head h2 { position: relative; display: inline-block; }
.ny-blog-head h2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -10px;
  width: 62px; height: 3px;
  border-radius: 3px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, #0FB5A5, #7FF3E6);
}
html.ny-motion .ny-blog-head.is-in h2::after { animation: nyRule .6s var(--ease-smooth) .25s both; }

/* --- primary CTA shine sweep on hover --- */
@keyframes nyShine {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(230%) skewX(-18deg); }
}
.hero-content .btn-glow { position: relative; overflow: hidden; }
.hero-content .btn-glow::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.hero-content .btn-glow:hover::after { animation: nyShine .75s var(--ease-smooth) both; }

/* --- slow drifting glow behind the hero visual --- */
@keyframes nyDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .5; }
  50%      { transform: translate3d(-18px, 14px, 0) scale(1.08); opacity: .72; }
}
.ny-hero-glow {
  position: absolute;
  top: 6%;
  right: 4%;
  width: 46%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 181, 165, .20), transparent 72%);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: nyDrift 13s ease-in-out infinite;
}

/* --- product grid cards: gentle stagger as they scroll in --- */
@keyframes nyProdIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.ny-motion .js-featured-grid .product-card.is-in { animation: nyProdIn .6s var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * .055s); }

/* ============================================================
   10. HERO SPACING - the bottom of the hero was dead space once
       the trust bar moved up over it.
   ============================================================ */
.hero { padding-bottom: 92px; }
@media (max-width: 720px) {
  .hero { padding-bottom: 74px; }
}

/* ============================================================
   11. REDUCED MOTION - the opt-out lives at the very end of this
       file on purpose, see the note there.
   ============================================================ */



/* --- hero glow: state the timing explicitly, the shared .hero rules in
       style-v3.css were shortening the duration to .3s --- */
.hero > .ny-hero-glow,
.hero .ny-hero-glow {
  animation-name: nyDrift !important;
  animation-duration: 13s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-delay: 0s !important;
}

/* ============================================================
   12. REDUCED MOTION (final word on the subject)
       This block is last on purpose. Several rules above need
       !important to beat the shared .hero / .cat-grid rules that
       live in style-v3.css and chat-widget.css, and between two
       !important declarations the later one wins - so the visitor's
       "reduce motion" choice has to be expressed here, after them.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ny-progress { display: none !important; }

  .ny-hero-glow,
  .hero > .ny-hero-glow,
  .hero .ny-hero-glow { animation: none !important; }

  .ny-trust-inner,
  .ny-trust-item,
  .ny-trust-item::after,
  .hbp-card,
  .js-featured-grid .product-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ny-trust-item::after { display: none !important; }
  .ny-blog-head h2::after { transform: translateX(-50%) scaleX(1) !important; }
  .hero-content .btn-glow::after { display: none !important; }
  .hbp-card,
  .hbp-media-img,
  .ny-trust-ico,
  .ny-trust-txt b { transition: none !important; }
}

/* ============================================================
   13. WHITE LIGHT SURFACES
       Flat #fff over a full page reads harsh. These tokens are a
       "light in white" palette instead: a barely-there cool tint,
       a soft top-light gradient on cards, gentler borders and a
       lighter shadow. Everything is scoped to the home page, so no
       other page in the store is affected.
   ============================================================ */
body[data-page="home"] {
  --wl-page-a:   #F2F7FD;
  --wl-page-b:   #FBFDFF;
  --wl-card-a:   #FCFEFF;
  --wl-card-b:   #EFF6FD;
  --wl-line:     #DBE8F6;
  --wl-line-2:   #E7F0FA;
  --wl-shadow:   0 18px 46px rgba(13, 44, 82, .11);
  --wl-shadow-2: 0 10px 28px rgba(13, 44, 82, .07);
}

/* the page itself gets a very slow vertical wash instead of a flat fill */
body[data-page="home"] {
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(255, 255, 255, .95), transparent 62%),
    linear-gradient(180deg, var(--wl-page-b) 0%, var(--wl-page-a) 38%, var(--wl-page-a) 100%);
  background-attachment: fixed;
}

/* ---- cards ---- */
body[data-page="home"] .ny-trust-item,
body[data-page="home"] .hbp-card {
  background: linear-gradient(180deg, var(--wl-card-a) 0%, var(--wl-card-b) 100%);
  border-color: var(--wl-line);
}
body[data-page="home"] .hbp-card { box-shadow: var(--wl-shadow-2); }
body[data-page="home"] .hbp-card:hover {
  box-shadow: var(--wl-shadow);
  border-color: rgba(15, 181, 165, .45);
}
body[data-page="home"] .ny-trust-inner { border-color: var(--wl-line); }

/* ---- the two big section panels ---- */
body[data-page="home"] .ny-blog {
  background:
    radial-gradient(760px 300px at 50% 0%, rgba(255, 255, 255, .92), transparent 66%),
    linear-gradient(180deg, #F7FBFF 0%, #EFF6FD 100%);
  border-top-color: var(--wl-line);
}
/* the featured block carries an inline background, so it needs !important */
body[data-page="home"] .featured-section {
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(255, 255, 255, .90), transparent 64%),
    linear-gradient(180deg, #F8FCFF 0%, #EEF5FD 100%) !important;
}
body[data-page="home"] .section-with-sidebars {
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(255, 255, 255, .90), transparent 64%),
    linear-gradient(180deg, #F8FCFF 0%, #EEF5FD 100%) !important;
}

/* ---- the "Shop by Category" card and the light product rails ---- */
body[data-page="home"] .cat-head-box,
body[data-page="home"] .section-head-box {
  background: linear-gradient(180deg, var(--wl-card-a) 0%, var(--wl-card-b) 100%);
  border-color: var(--wl-line);
  box-shadow: var(--wl-shadow-2);
}
body[data-page="home"] .product-card {
  background: linear-gradient(180deg, var(--wl-card-a) 0%, var(--wl-card-b) 100%);
  border-color: var(--wl-line);
}
body[data-page="home"] .product-card:hover { box-shadow: var(--wl-shadow); }

/* ---- empty placeholders, so they do not read as holes ---- */
body[data-page="home"] .cat-grid.loading,
body[data-page="home"] .hbp-media,
body[data-page="home"] .hbp-media.is-blank {
  background: linear-gradient(135deg, #EDF4FC 0%, #F8FCFF 100%);
}

/* ---- soften the navy side panels to match ---- */
body[data-page="home"] .ny-brand-box {
  background: linear-gradient(160deg, #0D1B33 0%, #1A2B4E 100%);
}

/* text stays on the dark ink, so contrast is unchanged */
@media (max-width: 720px) {
  body[data-page="home"] { background-attachment: scroll; }
}

/* ============================================================
   14. FEATURED CARDS - mouse driven motion
       --mx / --my are written by home-anim.js on mousemove, so the
       glow follows the cursor. Everything else is pure CSS hover.
   ============================================================ */
body[data-page="home"] .js-featured-grid .product-card {
  transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth),
              border-color .3s ease;
  will-change: transform;
}
/* cursor halo - generated first so it paints under the card content */
body[data-page="home"] .js-featured-grid .product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(56, 152, 235, .17), rgba(15, 181, 165, .09) 42%, transparent 66%);
  opacity: 0;
  transition: opacity .32s ease;
  pointer-events: none;
}
body[data-page="home"] .js-featured-grid .product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 152, 235, .40);
  box-shadow: 0 22px 48px rgba(13, 44, 82, .15);
}
body[data-page="home"] .js-featured-grid .product-card:hover::before { opacity: 1; }

/* a soft blue ring that draws in on hover */
body[data-page="home"] .js-featured-grid .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(56, 152, 235, .55);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .3s ease, transform .3s var(--ease-smooth);
  pointer-events: none;
}
body[data-page="home"] .js-featured-grid .product-card:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* image lifts and zooms a touch */
body[data-page="home"] .js-featured-grid .product-img img {
  transition: transform .45s var(--ease-smooth);
  will-change: transform;
}
body[data-page="home"] .js-featured-grid .product-card:hover .product-img img {
  transform: scale(1.07);
}
/* the image well gets its own blue wash */
body[data-page="home"] .js-featured-grid .product-img-col {
  background: linear-gradient(180deg, #F4F9FE 0%, #EAF3FC 100%);
  transition: background .3s ease;
}
body[data-page="home"] .js-featured-grid .product-card:hover .product-img-col {
  background: linear-gradient(180deg, #F8FCFF 0%, #E4F0FC 100%);
}

/* wishlist heart: nudge, and pop when it is already saved */
body[data-page="home"] .js-featured-grid .wish-btn {
  transition: transform .26s var(--ease-bounce), background .26s ease, color .26s ease;
}
body[data-page="home"] .js-featured-grid .product-card:hover .wish-btn {
  transform: scale(1.14) rotate(-8deg);
}
body[data-page="home"] .js-featured-grid .wish-btn.active {
  animation: nyPop .42s var(--ease-bounce) both;
}
@keyframes nyPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* quick view slides in from the side instead of sitting there */
body[data-page="home"] .js-featured-grid .quickview-btn {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .26s ease, transform .26s var(--ease-smooth);
}
body[data-page="home"] .js-featured-grid .product-card:hover .quickview-btn,
body[data-page="home"] .js-featured-grid .quickview-btn:focus-visible {
  opacity: 1;
  transform: translateX(0);
}

/* discount and NEW tags lift apart on hover */
body[data-page="home"] .js-featured-grid .img-discount-tag,
body[data-page="home"] .js-featured-grid .img-new {
  transition: transform .3s var(--ease-smooth), box-shadow .3s ease;
}
body[data-page="home"] .js-featured-grid .product-card:hover .img-discount-tag {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 18px rgba(220, 38, 38, .28);
}
body[data-page="home"] .js-featured-grid .product-card:hover .img-new {
  transform: translateY(-3px) scale(1.04);
}

/* price row: the live price warms up, the struck one fades back */
body[data-page="home"] .js-featured-grid .price-now {
  transition: color .26s ease, transform .26s var(--ease-smooth);
}
body[data-page="home"] .js-featured-grid .product-card:hover .price-now {
  color: #0B7F76;
  transform: translateY(-1px);
}
body[data-page="home"] .js-featured-grid .price-old {
  transition: opacity .26s ease;
}
body[data-page="home"] .js-featured-grid .product-card:hover .price-old { opacity: .6; }

/* add to cart gets a shine sweep and a small press */
body[data-page="home"] .js-featured-grid .btn-cart {
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease-smooth), box-shadow .28s ease;
}
body[data-page="home"] .js-featured-grid .product-card:hover .btn-cart {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 181, 165, .30);
}
body[data-page="home"] .js-featured-grid .btn-cart::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}
body[data-page="home"] .js-featured-grid .product-card:hover .btn-cart::after {
  animation: nyShine .8s var(--ease-smooth) both;
}
body[data-page="home"] .js-featured-grid .btn-cart:active { transform: translateY(0) scale(.98); }

/* ============================================================
   15. MORE MOTION ELSEWHERE
   ============================================================ */
/* category circles: a blue halo blooms on hover */
body[data-page="home"] .cat-card-circle {
  transition: transform .28s var(--ease-bounce), box-shadow .28s ease, border-color .28s ease;
}
body[data-page="home"] .cat-card:hover .cat-card-circle {
  transform: translateY(-5px) scale(1.07);
  border-color: #3898EB;

  box-shadow: 0 14px 30px rgba(56, 152, 235, .22);
}

/* the category label turns teal, and the arrow in the blog CTA slides */
body[data-page="home"] .cat-card-label span { transition: color .22s ease; }
body[data-page="home"] .cat-card:hover .cat-card-label span { color: #0B7F76; }

body[data-page="home"] .ny-blog-cta .btn,
body[data-page="home"] .featured-section .text-center .btn { transition: transform .24s var(--ease-smooth), box-shadow .24s ease; }
body[data-page="home"] .ny-blog-cta .btn:hover,
body[data-page="home"] .featured-section .text-center .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(13, 44, 82, .18);
}

/* trust bar items get a blue wash on hover, not just grey */
body[data-page="home"] .ny-trust-item:hover {
  background: linear-gradient(180deg, #FDFFFF 0%, #EAF3FD 100%);
}

/* blog card media gets a blue zoom on hover */
body[data-page="home"] .hbp-media-img { transition: transform .45s var(--ease-smooth); }
body[data-page="home"] .hbp-card:hover .hbp-media-img { transform: scale(1.07); }
body[data-page="home"] .hbp-media {
  background: linear-gradient(135deg, #EDF4FC 0%, #F8FCFF 100%);
}

/* ============================================================
   16. REDUCED MOTION - added last so it wins over the !important
       timing rules further up.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .js-featured-grid .product-card,
  body[data-page="home"] .js-featured-grid .product-card::before,
  body[data-page="home"] .js-featured-grid .product-card::after,
  body[data-page="home"] .js-featured-grid .product-img img,
  body[data-page="home"] .js-featured-grid .quickview-btn,
  body[data-page="home"] .js-featured-grid .wish-btn,
  body[data-page="home"] .js-featured-grid .img-discount-tag,
  body[data-page="home"] .js-featured-grid .img-new,
  body[data-page="home"] .js-featured-grid .price-now,
  body[data-page="home"] .js-featured-grid .price-old,
  body[data-page="home"] .js-featured-grid .btn-cart,
  body[data-page="home"] .js-featured-grid .btn-cart::after,
  body[data-page="home"] .cat-card-circle,
  body[data-page="home"] .hbp-media-img {
    animation: none !important;
    transition: none !important;
  }
  body[data-page="home"] .js-featured-grid .quickview-btn {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   17. CONTRAST PASS FOR THE BLUE TINT
       The bluer card (#EFF6FD) is a little darker than the neutral
       white it replaced, which pushed the small grey text below the
       4.5:1 that WCAG wants under 18.66px. Each of these is one step
       darker than before; the tone stays the same, just readable.
   ============================================================ */
body[data-page="home"] .hbp-excerpt,
body[data-page="home"] .hbp-meta,
body[data-page="home"] .ny-trust-txt span { color: #5A6678; }
body[data-page="home"] .hbp-more { color: #0A6E66; }
body[data-page="home"] .js-featured-grid .card-desc { color: #5F6A7A; }
body[data-page="home"] .section-sub { color: #5A6478; }
body[data-page="home"] .hbp-card:hover .hbp-more { color: #085E57; }