/* ============================================================
   Pick and Print — Main Stylesheet
   Font: Poppins (Google Fonts)
   Palette: #000 primary, #fff background, #f5f5f5 light bg
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

:root { --pp-container-width: 1600px; }

body {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    color: #111;
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

img, video { max-width: 100%; height: auto; display: block; }

/* Nothing may push the page sideways.

   A single over-wide descendant anywhere - a third-party widget, a rail
   mid-scroll, a wide table - turns the whole document into a horizontal
   scroller, and what the visitor sees is a band of empty white down the right
   of the screen that they can drag the page into.

   On the root element, and not on a wrapper div. Overflow set on the root
   propagates to the viewport, so this switches off horizontal scrolling for the
   document itself - which catches anything, including markup that is not inside
   #pp-page. That propagation is also why `hidden` is safe here when it is not
   safe further down the tree: the scrollport stays the viewport, so the sticky
   header still sticks. (`overflow-x: hidden` on a mid-tree div is what breaks
   sticky, by making that div the scrollport instead.)

   `hidden`, on the root, and on the root alone.

   `clip` reads better on paper - it clips without creating a scroll container -
   but it was tried here and does not hold: Chromium does not propagate `clip`
   from the root to the viewport the way it propagates `hidden`, so the page
   still scrolled. `hidden` does propagate, and is the form that actually works.

   On the root this is safe. Root overflow propagates to the viewport and the
   scrollport stays the viewport, so the sticky header still sticks. What is not
   safe is putting it on `body` as well - two nested scroll containers is what
   makes iOS render the page shrunk to fit instead of clipped - or on a mid-tree
   wrapper like #pp-page, which makes that div the scrollport and kills sticky.
   Both were tried. Neither is here. */
html { overflow-x: hidden; }

/* The Google reviews embed is a third-party plugin's markup and its own CSS -
   the theme does not control its width, and review widgets are fond of card
   carousels sized in pixels. Clip it to its own column so it cannot take the
   page with it. */
.pp-reviews-wrap { overflow-x: clip; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }

/* ── Typography ─────���─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(28px, 5vw, 42px); }
h2 { font-size: clamp(22px, 4vw, 32px); }
h3 { font-size: clamp(18px, 3vw, 24px); }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p  { line-height: 1.7; }

/* ── Layout helpers ───────────────────────────��───────────── */
.pp-container {
    width: 100%;
    max-width: var(--pp-container-width);
    margin-inline: auto;
    padding-inline: 24px;
}@media (max-width: 768px) {
    .pp-container { padding-inline: 16px; }
}


/* ── Buttons ──────���───────────────────────────────────────── */
.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    transition: opacity .2s, transform .15s;
    white-space: nowrap;
}
.pp-btn:hover { opacity: .85; transform: translateY(-1px); }
.pp-btn--primary { background: #000; color: #fff; }
.pp-btn--outline { background: transparent; border: 2px solid #000; color: #000; }
.pp-btn--white   { background: #fff; color: #000; }
.pp-btn--green   { background: #35B777; color: #fff; }

/* ── Promo Bar ──────────────────────────────────────────────── */
#pp-promo-bar {
    background: #298859;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-align: center;
    flex-wrap: wrap;
}
#pp-promo-bar strong { font-weight: 800; letter-spacing: 0.4px; }
.pp-promo-dot { font-size: 16px; opacity: .7; line-height: 1; }

/* ── Header ───────────────────────────────────────────────── */
#pp-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #eee;
    transition: box-shadow .2s;
}
#pp-header.is-scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.pp-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 68px;
}

/* Logo */
.pp-logo { flex-shrink: 0; display: flex; align-items: center; }
.pp-logo img { height: 26px; width: auto; }

/* Primary Nav */
.pp-nav { flex: 1; }
.pp-nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pp-nav__menu li { position: relative; }
.pp-nav__menu > li > a {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    transition: background .15s;
}
.pp-nav__menu > li > a:hover,
.pp-nav__menu > li.current-menu-item > a,
.pp-nav__menu > li.current-menu-parent > a,
.pp-nav__menu > li.current-menu-ancestor > a { background: #f4f4f4; }

/* Dropdown */
.pp-nav__menu .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 100;
}
.pp-nav__menu li:hover > .sub-menu,
.pp-nav__menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pp-nav__menu .sub-menu .sub-menu {
    top: -9px;
    left: calc(100% + 4px);
}
.pp-nav__menu .sub-menu li a {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    transition: background .15s;
}
.pp-nav__menu .sub-menu li a:hover,
.pp-nav__menu .sub-menu li a:focus-visible,
.pp-nav__menu .sub-menu .current-menu-item > a { background: #f4f4f4; }
.pp-nav__menu a:focus-visible,
.pp-submenu-toggle:focus-visible { outline: 2px solid #298859; outline-offset: -2px; }
.pp-submenu-toggle { display: none; }

/* Header actions */
.pp-header__actions { display: flex; align-items: center; gap: 6px; }
.pp-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    transition: background .15s;
    color: #111;
}
.pp-icon-btn:hover { background: #f4f4f4; }

/* Cart count badge */
.pp-cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}
.pp-cart-count:empty,
.pp-cart-count[data-count="0"] { display: none; }

/* Mobile toggle — hidden on desktop */
.pp-menu-toggle { display: none; }
.pp-hamburger {
    display: block;
    width: 20px;
    height: 2px;
    background: #111;
    position: relative;
    transition: background .2s;
}
.pp-hamburger::before,
.pp-hamburger::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: #111;
    position: absolute;
    transition: transform .2s;
}
.pp-hamburger::before { top: -6px; }
.pp-hamburger::after  { top: 6px; }

/* Search Bar */
.pp-search-bar {
    border-top: 1px solid #eee;
    background: #fff;
    padding: 12px 0;
}
.pp-search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color .2s;
}
.pp-search-form:focus-within { border-color: #111; }
.pp-search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 9px 0;
    font: inherit;
    /* 16px is not a design choice: Safari zooms the whole page in on any form
       field it has to render below that, and the header then sits half off
       screen with no way back except a pinch. */
    font-size: 16px;
    line-height: 1.4;
    background: transparent;
}
.pp-search-form input[type="search"]::-webkit-search-decoration,
.pp-search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.pp-search-form button { color: #666; display: flex; align-items: center; }

/* Live product suggestions */
.pp-search-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: -1.5px;
    right: -1.5px;
    z-index: 1200;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
    padding: 6px;
}
.pp-search-suggest[hidden] { display: none; }
.pp-search-suggest__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: 8px;
    color: #111;
    text-decoration: none;
}
.pp-search-suggest__item:hover,
.pp-search-suggest__item.is-active { background: #f6f6f6; }
.pp-search-suggest__thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
    background: #f5f5f5;
}
.pp-search-suggest__body { min-width: 0; }
.pp-search-suggest__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-search-suggest__price { display: block; font-size: 12px; font-weight: 400; color: #111; }
.pp-search-suggest__price del { color: #999; margin-right: 4px; }
.pp-search-suggest__more {
    display: block;
    margin-top: 4px;
    padding: 9px 8px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    font-weight: 600;
    color: #298859;
    text-align: center;
    text-decoration: none;
}
.pp-search-suggest__more:hover { background: #f6f6f6; border-radius: 8px; }
.pp-search-suggest__empty { padding: 14px 10px; font-size: 13px; color: #888; text-align: center; }

/* Phones get their own search: a tab clipped to the right edge just under the
   header, floating over the page, that drops the box down when tapped. Moving
   it out of the header row is what frees a slot there for the account icon.
   Both are hidden on desktop, where the header's own search icon still works. */
.pp-search-fab { display: none; }
.pp-mobile-search { display: none; }

/* ── Mobile Nav ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .pp-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #ececec;
        box-shadow: 0 12px 24px rgba(0,0,0,.1);
        z-index: 990;
        max-height: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: max-height .25s ease, opacity .18s ease, transform .25s ease, visibility .25s;
    }
    .pp-nav.is-open {
        max-height: min(70vh, calc(100vh - var(--pp-header-bottom, 100px)));
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .pp-nav__menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .pp-nav__menu > li { width: 100%; }
    .pp-nav__menu li > a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 11px 64px 11px 24px;
        border-radius: 0;
        border-bottom: 1px solid #eeeeee;
        width: 100%;
        font-size: 16px;
        line-height: 1.35;
    }
    .pp-nav__menu > li > a { font-weight: 600; }
    .pp-nav__menu .sub-menu {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: 100%;
        min-width: 0;
        padding: 0;
        background: #fafafa;
        transition: none;
    }
    .pp-nav__menu li.is-submenu-open > .sub-menu { display: block; }
    .pp-nav__menu .sub-menu li a { padding-left: 40px; font-size: 14px; }
    .pp-nav__menu .sub-menu .sub-menu { top: auto; left: auto; }
    .pp-nav__menu .sub-menu .sub-menu li a { padding-left: 56px; }
    .pp-submenu-toggle {
        position: absolute;
        top: 2px;
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        color: #333;
        z-index: 1;
    }
    .pp-submenu-toggle:hover,
    .pp-submenu-toggle:focus-visible { background: #f0f0f0; }
    .pp-submenu-toggle svg { transition: transform .2s ease; }
    .pp-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    .pp-menu-toggle { display: flex; z-index: 991; }
    .pp-menu-toggle[aria-expanded="true"] .pp-hamburger { background: transparent; }
    .pp-menu-toggle[aria-expanded="true"] .pp-hamburger::before { transform: translateY(6px) rotate(45deg); }
    .pp-menu-toggle[aria-expanded="true"] .pp-hamburger::after { transform: translateY(-6px) rotate(-45deg); }
    .pp-header.is-nav-open .pp-search-fab { opacity: 0; visibility: hidden; pointer-events: none; }
    .pp-logo { min-width: 0; flex-shrink: 1; }
    .pp-logo img { max-width: 100%; }
    .pp-header__actions { flex-shrink: 0; margin-left: auto; }
    .pp-header__inner { gap: 12px; }

    /* The header's search icon and its drop-down bar give way to the floating
       tab below, and the account icon takes the freed slot. */
    .pp-search-toggle { display: none; }
    #pp-search-bar { display: none; }

    /* --pp-header-bottom is written by the script from the sticky header's own
       position, so the tab tracks the header as the promo bar scrolls away. */
    .pp-search-fab {
        position: fixed;
        top: calc(var(--pp-header-bottom, 99px) + 14px);
        /* Pinned in viewport units rather than with `right: 0`.

           `right` resolves against the containing block, and for a fixed box
           that is the viewport only until some ancestor has a transform - then
           it silently becomes that ancestor instead. That is what happened
           here: this tab measured 864px from the left on a 375px phone, and
           because a fixed box is not clipped by `overflow` on any ancestor, it
           dragged ~489px of empty space onto the right of every page and no
           amount of guarding html/body/#pp-page could contain it.

           `vw` is the viewport no matter what the containing block is. */
        left: calc(100vw - 44px);
        right: auto;
        z-index: 1080;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid #ececec;
        border-right: 0;
        border-radius: 10px 0 0 10px;
        background: #fff;
        color: #111;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
        /* Settling back is slower than growing - it should catch the eye on the
           way out and then get out of the way, not snap. The quick side is on
           .is-scrolling below. */
        transition: color .16s ease, background .16s ease,
                    width .5s ease, height .5s ease, left .5s ease;
    }
    .pp-search-fab.is-open { background: #111; color: #fff; }

    /* ── Attention while the page is moving ──────────────────
       Set by the script only while the visitor is actually scrolling, and never
       on a product page - there the tab stays put so it cannot compete with the
       add-to-cart button.

       `left` is restated alongside every width, because the tab is pinned by
       viewport units rather than by `right` (see the note above) - so its right
       edge only stays welded to the screen edge if the two move together.

       Both states are written out longhand at two-class specificity so they
       still win against the copy of the base rule inlined as critical CSS. */
    .pp-search-fab.is-scrolling {
        width: 54px;
        height: 54px;
        left: calc(100vw - 54px);
        transition: color .16s ease, background .16s ease,
                    width .18s ease, height .18s ease, left .18s ease;
    }

    /* Every so often the icon says what it is. Swapped rather than crossfaded:
       the two never overlap, and the width change carries the movement. */
    .pp-search-fab__label { display: none; font-size: 13px; font-weight: 600; }
    .pp-search-fab.is-labelled { width: 102px; left: calc(100vw - 102px); }
    .pp-search-fab.is-labelled .pp-search-fab__icon { display: none; }
    .pp-search-fab.is-labelled .pp-search-fab__label { display: block; }

    /* Opens the way the mini-cart does: fade and settle, never a layout jump. */
    .pp-mobile-search {
        display: block;
        position: fixed;
        top: var(--pp-header-bottom, 99px);
        /* Width in viewport units, not `left: 0; right: 0` - see the note on
           .pp-search-fab above. */
        left: 0;
        right: auto;
        width: 100vw;
        max-width: 100vw;
        z-index: 1085;
        padding: 12px 0;
        background: #fff;
        border-bottom: 1px solid #ececec;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    .pp-mobile-search.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* The search tab's growing and shrinking is decoration, so it goes away for
   anyone who has asked for less movement. The word still appears on its
   schedule - that is information, not animation - it just arrives instantly. */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .pp-search-fab,
    .pp-search-fab.is-scrolling {
        transition: color .16s ease, background .16s ease;
    }
    .pp-search-fab.is-scrolling {
        width: 44px;
        height: 44px;
        left: calc(100vw - 44px);
    }
    .pp-search-fab.is-scrolling.is-labelled { width: 102px; left: calc(100vw - 102px); }
}

/* ── Footer ───────────────────────────────────────────────── */
.pp-footer {
    background: #090909;
    color: #d7d7d7;
    margin-top: 80px;
}
.pp-footer__inner {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, .85fr)) minmax(240px, 1.15fr);
    gap: 40px;
    padding-top: 58px;
    padding-bottom: 46px;
}
.pp-footer__logo {
    display: inline-flex;
    margin-bottom: 14px;
}
.pp-footer__logo img {
    width: 170px;
    height: auto;
}
.pp-footer__contact {
    max-width: 260px;
    color: #b8b8b8;
    font-size: 13px;
    line-height: 1.6;
}
.pp-footer__contact p + p { margin-top: 8px; }
.pp-footer__contact p:first-child {
    color: #fff;
    font-weight: 700;
}
.pp-footer__contact a {
    color: #b8b8b8;
    transition: color .15s;
}
.pp-footer__contact a:hover { color: #fff; }
.pp-footer__heading {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0;
    text-transform: none;
}
.pp-footer__links li + li { margin-top: 11px; }
.pp-footer__links a {
    display: inline-block;
    font-size: 14px;
    color: #aaa;
    line-height: 1.45;
    transition: color .15s, transform .15s;
}
.pp-footer__links a:hover {
    color: #fff;
    transform: translateX(2px);
}
.pp-footer__newsletter p {
    max-width: 280px;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 16px;
}
.pp-newsletter-box {
    max-width: 280px;
    padding: 14px;
    border: 1px solid #242424;
    border-radius: 8px;
    background: #111;
}
.pp-newsletter-form,
.pp-footer__newsletter .mc4wp-form-fields,
.pp-footer__newsletter .haru-subscriber {
    display: grid;
    gap: 10px;
}
.pp-footer__newsletter .mc4wp-form,
.pp-footer__newsletter .mc4wp-form p,
.pp-footer__newsletter .mc4wp-form-fields p,
.pp-footer__newsletter .mc4wp-form-fields label {
    margin: 0;
}
.pp-newsletter-form input[type="email"],
.pp-footer__newsletter input[type="email"],
.pp-footer__newsletter input[type="text"],
.pp-footer__newsletter input:not([type]),
.pp-footer__newsletter .haru-subscriber__email-field {
    width: 100%;
    flex: 1;
    min-width: 0;
    min-height: 46px;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #303030;
    border-radius: 8px;
    background: #161616;
    color: #fff;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s, background .2s;
}
.pp-newsletter-form input[type="email"]::placeholder,
.pp-footer__newsletter input[type="email"]::placeholder,
.pp-footer__newsletter input[type="text"]::placeholder { color: #777; }
.pp-newsletter-form input[type="email"]:focus,
.pp-footer__newsletter input[type="email"]:focus,
.pp-footer__newsletter input[type="text"]:focus,
.pp-footer__newsletter input:not([type]):focus {
    border-color: #35b777;
    background: #111;
}
.pp-newsletter-form button,
.pp-footer__newsletter input[type="submit"],
.pp-footer__newsletter .haru-button {
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
    background: #35b777;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: background .2s, transform .15s;
}
.pp-newsletter-form button:hover,
.pp-footer__newsletter input[type="submit"]:hover,
.pp-footer__newsletter .haru-button:hover {
    background: #2ca066;
    transform: translateY(-1px);
}
.pp-footer__newsletter .mc4wp-response {
    color: #d7d7d7;
    font-size: 13px;
    line-height: 1.5;
}

#pp-footer .pp-newsletter-box .mc4wp-form-fields {
    display: grid !important;
    gap: 10px !important;
}
#pp-footer .pp-newsletter-box input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border: 1px solid #303030 !important;
    border-radius: 8px !important;
    background: #161616 !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 14px !important;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
}
#pp-footer .pp-newsletter-box input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus {
    border-color: #35b777 !important;
    background: #101010 !important;
}
#pp-footer .pp-newsletter-box input[type="submit"],
#pp-footer .pp-newsletter-box button {
    width: 100% !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #35b777 !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: background .2s, transform .15s !important;
    appearance: none;
    -webkit-appearance: none;
}
#pp-footer .pp-newsletter-box input[type="submit"]:hover,
#pp-footer .pp-newsletter-box button:hover {
    background: #2ca066 !important;
    transform: translateY(-1px);
}

/* Social profiles, closing the brand column. Circles rather than bare glyphs:
   at 18px a logo on a black field is easy to miss, and the ring gives the row
   a tap target that meets the same 36px minimum the header icons use. */
.pp-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.pp-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #262626;
    border-radius: 50%;
    color: #b8b8b8;
    transition: color .15s, border-color .15s, background .15s;
}
.pp-footer__social a:hover,
.pp-footer__social a:focus-visible {
    color: #fff;
    border-color: #35b777;
    background: #35b777;
}
.pp-footer__social svg {
    display: block;
    width: 18px;
    height: 18px;
}

.pp-footer__bottom {
    border-top: 1px solid #202020;
    padding: 20px 0;
}
.pp-footer__bottom .pp-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.pp-footer__copyright { font-size: 13px; color: #8b8b8b; }
.pp-footer__payments { height: 24px; width: auto; }@media (max-width: 1180px) {
    .pp-footer__inner { grid-template-columns: 1.3fr 1fr 1fr; }
    .pp-footer__brand { grid-column: 1 / -1; }
    .pp-footer__newsletter { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .pp-footer__inner { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; }
    .pp-footer__brand, .pp-footer__newsletter { grid-column: 1 / -1; }
    .pp-footer__bottom .pp-container { align-items: flex-start; flex-direction: column; }
}


/* ── Page Layout ──────────────────────────────────────────── */
.pp-content-wrap { padding-top: 48px; padding-bottom: 64px; }
.pp-page-title { margin-bottom: 24px; }
.pp-page-body { max-width: 780px; }
.pp-page-body p, .pp-page-body li { line-height: 1.8; margin-bottom: 16px; }
.pp-page-body a { text-decoration: underline; }

/* Cart and Checkout need the full site canvas for their two-column blocks. */
.woocommerce-cart .pp-page-body,
.woocommerce-checkout .pp-page-body,
.pp-page-body.pp-page-body--commerce {
    width: 100%;
    max-width: none !important;
}

.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-checkout .wc-block-checkout,
.pp-page-body--commerce > .wp-block-woocommerce-cart,
.pp-page-body--commerce > .wp-block-woocommerce-checkout,
.pp-page-body--commerce > .alignwide,
.pp-page-body--commerce > .alignfull {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

.pp-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pp-post-card { border-radius: 10px; overflow: hidden; border: 1px solid #eee; }
.pp-post-card__thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .3s; }
.pp-post-card:hover .pp-post-card__thumb img { transform: scale(1.03); }
.pp-post-card__body { padding: 20px; }
.pp-post-card__title { font-size: 17px; margin-bottom: 8px; }
.pp-post-card__excerpt { font-size: 14px; color: #555; }@media (max-width: 768px) { .pp-posts-grid { grid-template-columns: 1fr; }
}


/* ── Pagination ───────────────────────────────────────────── */
.pp-pagination { margin-top: 48px; text-align: center; }
.pp-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 6px; margin: 0 3px; font-size: 14px; transition: background .15s; }
.pp-pagination .page-numbers.current { background: #000; color: #fff; border-color: #000; }
.pp-pagination .page-numbers:hover:not(.current) { background: #f4f4f4; }

/* ── 404 ─────���────────────────────────────────────────────── */
.pp-404 { padding-top: 64px; padding-bottom: 80px; text-align: center; }
.pp-404 h1 { margin-bottom: 16px; }
.pp-404 p  { color: #666; margin-bottom: 28px; max-width: 620px; margin-left: auto; margin-right: auto; }

.pp-404__image {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto 32px;
    border-radius: 14px;
}

.pp-404-search {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto 16px;
}
.pp-404-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 18px;
    font-size: 15px;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s;
}
.pp-404-search__input:focus { outline: none; border-color: #000; }
.pp-404-search__btn { flex: 0 0 auto; white-space: nowrap; }

.pp-404__home { margin-bottom: 56px; text-decoration: none; }

.pp-404-products { margin-top: 24px; text-align: left; }
.pp-404-products__title {
    text-align: center;
    margin-bottom: 28px;
    font-size: clamp(20px, 3vw, 28px);
}
.pp-404-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}@media (max-width: 1100px) { .pp-404-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) { .pp-404-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .pp-404-search { flex-direction: column; }
    .pp-404-search__btn { width: 100%; }
}


/* ══════════════════════════════════════════════════════════
   HOMEPAGE — front-page.php
══════════════════════════════════════════════════════════ */

/* Shared section spacing */
.pp-section { padding: 72px 0; }
.pp-section__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.pp-section__title { font-size: clamp(20px, 3vw, 28px); }
.pp-section__title--center { text-align: center; }
.pp-section__subtitle { text-align: center; color: #666; margin-top: 8px; margin-bottom: 48px; }
.pp-section__eyebrow { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #2d7a4f; margin-bottom: 10px; }
.pp-eyebrow--green { color: #2d7a4f; }
.pp-eyebrow--center { text-align: center; }

/* ── Hero ─────────────────────────────────────────────────── */
.pp-hero { padding: 50px 0 36px; overflow: hidden; }
.pp-hero__inner { display: grid; grid-template-columns: clamp(520px, 38vw, 590px) minmax(0, 1fr); gap: 48px; align-items: center; }

.pp-hero__text { min-width: 0; }
.pp-hero__heading {
    max-width: 590px;
    margin-bottom: 26px;
    color: #242424;
    font-size: clamp(42px, 4vw, 56px);
    font-weight: 600;
    line-height: .96;
    letter-spacing: 0;
}
.pp-hero__sub {
    max-width: 430px;
    margin-bottom: 22px;
    color: #353535;
    font-size: 18px;
    line-height: 1.5;
}
.pp-hero__badges {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.pp-hero__badges li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #555;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.pp-hero__badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #35b777;
}
.pp-hero__badge-icon svg { display: block; width: 16px; height: 16px; }
.pp-hero__badges img { width: auto; height: 15px; object-fit: contain; }
.pp-hero__cta { min-height: 42px; padding: 10px 24px; border-radius: 4px; font-size: 16px; font-weight: 600; line-height: 1.25; }

/* Hero category slider */
.pp-hero-slider { position: relative; min-width: 0; }
.pp-hero-slider__viewport { overflow: hidden; }
/* A hand-driven scroller, on every screen size. No scroll snapping: mandatory
   snapping is what made a swipe feel like it "caught" and stopped, and it could
   leave a category parked half out of view. */
.pp-hero-slider__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pp-hero-slider__track::-webkit-scrollbar { display: none; }
.pp-hero-slider__track:focus-visible { outline: 3px solid #35b777; outline-offset: 4px; }
.pp-hero-slide {
    flex: 0 0 clamp(210px, 18vw, 278px);
    min-width: 0;
    color: #171717;
}
.pp-hero-slide__image {
    display: block;
    width: 100%;
    height: clamp(320px, 26vw, 416px);
    overflow: hidden;
    background: #f2f2f2;
}
.pp-hero-slide__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pp-hero-slide:hover .pp-hero-slide__image img,
.pp-hero-slide:focus-visible .pp-hero-slide__image img { transform: scale(1.025); }
.pp-hero-slide:focus-visible { outline: 3px solid #35b777; outline-offset: -3px; }
.pp-hero-slide__image--placeholder {
    display: grid;
    place-items: center;
    color: #888;
    font-size: 56px;
    font-weight: 700;
}
.pp-hero-slide__label {
    display: block;
    padding: 13px 8px 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}
.pp-hero-slider__button {
    position: absolute;
    top: calc(50% - 24px);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow: 0 3px 14px rgba(0,0,0,.16);
    color: #111;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s, background .2s;
}
.pp-hero-slider:hover .pp-hero-slider__button,
.pp-hero-slider:focus-within .pp-hero-slider__button { opacity: 1; }
.pp-hero-slider__button:hover { background: #fff; }
.pp-hero-slider__button:focus-visible { opacity: 1; outline: 3px solid #35b777; outline-offset: 2px; }
.pp-hero-slider__button:disabled { opacity: 0 !important; pointer-events: none; }
.pp-hero-slider__button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-hero-slider__button--prev { left: 12px; }
.pp-hero-slider__button--next { right: 12px; }@media (max-width: 1050px) {
    .pp-hero__inner { grid-template-columns: 1fr; }
    .pp-hero__sub { max-width: 100%; }
    .pp-hero-slide { flex-basis: clamp(210px, 42vw, 278px); }
    .pp-hero-slide__image { height: clamp(320px, 58vw, 416px); }
    .pp-hero-slider__button { opacity: 1; }
}
@media (max-width: 560px) {
    .pp-hero { padding-top: 36px; }
    .pp-hero__inner { gap: 36px; }
    .pp-hero__heading { font-size: clamp(34px, 10vw, 42px); line-height: 1.02; }
    .pp-hero__sub { font-size: 16px; }
    .pp-hero__badges { gap: 10px 12px; }
    .pp-hero-slider__button { width: 38px; height: 38px; }
}


/* Phones: the same scroller, sized so the next category peeks in and the row
   reads as swipeable. Slides get their height from the image ratio, so nothing
   is clipped and the section is simply as tall as its content. */
@media (max-width: 700px) {
    .pp-hero-slider__track { gap: 12px; }
    .pp-hero-slide { flex-basis: 58vw; }
    .pp-hero-slide__image { height: auto; aspect-ratio: 3 / 4; }
    .pp-hero-slide__label { padding-top: 9px; font-size: 15px; }
    .pp-hero-slider__button { display: none; }
}

/* ── Categories ───────────────────────────────────────────── */
/* ── Products grid ────────────────────────────────────────── */
.pp-products-section { padding: 72px 0; }
/* A row with another product row directly beneath it (Top Products, then Top
   Searched): one gap between them rather than both sections' padding stacked. */
.pp-products-section--top,
.pp-products-section--stacked { padding-bottom: 0; }
/* A row dropped into a page that brings its own container and padding — the
   404 page, an empty cart. */
.pp-products-section--embedded { padding: 40px 0 0; text-align: left; }
.pp-products-section--embedded .pp-section__header { margin-bottom: 20px; }
.pp-products-section--embedded .pp-section__title { font-size: clamp(18px, 2.4vw, 24px); }
.pp-products-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.pp-product-card { position: relative; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid #eee; transition: box-shadow .2s; color: #111; }
.pp-product-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.pp-product-card__img { aspect-ratio: 1; overflow: hidden; background: #f5f5f5; }
.pp-product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pp-product-card:hover .pp-product-card__img img { transform: scale(1.04); }
.pp-product-card__info { padding: 12px; flex: 1; }
.pp-product-card__name { font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.pp-product-card__price { font-size: 13px; font-weight: 700; }
.pp-product-card__price del { font-weight: 400; color: #999; }@media (max-width: 1100px) { .pp-products-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ── Mobile product rail ──────────────────────────────────── */
/* On a phone the small rows keep the shape they have on a desktop - two rows -
   and run off the right edge instead of unrolling into a column six screens
   long. Twelve products stacked two-up is a wall the customer has to scroll
   past to reach the rest of the page; the same twelve on a rail cost one
   screen and are still all reachable.

   This is deliberately only for the rows the homepage, the 404 page, an empty
   cart and a product page offer alongside something else. The category archive
   and the pillar pages are left wrapping: someone on those pages came to browse
   a whole category, and putting most of it behind a sideways swipe would hide
   the thing they asked for.

   No negative margin to bleed past the container - the rail lives inside cards
   and mounts with `overflow: hidden` elsewhere, and the cut-off third column
   is affordance enough on its own. */
@media (max-width: 700px) {
    .pp-products-grid,
    .pp-cat-related__grid {
        grid-template-columns: none;
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        gap: 12px;
        /* Sized off the container, not the viewport. A viewport fraction looks
           right on paper and is wrong on a phone: 42vw of a 390px screen is
           164px, two of those plus the gap is 344px, and the container's own
           content box is only 358px - so the third column began 2px past the
           edge and nothing peeked at all.
           
           2.35 columns to a screen instead, measured against the space the
           cards actually get: two whole cards and a solid third of the next
           one, which is what says "keep going" to a thumb. */
        grid-auto-columns: calc((100% - 24px) / 2.35);
        /* Belt and braces against the row widening its own container. */
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        /* `none`, not `contain`: contain stops the scroll chaining to the page
           but still rubber-bands at the end of the rail, which on a phone reads
           as the page itself sliding. */
        overscroll-behavior-x: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        /* overflow-x alone does not contain this row. An absolutely
           positioned descendant is clipped only by ancestors in its
           containing-block chain, and .pp-product-card had no position, so
           anything a plugin absolutely positions inside a card resolved
           against the page and escaped the rail entirely - dragging the
           document's scrollable width out to the full length of the row.
           Paint containment makes this element that containing block, so
           the clipping applies. Measured on the live page: overflow:hidden
           here left the document at 864px, contain:paint returned it to
           375px. .pp-product-card carries position:relative too, which
           fixes it at the source. */
        contain: paint;
    }
    .pp-products-grid::-webkit-scrollbar,
    .pp-cat-related__grid::-webkit-scrollbar { display: none; }
    .pp-products-grid > *,
    .pp-cat-related__grid > * { scroll-snap-align: start; }
}

/* ── Reviews ──────────────────────────────────────────────── */
.pp-reviews-section { background: #f8f8f8; padding: 72px 0; text-align: center; }
.pp-reviews-wrap { margin-top: 32px; min-height: 320px; }
.pp-reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
.pp-review-card { background: #fff; border-radius: 12px; padding: 24px; border: 1px solid #eee; }
.pp-review-stars { color: #f59e0b; font-size: 16px; margin-bottom: 10px; letter-spacing: 2px; }
.pp-review-text { font-size: 14px; color: #444; line-height: 1.6; margin-bottom: 14px; }
.pp-review-name { font-size: 13px; font-weight: 700; color: #111; }@media (max-width: 900px) {
    .pp-reviews-wrap { min-height: 420px; }
    .pp-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pp-reviews-wrap { min-height: 560px; }
    .pp-reviews-grid { grid-template-columns: 1fr; }
}


/* ── Sample gallery mosaic ────────────────────────────────── */
.pp-gallery-section { padding: 0; overflow: hidden; }
.pp-gallery-carousel { position: relative; }
.pp-gallery-carousel__track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pp-gallery-carousel__track::-webkit-scrollbar { display: none; }
.pp-gallery-carousel__track:focus-visible { outline: 3px solid #35b777; outline-offset: -3px; }
.pp-gallery-carousel__item {
    flex: 0 0 clamp(220px, 18vw, 300px);
    height: 360px;
    overflow: hidden;
    border-radius: 8px;
    scroll-snap-align: start;
    background: #f3f3f3;
}
.pp-gallery-carousel__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pp-gallery-carousel__item:hover img { transform: scale(1.035); }
.pp-gallery-carousel__button {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow: 0 3px 14px rgba(0,0,0,.18);
    color: #111;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s, background .2s;
}
.pp-gallery-carousel:hover .pp-gallery-carousel__button,
.pp-gallery-carousel:focus-within .pp-gallery-carousel__button { opacity: 1; }
.pp-gallery-carousel__button:hover { background: #fff; }
.pp-gallery-carousel__button:focus-visible { opacity: 1; outline: 3px solid #35b777; outline-offset: 2px; }
.pp-gallery-carousel__button:disabled { opacity: 0 !important; pointer-events: none; }
.pp-gallery-carousel__button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-gallery-carousel__button--prev { left: 16px; }
.pp-gallery-carousel__button--next { right: 16px; }@media (max-width: 768px) {
    .pp-gallery-carousel__item { flex-basis: 72vw; height: 300px; }
    .pp-gallery-carousel__button { width: 38px; height: 38px; opacity: 1; }
}


/* ── Feature banner ───────────────────────────────────────── */
.pp-feature-banner { background: #f8f6f2; }
.pp-feature-banner__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pp-feature-banner__text h2 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 16px; }
.pp-feature-banner__text p { color: #555; font-size: 15px; line-height: 1.7; margin-bottom: 28px; max-width: 420px; }
.pp-feature-banner__img { border-radius: 16px; overflow: hidden; }
.pp-feature-banner__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }@media (max-width: 768px) {
    .pp-feature-banner__inner { grid-template-columns: 1fr; }
    .pp-feature-banner__img { order: -1; }
}


/* ── Features 4-col ───────────────────────────────────────── */
.pp-features-section { background: #fff; }
.pp-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.pp-feature { display: flex; flex-direction: column; gap: 12px; }
.pp-feature img { width: 56px; height: 56px; object-fit: contain; }
.pp-feature h3 { font-size: 16px; font-weight: 600; }
.pp-feature p { font-size: 14px; color: #555; line-height: 1.6; }@media (max-width: 900px) { .pp-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .pp-features-grid { grid-template-columns: 1fr; }
}


/* ── How it works ─────────────────────────────────────────── */
.pp-how-section { background: #f8f6f2; }
.pp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 16px; }
.pp-step { text-align: center; }
.pp-step__num { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #2d7a4f; background: #e8f5ee; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; }
.pp-step__img { border-radius: 12px; overflow: hidden; margin-bottom: 20px; aspect-ratio: 4/3; }
.pp-step__img img { width: 100%; height: 100%; object-fit: cover; }
.pp-step h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.pp-step p { font-size: 14px; color: #555; line-height: 1.6; }@media (max-width: 768px) { .pp-steps { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}


/* ══════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
══════════════════════════════════════════════════════════ */

.pp-product-page { padding-bottom: 80px; }

/* ── Urgency bar ──────────────────────────────────────────── */
.pp-product-urgency {
    background: #35B777;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pp-urgency-divider { opacity: .5; }

/* ── Breadcrumb strip ─────────────────────────────────────── */
.pp-product-breadcrumb-strip {
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
    padding: 0;
}
.single-product .woocommerce-breadcrumb { padding: 10px 0; font-size: 13px; color: #888; margin-bottom: 0; }
.single-product .woocommerce-breadcrumb a { color: #888; transition: color .15s; }
.single-product .woocommerce-breadcrumb a:hover { color: #111; }
.single-product .woocommerce-breadcrumb .breadcrumb-separator { margin: 0 4px; }

/* ── Top 2-col grid: gallery + summary ───────────────────── */
/* WooCommerce renders .woocommerce-product-gallery and .summary.entry-summary
   as direct children of div.product, so we make div.product a 2-col grid.
   !important overrides woocommerce-layout.css float-based rules.             */
.single-product .product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 56px;
    align-items: start;
    padding: 8px 0 48px;
}

/* .clear divs WooCommerce injects between grid children — hide them */
.single-product .product .clear { display: none; }

/* Everything after the summary spans both columns */
.single-product .product .woocommerce-tabs,
.single-product .product .up-sells,
.single-product .product .related,
.single-product .product .upsells { grid-column: 1 / -1; }

/* ── Gallery (column 1) — never sticky ───────────────────────── */
.single-product .product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery--sticky {
    position: static !important;
    top: auto !important;
    align-self: auto !important;
}
.single-product .product .woocommerce-product-gallery__wrapper,
.single-product .product .flex-viewport,
.single-product .product .ppd-live-stage {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    border-radius: 12px;
    overflow: hidden;
    background: #fafafa;
}
.single-product .product .flex-viewport > .woocommerce-product-gallery__wrapper {
    height: 100% !important;
}
.single-product .product .woocommerce-product-gallery__image {
    height: 100% !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fafafa;
}
.single-product .product .woocommerce-product-gallery__image > a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.single-product .product .woocommerce-product-gallery__image img:not(.zoomImg),
.single-product .product .ppd-live-canvas {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    border-radius: 0;
}
.single-product .product .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}
.single-product .product .flex-control-thumbs li { margin: 0; }
.single-product .product .flex-control-thumbs img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s;
}
.single-product .product .flex-control-thumbs .flex-active { border-color: #000; }

/* Keep recommendation/product-card media square on single product pages too. */
.single-product .product .related li.product a img,
.single-product .product .up-sells li.product a img,
.single-product .product .upsells li.product a img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    overflow: hidden;
}

/* ── Summary (column 2) ───────────────────────────────────── */
.single-product .product .summary.entry-summary { min-width: 0; }

.single-product .product .summary .product_title {
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
}

.single-product .product .summary .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #666;
}
.single-product .product .summary .star-rating { font-size: 15px; }

/* ── Star ratings ──────────────────────────────────────────────────────────────
   WooCommerce's default stylesheet (which carries its star icon font) is dequeued,
   so .star-rating would otherwise fall back to its plain text label. Render the
   stars ourselves with unicode glyphs: a grey 5-star base, with a gold overlay
   clipped to WooCommerce's inline width:X% (the average rating). The textual label
   inside the span is pushed below the clipped box so only the stars show. */
.star-rating {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1.25em;
    line-height: 1.25;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.star-rating::before {
    content: "\2605\2605\2605\2605\2605";
    float: left;
    color: #d7d7d7;
}
.star-rating > span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding-top: 2em; /* push the "Rated x out of 5…" text out of the clipped box */
    white-space: nowrap;
}
.star-rating > span::before {
    content: "\2605\2605\2605\2605\2605";
    position: absolute;
    top: 0;
    left: 0;
    color: #f59e0b;
}
.star-rating > span strong,
.star-rating > span .rating { font-weight: inherit; }

.single-product .product .summary .price {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    display: block;
}
.single-product .product .summary .price del { color: #999; font-weight: 400; font-size: 16px; margin-right: 6px; }
.single-product .product .summary .price ins { text-decoration: none; }

.single-product .product .summary .woocommerce-product-details__short-description {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 24px;
}
.single-product .product .summary .woocommerce-product-details__short-description ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 8px;
}
.single-product .product .summary .woocommerce-product-details__short-description li { margin-bottom: 4px; }

.single-product .product .summary form.cart { margin-bottom: 20px; }
.single-product .product .summary .quantity {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    margin-bottom: 12px;
}
.single-product .product .summary .quantity input.qty {
    width: 64px;
    height: 48px;
    text-align: center;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    transition: border-color .2s;
}
.single-product .product .summary .quantity input.qty:focus { border-color: #111; }

.single-product .product .summary .single_add_to_cart_button,
.single-product .product .summary button.button {
    height: 48px;
    padding: 0 32px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    white-space: nowrap;
}
.single-product .product .summary .single_add_to_cart_button:hover { opacity: .85; transform: translateY(-1px); }
.single-product .product .summary .single_add_to_cart_button.loading { opacity: .6; pointer-events: none; }

.single-product .product .summary table.variations {
    width: 100%;
    border: none;
    margin-bottom: 16px;
}
.single-product .product .summary table.variations td,
.single-product .product .summary table.variations th { border: none; padding: 6px 0; vertical-align: middle; }
.single-product .product .summary table.variations .label {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    padding-right: 16px;
    width: 100px;
}
.single-product .product .summary table.variations select {
    width: 100%;
    height: 42px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
    appearance: auto;
    background: #fff;
    cursor: pointer;
}

.single-product .product .summary .product_meta {
    font-size: 13px;
    color: #888;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.single-product .product .summary .product_meta span { margin-right: 16px; }
.single-product .product .summary .product_meta a { color: #555; }
.single-product .product .summary .product_meta a:hover { color: #111; }

/* ── Tabs (full-width, below the 2-col) ──────────────────── */
.single-product .product .woocommerce-tabs { margin-top: 8px; }
.single-product .product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #eee;
    margin-bottom: 32px;
    padding: 0;
    list-style: none;
}
.single-product .product .woocommerce-tabs ul.tabs li {
    margin: 0;
    border: none;
    background: none;
    border-radius: 0;
}
.single-product .product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.single-product .product .woocommerce-tabs ul.tabs li.active a { color: #111; border-bottom-color: #111; }
.single-product .product .woocommerce-tabs ul.tabs li a:hover { color: #111; }
.single-product .product .woocommerce-tabs .panel {
    padding: 0;
    border: none;
    margin-bottom: 48px;
}
.single-product .product .woocommerce-tabs .panel h2 { display: none; }
.single-product .product .woocommerce-tabs .woocommerce-Tabs-panel,
.single-product .product .woocommerce-tabs .entry-content { font-size: 14px; color: #444; line-height: 1.8; }
.single-product .product .woocommerce-tabs .entry-content ul { list-style: disc; padding-left: 20px; }
.single-product .product .woocommerce-tabs .entry-content li { margin-bottom: 6px; }
.single-product .product .woocommerce-tabs .entry-content h2,
.single-product .product .woocommerce-tabs .entry-content h3 { font-size: 18px; margin: 24px 0 12px; }

/* ── Related products (full-width) ───────────────────────── */
.single-product .product .related.products h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
}
.single-product .product .related.products ul.products { grid-template-columns: repeat(4, 1fr); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .single-product .product {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }
    .single-product .product .woocommerce-product-gallery { position: static; }
    .single-product .product .related.products ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* ── WooCommerce base overrides ───────────────────────────── */
.woocommerce .woocommerce-breadcrumb { font-size: 13px; color: #888; padding: 12px 0; }
.woocommerce .woocommerce-breadcrumb a { color: #888; }
.woocommerce .woocommerce-breadcrumb a:hover { color: #000; }

/* Product grid */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; list-style: none; }
.woocommerce ul.products li.product { border-radius: 10px; overflow: hidden; border: 1px solid #eee; transition: box-shadow .2s; }
.woocommerce ul.products li.product:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; font-weight: 600; padding: 12px 14px 4px; }
.woocommerce ul.products li.product .price { font-size: 14px; padding: 0 14px 14px; color: #111; font-weight: 600; }
.woocommerce ul.products li.product .button { display: none; }

/* Single product */
.woocommerce div.product { padding-top: 32px; }
.woocommerce div.product .product_title { font-size: clamp(22px, 4vw, 32px); margin-bottom: 12px; }
.woocommerce div.product p.price { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.woocommerce div.product .woocommerce-product-details__short-description { color: #444; margin-bottom: 24px; }
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
    background: #35B777;
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: opacity .2s;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { opacity: .85; color: #fff; background: #35B777; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    border-left: 4px solid;
}
.woocommerce-message { background: #f0faf0; border-color: #4caf50; }
.woocommerce-info    { background: #f0f6ff; border-color: #2196f3; }
.woocommerce-error   { background: #fff0f0; border-color: #f44336; }

/* ============================================================
   Reference-style single product overrides
   ============================================================ */
.single-product #pp-main { background: #fff; }

.pp-product-page {
    padding-bottom: 0;
    background: #fff;
}

.pp-product-offerbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    min-height: 48px;
    padding: 8px 18px;
    background: linear-gradient(90deg, #21884c 0%, #28d483 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.pp-product-offerbar__timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pp-product-offerbar__timer strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .15);
    font-size: 18px;
    line-height: 1;
}

.pp-product-breadcrumb-strip {
    background: #f5f5f5;
    border-bottom: 1px solid #ededed;
}

.single-product .pp-product-breadcrumb-strip .woocommerce-breadcrumb {
    padding: 10px 0;
    margin: 0;
    text-align: center;
    color: #6d6d6d;
    font-size: 11px;
    font-weight: 600;
}

.single-product .pp-product-container {
    max-width: var(--pp-container-width);
    padding-inline: 24px;
}

.single-product .product {
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr) !important;
    gap: 56px;
    padding: 28px 0 44px;
}

.single-product .product .woocommerce-product-gallery {
    padding-top: 24px;
}

.woocommerce-product-gallery__trigger { display: none !important; }

.single-product .product .woocommerce-product-gallery__wrapper,
.single-product .product .flex-viewport {
    border-radius: 0;
    overflow: visible;
}

.single-product .product .woocommerce-product-gallery__image {
    display: block;
    background: #fff;
}

.single-product .product .woocommerce-product-gallery__image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}

.single-product .product .flex-control-thumbs {
    gap: 12px;
    margin-top: 22px;
}

.single-product .product .flex-control-thumbs img {
    width: 66px;
    height: 66px;
    border-radius: 6px;
    border: 1px solid #d8d8d8;
    background: #fff;
    padding: 2px;
    object-fit: cover;
}

.single-product .product .flex-control-thumbs .flex-active {
    border-color: #9f9f9f;
    box-shadow: 0 0 0 1px #9f9f9f;
}

.single-product .product .summary.entry-summary {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-width: 470px;
    padding-top: 6px;
    scrollbar-width: none;
}
.single-product .product .summary.entry-summary::-webkit-scrollbar { display: none; }

.single-product .product .summary .product_title,
.single-product.woocommerce div.product .product_title {
    max-width: 440px;
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: 0;
}

.single-product .product .summary .woocommerce-product-rating {
    margin: 0 0 10px;
}

.single-product .product .summary .price,
.single-product.woocommerce div.product p.price {
    display: block;
    margin: 0 0 10px;
    color: #111;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
}

/* The selected variation is reflected in the primary price above the excerpt. */
.single-product .product .summary .woocommerce-variation-price {
    display: none;
}

.single-product .product .summary .price del {
    color: #b0b0b0;
    font-size: 15px;
}

.single-product .product .summary .price ins {
    color: #111;
    font-size: inherit;
    text-decoration: none;
}

.single-product .product .summary .woocommerce-product-details__short-description {
    margin-bottom: 10px;
    color: #6c6c6c;
    font-size: 12px;
    line-height: 1.7;
}

.single-product .product .summary form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.single-product .product .summary form.cart::before,
.single-product .product .summary form.cart::after {
    content: none;
}

.single-product .product .summary .quantity {
    margin: 0;
    height: 34px;
    border-radius: 6px;
    background: #f4f4f4;
}

.single-product .product .summary .quantity input.qty {
    width: 110px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: #f4f4f4;
    color: #222;
    font-size: 13px;
    font-weight: 600;
}

.single-product .product .summary .single_add_to_cart_button,
.single-product .product .summary button.button,
.single-product.woocommerce div.product form.cart .button {
    flex: 1 1 220px;
    min-width: 190px;
    height: 34px;
    padding: 0 24px;
    border-radius: 7px;
    background: #35B777;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.single-product .product .summary .single_add_to_cart_button:hover,
.single-product.woocommerce div.product form.cart .button:hover {
    background: #2da366;
    color: #fff;
}

.single-product .product .summary .single_add_to_cart_button::before,
.single-product.woocommerce div.product form.cart .button::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    vertical-align: middle;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.single-product .product .summary table.variations {
    margin: 0 0 14px;
}

.single-product .product .summary table.variations td,
.single-product .product .summary table.variations th {
    display: block;
    width: 100%;
    padding: 0;
}

.single-product .product .summary table.variations .label {
    margin-bottom: 7px;
    color: #444;
    font-size: 12px;
    font-weight: 600;
}

.single-product .product .summary table.variations select,
.single-product .product .summary input[type="text"],
.single-product .product .summary input[type="email"],
.single-product .product .summary input[type="file"],
.single-product .product .summary textarea {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
}

.single-product .product .summary .product_meta {
    display: none;
}

.single-product .wcpa_form_outer,
.single-product .wcpa_form_item,
.single-product .wcpa_wrap,
.single-product .wcpa_field_wrap {
    margin-bottom: 14px;
}

.single-product .wcpa_form_label,
.single-product .wcpa_field_label,
.single-product .wcpa_field_label label,
.single-product .wcpa_form_item > label {
    color: #444;
    font-size: 12px;
    font-weight: 600;
}

.single-product .wcpa_radio_group,
.single-product .wcpa_checkbox_group,
.single-product .wcpa_image_group,
.single-product .wcpa_color_group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.single-product .wcpa_image,
.single-product .wcpa_color,
.single-product .wcpa_radio,
.single-product .wcpa_checkbox {
    border-radius: 8px;
}

.single-product .wcpa_price_summary,
.single-product .wcpa_total {
    width: 100%;
    color: #333;
    font-size: 12px;
    font-weight: 700;
}

.single-product .product .woocommerce-tabs,
.single-product .product .related.products,
.single-product .product .up-sells {
    grid-column: 1 / -1;
}

.single-product .product .woocommerce-tabs {
    max-width: 100%;
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.single-product .product .woocommerce-tabs ul.tabs {
    justify-content: center;
    gap: 22px;
    margin-bottom: 30px;
    border-bottom: 0;
}

.single-product .product .woocommerce-tabs ul.tabs li a {
    padding: 10px 0;
    color: #777;
    font-size: 13px;
    border-bottom: 2px solid transparent;
}

.single-product .product .woocommerce-tabs ul.tabs li.active a {
    color: #111;
    border-bottom-color: #111;
}

.single-product .product .woocommerce-tabs .panel {
    max-width: 100%;
    margin-bottom: 74px;
    color: #333;
}

.single-product .product .woocommerce-tabs .entry-content,
.single-product .product .woocommerce-tabs .woocommerce-Tabs-panel {
    font-size: 12px;
    line-height: 1.7;
}

.single-product .product .woocommerce-tabs .entry-content h3,
.single-product .product .woocommerce-tabs .entry-content h4,
.single-product .product .woocommerce-tabs .entry-content strong {
    color: #111;
}

.single-product .product .woocommerce-tabs .entry-content ul {
    list-style: disc;
    padding-left: 18px;
    margin: 6px 0 16px;
}

.single-product .product .woocommerce-tabs .entry-content p {
    margin-bottom: 13px;
}

.single-product .product .woocommerce-Reviews,
.single-product .product #reviews {
    max-width: 760px;
    margin: 0 auto 84px;
}

.single-product .product #reviews #comments,
.single-product .product #reviews #review_form_wrapper {
    max-width: 520px;
    margin-inline: auto;
}

.single-product .product #reviews h2,
.single-product .product #review_form .comment-reply-title {
    display: block;
    margin-bottom: 18px;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
}

.single-product .product #review_form textarea {
    min-height: 160px;
    border: 0;
    border-radius: 7px;
    background: #f4f4f4;
}

.single-product .product #review_form input[type="submit"] {
    min-height: 34px;
    padding: 0 20px;
    border-radius: 7px;
    background: #35B777;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.single-product .product .related.products {
    padding-top: 72px;
    border-top: 1px solid #f0f0f0;
}

.single-product .product .related.products h2 {
    margin-bottom: 36px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}

.single-product .product .related.products ul.products,
.single-product.woocommerce .product .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 26px;
}

.single-product .product .related.products ul.products li.product,
.single-product.woocommerce ul.products li.product {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    text-align: center;
}

.single-product .product .related.products ul.products li.product:hover,
.single-product.woocommerce ul.products li.product:hover {
    box-shadow: none;
}

.single-product .product .related.products ul.products li.product a img,
.single-product.woocommerce ul.products li.product a img {
    aspect-ratio: 1;
    border-radius: 6px;
    background: #fafafa;
    object-fit: contain;
}

.single-product .product .related.products .woocommerce-loop-product__title,
.single-product.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 12px 0 4px;
    color: #111;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

.single-product .product .related.products .price,
.single-product.woocommerce ul.products li.product .price {
    padding: 0;
    color: #111;
    font-size: 12px;
    font-weight: 800;
}

.single-product .product .related.products .price del {
    color: #777;
    font-weight: 600;
}

.single-product .product .related.products .price ins {
    text-decoration: none;
}

.single-product .pp-faq,
.single-product .faq,
.single-product .schema-faq,
.single-product .rank-math-block {
    max-width: 1080px;
    margin: 90px auto;
}

.single-product .pp-faq h2,
.single-product .faq h2,
.single-product .schema-faq h2,
.single-product .rank-math-block h2 {
    margin-bottom: 26px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}

.single-product details,
.single-product .schema-faq-section,
.single-product .rank-math-list-item {
    border: 1px solid #e5e5e5;
    border-bottom: 0;
    background: #fff;
}

.single-product details:last-child,
.single-product .schema-faq-section:last-child,
.single-product .rank-math-list-item:last-child {
    border-bottom: 1px solid #e5e5e5;
}

.single-product summary,
.single-product .schema-faq-question,
.single-product .rank-math-question {
    display: block;
    padding: 15px 18px;
    color: #111;
    font-size: 12px;
    font-weight: 700;
}

.single-product .schema-faq-answer,
.single-product .rank-math-answer,
.single-product details > :not(summary) {
    padding: 0 18px 16px;
    color: #555;
    font-size: 12px;
}@media (max-width: 900px) {
    .pp-product-offerbar {
        flex-direction: column;
        gap: 7px;
        min-height: 0;
        padding: 12px 16px;
        text-align: center;
    }

    .single-product .product {
        grid-template-columns: 1fr !important;
        gap: 26px;
        padding-top: 26px;
    }

    .single-product .product .woocommerce-product-gallery {
        position: static;
        padding-top: 0;
    }

    .single-product .product .woocommerce-product-gallery__image {
        min-height: 0;
    }

    /* Single column on phones: the summary must not be a sticky,
       internally scrolling box — especially once the gallery is moved
       inside it (see assets/js/main.js). */
    .single-product .product .summary.entry-summary {
        position: static;
        top: auto;
        align-self: stretch;
        max-height: none;
        overflow: visible;
        max-width: none;
    }

    /* Smaller thumbnails, six to a row. Capped rather than stretched to the
       full column so they stay thumbnail-sized on a wide phone or tablet. */
    .single-product .product .flex-control-thumbs {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
        max-width: 372px;
        margin-top: 12px;
    }

    .single-product .product .flex-control-thumbs img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        padding: 1px;
        border-radius: 5px;
    }

    /* Gallery relocated into the summary, between Afterpay and the price */
    .single-product .product .summary.entry-summary > .woocommerce-product-gallery.pp-gallery-in-summary {
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        margin: 4px 0 18px;
    }

    .single-product .product .summary .product_title,
    .single-product.woocommerce div.product .product_title {
        max-width: none;
        font-size: 22px;
    }

    .single-product .product .related.products ul.products,
    .single-product.woocommerce .product .related.products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 18px;
    }
}
@media (max-width: 520px) {
    .pp-product-offerbar__timer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .single-product .product .summary form.cart {
        display: grid;
        grid-template-columns: 1fr;
    }

    .single-product .product .summary .quantity,
    .single-product .product .summary .quantity input.qty,
    .single-product .product .summary .single_add_to_cart_button,
    .single-product .product .summary button.button,
    .single-product.woocommerce div.product form.cart .button {
        width: 100%;
        min-width: 0;
    }
}


/* ── Size Guide (ACF) ───────────────────────────────────────── */
.pp-size-guide-wrap {
    margin-top: 20px;
    margin-bottom: 22px;
    border-top: 0;
    padding-top: 0;
}

/* Hide WooCommerce's "Clear" reset link for variation attributes */
.single-product .product .summary .reset_variations {
    display: none !important;
}

.pp-size-guide-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    transition: color .15s;
}

.pp-size-guide-toggle:hover { color: #35B777; }

.pp-size-guide-caret {
    font-size: 10px;
    transition: transform .2s;
    display: inline-block;
}

.pp-size-guide-toggle.is-open .pp-size-guide-caret { transform: rotate(180deg); }

.pp-size-guide-content {
    margin-top: 14px;
    overflow-x: auto;
    font-size: 14px;
}

.pp-size-guide-content .size-chart h3 {
    display: none !important;
}

.pp-size-guide-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pp-size-guide-content table th,
.pp-size-guide-content table td {
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    text-align: center;
}

.pp-size-guide-content table thead th {
    background: #f9fafb;
    font-weight: 700;
}

/* Slim down the header row. The pasted size-chart HTML may or may not wrap the
   header in <thead>, so target header cells (<th>) and any thead cells, and use
   !important to beat inline padding that sometimes ships with the table. */
.pp-size-guide-content table th,
.pp-size-guide-content table thead th,
.pp-size-guide-content table thead td {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    line-height: 1.15 !important;
}

/* ── Below-fold product sections (care guide, FAQs) ─────────── */
.pp-below-section {
    padding: 56px 0;
    border-top: 1px solid #e5e7eb;
}

@keyframes pp-archive-icon-flow {
    from { transform: translateX(-32px); }
    to { transform: translateX(0); }
}

@keyframes pp-archive-icon-swirl {
    from { transform: rotate(0deg) scale(1.05); }
    to { transform: rotate(360deg) scale(1.05); }
}

/* Shown when a search found nothing as typed and we answered a corrected one
   instead. Quiet, but present - the shopper has to be able to tell that the
   results below answer a slightly different question. */
.pp-search-correction {
    margin: 0 0 18px;
    padding: 11px 15px;
    border: 1px solid #e6e6e6;
    border-left: 3px solid #35b777;
    border-radius: 6px;
    background: #fafafa;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
}
.pp-search-correction strong { color: #111; font-weight: 600; }

/* Archive product card (uses pp-arch-card* to avoid colliding with homepage pp-product-card*) */
.pp-arch-card { height: 100%; }

.pp-arch-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ededed;
    background: #fff;
    transition: box-shadow .2s;
}

.pp-arch-card__link:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }

.pp-arch-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    overflow: hidden;
}

.pp-arch-card__img {
    position: absolute;
    inset: 0;
}

.pp-arch-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-arch-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f97316;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.pp-arch-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.pp-arch-card__name {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    line-height: 1.35;
    margin: 0;
}

.pp-arch-card__price {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.pp-arch-card__price del { color: #999; font-weight: 400; }
.pp-arch-card__price ins { text-decoration: none; }

.pp-archive-guides__eyebrow,
.pp-post-shop__eyebrow {
    margin: 0 0 6px;
    color: #35B777;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}


/* ── pp-below-section-title ──────────────────────────────────── */
.pp-below-section-title {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 600;
    margin-bottom: 16px;
    color: #111;
}

.pp-below-section-desc {
    font-size: 15px;
    color: #555;
    margin-bottom: 32px;
    max-width: 640px;
}

/* ── Care Guide ─────────────────────────────────────────────── */
.pp-care-guide-inner {
    display: block;
}

.pp-care-guide-inner.pp-care-guide-has-image {
    display: grid;
    grid-template-columns: minmax(0, 360px) 1fr;
    gap: 48px;
    align-items: center;
    justify-items: center;
}

.pp-care-guide-image {
    width: 100%;
    text-align: center;
}

.pp-care-guide-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin-inline: auto;
}

.pp-care-guide-text {
    text-align: center;
}

.pp-care-guide-text ul,
.pp-care-guide-text ol {
    text-align: left;
    display: inline-block;
}

/* ── Wysiwyg shared styles ───────────────────────────────────── */
.pp-wysiwyg h2 { font-size: 22px; font-weight: 700; color: #171717; line-height: 1.25; margin: 38px 0 14px; }
.pp-wysiwyg h3 { font-size: 18px; font-weight: 600; color: #171717; line-height: 1.3; margin: 30px 0 12px; }
.pp-wysiwyg h2:first-child, .pp-wysiwyg h3:first-child { margin-top: 0; }
.pp-wysiwyg p { margin-bottom: 12px; }
.pp-wysiwyg p:last-child { margin-bottom: 0; }
.pp-wysiwyg ul, .pp-wysiwyg ol { padding-left: 20px; margin-bottom: 12px; }
.pp-wysiwyg ul li { list-style: disc; }
.pp-wysiwyg ol li { list-style: decimal; }
.pp-wysiwyg li { margin-bottom: 6px; }
.pp-wysiwyg strong { font-weight: 700; }
.pp-wysiwyg em { font-style: italic; }
.pp-wysiwyg img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 0 8px; }
.pp-about-banner {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    object-position: center;
}
.pp-wysiwyg a { color: #35B777; text-decoration: underline; }
.pp-wysiwyg .pp-btn { text-decoration: none; margin-top: 12px; }
.pp-wysiwyg .pp-btn--primary { color: #fff; }
.pp-wysiwyg .pp-btn--outline,
.pp-wysiwyg .pp-btn--white { color: #000; }

/* ── FAQ accordion ───────────────────────────────────────────── */
.pp-faq-list {
    margin-top: 8px;
    max-width: 800px;
}

.pp-faq-item {
    border-bottom: 1px solid #e5e7eb;
}

.pp-faq-item:first-child { border-top: 1px solid #e5e7eb; }

.pp-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s;
}

.pp-faq-question:hover { color: #35B777; }

.pp-faq-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 300;
    color: #555;
    transition: border-color .15s, transform .2s;
    position: relative;
}

.pp-faq-icon::before,
.pp-faq-icon::after {
    content: '';
    position: absolute;
    background: #555;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}

.pp-faq-icon::before { width: 10px; height: 2px; }
.pp-faq-icon::after  { width: 2px;  height: 10px; }

.pp-faq-question.is-open .pp-faq-icon { border-color: #35B777; }
.pp-faq-question.is-open .pp-faq-icon::before { background: #35B777; }
.pp-faq-question.is-open .pp-faq-icon::after  { background: #35B777; transform: rotate(90deg) scaleY(0); opacity: 0; }

.pp-faq-answer { overflow: hidden; }

.pp-faq-answer-inner {
    padding: 0 4px 20px;
    font-size: 14px;
    color: #444;
    line-height: 1.75;
}

/* ── Long description + inline video ────────────────────────── */
.pp-description-heading {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
}

.pp-product-description .pp-long-desc { max-width: 820px; }
.pp-product-description .pp-long-desc h2 { font-size: 16px; font-weight: 600; margin: 16px 0 8px; color: #111; }
.pp-product-description .pp-long-desc h3 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; color: #111; }

.pp-inline-video {
    margin-top: 24px;
    max-width: 640px;
}
.pp-inline-video iframe {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    border-radius: 8px;
    display: block;
}
.pp-inline-video .wp-has-aspect-ratio,
.pp-inline-video .wp-block-embed { margin: 0; }

/* ── Responsive: below-fold sections ────────────────────────── */
@media (max-width: 900px) {
    .pp-care-guide-inner.pp-care-guide-has-image {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pp-below-section { padding: 40px 0; }
}@media (max-width: 520px) {
    .pp-below-section { padding: 32px 0; }
    .pp-faq-question   { font-size: 14px; padding: 15px 4px; }
}


/* ── FPD Customize Design button ────────────────────────────── */
.fpd-btn,
.fpd-open-btn,
.fpd-module-btn,
.fpd-configurator-btn,
.fpd-open-product,
button.fpd-btn,
a.fpd-btn,
.single-product .summary .fpd-btn,
.single-product .summary .wc-fpd-btn,
[class*="fpd-"][class*="-btn"],
.single-product form.cart + .fpd-module-wrap a,
.single-product form.cart + .fpd-module-wrap button,
.single-product .entry-summary > div > button:not(.pp-size-guide-toggle):not(.pp-faq-question):not(.single_add_to_cart_button),
.single-product .entry-summary > div > a.button:not(.added_to_cart) {
    background: #111 !important;
    color: #fff !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    border-radius: 7px !important;
    min-height: 42px !important;
    padding: 9px 18px !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
    margin-top: 10px !important;
    border: none !important;
    cursor: pointer !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* Customize Design — icon + spacing when moved above cart form */
.pp-customize-moved {
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}

/* Pencil icon before button text */
.fpd-btn::before,
.fpd-open-btn::before,
.fpd-module-btn::before,
[class*="fpd-open"]::before,
[class*="fpd"][class*="btn"]::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    vertical-align: middle;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='16 3 21 8 8 21 3 21 3 16 16 3'/%3E%3C/svg%3E") no-repeat center / contain;
}

.single-product .ppd-open-designer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 18px !important;
    border: 1px solid #000 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}

.single-product .ppd-open-designer:hover,
.single-product .ppd-open-designer:focus-visible {
    border-color: #000 !important;
    background: #000 !important;
    color: #fff !important;
}

.single-product .ppd-open-designer svg {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.single-product .ppd-open-designer:not(:hover):not(:focus-visible) svg,
.single-product .ppd-open-designer:not(:hover):not(:focus-visible) path,
.single-product .ppd-open-designer:not(:hover):not(:focus-visible) rect,
.single-product .ppd-open-designer:not(:hover):not(:focus-visible) circle {
    stroke: #000 !important;
}

body.single-product .product .summary.entry-summary .ppd-editor-shell .ppd-open-designer:not(:hover):not(:focus-visible),
body.single-product .product .summary.entry-summary .ppd-editor-shell .ppd-open-designer:not(:hover):not(:focus-visible) .ppd-open-designer__text {
    color: #000 !important;
}

/* Hide FPD's built-in font icon so ours is the only one */
.fpd-btn i, .fpd-btn [class*="fpdi"],
.fpd-open-btn i, [class*="fpd"][class*="btn"] i { display: none !important; }

/* ── FAQ + Reviews side-by-side ──────────────────────────────── */
.pp-faq-reviews-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* Reviews column */
.pp-reviews-col #reviews,
.pp-reviews-col .woocommerce-Reviews { max-width: none; margin: 0; }

.pp-reviews-col #reviews > h2,
.pp-reviews-col .woocommerce-Reviews > h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
}

.pp-reviews-col ol.commentlist {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.pp-reviews-col ol.commentlist > li { padding: 18px 0; border-bottom: 1px solid #f0f0f0; }
.pp-reviews-col ol.commentlist > li:first-child { border-top: 1px solid #f0f0f0; }

/* WooCommerce review markup: avatar beside one unified review-content column. */
.pp-reviews-col .comment_container {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
}

.pp-reviews-col .comment_container > img.avatar {
    grid-column: 1;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    object-fit: cover;
}

.pp-reviews-col .comment_container > .comment-text {
    grid-column: 2;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.pp-reviews-col .comment-text .meta {
    margin: 0 0 5px;
    color: #777;
    font-size: 12px;
    line-height: 1.45;
}

.pp-reviews-col .comment-text .woocommerce-review__author {
    color: #111;
    font-weight: 700;
}

.pp-reviews-col .comment-body { display: flex; flex-direction: column; gap: 6px; }

.pp-reviews-col .comment-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-reviews-col .comment-author img.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pp-reviews-col .comment-author cite {
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    color: #111;
}

.pp-reviews-col .comment-meta,
.pp-reviews-col .comment-meta a {
    font-size: 11px;
    color: #aaa;
    text-decoration: none;
}

.pp-reviews-col .comment-text .star-rating {
    float: none;
    color: #f59e0b;
    font-size: 13px;
    margin-bottom: 4px;
}

.pp-reviews-col .comment-text .description p,
.pp-reviews-col .comment-text blockquote p {
    font-size: 13px;
    color: #444;
    line-height: 1.65;
    margin: 0;
}

/* Review form */
.pp-reviews-col #review_form_wrapper { margin-top: 24px; }

.pp-reviews-col #review_form .comment-reply-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #111;
    display: block;
}

.pp-reviews-col .comment-form p { margin-bottom: 14px; }

.pp-reviews-col .comment-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #333;
}

.pp-reviews-col .comment-form input[type="text"],
.pp-reviews-col .comment-form input[type="email"] {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}

.pp-reviews-col .comment-form input[type="text"]:focus,
.pp-reviews-col .comment-form input[type="email"]:focus { border-color: #35B777; }

.pp-reviews-col .comment-form textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    resize: vertical;
    outline: none;
    transition: border-color .15s;
}

.pp-reviews-col .comment-form textarea:focus { border-color: #35B777; }

.pp-reviews-col .comment-form input[type="submit"],
.pp-reviews-col #respond input#submit {
    height: 44px;
    padding: 0 28px;
    border-radius: 7px;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}

.pp-reviews-col .comment-form input[type="submit"]:hover,
.pp-reviews-col #respond input#submit:hover { background: #222; }

/* File upload button */
.pp-reviews-col .comment-form input[type="file"] {
    display: none;
}
.pp-reviews-col .comment-form label.pp-file-label,
.pp-reviews-col .comment-form .pp-file-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 22px !important;
    box-sizing: border-box !important;
    border-radius: 7px;
    border: 1.5px solid #ddd;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1 !important;
    color: #111;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap !important;
    transition: border-color .15s;
}
.pp-reviews-col .comment-form .pp-file-label svg,
.pp-reviews-col .comment-form .pp-file-label__icon {
    display: block !important;
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
}
.pp-reviews-col .comment-form .pp-file-label__text {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
.pp-reviews-col .comment-form .pp-file-label:hover { border-color: #111; }

/* Star rating — review form */
/* JS wraps comment-form-rating + p.stars in .pp-rating-wrap since they're siblings */
.pp-reviews-col .pp-rating-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pp-reviews-col .pp-rating-wrap .comment-form-rating { margin-bottom: 0; }
.pp-reviews-col .comment-form-rating label { font-size: 12px; font-weight: 700; margin-bottom: 0; color: #333; white-space: nowrap; }
.pp-reviews-col p.stars { margin: 0; }
.pp-reviews-col p.stars span { display: inline-flex; gap: 4px; }
.pp-reviews-col p.stars a {
    display: inline-block;
    position: relative;
    width: 28px;
    height: 28px;
    font-size: 0;
    text-indent: -9999px;
    text-decoration: none;
    cursor: pointer;
}
.pp-reviews-col p.stars a::before {
    content: '★';
    position: absolute;
    left: 0; top: 0;
    font-size: 26px;
    line-height: 1;
    color: #ddd;
    text-indent: 0;
    transition: color .1s;
}
/* Fill all stars up to hovered */
.pp-reviews-col p.stars:hover a::before { color: #f59e0b; }
.pp-reviews-col p.stars a:hover ~ a::before { color: #ddd; }
/* Fill stars up to selected */
.pp-reviews-col p.stars.selected a::before { color: #f59e0b; }
.pp-reviews-col p.stars.selected a.active ~ a::before { color: #ddd; }

.pp-reviews-col #no-comments { font-size: 13px; color: #888; }@media (max-width: 900px) {
    .pp-faq-reviews-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}


/* ── Custom category-based related products ──────────────────── */
.pp-cat-related__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.pp-cat-related__card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ededed;
    transition: box-shadow .2s;
}

.pp-cat-related__card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.pp-cat-related__img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: #f5f5f5;
}

.pp-cat-related__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-cat-related__name {
    display: block;
    padding: 12px 14px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    line-height: 1.35;
}

.pp-cat-related__price {
    display: block;
    padding: 0 14px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.pp-cat-related__price del { color: #999; font-weight: 400; }
.pp-cat-related__price ins { text-decoration: none; }

/* Bounded below, because under 700px the mobile rail above takes over and a
   column count here would win on source order and undo it. */
@media (max-width: 900px) and (min-width: 701px) {
    .pp-cat-related__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* The rail itself is defined near the product grid, far above. This grid's base
   rule is below it, so its column count and gap win on source order alone and
   flatten the rail back into one row. Only those two need restating; the flow,
   the row count, the track width and the containment all still come from there. */
@media (max-width: 700px) {
    .pp-cat-related__grid {
        grid-template-columns: none;
        gap: 12px;
    }
}

/* Variable product purchase controls */
.single-product .product .summary.entry-summary > .pp-customize-moved {
    width: 100% !important;
    max-width: none !important;
}

.single-product .product .summary.entry-summary > a.pp-customize-moved,
.single-product .product .summary.entry-summary > button.pp-customize-moved {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.single-product .product .summary.entry-summary > .pp-customize-moved > *,
.single-product .product .summary.entry-summary > .pp-customize-moved a,
.single-product .product .summary.entry-summary > .pp-customize-moved button {
    width: 100% !important;
    max-width: none !important;
    font-weight: 400 !important;
}

.ppd-open-designer,
.ppd-open-designer *,
.fpd-btn *,
.fpd-open-btn *,
.fpd-module-btn *,
.fpd-configurator-btn *,
.fpd-open-product *,
.single-product .summary .fpd-btn *,
.single-product .summary .wc-fpd-btn *,
#fpd-start-customizing-button,
#fpd-start-customizing-button *,
.pp-customize-inline-button,
.pp-customize-inline-button * {
    font-weight: 400 !important;
}

.single-product .product .summary form.cart.variations_form {
    display: block;
    width: 100%;
}

.single-product .product .summary form.cart.variations_form table.variations {
    display: block;
    width: 100%;
    margin: 0 0 16px;
}

.single-product .product .summary form.cart.variations_form table.variations tbody,
.single-product .product .summary form.cart.variations_form table.variations tr {
    display: block;
    width: 100%;
}

.single-product .product .summary form.cart.variations_form table.variations tr {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 42px;
}

.single-product .product .summary form.cart.variations_form table.variations tr + tr {
    margin-top: 10px;
}

.single-product .product .summary form.cart.variations_form table.variations th.label,
.single-product .product .summary form.cart.variations_form table.variations td.value {
    display: block;
    width: auto;
    padding: 0;
}

.single-product .product .summary form.cart.variations_form table.variations th.label {
    display: flex;
    align-items: center;
    height: 42px;
    margin: 0;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.single-product .product .summary form.cart.variations_form table.variations th.label label {
    display: block;
    margin: 0;
}

.single-product .product .summary form.cart.variations_form table.variations td.value select {
    width: 100%;
    height: 42px;
    min-height: 42px;
}

.single-product .product .summary form.cart.variations_form table.variations .reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
}

.single-product .product .summary form.cart.variations_form .single_variation_wrap,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart {
    width: 100%;
}

.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart-disabled {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart::before,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart::after {
    content: none;
}

.single-product .product .summary form.cart.variations_form .quantity {
    order: 2;
    flex: 0 0 110px;
}

.single-product .product .summary form.cart.variations_form .single_add_to_cart_button[type="submit"] {
    order: 3;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.single-product .product .summary .single_add_to_cart_button,
.single-product.woocommerce div.product form.cart .single_add_to_cart_button {
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}

body.single-product.fpd-customization-required .product .summary form.cart.variations_form .single_add_to_cart_button[type="submit"],
.single-product .product.fpd-customization-required .summary form.cart.variations_form .single_add_to_cart_button[type="submit"] {
    display: inline-flex !important;
}

.single-product .product .summary form.cart.variations_form #fpd-start-customizing-button,
.single-product .product .summary form.cart.variations_form .pp-customize-inline-button {
    order: 1;
    flex: 0 0 100%;
    width: 100% !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.single-product .product .summary form.cart.variations_form input[type="hidden"] {
    display: none !important;
}@media (max-width: 520px) {
    .single-product .product .summary form.cart.variations_form table.variations tr {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart {
        display: grid;
        grid-template-columns: 1fr;
    }

    .single-product .product .summary form.cart.variations_form .quantity {
        flex-basis: auto;
    }
}


/* Hard alignment override for Woo variation table markup */
.single-product .product .summary form.cart.variations_form table.variations {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 0 16px !important;
}

.single-product .product .summary form.cart.variations_form table.variations tbody {
    display: table-row-group !important;
    width: 100% !important;
}

.single-product .product .summary form.cart.variations_form table.variations tr {
    display: table-row !important;
    width: 100% !important;
    min-height: 0 !important;
}

.single-product .product .summary form.cart.variations_form table.variations th.label {
    display: table-cell !important;
    width: 86px !important;
    height: 42px !important;
    padding: 0 12px 0 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    text-align: left !important;
    line-height: 42px !important;
}

.single-product .product .summary form.cart.variations_form table.variations th.label label {
    display: inline-flex !important;
    align-items: center !important;
    height: 42px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.single-product .product .summary form.cart.variations_form table.variations td.value {
    display: table-cell !important;
    width: auto !important;
    height: 42px !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.single-product .product .summary form.cart.variations_form table.variations td.value select {
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
}@media (max-width: 520px) {
    .single-product .product .summary form.cart.variations_form table.variations,
    .single-product .product .summary form.cart.variations_form table.variations tbody,
    .single-product .product .summary form.cart.variations_form table.variations tr,
    .single-product .product .summary form.cart.variations_form table.variations th.label,
    .single-product .product .summary form.cart.variations_form table.variations td.value {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .single-product .product .summary form.cart.variations_form table.variations th.label {
        padding: 0 0 7px !important;
        line-height: 1.2 !important;
    }
}


/* Final variation row alignment: label and select on one centered flex row */
.single-product .product .summary form.cart.variations_form table.variations,
.single-product .product .summary form.cart.variations_form table.variations tbody {
    display: block !important;
    width: 100% !important;
}

.single-product .product .summary form.cart.variations_form table.variations tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
}

.single-product .product .summary form.cart.variations_form table.variations th.label {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    flex: 0 0 64px !important;
    width: 64px !important;
    height: auto !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.single-product .product .summary form.cart.variations_form table.variations th.label label {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.single-product .product .summary form.cart.variations_form table.variations td.value {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
}

.single-product .product .summary form.cart.variations_form table.variations td.value select {
    display: block !important;
    width: 100% !important;
}@media (max-width: 520px) {
    .single-product .product .summary form.cart.variations_form table.variations tr {
        display: block !important;
    }

    .single-product .product .summary form.cart.variations_form table.variations th.label {
        width: 100% !important;
        padding-bottom: 7px !important;
    }
}


/* Variable product customize/cart spacing */
.single-product .product .summary form.cart.variations_form .single_variation_wrap,
.single-product .product .summary form.cart.variations_form .woocommerce-variation {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart-disabled {
    row-gap: 8px !important;
    column-gap: 8px !important;
}

.single-product .product .summary form.cart.variations_form #fpd-start-customizing-button,
.single-product .product .summary form.cart.variations_form .pp-customize-inline-button {
    margin: 0 !important;
}

/* Color attribute swatches on variable products */
.single-product .product .summary form.cart.variations_form table.variations tr.pp-color-swatch-row {
    align-items: center !important;
}

.single-product .product .summary form.cart.variations_form table.variations tr.pp-color-swatch-row th.label,
.single-product .product .summary form.cart.variations_form table.variations tr.pp-color-swatch-row td.label {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
}

.single-product .product .summary .pp-color-selected-name {
    display: block;
    max-width: 64px;
    color: #777;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.single-product .product .summary .pp-color-selected-name[hidden] {
    display: none !important;
}

.single-product .product .summary form.cart.variations_form table.variations tr.pp-color-swatch-row td.value {
    position: relative;
}

.single-product .product .summary form.cart.variations_form table.variations tr.pp-color-swatch-row td.value select[data-pp-color-swatches="1"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.single-product .product .summary .pp-color-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 42px;
}

.single-product .product .summary .pp-color-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #111;
    font: inherit;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    box-shadow: none !important;
    transition: box-shadow .15s, opacity .15s, transform .15s;
}

.single-product .product .summary .pp-color-swatch::before,
.single-product .product .summary .pp-color-swatch::after {
    content: none !important;
}

.single-product .product .summary .pp-color-swatch:hover {
    transform: translateY(-1px);
}

.single-product .product .summary .pp-color-swatch.is-active {
    box-shadow: 0 0 0 2px #111 !important;
}

.single-product .product .summary .pp-color-swatch.is-disabled {
    opacity: .35;
    cursor: not-allowed;
}

.single-product .product .summary .pp-color-swatch__chip {
    display: block;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 50%;
    background: var(--pp-swatch-color, #ddd);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}

.single-product .product .summary .pp-color-swatch.is-split .pp-color-swatch__chip {
    background: linear-gradient(90deg, var(--pp-swatch-color, #ddd) 0 50%, var(--pp-swatch-color-2, var(--pp-swatch-color, #ddd)) 50% 100%);
}

.single-product .product .summary .pp-color-swatch.is-light .pp-color-swatch__chip {
    border-color: rgba(0, 0, 0, .28);
}

.single-product .product .summary .pp-color-swatch.is-unknown .pp-color-swatch__chip {
    background: linear-gradient(135deg, #f2f2f2 0 48%, #cfcfcf 48% 52%, #fff 52% 100%);
}@media (max-width: 520px) {
    .single-product .product .summary .pp-color-swatches {
        gap: 6px;
    }
}


/* Compact single-product summary stack */
.single-product .product .summary .product_title,
.single-product.woocommerce div.product .product_title {
    margin-bottom: 6px !important;
}

.single-product .product .summary .afterpay-paragraph,
.single-product .product .summary .afterpay-placement,
.single-product .product .summary .afterpay-message,
.single-product .product .summary square-placement {
    margin: 0 0 10px !important;
}

.single-product .product .summary .woocommerce-product-details__short-description {
    margin-bottom: 8px !important;
    line-height: 1.45 !important;
}

.pp-size-guide-wrap {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.single-product .product .summary form.cart.variations_form table.variations {
    margin-bottom: 6px !important;
}

.single-product .product .summary .pp-color-swatches {
    min-height: 30px !important;
}

.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart-disabled {
    row-gap: 5px !important;
}

.single-product .product .summary form.cart:not(.variations_form):has(.ppd-editor-shell),
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart:has(.ppd-editor-shell),
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart-disabled:has(.ppd-editor-shell) {
    display: grid !important;
    grid-template-columns: minmax(88px, 110px) minmax(0, 1fr) !important;
    align-items: stretch !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
}

.single-product .product .summary form.cart:not(.variations_form):has(.ppd-editor-shell) .ppd-editor-shell,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart:has(.ppd-editor-shell) .ppd-editor-shell,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart-disabled:has(.ppd-editor-shell) .ppd-editor-shell {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

.single-product .product .summary form.cart:not(.variations_form):has(.ppd-editor-shell) > .quantity,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart:has(.ppd-editor-shell) .quantity,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart-disabled:has(.ppd-editor-shell) .quantity {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
}

.single-product .product .summary form.cart:not(.variations_form):has(.ppd-editor-shell) > .quantity input.qty,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart:has(.ppd-editor-shell) .quantity input.qty,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart-disabled:has(.ppd-editor-shell) .quantity input.qty {
    width: 100% !important;
}

.single-product .product .summary form.cart:not(.variations_form):has(.ppd-editor-shell) > .single_add_to_cart_button,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart:has(.ppd-editor-shell) .single_add_to_cart_button,
.single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart-disabled:has(.ppd-editor-shell) .single_add_to_cart_button {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}@media (max-width: 360px) {
    .single-product .product .summary form.cart:not(.variations_form):has(.ppd-editor-shell),
    .single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart:has(.ppd-editor-shell),
    .single-product .product .summary form.cart.variations_form .woocommerce-variation-add-to-cart-disabled:has(.ppd-editor-shell) {
        grid-template-columns: minmax(76px, 90px) minmax(0, 1fr) !important;
    }
}


.single-product .product .summary .quantity,
.single-product .product .summary .quantity input.qty,
.single-product .product .summary .single_add_to_cart_button,
.single-product .product .summary button.button,
.single-product.woocommerce div.product form.cart .button {
    height: 32px !important;
    min-height: 32px !important;
}

/* Contact page */
.pp-contact-page {
    background: #fff;
    color: #111;
}

.pp-contact-hero {
    padding: 32px 0 28px;
}

.pp-contact-breadcrumb {
    display: flex;
    justify-content: center;
    padding: 16px 0 26px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
}

.pp-contact-breadcrumb a {
    color: #333;
}

.pp-contact-intro {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.pp-contact-intro h1 {
    margin: 24px 0 8px;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    color: #111;
}

.pp-contact-intro p {
    margin: 0 auto;
    max-width: 920px;
    color: #606060;
    font-size: 14px;
    line-height: 1.6;
}

.pp-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    max-width: 980px;
    margin: 56px auto 0;
}

.pp-contact-card {
    text-align: center;
}

.pp-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    color: #35b777;
}

.pp-contact-card__icon svg {
    width: 46px;
    height: 46px;
}

.pp-contact-card h2 {
    margin: 0 0 10px;
    color: #111;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

.pp-contact-card p {
    max-width: 260px;
    margin: 0 auto;
    color: #444;
    font-size: 16px;
    line-height: 1.6;
}

.pp-contact-card a {
    color: inherit;
    transition: color .15s;
}

.pp-contact-card a:hover {
    color: #16864c;
}

.pp-contact-note {
    max-width: 640px;
    margin: 56px auto 0;
    text-align: center;
    color: #555;
    font-size: 13px;
    line-height: 1.45;
}

.pp-contact-note p + p {
    margin-top: 14px;
}

.pp-contact-map {
    padding: 18px 0 70px;
}

.pp-contact-map .pp-container {
    max-width: 1480px;
}

.pp-contact-map iframe {
    display: block;
    width: 100%;
    min-height: 520px;
    border: 0;
    background: #f2f2f2;
}

.pp-contact-message {
    padding: 0 0 72px;
}

.pp-contact-message .pp-container {
    max-width: 1480px;
}

.pp-contact-message h2 {
    margin: 0 0 36px;
    text-align: center;
    color: #111;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.1;
}

.pp-contact-alert {
    max-width: 760px;
    margin: 0 auto 24px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.pp-contact-alert--success {
    background: #effaf4;
    color: #16633c;
}

.pp-contact-alert--error {
    background: #fff1f1;
    color: #a12121;
}

.pp-contact-form,
.pp-contact-form-body form,
.pp-contact-form-body .wpcf7-form,
.pp-contact-form-body .wpforms-form,
.pp-contact-form-body .gform_wrapper form {
    display: grid;
    gap: 14px;
}

.pp-contact-form label,
.pp-contact-form-body label,
.pp-contact-form-body .wpforms-field-label,
.pp-contact-form-body .gfield_label {
    display: grid;
    gap: 6px;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.pp-contact-form input,
.pp-contact-form textarea,
.pp-contact-form-body input[type="text"],
.pp-contact-form-body input[type="email"],
.pp-contact-form-body input[type="tel"],
.pp-contact-form-body input[type="url"],
.pp-contact-form-body textarea,
.pp-contact-form-body select {
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border: 1px solid #d7d7d7;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.pp-contact-form input::placeholder,
.pp-contact-form textarea::placeholder,
.pp-contact-form-body input::placeholder,
.pp-contact-form-body textarea::placeholder {
    color: #9a9a9a;
}

.pp-contact-form input:focus,
.pp-contact-form textarea:focus,
.pp-contact-form-body input:focus,
.pp-contact-form-body textarea:focus,
.pp-contact-form-body select:focus {
    border-color: #35b777;
    box-shadow: 0 0 0 3px rgba(53, 183, 119, .14);
}

.pp-contact-form textarea,
.pp-contact-form-body textarea {
    min-height: 132px;
    resize: vertical;
}

.pp-contact-form button,
.pp-contact-form-body button,
.pp-contact-form-body input[type="submit"],
.pp-contact-form-body .wpforms-submit,
.pp-contact-form-body .gform_button {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 5px;
    background: #35b777;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
}

.pp-contact-form button:hover,
.pp-contact-form-body button:hover,
.pp-contact-form-body input[type="submit"]:hover,
.pp-contact-form-body .wpforms-submit:hover,
.pp-contact-form-body .gform_button:hover {
    background: #2ca066;
    transform: translateY(-1px);
}

.pp-contact-hp {
    position: absolute;
    left: -9999px;
}@media (max-width: 900px) {
    .pp-contact-cards {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 42px;
    }

    .pp-contact-map iframe {
        min-height: 420px;
    }
}
@media (max-width: 560px) {
    .pp-contact-intro h1,
    .pp-contact-message h2 {
        font-size: 30px;
    }

    .pp-contact-card p {
        font-size: 15px;
    }

    .pp-contact-map {
        padding-bottom: 54px;
    }

    .pp-contact-map iframe {
        min-height: 340px;
    }
}


/* ── Shared page header (all page templates) ──────────────────── */
.pp-page-hero {
    background: #f5f5f5;
    text-align: center;
    padding: 18px 16px;
}
.pp-page-hero__title {
    font-size: clamp(24px, 3.5vw, 30px);
    font-weight: 700;
    color: #171717;
    margin: 0;
}

/* ── FAQ page ─────────────────────────────────────────────────── */
.pp-faq-page__body { padding: 44px 0 72px; }

.pp-faq-page__support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 44px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #171717;
}
.pp-faq-page__support-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #35B777;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.pp-faq-page__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px 72px;
    max-width: 1120px;
    margin: 0 auto;
}

.pp-faq-group { margin-bottom: 24px; }
.pp-faq-group__title {
    font-size: 22px;
    font-weight: 700;
    color: #171717;
    margin: 0 0 4px;
}

/* Let the shared accordion fill the grid column on the FAQ page */
.pp-faq-page .pp-faq-list { max-width: none; }@media (max-width: 860px) {
    .pp-faq-page__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .pp-faq-page__body { padding: 32px 0 56px; }
}


/* ── My Account page ─────────────────────────────────────────── */
.pp-account-body { padding: 48px 0 72px; }

.pp-account-body .woocommerce {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    max-width: 1080px;
    margin: 0 auto;
}

.pp-account-body .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pp-account-body .woocommerce-MyAccount-navigation::before {
    content: "MY ACCOUNT";
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #6b7280;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
.pp-account-body .woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 12px 16px;
    border-radius: 8px;
    color: #171717;
    text-decoration: none;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.pp-account-body .woocommerce-MyAccount-navigation-link a:hover {
    background: #f5f5f5;
    color: #111;
}
.pp-account-body .woocommerce-MyAccount-navigation-link.is-active a {
    background: #111;
    color: #fff;
}

.pp-account-body .woocommerce-MyAccount-content { min-width: 0; }

/* Primary saved-design action across every viewport. */
.woocommerce-account .ppd-design-card__edit {
    background: #111;
    border-color: #111;
    color: #fff;
}
.woocommerce-account .ppd-design-card__edit:hover,
.woocommerce-account .ppd-design-card__edit:focus,
.woocommerce-account .ppd-design-card__edit:focus-visible {
    background: #2b2b2b;
    border-color: #2b2b2b;
    color: #fff;
}
.woocommerce-account .ppd-design-card__edit:focus-visible {
    outline: 3px solid rgba(17, 17, 17, .24);
    outline-offset: 2px;
}

/* Account tables (orders, etc.) */
.pp-account-body table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
}
.pp-account-body table.shop_table th,
.pp-account-body table.shop_table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
}
.pp-account-body table.shop_table thead th {
    background: #f9fafb;
    font-weight: 700;
    color: #171717;
}
.pp-account-body table.shop_table tbody tr:last-child td { border-bottom: none; }
.pp-account-body table.shop_table .woocommerce-orders-table__cell-order-actions {
    text-align: right;
    white-space: nowrap;
}
/* One clean button per row instead of a stacked green block */
.pp-account-body .woocommerce-button.button,
.pp-account-body table.shop_table .button {
    display: inline-block;
    width: auto;
    margin: 3px 0 3px 6px;
    padding: 8px 18px;
    background: #35B777;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease;
}
.pp-account-body .woocommerce-button.button:hover,
.pp-account-body table.shop_table .button:hover { background: #2ea36a; }

/* Account content: headings, addresses, forms */
.pp-account-body .woocommerce-MyAccount-content h2,
.pp-account-body .woocommerce-MyAccount-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #171717;
    line-height: 1.3;
    margin: 30px 0 14px;
}
.pp-account-body .woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.pp-account-body .woocommerce-MyAccount-content p { margin: 0 0 14px; line-height: 1.65; color: #333; }
.pp-account-body .woocommerce-MyAccount-content > p:first-of-type { color: #555; }

/* Addresses as cards */
.pp-account-body .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 8px;
}
.pp-account-body .woocommerce-Address {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px 24px;
}
.pp-account-body .woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.pp-account-body .woocommerce-Address-title h2,
.pp-account-body .woocommerce-Address-title h3 { margin: 0; }
.pp-account-body .woocommerce-Address-title .edit {
    font-size: 13px;
    font-weight: 600;
    color: #35B777;
    text-decoration: none;
    white-space: nowrap;
}
.pp-account-body .woocommerce-Address-title .edit:hover { text-decoration: underline; }
.pp-account-body .woocommerce-Address address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin-top: 12px;
}

/* Account forms (details + address edit) */
.pp-account-body form .form-row,
.pp-account-body form .woocommerce-form-row { margin: 0 0 18px; }
.pp-account-body form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #171717;
}
.pp-account-body .input-text,
.pp-account-body form input[type="text"],
.pp-account-body form input[type="email"],
.pp-account-body form input[type="tel"],
.pp-account-body form input[type="password"],
.pp-account-body form select {
    width: 100%;
    max-width: 480px;
    padding: 11px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}
.pp-account-body .input-text:focus,
.pp-account-body form input:focus,
.pp-account-body form select:focus {
    outline: none;
    border-color: #35B777;
    box-shadow: 0 0 0 3px rgba(53, 183, 119, .15);
}
.pp-account-body form .description { color: #6b7280; font-size: 13px; font-style: italic; }
.pp-account-body fieldset {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px 4px;
    margin: 12px 0 22px;
    max-width: 540px;
}
.pp-account-body fieldset legend {
    font-size: 14px;
    font-weight: 700;
    color: #171717;
    padding: 0 8px;
}@media (max-width: 640px) {
    .pp-account-body .woocommerce-Addresses { grid-template-columns: 1fr; }

    /* The designer plugin changes the account rail into wrapping pills below
       tablet width. Phones are clearer as one predictable, full-width list. */
    .woocommerce-account .ppd-account-rail .woocommerce-MyAccount-navigation ul {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        width: 100%;
    }
    .woocommerce-account .ppd-account-rail .woocommerce-MyAccount-navigation li {
        display: block;
        min-width: 0;
        width: 100%;
    }
    .woocommerce-account .ppd-account-rail .woocommerce-MyAccount-navigation li a {
        min-height: 46px;
        width: 100%;
    }

    /* Saved-design suggestions: compact native horizontal scrolling on phones.
       The links remain ordinary product links and do not require a JS slider. */
    .woocommerce-account .ppd-design-card__transfer {
        padding: 16px 14px;
    }
    .woocommerce-account .ppd-design-card__transfer-head {
        gap: 8px;
        margin-bottom: 12px;
    }
    .woocommerce-account .ppd-design-card__transfer h4 {
        font-size: 15px;
    }
    .woocommerce-account .ppd-design-search {
        gap: 5px;
    }
    .woocommerce-account .ppd-design-search__label {
        font-size: 12px;
    }
    .woocommerce-account .ppd-design-search__input {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .woocommerce-account .ppd-design-card__transfer .ppd-design-targets {
        display: flex !important;
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 2px 14px 8px 0;
        margin-right: -14px;
        scroll-padding-inline: 0 14px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .woocommerce-account .ppd-design-card__transfer .ppd-design-targets::-webkit-scrollbar {
        display: none;
    }
    .woocommerce-account .ppd-design-card__transfer .ppd-design-targets[hidden] {
        display: none !important;
    }
    .woocommerce-account .ppd-design-card__transfer .ppd-design-target {
        flex: 0 0 122px;
        width: 122px;
        padding-bottom: 11px;
        border-radius: 10px;
        scroll-snap-align: start;
    }
    .woocommerce-account .ppd-design-card__transfer .ppd-design-target__name,
    .woocommerce-account .ppd-design-card__transfer .ppd-design-target__price {
        padding-inline: 10px;
    }
    .woocommerce-account .ppd-design-card__transfer .ppd-design-target__name {
        margin-top: 9px;
        font-size: 12px;
    }
    .woocommerce-account .ppd-design-card__transfer .ppd-design-target__price {
        margin-top: 4px;
        font-size: 12px;
    }
}
@media (max-width: 820px) {
    .pp-account-body .woocommerce {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pp-account-body { padding: 32px 0 56px; }
}


/* ── Blog archive ─────────────────────────────────────────────── */
.pp-blog { padding: 44px 0 72px; }
.pp-blog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 56px;
    max-width: 1120px;
    margin: 0 auto;
}
.pp-post-card { display: flex; flex-direction: column; }
.pp-post-card__image {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: #f2f2f2;
    margin-bottom: 18px;
}
.pp-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.pp-post-card__image:hover img { transform: scale(1.03); }
.pp-post-card__body { display: flex; flex-direction: column; flex: 1; }
.pp-post-card__cat {
    align-self: flex-start;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 12px;
}
.pp-post-card__cat:hover { background: #35B777; }
.pp-post-card__title { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.pp-post-card__title a { color: #171717; text-decoration: none; }
.pp-post-card__title a:hover { color: #35B777; }
.pp-post-card__meta { font-size: 13px; color: #6b7280; margin-bottom: 12px; }
.pp-post-card__meta strong { color: #171717; font-weight: 600; }
.pp-post-card__excerpt { font-size: 14px; line-height: 1.7; color: #444; margin: 0 0 18px; }
.pp-post-card__more { align-self: flex-start; margin-top: auto; }

.pp-blog__pagination { margin-top: 52px; }
.pp-blog__pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pp-blog__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #171717;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.pp-blog__pagination .page-numbers.current { background: #111; color: #fff; border-color: #111; }
.pp-blog__pagination .page-numbers:hover { border-color: #35B777; color: #35B777; }
.pp-blog__pagination .page-numbers.current:hover { color: #fff; }
.pp-blog__empty { text-align: center; color: #6b7280; padding: 40px 0; }@media (max-width: 780px) {
    .pp-blog__grid { grid-template-columns: 1fr; gap: 40px; }
    .pp-blog { padding: 32px 0 56px; }
}


/* ── Single blog post ─────────────────────────────────────────── */
.pp-post-hero .pp-post-card__cat { display: inline-block; align-self: auto; }
.pp-post-hero__meta { font-size: 13px; color: #6b7280; margin-top: 14px; }
.pp-post-hero__meta strong { color: #171717; font-weight: 600; }

.pp-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 0 72px;
}
.pp-post-main { min-width: 0; }
.pp-post-featured {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    margin-bottom: 28px;
}
.pp-post-content { font-size: 15px; color: #333; }
.pp-post-content p { line-height: 1.8; }

.pp-post-shop {
    margin-top: 42px;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;
}

.pp-post-shop h2 {
    margin: 0 0 20px;
    color: #171717;
    font-size: clamp(21px, 2.5vw, 27px);
    font-weight: 650;
    line-height: 1.25;
}

.pp-post-shop__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pp-post-shop__card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 14px;
    min-width: 0;
    overflow: hidden;
    color: #171717;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
}

.pp-post-shop__media {
    grid-row: 1 / 3;
    display: block;
    min-height: 94px;
    background: #f3f4f6;
}

.pp-post-shop__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-post-shop__name {
    align-self: end;
    padding: 14px 12px 3px 0;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
}

.pp-post-shop__cta {
    align-self: start;
    padding: 3px 12px 14px 0;
    color: #555;
    font-size: 12px;
    font-weight: 600;
}

.pp-post-shop__card:hover,
.pp-post-shop__card:focus-visible {
    border-color: #111;
}

.pp-post-shop__card:hover .pp-post-shop__cta,
.pp-post-shop__card:focus-visible .pp-post-shop__cta {
    color: #111;
}

.pp-post-tags {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pp-post-tags a {
    display: inline-block;
    background: #f3f4f6;
    color: #374151;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
}
.pp-post-tags a:hover { background: #35B777; color: #fff; }

.pp-post-sidebar { min-width: 0; }
.pp-sidebar-block { margin-bottom: 40px; }
.pp-sidebar-block__title {
    font-size: 16px;
    font-weight: 700;
    color: #171717;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.pp-sidebar-list { list-style: none; margin: 0; padding: 0; }
.pp-sidebar-list li { margin-bottom: 12px; line-height: 1.45; }
.pp-sidebar-list a { color: #374151; text-decoration: none; font-size: 14px; }
.pp-sidebar-list a:hover { color: #35B777; }@media (max-width: 900px) {
    .pp-post-layout { grid-template-columns: 1fr; gap: 40px; padding: 36px 0 56px; }
}
@media (max-width: 560px) {
    .pp-post-shop__grid { grid-template-columns: 1fr; }
}


/* ── Promos & Deals page ──────────────────────────────────────── */
.pp-deals-hero { background: #fff; }
.pp-deals-hero__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
}

.pp-deals-section { padding: 64px 0 80px; }
.pp-deals-section__title {
    font-size: 26px;
    font-weight: 700;
    color: #171717;
    margin: 0 0 32px;
}
.pp-deals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    max-width: 1080px;
}

.pp-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pp-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.45;
    color: #171717;
}
.pp-check-list svg { flex-shrink: 0; margin-top: 1px; }

.pp-deals-required { text-align: right; font-size: 12px; color: #666; margin: 0 0 6px; }
.pp-deals-required span,
.pp-req { color: #e11d48; }
.pp-deals-privacy { font-size: 13px; color: #666; line-height: 1.6; margin-top: 16px; }
.pp-deals-privacy a { color: #171717; font-weight: 600; }@media (max-width: 860px) {
    .pp-deals-grid { grid-template-columns: 1fr; gap: 36px; }
    .pp-deals-section { padding: 44px 0 60px; }
}


/* ── Affiliate Partner Program page ───────────────────────────── */
.pp-affiliate-hero { background: #efeae2; }
.pp-affiliate-hero__list { margin: 22px 0 26px; }
.pp-affiliate-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.pp-affiliate-hero__note { font-size: 12px; color: #777; margin: 0; }
.pp-affiliate-hero__note a { color: #171717; font-weight: 600; }
.pp-affiliate-hero__media img { width: 100%; height: auto; display: block; border-radius: 14px; }

.pp-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pp-check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; color: #171717; }
.pp-check-list li svg { flex-shrink: 0; margin-top: 2px; }

.pp-affiliate-get { padding: 76px 0; }
.pp-affiliate-get__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pp-affiliate-get__title { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; color: #171717; margin: 0 0 26px; }
.pp-affiliate-fineprint { font-size: 13px; color: #8a8a8a; line-height: 1.6; margin-top: 22px; }
.pp-affiliate-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pp-affiliate-collage img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; display: block; }

.pp-affiliate-faq { background: #f6f6f6; padding: 76px 0; }
.pp-affiliate-faq__grid { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }
.pp-affiliate-faq__intro h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; color: #171717; margin: 0 0 16px; line-height: 1.15; }
.pp-affiliate-faq__intro p { color: #666; margin: 0 0 26px; line-height: 1.6; }
.pp-affiliate-faq__label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #171717; margin-bottom: 8px; }
.pp-affiliate-faq__email { font-size: 20px; font-weight: 700; color: #171717; text-decoration: none; }
.pp-affiliate-faq__email:hover { color: #35B777; }
.pp-affiliate-faq .pp-faq-list { max-width: none; }
.pp-affiliate-faq .pp-faq-item { background: #fff; border: 1px solid #ececec; border-radius: 12px; margin-bottom: 12px; padding: 0 20px; }
.pp-affiliate-faq .pp-faq-question { padding: 20px 0; }
.pp-affiliate-faq .pp-faq-answer-inner { padding: 0 0 20px; }
.pp-affiliate-faq .pp-faq-answer-inner code { background: #f1f1f1; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

.pp-affiliate-apply { padding: 76px 0 90px; }
.pp-affiliate-apply__title { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; color: #171717; margin: 0 0 30px; }
.pp-affiliate-form { max-width: 820px; }

/* Checkboxes inside the shared contact-form styling */
.pp-contact-form input[type="checkbox"],
.pp-contact-form input[type="radio"] { width: auto; min-height: 0; padding: 0; box-shadow: none; }
.pp-affiliate-checks__label { display: block; margin-bottom: 10px; color: #333; font-size: 15px; font-weight: 500; }
.pp-checkbox-row { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.pp-contact-form .pp-checkbox { display: inline-flex; align-items: center; gap: 8px; color: #333; font-size: 15px; font-weight: 500; cursor: pointer; }
.pp-contact-form .pp-affiliate-agree { align-items: flex-start; gap: 10px; }
.pp-contact-form .pp-affiliate-agree a { color: #171717; font-weight: 600; text-decoration: underline; }@media (max-width: 900px) {
    .pp-affiliate-get__grid,
    .pp-affiliate-faq__grid { grid-template-columns: 1fr; gap: 36px; }
    .pp-affiliate-get,
    .pp-affiliate-faq,
    .pp-affiliate-apply { padding: 48px 0; }
}


/* Affiliate hero: full-bleed background image with text overlaid on the left */
.pp-affiliate-hero {
    background-color: #efeae2;
    background-image:
        linear-gradient(90deg, rgba(240,235,227,.95) 0%, rgba(240,235,227,.6) 40%, rgba(240,235,227,0) 66%),
        var(--pp-hero-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: 64px 0;
}
.pp-affiliate-hero__content { max-width: 540px; }
.pp-affiliate-hero .pp-hero__heading { margin-bottom: 4px; }@media (max-width: 780px) {
    .pp-affiliate-hero {
        min-height: 0;
        padding: 48px 0;
        background-image:
            linear-gradient(180deg, rgba(240,235,227,.97) 0%, rgba(240,235,227,.8) 55%, rgba(240,235,227,.45) 100%),
            var(--pp-hero-img);
        background-position: center bottom;
    }
    .pp-affiliate-hero__content { max-width: 100%; }
}


/* ── Heading scale: keep every H2 a bit smaller & lighter than the H1 ── */
.pp-affiliate-get__title,
.pp-affiliate-faq__intro h2,
.pp-affiliate-apply__title,
.pp-deals-section__title {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
}
.pp-wysiwyg h2,
.pp-faq-group__title,
.pp-deals-section__title {
    font-weight: 600;
}

/* More breathing room above the hero buttons */
.pp-affiliate-hero__actions { margin-top: 36px; margin-bottom: 16px; }

/* Center the "Apply to be a Partner" heading + form */
.pp-affiliate-apply__title { text-align: center; }
.pp-affiliate-form { margin-left: auto; margin-right: auto; }

/* More space below the affiliate hero H1 */
.pp-affiliate-hero .pp-hero__heading { margin-bottom: 30px; }

/* ==========================================================================
   Pillar Template (page-pillar.php) — reusable pillar landing page
   ========================================================================== */

/* Hero: reuses .pp-hero / .pp-hero__inner / .pp-hero__heading / .pp-hero__sub */
.pp-pillar-hero { padding-top: 40px; }
.pp-hero__bullets { margin: 0 0 22px; }
.pp-hero__bullets ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; }
.pp-hero__bullets li { list-style: none; display: inline-flex; align-items: center; gap: 6px; color: #555; font-size: 13px; font-weight: 500; }
.pp-hero__bullets p { margin: 0; color: #555; font-size: 13px; }
/* Hero address: sits between the trust badges and the CTA buttons */
.pp-hero__address {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: #353535;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}
.pp-hero__address-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}
.pp-hero__address-icon svg { display: block; width: 18px; height: 18px; }
.pp-hero__address a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(53, 183, 119, .45);
    transition: color .15s, border-color .15s;
}
.pp-hero__address a:hover { color: #35B777; border-bottom-color: #35B777; text-decoration: none; }
.pp-hero__address-note { color: #6b6b6b; font-weight: 400; }
.pp-hero__address-note::before { content: "\00B7"; margin-right: 7px; color: #bdbdbd; }

.pp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-pillar-hero__media img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; }

/* Internal cluster link rows */
.pp-clusters { padding: 6px 0 8px; }
.pp-cluster { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; padding: 16px 0; border-top: 1px solid #eee; }
.pp-cluster:last-child { border-bottom: 1px solid #eee; }
.pp-cluster__label { flex: 0 0 auto; color: #171717; font-weight: 600; font-size: 14px; }
.pp-cluster__links { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 0; }
.pp-cluster__links li { position: relative; }
.pp-cluster__links li:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%; width: 1px; height: 14px; background: #ddd; transform: translateY(-50%); }
.pp-cluster__links a { color: #666; font-size: 14px; transition: color .15s; }
.pp-cluster__links a:hover { color: #35B777; }

/* Trust note band */
.pp-trust-note { background: #f7faf8; padding: 14px 0; text-align: center; }
.pp-trust-note p { margin: 0; color: #35785a; font-size: 14px; font-weight: 500; }

/* Quick shop jump links */
.pp-quickshop { padding: 18px 0; }
.pp-quickshop__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.pp-quickshop__title { margin: 0; color: #171717; font-weight: 600; font-size: 15px; }
.pp-quickshop__title span { color: #888; font-weight: 500; margin-left: 6px; }
.pp-quickshop__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.pp-quickshop__links a { display: inline-block; padding: 7px 16px; border: 1px solid #e2e2e2; border-radius: 999px; color: #333; font-size: 13px; font-weight: 500; transition: border-color .15s, color .15s; }
.pp-quickshop__links a:hover { border-color: #35B777; color: #35B777; }

/* Product blocks */
.pp-pblocks { padding: 40px 0 20px; }
.pp-pblocks__title { text-align: center; font-size: clamp(24px, 3vw, 34px); font-weight: 600; color: #171717; margin-bottom: 8px; }
.pp-pblock { padding: 36px 0; border-top: 1px solid #f0f0f0; }
.pp-pblock:first-child { border-top: 0; }
.pp-pblock__inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.pp-pblock__intro { position: sticky; top: 96px; }
.pp-pblock__title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; color: #171717; margin-bottom: 14px; line-height: 1.2; }
.pp-pblock__desc { color: #555; font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
.pp-pblock__viewall { display: inline-block; color: #888; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; transition: color .15s; }
.pp-pblock__viewall:hover { color: #35B777; }
.pp-pblock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.pp-pblock__grid li,
.pp-pblock__grid li.product { margin: 0; padding: 0; float: none; width: auto; list-style: none; }

/* Break content banner (full-bleed) */
.pp-break { padding: 56px 0; background: #f6f6f4; }
.pp-break--bg { background-image: var(--pp-break-bg); background-size: cover; background-position: center; }
.pp-break__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.pp-break__eyebrow { color: #35B777; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.pp-break__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; color: #171717; line-height: 1.1; margin-bottom: 16px; }
.pp-break__body, .pp-break__desc { color: #555; font-size: 16px; line-height: 1.6; margin-bottom: 20px; max-width: 460px; }
.pp-break__media img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; }

/* How it works */
.pp-how { padding: 64px 0; text-align: center; }
.pp-how__title { font-size: clamp(24px, 3vw, 34px); font-weight: 600; color: #171717; margin-bottom: 32px; }
.pp-how__inner { display: grid; gap: 32px; align-items: center; }
.pp-how__inner:has(.pp-how__media) { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); text-align: left; }
.pp-how__steps { color: #444; font-size: 16px; line-height: 1.7; }
.pp-how__media img { width: 100%; height: auto; border-radius: 16px; }

/* Design ideas */
.pp-ideas { padding: 56px 0; }
.pp-ideas__title { font-size: clamp(24px, 3vw, 34px); font-weight: 600; color: #171717; margin-bottom: 16px; text-align: center; }
.pp-ideas__content { max-width: 820px; margin: 0 auto 32px; text-align: center; color: #444; font-size: 16px; line-height: 1.7; }
.pp-ideas__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.pp-ideas__grid li, .pp-ideas__grid li.product { margin: 0; padding: 0; float: none; width: auto; list-style: none; }

/* Reviews (reuses .pp-reviews-section / .pp-review-card) */
.pp-pillar-reviews { text-align: center; }
.pp-pillar-reviews__intro { max-width: 900px; margin: 12px auto 0; color: #555; font-size: 16px; line-height: 1.7; }
.pp-pillar-reviews .pp-section__title { font-size: clamp(24px, 3vw, 34px); font-weight: 600; }
.pp-pillar-reviews__manual { max-width: 900px; margin: 24px auto 0; text-align: left; }

/* Main body copy */
.pp-pillar-body { padding: 48px 0; }
.pp-pillar-body .pp-wysiwyg { max-width: 900px; margin: 0 auto; }

/* FAQ (reuses .pp-faq-list / .pp-faq-question) */
.pp-pillar-faq { padding: 48px 0 64px; }
.pp-pillar-faq__title { text-align: center; font-size: clamp(24px, 3vw, 34px); font-weight: 600; margin-bottom: 24px; }
.pp-pillar-faq .pp-faq-list { max-width: 900px; margin: 0 auto; }

/* Final CTA */
.pp-final-cta { padding: 20px 0 72px; }
.pp-final-cta__card { position: relative; border-radius: 24px; background: #101820; color: #fff; padding: 64px 48px; text-align: center; overflow: hidden; }
.pp-final-cta__card--bg { background-image: var(--pp-final-bg); background-size: cover; background-position: center; }
.pp-final-cta__card--bg::before { content: ""; position: absolute; inset: 0; background: rgba(16, 24, 32, .55); }
.pp-final-cta__card > * { position: relative; z-index: 1; }
.pp-final-cta__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; line-height: 1.1; margin-bottom: 14px; }
.pp-final-cta__text { max-width: 560px; margin: 0 auto 26px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.85); }
.pp-final-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Pillar responsive */
@media (max-width: 1050px) {
    .pp-pblock__inner { grid-template-columns: 1fr; gap: 22px; }
    .pp-pblock__intro { position: static; }
    .pp-pblock__grid { grid-template-columns: repeat(3, 1fr); }
    .pp-ideas__grid { grid-template-columns: repeat(3, 1fr); }
    .pp-break__inner { grid-template-columns: 1fr; }
    .pp-how__inner:has(.pp-how__media) { grid-template-columns: 1fr; text-align: center; }
}@media (max-width: 700px) {
    .pp-pblock__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pp-ideas__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pp-final-cta__card { padding: 44px 24px; }
    .pp-cluster { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* Pillar: anchor jump offset for the sticky header + smooth scroll */
.pp-pblock { scroll-margin-top: 96px; }
html:has(.pp-pillar-hero) { scroll-behavior: smooth; }

/* Pillar: section-nav (TOC) pills + jump offset for H2 targets */
.pp-cluster--toc .pp-cluster__links { gap: 10px; }
.pp-cluster--toc .pp-cluster__links li::after { display: none; }
.pp-cluster--toc .pp-cluster__links a {
    display: inline-block; padding: 8px 18px; border: 1px solid #e2e2e2;
    border-radius: 999px; color: #333; font-size: 13px; font-weight: 500;
    transition: border-color .15s, color .15s;
}
.pp-cluster--toc .pp-cluster__links a:hover { border-color: #35B777; color: #35B777; }
.page-template-page-pillar #pp-main h2[id] { scroll-margin-top: 96px; }

/* Pillar hero: CSS-only image marquee (no JS) — two columns auto-scrolling */
.pp-hero-marquee {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
    height: clamp(380px, 44vw, 520px); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
}
.pp-hero-marquee__col {
    display: flex; flex-direction: column;
    animation: pp-marquee-up 34s linear infinite; will-change: transform;
}
.pp-hero-marquee__col--rev { animation-duration: 42s; animation-direction: reverse; }
.pp-hero-marquee:hover .pp-hero-marquee__col { animation-play-state: paused; }
.pp-hero-marquee__item {
    display: block; margin-bottom: 16px; border-radius: 16px; overflow: hidden;
    background: #f4f4f4; box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.pp-hero-marquee__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@keyframes pp-marquee-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }@media (prefers-reduced-motion: reduce) { .pp-hero-marquee__col { animation: none; }
}
@media (max-width: 1050px) { .pp-hero-marquee { height: clamp(320px, 78vw, 460px); }
}


/* Pillar TOC ("Personalized gifts by category"): rounded 1px-bordered container */
.pp-cluster.pp-cluster--toc {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 18px;
}

/* Pillar product sections: alternating gray / white full-width bands */
.pp-pblock { border-top: 0; background: #fff; }
.pp-pblock:nth-of-type(odd) { background: #f8f8f8; }

/* Pillar "View All" links → black */
.pp-pblock__viewall { color: #111; }
.pp-pblock__viewall:hover { color: #111; }

/* Break banner → contained, rounded card over the photo (was full-bleed) */
.pp-break { padding: 40px 0; background: none; }
.pp-break__card { position: relative; border-radius: 24px; overflow: hidden; background: #f6f6f4; }
.pp-break__card.pp-break--bg { background-image: var(--pp-break-bg); background-size: cover; background-position: center; }
.pp-break__card.pp-break--bg::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,0) 66%);
}
.pp-break__inner { position: relative; z-index: 1; padding: clamp(32px, 5vw, 60px); }
.pp-break__text { max-width: 520px; }
.pp-break__eyebrow {
    display: inline-block; background: #d9f2e4; color: #1f7a4d;
    padding: 6px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
.pp-break--bg .pp-break__title { color: #fff; }
.pp-break--bg .pp-break__body,
.pp-break--bg .pp-break__desc { color: rgba(255, 255, 255, .92); }
/* Links inside the break copy → regular text colour (not the accent green) */
.pp-break__body a, .pp-break__desc a { color: inherit; text-decoration: none; }
.pp-break--bg .pp-break__body a, .pp-break--bg .pp-break__desc a { color: #fff; }

/* Break media: anchor the right cutout to the card's bottom edge (no float) */
.pp-break__inner { --pp-break-pad: clamp(32px, 5vw, 60px); padding: var(--pp-break-pad); padding-bottom: 0; }
.pp-break__text { align-self: center; padding-bottom: var(--pp-break-pad); }
.pp-break__media { align-self: end; }
.pp-break__media img { border-radius: 0; display: block; height: auto; }

/* Pillar "View All" → solid black button, white text */
.pp-pblock__viewall {
    display: inline-block; background: #111; color: #fff;
    padding: 11px 22px; border-radius: 6px;
    font-size: 14px; font-weight: 600; text-decoration: none;
}
.pp-pblock__viewall:hover { background: #000; color: #fff; text-decoration: none; }

/* Pillar mobile: full-width hero CTAs + full-width table of contents */
@media (max-width: 560px) {
    .pp-hero__ctas { flex-direction: column; align-items: stretch; }
    .pp-hero__ctas .pp-hero__cta { width: 100%; }
    .pp-hero__address { flex-wrap: wrap; justify-content: center; text-align: center; }
    .pp-hero__address-note { flex-basis: 100%; }
    .pp-hero__address-note::before { content: none; }
    .pp-cluster--toc .pp-cluster__links { flex-direction: column; width: 100%; }
    .pp-cluster--toc .pp-cluster__links a { display: block; width: 100%; text-align: center; }
}

/* Pillar mobile: ensure full-width button text is centered */
@media (max-width: 560px) {
    .pp-hero__ctas .pp-hero__cta { justify-content: center; text-align: center; }
}

/* Break media: cap the cutout height so the section isn't too tall */
.pp-break__media { align-self: end; }
.pp-break__media img {
    width: auto; max-width: 100%;
    max-height: clamp(300px, 40vw, 460px);
    margin-inline: auto;
}

/* Rounded, lightly-bordered category images */
.pp-hero-slide__image { border-radius: 14px; border: 1px solid #ececec; }

/* Homepage hero: taller with more vertical padding */
.pp-hero--home { padding: 84px 0 68px; }@media (max-width: 560px) { .pp-hero--home { padding: 44px 0 40px; }
}


/* Homepage hero: keep portrait category photos tall enough to show the subject. */
.pp-hero--home .pp-hero-slide__image { height: clamp(390px, 54vh, 540px); }@media (max-width: 700px) {
    .pp-hero--home .pp-hero-slide__image { height: auto; aspect-ratio: 3 / 4; }
}


/* Homepage sample gallery: CSS-only auto-slide marquee (no JS) */
.pp-gallery-marquee { overflow: hidden; }
.pp-gallery-marquee__track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: pp-gallery-marquee-x 60s linear infinite;
    will-change: transform;
}
.pp-gallery-marquee__track .pp-gallery-carousel__item { margin-right: 6px; flex-shrink: 0; scroll-snap-align: none; }
.pp-gallery-marquee:hover .pp-gallery-marquee__track { animation-play-state: paused; }
@keyframes pp-gallery-marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }@media (prefers-reduced-motion: reduce) { .pp-gallery-marquee__track { animation: none; }
}


/* "It's more than just a portrait" features: centered + larger icons */
.pp-feature { align-items: center; text-align: center; }
.pp-feature img { width: 80px; height: 80px; }

/* Shop Easy step images: contain at natural height (desktop); square cover on mobile */
.pp-step__img { aspect-ratio: auto; }
.pp-step__img img { height: auto; object-fit: contain; }@media (max-width: 768px) {
    .pp-step__img { aspect-ratio: 1 / 1; }
    .pp-step__img img { height: 100%; object-fit: cover; }
}


/* Homepage: unify all gray section backgrounds */
.pp-reviews-section,
.pp-feature-banner,
.pp-how-section { background: #f9f9f9a3; }

/* Global eyebrow pill style */
.pp-section__eyebrow,
.pp-break__eyebrow {
    display: inline-block;
    background: #fffff4;
    color: #2d7a4f;
    padding: 6px 20px;
    border-radius: 51px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}
/* Centered eyebrow: center the pill itself (not just its text) */
.pp-eyebrow--center { display: block; width: fit-content; margin-inline: auto; }

/* Promo (top) bar: very bold text */
#pp-promo-bar, #pp-promo-bar strong { font-weight: 800; }

/* Homepage: remove the white gap between the last section and the dark footer */
.home .pp-footer { margin-top: 0; }

/* Homepage WooCommerce reviews (below the Google reviews) */
.pp-wc-reviews { margin-top: 44px; }
.pp-wc-reviews__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: left; }
.pp-wc-review-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pp-wc-review-card__avatar {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px;
    background: #298859;
}
.pp-wc-review-card:nth-child(4n+2) .pp-wc-review-card__avatar { background: #6b4ea8; }
.pp-wc-review-card:nth-child(4n+3) .pp-wc-review-card__avatar { background: #2f6f8f; }
.pp-wc-review-card:nth-child(4n+4) .pp-wc-review-card__avatar { background: #b5683a; }
.pp-wc-review-card__name { font-weight: 700; font-size: 15px; color: #111; }
.pp-wc-reviews .pp-review-stars { margin-bottom: 10px; }@media (max-width: 900px) { .pp-wc-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .pp-wc-reviews__grid { grid-template-columns: 1fr; }
}


/* WooCommerce reviews: combine with Google (no top gap), product link, 2 rows only */
.pp-wc-reviews { margin-top: 0; }
.pp-wc-reviews__grid { gap: 24px; }
.pp-wc-review-card__product {
    display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600;
    color: #298859; text-decoration: none;
}
.pp-wc-review-card__product:hover { text-decoration: underline; }
.pp-wc-review-card:nth-child(n+9) { display: none; }@media (max-width: 900px) { .pp-wc-review-card:nth-child(n+5) { display: none; }
}
@media (max-width: 560px) { .pp-wc-review-card:nth-child(n+3) { display: none; }
}


/* Promo (top) bar: all caps */
#pp-promo-bar { text-transform: uppercase; }

/* WC review: product link sits beside the stars */
.pp-wc-review-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pp-wc-reviews .pp-wc-review-card__meta .pp-review-stars { margin-bottom: 0; flex-shrink: 0; }
.pp-wc-review-card__meta .pp-wc-review-card__product {
    margin-top: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Header dropdowns (account menu + hover mini-cart) ────────────────────── */
.pp-header-menu { position: relative; }
.pp-header-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 1100;
    background: #fff; border: 1px solid #ececec; border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .13); padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* invisible bridge so the pointer can travel from icon to dropdown */
.pp-header-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.pp-header-menu:hover > .pp-header-dropdown,
.pp-header-menu:focus-within > .pp-header-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* Account dropdown */
.pp-account-dropdown { min-width: 224px; }
.pp-account-dropdown__greet { padding: 8px 12px 12px; border-bottom: 1px solid #f0f0f0; margin-bottom: 6px; }
.pp-account-dropdown__hi { display: block; font-size: 13px; color: #444; }
.pp-account-dropdown__email { display: block; font-size: 13px; font-weight: 600; color: #298859; word-break: break-all; }
.pp-account-dropdown__link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: #333; text-decoration: none; }
.pp-account-dropdown__link:hover { background: #f6f6f6; color: #298859; }
.pp-account-dropdown__icon { flex: 0 0 auto; color: #8a8a8a; }
.pp-account-dropdown__link:hover .pp-account-dropdown__icon { color: inherit; }
.pp-account-dropdown__link--logout { color: #b5683a; }
.pp-account-dropdown__link--logout:hover { background: #faf1ec; color: #b5683a; }

/* Logged-out login panel inside the account dropdown */
.pp-login-panel { width: 268px; padding: 4px 8px 8px; }
.pp-login-panel__title { display: block; font-size: 14px; font-weight: 700; color: #111; padding: 4px 0 10px; }
.pp-login-panel__google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 12px; border: 1px solid #dcdcdc; border-radius: 8px;
    font-size: 14px; font-weight: 600; color: #3c4043; text-decoration: none; background: #fff;
}
.pp-login-panel__google:hover { background: #f6f6f6; color: #3c4043; }
.pp-login-panel__divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: #999; font-size: 12px; }
.pp-login-panel__divider::before,
.pp-login-panel__divider::after { content: ""; flex: 1; height: 1px; background: #ececec; }
.pp-login-panel #pp-header-login p { margin: 0 0 10px; }
.pp-login-panel #pp-header-login label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; }
.pp-login-panel #pp-header-login input[type="text"],
.pp-login-panel #pp-header-login input[type="password"] {
    width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 14px;
    border: 1px solid #dcdcdc; border-radius: 8px; background: #fff; color: #111;
}
.pp-login-panel #pp-header-login input[type="text"]:focus,
.pp-login-panel #pp-header-login input[type="password"]:focus { outline: none; border-color: #298859; box-shadow: 0 0 0 3px rgba(41, 136, 89, .12); }
.pp-login-panel #pp-header-login .login-remember label { display: flex; align-items: center; gap: 7px; font-weight: 500; color: #666; margin: 0; }
.pp-login-panel #pp-header-login .login-remember input { margin: 0; }
.pp-login-panel #pp-header-login .login-submit { margin-bottom: 0; }
.pp-login-panel #pp-header-login input[type="submit"] {
    width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; cursor: pointer;
    background: #111; color: #fff; font-size: 14px; font-weight: 700; font-family: inherit;
}
.pp-login-panel #pp-header-login input[type="submit"]:hover { background: #000; }
.pp-login-panel__foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; margin-top: 10px; border-top: 1px solid #f0f0f0; }
.pp-login-panel__foot a { font-size: 12px; color: #666; text-decoration: none; }
.pp-login-panel__foot a:hover { color: #298859; }

/* Cart mini-cart dropdown */
.pp-cart-dropdown { width: 348px; max-width: calc(100vw - 32px); padding: 0; }
.pp-mini-cart { padding: 14px 16px; }
.pp-mini-cart__empty { padding: 22px 8px; text-align: center; color: #888; font-size: 14px; margin: 0; }
.pp-mini-cart__items { list-style: none; margin: 0 0 8px; padding: 0; max-height: 340px; overflow-y: auto; }
.pp-mini-cart__item { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f2f2f2; }
.pp-mini-cart__thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; display: block; }
.pp-mini-cart__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-mini-cart__name { font-size: 13px; font-weight: 600; color: #111; line-height: 1.3; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-mini-cart__name:hover { color: #298859; }
.pp-mini-cart__price { font-size: 13px; color: #555; }
.ppd-cart-edit {
    align-items: center;
    color: #111;
    display: inline-flex;
    font-size: 12px;
    font-weight: 400;
    gap: 4px;
    line-height: 1.3;
    margin-top: 3px;
    text-decoration: none;
    width: fit-content;
}
.ppd-cart-edit svg { flex: 0 0 14px; height: 14px; width: 14px; }
.ppd-cart-edit:hover,
.ppd-cart-edit:focus-visible { color: #111; text-decoration: underline; }
.pp-mini-cart__free {
    color: #21884c;
    font-weight: 800;
    letter-spacing: .04em;
}
.pp-mini-cart__remove { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
    color: #999; font-size: 19px; line-height: 1; text-decoration: none; flex-shrink: 0; }
.pp-mini-cart__remove:hover { background: #f4f4f4; color: #b5683a; }
.pp-mini-cart__subtotal { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; color: #111; padding: 10px 0 12px; }
.pp-mini-cart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-mini-cart__actions .pp-btn {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 8px;
    justify-content: center;
    text-align: center;
}
/* Checkout is the action the panel exists for, so it carries the brand green
   rather than the default black. */
.pp-mini-cart__checkout { background: #21884c; color: #fff; gap: 6px; }
.pp-mini-cart__checkout:hover { background: #35b777; color: #fff; }
.pp-mini-cart__checkout svg { flex: 0 0 16px; }

/* Tap-opened dropdowns (mobile, where there is no hover). On touch screens the
   emulated :hover would otherwise latch the panel open until the next tap. */
@media (hover: none) {
    .pp-header-menu:hover > .pp-header-dropdown,
    .pp-header-menu:focus-within > .pp-header-dropdown { opacity: 0; visibility: hidden; transform: translateY(-6px); }
}
.pp-header-menu.is-open > .pp-header-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* Disable header dropdowns on mobile — icons act as plain links there.
   The mini-cart is the exception: the first tap on the cart icon opens it. */
/* The backdrop only exists on phones, where the panel is tapped open over the
   page rather than hovered beside the icon. */
.pp-cart-backdrop { display: none; }@media (max-width: 900px) {
    .pp-header-dropdown { display: none; }
    .pp-cart-menu > .pp-cart-dropdown { display: block; }

    /* Starts at the bottom of the header so the page washes out but the header
       itself — cart icon included — stays crisp. */
    .pp-cart-backdrop {
        display: block;
        position: fixed;
        top: var(--pp-header-bottom, 99px);
        /* Viewport units - see the note on .pp-search-fab above. */
        left: 0;
        right: auto;
        width: 100vw;
        max-width: 100vw;
        bottom: 0;
        z-index: 1090;
        background: rgba(255, 255, 255, .7);
        opacity: 0;
        visibility: hidden;
        transition: opacity .16s ease, visibility .16s;
    }
    .pp-cart-menu.is-open > .pp-cart-backdrop { opacity: 1; visibility: visible; }

    /* Centered on the screen rather than hanging off a 40px icon at the edge.
       Dropping the menu's own positioning hands the panel to the sticky
       header as its containing block, which spans the viewport - so 50% is
       the middle of the screen and 100% is the bottom of the header. */
    .pp-cart-menu { position: static; }
    .pp-cart-dropdown {
        left: 50%;
        right: auto;
        width: min(348px, calc(100vw - 24px));
        transform: translate(-50%, -6px);
    }
    .pp-cart-menu.is-open > .pp-cart-dropdown { transform: translate(-50%, 0); }
}


/* ── "Added to cart" confirmation ─────────────────────────────────────────
   One line: picture, what went in, and the way to the cart. The name is the
   only part allowed to shrink, so a long product title truncates instead of
   wrapping the notice onto three lines and pushing the product off screen. */
.pp-cart-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.pp-cart-notice__thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #dce8df;
    background: #fff;
}
/* The designer plugin puts the customer's own preview in the notice when the
   product was customized; that picture beats the catalogue photo. */
.ppd-cart-notice-content .pp-cart-notice__thumb { display: none; }
.pp-cart-notice__text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.pp-cart-notice__name {
    min-width: 0;
    font-weight: 700;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-cart-notice__added { flex: 0 0 auto; color: #3f6a52; }
/* Black and deliberately smaller than a page button: this is a confirmation
   strip, not a call to action, and the shop's green is already carrying the
   "it worked" message through the notice background. Written against the
   wrapper so it outranks .woocommerce a.button without !important. */
.pp-cart-notice a.pp-cart-notice__view,
.pp-cart-notice a.pp-cart-notice__view:hover {
    flex: 0 0 auto;
    float: none !important;
    margin-left: auto;
    padding: 7px 14px;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.pp-cart-notice a.pp-cart-notice__view:hover { opacity: .85; }
/* WooCommerce's own tick would be a second icon beside the thumbnail. */
.woocommerce-message:has(.pp-cart-notice)::before { display: none; }

/* WooCommerce ships padding and margin on its notices as !important, so the
   band was carrying its default 1em/3.5em padding and a 2em gap underneath -
   the empty strip between the confirmation and the breadcrumbs. Matched with
   !important because that is the only thing the shorthand answers to. The
   3.5em left inset exists to clear the tick icon, which is hidden above. */
.woocommerce-message:has(.pp-cart-notice) {
    margin: 0 !important;
    padding: 12px 18px !important;
    border-radius: 0;
    border-left: 0;
}

/* On a wide screen the row has far more width than it needs, and pinning the
   button to the right edge leaves the confirmation stranded at either end of
   an empty band. Centring keeps picture, name and button as one group. On a
   phone the row is already full, so it stays as it is. */
@media (min-width: 601px) {
    .pp-cart-notice { justify-content: center; }
    .pp-cart-notice__text { flex: 0 1 auto; }
    .pp-cart-notice a.pp-cart-notice__view { margin-left: 0; }
}@media (max-width: 600px) {
    .woocommerce-message, .woocommerce-info, .woocommerce-error {
        padding: 10px 12px;
        margin-bottom: 12px;
        font-size: 13px;
    }
    .woocommerce-message:has(.pp-cart-notice) { padding: 10px 12px !important; }
    .pp-cart-notice { gap: 9px; }
    .pp-cart-notice__thumb { flex-basis: 34px; width: 34px; height: 34px; border-radius: 6px; }
    /* Name and wording become one truncating line rather than two boxes, so
       the ellipsis falls wherever the room runs out. */
    .pp-cart-notice__text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pp-cart-notice__name { display: inline; }
    .pp-cart-notice__added { display: inline; margin-left: 5px; }
    .pp-cart-notice a.pp-cart-notice__view {
        min-height: 0;
        padding: 6px 10px;
        font-size: 11px;
        line-height: 1;
    }
}


/* CLS: reserve Shop Easy step image space on desktop (4:3 box, still no crop) */
.pp-step__img { aspect-ratio: 4 / 3; }
.pp-step__img img { height: 100%; }

/* My Account: logged-out login + register forms (two-column cards) */
.pp-account-body #customer_login.u-columns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
    max-width: 940px; margin: 0 auto;
}
.pp-account-body #customer_login .u-column1,
.pp-account-body #customer_login .u-column2 {
    border: 1px solid #e5e7eb; border-radius: 12px; padding: 28px 30px; background: #fff;
}
.pp-account-body #customer_login h2 {
    font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    margin: 0 0 18px; color: #111;
}
.pp-account-body form.login p,
.pp-account-body form.register p { margin: 0 0 16px; }
.pp-account-body form.login label,
.pp-account-body form.register label {
    display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px;
}
.pp-account-body .password-input { position: relative; display: block; }
.pp-account-body .password-input .show-password-input {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #888;
}
.pp-account-body #customer_login input.input-text,
.pp-account-body #customer_login input[type="text"],
.pp-account-body #customer_login input[type="email"],
.pp-account-body #customer_login input[type="password"] {
    width: 100%; padding: 12px 14px; border: 1px solid #e2e2e2; border-radius: 8px;
    background: #fafafa; font-size: 14px; line-height: 1.4;
}
.pp-account-body #customer_login input.input-text:focus,
.pp-account-body #customer_login input[type="email"]:focus,
.pp-account-body #customer_login input[type="password"]:focus { border-color: #35b777; outline: none; background: #fff; }
.pp-account-body .woocommerce-form-login__rememberme {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 500; margin: 0;
}
.pp-account-body .woocommerce-form-login__rememberme input { width: auto; margin: 0; }
.pp-account-body .woocommerce-form-login__submit,
.pp-account-body .woocommerce-form-register__submit,
.pp-account-body form.login button[type="submit"],
.pp-account-body form.register button[type="submit"] {
    background: #111; color: #fff; border: 0; padding: 11px 28px; border-radius: 8px;
    font-weight: 600; font-size: 14px; cursor: pointer;
}
.pp-account-body .woocommerce-form-login__submit:hover,
.pp-account-body .woocommerce-form-register__submit:hover { background: #000; }
.pp-account-body .woocommerce-LostPassword { margin: 14px 0 0; }
.pp-account-body .woocommerce-LostPassword a { color: #35785a; font-weight: 500; }
.pp-account-body .woocommerce-privacy-policy-text p { font-size: 12px; color: #777; line-height: 1.6; }
.pp-account-body form.register .woocommerce-form-register__submit { margin-top: 6px; }@media (max-width: 700px) {
    .pp-account-body #customer_login.u-columns { grid-template-columns: 1fr; gap: 20px; }
}


/* ── Mobile fixes ─────────────────────────────────────────────────────────── */
/* 1) Promo (top) bar: keep it on a single line */
@media (max-width: 600px) {
    #pp-promo-bar { flex-wrap: nowrap; white-space: nowrap; gap: 6px; padding: 7px 10px; font-size: min(3.1vw, 12px); }
    #pp-promo-bar .pp-promo-dot { font-size: 13px; }
}

/* 2) Homepage hero CTA: full width on mobile */
@media (max-width: 560px) {
    .pp-hero--home .pp-hero__cta { display: flex; width: 100%; }
}

/* 3) Smoother CSS marquees on mobile — force GPU compositing + 3D transforms */
.pp-hero-marquee__col,
.pp-hero-slider--marquee .pp-hero-slider__track,
.pp-gallery-marquee__track {
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    -webkit-transform: translateZ(0); transform: translateZ(0);
}
@keyframes pp-marquee-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes pp-hero-marquee-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes pp-gallery-marquee-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* 4) WooCommerce reviews: tighter cards, pulled up closer to the Google reviews */
.pp-wc-reviews { margin-top: -10px; }
.pp-wc-reviews__grid { gap: 16px 22px; }
.pp-wc-review-card__head { margin-bottom: 8px; }
.pp-wc-review-card__avatar { width: 36px; height: 36px; font-size: 14px; }
.pp-wc-review-card__name { font-size: 14px; }
.pp-wc-reviews .pp-review-stars { margin-bottom: 6px; font-size: 14px; }
.pp-wc-reviews .pp-review-text { font-size: 13px; line-height: 1.5; }

/* My Account: the logged-out login/register page must NOT use the dashboard's
   240px nav grid — let #customer_login center itself as two even cards. */
body:not(.logged-in) .pp-account-body .woocommerce { display: block; max-width: none; }

/* Center the logged-out login/register block (robust, no reliance on .u-columns) */
body:not(.logged-in) .pp-account-body .woocommerce { display: block !important; max-width: none !important; }
body:not(.logged-in) .pp-account-body #customer_login { max-width: 960px !important; margin-left: auto !important; margin-right: auto !important; }

/* Deter casual saving/reuse of visible site and design media. */
img,
picture,
canvas,
video,
svg {
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
}


/* ── Plain page content (page.php) ─────────────────────────────
   The generic page template has no design of its own - the page is whatever
   was typed into the editor - so everything below is the typography that
   markup needs to read as a document rather than a wall.

   Two things the site-wide reset takes away have to be given back here: every
   element is margin-zeroed (so a heading sits flush on the paragraph above it)
   and `ul, ol` are list-style:none for the navigation menus (so a bulleted
   list in page content loses its bullets). .pp-wysiwyg restores some of this
   already; the rest, and the roomier rhythm a full page of prose wants, is
   below. Appended at the end of the file deliberately - .pp-wysiwyg is
   redefined twice further up, and these have to win.

   Scoped to --prose, which page.php adds only on ordinary pages: the cart and
   checkout carry WooCommerce's own block markup, and generic table/list rules
   would take that apart. */
.pp-page-body--prose {
    max-width: 820px;
    margin-inline: auto;
    color: #333;
    font-size: 16px;
}

/* The page hero already supplies the top and bottom edge. */
.pp-page-body--prose > :first-child { margin-top: 0; }
.pp-page-body--prose > :last-child { margin-bottom: 0; }

.pp-page-body--prose p { margin-bottom: 20px; line-height: 1.8; }

/* Space above a heading, not below it: the gap is what separates it from the
   section that ended, while it stays close to the text it introduces. */
.pp-page-body--prose h1 { font-size: clamp(28px, 4vw, 36px); font-weight: 700; color: #111; line-height: 1.18; margin: 56px 0 18px; }
.pp-page-body--prose h2 { font-size: clamp(21px, 2.8vw, 27px); font-weight: 700; color: #171717; line-height: 1.25; margin: 52px 0 16px; }
.pp-page-body--prose h3 { font-size: clamp(18px, 2.2vw, 21px); font-weight: 600; color: #171717; line-height: 1.3; margin: 38px 0 12px; }
.pp-page-body--prose h4 { font-size: 17px; font-weight: 600; color: #171717; line-height: 1.35; margin: 30px 0 10px; }
.pp-page-body--prose h5,
.pp-page-body--prose h6 { font-size: 15px; font-weight: 700; color: #171717; letter-spacing: .02em; text-transform: uppercase; margin: 26px 0 8px; }

/* A heading directly under another is a subtitle, not a new section - the
   full gap above would read as a break between them. */
.pp-page-body--prose h1 + h2,
.pp-page-body--prose h2 + h3,
.pp-page-body--prose h3 + h4 { margin-top: 12px; }

.pp-page-body--prose ul,
.pp-page-body--prose ol { margin: 0 0 22px; padding-left: 24px; }
.pp-page-body--prose ul li { list-style: disc; }
.pp-page-body--prose ol li { list-style: decimal; }
.pp-page-body--prose li { margin-bottom: 9px; line-height: 1.75; }
.pp-page-body--prose li::marker { color: #35b777; }
.pp-page-body--prose li > ul,
.pp-page-body--prose li > ol { margin: 9px 0 0; }

.pp-page-body--prose a { color: #157a4c; text-decoration: underline; text-underline-offset: 2px; }
.pp-page-body--prose a:hover { color: #111; }
.pp-page-body--prose strong { color: #111; font-weight: 700; }

.pp-page-body--prose hr { height: 0; border: 0; border-top: 1px solid #e8e8e8; margin: 44px 0; }

.pp-page-body--prose blockquote {
    margin: 30px 0;
    padding: 2px 0 2px 22px;
    border-left: 3px solid #35b777;
    color: #444;
    font-size: 17px;
    font-style: italic;
}
.pp-page-body--prose blockquote p:last-child { margin-bottom: 0; }

.pp-page-body--prose figure { margin: 0 0 26px; }
.pp-page-body--prose img { border-radius: 10px; margin: 6px 0 8px; }
.pp-page-body--prose figcaption { color: #777; font-size: 13px; line-height: 1.5; text-align: center; }

/* Wrapped in its own scroller so a wide table scrolls itself rather than the
   page - the same rule the product rows follow. */
.pp-page-body--prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 26px;
    font-size: 15px;
}
.pp-page-body--prose th,
.pp-page-body--prose td { border: 1px solid #e8e8e8; padding: 10px 14px; text-align: left; vertical-align: top; }
.pp-page-body--prose th { background: #fafafa; color: #111; font-weight: 700; }

.pp-page-body--prose code {
    background: #f4f4f4;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .92em;
}
.pp-page-body--prose pre {
    background: #f7f7f7;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 0 0 24px;
}
.pp-page-body--prose pre code { background: none; padding: 0; }

/* A button pasted into page content is a button, not underlined body copy. */
.pp-page-body--prose .pp-btn { text-decoration: none; }
.pp-page-body--prose .pp-btn--primary { color: #fff; }@media (max-width: 700px) {
    .pp-page-body--prose { font-size: 15px; }
    .pp-page-body--prose h1 { margin-top: 40px; }
    .pp-page-body--prose h2 { margin-top: 38px; }
    .pp-page-body--prose h3 { margin-top: 28px; }
}