/* ============================================================
   Store Site — Design Consistency Override
   Loads AFTER child-theme.css. Targets confirmed real classes
   from propp.local (not guessed) — .main-navbar, .nav-link,
   .btn-ppp, .main-footer, .footer-menu, .col-title, .text-primary-light.

   All colors are defined as CSS variables below. Swap the values
   in :root — nothing else in this file needs to change.

   Fonts (Inter Tight, Fraunces) are loaded via Google Fonts —
   see functions-php-addition.php — not declared here.
   ============================================================ */

:root {
  /* ---- Confirmed current store values (for reference/comparison) ---- */
  --ppp-nav-bg-current: #5b5f70;
  --ppp-footer-bg-current: #444654;

  /* ---- Confirmed real values, pulled directly from the blog's live
     Elementor Global Kit CSS variables (elementor-kit-192760) ---- */
  --ppp-nav-bg: #3A3C48;          /* --e-global-color-primary / --e-global-color-73cade8 — used for text/logo on light backgrounds now, not row backgrounds */
  --ppp-row1-bg: #FFFFFF;         /* confirmed: Row 1 background is white, not dark */
  --ppp-row2-bg: #EFE3D3;         /* confirmed: Row 2 background is light peach, not dark */
  --ppp-row2-border: #8A4730;     /* confirmed: Row 2 top/bottom border color */
  --ppp-footer-bg: #3A3C48;       /* same primary dark — confirm if footer should differ from nav */
  --ppp-accent: #A5593C;          /* --e-global-color-accent / --e-global-color-234297a / --e-global-color-b347e6b */
  --ppp-accent-hover: #8A4730;    /* --e-global-color-687c791 */
  --ppp-secondary: #4F799C;       /* --e-global-color-secondary / --e-global-color-ca4c7cf — not yet used below, available if needed */
  --ppp-text-muted-alt: #525565;  /* --e-global-color-316d419 / --e-global-color-3a7f6c8 */
  --ppp-text-light: #FFFFFF;      /* --e-global-color-118e573 */
  --ppp-text-muted: rgba(255, 255, 255, 0.7);
  --ppp-font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* --e-global-typography-primary/text-font-family, confirmed */
  --ppp-heading-font-family: "Fraunces", Georgia, serif; /* --e-global-typography-e7f820b/10adc1c/76f8805-font-family, confirmed */
}
body {background-color: #ffffff;}
a:focus {
    color: #A5593C;
    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--ppp-accent);
    outline: 2px solid transparent;
}
a:hover {text-decoration: none!important;}
/*Login*/
body.login #wp-submit {
    background: #A5593C;
    border-color: #A5593C;
    border-radius: 2rem;
}
body.login #outer-wrapper {
    background-color: #ffffff !important;
}
@media (min-width: 360px) {
    body.login form {
        padding: 60px 46px 90px;
        border-radius: 20px;
    }
}
/*Page*/
#outer-wrapper {
    padding-top: 0!important; */
}
@media (min-width: 768px) {
    #outer-wrapper {
        position: absolute;
        padding-top: 0px; */
        right: 0;
        width: 100%;
    }
}
.default-header {
    background-color: #EDF3F6;
}
.default-header .header-subtitle {
    display: inline-block;
    margin-bottom: .25rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #4F799C !important;
}
.default-header .header-subtitle span {
    margin-right: 0rem;
}
.ti-shopping-cart:before {
    /*content: "\e60d";*/
    content: "";
}
.default-header h1 {
    color: #525565 !important;
}
h1.woocommerce-products-header__title {
font-family: var(--ppp-heading-font-family);
}
/* ============================================================
   HEADER / NAV
   ============================================================ */

/* Reset any inherited sticky/fixed positioning from the old single-row
   nav CSS, which is very likely colliding with this new two-row layout. */
#wrapper-navbar {
  position: relative !important;
  top: auto !important;
}
#wrapper-navbar .navbar a {
    font-family: var(--ppp-font-family);
    text-decoration: none!important;
}
@media (min-width: 769px) {
    .navbar a:hover {
        color: var(--ppp-accent) !important;
    }
}
/* ============================================================
   HEADER ROW 1 — logged-in wrap fix (corrected)
   Row 2 already got a "force full width" override for
   .container-fluid (Bootstrap default: already 100% width) — but
   Row 1 uses plain .container, which has a CAPPED max-width by
   Bootstrap default, not 100%. That's the actual gap: when logged
   in, the sidebar reduces usable width, and .container's capped
   max-width was never told to ignore that the way .container-fluid
   was for Row 2.

   ".ppp-header-row-1 .container" (the CHILD div, not
   .ppp-header-row-1 itself) is the real flex container per the
   existing rule already in the file (display:flex;
   justify-content:space-between; flex-wrap:nowrap). The previous
   attempted fix targeted .ppp-header-row-1 directly, which was
   never the actual flex context, so it had no effect.

   REPLACES the earlier ".is-logged-in .ppp-header-row-1",
   ".is-logged-in .ppp-header-row-1-right", and
   ".is-logged-in .ppp-header-row-1 .container-fluid" rules inside
   the same @media (min-width: 1200px) block in
   store-design-override.css — remove those three, add this one in
   their place.
   ============================================================ */

@media (min-width: 1200px) {
	.is-logged-in .ppp-header-row-1 .container-fluid {
		max-width: 100%;
		width: 100%;
	}
  .is-logged-in .ppp-header-row-1 .container-fluid {
    padding-left: 0px!important; 
    padding-right: 0px!important;
  }
  .is-logged-in .ppp-header-row-1 {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.is-logged-in .ppp-header-divider {
	margin-left: 12px;
}
/* ---- Row 1: Logo (left) / Dashboard, Login-Logout, Cart (right) ---- */
.ppp-header-row-1 {
  background-color: var(--ppp-row1-bg) !important;
  font-family: var(--ppp-font-family);
  position: relative;
  z-index: 10;
}
.ppp-header-row-1 .container-fluid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.ppp-header-row-1 .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.ppp-header-row-1 .navbar-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ppp-header-row-1 .navbar-brand img {
  width: 238px;   /* matches blog logo's rendered width */
  height: auto;
  max-width: 100%;
}

.ppp-header-row-1-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  white-space: nowrap;
}
.ppp-pill-toggle--row1 {
	display: none;
}
 
@media (min-width: 992px) {
	.ppp-pill-toggle--row1 {
		display: flex;
	}
	.ppp-header-row-2 .ppp-pill-toggle {
		display: none;
	}
}
.ppp-pill-toggle--row1 .ppp-pill-btn-active,
.ppp-pill-toggle--row1 .ppp-pill-btn:hover {
	background-color: var(--ppp-row2-bg);
	border: 1px solid var(--ppp-row2-bg);
	color: var(--ppp-nav-bg) !important;
}

.ppp-header-dashboard-link,
.ppp-header-login-btn {
  color: var(--ppp-nav-bg) !important;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.ppp-header-dashboard-link:hover,
.ppp-header-login-btn:hover {
  color: var(--ppp-accent) !important;
}

/* The "primary" popup CTA button variant gets pill/accent treatment;
   plain Login/Logout/Dashboard stay as text links, matching blog style. */
.ppp-header-login-btn.ppp-header-btn-primary {
  background-color: var(--ppp-accent) !important;
  color: var(--ppp-text-light) !important;
  padding: 8px 20px;
  border-radius: 100px;
}

.ppp-header-login-btn.ppp-header-btn-primary:hover {
  background-color: var(--ppp-accent-hover) !important;
  color: var(--ppp-text-light) !important;
}

/* Cart icon sits in Row 1 now — reset any absolute/floated positioning
   the theme's own #mini-cart-count CSS may have assumed for its old
   single-row placement. */
.ppp-header-row-1-right #mini-cart-count {
  position: static !important;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ppp-header-row-1-right #mini-cart-count .nav-link {
  color: var(--ppp-nav-bg) !important;
  padding: 0;
}

/* ---- Row 2: Pill toggle / divider / category nav ---- */
.ppp-header-row-2,
.main-navbar.ppp-header-row-2,
.navbar.navbar-dark.ppp-header-row-2 {
  background-color: var(--ppp-row2-bg) !important;
  font-family: var(--ppp-font-family);
  position: relative;
  z-index: 5;
  /*border-style: solid;
  border-width: 1px 0px 1px 0px;
  border-color: var(--ppp-row2-border);*/
  height: auto !important; /* overrides app.css's fixed .navbar{height:65px}, which clips wrapped nav items */
  min-height: 65px;
}

.ppp-header-row-2 .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
@media (max-width: 767.98px){
  .ppp-header-row-2 .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
}
.ppp-pill-toggle {
  display: inline-flex;
  border-radius: 100px !important;
  border: 1px solid rgba(0, 0, 0, 0.15);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--ppp-text-light);
  padding: 3px 3px;
  gap: 6px
}

.ppp-pill-btn {
  /*padding: 8px 20px;*/
  color: var(--ppp-nav-bg) !important;
  text-decoration: none;
  /*font-size: 14px;
  font-weight: 600;*/
  white-space: nowrap;
  padding: 6px 10px; /* was 8px 20px */
	font-size: 13px;   /* was 14px */
	font-weight: 500;  /* was 600 */
}

.ppp-pill-btn:first-child {
  border-top-left-radius: 100px !important;
  border-bottom-left-radius: 100px !important;
  border-radius: 100px !important;
}

.ppp-pill-btn:last-child {
  border-top-right-radius: 100px !important;
  border-bottom-right-radius: 100px !important;
}

.ppp-pill-btn-active,
.ppp-pill-btn:hover {
	background-color: #3A3C48;
	color: var(--ppp-text-light) !important;
	border-radius: 100px !important;
  text-decoration: none!important
}
.ppp-pill-btn-active,
.ppp-pill-btn a:hover {
	background-color: #3A3C48;
	color: var(--ppp-text-light) !important;
	border-radius: 100px !important;
  text-decoration: none!important
}
a#blog-site-nav .ppp-pill-btn {
  color: var(--ppp-text-light) !important;
}
@media (min-width: 769px) {
  #main-nav a#blog-site-nav:hover {
  color: var(--ppp-text-light) !important;
}
  #main-nav a#blog-site-nav:hover {
  color: var(--ppp-text-light) !important;
}
}

/* ---- Mobile "SELECT A TOPIC" toggle, matching blog pattern ---- */
.ppp-mobile-toggle {
  display: none; /* shown only below the lg breakpoint, matching navbar-expand-lg */
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--ppp-nav-bg) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.ppp-mobile-toggle-label {
  color: var(--ppp-nav-bg) !important;
}

/* Bootstrap's default .navbar-toggler-icon is a white-line SVG, meant for
   dark backgrounds. Row 2 is now light, so it needs a dark-line version. */
.ppp-mobile-toggle .ppp-icon-hamburger,
.navbar-dark .ppp-mobile-toggle .ppp-icon-hamburger {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(58, 60, 72, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.ppp-icon-close {
  color: var(--ppp-nav-bg) !important;
}

@media (max-width: 767.98px) {
  .ppp-mobile-toggle {
    display: inline-flex;
  }
  .ppp-mobile-toggle-label {
    text-align: left;
  }
  .navbar-toggler-icon
 {
    display: inline-block;
    width: 2em;
    height: 2em;
 }
}
 @media (max-width: 464px) {
    .ppp-mobile-toggle-label {
        max-width: 60px;
    }
}
.ppp-icon-close {
  display: none;
  font-size: 24px;
  line-height: 1;
}

.ppp-mobile-toggle[aria-expanded="true"] .ppp-icon-hamburger {
  display: none;
}

.ppp-mobile-toggle[aria-expanded="true"] .ppp-icon-close {
  display: inline-block;
}

/* ---- Expanded mobile panel: anchors below Row 2 only (not the whole
   screen), full width, tan background, vertical category list ---- */
@media (max-width: 767.98px) {
  .ppp-mobile-toggle {
    position: relative;
    z-index: 1001; /* stays above the expanded panel so it's always visible/clickable */
  }

  /* Skip Bootstrap's animated height transition entirely — without this,
     there's a brief flash of default (unstyled, dark) collapsing content
     before it settles into our .show styling below. */
  .ppp-header-row-2 #navbarNavDropdown.collapsing {
    transition: none !important;
    height: auto !important;
  }

  .ppp-header-row-2 #navbarNavDropdown.show {
    width: 100%;
    position: fixed;
    top: 160px; /* adjust if Row 1 + Row 2 combined height changes */
    right: 0;
    bottom: 0;
    background-color: #FEF4ED !important; /* light peach/tan — confirm exact hex */
    z-index: 1000;
    padding: 24px;
    overflow-y: auto;
    display: block !important;
    height: fit-content;
  }

  .ppp-header-row-2 #navbarNavDropdown.show .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    position: relative;
    right: 0;
    width: 250px;
  }

  .ppp-header-row-2 #navbarNavDropdown.show .nav-link {
    color: var(--ppp-accent) !important;
    font-size: 18px;
    font-weight: 500;
  }
}

.ppp-header-divider {
  width: 1px;
  align-self: stretch;
  background-color: rgba(58, 60, 72, 0.2); /* dark, low-opacity — visible on light Row 2 bg now */
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .ppp-header-row-2 #navbarNavDropdown {
    display: flex;
    flex-wrap: wrap;
  }
}

.ppp-header-row-2 .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}

.main-navbar .nav-link {
  color: var(--ppp-nav-bg) !important;
  font-weight: 500;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link:focus {
  color: var(--ppp-accent) !important;
}

.main-navbar .btn-ppp,
.main-navbar .btn-login {
  background-color: var(--ppp-accent) !important;
  color: var(--ppp-text-light) !important;
  border: none !important;
  border-radius: 100px !important; /* matches blog's pill-shaped buttons */
  transition: background-color 0.2s ease;
}

.main-navbar .btn-ppp:hover,
.main-navbar .btn-login:hover {
  background-color: var(--ppp-accent-hover) !important;
}

/* Cart icon — leave functional markup untouched, just recolor to match */
.main-navbar #mini-cart-count .nav-link {
  color: var(--ppp-text-light) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.main-footer {
  background-color: var(--ppp-footer-bg) !important;
  font-family: var(--ppp-font-family)!important;
}

.main-footer .col-title,
.main-footer .text-primary-light {
  color: #ffffff !important;
  font-family: var(--ppp-font-family)!important;
  font-weight: 500;
  text-transform: uppercase;
}

.main-footer .footer-menu a,
.main-footer .sub-footer-menu a {
  color: var(--ppp-text-muted) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.main-footer .footer-menu a:hover,
.main-footer .sub-footer-menu a:hover {
  color: var(--ppp-text-light) !important;
}

.main-footer p.text-white,
.main-footer .sub-footer p {
  color: var(--ppp-text-muted) !important;
}

/* Newsletter card wrapper — exact values confirmed against blog site */
.main-footer .col-holder--newsletter {
  background-color: #FFFFFF20;
  border: 1px solid #FFFFFF2B;
  border-radius: 12px;
  padding: 30px 20px 20px 20px;
  height: fit-content;
}

/* Custom HubSpot footer newsletter form — replaces Gravity Forms */
.footer-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.footer-form-row {
  width: 100%;
}

.footer-form-row input[type="email"] {
  width: 100%;
  padding: 12px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ppp-text-light);
  font-size: 16px;
  box-sizing: border-box;
  font-family: var(--ppp-font-family);
}

.footer-form-row input::placeholder {
  color: var(--ppp-text-muted);
}

#footer-newsletter-btn {
  background: var(--ppp-accent) !important;
  border: none !important;
  border-radius: 24px !important;
  color: var(--ppp-text-light) !important;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 32px;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease;
  margin-top: 20px;
}

#footer-newsletter-btn:hover {
  background: var(--ppp-accent-hover) !important;
}

#footer-newsletter-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.footer-form-message {
  font-size: 13px;
  margin: 0;
  min-height: 16px;
  color: var(--ppp-text-light);
}

.footer-form-message.footer-form-error {
  color: #FF8A80;
}

.footer-newsletter-success p {
  color: var(--ppp-text-light) !important;
  font-size: 15px;
  margin: 0;
  text-align: center;
}
/* ============================================================
   FOOTER — additions for the rebuilt footer-content.php
   (logo/brand column + new Membership column, per Figma)
   Appended to store-design-override.css — no SCSS/gulp rebuild
   required since this loads after child-theme.min.css.
   ============================================================ */

.main-footer .footer-logo {
	height: 30px;
	width: auto;
	display: block;
	margin-bottom: 16px;
}

.main-footer .footer-desc {
	color: var(--ppp-text-muted, rgba(255, 255, 255, 0.7));
	line-height: 1.6;
	font-size: 14px!important;
}

.main-footer .col-holder--membership .footer-membership-text {
	color: var(--ppp-text-muted, rgba(255, 255, 255, 0.7));
	font-size: 15px!important;
	line-height: 1.5;
	margin-bottom: 1rem;
}
.main-footer .big-container p {
    font-size: 14px!important;
}

/* Pill button — matches the blog site's rounded pill radius */
.main-footer .footer-btn-pill {
	display: inline-block;
	background: var(--ppp-accent) !important;
	color: var(--ppp-text-light, #fff) !important;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	border: none;
	border-radius: 24px;
	padding: 12px 24px;
	transition: background 0.2s ease;
}

.main-footer .footer-btn-pill:hover {
	background: var(--ppp-accent-hover) !important;
}

.main-footer .footer-copyright {
	margin: 0;
	color: var(--ppp-text-muted, rgba(255, 255, 255, 0.6));
	font-size: 0.85rem;
}

.main-footer .sub-footer-menu.list-inline {
	margin-bottom: 0;
}
/* app.css overrides*/
.main-footer .row-holder .row {
    width: 100%;
    padding: 0 30px;
    margin: 0 auto;
}
/* ============================================================
   FOOTER ROW SPACING
   Moved here instead of editing app.css directly — app.css is
   gulp's compiled OUTPUT, not source, so hand-edits there get
   silently lost on the next build. This file loads after it in
   the enqueue order, so it wins the cascade without !important.

   Each row in footer-content.php now has its own distinct class
   (.main-footer-row, .footer-links-row, .sub-footer-row) instead
   of the bare .row selector, so rules here only ever hit the row
   they're meant for — a bare ".row-holder .row" selector was
   matching the nested Explore/Company row too, which had its own
   layout broken as a result.
   ============================================================ */

/* Top-level footer row (brand / links / membership / newsletter) */
.main-footer .row-holder {
	padding: 0 30px;
}

.main-footer .row-holder .main-footer-row {
	width: 100%;
	margin: 0 auto; /* confirmed working once padding lives on .row-holder instead of stacking on .row itself */
}
/* ============================================================
   FOOTER MEMBERSHIP SUB-SECTION FIXES
   Old rule was scoped to .col-holder--membership .footer-membership-text,
   but that wrapper no longer exists after the footer restructure —
   the paragraph is now a plain child of the Company column, so the
   old rule matched nothing and the text fell back to the default
   bright white body color.
   ============================================================ */

.main-footer .footer-membership-text {
	font-family: "Inter Tight", Sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #FFFFFF65;
}

.main-footer .big-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Sub-footer (copyright + legal links) — was a sibling of
   .row-holder, not a descendant, so it never inherited the 30px
   inset above and sat flush against the edges instead. Matching
   it here so it lines up with the columns above it. */
.main-footer .sub-footer {
	padding: 0 30px;
  padding-top: 30px;
  border-top:1px solid #FFFFFF65;
}
.main-footer .footer-links-row {
	margin: 0 -20px;
}
.col-holder.col-holder--brand {
    padding: 0px;
    margin: 0px !important;
}
.col-holder-group.col-holder-group--links {
    padding: 0px;
    margin: 0px !important;
}
.col-holder-group.col-holder--membership {
    padding: 0px;
    margin: 0px !important;
}
.col-holder-group.col-holder--newsletter {
    padding: 0px;
    margin: 0px !important;
}
 
/* Force the copyright/legal-links columns to stack below the lg
   breakpoint. They're already col-12 col-lg-6 in the markup, which
   should stack automatically — but something elsewhere in this
   theme's CSS is very likely forcing flex-wrap: nowrap on rows
   generally (same pattern intentionally used on the header's own
   .container-fluid earlier), defeating Bootstrap's default wrap
   behavior. Explicit rule here so it can't be silently overridden. */
@media (max-width: 991.98px) {
	.main-footer .sub-footer-row {
		flex-direction: column;
	}
	.main-footer .sub-footer-col {
		width: 100%;
		text-align: left !important; /* reset the desktop-only right-align */
	}
  .main-footer .sub-footer-menu.list-inline {
    display: inline-flex;
    gap: 16px;
  }
}
/* ============================================================
   FOOTER RESTRUCTURE — 30% / 45% / 25% columns
   Bootstrap's 12-column grid can't express 30/45/25 as whole
   columns, so overriding flex-basis/max-width directly with exact
   percentages instead — the col-lg-* classes stay in the markup
   for gutter/padding behavior, this just resizes them.
   ============================================================ */

@media (min-width: 992px) {
	.main-footer .col-holder--brand {
		flex: 0 0 30%;
		max-width: 30%;
	}

	.main-footer .col-holder-group--links {
		flex: 0 0 45%;
		max-width: 45%;
	}

	.main-footer .col-holder--newsletter {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* Membership sub-section inside Company — was its own column with a
   filled pill button before; now a plain text link with an arrow,
   matching the updated blog footer. */
.footer-membership-subheading {
	margin-top: 24px; /* separates it from the Company links above */
}

.footer-membership-link {
	color: var(--ppp-text-muted, rgba(255, 255, 255, 0.7));
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.footer-membership-link:hover {
	color: var(--ppp-text-muted, rgba(255, 255, 255, 0.7));
}

/* footer-btn-pill (the old filled-button style) is no longer used
   by Membership, but left defined in case anything else references
   it — not removed. */

/* ============================================================
   LOGGED-IN SIDEBAR OFFSET
   #sidebar-nav is position: fixed at desktop widths, so it's out
   of document flow and overlaps whatever's underneath it (header
   logo/login stacking, footer columns squishing, etc). Nothing
   currently pushes the rest of the page over to make room for it.
   This adds that missing offset, scoped to logged-in users only,
   matching the sidebar's actual computed width (220px, confirmed
   via DevTools — the coded 250px in its CSS isn't what renders)
   and its 768px breakpoint.
   ============================================================ */

@media (min-width: 768px) {
	body.logged-in .wrapper#page-wrapper {
		/*padding-left: 220px;*/
	}
}

/* Sidebar collapses/hides below 768px (per its own second ruleset),
   so remove the offset there or content gets an orphaned gap. */
@media (max-width: 767px) {
	body.logged-in .wrapper#page-wrapper {
		padding-left: 0;
	}
}
/* ============================================================
   PRODUCT CARD (.ppp-product-card)
   .ppp-product-card is now just the <li> itself — a positioning
   anchor for the Digital Product badge, with NO overflow constraint
   so the badge can overlap the top edge. All the actual card
   styling (background, border, rounded corners, overflow clipping,
   flex layout) now lives on .ppp-product-card-inner, the new wrapper
   div that holds everything else.
   ============================================================ */

.ppp-product-card {
	position: relative;
	overflow: visible;
}

.ppp-product-card-inner {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--ppp-row2-border);
	height: 100%;
}

.ppp-product-card-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	background: #fff;
	padding: 2px 12px;
    border-radius: 16px;
    width: fit-content;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ppp-accent);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.product-column .woocommerce-LoopProduct-link .image-holder {
	position: relative;
	padding: 15px;
	margin-bottom: 1rem;
	text-align: center;
	/*border-radius: 20px;*/
	background-color: #f3f4f6;
}

/* WooCommerce wraps thumbnail + eyebrow + title + price in this <a> —
   now a direct child of .ppp-product-card-inner, not .ppp-product-card
   itself, since everything moved one level deeper. */
.ppp-product-card-inner > a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	flex: 1;
}

.ppp-product-card-inner > a img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	display: block;
}

.ppp-product-card-eyebrow {
	margin: 16px 16px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ppp-accent);
	font-family: var(--ppp-font-family);
}

.ppp-product-card .woocommerce-loop-product__title {
	margin: 0 16px 8px;
	font-size: 16px;
	font-weight: 600;
	font-family: var(--ppp-heading-font-family);
	color: #1a1a2e;
}

.ppp-product-card .price {
	margin: 0 16px 16px;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a2e;
}

/* Add to Cart renders AFTER the </a> closes — sits outside the link,
   flush to the bottom of the card via margin-top: auto, now within
   .ppp-product-card-inner's flex column instead of .ppp-product-card's. */
.ppp-product-card .button,
.ppp-product-card a.add_to_cart_button,
.ppp-product-card a.button {
	margin: auto 16px 16px;
	display: inline-block;
	text-align: center;
	background: var(--ppp-accent) !important;
	color: #fff !important;
	border-radius: 24px !important;
	padding: 10px 20px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}

.ppp-product-card .button:hover,
.ppp-product-card a.add_to_cart_button:hover,
.ppp-product-card a.button:hover {
	background: var(--ppp-accent-hover) !important;
}
/* ============================================================
   STOREFRONT — tabs, sidebar, product grid
   ============================================================ */

.ppp-store-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0;
}

.ppp-store-tab {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	font-family: var(--ppp-font-family);
}

.ppp-store-tab.is-active {
	background: #1a1a2e;
	color: #fff;
	border-color: #1a1a2e;
}

.ppp-store-body {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.ppp-store-sidebar {
	flex: 0 0 220px;
}

.ppp-store-sidebar-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b6f80;
	margin-bottom: 12px;
}

.ppp-store-topic-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.ppp-store-topic-item {
	margin-bottom: 8px;
}

.ppp-store-topic-item.is-hidden {
	display: none;
}

.ppp-store-topic-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

.ppp-store-show-more {
	background: none;
	border: none;
	color: var(--ppp-accent);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}

.ppp-store-main {
	flex: 1;
	min-width: 0;
}

.ppp-store-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 12px;
}
product .entry-summary .product-primary-cat {
    display: inline-block;
    text-transform: uppercase;
    font-family: "Inter Tight", Sans-serif;
    font-weight: 400;
    margin-bottom: .5rem!important;
    color: #4F799C;
}

.ppp-store-heading {
	font-family: var(--ppp-heading-font-family);
	font-size: 22px;
	margin: 0;
}

.ppp-store-sort select {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
	font-family: var(--ppp-font-family);
}

.ppp-store-grid-wrap {
	position: relative;
}

/* Overrides WooCommerce's default .products (float/columns-based)
   layout with a real CSS grid — this selector combination needs to
   win over app.css's .products rules, so keep it loading after
   child-theme.min.css same as everything else in this file. */
.ppp-store-grid.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: opacity 0.15s ease;
}

/*.ppp-store-loading {
	text-align: center;
	padding: 20px;
	font-size: 14px;
	color: #6b6f80;
}*/
/* ============================================================
   AJAX LOADING SPINNER — now a centered overlay, not a static
   element below the grid. Sits directly on top of the dimmed
   product grid, staying in view regardless of scroll position.
   ============================================================ */

.ppp-store-grid-wrap {
	position: relative; /* anchor point for the absolutely-positioned spinner below */
}

.ppp-store-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5; /* sits above the dimmed (opacity: 0.5) grid content */
}

.ppp-store-loading::after {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	border: 3px solid #e0e0e0;
	border-top-color: var(--ppp-accent, #A5593C);
	border-radius: 50%;
	animation: ppp-spin 0.7s linear infinite;
}

@keyframes ppp-spin {
	to {
		transform: rotate(360deg);
	}
}
@media (max-width: 991.98px) {
	.ppp-store-body {
		flex-direction: column;
	}
	.ppp-store-sidebar {
		flex: 0 0 auto;
		width: 100%;
	}
	.ppp-store-grid.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.ppp-store-grid.products {
		grid-template-columns: 1fr;
	}
}
/* ============================================================
   PRODUCT SECTIONS (formerly tabs)
   Matches woocommerce/single-product/tabs/tabs.php's rewritten
   markup — permanently-visible stacked sections instead of a
   click-to-switch tab UI.
   ============================================================ */

.ppp-product-sections {
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.ppp-product-section {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 32px;
}

.ppp-product-section-title {
	font-family: var(--ppp-heading-font-family);
	font-size: 22px;
	margin: 0 0 16px;
}

.ppp-product-section-content {
	font-size: 15px;
	line-height: 1.6;
}
/* ============================================================
   PRODUCT SECTIONS (formerly tabs)
   Matches woocommerce/single-product/tabs/tabs.php's rewritten
   markup — permanently-visible stacked sections instead of a
   click-to-switch tab UI.
   ============================================================ */

.ppp-product-sections {
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	clear: both;
}

.ppp-product-section {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 32px;
}

.ppp-product-section-title {
	font-family: var(--ppp-heading-font-family);
	font-size: 22px;
	margin: 0 0 16px;
}

.ppp-product-section-content {
	font-size: 15px;
	line-height: 1.6;
}

/* Details section — checkmarked list per Figma, in case its content
   is a plain <ul><li> (won't affect anything if it isn't). */
.ppp-product-section--details ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ppp-product-section--details ul li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
}

.ppp-product-section--details ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--ppp-accent);
	font-weight: 700;
}

/* Reviews section already has its own internal structure (avatars,
   star ratings, etc from reviews_tab_callback()) — this just ensures
   it doesn't fight the new section spacing. */
.ppp-product-section--reviews .woocommerce-Reviews {
	margin: 0;
}

/* Reviews section already has its own internal structure (avatars,
   star ratings, etc from reviews_tab_callback()) — this just ensures
   it doesn't fight the new section spacing. */
.ppp-product-section--reviews .woocommerce-Reviews {
	margin: 0;
}
.product-breadcrumbs-holder {
    background: transparent !important;
    margin-bottom: 1rem;
}
.woocommerce-breadcrumb {
    font-size: 14px !important;
    padding: 2rem 0;
    font-weight: 700;
    color: #A5593C;
}
#outer-wrapper .product-breadcrumbs-holder .woocommerce-breadcrumb a {
    font-size: 14px !important;
    font-weight: 400;
    color: #5b5f70 !important;
}
#outer-wrapper .woocommerce-breadcrumb span {
    color: #5b5f70 !important;
}
.product .entry-summary .price {
    margin-top: .75rem;
    color: #3A3C48;
    font-size: 28px;
    font-family: var(--ppp-heading-font-family);
}
.btn-ppp:not(.btn-outline), .btn-primary:not(.btn-outline), .product .entry-summary button:not(.btn-outline) {
    background: #A5593C;
    border-radius: 30px;
}
.btn-ppp:not(.btn-outline):hover, .btn-primary:not(.btn-outline):hover, .product .entry-summary button:not(.btn-outline):hover
Specificity: (0,4,1)
 {
    background-color: #8A4730 !important;
}
.product-details-holder .comment-respond input[type="submit"] {
    border: none !important;
    background: #A5593C;
    border-radius: 30px;
}
.related.products>h2, .related.products>h3, .single-product .up-sells.products>h2, .single-product .up-sells.products>h3 {
	font-family: var(--ppp-heading-font-family);
	font-size: 22px;
}
span#reply-title {
  	font-family: var(--ppp-heading-font-family);
}
/* ============================================================
   MEMBERSHIP UPSELL BOX (single-product page)
   ============================================================ */

.ppp-membership-upsell {
	background: #3a3c48;
	color: #fff;
	border-radius: 12px;
	padding: 20px 24px;
	margin-top: 20px;
}

.ppp-membership-upsell-heading {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 8px;
}

.ppp-membership-upsell-body {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 16px;
}

.ppp-membership-upsell-cta {
	display: inline-block;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}

.ppp-membership-upsell-cta:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.ppp-membership-upsell-note {
	background: #fbf0e4;
	color: #6b5138;
	font-size: 13px;
	padding: 12px 16px;
	border-radius: 8px;
	margin-top: 10px;
}
.ppp-save-for-later {
	background: transparent !important;
	border: 1px solid rgba(0, 0, 0, 0.25) !important;
	border-radius: 999px !important;
	padding: 12px 24px;
	font-weight: 600;
	font-size: 15px;
	color: #1a1a2e !important;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
	margin-left: 12px;
	box-shadow: none !important;
}
 
.ppp-save-for-later:hover {
	border-color: rgba(0, 0, 0, 0.45);
}
 
.ppp-save-for-later.is-saved {
	background: #f5f5f5;
	border-color: var(--ppp-accent);
	color: var(--ppp-accent);
}
 
.ppp-saved-items-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
 
@media (max-width: 991.98px) {
	.ppp-saved-items-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* Reviews section already has its own internal structure (avatars,
   star ratings, etc from reviews_tab_callback()) — this just ensures
   it doesn't fight the new section spacing. */
.ppp-product-section--reviews .woocommerce-Reviews {
	margin: 0;
}
 
/* Reviews collapse — Figma shows only the first 2 with a "show more"
   link, but there's no dedicated reviews page to link out to. This
   hides everything past the 2nd <li> and reveals it in place on
   click, working identically for both the curated-ACF review list
   and the real wp_list_comments() output, since both render into
   the same .ppp-reviews-list <ol> — no PHP query changes needed. */
.ppp-reviews-list li:nth-child(n + 3) {
	display: none;
}
 
.ppp-reviews-list.is-expanded li:nth-child(n + 3) {
	display: block;
}
 
.ppp-show-more-reviews {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	margin-top: 16px;
}
 
.ppp-show-more-reviews:hover {
	border-color: rgba(0, 0, 0, 0.4);
}
/* ============================================================
   MEMBERSHIP LANDING PAGE
   ============================================================ */

.ppp-membership-hero {
	background: #dbe7ee;
	padding: 30px 20px;
	text-align: left;
}

.ppp-membership-hero-inner {
	max-width: 640px;
	/*margin: 0 auto;*/
	padding-left: 5vw;
}

.ppp-membership-eyebrow {
	color: var(--ppp-secondary);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.ppp-membership-headline {
	font-family: var(--ppp-heading-font-family);
	font-size: 42px;
	line-height: 1.15;
	margin: 0 0 16px;
}

.ppp-membership-subtext {
	font-size: 16px;
	line-height: 1.6;
	color: #555;
}

/* Pricing cards */
.ppp-membership-pricing {
	padding: 48px 5vw;
	max-width: 1000px;
	margin: 0 auto;
}

.ppp-pricing-row {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.ppp-pricing-card {
	flex: 1 1 400px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	padding: 28px;
	position: relative;
  display: flex;
  flex-direction: column;
}

.ppp-pricing-card--practitioner {
	border-color: var(--ppp-accent);
}

.ppp-pricing-badge {
	position: absolute;
	top: -12px;
	left: 28px;
	background: #f0e4d4;
	color: #8a6a3a;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
}

.ppp-pricing-plan-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #6b6f80;
	margin: 8px 0 4px;
}

.ppp-pricing-price {
	font-family: var(--ppp-heading-font-family);
	font-size: 36px;
	margin: 0 0 4px;
}

.ppp-pricing-price span {
	font-size: 16px;
	font-weight: 400;
	color: #6b6f80;
}

.ppp-pricing-tagline {
	font-size: 14px;
	color: var(--ppp-accent);
	font-weight: 600;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ppp-pricing-features {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.ppp-pricing-features li {
	position: relative;
	padding: 12px 0 12px 28px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 14px;
	line-height: 1.5;
}

.ppp-pricing-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 12px;
	color: var(--ppp-accent);
	font-weight: 700;
}

.ppp-pricing-cta {
	display: block;
	text-align: center;
	border-radius: 999px;
	padding: 12px 24px;
	font-weight: 600;
	text-decoration: none;
  margin-top: auto
}

.ppp-pricing-cta--filled {
	background: var(--ppp-accent);
	color: #fff !important;
}

.ppp-pricing-cta--filled:hover {
	background: var(--ppp-accent-hover);
}

.ppp-pricing-cta--outline {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.25);
	color: #1a1a2e !important;
}

.ppp-pricing-cta--outline:hover {
	border-color: rgba(0, 0, 0, 0.45);
}

/* Free tools by topic */
.ppp-membership-free-tools {
	background: #eef0f2;
	padding: 32px 5vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
}

.ppp-free-tools-left h3 {
	font-family: var(--ppp-heading-font-family);
	font-size: 20px;
	margin: 0 0 4px;
}

.ppp-free-tools-left p {
	font-size: 14px;
	color: #555;
	margin: 0;
	max-width: 360px;
}

.ppp-free-tools-right {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ppp-topic-pill {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a2e;
	text-decoration: none;
}

.ppp-topic-pill--dark {
	background: #1a1a2e;
	color: #fff;
	border-color: #1a1a2e;
}
a.ppp-topic-pill.ppp-topic-pill--dark:hover {
    color: var(--ppp-accent) !important;
    background: #ffffff;
}

/* Popular products */
.ppp-membership-popular-products {
	padding: 48px 5vw;
	max-width: 1200px;
	margin: 0 auto;
}

.ppp-membership-popular-products h2 {
	font-family: var(--ppp-heading-font-family);
	font-size: 26px;
	margin: 0 0 8px;
}

.ppp-popular-products-subtext {
	color: #555;
	margin-bottom: 24px;
}

.ppp-popular-products-grid.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 991.98px) {
	.ppp-pricing-row {
		flex-direction: column;
	}
	.ppp-popular-products-grid.products {
		grid-template-columns: repeat(2, 1fr);
	}
	.ppp-membership-free-tools {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 575.98px) {
	.ppp-popular-products-grid.products {
		grid-template-columns: 1fr;
	}
	.ppp-membership-headline {
		font-size: 30px;
	}
}
/* ============================================================
   PRACTITIONER PAGE — FEATURED ARTICLES
   ============================================================ */

.ppp-featured-articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ppp-featured-article-card {
	background: #f0e4d0;
	border-radius: 12px;
	padding: 20px;
}

.ppp-featured-article-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 16px;
	background: #cddce6;
}

.ppp-featured-article-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #6b6f80;
	margin-bottom: 8px;
}

.ppp-featured-article-title {
	font-family: var(--ppp-heading-font-family);
	font-size: 18px;
	margin: 0 0 16px;
}

.ppp-featured-article-link {
	color: var(--ppp-accent);
	font-weight: 600;
	text-decoration: none;
}
.ppp-featured-article-meta {
	font-size: 13px;
	color: #6b6f80;
	margin: 0 0 8px;
}

@media (max-width: 991.98px) {
	.ppp-featured-articles-grid {
		grid-template-columns: 1fr;
	}
}
/* CART */
.page-template-template-checkout .return-to-shop a {
    appearance: none;
    height: auto;
    padding: 1rem 1.5rem !important;
    border-radius: 20px;
    background: var(--ppp-accent)!important;
    border-color: var(--ppp-accent)!important;
}
/* ============================================================
   STOREFRONT — TAB HERO
   ============================================================ */

/*.ppp-store-tab-hero {
	display: flex;
	gap: 32px;
	align-items: center;
	padding: 40px 5vw;
	background: #eaf1f4;
	flex-wrap: wrap;
	margin-bottom: 24px;
}*/
.ppp-store-tab-hero {
	background-color: #EDF3F6;
    background-image: url(https://positivepsystg.wpengine.com/wp-content/uploads/2026/05/Union1.svg);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
	display: flex;
	gap: 32px;
	padding: 40px 30px;

}

.ppp-store-tab-hero-left {
	/*flex: 1 1 400px;*/
  max-width: 1200px;
}
.ppp-store-sidebar {
	border: 1px solid #525565;
	border-radius: 20px;
	padding: 20px;
}
.ppp-store-tab-hero-eyebrow {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ppp-secondary, #4F799C);
	margin-bottom: 8px;
}

.ppp-store-tab-hero-headline {
	font-family: var(--ppp-heading-font-family);
	font-size: 32px;
	margin: 0 0 8px;
}

.ppp-store-tab-hero-subtext {
	color: #555;
	margin: 0;
}

.ppp-store-tab-hero-promo {
	max-width: 1200px;
	background: #fff;
	border: 1px solid #CAAF7C;
	border-radius: 10px;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 15px;
}

.ppp-store-tab-hero-promo-text {
	margin: 0;
	font-size: 14px;
	color: #6B6976;
	font-weight: 400!important;
}

.ppp-store-tab-hero-promo-text strong {
	display: block;
	margin-bottom: 4px;
	font-weight: 400!important;
}

.ppp-store-tab-hero-promo-cta {
	background: var(--ppp-accent);
	color: #fff !important;
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.ppp-store-tab-hero-promo-cta:hover {
    background: var(--ppp-accent-hover) !important;
}

/* Topic sub-count line, e.g. "Personal growth (8)" */
.ppp-store-subcount {
	font-size: 14px;
	color: #6b6f80;
	margin: 4px 0 0;
}

/* ============================================================
   PROMO BANNERS (New Arrivals / Second Purchase)
   ============================================================ */

.ppp-store-promo-banner {
	background: var(--ppp-nav-bg, #3a3c48);
	color: #fff;
	border-radius: 10px;
	padding: 24px 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin: 24px 0;
}

.ppp-store-promo-banner-text h3 {
	font-family: var(--ppp-heading-font-family);
	font-size: 20px;
	margin: 0 0 4px;
}

.ppp-store-promo-banner-text p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	margin: 0;
}

.ppp-store-promo-banner-cta {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff !important;
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ppp-store-promo-banner-cta:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   FEATURED PRODUCT STRIP (dashed border)
   ============================================================ */

.ppp-store-featured-strip {
	border: 1px dashed var(--ppp-accent);
	border-radius: 8px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 24px 0;
}

.ppp-store-featured-strip-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ppp-accent);
	margin: 0 0 2px;
}

.ppp-store-featured-strip-title {
	font-weight: 600;
	margin: 0;
}

.ppp-store-featured-strip-price {
	font-weight: 700;
	margin: 0;
}

.ppp-store-featured-strip-cta {
	color: var(--ppp-accent);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.ppp-store-tab-hero,
	.ppp-store-promo-banner,
	.ppp-store-featured-strip {
		flex-direction: column;
		align-items: flex-start;
	}
}
}
/* ============================================================
   LOAD MORE BUTTON ALL PRODUCTS
   ============================================================ */

.ppp-store-load-more-wrap {
	display: flex;
	justify-content: center;
	padding: 32px 0;
}

.ppp-store-load-more-btn {
	background: var(--ppp-accent);
	color: #fff;
	border: none;
	border-radius: 24px;
	padding: 12px 32px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.ppp-store-load-more-btn:hover {
	background: var(--ppp-accent-hover);
}

.ppp-store-load-more-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}