/* ==========================================================================
   Phoenix BioLabs — Widget Styles
   BEM naming: .ph-{widget}__{element}--{modifier}
   Dark mode: html.dark .ph-{widget}
   ========================================================================== */

/* =========================================================================
   ANNOUNCEMENT BANNER
   ========================================================================= */
.ph-announcement-banner {
    width: 100%;
    background: #000;
    color: #fff;
    text-align: center;
    padding: 0.375rem 1rem;
    font-family: var(--ph-font-sans);
    font-size: 0.625rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.ph-announcement-banner__text {
    color: inherit;
    text-decoration: none;
}

html.dark .ph-announcement-banner { background: var(--ph-zinc-900); color: var(--ph-text); }

/* =========================================================================
   HEADER BLOCK — Full-width section: eyebrow, heading, description
   Matches: section.relative.py-32.bg-zinc-50.dark:bg-zinc-900 (shop.html)
   ========================================================================= */
.ph-header-block {
    position: relative;
    overflow: hidden;
    background: var(--ph-zinc-50);
}

.ph-header-block__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 33.333%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    mix-blend-mode: overlay;
}

.ph-header-block__inner {
    max-width: var(--ph-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--ph-gutter);
    position: relative;
    z-index: 1;
    text-align: center;
}

.ph-header-block__eyebrow {
    display: block;
    font-family: var(--ph-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin-bottom: 1rem;
}

.ph-header-block__heading {
    font-family: var(--ph-font-display);
    font-size: clamp(2rem, 5vw, 3.75rem);
    margin: 1rem 0 1.5rem;
    line-height: 1.2;
}

.ph-header-block__desc {
    font-family: var(--ph-font-sans);
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 42rem;
    margin: 0 auto;
}

html.dark .ph-header-block               { background: var(--ph-zinc-900); }
html.dark .ph-header-block__eyebrow      { color: var(--ph-primary); }
html.dark .ph-header-block__heading     { color: var(--ph-text); }
html.dark .ph-header-block__desc        { color: var(--ph-text-muted); }

/* =========================================================================
   PH HEADER — Simple section heading (e.g. "Why Phoenix Biolabs?")
   Matches: section.py-20.bg-white.border-b > div.text-center.mb-16 (index.html)
   ========================================================================= */
.ph-header {
    background: #ffffff;
    border-bottom: 1px solid var(--ph-zinc-100);
}

.ph-header__wrap {
    max-width: var(--ph-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--ph-gutter);
}

.ph-header__inner {
    text-align: center;
}

.ph-header__title {
    font-family: var(--ph-font-display);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ph-text);
    margin: 0 0 1rem;
}

.ph-header__rule {
    display: inline-block;
    height: 1px;
    background: var(--ph-primary);
    /* Follows parent text-align for responsive alignment */
}

html.dark .ph-header                     { background: var(--ph-bg-dark); border-bottom-color: var(--ph-zinc-800); }
html.dark .ph-header__title              { color: var(--ph-text); }

/* =========================================================================
   HEADER NAV — Exact match for HTML: sticky nav, left links, center logo,
   right links + search/account/cart icons.
   ========================================================================= */
.ph-header-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ph-zinc-100);
}
html.dark .ph-header-nav {
    background: rgba(0, 0, 0, 0.8);
    border-bottom-color: var(--ph-zinc-900);
}

.ph-header-nav__inner {
    max-width: var(--ph-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ph-gutter);
    padding-right: var(--ph-gutter);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.ph-header-nav__left,
.ph-header-nav__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.ph-header-nav__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ph-header-nav__link {
    font-family: var(--ph-font-sans);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ph-text);
    text-decoration: none;
    transition: color var(--ph-trans-base);
}
.ph-header-nav__link:hover {
    color: var(--ph-primary);
}
html.dark .ph-header-nav__link {
    color: var(--ph-text);
}
html.dark .ph-header-nav__link:hover {
    color: var(--ph-primary);
}

.ph-header-nav__logo {
    height: 64px;
    width: auto;
    display: block;
}

.ph-header-nav__divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--ph-zinc-200);
    margin: 0 0.5rem;
}
html.dark .ph-header-nav__divider {
    background: var(--ph-zinc-800);
}

.ph-header-nav__theme-toggle,
.ph-header-nav__theme-toggle.ph-dark-toggle__btn {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50%;
    background: transparent !important;
    color: var(--ph-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--ph-trans-base), background var(--ph-trans-base);
    box-shadow: none !important;
}
.ph-header-nav__theme-toggle:hover {
    color: var(--ph-primary);
}
.ph-header-nav__theme-toggle .material-symbols-outlined {
    font-size: 1.25rem;
}
html.dark .ph-header-nav__theme-toggle {
    color: var(--ph-text);
}
html.dark .ph-header-nav__theme-toggle:hover {
    color: var(--ph-primary);
}

.ph-header-nav__icon {
    font-size: 1.25rem;
    color: var(--ph-text);
    text-decoration: none;
    transition: color var(--ph-trans-base);
}
.ph-header-nav__icon:hover {
    color: var(--ph-primary);
}
html.dark .ph-header-nav__icon {
    color: var(--ph-text);
}
html.dark .ph-header-nav__icon:hover {
    color: var(--ph-primary);
}

.ph-header-nav__cart-wrap {
    position: relative;
}

.ph-header-nav__cart-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 600;
    background: var(--ph-primary);
    color: #ffffff;
    border-radius: 9999px;
}

/* =========================================================================
   PH SITE HEADER — All-in-One: container with 1 widget in header template
   Layout: left nav | logo (absolute center) | right nav + divider + icons
   ========================================================================= */
.ph-site-header {
    width: 100%;
}
/* Prototype: max-w-7xl(1280px) px-6(24px) h-20(80px) space-x-6(24px) */
.ph-site-header__inner {
    --ph-nav-gap: 24px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    max-width: 1280px;
    width: 100%;
    height: 80px;
    margin: 0 auto;
    padding: 0 24px;
}

.ph-site-header__left,
.ph-site-header__right {
    flex: 1 1 33.33%;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--ph-nav-gap, 24px);
}

.ph-site-header__left {
    justify-content: flex-start;
}

.ph-site-header__right {
    justify-content: flex-end;
}

.ph-site-header__logo {
    flex: 0 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ph-site-header__logo a {
    display: inline-block;
    background: rgba(0, 0, 0, 0.8);
    padding: 5px;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.ph-site-header__logo a:hover {
    transform: scale(1.05);
}

.ph-site-header__logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.ph-site-header__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--ph-nav-gap, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ph-site-header__item,
.ph-site-header__item--active {
    font-family: var(--ph-font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.ph-site-header__item:hover,
.ph-site-header__item--active {
    color: var(--ph-primary);
}

.ph-site-header__divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--ph-zinc-200);
    margin: 0 4px;
}

html.dark .ph-site-header__divider {
    background: var(--ph-zinc-800);
}

.ph-site-header__icon {
    font-size: 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ph-site-header__icon:hover {
    color: var(--ph-primary);
}

.ph-site-header__cart-wrap {
    position: relative;
}

.ph-site-header__cart-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    background: var(--ph-primary);
    color: #fff;
    border-radius: 9999px;
}

.ph-site-header__placeholder {
    font-size: 12px;
    color: var(--ph-zinc-500);
    margin: 0;
}

/* --- Mobile menu (hamburger) — Hidden on desktop; shown only in mobile media queries --- */
.ph-site-header__menu-toggle {
    display: none !important; /* Base: always hidden; media queries override in mobile breakpoints only */
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: transparent !important;
    color: inherit;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}
.ph-site-header__menu-toggle:hover {
    background: rgba(197, 160, 89, 0.1) !important;
    color: var(--ph-primary);
}
.ph-site-header__menu-toggle:focus {
    outline: 2px solid var(--ph-primary);
    outline-offset: 2px;
}
.ph-site-header__menu-toggle:focus:not(:focus-visible) {
    outline: none;
}
.ph-site-header__menu-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
}
/* Override any theme/Elementor defaults (e.g. pink focus) — use brand colors */
#ph-nav .ph-site-header__menu-toggle,
nav.ph-site-header .ph-site-header__menu-toggle {
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
}
html.dark #ph-nav .ph-site-header__menu-toggle,
html.dark nav.ph-site-header .ph-site-header__menu-toggle {
    color: var(--ph-zinc-100);
}
html.dark #ph-nav .ph-site-header__menu-toggle:hover,
html.dark nav.ph-site-header .ph-site-header__menu-toggle:hover {
    color: var(--ph-primary);
}
.ph-site-header__menu-toggle .ph-site-header__menu-toggle-icon--close {
    display: none;
}
.ph-site-header__menu-toggle.ph-site-header__menu-toggle--active .ph-site-header__menu-toggle-icon--open {
    display: none;
}
.ph-site-header__menu-toggle.ph-site-header__menu-toggle--active .ph-site-header__menu-toggle-icon--close {
    display: inline-flex;
}

.ph-site-header__mobile-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ph-zinc-200);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 1rem 0;
}
html.dark .ph-site-header__mobile-panel {
    background: rgba(0, 0, 0, 0.98);
    border-bottom-color: var(--ph-zinc-800);
}
.ph-site-header__mobile-panel:not([hidden]) {
    display: block;
}
.ph-site-header__menu--mobile {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 1.5rem;
}
.ph-site-header__menu--mobile .ph-site-header__item {
    display: block;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--ph-zinc-100);
}
html.dark .ph-site-header__menu--mobile .ph-site-header__item {
    border-bottom-color: var(--ph-zinc-800);
}
.ph-site-header__menu--mobile .ph-site-header__item:last-child {
    border-bottom: none;
}

body.ph-site-header-mobile-open {
    overflow: hidden;
}

/* Breakpoint: tablet (≤1024px) */
@media (max-width: 1024px) {
    .ph-site-header--mobile-dropdown-tablet.ph-site-header--mobile-toggle .ph-site-header__menu-toggle {
        display: flex !important;
    }
    .ph-site-header--mobile-dropdown-tablet .ph-site-header__left .ph-site-header__menu,
    .ph-site-header--mobile-dropdown-tablet .ph-site-header__right .ph-site-header__menu {
        display: none !important;
    }
    .ph-site-header--mobile-dropdown-tablet.ph-site-header--mobile-toggle .ph-site-header__mobile-panel {
        display: none;
    }
    .ph-site-header--mobile-dropdown-tablet.ph-site-header--mobile-toggle .ph-site-header__mobile-panel:not([hidden]) {
        display: block;
    }
}

@media (min-width: 1025px) {
    .ph-site-header--mobile-dropdown-tablet .ph-site-header__menu-toggle,
    .ph-site-header--mobile-dropdown-tablet .ph-site-header__mobile-panel {
        display: none !important;
    }
    .ph-site-header--mobile-dropdown-tablet .ph-site-header__left .ph-site-header__menu,
    .ph-site-header--mobile-dropdown-tablet .ph-site-header__right .ph-site-header__menu {
        display: flex !important;
    }
}

/* Breakpoint: mobile (≤767px) */
@media (max-width: 767px) {
    .ph-site-header--mobile-dropdown-mobile.ph-site-header--mobile-toggle .ph-site-header__menu-toggle {
        display: flex !important;
    }
    .ph-site-header--mobile-dropdown-mobile .ph-site-header__left .ph-site-header__menu,
    .ph-site-header--mobile-dropdown-mobile .ph-site-header__right .ph-site-header__menu {
        display: none !important;
    }
    .ph-site-header--mobile-dropdown-mobile.ph-site-header--mobile-toggle .ph-site-header__mobile-panel {
        display: none;
    }
    .ph-site-header--mobile-dropdown-mobile.ph-site-header--mobile-toggle .ph-site-header__mobile-panel:not([hidden]) {
        display: block;
    }
}

@media (min-width: 768px) {
    .ph-site-header--mobile-dropdown-mobile .ph-site-header__menu-toggle,
    .ph-site-header--mobile-dropdown-mobile .ph-site-header__mobile-panel {
        display: none !important;
    }
    .ph-site-header--mobile-dropdown-mobile .ph-site-header__left .ph-site-header__menu,
    .ph-site-header--mobile-dropdown-mobile .ph-site-header__right .ph-site-header__menu {
        display: flex !important;
    }
}

/* mobile_extra (≤880px) and tablet_extra (≤1200px) - use Elementor defaults when available */
@media (max-width: 880px) {
    .ph-site-header--mobile-dropdown-mobile_extra.ph-site-header--mobile-toggle .ph-site-header__menu-toggle {
        display: flex !important;
    }
    .ph-site-header--mobile-dropdown-mobile_extra .ph-site-header__left .ph-site-header__menu,
    .ph-site-header--mobile-dropdown-mobile_extra .ph-site-header__right .ph-site-header__menu {
        display: none !important;
    }
    .ph-site-header--mobile-dropdown-mobile_extra .ph-site-header__mobile-panel {
        display: none;
    }
    .ph-site-header--mobile-dropdown-mobile_extra .ph-site-header__mobile-panel:not([hidden]) {
        display: block;
    }
}
@media (min-width: 881px) {
    .ph-site-header--mobile-dropdown-mobile_extra .ph-site-header__menu-toggle,
    .ph-site-header--mobile-dropdown-mobile_extra .ph-site-header__mobile-panel {
        display: none !important;
    }
    .ph-site-header--mobile-dropdown-mobile_extra .ph-site-header__left .ph-site-header__menu,
    .ph-site-header--mobile-dropdown-mobile_extra .ph-site-header__right .ph-site-header__menu {
        display: flex !important;
    }
}

@media (max-width: 1200px) {
    .ph-site-header--mobile-dropdown-tablet_extra.ph-site-header--mobile-toggle .ph-site-header__menu-toggle {
        display: flex !important;
    }
    .ph-site-header--mobile-dropdown-tablet_extra .ph-site-header__left .ph-site-header__menu,
    .ph-site-header--mobile-dropdown-tablet_extra .ph-site-header__right .ph-site-header__menu {
        display: none !important;
    }
    .ph-site-header--mobile-dropdown-tablet_extra .ph-site-header__mobile-panel {
        display: none;
    }
    .ph-site-header--mobile-dropdown-tablet_extra .ph-site-header__mobile-panel:not([hidden]) {
        display: block;
    }
}
@media (min-width: 1201px) {
    .ph-site-header--mobile-dropdown-tablet_extra .ph-site-header__menu-toggle,
    .ph-site-header--mobile-dropdown-tablet_extra .ph-site-header__mobile-panel {
        display: none !important;
    }
    .ph-site-header--mobile-dropdown-tablet_extra .ph-site-header__left .ph-site-header__menu,
    .ph-site-header--mobile-dropdown-tablet_extra .ph-site-header__right .ph-site-header__menu {
        display: flex !important;
    }
}

/* =========================================================================
   SECTION HEADER
   ========================================================================= */
.ph-section-header { text-align: center; }
.ph-section-header--left  { text-align: left; }
.ph-section-header--right { text-align: right; }

.ph-section-header__eyebrow {
    display: block;
    font-family: var(--ph-font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--ph-primary);
    margin-bottom: 1rem;
}

.ph-section-header__heading {
    font-family: var(--ph-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ph-text);
    margin-bottom: 1rem;
}

.ph-section-header__italic {
    font-family: var(--ph-font-serif);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}

.ph-section-header__rule {
    display: block;
    height: 1px;
    background: var(--ph-primary);
    margin-bottom: 1rem;
}

.ph-section-header--center .ph-section-header__rule { margin-left: auto; margin-right: auto; }
.ph-section-header--right  .ph-section-header__rule { margin-left: auto; }

.ph-section-header__sub {
    font-family: var(--ph-font-sans);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ph-text-muted);
    margin-top: 0.5rem;
}

html.dark .ph-section-header__heading    { color: var(--ph-text); }
html.dark .ph-section-header__eyebrow   { color: var(--ph-primary); }
html.dark .ph-section-header__italic    { color: var(--ph-text-muted); }
html.dark .ph-section-header__sub       { color: var(--ph-text-muted); }

/* =========================================================================
   DARK MODE TOGGLE
   ========================================================================= */
.ph-dark-toggle--fixed {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 60;
}

.ph-dark-toggle--inline { display: inline-block; }

.ph-dark-toggle__btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ph-zinc-200);
    box-shadow: var(--ph-shadow-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--ph-trans-base), background var(--ph-trans-base);
}

.ph-dark-toggle__btn:hover { transform: scale(1.1); }

.ph-dark-toggle__sun  { display: none; }
html.dark .ph-dark-toggle__sun  { display: block; }
html.dark .ph-dark-toggle__moon { display: none; }

html.dark .ph-dark-toggle__btn {
    background: var(--ph-bg-dark);
    border-color: var(--ph-zinc-800);
    color: var(--ph-text);
}

/* =========================================================================
   FEATURES GRID
   ========================================================================= */
.ph-features-grid-section {
    padding: var(--ph-section-py) 0;
    background: #fff;
    border-bottom: 1px solid var(--ph-border);
}

.ph-features-grid {
    display: grid;
    gap: 3rem;
    max-width: var(--ph-max-width);
    margin: 0 auto;
    padding: 0 var(--ph-gutter);
}

.ph-features-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ph-features-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ph-features-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .ph-features-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
    .ph-features-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ph-features-grid--cols-2,
    .ph-features-grid--cols-3,
    .ph-features-grid--cols-4 { grid-template-columns: 1fr; }
}

.ph-feature-item { text-align: center; }

.ph-feature-item__icon-wrap {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.5rem;
    background: var(--ph-primary-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ph-trans-base);
}

.ph-feature-item__icon {
    color: var(--ph-primary);
    transition: color var(--ph-trans-base);
}

.ph-feature-item:hover .ph-feature-item__icon-wrap { background: var(--ph-primary); }
.ph-feature-item:hover .ph-feature-item__icon       { color: #fff; }

.ph-feature-item__title {
    font-family: var(--ph-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: var(--ph-text);
}

.ph-feature-item__desc {
    font-family: var(--ph-font-sans);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--ph-text-muted);
}

html.dark .ph-features-grid-section     { background: var(--ph-bg-dark); border-color: var(--ph-zinc-800); }
html.dark .ph-feature-item__title       { color: var(--ph-text); }
html.dark .ph-feature-item__desc        { color: var(--ph-text-muted); }

/* =========================================================================
   PRODUCT CARD
   ========================================================================= */
.ph-product-card {
    border: 1px solid var(--ph-zinc-100);
    padding: var(--ph-card-p);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(250, 250, 250, 0.5);
    transition: box-shadow var(--ph-trans-base), border-color var(--ph-trans-base);
}

.ph-product-card:hover {
    box-shadow: var(--ph-shadow-xl);
    border-color: var(--ph-primary);
}

.ph-product-card__image-wrap {
    aspect-ratio: 4/5;
    width: 100%;
    margin-bottom: 1.5rem;
    position: relative;
    background: #fff;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ph-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ph-product-card__image--zoom {
    transition: transform 0.7s ease-in-out;
}
.ph-product-card:hover .ph-product-card__image--zoom { transform: scale(1.1); }

.ph-product-card__badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.5rem;
    font-family: var(--ph-font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.25rem 0.5rem;
    background: var(--ph-primary);
    color: #fff;
    z-index: 1;
}

.ph-product-card__name {
    font-family: var(--ph-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
    color: var(--ph-text);
}

.ph-product-card__sub {
    font-family: var(--ph-font-serif);
    font-style: italic;
    font-size: 0.5625rem;
    color: var(--ph-text-muted);
    margin-bottom: 1rem;
}

.ph-product-card__actions {
    width: 100%;
    margin-top: auto;
}

.ph-product-card__actions--both {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

.ph-product-card__actions--buy_checkout .ph-product-card__cta {
    margin-top: auto;
}

.ph-product-card__cta {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--ph-zinc-200);
    font-family: var(--ph-font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: background var(--ph-trans-base), color var(--ph-trans-base), border-color var(--ph-trans-base);
}

.ph-product-card__actions--view .ph-product-card__cta,
.ph-product-card__actions--buy .ph-product-card__cta {
    margin-top: auto;
}

.ph-product-card:hover .ph-product-card__cta--view,
.ph-product-card:hover .ph-product-card__cta--buy {
    background: #000;
    color: #fff;
    border-color: #000;
}

.ph-product-card__cta--buy {
    border-color: var(--ph-primary);
}

/* Dark Mode — !important guards against stale Elementor CSS that may lack html.dark scoping */
html.dark .ph-product-card               { border-color: var(--ph-zinc-800) !important; background: var(--ph-card-bg) !important; }
html.dark .ph-product-card__image-wrap   { background: var(--ph-bg-dark) !important; }
html.dark .ph-product-card__name         { color: var(--ph-text) !important; }
html.dark .ph-product-card__sub          { color: var(--ph-text-muted) !important; }
html.dark .ph-product-card__cta          { border-color: var(--ph-zinc-800) !important; color: var(--ph-text) !important; }
html.dark .ph-product-card__cta--buy     { border-color: var(--ph-primary) !important; color: var(--ph-primary) !important; }
html.dark .ph-product-card:hover .ph-product-card__cta--view,
html.dark .ph-product-card:hover .ph-product-card__cta--buy { background: var(--ph-text) !important; color: var(--ph-bg-dark) !important; border-color: var(--ph-text) !important; }

/* =========================================================================
   PRODUCT GRID
   ========================================================================= */
.ph-product-grid__empty {
    text-align: center;
    padding: 3rem var(--ph-gutter);
    color: var(--ph-text-muted);
    font-family: var(--ph-font-sans);
    font-size: 0.875rem;
}

.ph-product-grid-section {
    padding: var(--ph-section-py) 0;
    background: var(--ph-zinc-50);
}

.ph-product-grid__header {
    max-width: var(--ph-max-width);
    margin: 0 auto 4rem;
    padding: 0 var(--ph-gutter);
    text-align: center;
}

.ph-product-grid__header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.ph-product-grid__eyebrow {
    font-size: 0.625rem;
    font-family: var(--ph-font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--ph-primary);
    margin-bottom: 0.5rem;
}

.ph-product-grid__heading {
    font-family: var(--ph-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: 0.1em;
    color: var(--ph-text);
}

.ph-product-grid__subtitle {
    margin: 0.75rem auto 0;
    max-width: 780px;
    color: var(--ph-text-muted);
    font-family: var(--ph-font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ph-product-grid__view-all {
    font-family: var(--ph-font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    color: var(--ph-text);
    border-bottom: 1px solid var(--ph-zinc-200);
    padding-bottom: 0.5rem;
    transition: color var(--ph-trans-base), border-color var(--ph-trans-base);
}
.ph-product-grid__view-all:hover { color: var(--ph-primary); border-color: var(--ph-primary); }

.ph-product-grid {
    display: grid;
    gap: 2rem;
    max-width: var(--ph-max-width);
    margin: 0 auto;
    padding: 0 var(--ph-gutter);
}
.ph-product-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ph-product-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ph-product-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.ph-product-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1024px) {
    .ph-product-grid--cols-5,
    .ph-product-grid--cols-4,
    .ph-product-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ph-product-grid--cols-2,
    .ph-product-grid--cols-3,
    .ph-product-grid--cols-4,
    .ph-product-grid--cols-5 { grid-template-columns: 1fr; }
}

.ph-product-grid-pagination,
.ph-product-grid-load {
    max-width: var(--ph-max-width);
    margin: 2rem auto 0;
    padding: 0 var(--ph-gutter);
}

.ph-product-grid-pagination .page-numbers {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.ph-product-grid-pagination .page-numbers li a,
.ph-product-grid-pagination .page-numbers li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border: 1px solid var(--ph-zinc-200);
    color: var(--ph-text);
    text-decoration: none;
    font-family: var(--ph-font-sans);
    font-size: 0.75rem;
    transition: border-color var(--ph-trans-base), color var(--ph-trans-base), background var(--ph-trans-base);
}

.ph-product-grid-pagination .page-numbers .current {
    background: var(--ph-primary);
    border-color: var(--ph-primary);
    color: #fff;
}

.ph-product-grid-pagination .page-numbers li a:hover {
    color: var(--ph-primary);
    border-color: var(--ph-primary);
}

.ph-product-grid-load {
    text-align: center;
}

.ph-product-grid-load__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--ph-zinc-300);
    background: transparent;
    color: var(--ph-text);
    font-family: var(--ph-font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: border-color var(--ph-trans-base), color var(--ph-trans-base), background var(--ph-trans-base);
}

.ph-product-grid-load__btn:hover {
    border-color: var(--ph-primary);
    color: var(--ph-primary);
}

.ph-product-grid-load__btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ph-product-grid-load__status {
    margin: 0.75rem 0 0;
    min-height: 1.25rem;
    font-family: var(--ph-font-sans);
    font-size: 0.75rem;
    color: var(--ph-text-muted);
}

.ph-product-grid-load__sentinel {
    width: 100%;
    height: 1px;
}

html.dark .ph-product-grid-section       { background: var(--ph-surface) !important; }
html.dark .ph-product-grid__heading      { color: var(--ph-text) !important; }
html.dark .ph-product-grid__eyebrow      { color: var(--ph-primary) !important; }
html.dark .ph-product-grid__subtitle     { color: var(--ph-text-muted) !important; }
html.dark .ph-product-grid__view-all     { color: var(--ph-text) !important; border-bottom-color: var(--ph-zinc-800) !important; }
html.dark .ph-product-grid__view-all:hover { color: var(--ph-primary) !important; border-bottom-color: var(--ph-primary) !important; }
html.dark .ph-product-grid__empty        { color: var(--ph-text-muted) !important; }
html.dark .ph-product-grid-pagination .page-numbers li a,
html.dark .ph-product-grid-pagination .page-numbers li span { border-color: var(--ph-zinc-800); color: var(--ph-text); }
html.dark .ph-product-grid-pagination .page-numbers li a:hover { border-color: var(--ph-primary); color: var(--ph-primary); }
html.dark .ph-product-grid-load__btn { border-color: var(--ph-zinc-800); color: var(--ph-text); }
html.dark .ph-product-grid-load__btn:hover { border-color: var(--ph-primary); color: var(--ph-primary); }

/* =========================================================================
   PRODUCT GRID TABS
   ========================================================================= */
.ph-product-grid-tabs__header {
    margin-bottom: 2rem;
}

.ph-product-grid-tabs__header--hero .ph-product-grid__heading {
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: 0.08em;
}

.ph-product-grid-tabs__subtitle {
    margin: 0.75rem auto 0;
    max-width: 780px;
    color: var(--ph-text-muted);
    font-family: var(--ph-font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ph-product-grid-tabs {
    max-width: var(--ph-max-width);
    margin: 0 auto;
    padding: 0 var(--ph-gutter);
}

.ph-product-grid-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin: 0 0 1.5rem;
}

.ph-product-grid-tabs__tab {
    border: 1px solid var(--ph-zinc-300);
    background: transparent;
    color: var(--ph-text);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-family: var(--ph-font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all var(--ph-trans-base);
}

.ph-product-grid-tabs__tab:hover {
    border-color: var(--ph-primary);
    color: var(--ph-primary);
}

.ph-product-grid-tabs__tab.is-active {
    background: var(--ph-primary);
    border-color: var(--ph-primary);
    color: #fff;
}

.ph-product-grid-tabs__panel {
    display: none;
}

.ph-product-grid-tabs__panel.is-active {
    display: block;
}

.ph-product-card__price {
    margin: 0.25rem 0 0.75rem;
    color: var(--ph-text);
    font-family: var(--ph-font-sans);
    font-size: 0.875rem;
    font-weight: 700;
}

.ph-product-card__price del {
    opacity: 0.6;
    margin-right: 0.35rem;
}

.ph-product-card__price ins {
    text-decoration: none;
}

html.dark .ph-product-grid-tabs__subtitle {
    color: var(--ph-text-muted) !important;
}

html.dark .ph-product-grid-tabs__tab {
    border-color: var(--ph-zinc-800);
    color: var(--ph-text);
}

html.dark .ph-product-grid-tabs__tab:hover {
    border-color: var(--ph-primary);
    color: var(--ph-primary);
}

html.dark .ph-product-grid-tabs__tab.is-active {
    background: var(--ph-primary);
    border-color: var(--ph-primary);
    color: #fff;
}

html.dark .ph-product-card__price {
    color: var(--ph-text) !important;
}

/* =========================================================================
   HERO SLIDER
   ========================================================================= */
.ph-hero-slider {
    position: relative;
    height: 85vh;
    min-height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ph-hero-bg-light);
}

.ph-hero-slider__grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ph-hero-slider__viewport {
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.ph-hero-slider__track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ph-hero-slide,
.hero-slide {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.ph-hero-slide__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: var(--ph-max-width);
    margin: 0 auto;
    padding: 3rem var(--ph-gutter);
    width: 100%;
    height: 100%;
    min-height: 0;
}

@media (max-width: 1024px) {
    .ph-hero-slide__inner { grid-template-columns: 1fr; }
    .ph-hero-slide__visual { display: none; }
}

.ph-hero-slide__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-height: 0;
    overflow-y: auto;
}

.ph-hero-slide__badge {
    display: inline-block;
    background: var(--ph-primary-10);
    border: 1px solid var(--ph-primary-20);
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-family: var(--ph-font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ph-primary);
    width: fit-content;
}

.ph-hero-slide__heading {
    font-family: var(--ph-font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.05em;
    color: var(--ph-text);
    margin: 0;
}

.ph-hero-slide__heading-italic {
    font-family: var(--ph-font-serif);
    font-style: italic;
    color: var(--ph-zinc-500);
}

.ph-hero-slide__sub {
    font-family: var(--ph-font-sans);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--ph-zinc-800);
    margin: 0.5rem 0 0;
}

.ph-hero-slide__body {
    font-family: var(--ph-font-sans);
    font-size: 0.875rem;
    line-height: 1.75;
    letter-spacing: 0.025em;
    color: var(--ph-text-muted);
    max-width: 28rem;
}

.ph-hero-slide__stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #eab308;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ph-hero-slide__star-label {
    font-family: var(--ph-font-sans);
    font-weight: 700;
    color: var(--ph-zinc-600);
    margin-left: 0.5rem;
}

.ph-hero-slide__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ph-hero-slide__trust-item {
    display: flex;
    align-items: center;
    font-family: var(--ph-font-sans);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ph-text-muted);
}

.ph-trust-dot {
    width: 0.25rem;
    height: 0.25rem;
    background: var(--ph-primary);
    border-radius: 50%;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.ph-hero-slide__ctas {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 0.5rem;
}

/* Visual column */
.ph-hero-slide__visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.ph-hero-slide__frame {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 28rem;
    aspect-ratio: 3/4;
    background: #fff;
    box-shadow: var(--ph-shadow-2xl);
    padding: 1rem;
    border: 1px solid var(--ph-zinc-100);
    overflow: visible;
}

.ph-hero-slide__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ph-hero-slide__medallion {
    position: absolute;
    bottom: 3rem;
    right: -2rem;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-shadow: var(--ph-shadow-xl);
}

.ph-medallion-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.ph-hero-slide__glow {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: rgba(197, 160, 89, 0.08);
    filter: blur(48px);
    border-radius: 50%;
}

/* Controls */
.ph-hero-slider__controls {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.ph-hero-slider__control-btn {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--ph-zinc-200);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background var(--ph-trans-base), border-color var(--ph-trans-base), color var(--ph-trans-base);
}

.ph-hero-slider__control-btn:hover {
    background: var(--ph-primary);
    border-color: var(--ph-primary);
    color: #fff;
}

.ph-hero-slider__dots { display: flex; align-items: center; gap: 0.5rem; }

.ph-hero-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--ph-trans-base);
}
.ph-hero-dot--active   { background: var(--ph-primary); }
.ph-hero-dot--inactive { background: var(--ph-zinc-300); }
.ph-hero-dot--inactive:hover { background: rgba(197, 160, 89, 0.7); }

/* Dark mode */
html.dark .ph-hero-slider              { background: var(--ph-hero-bg-dark); }
html.dark .ph-hero-slide__heading      { color: var(--ph-text); }
html.dark .ph-hero-slide__sub          { color: var(--ph-text-muted); }
html.dark .ph-hero-slide__heading-italic { color: var(--ph-text-muted); }
html.dark .ph-hero-slide__body         { color: var(--ph-text-muted); }
html.dark .ph-hero-slide__frame        { background: var(--ph-zinc-900); border-color: var(--ph-zinc-800); }
html.dark .ph-hero-slider__control-btn { background: rgba(0,0,0,0.8); border-color: var(--ph-zinc-800); color: var(--ph-text); }
html.dark .ph-hero-dot--inactive       { background: var(--ph-zinc-600); }
html.dark .ph-hero-slide__star-label   { color: var(--ph-text-muted); }
html.dark .ph-hero-slide__trust-item   { color: var(--ph-text-muted); }

/* =========================================================================
   BATCH CERT SECTION
   ========================================================================= */
.ph-batch-cert-section {
    padding: var(--ph-section-py-lg) 0;
    background: var(--ph-zinc-50);
    overflow: hidden;
    position: relative;
}

.ph-batch-cert__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: var(--ph-max-width);
    margin: 0 auto;
    padding: 0 var(--ph-gutter);
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) { .ph-batch-cert__inner { grid-template-columns: 1fr; } }

.ph-batch-cert__left { position: relative; }

.ph-batch-cert__image-frame {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--ph-zinc-200);
    padding: 2rem;
    background: #fff;
    transition: transform var(--ph-trans-slow);
}

.ph-batch-cert__image-frame--tilt { transform: rotate(1deg); }
.ph-batch-cert__image-frame--tilt:hover { transform: rotate(0deg); }

.ph-batch-cert__image { width: 100%; height: 100%; object-fit: contain; }

.ph-batch-cert__floating-badge {
    position: absolute;
    bottom: -2rem;
    left: -2rem;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid var(--ph-zinc-100);
    box-shadow: var(--ph-shadow-2xl);
    max-width: 16rem;
}

.ph-batch-cert__badge-icon {
    font-size: 2.5rem;
    color: var(--ph-primary);
    display: block;
    margin-bottom: 1rem;
}

.ph-batch-cert__badge-title {
    font-family: var(--ph-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--ph-text);
}

.ph-batch-cert__badge-sub {
    font-family: var(--ph-font-sans);
    font-size: 0.75rem;
    color: var(--ph-text-muted);
    line-height: 1.5;
}

.ph-batch-cert__right { display: flex; flex-direction: column; gap: 2rem; }

.ph-batch-cert__heading {
    font-family: var(--ph-font-display);
    font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--ph-text);
}

.ph-batch-cert__body {
    font-family: var(--ph-font-sans);
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--ph-text-muted);
    letter-spacing: 0.025em;
}

html.dark .ph-batch-cert-section             { background: var(--ph-surface); }
html.dark .ph-batch-cert__image-frame        { background: var(--ph-zinc-900); border-color: var(--ph-zinc-800); }
html.dark .ph-batch-cert__floating-badge     { background: var(--ph-bg-dark); border-color: var(--ph-zinc-800); }
html.dark .ph-batch-cert__heading            { color: var(--ph-text); }
html.dark .ph-batch-cert__badge-title        { color: var(--ph-text); }
html.dark .ph-batch-cert__badge-sub          { color: var(--ph-text-muted); }
html.dark .ph-batch-cert__body               { color: var(--ph-text-muted); }

/* =========================================================================
   FAQ ACCORDION
   ========================================================================= */
.ph-faq-section {
    padding: var(--ph-section-py) 0;
    background: #fff;
}

.ph-faq-search-wrap {
    position: relative;
    max-width: 40rem;
    margin: 0 auto 3rem;
    padding: 0 var(--ph-gutter);
}

.ph-faq-search {
    width: 100%;
    padding: 1rem 3rem 1rem 1.5rem;
    background: #fff;
    border: 1px solid var(--ph-zinc-200);
    font-family: var(--ph-font-sans);
    font-size: 0.875rem;
    color: var(--ph-text);
    outline: none;
    transition: border-color var(--ph-trans-base);
    border-radius: var(--ph-radius);
}
.ph-faq-search:focus { border-color: var(--ph-primary); }

.ph-faq-search-icon {
    position: absolute;
    right: calc(var(--ph-gutter) + 1rem);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ph-zinc-400);
}

.ph-faq-groups {
    max-width: var(--ph-max-width);
    margin: 0 auto;
    padding: 0 var(--ph-gutter);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ph-faq-group {
    background: #fff;
    border: 1px solid var(--ph-zinc-100);
    padding: 2rem;
}

.ph-faq-group__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ph-faq-group__icon { font-size: 1.5rem; color: var(--ph-primary); }

.ph-faq-group__title {
    font-family: var(--ph-font-display);
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--ph-text);
}

.ph-faq-group__items { display: flex; flex-direction: column; }

.ph-faq-item { border-bottom: 1px solid var(--ph-zinc-100); }
.ph-faq-item:last-child { border-bottom: none; }

.ph-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 1rem;
    transition: background-color var(--ph-trans-base);
}
.ph-faq-question:hover {
    background-color: rgba(197, 160, 89, 0.06);
}
.ph-faq-question:hover h3,
.ph-faq-question:hover .ph-faq-icon {
    color: var(--ph-primary);
}

/* Override Elementor/browser/theme default focus/active colors — use brand gold, not pink */
.ph-faq-question:focus,
.ph-faq-question:active {
    outline: none !important;
    background-color: rgba(197, 160, 89, 0.08) !important;
    -webkit-tap-highlight-color: transparent;
}
.ph-faq-question:focus-visible {
    outline: 2px solid var(--ph-primary) !important;
    outline-offset: 2px;
}
.ph-faq-question:focus h3,
.ph-faq-question:focus-visible h3,
.ph-faq-question:active h3,
.ph-faq-question:focus .ph-faq-icon,
.ph-faq-question:focus-visible .ph-faq-icon,
.ph-faq-question:active .ph-faq-icon {
    color: var(--ph-primary) !important;
}

/* Open state — use brand gold, not pink (overrides external styles) */
.ph-faq-item.is-open .ph-faq-question {
    background-color: rgba(197, 160, 89, 0.08) !important;
}
.ph-faq-item.is-open .ph-faq-question h3,
.ph-faq-item.is-open .ph-faq-question .ph-faq-icon {
    color: var(--ph-primary) !important;
}

.ph-faq-question h3 {
    font-family: var(--ph-font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ph-text);
    margin: 0;
    transition: color var(--ph-trans-base);
}

.ph-faq-icon {
    color: var(--ph-text-muted);
    flex-shrink: 0;
    transition: transform var(--ph-trans-base), color var(--ph-trans-base);
}
.ph-faq-icon.is-active { transform: rotate(180deg); }

.ph-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.ph-faq-item.is-open .ph-faq-answer { max-height: 1000px; }

.ph-faq-answer__inner {
    padding: 0 0 1rem;
    font-family: var(--ph-font-sans);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--ph-text-muted);
}

html.dark .ph-faq-section             { background: var(--ph-surface); }
html.dark .ph-faq-group               { background: var(--ph-charcoal); border-color: var(--ph-zinc-800); }
html.dark .ph-faq-group__title        { color: var(--ph-text); }
html.dark .ph-faq-question h3         { color: var(--ph-text); }
html.dark .ph-faq-question:hover      { background-color: rgba(197, 160, 89, 0.12); }
html.dark .ph-faq-question:hover h3,
html.dark .ph-faq-question:hover .ph-faq-icon { color: var(--ph-primary); }
html.dark .ph-faq-question:focus,
html.dark .ph-faq-question:active     { background-color: rgba(197, 160, 89, 0.12) !important; outline: none !important; }
html.dark .ph-faq-question:focus-visible { background-color: rgba(197, 160, 89, 0.12) !important; outline: 2px solid var(--ph-primary) !important; outline-offset: 2px; }
html.dark .ph-faq-question:focus h3,
html.dark .ph-faq-question:focus-visible h3,
html.dark .ph-faq-question:active h3,
html.dark .ph-faq-question:focus .ph-faq-icon,
html.dark .ph-faq-question:focus-visible .ph-faq-icon,
html.dark .ph-faq-question:active .ph-faq-icon { color: var(--ph-primary) !important; }
html.dark .ph-faq-item.is-open .ph-faq-question { background-color: rgba(197, 160, 89, 0.12) !important; }
html.dark .ph-faq-item.is-open .ph-faq-question h3,
html.dark .ph-faq-item.is-open .ph-faq-question .ph-faq-icon { color: var(--ph-primary) !important; }
html.dark .ph-faq-icon                { color: var(--ph-text-muted); }
html.dark .ph-faq-item                { border-color: var(--ph-zinc-800); }
html.dark .ph-faq-answer__inner       { color: var(--ph-text-muted); }
html.dark .ph-faq-search              { background: var(--ph-input-bg); border-color: var(--ph-zinc-800); color: var(--ph-text); }
html.dark .ph-faq-search-icon         { color: var(--ph-text-muted); }

/* =========================================================================
   TRUST BADGES
   ========================================================================= */
.ph-trust-badges { display: flex; }
.ph-trust-badges--list { flex-direction: column; gap: 1rem; }
.ph-trust-badges--row  { flex-direction: row; flex-wrap: wrap; gap: 1.5rem; }

.ph-trust-badge {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ph-trust-badge__icon {
    color: var(--ph-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ph-trust-badge__text  { display: flex; flex-direction: column; gap: 0.125rem; }

.ph-trust-badge__title {
    font-family: var(--ph-font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ph-text);
}

.ph-trust-badge__desc {
    font-family: var(--ph-font-sans);
    font-size: 0.6875rem;
    color: var(--ph-text-muted);
}

html.dark .ph-trust-badge__title { color: var(--ph-text); }
html.dark .ph-trust-badge__desc  { color: var(--ph-text-muted); }

/* =========================================================================
   RESEARCH DISCLAIMER
   ========================================================================= */
.ph-disclaimer {
    text-align: center;
    padding: 3rem var(--ph-gutter);
    background: var(--ph-primary-10);
    border: 1px solid var(--ph-primary-20);
}

.ph-disclaimer__icon {
    font-size: 2rem;
    color: var(--ph-primary);
    display: block;
    margin-bottom: 0.75rem;
}

.ph-disclaimer__title {
    font-family: var(--ph-font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--ph-primary);
    margin-bottom: 0.5rem;
}

.ph-disclaimer__body {
    font-family: var(--ph-font-sans);
    font-size: 0.75rem;
    color: var(--ph-zinc-600);
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.6;
}

html.dark .ph-disclaimer__body { color: var(--ph-text-muted); }

/* =========================================================================
   GLOBAL REACH
   ========================================================================= */
.ph-global-reach { text-align: center; padding: var(--ph-section-py-lg) var(--ph-gutter); }

.ph-global-reach__heading {
    font-family: var(--ph-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: 0.1em;
    margin-bottom: 3rem;
    color: var(--ph-text);
}

.ph-global-reach__cities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
}

.ph-city { cursor: pointer; display: flex; flex-direction: column; align-items: center; }

.ph-city__name {
    font-family: var(--ph-font-display);
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    color: var(--ph-zinc-400);
    transition: color var(--ph-trans-base);
}

.ph-city:hover .ph-city__name { color: var(--ph-primary); }

.ph-city__underline {
    display: block;
    width: 0;
    height: 1px;
    background: var(--ph-primary);
    margin-top: 0.5rem;
    transition: width var(--ph-trans-slow);
}

.ph-city:hover .ph-city__underline { width: 100%; }

html.dark .ph-global-reach__heading { color: var(--ph-text); }
html.dark .ph-city__name            { color: var(--ph-text-muted); }

/* =========================================================================
   BLOG GRID
   ========================================================================= */
.ph-blog-grid-wrap { max-width: var(--ph-max-width); margin: 0 auto; padding: var(--ph-section-py) var(--ph-gutter); }

.ph-blog-featured { margin-bottom: 5rem; }

.ph-blog-card {
    background: #fff;
    border: 1px solid var(--ph-zinc-200);
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--ph-trans-base), box-shadow var(--ph-trans-base);
}

.ph-blog-card:hover {
    border-color: var(--ph-primary);
    box-shadow: var(--ph-shadow-gold);
}

.ph-blog-card--featured { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) { .ph-blog-card--featured { grid-template-columns: 1fr; } }

.ph-blog-card__image-wrap {
    position: relative;
    height: 16rem;
    overflow: hidden;
    display: block;
}

.ph-blog-card__image-wrap--featured { height: 24rem; }

.ph-blog-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ph-trans-image);
}
.ph-blog-card:hover .ph-blog-image { transform: scale(1.05); }

.ph-blog-featured-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--ph-gold-gradient-135);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.75rem;
}

.ph-blog-card__content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ph-blog-card--featured .ph-blog-card__content { padding: 3rem; justify-content: center; }

.ph-blog-card__cat {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--ph-primary);
    font-weight: 600;
}

.ph-blog-card__title {
    font-family: var(--ph-font-display);
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    color: var(--ph-text);
    text-decoration: none;
}

.ph-blog-card__excerpt {
    font-family: var(--ph-font-sans);
    font-size: 0.875rem;
    color: var(--ph-zinc-600);
    line-height: 1.6;
}

.ph-blog-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.ph-blog-card__read-more {
    font-family: var(--ph-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ph-text);
    text-decoration: none;
    transition: color var(--ph-trans-base);
}
.ph-blog-card__read-more:hover { color: var(--ph-primary); }

.ph-blog-card__read-time {
    font-family: var(--ph-font-sans);
    font-size: 0.625rem;
    color: var(--ph-zinc-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ph-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) { .ph-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ph-blog-grid { grid-template-columns: 1fr; } }

.ph-blog-pagination { display: flex; justify-content: center; margin-top: 4rem; }
.ph-blog-pagination .page-numbers { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.ph-blog-pagination .page-numbers li a,
.ph-blog-pagination .page-numbers li span {
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--ph-zinc-200);
    font-family: var(--ph-font-sans); font-size: 0.75rem;
    color: var(--ph-text); text-decoration: none;
    transition: border-color var(--ph-trans-base), background var(--ph-trans-base), color var(--ph-trans-base);
}
.ph-blog-pagination .page-numbers .current {
    background: var(--ph-primary);
    border-color: var(--ph-primary);
    color: #fff;
}
.ph-blog-pagination .page-numbers li a:hover { border-color: var(--ph-primary); color: var(--ph-primary); }

html.dark .ph-blog-card             { background: var(--ph-zinc-900); border-color: var(--ph-zinc-800); }
html.dark .ph-blog-card__title      { color: var(--ph-text); }
html.dark .ph-blog-card__excerpt    { color: var(--ph-text-muted); }
html.dark .ph-blog-card__read-more  { color: var(--ph-text); }
html.dark .ph-blog-card__read-more:hover { color: var(--ph-primary); }
html.dark .ph-blog-card__read-time  { color: var(--ph-text-muted); }
html.dark .ph-blog-card__cat        { color: var(--ph-primary); }
html.dark .ph-blog-pagination .page-numbers li a,
html.dark .ph-blog-pagination .page-numbers li span {
    border-color: var(--ph-zinc-800);
    color: var(--ph-text);
}
html.dark .ph-blog-pagination .page-numbers li a:hover {
    border-color: var(--ph-primary);
    color: var(--ph-primary);
}

/* =========================================================================
   COA DOCUMENT
   ========================================================================= */
.ph-coa-document {
    position: relative;
    max-width: 24rem;
}

.ph-coa-document--tilt { transform: rotate(1deg); transition: transform var(--ph-trans-slow); }
.ph-coa-document--tilt:hover { transform: rotate(0deg); }

.ph-coa-document__image {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--ph-zinc-200);
}

.ph-coa-document__mock {
    border: 4px double var(--ph-zinc-200);
    padding: 3rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.ph-coa-document__doc-icon {
    font-size: 3rem;
    color: var(--ph-zinc-400);
}

.ph-coa-document__lab-name {
    font-family: var(--ph-font-display);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    color: var(--ph-text);
    text-align: center;
}

.ph-coa-bar {
    height: 4px;
    background: var(--ph-zinc-200);
    width: 100%;
    border-radius: 2px;
}
.ph-coa-bar--short { width: 60%; }

.ph-coa-document__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(12deg);
    font-family: var(--ph-font-serif);
    font-style: italic;
    font-size: 3rem;
    color: var(--ph-primary);
    opacity: 0.15;
    pointer-events: none;
    white-space: nowrap;
}

html.dark .ph-coa-document__image   { border-color: var(--ph-zinc-800); }
html.dark .ph-coa-document__mock   { background: var(--ph-zinc-900); border-color: var(--ph-zinc-700); }
html.dark .ph-coa-document__lab-name { color: var(--ph-text); }
html.dark .ph-coa-document__doc-icon { color: var(--ph-text-muted); }
html.dark .ph-coa-bar              { background: var(--ph-zinc-700); }

/* =========================================================================
   SHARED BUTTON UTILITIES (referenced by widgets)
   ========================================================================= */
.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: var(--ph-font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: background var(--ph-trans-base), color var(--ph-trans-base), box-shadow var(--ph-trans-base);
    border-radius: var(--ph-radius);
}