/*
Theme Name: Premier Polysteel Child
Theme URI: https://premierpolysteel.com
Description: Running Robots child theme for the Premier Polysteel redesign, built on Hello Elementor. Holds version-controlled, theme-level custom CSS. Custom CSS below was migrated out of the Customizer "Additional CSS" (post 180488) on 2026-06-17 so it lives in the theme instead of the database.
Author: Running Robots
Author URI: https://therunningrobots.com
Template: hello-elementor
Version: 1.0.0
*/

/**
 * PP — YITH Wishlist over-image overlay on Elementor Loop Grid cards.
 * Background: YITH's native over-image CSS chains to .yith-wcwl-add-to-wishlist
 * (emitted by the standard loop hook). The Elementor yith_wcwl_add_to_wishlist
 * widget emits a different class (.yith-add-to-wishlist-button-block), so YITH's
 * built-in CSS doesn't position it. These three rules replicate the over-image
 * behavior on the Elementor widget output.
 * Added 2026-05-21. Pair with YITH options: loop_position=before_image,
 * position_over_image_in_loop=top-right, button_over_image_style=hover,
 * add_to_wishlist_text='' (cleared for icon-only).
 */
.e-loop-item.add-to-wishlist-before_image { position: relative; }

.e-loop-item.add-to-wishlist-before_image .elementor-widget-yith_wcwl_add_to_wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    margin: 0;
    width: auto;
}

.e-loop-item.add-to-wishlist-before_image .yith-add-to-wishlist-button-block {
    margin: 0;
}

/**
 * PP — Header icon tooltips.
 * Any element with data-tooltip="<label>" in the Elementor header location shows a
 * dark bubble with the label below it on hover. Scoped to .elementor-location-header
 * so plugins using data-tooltip elsewhere are unaffected. Touch devices skipped.
 * Added 2026-05-21 for parking lot #14.
 */
.elementor-location-header [data-tooltip] { position: relative; }
.elementor-location-header [data-tooltip]::after,
.elementor-location-header [data-tooltip]::before {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease 0.05s;
    z-index: 9999;
}
.elementor-location-header [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font: 500 12px/1.2 inherit;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.elementor-location-header [data-tooltip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1a1a1a;
}
.elementor-location-header [data-tooltip]:hover::after,
.elementor-location-header [data-tooltip]:hover::before,
.elementor-location-header [data-tooltip]:focus-within::after,
.elementor-location-header [data-tooltip]:focus-within::before {
    opacity: 1;
}
@media (hover: none) {
    .elementor-location-header [data-tooltip]::after,
    .elementor-location-header [data-tooltip]::before { display: none; }
}

/**
 * PP — Z-index stack for header dropdown menu + YITH FBT modal vs Loop Grid badges.
 * Background: YITH WCBM badges render at z-index 10 inside .e-loop-item cards. Elementor
 * sub-menus only get z-index 9997 when the nav has --stretch class (PP nav doesn't), so
 * default (auto) puts the dropdown BEHIND badges visually. Same shape on YITH FBT modal:
 * its .jquery-modal.blocker is z-index 100 but can lose to loop-item stacking contexts.
 * Fix: establish header + modal as their own high stacking layers above any in-page UI.
 * Added 2026-05-22 for parking lot #22 + #22a.
 */
.elementor-location-header {
    position: relative;
    z-index: 99999;
}
.elementor-nav-menu .sub-menu,
.elementor-nav-menu--dropdown,
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    z-index: 99999 !important;
}
.jquery-modal.blocker {
    z-index: 100000 !important;
}
#yith-wfbt-modal {
    z-index: 100001 !important;
}


/**
 * PP — Hide YITH WCBM badges inside the FBT variation-select modal.
 * The bundled product card in the modal is purely for variation selection — badges add
 * visual noise and (per Tif's prior report) could overlap modal controls. Hide them only
 * in the modal context; the inline FBT widget on the PDP still shows badges normally.
 * Added 2026-05-22 for parking lot #22b (followup to #22 z-index work).
 */
#yith-wfbt-modal .yith-wcbm-badge,
#yith-wfbt-modal .container-image-and-badge .yith-wcbm-badge {
    display: none !important;
}


/**
 * PP — Keep WP admin bar (and its hover dropdowns) above our z-index 99999 header.
 * The Elementor header at z-index 99999 (set 2026-05-22 for parking lot #22a) ties
 * the WP admin bar's default z-index. DOM-order tiebreaker pushed the header above
 * the admin bar's stacking context, breaking the admin bar dropdowns ('Edit with
 * Elementor', 'Edit Page', etc.) on the frontend when logged in.
 * Bumping admin bar to 100002 keeps it cleanly above header (99999), FBT modal
 * blocker (100000), and FBT modal content (100001). Logged-out users are unaffected.
 * Added 2026-05-22 (Session 44).
 */
#wpadminbar {
    z-index: 100002 !important;
}
#wpadminbar .ab-sub-wrapper,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
    z-index: 100003 !important;
}

.linked-text p a {
	font: inherit;
	color: #1053B7;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-color: #1E70EB;
	text-decoration-thickness: 12%;
	text-underline-offset: 40%;
}

.linked-text p a:hover {
	font: inherit;
	text-decoration: none;
	color: #1053B7;
}

.linked-text-white p a {
	font: inherit;
	color: #fff;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-color: #1E70EB;
	text-decoration-thickness: 12%;
	text-underline-offset: 40%;
}

.linked-text-white p a:hover {
	font: inherit;
	text-decoration: none;
	color: #fff;
}

/* shadow only while the panel is actually on-screen */
.pp-cart-panel,
.pp-raq-panel { box-shadow: none; }

.pp-cart-panel.is-open,
.pp-raq-panel.is-open { box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); }

/* Collapsible text widget */
.rr-collapse-text {
  max-height: 232px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.35s ease;
}

/* Fade-out hint at the bottom while collapsed (optional) */
.rr-collapse-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* Expanded state */
.rr-collapse-text.is-expanded {
  max-height: 4000px; /* large enough for any content */
}

.rr-collapse-text.is-expanded::after {
  opacity: 0;
}

/* Mobile: fully hide text until expanded */
@media (max-width: 576px) {
  .rr-collapse-text {
    max-height: 0;
  }

  /* Hide the fade overlay while fully collapsed (nothing to fade) */
  .rr-collapse-text:not(.is-expanded)::after {
    opacity: 0;
  }
}

/* ===== BEGIN: PP Events Archive restyle ===== */
/* =============================================================
   Premier Polysteel — Events Calendar (List view) restyle
   Target: The Events Calendar 6.16.x (Views v2), theme hello-child
   Scope:  everything is namespaced under .tribe-events so it cannot
           leak into the rest of the site.
   Design: Figma "Events" — file 4nILj2AlDcz40vLKdcuuQX, node 1275:22256
   Tokens: Sky #e1ebf4 · Cobalt #1053b7 · Ink #121212 · Body #0e141b
           Tech White #f5f5f4 · Border #d9dad9 · radius 40/16 · Inter/Rubik
   ============================================================= */

.tribe-events {
  --ppe-sky:        #e1ebf4; /* date tile + active chevron bg            */
  --ppe-cobalt:     #1053b7; /* event title + Today outline              */
  --ppe-cobalt-dk:  #0b3c85; /* title hover                              */
  --ppe-ink:        #0e141b; /* date tile text, datetime, venue          */
  --ppe-body:       #0e141b; /* description                              */
  --ppe-muted:      #5b6470; /* month-separator label                    */
  --ppe-tech-white: #f5f5f4; /* "Upcoming" filter pill bg                */
  --ppe-border:     #d9dad9; /* dividers / month rule                    */
  --ppe-radius-lg:  40px;    /* date tile bottom-right corner            */
  --ppe-radius-md:  16px;    /* featured image                          */
  --ppe-shadow:     4px 4px 10px rgba(30, 42, 56, 0.20); /* S Drop Shadow */
  --ppe-gap:        2rem;    /* 32px design gutter                        */
  --ppe-font-body:  'Inter';
  --ppe-font-head:  'Rubik', sans-serif;
}

/* -------------------------------------------------------------
   1. The list + one event row  (date tile | details | image)
   ------------------------------------------------------------- */
.tribe-events .tribe-events-calendar-list__event-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ppe-gap);
  padding: var(--ppe-gap) 0;
  border-bottom: 1px solid var(--ppe-border);
}
.tribe-events .tribe-events-calendar-list__event-row:last-child {
  border-bottom: 0;
}

/* the article inside the wrapper -> details + image side by side */
.tribe-events .tribe-events-calendar-list__event-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}
.tribe-events .tribe-events-calendar-list__event {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ppe-gap);
  margin: 0;
}
.tribe-events .tribe-events-calendar-list__event-details {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px between datetime / title / venue / description */
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search .tribe-events-c-events-bar {
	display: none;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
	max-width: 1312px;
	padding: 32px 20px 64px;
}

.tribe-common--breakpoint-medium.tribe-common .tribe-common-c-btn-border-small, .tribe-common--breakpoint-medium.tribe-common a.tribe-common-c-btn-border-small {
	font-family: var( --ppe-font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--ppe-body);
    line-height: 160%;
    text-align: center;
    text-transform: capitalize;
    border-radius: 12px;
    border-width: 4px;
    border-color: var(--ppe-cobalt);
    border-style: solid;
    background-color: transparent;
    padding: 12px 32px;
}

.tribe-common--breakpoint-medium.tribe-common .tribe-common-c-btn-border-small:hover, .tribe-common--breakpoint-medium.tribe-common a.tribe-common-c-btn-border-small:hover {
	 border-color: #1e70eb;
}

.tribe-events button.tribe-events-c-top-bar__nav-link--next, .tribe-events button.tribe-events-c-top-bar__nav-link--prev {
	border-radius: 50%;
}

.tribe-events button.tribe-events-c-top-bar__nav-link--next:hover, .tribe-events button.tribe-events-c-top-bar__nav-link--prev:hover {
	background-color: var(--ppe-sky);
	border-radius: 50%;
}

.tribe-common.tribe-common--breakpoint-medium button.tribe-events-c-top-bar__datepicker-button {
	padding: 20px;
	background-color: var(--ppe-tech-white);
	outline: none;
}

.tribe-common.tribe-common--breakpoint-medium button.tribe-events-c-top-bar__datepicker-button:hover {
	background-color: var(--ppe-sky);
}

.tribe-events .datepicker .day, .tribe-events .datepicker .month, .tribe-events .datepicker .year {
	background-color: var(--ppe-tech-white);
	color: var(--ppe-body);
	font-family: var(--ppe-font-body);
	border: 0;
	outline: 0;
}

.tribe-events .datepicker .day.focused, .tribe-events .datepicker .day:focus, .tribe-events .datepicker .day:hover, .tribe-events .datepicker .month.focused, .tribe-events .datepicker .month:focus, .tribe-events .datepicker .month:hover, .tribe-events .datepicker .year.focused, .tribe-events .datepicker .year:focus, .tribe-events .datepicker .year:hover {
	background-color: var(--ppe-sky);
	border: 0;
	outline: 0;
}

.tribe-events .datepicker .day.current:before, .tribe-events .datepicker .month.current:before, .tribe-events .datepicker .year.current:before {
	    border: 1px solid var(--ppe-cobalt);
		
}

.tribe-events .datepicker .day.active, .tribe-events .datepicker .day.active:hover, .tribe-events .datepicker .month.active, .tribe-events .datepicker .month.active:hover, .tribe-events .datepicker .year.active, .tribe-events .datepicker .year.active:hover {
	background: var(--ppe-cobalt);
	outline: none;
}

.tribe-events .datepicker .datepicker-switch, .tribe-events .datepicker .next, .tribe-events .datepicker .prev {
	background: transparent;
}

.tribe-events .datepicker .datepicker-switch:hover, .tribe-events .datepicker .next:hover, .tribe-events .datepicker .prev:hover, .tribe-events .datepicker .datepicker-switch:focus, .tribe-events .datepicker .next:focus, .tribe-events .datepicker .prev:focus {
	border: 0;
	outline: 0;
}

.tribe-common abbr[title] {
	color: var(--ppe-body);
	font-family: var(--ppe-font-body);
}

.tribe-events .tribe-events-calendar-list__event-row {
	  border-bottom: 0;
	 
  }

.post-type-archive-tribe_events .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-top-bar__nav {
	display: none !important;
}

/* -------------------------------------------------------------
   2. Date tile  (FRI / 00)  — pale-blue, 40px bottom-right radius
   ------------------------------------------------------------- */
.tribe-events .tribe-events-calendar-list__event-date-tag {
  flex: 0 0 112px;
  width: 112px;
  box-sizing: border-box;         /* keep total tile width at 112px      */
  align-self: stretch;            /* match card height                  */
  background: var(--ppe-sky);
  border-radius: 0 0 var(--ppe-radius-lg) 0;
  padding: var(--ppe-gap);
  margin: 0;
  text-align: center;
  color: var(--ppe-ink);
}
.tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
	color: var(--ppe-body);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-datetime span {
	color: var(--ppe-body);
}
/* weekday (top) — small uppercase tracked */
.tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
  font-family: var(--ppe-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: var(--ppe-ink);
}
/* day number (big) */
.tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
  font-family: var(--ppe-font-body);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.6;
  color: var(--ppe-ink);
}
/* year line injected by the date-tag template override (see README) */
.tribe-events .tribe-events-calendar-list__event-date-tag-year {
  font-family: var(--ppe-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: var(--ppe-ink);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-daynum { font-size: 32px !important; line-height: 1.6; }

/* -------------------------------------------------------------
   3. Event details typography
   ------------------------------------------------------------- */
/* date-time line */
.tribe-events .tribe-events-calendar-list__event-datetime-wrapper {
  margin: 0;
}
.tribe-events .tribe-events-calendar-list__event-datetime,
.tribe-events .tribe-events-calendar-list__event-datetime-wrapper {
  font-family: var(--ppe-font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: var(--ppe-ink);
}

/* event title — Rubik SemiBold cobalt */
.tribe-events .tribe-events-calendar-list__event-title a {
	 margin: 0;
	 font-family: var(--ppe-font-head);
	 font-weight: 600;
	 font-size: 24px;
	 line-height: 1.6;
	color: var(--ppe-body);
}
.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events .tribe-events-calendar-list__event-title-link:visited {
/*   color: var(--ppe-cobalt); */
  text-decoration: none;
}
.tribe-events .tribe-events-calendar-list__event-title-link:hover,
.tribe-events .tribe-events-calendar-list__event-title-link:focus {
  color: var(--ppe-cobalt);
  text-decoration: none;
	border-bottom: 0;
}

/* venue / location line */
.tribe-events .tribe-events-calendar-list__event-venue {
  margin: 0;
  font-family: var(--ppe-font-body);
  font-size: 18px;
  line-height: 1.8;
  color: var(--ppe-ink);
  font-style: normal;
}
.tribe-events .tribe-events-calendar-list__event-venue-title {
  	font-weight: 500;
	font-size: var(--Responsive-Font-Sizes-Body-Large, 18px);
	line-height: 180%;
}
.tribe-events .tribe-events-calendar-list__event-venue-address {
  	font-weight: 400;
	font-size: var(--Responsive-Font-Sizes-Body-Large, 18px);
	line-height: 180%;
}

/* description / excerpt */
.tribe-events .tribe-events-calendar-list__event-description {
  margin: 0;
  font-family: var(--ppe-font-body);
  font-weight: 400;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--ppe-body);
}
.tribe-events .tribe-events-calendar-list__event-description p {
  margin: 0;
}

/* -------------------------------------------------------------
   4. Featured image — 432x172, 16px radius, soft shadow, far right
   ------------------------------------------------------------- */
.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper {
  order: 2;
  flex: 0 0 432px;
  max-width: 432px;
  margin: 0;
}
/* the <img> itself carries the __event-featured-image class */
.tribe-events .tribe-events-calendar-list__event-featured-image,
.tribe-events .tribe-events-calendar-list__event-featured-image-link {
  display: block;
  width: 100%;
  margin: 0;
}
.tribe-events .tribe-events-calendar-list__event-featured-image {
  height: 172px;
  object-fit: cover;
  border-radius: var(--ppe-radius-md);
  box-shadow: var(--ppe-shadow);
}
/* when TEC wraps the image in a link, style the inner img */
.tribe-events .tribe-events-calendar-list__event-featured-image-link .tribe-events-calendar-list__event-featured-image {
  height: 172px;
}

/* -------------------------------------------------------------
   5. Month separator — "MONTH 2026" label + rule to the right
   ------------------------------------------------------------- */
.tribe-events .tribe-events-calendar-list__month-separator {
  margin: var(--ppe-gap) 0 0;
  padding: 0;
  border: 0;
}
.tribe-events .tribe-events-calendar-list__month-separator::before,
.tribe-events .tribe-events-calendar-list__month-separator::after {
  display: none; /* kill TEC's default centring rules */
}
.tribe-events .tribe-events-calendar-list__month-separator h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  flex: 1 1 100%;   /* fill the flex parent so the rule has room to grow */
  width: 100%;
}
.tribe-events .tribe-events-calendar-list__month-separator-text {
  flex: 0 0 auto;
  font-family: var(--ppe-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: var(--ppe-body);
  background: none;
  padding: 0;
}
.tribe-events .tribe-events-calendar-list__month-separator h3::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ppe-border);
}

/* -------------------------------------------------------------
   6. Top bar controls
      - datepicker button "Upcoming" -> Tech-White pill
      - Today button -> cobalt outline pill
      - nav chevrons -> round, sky on hover
   ------------------------------------------------------------- */
.tribe-events .tribe-events-c-top-bar {
  gap: var(--ppe-gap);
  align-items: center;
}

/* "Upcoming" filter pill */
.tribe-events .tribe-events-c-top-bar__datepicker-button {
  background: var(--ppe-tech-white);
  padding: 1.25rem;
  height: auto;
  min-height: 60px;
  border-radius: 0;
  color: var(--ppe-body);
}
.tribe-events .tribe-events-c-top-bar__datepicker-time {
  font-family: var(--ppe-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: var(--ppe-body);
}

/* Today button (shows on month/day views) */
.tribe-events .tribe-events-c-top-bar__today-button {
  border: 4px solid var(--ppe-cobalt);
  border-radius: 12px;
  padding: 1rem 2rem;
  height: 58px;
  font-family: var(--ppe-font-body);
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  color: var(--ppe-body);
  background: transparent;
}
.tribe-events .tribe-events-c-top-bar__today-button:hover {
  background: var(--ppe-cobalt);
  color: #fff;
}

/* round chevron nav buttons */
.tribe-events .tribe-events-c-top-bar__nav-link {
  width: 48px;
  height: 48px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tribe-events .tribe-events-c-top-bar__nav-link:not([disabled]):hover {
  background: var(--ppe-sky);
}

/* -------------------------------------------------------------
   7. Bottom pagination nav + Subscribe dropdown — brand tint
   ------------------------------------------------------------- */
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__today {
  color: var(--ppe-cobalt);
  font-family: var(--ppe-font-body);
  font-weight: 600;
}
.tribe-events .tribe-events-c-nav__prev[disabled],
.tribe-events .tribe-events-c-nav__next[disabled] {
  color: var(--ppe-muted);
}
.tribe-events .tribe-events-c-subscribe-dropdown__button {
  border-color: var(--ppe-cobalt);
  color: var(--ppe-cobalt);
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	background-color: var(--ppe-tech-white);
	color: var(--ppe-body);
	font-family: var(--ppe-font-body);
	border: 0;
	outline: 0;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 16.8px */
	letter-spacing: 2.24px;
	text-transform: uppercase;
	border-radius: 0;
	padding: 20px;
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button button {
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 16.8px */
	letter-spacing: 2.24px;
	text-transform: uppercase;
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover {
	background-color: var(--ppe-cobalt);
	color: #fff;
	border: 0;
}

@media (min-width: 769px) {
  /* keep the image on the row, to the RIGHT of the content */
  .tribe-events .tribe-events-calendar-list__event { flex-wrap: nowrap; }
  .tribe-events .tribe-events-calendar-list__event-details { order: 0; min-width: 0; }
  .tribe-events .tribe-events-calendar-list__event-featured-image-wrapper { order: 0; }
	
}

/* -------------------------------------------------------------
   8. Mobile (<= 768px): stack date above content, image full-width
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .tribe-events .tribe-events-calendar-list__event-row {
    flex-direction: column;
    gap: 1.25rem;
	  border-bottom: 0;
	  margin: 0;
  }
	.tribe-events .tribe-events-calendar-list__event-wrapper {
		width: 100%;
	}
  .tribe-events .tribe-events-calendar-list__event-date-tag {
    width: 100%;
    flex: 0 0 auto;
    align-self: auto;
    border-radius: 0 0 var(--ppe-radius-lg) 0;
	  display: none;
  }
  .tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: baseline;
  }
  .tribe-events .tribe-events-calendar-list__event {
    flex-direction: column;
    gap: 1.25rem;
  }
  .tribe-events .tribe-events-calendar-list__event-featured-image-wrapper {
    order: 3;            /* image below the text on mobile (per design) */
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
  .tribe-events .tribe-events-calendar-list__event-featured-image {
    height: auto;
    aspect-ratio: 315 / 125;
  }
	
	.tribe-events .tribe-events-calendar-list__event-datetime, .tribe-events .tribe-events-calendar-list__event-datetime-wrapper, .tribe-events .tribe-events-calendar-list__event-venue {
		font-size: 16px;
	}
	
	.tribe-events .tribe-events-calendar-list__event-title a {
		font-size: 20px;
	}
	
	.tribe-common a, .tribe-common a:active, .tribe-common a:focus, .tribe-common a:hover, .tribe-common a:visited {
		color: var(--ppe-body);
	}
	.tribe-events .tribe-events-l-container { 
		padding: 20px !important;
	}
	
	.tribe-events button.tribe-events-c-top-bar__datepicker-button {
		background-color: #F5F5F4;
		padding: 16px !important;
	}
	
	.tribe-events button.tribe-events-c-top-bar__datepicker-button:hover {
		background-color: #E1EBF4;
	}
	
	.tribe-common .tribe-common-l-container .tribe-common-g-row--gutters>.tribe-common-g-col {
		padding: 0 ;
	}
	
	.tribe-events-c-events-bar__search-button, .tribe-events-c-events-bar__views {
		display: none !important;
	}
}

/* ===== END: PP Events Archive restyle ===== */

/* =============================================================
   Premier Polysteel — Single Event page restyle (v1)
   Plugin: The Events Calendar 6.16.x (legacy single view), theme hello-child
   Design: Figma "Individual Event Tempate" — file 4nILj2AlDcz40vLKdcuuQX,
           node 1287:34214
   Scope:  everything under .single-tribe_events so it can't leak.
   Tokens: Cobalt #1053b7 · Ink/Text #0e141b · Gunmetal #606569
           Tech White #f5f5f4 · Border #d9dad9 · Sky #e1ebf4
           radius 16/40 · Inter (body) / Rubik (headings)
   NOTE: the hero (186697) supplies back-link + title + date and is injected
         via tribe_events_before_html (see event-single-hero.php); TEC's native
         back/title/schedule are hidden below.
   ============================================================= */

.single-tribe_events {
  --ppe-cobalt: #1053b7;
  --ppe-ink:    #0e141b;
  --ppe-muted:  #606569;
  --ppe-tech-white: #f5f5f4;
  --ppe-border: #d9dad9;
  --ppe-sky:    #e1ebf4;
  --ppe-radius-md: 16px;
  --ppe-gap: 2rem; /* 32px */
  --ppe-font-body: 'Inter';
  --ppe-font-head: 'Rubik', sans-serif;
}

/* -------------------------------------------------------------
   0. Hero replaces TEC's native back-link / title / schedule
   ------------------------------------------------------------- */
.single-tribe_events .tribe-events-back,
.single-tribe_events .tribe-events-single-event-title,
.single-tribe_events .tribe-events-schedule {
  display: none;
}

.single-tribe_events #tribe-events-pg-template {
  max-width: 1312px;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1360px) {
  .single-tribe_events #tribe-events-pg-template { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* container width — match the design's 1312 content inside 64px global pad.
   (hello-child already constrains; only cap if it runs full-bleed) */
.single-tribe_events .tribe-events-single {
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------------------------
   1. Featured image — full-width banner, rounded, cover
   ------------------------------------------------------------- */
.single-tribe_events .tribe-events-event-image {
  margin: 0 0 var(--ppe-gap);
}
.single-tribe_events .tribe-events-event-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1312 / 309;        /* design banner ratio */
  object-fit: cover;
  border-radius: var(--ppe-radius-md);
}

/* -------------------------------------------------------------
   2. Description — Inter 16 / 1.8
   ------------------------------------------------------------- */
.single-tribe_events .tribe-events-single-event-description {
  font-family: var(--ppe-font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ppe-ink);
  margin: 0 0 var(--ppe-gap);
}
.single-tribe_events .tribe-events-single-event-description p {
  margin: 0 0 1rem;
}

/* -------------------------------------------------------------
   3. "Add to Calendar" subscribe dropdown — Tech White pill
   ------------------------------------------------------------- */
.single-tribe_events .tribe-events-c-subscribe-dropdown__container {
  margin: 0 0 var(--ppe-gap);
}
.single-tribe_events .tribe-events-c-subscribe-dropdown__button {
  background: var(--ppe-tech-white);
  border: 1px solid var(--ppe-border);
  border-radius: 0;
  padding: 1rem 1.25rem;
  color: var(--ppe-ink);
}
.single-tribe_events .tribe-events-c-subscribe-dropdown__button-text {
  font-family: var(--ppe-font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--ppe-ink);
}

.single-tribe_events .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button-icon {
    display: none;
}

/* -------------------------------------------------------------
   4. Meta row — 4 columns: Details | Organizer | Venue | Map
   ------------------------------------------------------------- */
.single-tribe_events .tribe-events-event-meta.primary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ppe-gap);
  align-items: flex-start;
  margin: var(--ppe-gap) 0;
  padding: var(--ppe-gap) 0 0;
  border-top: 1px solid var(--ppe-border);
  float: none;
  width: 100%;
}
.single-tribe_events .tribe-events-meta-group {
  flex: 1 1 220px;
  width: auto;
  float: none;
  padding: 0;
  margin: 0;
}
/* the map column is a touch wider in the design */
.single-tribe_events .tribe-events-meta-group-gmap {
  flex: 1 1 300px;
}

/* section titles — Inter SemiBold, uppercase, tracked */
.single-tribe_events .tribe-events-single-section-title {
  font-family: var(--ppe-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ppe-muted);
  margin: 0 0 1rem;
}

/* meta list / items — stack label over value */
.single-tribe_events .tribe-events-meta-list,
.single-tribe_events ul.tribe-events-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.single-tribe_events .tribe-events-meta-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.single-tribe_events .tribe-events-meta-label {
  display: block;
  font-family: var(--ppe-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ppe-muted);
}
.single-tribe_events .tribe-events-meta-value,
.single-tribe_events .tribe-events-meta-value * {
  font-family: var(--ppe-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ppe-ink);
  text-decoration: none;
}
/* links inside meta (website, gmap) — cobalt */
.single-tribe_events .tribe-events-meta-value a,
.single-tribe_events .tribe-venue-location a,
.single-tribe_events a.tribe-events-gmap {
  color: var(--ppe-cobalt);
  text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-color: #1E70EB;
	text-decoration-thickness: 12%; /* 2.16px */
	text-underline-offset: 40%;
	text-decoration: underline;
}
.single-tribe_events .tribe-events-meta-value a:hover {
  text-decoration: none;
	font: inherit;
}
.single-tribe_events address.tribe-events-address {
  font-style: normal;
  font-family: var(--ppe-font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ppe-ink);
}

.single-tribe_events .tribe-events-meta-item.tribe-organizer, .single-tribe_events .tribe-events-meta-item.tribe-venue {
	font-style: normal;
  font-family: var(--ppe-font-body);
  font-size: 16px;
  line-height: 1.8;
	color: var(--ppe-ink);
}

/* -------------------------------------------------------------
   5. Venue map — rounded, sized
   ------------------------------------------------------------- */
.single-tribe_events .tribe-events-venue-map,
.single-tribe_events .tribe-events-meta-group-gmap > * {
  margin: 0;
  width: 100%;
}
.single-tribe_events .tribe-events-venue-map iframe,
.single-tribe_events .tribe-events-meta-group-gmap iframe {
  width: 100%;
  height: 304px;
  border: 0;
  border-radius: var(--ppe-radius-md);
}

/* -------------------------------------------------------------
   6. Prev / Next event nav — move to the bottom, brand-tint
   ------------------------------------------------------------- */
.single-tribe_events .tribe-events-single > div:has(.tribe-events-nav-pagination) {
  order: 90;                       /* push below the event content */
  margin-top: var(--ppe-gap);
  padding-top: var(--ppe-gap);
  border-top: 1px solid var(--ppe-border);
}
.single-tribe_events .post-184462,
.single-tribe_events [class*="post-"].tribe_events {
  order: 10;
}
.single-tribe_events .tribe-events-nav-pagination .tribe-events-sub-nav {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
.single-tribe_events .tribe-events-nav-pagination a {
  font-family: var(--ppe-font-body);
  font-weight: 600;
  color: var(--ppe-cobalt);
  text-decoration: none;
}

.tribe-events-event-meta:before {
	display: none;
}

.single-tribe_events .tribe-events-meta-group-map { align-self: stretch; }

/* Wrapper defines the box (square on desktop, per the 304×304 design) */
.single-tribe_events .tribe-events-meta-group-map .tribe-events-venue-map {
  margin: 0; overflow: hidden; border-radius: 16px;
  aspect-ratio: 1 / 1; height: auto;
}
/* iframe FILLS the wrapper — no empty gap below the map.
   !important beats the iframe's inline height="350" + TEC's height rules. */
.single-tribe_events .tribe-events-meta-group-map .tribe-events-venue-map iframe {
  width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
  display: block; border: 0; border-radius: 16px;
}
/* Mobile: short banner instead of a full-width square (was too tall) */
@media (max-width: 768px) {
  .single-tribe_events .tribe-events-meta-group-map .tribe-events-venue-map {
    aspect-ratio: auto; height: 260px;
  }
}

/* -------------------------------------------------------------
   7. Mobile (<= 768px): meta columns stack
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .single-tribe_events .tribe-events-event-meta.primary {
    flex-direction: column;
    gap: 1.5rem;
  }
  .single-tribe_events .tribe-events-meta-group,
  .single-tribe_events .tribe-events-meta-group-gmap {
    flex: 1 1 auto;
    width: 100%;
  }
  .single-tribe_events .tribe-events-event-image img {
    aspect-ratio: 335 / 79;        /* design mobile banner ratio */
  }
	.single-tribe_events .tribe-events-c-subscribe-dropdown, .tribe-events .tribe-events-c-subscribe-dropdown {
		margin: 0 !important;
	}
	.single-tribe_events .tribe-events .tribe-events-c-subscribe-dropdown__container {
		margin-bottom: 0 !important;
	}
}

/* Reveal the YITH "Add to Wishlist" on shop loop cards.
   pp-custom's badges-loop-grid.css has an over-broad anti-flash rule
   (.e-loop-item .elementor-widget-shortcode{display:none}) that also hides the
   wishlist shortcode widget. This un-hides only the wishlist (the badge host
   has no .yith-add-to-wishlist-button-block, so it stays hidden).
   INTERIM: remove once the scoped :not(:has()) fix ships in pp-custom. */
.e-loop-item .elementor-widget-shortcode:has(.yith-add-to-wishlist-button-block) {
  display: block;
}

/* Free Space Estimator callout — show only on Tables-category products.
   functions.php adds .pp-tables-product to <body>; when it's absent we hide
   the section. We only ever set display:none (never force it back on), so
   Elementor keeps the section's own display value on Tables products. */
body:not(.pp-tables-product) .pp-space-estimator {
    display: none;
}

/* =============================================================
   Migrated from hello-child/functions.php (2026-07-09) so these styles
   are editable here rather than inline in PHP. The PHP still outputs the
   markup + JS; the rules below style it.
   ============================================================= */

/* ---- Product Category "H2 accordion"  ([pp_category_accordion]) ---- */
.pp-cat-accordion{ width:100%; }
.pp-cat-accordion__item{ border:0; margin:0; background:transparent; }
.pp-cat-accordion__title{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	margin:0; padding:20px; cursor:pointer; list-style:none;
	background:#fff; border-bottom:1px solid #d9dad9;
	font-family:'Rubik', Sans-serif;
	font-weight:700; font-size:24px; line-height:1.8; color:#0e141b;
	transition:background-color .2s ease,color .2s ease;
}
.pp-cat-accordion__title::-webkit-details-marker{ display:none; }
.pp-cat-accordion__title::marker{ content:""; }
.pp-cat-accordion__title-text{ flex:1 1 auto; }
.pp-cat-accordion__icon{ flex:0 0 auto; display:inline-flex; align-items:center; }
/* +/- icons drawn as CSS masks so background-color controls their colour */
.pp-cat-accordion__icon .pp-acc-plus,
.pp-cat-accordion__icon .pp-acc-minus{
	display:block; width:16px; height:16px;
	background-color:#0e141b;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:contain; mask-size:contain;
	transition:background-color .2s ease;
}
.pp-cat-accordion__icon .pp-acc-plus{
	-webkit-mask-image:url("https://devpremierpolysteel.kinsta.cloud/wp-content/uploads/2026/04/Plus_Icon.svg");
	mask-image:url("https://devpremierpolysteel.kinsta.cloud/wp-content/uploads/2026/04/Plus_Icon.svg");
}
.pp-cat-accordion__icon .pp-acc-minus{
	display:none;
	-webkit-mask-image:url("https://devpremierpolysteel.kinsta.cloud/wp-content/uploads/2026/04/Minus_Icon.svg");
	mask-image:url("https://devpremierpolysteel.kinsta.cloud/wp-content/uploads/2026/04/Minus_Icon.svg");
}
.pp-cat-accordion__item[open] .pp-acc-plus{ display:none; }
.pp-cat-accordion__item[open] .pp-acc-minus{ display:block; }
/* hover + open (active) state — navy bar, white text/icon */
.pp-cat-accordion__title:hover,
.pp-cat-accordion__item[open] > .pp-cat-accordion__title{ background:#1e2a38; color:#fff; }
.pp-cat-accordion__title:hover .pp-acc-plus,
.pp-cat-accordion__title:hover .pp-acc-minus,
.pp-cat-accordion__item[open] > .pp-cat-accordion__title .pp-acc-plus,
.pp-cat-accordion__item[open] > .pp-cat-accordion__title .pp-acc-minus{ background-color:#fff; }
.pp-cat-accordion__content{
	box-sizing:border-box;
	padding:32px;
	font-family:'Inter';
	font-size:16px; line-height:1.8; color:#0e141b;
}
.pp-cat-accordion__content > :first-child{ margin-top:0; }
.pp-cat-accordion__content > :last-child{ margin-bottom:0; }

/* ---- Product gallery media icons (WooThumbs video / 3D / AR badges) ---- */
.iconic-woothumbs-thumbnails__play-overlay > svg{ display:none !important; }
.iconic-woothumbs-thumbnails__play-overlay{
	background-image:url("https://devpremierpolysteel.kinsta.cloud/wp-content/uploads/2026/07/Play.svg");
	background-repeat:no-repeat;
	background-position:center;
	background-size:32px 32px;
}
.pp-slide-3d .iconic-woothumbs-thumbnails__play-overlay{
	background-image:url("https://devpremierpolysteel.kinsta.cloud/wp-content/uploads/2026/07/3D.svg") !important;
}
.pp-slide-ar .iconic-woothumbs-thumbnails__play-overlay{
	background-image:url("https://devpremierpolysteel.kinsta.cloud/wp-content/uploads/2026/07/AR.svg") !important;
}

/* ---- Blog inline product card  ([pp_product_card]) ----
   Thumbnail left, SKU / title / price stacked on the right. Card corners are
   square; only the image is rounded (8px). */
.pp-product-card{ margin:24px 0; font-family:'Inter',sans-serif; }
.pp-product-card__label{ margin:0 0 8px; font-weight:600; color:#0e141b; }
.pp-product-card .pp-pc{
	display:flex; gap:20px; align-items:center;
	background:#f5f5f4; border:1px solid #e5e5e4; border-radius:0; padding:16px;
	text-decoration:none; color:inherit;
}
.pp-product-card .pp-pc__thumb{ flex:0 0 160px; }
.pp-product-card .pp-pc__thumb img{ width:160px; height:auto; display:block; border-radius:8px !important; }
.pp-product-card .pp-pc__body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.pp-product-card .pp-pc__sku{ font-size: 14px;
font-weight: 600;
line-height: 120%; 
letter-spacing: 1.12px;
text-transform: uppercase; color:#0E141B;
margin-bottom: 24px;
 }
.pp-product-card .pp-pc__title{ font-size: 18px;
font-weight: 600;
line-height: 160%; }
.pp-product-card .pp-pc__price{ font-size: 18px;
font-weight: 500;
line-height: 180%; }
.pp-product-card .pp-pc__price del{ color:#606569; }
.pp-product-card .pp-pc:hover .pp-pc__title{ color:#1053b7; }
.pp-product-card .yith-wcbm-badge__wrap { display:none; }
@media(max-width:480px){
	.pp-product-card .pp-pc{ gap:14px; padding:14px; }
	.pp-product-card .pp-pc__sku{ font-size:12px; margin-bottom:8px; }
	.pp-product-card .pp-pc__title{font-size:16px; }
	.pp-product-card .pp-pc__price{ font-size: 16px;}
}
/* ==================================================================
   Location project gallery — single-image slot fix (RR, 2026-07-16)
   The "About this project" gallery is an Elementor Image Carousel set to
   show 2 slides. With only ONE image Swiper never initializes; the carousel
   widget is a flex item that then shrink-wraps to the image, collapsing the
   whole gallery to a narrow sliver (e.g. Whippy Dip). Fix, scoped to
   location singles + the uninitialized state so it can never touch a working
   multi-image gallery:
     1) let the widget fill its flex parent (restores full gallery width)
     2) give the lone slide the same half-slot Swiper uses in the 2-up case
     3) make the slide's contents fill the slot (lightbox <a> is inline)
   Result: one image renders as one normal slot + blank space beside it.
   ================================================================== */
.single-yith_sl_store .elementor-widget-image-carousel:not(:has(.swiper-initialized)) {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}
.single-yith_sl_store .elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 calc(50% - 16px);
  width: calc(50% - 16px);
  max-width: calc(50% - 16px);
}
.single-yith_sl_store .elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-slide > a,
.single-yith_sl_store .elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-slide .swiper-slide-inner {
  display: block;
  width: 100%;
}
@media (max-width: 767px) {
  .single-yith_sl_store .elementor-widget-image-carousel:not(:has(.swiper-initialized)) .swiper-slide {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%; /* mobile shows 1-per-view; single image fills the row */
  }
}

/* ===== BEGIN: PP Blog category carousel ===== */
/* ============================================================
   Blog Post — Product Category Carousel  ([pp_category_carousel])
   Cards mirror the product loop-item: Sky card, 16px radius, shadow,
   full-bleed category image, Rubik title. The WHOLE card is a single
   link to the category (no separate button); the → after the title is
   drawn in CSS (::after) so the category NAME stays clean.
   Ancestor-scoped selectors (.pp-catcar …) out-specify the theme, so
   !important is not needed for link colour / decoration overrides.
   ============================================================ */

.pp-catcar {
    position: relative;
    padding-bottom: 5rem;
}

.pp-catcar * {
    box-sizing: border-box;
}

/* Track — horizontal scroller. Vertical padding gives the card shadow room
   (overflow-x clips overflow-y); side padding keeps slide 4 off-screen. */
.pp-catcar__track {
    display: flex;
    gap: 22px;
    padding: 7px 10px 28px 7px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.pp-catcar__track::-webkit-scrollbar {
    display: none;
    height: 0;
}

/* Slides per view: 3 on desktop, 2 at 992px and below. */
.pp-catcar__slide {
    flex: 0 0 calc((100% - 2 * 22px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

/* Card — now the LINK itself. Sky #E1EBF4, 16px radius, shadow; whole card
   is clickable and navigates to the category. */
.pp-catcar a.pp-catcar__card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    height: 100%;
    padding: 0;
    text-align: left;
    text-decoration: none;
    color: #0E141B;
    background: #E1EBF4;
    border-radius: 16px;
    overflow: hidden;              /* clip the full-bleed image to the card radius */
    box-shadow: 4px 4px 10px 0 rgba(30, 42, 56, 0.2);
    transition: box-shadow 0.2s ease;
}

.pp-catcar a.pp-catcar__card:hover {
    box-shadow: 6px 6px 16px 0 rgba(30, 42, 56, 0.28);
}

.pp-catcar a.pp-catcar__card:focus-visible {
    outline: 2px solid #1053B7;
    outline-offset: 2px;
}

/* Image — full width, contain (Sky letterbox around the product). */
.pp-catcar__img {
    display: block;
    width: 100%;
}

.pp-catcar__img img {
    display: block;
    width: 100%;
    height: 252px;
    object-fit: contain;
}

/* Title — Rubik 24/700. */
.pp-catcar .pp-catcar__title {
    display: block;
    margin: 0;
    padding: 16px 32px 32px;
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 160%;
    color: #0E141B;
}

/* Arrow icon — Font Awesome Solid "arrow-right" (same glyph as the site CTA
   buttons, e-fas-arrow-right). Drawn as a CSS mask so it inherits the title
   colour via currentColor (dark normally, cobalt on hover) and the category
   NAME never carries an arrow character. Sizing mirrors FA's own .svg-inline--fa
   (0.875em × 1em, -0.125em baseline). */
.pp-catcar .pp-catcar__title::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1em;
    margin-left: 0.5rem;
    vertical-align: -0.18em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M190.5%2066.9l22.2-22.2c9.4-9.4%2024.6-9.4%2033.9%200L441%20239c9.4%209.4%209.4%2024.6%200%2033.9L246.6%20467.3c-9.4%209.4-24.6%209.4-33.9%200l-22.2-22.2c-9.5-9.5-9.3-25%20.4-34.3L311.4%20296H24c-13.3%200-24-10.7-24-24v-32c0-13.3%2010.7-24%2024-24h287.4L190.9%20101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M190.5%2066.9l22.2-22.2c9.4-9.4%2024.6-9.4%2033.9%200L441%20239c9.4%209.4%209.4%2024.6%200%2033.9L246.6%20467.3c-9.4%209.4-24.6%209.4-33.9%200l-22.2-22.2c-9.5-9.5-9.3-25%20.4-34.3L311.4%20296H24c-13.3%200-24-10.7-24-24v-32c0-13.3%2010.7-24%2024-24h287.4L190.9%20101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: transform 0.2s ease;
}

/* Hover affordance — whole card is the target. */
.pp-catcar a.pp-catcar__card:hover .pp-catcar__title {
    color: #1053B7;
}

/* .pp-catcar a.pp-catcar__card:hover .pp-catcar__title::after {
    transform: translateX(4px);
} */

/* Nav arrows — 52px ghost circle, dark chevron, bottom-right. */
.pp-catcar__nav {
    position: absolute;
    right: 0;
    bottom: 0.5rem;
    display: flex;
    gap: 8px;
}

.pp-catcar button.pp-catcar__arrow {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-width: 0;
    padding: 15px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pp-catcar button.pp-catcar__arrow:hover {
    background: #E1EBF4;
}

.pp-catcar button.pp-catcar__arrow:focus-visible {
    outline: 2px solid #1053B7;
    outline-offset: 2px;
}

.pp-catcar__arrow img {
    display: block;
    width: 22px;
    height: 22px;
}

.pp-catcar button.pp-catcar__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 992px) {
    .pp-catcar__slide {
        flex-basis: calc((100% - 22px) / 2);
    }
}

@media (max-width: 768px) {
    .pp-catcar .pp-catcar__title {
        font-size: 20px;
        padding: 12px 16px 16px;
    }

    .pp-catcar__img img {
        height: 200px;
    }
}
/* ===== END: PP Blog category carousel ===== */