/* Project additions required by the SOP-compliant contact and catalogue rules.
   Loaded after the approved theme styles so the original design is unchanged. */

/* Phone and email stay selectable plain text; only WhatsApp is a link. */
.footer-contact__text { color: rgba(255, 255, 255, .62); }
.footer-contact .footer-contact__text:first-of-type { color: var(--white); }
.footer-contact .footer-contact__link { color: var(--white); }
.contact-hero__intro .contact-hero__email {
  display: flex;
  margin-top: 25px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  justify-content: space-between;
  font-size: .82rem;
  color: var(--white);
}
.contact-details__whatsapp { margin-bottom: 40px; }

/* Catalogue filter links replace the previous JavaScript buttons. */
.filter-group a {
  padding: 8px 13px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: .7rem;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.filter-group a span { margin-left: 5px; font-size: .58rem; }
.filter-group a:hover,
.filter-group a.is-active { color: var(--white); background: var(--ink); }
.catalog-pagination { display: flex; margin-top: 60px; justify-content: center; gap: 10px; }
.catalog-pagination .page-numbers {
  padding: 10px 16px;
  border: 1px solid var(--line);
  color: inherit;
  font-size: .74rem;
  letter-spacing: .06em;
}
.catalog-pagination .page-numbers.current { border-color: var(--ink); color: var(--white); background: var(--ink); }
.empty-state { padding: 60px 0; text-align: center; }
.empty-state p { margin: 14px 0 26px; color: var(--muted); }

/* Product specifications table (rendered only when confirmed values exist). */
.product-specs { margin-top: 65px; }
.product-specs__title {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 720;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.product-specs dl { margin: 0; border-top: 1px solid var(--line); }
.product-specs dl > div { display: grid; padding: 16px 0; border-bottom: 1px solid var(--line); grid-template-columns: 220px 1fr; }
.product-specs dt { color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.product-specs dd { margin: 0; font-size: .9rem; }

/* Elementor containers reproduce the approved sections edge to edge. */
.corio-elementor-stack { gap: 0; }
.corio-elementor-stack > .elementor-widget { width: 100%; }
.elementor-widget-container { position: relative; }
body[class*="elementor-kit-"] { font-family: "Manrope", "Segoe UI", Arial, sans-serif; }

/* The header and footer are rendered as their own Elementor documents, which
   wraps them in a container that is only as tall as the header itself.
   position: sticky can only stick inside its own containing block, so the
   approved sticky header stopped working on inner pages. Removing the wrapper
   box makes the header a direct child of <body> again. */
/* Scoped to the live front end: inside the Elementor editor preview the
   wrappers must keep their boxes so elements can still be selected. */
body:not(.elementor-editor-active) > .elementor,
body:not(.elementor-editor-active) > .elementor .elementor-element,
body:not(.elementor-editor-active) > .elementor .elementor-widget-container { display: contents; }

/* With the WordPress admin bar visible (logged-in editors) the sticky header
   must start below it instead of sliding underneath. The approved theme only
   handled this on the home page. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* Product cards: identical size and one shared baseline in every listing.
   The catalogue used to offset every second card by 90px and let the tagline
   wrap to a different number of lines, so cards did not line up. */
.product-grid { align-items: stretch; }
.product-grid > div { display: flex; min-width: 0; }
.product-card {
  display: flex;
  height: 100%;
  flex: 1 1 auto;
  flex-direction: column;
}
.product-card__media { flex: 0 0 auto; }
.product-card__body { flex: 0 0 auto; flex-wrap: wrap; row-gap: 12px; }

/* When a card is too narrow for a side-by-side text and button, the button
   moves below the text instead of squeezing the copy into a 90px column. */
.product-card__body > div { min-width: 0; flex: 1 1 160px; }
.product-card__cta { margin-left: auto; }
.product-card__kicker {
  display: -webkit-box;
  overflow: hidden;
  min-height: 3.3em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-card__title {
  display: -webkit-box;
  overflow: hidden;
  min-height: 3.3em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-card__cta { flex: 0 0 auto; white-space: nowrap; }
.product-grid--catalog > div:nth-child(even) { padding-top: 0; }

@media (max-width: 820px) {
  .filter-group a { flex: 1; padding-inline: 7px; text-align: center; }
  .product-specs dl > div { grid-template-columns: 120px 1fr; }
}

/* Between the mobile menu breakpoint and the wide desktop layout the 370px
   product dropdown used to extend past the viewport and create a horizontal
   scrollbar. Anchoring it to the right edge of the Products item removes the
   overflow without changing the approved desktop or mobile presentation. */
@media (min-width: 821px) and (max-width: 1100px) {
  .product-menu { right: -8px; left: auto; }
}

/* The catalogue renders on WooCommerce pages, whose bundled skin re-colors
   plain `a.button` elements (pale background, gray text) with a source this
   theme cannot out-specific reliably. This file always loads last, so the
   CORIO skin is restated here with !important to stay authoritative. */
a.button.button--dark { color: var(--white) !important; background-color: var(--ink) !important; }
a.button.button--dark:hover { color: var(--white) !important; background-color: var(--red) !important; }
a.button.button--light { color: var(--ink) !important; background-color: var(--white) !important; }
a.button.button--light:hover { color: var(--white) !important; background-color: var(--red) !important; }
a.button.button--acid { color: var(--white) !important; background-color: var(--acid) !important; }
a.button.button--acid:hover { color: var(--white) !important; background-color: var(--ink) !important; }

/* Header inquiry CTA — refined pill with arrow badge.
   Inside the mobile menu (dark panel) it stays the white/ink chip. */
a.button.header-inquiry { color: var(--ink) !important; background-color: var(--white) !important; border-radius: 999px !important; }
@media (min-width: 821px) {
  a.button.header-inquiry {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 7px 7px 7px 24px !important;
    border-radius: 999px !important;
    color: var(--white) !important;
    background-color: var(--acid) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    box-shadow: 0 8px 22px rgba(228, 0, 43, 0.22);
    transition: color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
  }
  a.button.header-inquiry span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--white);
    color: var(--acid);
    font-size: 12px;
    line-height: 1;
    transition: transform 0.3s var(--ease);
  }
  a.button.header-inquiry:hover,
  a.button.header-inquiry:focus-visible {
    color: var(--white) !important;
    background-color: var(--ink) !important;
    background-image: none;
    box-shadow: 0 12px 28px rgba(16, 17, 19, 0.26);
    transform: translateY(-1px);
  }
  a.button.header-inquiry:hover span[aria-hidden],
  a.button.header-inquiry:focus-visible span[aria-hidden] {
    background: var(--acid);
    color: var(--white);
    transform: translate(2px, -2px);
  }
  /* On the home page the header floats on a dark glass bar: keep the pill red
     on hover so it does not melt into the bar. */
  .home a.button.header-inquiry:hover,
  .home a.button.header-inquiry:focus-visible {
    background-color: var(--red) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  }
  .home a.button.header-inquiry:hover span[aria-hidden],
  .home a.button.header-inquiry:focus-visible span[aria-hidden] {
    background: var(--white);
    color: var(--acid);
    transform: translate(2px, -2px);
  }
}