/* ==========================================================================
   Fire & Dine — site refinements
   Consolidated from the legacy homepage-refinements, mobile-header-fix,
   global-button-consistency, search-popup-refinement and whatsapp-icons
   stylesheets, which were previously loaded as four separate patch files.
   ========================================================================== */

/* --- homepage-refinements ------------------------------------------------------------ */
/* Homepage full-bleed facts section. */
.featured-section .product {
  border: 1px solid transparent !important;
  background: var(--fds-color-dark, #111) !important;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}

.featured-section .product:hover,
.featured-section .product:focus-within {
  border-color: var(--fds-color-gold, var(--gold2)) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(17, 17, 17, 0.2);
}

.featured-section .product-info {
  background: var(--fds-color-dark, #111) !important;
}

.featured-section .product-info h3,
.featured-section .product-info .spec {
  color: #fff !important;
}

.featured-section .product-info .price,
.featured-section .product-info .eyebrow {
  color: var(--fds-color-gold, var(--gold2)) !important;
}

.featured-section .fd-product-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
  margin-top: auto !important;
  padding-top: 16px;
}

.featured-section .fd-product-actions .btn {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding-inline: 12px !important;
  color: #fff !important;
  background: var(--fds-color-dark-soft, #1d1b18) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.featured-section .fd-product-actions .btn:hover,
.featured-section .fd-product-actions .btn:focus-visible {
  color: var(--fds-color-gold, var(--gold2)) !important;
  background: var(--fds-color-dark-soft, #1d1b18) !important;
  border-color: var(--fds-color-gold, var(--gold2)) !important;
}

.featured-section .product-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--fds-color-gold, var(--gold2));
  background: #242424;
  text-align: center;
}

.featured-section .featured-products-fallback {
  grid-column: 1 / -1;
  text-align: center;
}

.featured-section .featured-products-fallback .btn {
  margin-top: 16px;
}

@media (max-width: 430px) {
  .featured-section .fd-product-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-section .product {
    transition: border-color 180ms ease !important;
  }

  .featured-section .product:hover,
  .featured-section .product:focus-within {
    transform: none;
  }
}

.fd-facts.fd-facts-fullbleed {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #fff !important;
  color: #171717;
}
.fd-facts-fullbleed .fd-family-layout {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.fd-facts-fullbleed .fd-family-layout > img {
  width: 100%;
  height: 100%;
  min-height: 660px;
  object-fit: cover;
  object-position: center center;
}
.fd-facts-fullbleed .fd-family-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(46px, 5vw, 88px);
  background: #fff;
  color: #171717;
}
.fd-facts-fullbleed .section-head {
  width: 100%;
  max-width: 900px;
  margin: 0 0 34px;
  text-align: left;
}
.fd-facts-fullbleed .section-head .eyebrow {
  justify-content: flex-start;
}
.fd-facts-fullbleed .section-head h2 {
  margin-bottom: 18px;
  color: #111 !important;
  font-size: clamp(48px, 4.3vw, 76px);
  line-height: 0.98;
}
.fd-facts-fullbleed .section-head p {
  max-width: 860px;
  margin: 0;
  color: #555 !important;
  font-size: 15px;
  line-height: 1.65;
}
.fd-facts-fullbleed .fact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.fd-facts-fullbleed .fact-grid article {
  min-width: 0;
  min-height: 164px;
  padding: 24px 26px;
  justify-content: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(184, 102, 44, 0.28);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.045);
}
.fd-facts-fullbleed .fact-grid strong {
  max-width: 100%;
  color: #171717 !important;
  font-size: clamp(29px, 2.15vw, 42px);
  line-height: 1;
  overflow-wrap: anywhere;
  word-break: normal;
}
.fd-facts-fullbleed .fact-grid span {
  max-width: 100%;
  color: #555 !important;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Footer fix: the main site script rebuilds the footer after page load. */
.footer {
  padding-top: 56px !important;
}
/* footer.php renders four columns: .footer-brand, two bare .footer-col and
   .footer-col.footer-contact. There is no .footer-links, .footer-policies or
   .footer-connect element, so the two middle columns were landing in the right
   cells only by auto-placement, and the `connect` row was a permanently empty
   second row. The areas now match what the template actually emits. */
.footer .footer-grid {
  display: grid;
  grid-template-areas: "brand links policy contact";
  grid-template-columns:
    minmax(220px, 1.15fr) minmax(210px, 0.95fr) minmax(180px, 0.78fr)
    minmax(320px, 1.35fr) !important;
  grid-auto-rows: auto;
  align-items: start;
  row-gap: 0 !important;
}
.footer .footer-brand {
  grid-area: brand;
}
.footer .footer-col:nth-child(2) {
  grid-area: links;
}
.footer .footer-col:nth-child(3) {
  grid-area: policy;
}
.footer .footer-contact {
  grid-area: contact;
  border-right: 0 !important;
  padding-bottom: 0 !important;
}
.footer .footer-connect {
  grid-area: connect;
  border-right: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 24px !important;
}
.footer .footer-col {
  min-height: 0 !important;
  padding: 0 32px 24px !important;
}
.footer .footer-col:first-child {
  padding-left: 0 !important;
}
.footer .footer-col:last-child {
  padding-right: 0 !important;
}
.footer .footer-logo {
  margin-bottom: 0;
}
.footer i {
  color: var(--gold2) !important;
}
.footer .footer-links a {
  margin: 0 !important;
  padding: 9px 8px 9px 32px !important;
  line-height: 1.25;
}
.footer .footer-links a[href="/shop"] ~ a[href="/shop"] {
  display: none !important;
}
.footer .footer-connect h3 {
  margin: 0 0 12px !important;
}
.footer .footer-connect > p {
  margin: 0 0 14px !important;
}

.footer .footer-connect .social-placeholder {
  width: 42px;
  height: 42px;
  font-size: 17px;
  color: var(--gold2) !important;
}
.footer .footer-connect .social-placeholder:after,
.footer .footer-connect .social-divider {
  display: none !important;
}
.footer .copyright {
  margin-top: 14px;
}

/* Requested footer cleanup: remove grey dividers, reduce contact icon scale, and hide social copy. */
.footer .footer-col {
  border-right: 0 !important;
  border-bottom: 0 !important;
}
.footer .brand-divider,
.footer .social-divider {
  display: none !important;
}
.footer .footer-links a,
.footer .footer-policies a {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.footer .footer-policies a {
  margin: 0 !important;
  padding: 9px 8px 9px 32px !important;
  line-height: 1.25;
}
.footer .footer-contact > p,
.footer .footer-contact > a {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}
.footer .footer-contact i {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  flex: 0 0 28px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(229, 188, 112, 0.7) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  color: var(--gold2) !important;
}
.footer .footer-connect > p {
  display: none !important;
}
.footer .footer-connect {
  padding-top: 8px !important;
}
.footer .footer-connect .socials {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  margin: 0 !important;
}
.footer .footer-connect .social-placeholder {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border: 1px solid rgba(229, 188, 112, 0.7) !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
.footer .copyright {
  border-top: 0 !important;
}
.footer .copyright:before {
  display: none !important;
}

/* Keep social icons directly beneath Contact Us and remove the Stay Connected title.
   One row now the phantom `connect` row is gone; a 1fr second row was reserving
   space for a column the template never renders. */
.footer .footer-grid {
  grid-template-rows: auto !important;
}
.footer .footer-connect h3 {
  display: none !important;
}
.footer .footer-connect {
  padding-top: 2px !important;
}
.footer .footer-connect .socials {
  margin-top: 4px !important;
}

/* Tighten spacing between location, phone and email rows. */
.footer .footer-contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 3px !important;
}
.footer .footer-contact h3 {
  margin-bottom: 10px !important;
}
.footer .footer-contact > p,
.footer .footer-contact > a {
  padding: 4px 0 !important;
  min-height: 0 !important;
}

/* Customer stories heading only. */
.section:has(.quote-grid) .section-head h2 {
  color: #000 !important;
}

/* Range heading text on the dark-tone range section. Scoped to .section-dark for
   the same reason as the matching block in theme.css: the light-tone variant sits
   on the white body and must not be whitened. */
.range-overview.section-dark .section-head .eyebrow,
.range-overview.section-dark .section-head h2,
.range-overview.section-dark .section-head p {
  color: #fff !important;
}

@media (max-width: 1100px) {
  .fd-facts-fullbleed .fd-family-layout {
    grid-template-columns: 1fr;
  }
  .fd-facts-fullbleed .fd-family-layout > img {
    min-height: 480px;
    max-height: 620px;
  }
  .fd-facts-fullbleed .fd-family-copy {
    padding: 54px clamp(28px, 6vw, 64px) 64px;
  }
  .footer .footer-grid {
    grid-template-areas: "brand links" "policy contact";
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    row-gap: 0 !important;
  }
  .footer .footer-col {
    padding: 0 28px 24px !important;
  }
}
@media (max-width: 650px) {
  .fd-facts-fullbleed .fd-family-layout > img {
    min-height: 330px;
    max-height: 420px;
  }
  .fd-facts-fullbleed .fd-family-copy {
    padding: 44px 20px 50px;
  }
  .fd-facts-fullbleed .section-head {
    margin-bottom: 28px;
  }
  .fd-facts-fullbleed .section-head h2 {
    font-size: clamp(42px, 13vw, 60px);
  }
  .fd-facts-fullbleed .fact-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .fd-facts-fullbleed .fact-grid article {
    min-height: 0;
    padding: 22px;
  }
  .footer .footer-grid {
    grid-template-areas: "brand" "links" "policy" "contact";
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .footer .footer-col {
    padding: 0 0 26px !important;
    margin-bottom: 26px;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
  .footer .footer-contact {
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .footer .footer-connect {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .footer .footer-col:last-child {
    margin-bottom: 0;
    border-bottom: 0;
  }
}

/* Treat both homepage service rows as light/dark versions of one feature component. */
.service-showcase .service-panel-inner {
  max-width: 860px;
  padding-inline: clamp(28px, 3vw, 52px);
}

.service-showcase .service-features {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  align-items: stretch;
  padding-block: 6px 10px;
}

.service-showcase .service-features article {
  min-width: 0;
  padding: 8px clamp(14px, 1.15vw, 22px) 10px;
}

.service-showcase .service-features i {
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  font-size: 30px;
}

.service-showcase .service-features-dark i {
  font-size: 24px;
}

.service-showcase .service-features h3 {
  min-height: 2.4em;
  margin-bottom: 10px;
  font-size: clamp(16px, 1.2vw, 18px) !important;
  line-height: 1.25 !important;
  text-wrap: wrap;
  overflow-wrap: normal;
  word-break: normal;
}

.service-showcase .service-features p {
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .service-showcase .service-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 0;
  }

  .service-showcase .service-features article:nth-child(2) {
    border-right: 0;
  }

  .service-showcase .service-features article:nth-child(-n + 2) {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .service-showcase .service-features-dark article:nth-child(-n + 2) {
    border-bottom-color: rgba(255, 255, 255, 0.22);
  }
}

@media (max-width: 430px) {
  .service-showcase .service-features {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .service-showcase .service-features article,
  .service-showcase .service-features article:nth-child(2) {
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .service-showcase .service-features article:last-child {
    margin-bottom: 0;
    border-bottom: 0;
  }

  .service-showcase .service-features h3 {
    min-height: 0;
  }

  .service-showcase .service-features-dark article,
  .service-showcase .service-features-dark article:nth-child(2) {
    border-bottom-color: rgba(255, 255, 255, 0.22);
  }
}

/* Home hero composition.
   Selectors are deliberately specific so these values also win over the later
   global button layer and the eyebrow rules x3-tracking.js injects at runtime. */
html body main .home-hero .hero-copy {
  max-width: 1060px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

html body main .home-hero .hero-copy > .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  column-gap: 12px !important;
  width: fit-content !important;
  margin: 0 0 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--fds-color-gold, #fcbc4d) !important;
  -webkit-text-fill-color: var(--fds-color-gold, #fcbc4d) !important;
}

html body main .home-hero .hero-copy h1 {
  max-width: none !important;
  margin: 0 0 26px !important;
}

html body main .home-hero .hero-copy .hero-heading-line {
  display: block !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main .home-hero .hero-copy > p {
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

html body main .home-hero .hero-copy .actions {
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 34px !important;
}

html body main .home-hero .hero-copy .actions .btn {
  min-height: 46px !important;
  padding: 0 26px !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  letter-spacing: 0.11em !important;
}

html body main .home-hero .hero-copy .actions .btn-outline {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(10, 11, 11, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
}

html body main .home-hero .hero-copy .actions .btn-outline:hover,
html body main .home-hero .hero-copy .actions .btn-outline:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(10, 11, 11, 0.62) !important;
  border-color: #ffffff !important;
}

/* Below this width the authored line break stops fitting, so let the heading wrap. */
@media (max-width: 700px) {
  html body main .home-hero .hero-copy .hero-heading-line {
    white-space: normal !important;
  }

  html body main .home-hero .hero-copy > .eyebrow {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
  }

  html body main .home-hero .hero-copy > p {
    font-size: 16px !important;
  }
}

/* --- mobile-header-fix ------------------------------------------------------------ */
/* Mobile header repair: keep menu/search visible and make navigation fully closable. */
@media (max-width: 820px) {
  .header {
    overflow: visible !important;
  }

  .header > .shell {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 68px !important;
    padding: 0 !important;
    margin-inline: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .header .logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 150px !important;
    margin-right: auto !important;
  }

  .header .logo img {
    width: auto !important;
    max-width: 140px !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  /* header.php renders .header-search-btn inside .header-actions; the
     .header-search / .header-tools names this block was written against are not
     in the markup, so none of the touch-target sizing below ever applied. */
  .header .menu-btn,
  .header .header-search-btn {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  .header .header-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: max-content !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* This turns theme.css's right-hand fixed drawer into a full-width dropdown.
     `height`/`bottom` have to be reset with it: theme.css gives the drawer
     `height: 100dvh; bottom: 0`, and on an absolutely positioned box `height`
     beats `bottom`, so the panel stayed viewport-tall and painted ~500px of
     empty black below the six links. max-height only caps it, it cannot shrink
     an explicit height. */
  .header .nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 68px) !important;
    max-height: calc(100dvh - 68px) !important;
    overflow-y: auto !important;
    padding: 18px 20px 24px !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #0b0b0b !important;
    border-top: 1px solid rgba(252,188,77,.28) !important;
    border-bottom: 1px solid rgba(252,188,77,.28) !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.35) !important;
    z-index: 999 !important;
  }

  /* site.js toggles `is-open` on the nav itself. `fd-mobile-nav-open` is kept
     because it costs nothing and a cached copy of the old script may still set
     it, but `is-open` is the contract the shipped script actually uses. */
  .header .nav.is-open,
  .header.fd-mobile-nav-open .nav {
    display: flex !important;
  }

  .header .nav a {
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 4px !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .header .nav a:last-child {
    border-bottom: 0 !important;
  }

  body.fd-mobile-nav-lock {
    overflow: hidden !important;
  }
}

@media (max-width: 430px) {
  .header > .shell {
    width: calc(100% - 16px) !important;
    gap: 6px !important;
  }

  .header .logo {
    max-width: 132px !important;
  }

  .header .logo img {
    max-width: 126px !important;
  }

  .header .menu-btn,
  .header .header-search-btn {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .header .header-actions {
    gap: 4px !important;
  }
}

/* --- global-button-consistency ------------------------------------------------------------ */
/* Fire & Dine global button consistency layer.
   Keeps primary/secondary button hierarchy while standardizing dimensions,
   typography, borders, radius, spacing and interaction across the public site. */

:root {
  --fd-button-gold: #fcbc4d;
  --fd-button-gold-hover: #f5b33f;
  --fd-button-ink: #111111;
  --fd-button-light: #ffffff;
  --fd-button-height: 48px;
  --fd-button-radius: 2px;
  --fd-button-pad-x: 24px;
}

html body :is(
  a.btn,
  button.btn,
  input.btn,
  main button[type="submit"],
  main input[type="submit"]
) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--fd-button-height) !important;
  padding: 0 var(--fd-button-pad-x) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--fd-button-radius) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

/* Primary / gold CTAs */
html body :is(
  .btn-gold,
  .btn-primary,
  button.btn-gold,
  main button[type="submit"]:not(.btn-outline),
  main input[type="submit"]:not(.btn-outline)
) {
  background: var(--fd-button-gold) !important;
  background-image: none !important;
  border-color: var(--fd-button-gold) !important;
  color: var(--fd-button-ink) !important;
  -webkit-text-fill-color: var(--fd-button-ink) !important;
  box-shadow: none !important;
}

/* Secondary CTA source of truth: match the Compare Products outline treatment. */
html body :is(.btn-outline, .btn-secondary) {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--fd-button-gold) !important;
  border-radius: var(--fd-button-radius) !important;
  box-shadow: none !important;
}

/* On genuinely light content surfaces retain readable dark default text,
   while the border and hover treatment remain globally identical. */
html body :is(
  .section-light,
  .theme-light,
  .fd-alt-white,
  .cream
) :is(.btn-outline, .btn-secondary) {
  background: transparent !important;
  border-color: var(--fd-button-gold) !important;
  color: var(--fd-button-ink) !important;
  -webkit-text-fill-color: var(--fd-button-ink) !important;
}

/* Dark CTA/hero surfaces must win over any surrounding light-section wrapper. */
html body :is(
  .page-hero,
  .hero,
  .cta,
  .site-final-cta,
  .section-dark,
  .theme-dark,
  .footer
) :is(.btn-outline, .btn-secondary) {
  background: transparent !important;
  border-color: var(--fd-button-gold) !important;
  color: var(--fd-button-light) !important;
  -webkit-text-fill-color: var(--fd-button-light) !important;
}

/* The dark-card button treatment that used to live here has been removed.
   It was written for .featured-section, but its selectors matched every .btn in
   every .product — and .product is white (components.css), so "View product"
   was white text on a white card across /shop, /category/*, the range pages and
   the related-products row. It also outranked (0,3,3) the deliberate
   .featured-section .fd-product-actions .btn treatment above, which already
   handles the only genuinely dark product cards on the site. Everywhere else the
   default .btn-gold — gold ground, ink text — is readable as it stands. */

/* Keep button pairs visually balanced and aligned. */
html body :is(.actions, .btn-group, .form-actions, .centred-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

html body :is(.actions, .btn-group, .form-actions, .centred-actions) > :is(a.btn, button.btn, input.btn, button[type="submit"], input[type="submit"]) {
  margin: 0 !important;
}

/* Shop final CTA is the interaction source of truth.
   Apply its lift, shadow and timing only to CTA/hero action buttons, not forms,
   product controls, navigation or backend controls. */
html body :is(
  .cta,
  .site-final-cta,
  .image-cta,
  .faq-cta,
  .maintenance-cta,
  .confidence-section,
  .hero .actions,
  .page-hero .actions
) :is(a.btn, button.btn):is(:hover, :focus-visible) {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(252, 188, 77, .22) !important;
}

html body :is(
  .cta,
  .site-final-cta,
  .image-cta,
  .faq-cta,
  .maintenance-cta,
  .confidence-section,
  .hero .actions,
  .page-hero .actions
) :is(.btn-gold, .btn-primary):is(:hover, :focus-visible) {
  background: var(--fd-button-gold-hover) !important;
  border-color: var(--fd-button-gold-hover) !important;
}

/* Secondary CTA hover/focus retains the established Compare Products treatment. */
html body :is(
  .cta,
  .site-final-cta,
  .image-cta,
  .faq-cta,
  .maintenance-cta,
  .confidence-section,
  .hero .actions,
  .page-hero .actions
) :is(.btn-outline, .btn-secondary):is(:hover, :focus-visible) {
  background: var(--fd-button-gold) !important;
  background-image: none !important;
  border-color: var(--fd-button-gold) !important;
  color: var(--fd-button-light) !important;
  -webkit-text-fill-color: var(--fd-button-light) !important;
}

html body :is(
  .cta,
  .site-final-cta,
  .image-cta,
  .faq-cta,
  .maintenance-cta,
  .confidence-section,
  .hero .actions,
  .page-hero .actions
) :is(a.btn, button.btn):active {
  transform: translateY(0) !important;
}

html body :is(a.btn, button.btn, input.btn, main button[type="submit"], main input[type="submit"]):focus-visible {
  outline: 3px solid rgba(252, 188, 77, .38) !important;
  outline-offset: 3px !important;
}

/* Avoid legacy pseudo arrows/symbols changing button widths from page to page. */
html body :is(a.btn, button.btn, input.btn)::after {
  content: none !important;
}

/* About Us final CTA gap repair only. Button hover styling is now global above. */
html body:has(.about-hero) main > .site-final-cta {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Footer section headings: remove the legacy decorative diamond only.
   Footer link arrows and contact/social icons use separate selectors and remain unchanged. */
html body .footer.footer .footer-col > h3::before {
  content: none !important;
}

@media (max-width: 700px) {
  html body :is(.actions, .btn-group, .form-actions, .centred-actions) {
    align-items: stretch !important;
  }

  html body :is(.actions, .btn-group, .form-actions, .centred-actions) > :is(a.btn, button.btn, input.btn, button[type="submit"], input[type="submit"]) {
    width: 100% !important;
  }
}

/* --- search-popup-refinement ------------------------------------------------------------ */
/* Search popup refinement: widen only the product search column while preserving responsive behavior. */
.fd-search-dialog .fd-search-form {
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) minmax(360px, 2fr);
  column-gap: 16px;
  align-items: end;
}

.fd-search-dialog #fd-product-search {
  width: 100% !important;
  min-width: 280px !important;
}

.fd-search-dialog .fd-search-controls {
  min-width: 0;
}

@media (max-width: 760px) {
  .fd-search-dialog .fd-search-form {
    grid-template-columns: 1fr;
  }
  .fd-search-dialog #fd-product-search {
    min-width: 0 !important;
  }
}

/* --- whatsapp-icons ------------------------------------------------------------ */
a[href*="wa.me/"],
a[href*="api.whatsapp.com/"],
a[href^="whatsapp:"] {
  display: inline-flex;
  align-items: center;
}

a[href*="wa.me/"] > .fd-whatsapp-icon,
a[href*="api.whatsapp.com/"] > .fd-whatsapp-icon,
a[href^="whatsapp:"] > .fd-whatsapp-icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 1.05em;
  margin-right: .5em;
  color: inherit;
  fill: currentColor;
  pointer-events: none;
}

/* Shared positioning only. The scroll-to-top control keeps its own appearance and hover behavior. */
/* 140 places the stack above every in-page layer (the sticky shop filter is 90,
   the header 100) but below the search overlay at 150, so the buttons no longer
   float on top of the modal backdrop. See the layer scale in theme.css. */
.fd-floating-control-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 140;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.fd-floating-control-stack > .floating-whatsapp,
.fd-floating-control-stack > .site-scroll-top {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  pointer-events: auto;
}

/* Single visual source of truth for the standalone floating WhatsApp control. */
.fd-floating-control-stack > .floating-whatsapp {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #25d366 !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transform: none !important;
  translate: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
  -webkit-tap-highlight-color: transparent;
}

.fd-floating-control-stack > .floating-whatsapp::before,
.fd-floating-control-stack > .floating-whatsapp::after {
  content: none !important;
  display: none !important;
}

.fd-floating-control-stack > .floating-whatsapp > .fd-whatsapp-icon {
  display: block !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  fill: currentColor !important;
  transform: none !important;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .fd-floating-control-stack > .floating-whatsapp:hover {
    background: #22c95f !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 9px 22px rgba(0, 0, 0, .28) !important;
  }
}

.fd-floating-control-stack > .floating-whatsapp:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

@media (max-width: 600px) {
  .fd-floating-control-stack {
    right: 14px;
    bottom: 76px;
  }

  .fd-floating-control-stack > .floating-whatsapp,
  .fd-floating-control-stack > .site-scroll-top {
    width: 48px !important;
    height: 48px !important;
  }

  .fd-floating-control-stack > .floating-whatsapp {
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 13px !important;
  }

  .fd-floating-control-stack > .floating-whatsapp > .fd-whatsapp-icon {
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    flex-basis: 31px !important;
  }
}


/* --- Mobile tap targets ---------------------------------------------------
   The footer link lists render as 12-19px tall text links, which is under the
   24px minimum WCAG 2.5.8 asks for and fiddly to hit with a thumb. On narrow
   screens each link gets enough vertical padding to clear that. The lists are
   stacked, so this only makes the footer slightly taller; nothing reflows.
   Desktop is untouched, where these are mouse targets. */
@media (max-width: 767px) {
  .footer-link-list a,
  .footer-legal a,
  .footer-contact a {
    display: block;
    min-height: 24px;
    padding-block: 7px;
  }

  .social-icon-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }
}