/* GENERATED from poloprofi-wordpress/design/ — do not edit by hand. */
/*
 * PoloProfi shared brand frame — the ONE source for everything that must
 * render pixel-identically in WordPress and the Shopware storefront:
 * container, top bar, header brand/nav/CTAs, buttons, eyebrow, footer.
 *
 * Consumed by both systems via `npm run tokens` (see build-tokens.js):
 *   WordPress -> wp-content/themes/poloprofi/assets/css/shared.css (enqueued)
 *   Shopware  -> design/dist/_shared.scss, mirrored into the PoloprofiTheme
 *                (root repo: `make design.sync`)
 *
 * Rules for this file:
 *  - Values come from tokens.css custom properties (var(--pp-*)) only;
 *    never hardcode a brand value here.
 *  - Every rule must be SELF-CONTAINED: set box-sizing, text-decoration,
 *    margin, line-height explicitly. The two cascades differ (Bootstrap
 *    reboot in the storefront vs. naked browser defaults in WordPress) —
 *    anything inherited will drift.
 *  - Where the two systems use different markup for the same element, group
 *    the selectors (e.g. `.pp-nav a, .main-navigation-menu
 *    .main-navigation-link`) — unmatched selectors are simply inert.
 *  - LAYOUT PLACEMENT stays system-specific: e.g. `.pp-header-ctas` is a
 *    Bootstrap grid column in the shop (`d-none d-xl-flex`) but a flex child
 *    in WP — a `display` here would break the shop's responsive hiding.
 */

/* --- container ---------------------------------------------------------- */

.pp-container,
.pp-content {
    max-width: 72rem;
    margin: 0 auto;
    /* side gutter = half of Bootstrap's 40px grid gutter, i.e. what the
       shop's .container uses — on phones the gutter IS the content edge,
       so both systems must use the same value (desktop is governed by
       max-width and unaffected) */
    padding: 0 var(--pp-space-gutter);
    /* WP has no global border-box reset; pinning content-box keeps the
       padding outside the 72rem in both systems, so the content edges match
       (the shop's Bootstrap .container is aligned to the same edges via
       $container-max-widths in overrides.scss) */
    box-sizing: content-box;
}

/* --- top bar ------------------------------------------------------------ */

/* the storefront core wraps the top bar in d-none d-lg-block — hide it at
   the same breakpoint in WP, otherwise the phone shows a three-line bar
   the shop does not have */
@media (max-width: 991px) {
    .top-bar {
        display: none;
    }
}
.top-bar {
    background: var(--pp-olive-deep);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    line-height: 1.5;
    /* the storefront core sets this — pinned so WP renders the same height */
    padding-top: 4px;
}
.top-bar a,
.top-bar .top-bar-nav a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}
.top-bar a:hover,
.top-bar .top-bar-nav a:hover {
    color: #fff;
}
.pp-top-bar {
    display: flex;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
/* group wrapper; the shop adds Bootstrap's d-flex/gap-4 on the same element */
.pp-top-bar__group {
    display: flex;
    gap: 1.5rem;
}
/* Five items in two groups do not fit one line on a phone — without wrap the
   phone number and the opening hours break mid-word. wrap is unconditional so
   it only engages when the row actually overflows; the centering is the part
   that is phone-specific. Desktop layout (and the 1920px parity check) is
   unaffected. */
.pp-top-bar,
.pp-top-bar__group {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}
@media (max-width: 767px) {
    .pp-top-bar,
    .pp-top-bar__group {
        justify-content: center;
        column-gap: 1rem;
        text-align: center;
    }
}
.top-bar .pp-top-strong {
    color: #fff;
    font-weight: 700;
}

/* --- header bar --------------------------------------------------------- */

.pp-header,
.header-main {
    background: var(--pp-olive);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* WP-side row wrapper; the shop lays the row out with the core header grid */
.pp-header__row {
    display: flex;
    align-items: center;
    gap: var(--pp-space-lg);
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.pp-header .header-logo-main-link,
.pp-header .header-logo-main-link:hover,
.header-main .header-logo-main-link,
.header-main .header-logo-main-link:hover {
    color: var(--pp-cream);
    text-decoration: none;
    /* force the same layout mode on both sides: in WP the link is a flex
       item of .pp-header__row, in the shop it sits in a block column where
       inline baseline layout (strut of the 16px context around the 24px
       logo) shifts it ~1.5px — a flex link sizes to the logo box everywhere */
    display: flex;
    align-items: center;
    line-height: 1;
}
.pp-logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #fff;
}
.pp-logo .pp-logo-accent {
    color: var(--pp-orange);
}

/* --- main navigation ----------------------------------------------------- */

/* WP-side list wrapper; the shop nav list is the core navbar */
.pp-nav ul {
    display: flex;
    column-gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.pp-nav a,
.main-navigation-menu .main-navigation-link {
    color: var(--pp-cream);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
}
.pp-nav a:hover,
.main-navigation-menu .main-navigation-link:hover,
.main-navigation-menu .main-navigation-link.active {
    color: #fff;
}

/* --- burger (nav toggle, below lg) --------------------------------------- */

/* look + box of the storefront's nav-main-toggle-btn (a Bootstrap .btn with
   the CI button padding): pinned here so the WP burger sizes identically.
   inline-flex instead of inline-block removes the ~3px baseline slack the
   inline icon added in the shop; both sides end up at the same height. */
.pp-header .pp-nav-toggle,
.header-main .nav-main-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--pp-btn-padding-y) var(--pp-btn-padding-x);
    border: 1px solid transparent;
    border-radius: var(--pp-radius);
    background: transparent;
    color: var(--pp-cream);
    line-height: 1.2;
    cursor: pointer;
}
.pp-header .pp-nav-toggle:hover,
.pp-header .pp-nav-toggle:focus,
.header-main .nav-main-toggle-btn:hover,
.header-main .nav-main-toggle-btn:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.pp-header .pp-nav-toggle .icon,
.header-main .nav-main-toggle-btn .icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    /* the core .icon carries its own gray; the burger must take the
       button's cream */
    color: inherit;
}
.pp-header .pp-nav-toggle .icon svg,
.header-main .nav-main-toggle-btn .icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* --- header CTAs / buttons ---------------------------------------------- */

/* look only — placement (display, margin, padding-right) is system-specific */
.pp-header-ctas {
    gap: 0.625rem;
}
/* the shop's CTA column is d-none d-xl-flex; below xl WP would show both
   buttons wrapping onto two lines and overflowing the content edge. A
   max-width display:none does not fight the shop's utility (which already
   hides below xl with !important) */
@media (max-width: 1199px) {
    .pp-header-ctas {
        display: none;
    }
}

/* Elementor's standard button widget is grouped in here so it can never
   drift from .pp-btn. The `.elementor` prefix is needed: Elementor's own
   button rule has the same specificity as `.elementor-button` and loads
   later. The selectors simply do not match in Shopware. */
.pp-btn,
.elementor .elementor-button,
.elementor a.elementor-button,
.elementor .elementor-button-link {
    line-height: 1.2;
    display: inline-block;
    background: var(--pp-orange);
    color: #fff;
    font-family: var(--pp-font-body);
    font-size: var(--pp-btn-font-size);
    font-weight: var(--pp-btn-font-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--pp-btn-padding-y) var(--pp-btn-padding-x);
    border: 1px solid var(--pp-orange);
    border-radius: var(--pp-radius);
}
.pp-btn:hover,
.elementor .elementor-button:hover,
.elementor .elementor-button:focus,
.elementor .elementor-button-link:hover {
    background: var(--pp-orange-dark);
    border-color: var(--pp-orange-dark);
    color: #fff;
}
/* outline variant per the design mocks: olive instead of orange */
.pp-btn--outline {
    background: transparent;
    color: var(--pp-olive);
    border-color: var(--pp-olive);
}
.pp-btn--outline:hover {
    background: var(--pp-olive);
    border-color: var(--pp-olive);
    color: #fff;
}

.pp-btn-outline-light {
    line-height: 1.2;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    font-size: var(--pp-btn-font-size);
    font-weight: var(--pp-btn-font-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--pp-btn-padding-y) var(--pp-btn-padding-x);
    border-radius: var(--pp-radius);
}
.pp-btn-outline-light:hover,
.pp-btn-outline-light:focus,
.pp-btn-outline-light:active {
    background: #fff;
    border-color: #fff;
    color: var(--pp-ink);
}

/* --- shared content atoms ------------------------------------------------ */

.pp-accent {
    color: var(--pp-olive-accent);
}

.pp-eyebrow {
    color: var(--pp-orange);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
}
.pp-eyebrow::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--pp-orange);
    flex: 0 0 auto;
}

/* --- numbered target-group list (layout per the design mock: heading
       column left, list right, orange index, circled arrow) --------------- */

.pp-numbered-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 767px) {
    .pp-numbered-section {
        grid-template-columns: 1fr;
    }
}
.pp-numbered-head h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin: 0 0 1rem;
}
.pp-numbered-head p:last-child {
    color: var(--pp-muted);
    margin: 0;
}
.pp-numbered {
    border-top: 1px solid var(--pp-border);
    margin: 0;
}
.pp-numbered-item {
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--pp-border);
    /* rows are separated by borders only — kill WP's is-layout-flow margin */
    margin: 0;
}
.pp-numbered-index {
    color: var(--pp-orange);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}
.pp-numbered-body p {
    margin: 0;
    color: var(--pp-muted);
    font-size: 0.875rem;
}
.pp-numbered-body strong {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--pp-ink);
    font-size: 1.25rem;
    font-weight: 600;
}
.pp-numbered-arrow {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--pp-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    margin: 0;
    color: var(--pp-ink);
    text-decoration: none;
}

/* --- dark feature band ("Nicht nur ein Shirt…"): per the design mock the
       check grid bleeds to the band's top/bottom edge (no padding around
       it), with internal separators plus a left border only --------------- */

.pp-dark-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0 3rem;
    align-items: stretch;
}
@media (max-width: 767px) {
    .pp-dark-grid {
        grid-template-columns: 1fr;
    }
}
.pp-dark-grid > div:first-child {
    align-self: center;
    padding: 3rem 0;
}
.pp-dark-grid h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin: 0 0 1rem;
    color: #fff;
}
.pp-dark-grid > div:first-child > p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
}
/* eyebrow on the dark ground is cream and loses the leading dot (mock) */
.pp-band--dark .pp-eyebrow,
.pp-section-dark .pp-eyebrow {
    color: rgba(255, 255, 255, 0.9);
}
.pp-band--dark .pp-eyebrow::before,
.pp-section-dark .pp-eyebrow::before {
    display: none;
}

.pp-check-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    /* WP's is-layout-flow injects 24px margin-block-start between groups —
       it would push the grid off the band edge */
    margin: 0;
}
.pp-check {
    margin: 0;
    padding: 2.5rem 2rem 2rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}
.pp-check::before {
    content: '\2713';
    display: block;
    color: var(--pp-orange);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 1.5rem;
}
.pp-check strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
}
.pp-check p {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 576px) {
    /* internal separators only: right border on the first column,
       bottom border on the first row */
    .pp-check:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
    }
    .pp-check:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
}
@media (max-width: 575px) {
    .pp-check-grid {
        grid-template-columns: 1fr;
    }
    .pp-check:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
}

/* --- footer (identical markup on both sides) ----------------------------- */

.pp-footer {
    background: var(--pp-olive);
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--pp-space-lg);
}
.pp-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pp-space-lg);
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.pp-footer__col {
    min-width: 10rem;
}
.pp-footer__brand {
    max-width: 16rem;
}
.pp-footer__brand p {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
}
.pp-footer__title {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 0.75rem;
}
.pp-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}
.pp-footer li {
    margin-bottom: 0.375rem;
}
.pp-footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}
.pp-footer a:hover {
    color: #fff;
}
.pp-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1rem 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}
/* Phones: columns stack full width and centre instead of sitting as ragged
   half-width blocks (min-width: 10rem otherwise squeezes two per row). */
@media (max-width: 575px) {
    .pp-footer__inner {
        justify-content: center;
        text-align: center;
        gap: var(--pp-space-md);
    }
    .pp-footer__col,
    .pp-footer__brand {
        flex-basis: 100%;
        min-width: 0;
        max-width: none;
    }
    .pp-footer__bottom {
        text-align: center;
    }
}

/* --- product card ------------------------------------------------------- */

/* Horizontal card like the KFZ template: image panel left on the panel
   colour, content right with title / description / divider / buy icon +
   price; stacks on phones. Used by the shop listing (.product-box, core
   markup) and the WP widget pp-shop-products (.ppsw-card--card). Both DOMs
   use the same inner class names, so the rules are only grouped at the
   card root. Explicit box-sizing: WP has no global border-box reset. */
.product-box,
.ppsw-card--card {
    background: var(--pp-cream-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.product-box:hover,
.ppsw-card--card:hover {
    border-color: var(--pp-ink);
}
/* ".product-box.card >" beats Bootstrap's ".card > .card-body" padding */
.product-box.card > .card-body,
.ppsw-card--card > .ppsw-card__body {
    display: grid;
    /* the listing row stretches the card — the body must follow */
    height: 100%;
    box-sizing: border-box;
    grid-template-columns: 42% 1fr;
    /* the core badges are position:absolute and take no cell; the info
       column spans both rows so its bottom-anchored buy row really sits at
       the card bottom */
    grid-template-rows: auto 1fr;
    column-gap: 1.75rem;
    padding: 0;
}
.product-box.card > .card-body > *,
.ppsw-card--card > .ppsw-card__body > * {
    grid-column: 2;
}
.product-box.card > .card-body > .product-image-wrapper,
.ppsw-card--card > .ppsw-card__body > .product-image-wrapper {
    grid-column: 1;
    grid-row: 1 / -1;
}
.product-box.card > .card-body > .product-info,
.ppsw-card--card > .ppsw-card__body > .product-info {
    grid-row: 1 / -1;
}
/* phones: the info column would be ~130px wide at 320px — stack instead */
@media (max-width: 575.98px) {
    .product-box.card > .card-body,
    .ppsw-card--card > .ppsw-card__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 0;
    }
    .product-box.card > .card-body > *,
    .ppsw-card--card > .ppsw-card__body > * {
        grid-column: 1;
    }
    .product-box.card > .card-body > .product-image-wrapper,
    .ppsw-card--card > .ppsw-card__body > .product-image-wrapper {
        grid-row: 1;
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
    .product-box.card > .card-body > .product-info,
    .ppsw-card--card > .ppsw-card__body > .product-info {
        grid-row: 2 / -1;
        height: auto;
        padding: 1.25rem;
    }
}
/* image panel flush with the card edge, image fills the panel */
.product-box .product-image-wrapper,
.ppsw-card--card .product-image-wrapper {
    height: 100%;
    min-height: 300px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pp-panel);
}
.product-box .product-image-link,
.ppsw-card--card .product-image-link {
    display: block;
    width: 100%;
    height: 100%;
}
.product-box .product-image,
.ppsw-card--card .product-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}
.product-box .product-info,
.ppsw-card--card .product-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding: 1.75rem 1.75rem 1.75rem 0;
}
/* core reserves space for rating, variant characteristics, unit price and
   the cheapest-price hint — this shop uses none of them */
.product-box .product-rating,
.product-box .product-variant-characteristics,
.product-box .product-price-unit,
.product-box .product-cheapest-price {
    display: none;
}
/* name and description reserve a fixed number of lines (2 / 3) and clamp
   longer text — the core does the same, so cards in a row stay equal */
.product-box .product-name,
.ppsw-card--card .product-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 2.4em;
    color: var(--pp-ink);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
    margin: 0 0 0.625rem;
}
.product-box .product-description,
.ppsw-card--card .product-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 4.5em;
    color: var(--pp-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
    /* eats the free vertical space, so divider + buy row anchor at the
       card bottom regardless of the description length */
    flex-grow: 1;
}
.product-box .pp-card-buy-row,
.ppsw-card--card .pp-card-buy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pp-border);
}
/* the core gives .product-action 20px and .product-price-info 10px top
   margin — both sit in the buy row now, no margins */
.product-box .product-action,
.ppsw-card--card .product-action {
    margin: 0;
}
.product-box .product-price-info,
.ppsw-card--card .product-price-info {
    flex: 1;
    margin: 0;
    text-align: right;
}
.product-box .product-price,
.ppsw-card--card .product-price {
    display: block;
    color: var(--pp-ink);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.125rem;
}
/* own line under the price — inline it would wrap next to the buy icon.
   Three classes deep: the core's .btn.btn-link-inline would otherwise win
   the line-height */
.product-box .product-price-info .product-price-tax-link,
.ppsw-card--card .product-price-info .product-price-tax-link {
    display: block;
    width: 100%;
    text-align: right;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--pp-muted);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
}
/* icon-only buy button (bag) — on variant products it links to the
   product page, the variant is chosen there */
.product-box .btn-buy,
.ppsw-card--card .btn-buy {
    width: 2.75rem;
    height: 2.75rem;
    box-sizing: border-box;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pp-orange);
    border: 1px solid var(--pp-orange-dark);
    border-radius: var(--pp-radius);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.product-box .btn-buy:hover,
.product-box .btn-buy:focus,
.ppsw-card--card .btn-buy:hover,
.ppsw-card--card .btn-buy:focus {
    background: var(--pp-orange-dark);
    border-color: var(--pp-orange-dark);
    color: #fff;
}
.product-box .btn-buy .icon,
.ppsw-card--card .btn-buy .icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    color: #fff;
    margin: 0;
}
.product-box .btn-buy .icon svg,
.ppsw-card--card .btn-buy .icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}