/* RGP1 P5 cleanup (WP1). Every selector is scoped by a body class that module p5 sets only where it applies. */

/* P5.3 Klaviyo popup suppression (D9). The form is closed through its own close button by rgp1-p5.js; these rules
   only make sure that nothing can be seen or clicked meanwhile and that the page stays scrollable.
   Dialog and teaser are hidden with opacity / visibility / pointer-events and keep their layout box on purpose:
   with display:none Klaviyo never finishes closing a form (its fade-out and teaser animations do not complete, the
   scroll lock would stay until the script fallback). Measured in headless Chrome: display:none on the dialog or on the
   teaser stalls the close, the three properties below do not.
   !important: Klaviyo writes inline styles on both elements, and its own "body.klaviyo-prevent-body-scrolling
   { overflow: hidden !important }" must be beaten while it closes. overflow-x is not touched (the site's own
   html, body { overflow-x: hidden } rule stays in force). */
body.rgp1-kl-suppress div[role="dialog"][aria-label="POPUP Form"],
body.rgp1-kl-suppress div[role="dialog"][aria-label="FLYOUT Form"],
body.rgp1-kl-suppress div[class*="kl-teaser-"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.rgp1-kl-suppress.klaviyo-prevent-body-scrolling {
  overflow-y: auto !important;
}

/* P5.4 inline chat link (rendered through the action rgp1/render/chat_link) */
.rgp1-chat-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--rgp1-tap, 44px);
  color: var(--rgp1-c-primary, #273F5D);
  font-size: var(--rgp1-fs-md, 16px);
  text-decoration: underline;
  cursor: pointer;
}

.rgp1-chat-link:hover {
  text-decoration: none;
}

.rgp1-chat-link:focus-visible {
  outline: 3px solid var(--rgp1-c-accent, #FF7F08);
  outline-offset: 2px;
}

/* Tap target on phones (WP5 layout check, review finding 15). Inside the protection block of module p3 the link is set to
   display:inline-block; min-height:0 by assets/p3/rgp1-protection.css (".rgp1-prot .rgp1-prot__list .rgp1-chat-link",
   three classes), which left it 21 to 24 px high. On phones the link keeps a 44 px high box at the same type size; the
   selector below has one class more, so it wins whatever the load order, and it only touches this module's own element. */
@media (max-width: 767px) {
  .rgp1-prot .rgp1-prot__list .rgp1-chat-link.rgp1-chat-link {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--rgp1-tap, 44px);
  }
}

/* P5.6 Order Now gallery (Elementor HTML widget 724f7e3): the thumbnail row is built by script after load;
   reserve its height so that the content below does not move (one grid row: 156 px desktop, 90 px up to 767 px). */
body.rgp1-gallery-fix .rg-ref-gallery__thumbs {
  min-height: 156px;
}

@media (max-width: 767px) {
  body.rgp1-gallery-fix .rg-ref-gallery__thumbs {
    min-height: 90px;
  }
}

/* P5.7 layout shifts of the product page that no image causes (flag p5.cls_fix, body class rgp1-cls-fix).
   1. The H1 of the product template (widget cde27a3) is set in the web font "Berkely" (weight 800, a 64 kB TTF that
      arrives after the first paint). The fallback font is about 25 % wider, so the heading wraps onto two lines until
      the font arrives and then collapses to one line, which moves the whole order section up by 47 px (CLS 0.03 to 0.05
      at every desktop width from 1366 px). The fallback face below is Arial Bold scaled to the width of Berkely
      (size-adjust 91.8 % = 1221.1 / 1329.8, measured at 39 px in Chrome), so the line breaks are the same before and
      after the swap. local() sources only: when none of them exists the browser uses the old generic fallback.
      The selector is deliberately more specific than Elementor's own typography rule instead of using !important.
   2. The vertical scrollbar of the desktop browsers appears when the add-to-cart block is inserted and moves the
      centred layout sideways by 7 px (a large impact region). A stable gutter reserves its width from the start. */
@font-face {
  font-family: "RGP1 Berkely Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"),
    local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 700 800;
  font-style: normal;
  size-adjust: 91.8%;
}

html body.rgp1-cls-fix.rgp1-pt-product .elementor-element.elementor-element-cde27a3 .elementor-heading-title {
  font-family: "Berkely", "RGP1 Berkely Fallback", sans-serif;
}

html:has(body.rgp1-cls-fix.rgp1-pt-product) {
  scrollbar-gutter: stable;
}

/* P5.8 empty top bar. Elementor template 6869 is the site header. Its first section (5bc6df7, social icons strip above
   the logo) has a background and padding, but its only widget is hidden on desktop, tablet and phone, so it renders as
   an empty grey band, and the whitespace-only paragraph before the template adds a white strip above it. Hide both.
   Nothing visible is lost: the icons were already display:none on every device. The rest of the header is untouched.
   Remove this rule if the client enables the icons. */
body.rgp1-on .elementor-6869 .elementor-element-5bc6df7,
body.rgp1-on p:has(+ .elementor-6869) {
  display: none;
}

/* P5.9 mobile menu. The header template (6869, nav widget b351803) shows the collapsed menu as a full-width grey bar
   (Elementor default rgba(0,0,0,.05) toggle) with a plain left-aligned list below it. Restyled as a compact outlined
   button and a white card with dividers; colours come from the existing palette (navy #273F5D text, purple #580881
   for the current page, as already used by the menu). Layout, links and Elementor's open/close logic are untouched.
   Only the collapsed dropdown (nav.elementor-nav-menu__container) is targeted, so desktop sub-menus are not affected.
   !important is needed on the toggle because the site's custom CSS already sets margins on it with !important. */
@media (max-width: 1024px) {
  html body.rgp1-on .elementor-6869 .elementor-element-b351803 .elementor-menu-toggle {
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 12px 0 12px 16px !important;
    background-color: #fff;
    border: 1px solid #cfd5df;
    border-radius: 8px;
    color: #273f5d;
    fill: #273f5d;
  }

  html body.rgp1-on .elementor-6869 .elementor-element-b351803 .elementor-menu-toggle:hover,
  html body.rgp1-on .elementor-6869 .elementor-element-b351803 .elementor-menu-toggle:focus-visible {
    border-color: #273f5d;
    background-color: #f4f6fa;
  }

  html body.rgp1-on .elementor-6869 .elementor-element-b351803 .elementor-menu-toggle svg,
  html body.rgp1-on .elementor-6869 .elementor-element-b351803 .elementor-menu-toggle i {
    width: 22px;
    height: 22px;
    fill: #273f5d;
    color: #273f5d;
  }

  html body.rgp1-on .elementor-6869 .elementor-element-b351803 nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    width: min(calc(100vw - 32px), 340px);
    margin: 4px 0 0 16px !important;
    background-color: #fff;
    border: 1px solid #e2e6ee;
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(15, 30, 60, 0.16);
    overflow: hidden;
    z-index: 999;
  }

  html body.rgp1-on .elementor-6869 .elementor-element-b351803 nav.elementor-nav-menu__container .elementor-item,
  html body.rgp1-on .elementor-6869 .elementor-element-b351803 nav.elementor-nav-menu__container .elementor-sub-item {
    padding: 14px 20px;
    font-size: 16px;
    line-height: 1.3;
    color: #1b2b40;
    border-bottom: 1px solid #eef1f6;
  }

  html body.rgp1-on .elementor-6869 .elementor-element-b351803 nav.elementor-nav-menu__container .elementor-item.elementor-item-active,
  html body.rgp1-on .elementor-6869 .elementor-element-b351803 nav.elementor-nav-menu__container .elementor-item:hover,
  html body.rgp1-on .elementor-6869 .elementor-element-b351803 nav.elementor-nav-menu__container .elementor-item:focus-visible {
    color: #580881;
    background-color: #f6f2fa;
  }

  html body.rgp1-on .elementor-6869 .elementor-element-b351803 nav.elementor-nav-menu__container .sub-menu {
    background-color: #f7f8fb;
  }

  html body.rgp1-on .elementor-6869 .elementor-element-b351803 nav.elementor-nav-menu__container .sub-menu .elementor-sub-item {
    padding-left: 36px;
    font-size: 15px;
  }

  html body.rgp1-on .elementor-6869 .elementor-element-b351803 nav.elementor-nav-menu__container > ul > li:last-child > .elementor-item {
    border-bottom: 0;
  }
}