/* ══════════════════════════════════════════════════════════════════════
   YARRA EXPORTS — DESIGN SYSTEM
   Loaded after styles.css and is the authority on how the site looks.
   styles.css is kept for layout and structure only.

   The brief: get away from a templated look. Four things were doing the
   damage, and this file fixes each of them.

     1. Three typefaces (Cormorant, Cinzel, Jost) fighting each other.
        Now two: one grotesque carries both headlines and text, separated
        by weight, and a mono carries trade data — codes, pack sizes,
        pallet counts. The mono is the point of difference: this is an
        export catalogue, and the specs should read like specs.

     2. Decoration standing in for design — 29 shadows, 63 radii, 18
        gradients. Replaced with hairline rules and flat planes. Nothing
        floats.

     3. Everything centred. The hero and section headers are left-aligned
        against a real measure now, which is what makes a page look set
        rather than generated.

     4. Emoji as iconography. Gone.

   Delete this file and remove its <link> to return to the previous look.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Brand navy, used as the authority colour. */
  --ink:        #12263F;
  --ink-2:      #1B3557;
  --ink-3:      #26456B;

  /* Cool neutrals. The warm paper read as magazine stock. */
  --paper:      #FBFBFC;
  --paper-2:    #F1F3F5;
  --paper-3:    #E4E8EC;

  --brass:      #A8813C;   /* accent, used sparingly and small */
  --brass-lift: #C9A961;

  --text:       #10203A;
  --text-mid:   #4A5568;
  --text-mute:  #7C8798;

  --rule:       rgba(18, 38, 63, 0.16);
  --rule-soft:  rgba(18, 38, 63, 0.09);
  --rule-dark:  rgba(255, 255, 255, 0.14);

  /* Remap the legacy names so old rules inherit the new palette. */
  --navy: var(--ink);
  --navy-deep: var(--ink);
  --navy-mid: var(--ink-3);
  --gold: var(--brass);
  --gold-light: var(--brass-lift);
  --gold-border: rgba(168, 129, 60, 0.30);
  --white: #FFFFFF;
  --off-white: var(--paper);
  --warm-white: var(--paper);
  --cream: var(--paper-2);
  --light-grey: var(--paper-2);
  --border: var(--rule);
  --hairline: var(--rule-soft);
  --dark: var(--text);
  --mid: var(--text-mid);
  --muted: var(--text-mute);
  --terracotta: var(--brass);

  /* Nothing floats. */
  --shadow: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --radius: 2px;
  --radius-sm: 2px;

  /* Headlines are set in the same grotesque as everything else, separated
     by weight and size rather than by a second typeface. Two faces total. */
  --sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: var(--sans);
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --measure: 62ch;
  --gutter: clamp(22px, 5vw, 72px);
}

/* ── 2. Base ───────────────────────────────────────────────────────── */
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-shadow: none !important; }

/* One display face, set tight. Tight tracking on large type is most of
   what separates set type from default type. */
h1, h2, h3,
.hero-full-title,
.section-title,
.heading-lg,
.pdl-name,
.prod-name,
.pp-hero-info h1,
.pp-index-head h1,
.pp-related h2,
.enq-title,
.form-success-title,
.chat-head-name {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.14;
  color: var(--text);
}

/* Headline emphasis was a gold italic, which read decorative. It is now
   just a weight and colour shift within the same line. */
em { font-style: normal; font-weight: 600; color: var(--ink-3); }

p { color: var(--text-mid); }

/* Small caps labels: mono, tight, no wide tracking. The old 2px tracking
   on every uppercase label was a template tic. */
.eyebrow,
.section-eyebrow,
.featured-card-brand,
.prod-brand,
.prod-cat-tag,
.cat-card-count,
.products-count,
.pdl-num,
.pdl-cat-tag,
.pdl-meta-label,
.pp-cat,
.pp-brand,
.footer-col-title,
.pp-footer-title,
.contact-item-label,
.chat-head-status {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Trade data reads as data. */
.prod-code, .prod-pack, .featured-card-pack,
.pdl-meta-value, .pdl-nutrition-row span,
.pp-spec th, .pp-spec td, .filter-count,
.hero-full-stat-num, .pp-index-list span {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ── 3. Section headers: left-aligned, ruled ───────────────────────── */
.section-eyebrow,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.section-eyebrow::before { width: 26px; background: var(--brass); }

.categories-header,
.featured-header { text-align: left; }
.categories-header .section-eyebrow { justify-content: flex-start !important; }

.section-title,
.heading-lg {
  font-size: clamp(25px, 2.7vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.16;
  max-width: 24ch;
}

.section-body { max-width: var(--measure); font-size: 16px; line-height: 1.65; }

/* ── 4. Navigation ─────────────────────────────────────────────────── */
.nav {
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--rule-soft);
  padding: 0 var(--gutter);
}
.nav.scrolled { border-bottom-color: var(--rule); }

.nav-links a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mid);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active { text-decoration: underline; text-underline-offset: 6px;
                      text-decoration-thickness: 1px; text-decoration-color: var(--brass); }

.nav-cta {
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 11px 20px;
  border: 1px solid var(--ink);
}
.nav-cta:hover { background: transparent; color: var(--ink); }

.lang-btn {
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
}

/* ── 5. Hero: asymmetric, type-led ─────────────────────────────────── */
.hero-full { background: var(--ink); }
.hero-full-bg { opacity: 0.5; }

.hero-full-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: left;
  align-items: flex-start;
}

/* The logo already sits in the nav. Repeating it in a white card in the
   middle of the hero was the most templated thing on the page. */
.hero-logo-img { display: none; }

.hero-full-eyebrow {
  border: none;
  background: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brass-lift);
}
.hero-tag-dot { display: none; }

.hero-full-title {
  font-family: var(--display);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: #fff;
  max-width: 17ch;
  margin-bottom: 22px;
}
.hero-full-title span { display: block; }
.hero-title-gold { color: rgba(255, 255, 255, 0.62); font-style: normal; }

.hero-full-sub {
  max-width: 54ch;
  margin: 0 0 34px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.hero-full-btns { justify-content: flex-start; gap: 12px; }

/* Stats become a ruled data row, not three centred cards. */
.hero-full-stats {
  justify-content: flex-start;
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid var(--rule-dark);
  padding-top: 22px;
  width: 100%;
  max-width: 640px;
}
.hero-full-stat { flex: 1; text-align: left; }
.hero-full-stat-divider { display: none; }
.hero-full-stat-num {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.hero-full-stat-num span { color: var(--brass-lift); }
.hero-full-stat-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(252, 251, 248, 0.5);
  margin-top: 4px;
}

/* ── 6. Buttons ────────────────────────────────────────────────────── */
.btn-primary,
.btn-outline-white,
.form-submit,
.export-cta .btn-primary,
.pp-actions .btn-primary {
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 13px 24px;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.btn-primary {
  background: var(--brass);
  border: 1px solid var(--brass);
  color: #fff;
}
.btn-primary:hover { background: transparent; color: var(--brass-lift); }

.btn-outline-white {
  background: transparent;
  border: 1px solid rgba(252, 251, 248, 0.32);
  color: var(--paper);
}
.btn-outline-white:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ── 7. Brand strip ────────────────────────────────────────────────── */
.marquee-wrap {
  background: var(--paper);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.marquee-item {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--text-mute);
}
.marquee-dot { background: var(--rule); }

/* ── 8. Cards: flat, ruled ─────────────────────────────────────────── */
.featured-card,
.prod-card,
.export-card,
.cat-card,
.pp-rel-card {
  border-radius: 2px;
  border: 1px solid var(--rule-soft);
  background: #fff;
  transition: border-color 0.18s, transform 0.18s;
}
.featured-card:hover,
.prod-card:hover,
.cat-card:hover,
.pp-rel-card:hover {
  transform: none;
  border-color: var(--brass);
}

.featured-img-wrap,
.prod-img-wrap { background: var(--paper-2); border-bottom: 1px solid var(--rule-soft); }

.prod-name, .featured-card-name {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.prod-desc {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-mid);
}

.prod-cat-tag {
  background: rgba(252, 251, 248, 0.94);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
}

.prod-code::before { content: ''; margin: 0; }
.prod-meta-line { gap: 12px; }

.prod-footer { border-top: 1px solid var(--rule-soft); }
.prod-enquire {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--brass);
}

/* ── 9. Category tiles ─────────────────────────────────────────────── */
.categories-section { background: var(--paper); padding-left: var(--gutter); padding-right: var(--gutter); }
.cat-media { background: var(--ink) !important; border-bottom: none; margin-bottom: 0; }
.cat-card { padding-bottom: 0; }
.cat-card-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
  padding: 16px 16px 2px;
  margin: 0;
}
.cat-card:hover .cat-card-title { color: var(--brass); }
.cat-card-count { padding: 0 16px 16px; }
.cat-card-custom .cat-media { background: var(--paper-2) !important; }

/* ── 10. Product filters: rules, not pills, and no emoji ───────────── */
.products-filter { background: var(--paper); padding-left: var(--gutter); padding-right: var(--gutter); }
.products-filter.cat-filter { border-bottom: 1px solid var(--rule); }

.filter-btn {
  border: none;
  border-radius: 0;
  background: none;
  padding: 8px 0;
  margin-right: 26px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-mute);
  border-bottom: 1px solid transparent;
}
.filter-btn:hover { color: var(--text); border-color: var(--rule); }
.filter-btn.active,
.filter-btn.range-btn.active {
  background: none;
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--brass);
}

.filter-btn.range-btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  padding: 7px 0;
  margin-right: 28px;
  color: var(--text-mute);
}
.filter-btn.range-btn:hover { color: var(--text); }

.filter-count {
  background: none;
  padding: 0;
  min-width: 0;
  font-size: 10.5px;
  color: var(--text-mute);
}
.filter-btn.active .filter-count { color: var(--brass); }

.products-count { padding-left: var(--gutter); padding-right: var(--gutter); }
.products-grid { padding-left: var(--gutter); padding-right: var(--gutter); gap: 1px; background: var(--rule-soft); }
.products-grid .prod-card { border: none; }

/* ── 11. Page headers ──────────────────────────────────────────────── */
.page-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 132px var(--gutter) 56px;
}
/* The giant ghost word behind each page header was pure decoration. */
.page-hero::after { display: none; }

/* ── 12. Detail modal ──────────────────────────────────────────────── */
.pdl-modal { border-radius: 2px; }
.pdl-image-panel { background: var(--paper-2); }
.pdl-info { background: var(--ink); }
.pdl-name { color: #fff; font-size: 23px; font-weight: 600; line-height: 1.25; }
.pdl-meta-item, .pdl-nutrition { border-radius: 2px; }
.pdl-order-btn, .pdl-back-btn { border-radius: 2px; letter-spacing: 0; text-transform: none; }

/* ── 13. Export info & FAQ ─────────────────────────────────────────── */
.export-info { background: var(--paper-2); padding-left: var(--gutter); padding-right: var(--gutter); }
.export-card { background: var(--paper); }
.export-card h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--brass); }
.export-card p, .faq-item p { font-family: var(--sans); font-weight: 400; }
.faq-item summary { font-family: var(--sans); font-size: 15.5px; font-weight: 500; }

/* ── 14. Chat ──────────────────────────────────────────────────────── */
.chat-launcher { border-radius: 2px; background: var(--ink); font-family: var(--sans); letter-spacing: 0; }
.chat-panel { border-radius: 2px; border-color: var(--rule); }
.chat-head { background: var(--ink); }
.chat-head-name { font-family: var(--sans); font-size: 14px; letter-spacing: 0; }
.chat-avatar { border-radius: 2px; font-family: var(--mono); background: var(--brass); }
.chat-msg, .chat-sug, .chat-cta, .chat-prod, .chat-send { border-radius: 2px; font-family: var(--sans); }
.chat-send { background: var(--ink); }
.chat-user { background: var(--ink); }
.chat-badge { border-radius: 2px; background: var(--brass); color: #fff; font-family: var(--mono); }

/* ── 15. Forms ─────────────────────────────────────────────────────── */
input, textarea, select {
  border-radius: 2px !important;
  font-family: var(--sans) !important;
}
.form-group label, .contact-item-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* ── 16. Footer ────────────────────────────────────────────────────── */
.footer, .pp-footer { background: var(--ink); }
.footer-col-title, .pp-footer-title { color: var(--brass-lift); }

/* ── 17. Product landing pages ─────────────────────────────────────── */
.pp-main { padding-left: var(--gutter); padding-right: var(--gutter); }
.pp-hero-media { background: var(--paper-2); border-radius: 2px; border-color: var(--rule-soft); }
.pp-hero-info h1 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; line-height: 1.2; }
.pp-cat { border-radius: 2px; }
.pp-spec th { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.pp-related { background: var(--paper-2); padding-left: var(--gutter); padding-right: var(--gutter); }
.pp-rel-name { font-family: var(--sans); font-weight: 500; }
.pp-index-group h2 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }
.pp-index-count { background: none; font-family: var(--mono); }

/* ── 18. Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-full-title { font-size: clamp(28px, 7.4vw, 40px); }
  .hero-full-stats { margin-top: 40px; }
  .hero-full-stat-num { font-size: 21px; }
  .page-hero { padding-top: 108px; }
  .filter-btn { margin-right: 20px; }
}

/* ── 19. Logo ──────────────────────────────────────────────────────────
   The logo file carries a white background, which read as a white card
   floating on the paper nav. Multiply drops the white into the page
   without touching the navy and brass in the mark itself. Only applied on
   light surfaces - the footer logo sits on ink and must stay as-is. */
.nav-logo img { mix-blend-mode: multiply; }

/* Nav breathing room now that the type is smaller and tighter. */
.nav-logo img { height: 44px !important; }
.nav-links { gap: 30px; }

/* On a phone the mark is the only branding above the fold, and at 44px the
   YARRA wordmark beneath the monogram is too small to read. The nav has the
   room: the hamburger and the language pill are both shorter than this.
   The product-page selector is repeated so it beats the 40px rule in
   styles.css, which is more specific than a bare .nav-logo img. */
@media (max-width: 640px) {
  .nav-logo img,
  body.product-page .nav-logo img { height: 64px !important; }
}

/* Was an inline style naming a font we no longer load. */
.contact-form-title {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  margin-bottom: 24px;
}

/* ── 20. Chat launcher on dark sections ───────────────────────────────
   The launcher is ink, and so is the hero, so it vanished against it.
   A hairline keeps it readable on both grounds without adding a shadow. */
.chat-launcher {
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.chat-launcher:hover {
  border-color: var(--brass);
  background: var(--ink-2);
}

/* ── 21. Headline emphasis ────────────────────────────────────────────
   .section-title em was still italic brass at a higher specificity than
   the base em rule. Emphasis inside a headline is now a colour step in
   the same weight and upright — the italic gold read as a magazine
   pull-quote rather than a trade headline. */
.section-title em,
.heading-lg em,
.hero-full-title em,
.pp-hero-info h1 em,
.pp-index-head h1 em,
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-3);
}

/* ══════════════════════════════════════════════════════════════════════
   22. Two defects found in QA
   ══════════════════════════════════════════════════════════════════════ */

/* The footer logo carried an inline filter left over from the original
   site: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(5deg).
   brightness(0) crushes the image to solid black and invert(1) makes it
   solid white, so the tint that follows painted the whole square one
   flat colour — the logo was a pale green block, not a logo.

   The file has a white background rather than transparency, so on the
   navy footer it sits on a paper plate, the same way it does in the
   nav. Deliberate, and the mark stays legible. */
.footer-logo,
.pp-footer-inner img {
  filter: none;
  opacity: 1;
  display: block;
  height: 64px;
  width: auto;
  padding: 8px 10px;
  margin-bottom: 18px;
  background: var(--paper);
  border-radius: 2px;
}

/* "View Full Catalogue" used .btn-secondary, which no stylesheet ever
   targeted — it was rendering as an unstyled browser button next to a
   fully styled primary. It is the light-background counterpart to
   .btn-outline-white, which only works on dark sections. */
.btn-secondary {
  display: inline-block;
  padding: 13px 24px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  -webkit-appearance: none;
}

.btn-secondary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn-secondary:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* The call-to-action card kept a 32px radius from the old rounded style,
   against a system that is otherwise 2px. */
.home-cta-inner {
  border-radius: 2px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
}

/* Contact and success icons are line art now, not emoji. */
.contact-item-icon,
.form-success-icon {
  display: grid;
  place-items: center;
  color: var(--brass);
  background: none;
  font-size: 0;            /* kills any stray text node spacing */
}
.contact-item-icon svg { width: 21px; height: 21px; }
.form-success-icon svg  { width: 40px; height: 40px; margin: 0 auto 14px; }

/* Components that kept their original soft radii — 16px to 24px against a
   system that is 2px everywhere else. Genuinely circular things
   (marquee dots, the close buttons, the status dot) keep their 50%. */
.contact-item,
.value-card,
.lang-dropdown,
.contact-form,
.enq-modal,
.filter-count {
  border-radius: 2px;
}

/* The featured card's "Enquire" bar is absolutely positioned at the bottom
   and slides up on hover. The card body only reserved 28px for it, which was
   enough when the card showed a single line of meta — it now shows pack size
   and product code, and the bar covered them. Reserve the bar's real height,
   and set it in the system's type rather than 2px-tracked uppercase. */
.featured-card-body { padding-bottom: 46px; }

.featured-card-btn {
  padding: 13px 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: var(--ink);
  color: #fff;
}

.featured-card:hover .featured-card-btn { background: var(--brass); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   23. Hover zoom on product images
   The Alibaba pattern: a lens follows the cursor over the product image
   and a magnified panel opens alongside. js/zoom.js caps the
   magnification at each image's own resolution.
   ══════════════════════════════════════════════════════════════════════ */

/* A magnifying-glass cursor over any zoomable image. */
.pdl-image-panel,
.pp-hero-media {
  cursor: zoom-in;
}

.pdl-image-panel.zooming img,
.pp-hero-media.zooming img {
  /* The lens is doing the work now; keep the source steady underneath. */
  transform: none;
}

/* The lens square that tracks the cursor. */
.zoom-lens {
  position: fixed;
  z-index: 3100;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(18, 38, 63, 0.14);
  box-shadow: 0 0 0 1px rgba(18, 38, 63, 0.35) inset;
  opacity: 0;
  transition: opacity 0.12s;
}

.zoom-lens.on { opacity: 1; }

/* The magnified panel. */
.zoom-pane {
  position: fixed;
  z-index: 3100;
  pointer-events: none;
  background-color: var(--paper);
  background-repeat: no-repeat;
  border: 1px solid var(--rule);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.14s;
}

.zoom-pane.on { opacity: 1; }

/* No hover on touch, so js/zoom.js never runs there — but make sure the
   cursor hint does not appear either. */
@media (hover: none) {
  .pdl-image-panel, .pp-hero-media { cursor: default; }
}

/* ══════════════════════════════════════════════════════════════════════
   24. Product card hover
   The description brief turns blue when the mouse is over the card, so it
   is obvious the whole card is one clickable target. Uses the brand's
   mid navy rather than a browser blue, so it stays on-palette.
   ══════════════════════════════════════════════════════════════════════ */

.prod-desc { transition: color 0.18s ease; }

.prod-card:hover .prod-desc,
.prod-card:focus-within .prod-desc {
  color: #1D4ED8;
}