/* POP-POS Gutenberg v1.3.1 — opt-in features and responsive design */
:root { --pp-parallax-y: 0px; }
html { scroll-padding-top: 115px; }
/* Real WordPress block template part is the outer <header>; sticking only the inner group does not work. */
body.pp-opt-sticky .wp-site-blocks > header.wp-block-template-part,
body.pp-opt-sticky header.wp-block-template-part:has(.pp-site-header) {
 position: sticky; top: 0; z-index: 120; }
body.pp-opt-sticky.admin-bar .wp-site-blocks > header.wp-block-template-part,
body.pp-opt-sticky.admin-bar header.wp-block-template-part:has(.pp-site-header) { top: 32px; }
.pp-site-header { z-index: 1; }
/* Screenshot-style skewed dark bar, retaining Gutenberg's native navigation and mobile drawer. */
.pp-site-header .pp-main-nav { position: relative; isolation: isolate; background: transparent; border-radius: 0; padding: 0; text-transform: none; font-size: clamp(12px, .95vw, 15px); letter-spacing: 0; font-weight: 700; }
.pp-site-header .pp-main-nav::before { content: ''; position: absolute; inset: 0; background: var(--pp-dark); z-index:-1; clip-path:polygon(3.7% 0,100% 0,96.3% 100%,0 100%); }
.pp-site-header .pp-main-nav .wp-block-navigation__container { min-height: 66px; align-items:center; gap:clamp(6px, 1.1vw, 19px); padding: 0 clamp(20px, 2.7vw, 38px); }
.pp-site-header .pp-main-nav .wp-block-navigation-item__content { display:block; padding: 18px 7px; }
/* JS-free fallback: exactly one visible image; JS changes the active image only when enabled. */
body:not(.editor-styles-wrapper) .pp-slider .pp-slider__track > .pp-slide { display: none; }
body:not(.editor-styles-wrapper) .pp-slider .pp-slider__track > .pp-slide:first-child { display: grid; }
body:not(.editor-styles-wrapper) .pp-slider.pp-slider--initialized .pp-slider__track > .pp-slide.is-active { display: grid; }
body:not(.editor-styles-wrapper) .pp-slider.pp-slider--initialized .pp-slider__track > .pp-slide:not(.is-active) { display:none; }
body:not(.editor-styles-wrapper) .pp-slider.pp-slider--initialized .pp-slider__track > .pp-slide[hidden] { display:none!important; }
/* Manual bottom slider arrows and dots are intentionally obvious. */
.pp-product-slider .pp-slider__controls { justify-content: center; gap: 23px; }
.pp-slider__arrow { touch-action: manipulation; min-width:42px; min-height:42px; }
.pp-slider__dot { touch-action: manipulation; min-height: 14px; background-clip: content-box; padding-block: 5px; }
.pp-slider__dot:focus-visible,.pp-slider__arrow:focus-visible { outline: 3px solid var(--pp-red); outline-offset: 3px; }
/* Slider controls only exist when JS initializes an enabled slider. */
.pp-slider__controls { margin-top: 16px; }
/* The red/grey boundary moves slightly. Never move the complete text section. */
.pp-about .pp-quote { position:relative; isolation:isolate; overflow:hidden; background:var(--pp-dark); }
.pp-about .pp-quote::after { content:''; position:absolute; right:-55px; top:-40%; width:27%; height:190%; background:var(--pp-red); transform:translate3d(0,var(--pp-parallax-y),0) skew(-35deg); pointer-events:none; z-index:0; }
.pp-about .pp-quote > * { position: relative; z-index: 1; }
.pp-site-footer::after { transform:translate3d(0,var(--pp-parallax-y),0) skew(-37deg); }
/* Gutenberg core/cover: replace media under block toolbar, change the text inside. */
.pp-product-categories .pp-panel, .pp-extras .pp-panel { position:relative; isolation:isolate; min-height: 250px; padding:clamp(35px,4.5vw,65px); overflow:hidden; }
.pp-panel > .wp-block-cover__background { position:absolute; inset:0; z-index:1; background-color:rgba(37,37,37,.68); }
.pp-panel > .wp-block-cover__image-background { position:absolute; inset:0; object-fit:cover; width:100%; height:100%; }
.pp-panel .wp-block-cover__inner-container { position:relative; z-index:2; }
.pp-panel .wp-block-heading,.pp-panel p,.pp-panel li { color: white; }
.pp-panel .pp-product-lists { gap:14px 55px; }
.pp-panel .wp-block-list { margin:0; }
.pp-panel--extras .wp-block-list { columns:2; column-gap:55px; }
body.pp-no-products-bg .pp-panel--products,
body.pp-no-extras-bg .pp-panel--extras { background:#f4f4f4 !important; color:var(--pp-ink); }
body.pp-no-products-bg .pp-panel--products > .wp-block-cover__image-background,
body.pp-no-products-bg .pp-panel--products > .wp-block-cover__background,
body.pp-no-extras-bg .pp-panel--extras > .wp-block-cover__image-background,
body.pp-no-extras-bg .pp-panel--extras > .wp-block-cover__background { display:none!important; }
body.pp-no-products-bg .pp-panel--products .wp-block-heading,
body.pp-no-products-bg .pp-panel--products li,
body.pp-no-extras-bg .pp-panel--extras .wp-block-heading,
body.pp-no-extras-bg .pp-panel--extras li { color: var(--pp-ink)!important; }
/* Progressive enhancement: hidden only after intersection observing has actually started. */
body.pp-opt-icons.pp-stagger-ready .pp-service-card:not(.pp-revealed),
body.pp-opt-icons.pp-stagger-ready .pp-tech-item:not(.pp-revealed) { opacity:0; transform:translateY(22px); }
body.pp-opt-icons.pp-stagger-ready .pp-service-card,
body.pp-opt-icons.pp-stagger-ready .pp-tech-item { transition:opacity .68s ease, transform .68s cubic-bezier(.2,.7,.2,1); }
body.pp-opt-icons.pp-stagger-ready .pp-service-card.pp-revealed,
body.pp-opt-icons.pp-stagger-ready .pp-tech-item.pp-revealed { opacity:1; transform:translateY(0); }
/* Do not run editor animations. The editor shows every slide for replacement/reordering. */
.editor-styles-wrapper .pp-slider__track > .pp-slide { display:block!important; opacity:1!important; transform:none!important; }
.editor-styles-wrapper .pp-service-card,.editor-styles-wrapper .pp-tech-item {opacity:1!important;transform:none!important;}
@media (max-width: 900px) {
 .pp-site-header .pp-main-nav {font-size:12px;}
 .pp-site-header .pp-main-nav .wp-block-navigation__container {gap:4px; min-height:52px; padding:0 16px;}
 .pp-site-header .pp-main-nav .wp-block-navigation-item__content {padding:12px 5px;}
}
@media (max-width: 680px) {
 body.pp-opt-sticky.admin-bar .wp-site-blocks > header.wp-block-template-part,
 body.pp-opt-sticky.admin-bar header.wp-block-template-part:has(.pp-site-header) {top:46px;}
 .pp-site-header .pp-main-nav::before {display:none;}
 .pp-site-header .pp-main-nav .wp-block-navigation__container { min-height:unset; padding:0; }
 .pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open {background:var(--pp-dark);color:white;padding:24px;}
 .pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {padding:11px 0;color:white!important;}
 .pp-panel--extras .wp-block-list {columns:1;}
 .pp-product-categories .pp-panel,.pp-extras .pp-panel {padding:28px 22px;}
}
@media (prefers-reduced-motion: reduce) {
 body.pp-opt-icons .pp-service-card,body.pp-opt-icons .pp-tech-item {opacity:1!important; transform:none!important; transition:none!important;}
 .pp-about .pp-quote::after,.pp-panel::after,.pp-site-footer::after {transition:none!important; transform:none!important;}
}


/* v1.3.1: Wordpress navigation overlay repair.
 * The open overlay must not inherit the diagonal desktop bar's position,
 * narrow row layout, low-contrast link colors or hidden desktop container.
 * Applies at every width, including when the burger is forced at tablet width. */
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh;
  z-index: 100000 !important;
  isolation: isolate;
  overflow-y: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #343434 !important;
  color: #fff !important;
  padding: max(22px, env(safe-area-inset-top)) clamp(22px, 7vw, 55px) 45px !important;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100% !important;
  max-width: 100% !important;
  color: #fff !important;
  overflow: visible !important;
}
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding-top: clamp(22px, 7vh, 55px) !important;
  gap: 0 !important;
  text-align: left !important;
}
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  gap: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited,
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  padding: 15px 0 !important;
  font-size: clamp(20px, 5vw, 25px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #fff !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  color: #fff !important;
  opacity: .82 !important;
  text-decoration: underline !important;
}
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  display: flex !important;
  align-self: flex-end;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 9px !important;
}
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  fill: currentColor !important;
  color: #fff !important;
  stroke: #fff !important;
}
/* Keep the decorative bar behind the desktop menu only. */
.pp-site-header .pp-main-nav:has(.wp-block-navigation__responsive-container.is-menu-open)::before {
  display: none !important;
}
/* The hamburger button itself needs dark contrast on white. */
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container-open {
  color: #343434 !important;
}
@media (max-width: 680px) {
  .pp-site-header .pp-main-nav { overflow: visible !important; }
  .pp-site-header .pp-main-nav .wp-block-navigation__responsive-container-open { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
}

/* Keep nested label spans from doubling the vertical touch-target padding. */
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
  padding: 0 !important;
  line-height: inherit !important;
  font-size: inherit !important;
}
.pp-site-header .pp-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  display: flex !important;
  margin: 0 0 0 auto !important;
  padding: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
}