/*
 Theme Name: Custom
 Description: Custom theme for this project.
 Template: Divi
 Version: 18.4.1
 Text Domain: custom-theme
*/

/* ==================================================================
   Project custom CSS (child theme). Added by Claude Code.
   ================================================================== */

/* Align product-grid cards across every Divi WooCommerce grid — the Shop
   module, category/archive pages, "Related products" and "Upsells" (all are
   `.et_pb_module` wrappers around `ul.products`). Divi floats each card, so
   cards with shorter titles/descriptions leave their Compare button higher
   than the rest. Make each row equal-height (flex), reserve a consistent
   title height, and pin the Compare button to the bottom. */
.et_pb_module ul.products {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.et_pb_module ul.products::after {
    display: none; /* neutralise Divi's float-clearfix inside the flex row */
}

.et_pb_module ul.products li.product {
    display: flex;
    flex-direction: column;
    float: none;
}

/* The card link (image + title + short description) keeps its natural
   height at the top; the Compare button drops to the bottom edge. */
.et_pb_module ul.products li.product .poupa-compare-btn {
    margin-top: auto;
}

/* Reserve two lines for the product title so a card whose name wraps to a
   second line keeps its description (and everything below) aligned with the
   single-line cards in the same row. 1 line = 34px, 2 lines = 54px here.
   High specificity + !important beats Divi's default min-height:30px. */
.et_pb_module ul.products li.product a.woocommerce-loop-product__link h2.woocommerce-loop-product__title {
    min-height: 54px !important;
}

/* Product "Advantages" list ([product_advantages]) */
ul.poupa-advantages {
    list-style: disc;
    margin: 18px 0 0;
    padding-left: 20px;
}
ul.poupa-advantages li {
    margin: 0 0 10px;
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Product "System leaflet" brochure links ([product_brochures])
------------------------------------------------------------------ */
.poupa-leaflet {
    border-bottom: 1px dashed rgba(95,105,102,0.55);
    padding-bottom: 20px;
    margin-bottom: 6px;
}
.poupa-leaflet h3 {
    line-height: 130%;
    margin: 2px 0 10px;
}
.poupa-leaflet-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
.poupa-leaflet-list li {
    margin: 0 0 16px;
}
.poupa-leaflet-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
}
.poupa-leaflet-list a:hover {
    color: #5F6966;
}
.poupa-leaflet-ico {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: #5F6966;
}

/* ===== Homepage product-category cards ([poupa_category_cards]) ===== */
.poupa-cat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: stretch;
}
.poupa-cat-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
    overflow: hidden;
    border-bottom: 1px solid #ffffff;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.13);
}
.poupa-cat-card.poupa-cat-noimg { background-color: #2b3a35; }
.poupa-cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26,69,59,0.10) 0%, rgba(0,0,0,0.35) 79%);
    transition: background 0.7s cubic-bezier(.215,.61,.355,1);
}
.poupa-cat-card:hover .poupa-cat-overlay {
    background: linear-gradient(180deg, rgba(26,69,59,0.34) 0%, rgba(0,0,0,0.68) 69%);
}
.poupa-cat-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 20px;
}
.poupa-cat-title {
    display: block;
    color: #fff !important;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 600;
    margin: 0 0 10px;
}
.poupa-cat-sub {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.18em;
    font-weight: 600;
    text-transform: uppercase;
}
@media (max-width: 980px) {
    .poupa-cat-cards { grid-template-columns: repeat(2, 1fr); }
    .poupa-cat-title { font-size: 22px; }
}
@media (max-width: 480px) {
    .poupa-cat-cards { grid-template-columns: 1fr 1fr; }
    .poupa-cat-title { font-size: 18px; }
    .poupa-cat-inner { padding: 10px; }
}

/* ===== Products page category cards ([poupa_categories_page_cards]) ===== */
.poupa-pc-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.poupa-pc-card {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 2.15 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}
.poupa-pc-card.poupa-pc-noimg { background-color: #2b3a35; }
.poupa-pc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26,69,59,0.10) 0%, rgba(0,0,0,0.42) 88%);
    transition: background 0.6s cubic-bezier(.215,.61,.355,1);
}
.poupa-pc-card:hover .poupa-pc-overlay {
    background: linear-gradient(180deg, rgba(26,69,59,0.24) 0%, rgba(0,0,0,0.60) 82%);
}
.poupa-pc-inner {
    position: relative;
    z-index: 1;
    padding: 0 40px;
    color: #fff;
}
.poupa-pc-title {
    display: block;
    color: #fff !important;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 600;
    margin: 0 0 12px;
}
.poupa-pc-view {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.poupa-pc-view .pc-all {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.55s cubic-bezier(.215,.61,.355,1), opacity 0.4s ease;
}
.poupa-pc-card:hover .poupa-pc-view .pc-all { max-width: 200px; opacity: 1; }
.poupa-pc-view .pc-arrow {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.215,.61,.355,1);
}
.poupa-pc-card:hover .poupa-pc-view .pc-arrow { opacity: 1; transform: none; }
@media (max-width: 782px) {
    .poupa-pc-cards { grid-template-columns: 1fr; gap: 20px; }
    .poupa-pc-title { font-size: 22px; }
}

/* ===== Homepage "Why Poupa" value pillars ([poupa_pillars]) ===== */
.poupa-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 44px 32px;
    max-width: 1240px;
    margin: 0 auto;
}
.poupa-pillar {
    text-align: center;
    color: #ffffff;
}
.poupa-pillar-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin-bottom: 18px;
    border: 1.5px solid rgba(0, 161, 75, 0.65);
    border-radius: 50%;
    color: #ffffff;
}
.poupa-pillar-ico svg { width: 40px; height: 40px; }
.poupa-pillar-title {
    display: block;
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 10px;
}
.poupa-pillar-text {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}
/* Four across is too tight below ~1100px — drop to a 2×2 grid, then a single column. */
@media (max-width: 1100px) {
    .poupa-pillars { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}
@media (max-width: 780px) {
    .poupa-pillars { grid-template-columns: 1fr; gap: 34px; max-width: 360px; }
}

/* ===== "Coming soon" badge (e.g. Anodising on the production-process page) ===== */
.poupa-soon {
    display: inline-block;
    margin-left: 12px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1A453B;
    background: #00A14B;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.6;
}

/* ===== UN SDG icon grid ([poupa_sdg_icons]) ===== */
.poupa-sdg-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}
.poupa-sdg-icons img {
    width: calc(33.333% - 6px);
    height: auto;
    display: block;
    border-radius: 2px;
}
@media (max-width: 480px) {
    .poupa-sdg-icons img { width: calc(33.333% - 6px); }
}

/* ---------------------------------------------------------------------------
   Category archive header menu

   The category hero band sits directly behind the menu, and the header darkens
   it with a multiply overlay (rgba(95,105,102,.6) -> rgba(26,26,24,.61)). The
   left menus ship as et_pb_bg_layout_light (dark text), which disappears against
   that; the right menu (menu_2) is already bg_layout_dark, so the two halves of
   the menu disagreed with each other. The logo is a white SVG, so the header is
   built for dark grounds anyway.

   Measured over the menu strip of all 14 heroes, after the overlay:
     white text  -> WCAG contrast 5.11 - 14.85  (passes AA on 14/14)
     brand green -> WCAG contrast  1.00 -  2.10 (fails AA on 14/14)
   So white is the only workable colour here, and it needs no per-category logic.

   Scoped to body.tax-product_cat: header layout 300221 is shared with almost
   every other template, which must not be affected. Only top-level items are
   touched (.nav > li > a) - submenu links sit on a white panel and stay dark.
   --------------------------------------------------------------------------- */
body.tax-product_cat .et_pb_menu_0_tb_header .nav > li > a,
body.tax-product_cat .et_pb_menu_1_tb_header .nav > li > a {
    color: #ffffff !important;
}
body.tax-product_cat .et_pb_menu_0_tb_header .nav > li > a:hover,
body.tax-product_cat .et_pb_menu_1_tb_header .nav > li > a:hover {
    color: #00A14B !important;
    opacity: 1;
}
/* dropdown caret follows the link colour */
body.tax-product_cat .et_pb_menu_0_tb_header .nav > li.menu-item-has-children > a:after,
body.tax-product_cat .et_pb_menu_1_tb_header .nav > li.menu-item-has-children > a:after {
    color: #ffffff;
}

/* =====================================================================
   Professionals landing page ([poupa_professionals])
   ===================================================================== */
/* The page has a dedicated full-width Theme Builder body template (single 4/4 column,
   100% gutterless row), so .pp-landing already fills the viewport and each band below
   spans edge to edge. Inner content is re-constrained per section. */
.pp-landing { color: #1a1a18; }
.pp-landing * { box-sizing: border-box; }

/* Hero — full-bleed dark-green band carrying the montage image behind a green wash.
   The image layer (::before) fails gracefully to solid green until the file is placed. */
.pp-hero {
    position: relative;
    background: #1A453B;
    color: #fff;
    padding: 104px 24px 112px;
    text-align: center;
    overflow: hidden;
}
.pp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/wp-content/uploads/professionals/professionals-hero.webp) center center / cover no-repeat;
    z-index: 0;
}
.pp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Darker on the left (behind the text), lighter on the right so the montage shows through. */
    background: linear-gradient(100deg, rgba(20,54,45,0.94) 0%, rgba(20,54,45,0.82) 42%, rgba(20,54,45,0.55) 100%);
    z-index: 0;
}
.pp-hero-inner { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; }
.pp-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #7fd0a3;
    margin-bottom: 18px;
}
.pp-hero-title {
    color: #fff !important;
    font-size: 44px;
    line-height: 1.12;
    font-weight: 600;
    margin: 0 0 18px;
}
.pp-hero-lede {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255,255,255,0.88);
    margin: 0 auto 30px;
    max-width: 640px;
}
.pp-hero-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pp-btn {
    display: inline-block;
    text-decoration: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 13px 34px;
    transition: background .2s ease, color .2s ease;
}
.pp-btn--primary { background: #00A14B; color: #fff; }
.pp-btn--primary:hover { background: #00b855; color: #fff; }
.pp-hero-login { font-size: 14px; color: rgba(255,255,255,0.78); }
.pp-hero-login a { color: #7fd0a3; text-decoration: underline; }
.pp-hero-login a:hover { color: #fff; }

/* Sections */
.pp-section { max-width: 1240px; margin: 0 auto; padding: 82px 40px; }
.pp-h2 {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #1A453B;
    margin: 0 0 12px;
}
.pp-sub {
    text-align: center;
    font-size: 16px;
    color: #55605a;
    max-width: 640px;
    margin: 0 auto 44px;
    line-height: 1.55;
}

/* What's inside — locked cards */
.pp-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.pp-card {
    position: relative;
    background: #fff;
    border: 1px solid #e4e7e5;
    border-radius: 10px;
    padding: 26px 22px 24px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.pp-card:hover {
    box-shadow: 0 10px 30px rgba(26,69,59,0.10);
    transform: translateY(-2px);
    border-color: #cfe6d9;
}
.pp-card-lock {
    position: absolute;
    top: 16px; right: 16px;
    color: #b7bfba;
}
.pp-card-lock svg { width: 18px; height: 18px; }
.pp-card-ico {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: 12px;
    background: #eef5f0;
    color: #1A453B;
    margin-bottom: 16px;
}
.pp-card-ico svg { width: 28px; height: 28px; }
.pp-card-title { font-size: 17px; font-weight: 600; color: #1A453B; margin: 0 0 8px; }
.pp-card-text { font-size: 14px; line-height: 1.55; color: #55605a; margin: 0; }

/* Built for the way you work */
.pp-for { background: #f5f7f6; max-width: 100%; }
.pp-for > .pp-h2, .pp-for > .pp-sub { max-width: 1240px; margin-left: auto; margin-right: auto; }
.pp-for-cols {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.pp-for-col {
    background: #fff;
    border: 1px solid #e4e7e5;
    border-radius: 10px;
    padding: 32px 30px;
}
.pp-for-title { font-size: 20px; font-weight: 600; color: #1A453B; margin: 0 0 6px; }
.pp-for-lead { font-size: 15px; color: #55605a; margin: 0 0 18px; }
.pp-for-list { list-style: none; margin: 0; padding: 0; }
.pp-for-list li {
    position: relative;
    padding: 8px 0 8px 26px;
    font-size: 15px;
    color: #2c332f;
    border-top: 1px solid #eef1ef;
}
.pp-for-list li:first-child { border-top: 0; }
.pp-for-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: 15px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #00A14B;
}

/* How it works */
.pp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 960px;
    margin: 0 auto;
}
.pp-step { text-align: center; padding: 0 12px; }
.pp-step-num {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #1A453B;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 16px;
}
.pp-step-title { font-size: 18px; font-weight: 600; color: #1A453B; margin: 0 0 8px; }
.pp-step-text { font-size: 14px; line-height: 1.55; color: #55605a; margin: 0; }

/* Request form */
.pp-request { background: #1A453B; max-width: 100%; }
.pp-request-inner { max-width: 820px; margin: 0 auto; }
.pp-request .pp-h2 { color: #fff; }
.pp-request .pp-sub { color: rgba(255,255,255,0.82); }
.pp-form-intro { display: none; } /* the lede already covers this */

.pp-landing .pp-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 26px;
}
.pp-landing .pp-fieldset legend {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7fd0a3;
    padding: 0;
    margin-bottom: 16px;
}
.pp-landing .pp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}
.pp-landing .pp-grid label,
.pp-landing .pp-usage {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}
.pp-landing .pp-full { grid-column: 1 / -1; }
.pp-landing .pp-usage { margin: 0 0 22px; }
.pp-landing input[type="text"],
.pp-landing input[type="email"],
.pp-landing input[type="tel"],
.pp-landing input[type="url"],
.pp-landing select,
.pp-landing textarea {
    width: 100%;
    margin-top: 6px;
    padding: 11px 13px;
    font-size: 15px;
    color: #1a1a18;
    background: #fff;
    border: 1px solid #cfd6d2;
    border-radius: 5px;
    line-height: 1.3;
}
.pp-landing textarea { resize: vertical; min-height: 96px; }
.pp-landing input:focus,
.pp-landing select:focus,
.pp-landing textarea:focus {
    outline: none;
    border-color: #00A14B;
    box-shadow: 0 0 0 3px rgba(0,161,75,0.25);
}
.pp-consent {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
    margin: 0 0 22px;
}
.pp-consent a { color: #7fd0a3; text-decoration: underline; }
.pp-consent .wpcf7-list-item { margin: 0; }
.pp-submit { margin: 0; }
.pp-landing .wpcf7-submit,
.pp-landing input.wpcf7-submit {
    background: #00A14B;
    color: #fff;
    border: 0;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 13px 34px;
    cursor: pointer;
    transition: background .2s ease;
    width: auto;
}
.pp-landing .wpcf7-submit:hover { background: #00b855; }
.pp-landing .wpcf7-not-valid-tip { color: #ffd2cd; font-size: 13px; }
.pp-landing .wpcf7-response-output {
    color: #fff;
    border-color: rgba(255,255,255,0.4) !important;
    margin: 20px 0 0;
    padding: 12px 16px;
    border-radius: 5px;
}
.pp-request-login { font-size: 14px; color: rgba(255,255,255,0.78); margin: 26px 0 0; text-align: center; }
.pp-request-login a { color: #7fd0a3; text-decoration: underline; }

/* Responsive */
@media (max-width: 1000px) {
    .pp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .pp-hero { padding: 60px 20px 66px; }
    .pp-hero-title { font-size: 32px; }
    .pp-hero-lede { font-size: 16px; }
    .pp-section { padding: 54px 20px; }
    .pp-h2 { font-size: 25px; }
    .pp-cards { grid-template-columns: 1fr; }
    .pp-for-cols { grid-template-columns: 1fr; }
    .pp-steps { grid-template-columns: 1fr; gap: 34px; }
    .pp-landing .pp-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Header scrolled state (drives off body.pp-hscroll — see lib/header-scroll.php)
   Top-of-page / transparent-over-hero state is intentionally left untouched.
   ===================================================================== */
.et-l--header,
.et-l--header .et_pb_section_0_tb_header {
    transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* ---- A · HOMEPAGE, scrolled: keep white, add dark-green underline + soft shadow ---- */
body.home.pp-hscroll .et-l--header { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10) !important; }
body.home.pp-hscroll .et-l--header .et_pb_section_0_tb_header {
    border-bottom: 3px solid #1A453B !important;
}

/* ---- B · SCROLLED STATE ----
   Background + logo are left to Divi's native transparent-header behaviour: on scroll the
   header turns white (et_pb_bg_layout_light) and swaps to the dark logo; the transparent-
   over-hero top keeps the white nav + white logo. We ONLY recolour the nav links to brand
   green on the white scrolled header (default is a muted grey). Keyed to BOTH the scrolled
   state (dsm_fixed_header_scroll_active) AND the light background layout, so the over-hero
   top (dark layout, white nav) is never touched — the colour changes exactly with the bg. */
body.dsm_fixed_header_scroll_active:not(.home) .et-l--header .et_pb_menu_0_tb_header.et_pb_bg_layout_light ul.et-menu > li > a,
body.dsm_fixed_header_scroll_active:not(.home) .et-l--header .et_pb_menu_0_tb_header.et_pb_bg_layout_light ul.et-menu > li > a:hover {
    color: #1A453B !important;
}

/* The rule above only covered the LEFT menu (menu_0). On category pages the
   RIGHT menu (menu_1) + language switcher stayed white and vanished on the
   white scrolled header. Recolour them too — keyed on the scrolled state only
   (no bg_layout requirement, since menu_1 doesn't always swap on category
   pages), so the over-hero top keeps its white nav. */
body.dsm_fixed_header_scroll_active:not(.home) .et-l--header .et_pb_menu_1_tb_header ul.et-menu > li > a,
body.dsm_fixed_header_scroll_active:not(.home) .et-l--header .et_pb_menu_1_tb_header ul.et-menu > li > a:hover {
    color: #1A453B !important;
}

/* The language switcher is a custom element, so Divi's nav colouring doesn't
   reach it. Track the header state explicitly:
   - over the hero (NOT scrolled) -> white, to match the white nav
   - scrolled white header (non-home) -> brand green */
body.dsm_fixed_header_scroll:not(.dsm_fixed_header_scroll_active) .et-l--header .et_pb_menu_1_tb_header .poupa-lang-switcher,
body.dsm_fixed_header_scroll:not(.dsm_fixed_header_scroll_active) .et-l--header .et_pb_menu_1_tb_header .poupa-lang-switcher a {
    color: #fff !important;
}
body.dsm_fixed_header_scroll_active:not(.home) .et-l--header .et_pb_menu_1_tb_header .poupa-lang-switcher,
body.dsm_fixed_header_scroll_active:not(.home) .et-l--header .et_pb_menu_1_tb_header .poupa-lang-switcher a {
    color: #1A453B !important;
}

/* Shop archive H1 ([poupa_shop_h1]) — page title above the category grid on /products/ */
.pp-shop-h1 {
    text-align: center;
    font-size: 34px;
    font-weight: 600;
    color: #1A453B;
    line-height: 1.15;
    margin: 0 0 6px;
}
@media (max-width: 782px) { .pp-shop-h1 { font-size: 26px; } }

/* ============================================================
   Product specification table ([product_specs])
   Replaces the hand-built Divi grid; empty fields & empty
   sections are omitted server-side, so nothing to hide here.
   ============================================================ */
.pp-specs { width: 100%; }
.pp-spec-group { padding: 0 0 34px; margin: 0 0 34px; border-bottom: 1px dashed rgba(95, 105, 102, 0.55); }
.pp-spec-group:last-child { border-bottom: 0; margin-bottom: 0; }
.pp-spec-heading {
    font-size: 40px;
    font-weight: 300;
    line-height: 1.1;
    color: #5F6966;
    margin: 0 0 26px;
}
.pp-spec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 40px;
}
.pp-spec-label {
    font-size: 17px;
    font-weight: 600;
    color: #1A1A18;
    line-height: 1.25;
    margin: 0 0 6px;
}
.pp-spec-unit {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    color: #5F6966;
    white-space: nowrap;
}
.pp-spec-value {
    font-size: 16px;
    font-weight: 400;
    color: #5F6966;
    line-height: 1.35;
}
@media (max-width: 980px) { .pp-spec-grid { grid-template-columns: repeat(2, 1fr); } .pp-spec-heading { font-size: 32px; } }
@media (max-width: 560px) { .pp-spec-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Inspiration gallery ([poupa_inspiration])
   ============================================================ */
.pp-inspo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:18px; margin:8mm 0 6mm; }
.pp-inspo-tile { position:relative; display:block; overflow:hidden; border-radius:4px; aspect-ratio:4/3; text-decoration:none; box-shadow:0 8px 22px rgba(0,0,0,.10); }
.pp-inspo-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.pp-inspo-tile:hover img { transform:scale(1.06); }
.pp-inspo-tile .pp-inspo-cap { position:absolute; left:0; right:0; bottom:0; padding:16px 18px; color:#fff; font-size:15px; font-weight:600; letter-spacing:.2px; background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%); }
@media (max-width:600px){ .pp-inspo-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Header (desktop) — the header column is a `1fr auto 1fr` grid with
   the logo centred. The menu modules are width:fit-content and sit at
   the START of their cell, so adding items pushed the left menu away
   from the logo. Fix WITHOUT flexing the menus (flex made them wrap):
   - pin the LEFT menu to the END of its cell   -> hugs the logo, 1 line
   - pin the RIGHT menu to the START of its cell -> hugs the logo, 1 line
   - lift the language switcher out of the menu flow and pin it to the
     far-right edge of the header, so it never wraps to a second line.
   ============================================================ */
@media only screen and (min-width:981px){
  /* The header ROW is a centred grid whose single column track is content-sized
     (~876px), so the header can't use the full row width. Make that track fill
     the row, then the column's `1fr auto 1fr` cells widen enough to fit the
     extra menu item and give the toggle room at the far-right edge. */
  .et_pb_row_0_tb_header{ grid-template-columns:1fr !important; }
  .et_pb_column_0_tb_header{ width:100% !important; }
  /* Left menu: pin to the END of its cell -> hugs the logo (one line). */
  .et_pb_menu_0_tb_header.et_pb_menu{ justify-self:end !important; }
  /* Right menu: fill its cell and lay out with flex. The nav items stay by
     the logo (flex-start); the language switcher is pushed to the far-right
     edge with margin-left:auto. nowrap keeps everything on one line. */
  .et_pb_menu_1_tb_header.et_pb_menu{ justify-self:stretch !important; width:100% !important; }
  .et_pb_menu_1_tb_header .et_pb_menu__menu,
  .et_pb_menu_1_tb_header .et-menu-nav{ width:100% !important; }
  .et_pb_menu_1_tb_header ul.et-menu{
    display:flex !important; flex-wrap:nowrap !important; align-items:center;
    width:100%; margin-right:0 !important;
  }
  .et_pb_menu_1_tb_header ul.et-menu > li{ flex:0 0 auto; }
  .et_pb_menu_1_tb_header ul.et-menu > li:has(.poupa-lang-menu){
    margin-left:auto !important; white-space:nowrap;
  }
}

/* ============================================================
   Product-category intro description (overview / empty categories)
   ============================================================ */
.pp-cat-intro{ max-width:940px; margin:0 auto; padding:38px 22px 6px; text-align:center; }
.pp-cat-intro p{ font-size:17px; line-height:1.75; color:#4a5551; margin:0 0 1.1em; }
.pp-cat-intro strong{ color:#1A453B; font-weight:600; }
@media (max-width:600px){ .pp-cat-intro{ padding:26px 16px 4px; } }

/* ============================================================
   "Our People" / Team page narrative
   ============================================================ */
.pp-people{ max-width:900px; margin:0 auto; padding:10px 20px 34px; }
.pp-people h2{ font-size:34px; font-weight:300; color:#1A453B; margin:0 0 .5em; }
.pp-people h3{ font-size:20px; font-weight:600; color:#1A453B; margin:1.5em 0 .35em; }
.pp-people p{ font-size:17px; line-height:1.75; color:#4a5551; margin:0 0 1.05em; }
@media (max-width:600px){ .pp-people h2{ font-size:28px; } }

/* ============================================================
   Team page (page 63) — the right-hand image was removed, so let the
   text use the full content width (single column, no empty gap).
   ============================================================ */
body.page-id-63 .et_pb_row_0_tb_body .et_pb_column.et_pb_column_3_5{
    width:100% !important; margin-right:0 !important; float:none !important;
}
body.page-id-63 .et_pb_row_0_tb_body .et_pb_column.et_pb_column_2_5{
    display:none !important;
}