/*
 * Webal Phoca Pages: the product page stylesheet. Loaded only on product pages printed from a layout (the system plugin asks the Web Asset Manager for
 * it). Every rule is scoped to .wblpp, the outer box Webal Phoca Pages prints, and only restores what Phoca's own page has: Phoca's markup inside the
 * blocks is never changed. Plain CSS; no motion, so nothing to stop under prefers-reduced-motion. The first part restores Phoca's looks and has no breakpoints; the second part ("Layout features (Plan 3)") uses Bootstrap's own breakpoints only.
 */

/* The gallery: Phoca prints #phImageBox with its own column classes (col-12 col-sm-5 col-md-5, kept for parity). Inside a layout the gallery block
   sits in a column the layout sizes, so the gallery fills that column at every screen size. */
.wblpp #phImageBox {
    width: 100%;
}

/* Phoca's price panel wrapper (.ph-item-price-panel) is not printed. Phoca's own rule for the forms inside it (main.css: margin 0, padding 0,
   inline) is given to the same forms here. */
.wblpp .phItemCartBoxForm,
.wblpp .phItemCompareBoxForm,
.wblpp .phItemWishListBoxForm,
.wblpp .phItemPublicDownloadBoxForm {
    margin: 0;
    padding: 0;
    display: inline;
}

/* Phoca's spacer after the add to cart part (.ph-top-space, 2em) and its bottom box (.ph-item-bottom-box, 2em above the tabs) are not printed:
   the same space after the Add to cart block and above each content section. */
.wblpp .wblpp-block--addtocart {
    margin-block-end: 2em;
}

.wblpp .wblpp-part {
    margin-block-start: 2em;
}

/* Label and value rows (price, reward points, manufacturer, stock, order quantities, delivery date, size, product codes). Phoca floats each label to
   the start and its value to the end (main.css around lines 176 to 222: the labels "float: left; clear: both", the values "float: right") and puts a
   clearing div after the rows. Inside our page each box that holds such rows is a two-column grid instead: labels in the first column, values at the
   end of the second, so each row stays on one line as on Phoca's page, the box holds its rows (nothing after it rides up) and the clearing divs can
   be hidden. Floats do nothing in a grid. Anything else in the box (a heading, a note a plugin adds) takes a whole row. The selectors mirror
   Phoca's own lists, so the markup Phoca's script swaps in after an attribute change (price, stock, codes) is styled the same way. Phoca's stock
   part is two boxes of the same class, one inside the other (its script swaps only the inner one): only the inner one is a grid, so the two boxes'
   margins still collapse as on Phoca's page. No :has() here, so a browser without it keeps the whole list. */
.wblpp .ph-item-price-box,
.wblpp .ph-item-reward-box,
.wblpp .ph-item-manufacturer-box,
.wblpp .ph-item-stock-box .ph-item-stock-box,
.wblpp .ph-item-min-qty-box,
.wblpp .ph-item-delivery-date-box,
.wblpp .ph-item-size-box,
.wblpp .ph-item-sku-box,
.wblpp .ph-item-upc-box,
.wblpp .ph-item-ean-box,
.wblpp .ph-item-jan-box,
.wblpp .ph-item-isbn-box,
.wblpp .ph-item-mpn-box,
.wblpp .ph-item-serial-number-box {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1em;
    align-items: baseline;
}

.wblpp .ph-item-price-box > *,
.wblpp .ph-item-reward-box > *,
.wblpp .ph-item-manufacturer-box > *,
.wblpp .ph-item-stock-box > *,
.wblpp .ph-item-min-qty-box > *,
.wblpp .ph-item-delivery-date-box > *,
.wblpp .ph-item-size-box > *,
.wblpp .ph-item-sku-box > *,
.wblpp .ph-item-upc-box > *,
.wblpp .ph-item-ean-box > *,
.wblpp .ph-item-jan-box > *,
.wblpp .ph-item-isbn-box > *,
.wblpp .ph-item-mpn-box > *,
.wblpp .ph-item-serial-number-box > * {
    grid-column: 1 / -1;
}

/* The labels: the first column (a label after a value starts a new row, as Phoca's "clear: both" does). */
.wblpp .ph-item-price-box .ph-potentional-subscription-period-header,
.wblpp .ph-item-price-box .ph-active-subscription-period-header,
.wblpp .ph-item-price-box .ph-subscription-period-header,
.wblpp .ph-item-price-box .ph-price-txt,
.wblpp .ph-item-price-box .ph-tax-txt,
.wblpp .ph-item-reward-box .ph-reward-txt,
.wblpp .ph-item-manufacturer-box .ph-manufacturer-txt,
.wblpp .ph-item-stock-box .ph-stock-txt,
.wblpp .ph-item-min-qty-box .ph-min-qty-txt,
.wblpp .ph-item-delivery-date-box .ph-delivery-date-txt,
.wblpp .ph-item-size-box .ph-item-length-txt,
.wblpp .ph-item-size-box .ph-item-width-txt,
.wblpp .ph-item-size-box .ph-item-height-txt,
.wblpp .ph-item-size-box .ph-item-weight-txt,
.wblpp .ph-item-size-box .ph-item-volume-txt,
.wblpp .ph-item-sku-box .ph-sku-txt,
.wblpp .ph-item-upc-box .ph-upc-txt,
.wblpp .ph-item-ean-box .ph-ean-txt,
.wblpp .ph-item-jan-box .ph-jan-txt,
.wblpp .ph-item-isbn-box .ph-isbn-txt,
.wblpp .ph-item-mpn-box .ph-mpn-txt,
.wblpp .ph-item-serial-number-box .ph-serial-number-txt {
    grid-column: 1;
}

/* The values: the second column, at its end. */
.wblpp .ph-item-price-box .ph-potentional-subscription-period,
.wblpp .ph-item-price-box .ph-active-subscription-period,
.wblpp .ph-item-price-box .ph-subscription-period,
.wblpp .ph-item-price-box .ph-price-brutto,
.wblpp .ph-item-price-box .ph-price-netto,
.wblpp .ph-item-price-box .ph-price-original,
.wblpp .ph-item-price-box .ph-price-base,
.wblpp .ph-item-price-box .ph-tax,
.wblpp .ph-item-reward-box .ph-reward,
.wblpp .ph-item-manufacturer-box .ph-manufacturer,
.wblpp .ph-item-stock-box .ph-stock,
.wblpp .ph-item-min-qty-box .ph-min-qty,
.wblpp .ph-item-delivery-date-box .ph-delivery-date,
.wblpp .ph-item-size-box .ph-item-length,
.wblpp .ph-item-size-box .ph-item-width,
.wblpp .ph-item-size-box .ph-item-height,
.wblpp .ph-item-size-box .ph-item-weight,
.wblpp .ph-item-size-box .ph-item-volume,
.wblpp .ph-item-sku-box .ph-sku,
.wblpp .ph-item-upc-box .ph-upc,
.wblpp .ph-item-ean-box .ph-ean,
.wblpp .ph-item-jan-box .ph-jan,
.wblpp .ph-item-isbn-box .ph-isbn,
.wblpp .ph-item-mpn-box .ph-mpn,
.wblpp .ph-item-serial-number-box .ph-serial-number {
    grid-column: 2;
    justify-self: end;
    text-align: end;
}

/* Phoca prints size, weight and volume as up to three .ph-item-size-box boxes in a row, each with Phoca's 2em top margin. On Phoca's page the first
   box is only floats (no height) and the next box's labels clear them, so the rows run on with no gap; as grids they would each keep their margin.
   The space between them goes, so the rows sit as on Phoca's page. */
.wblpp .ph-item-size-box + .ph-item-size-box {
    margin-block-start: 0;
}

/* Buttons and links Phoca pulls to the end (.ph-pull-right: the add to cart box, compare, wish list, public download, external links, ask a
   question; main.css "float: right"). Inside our page each is a flex row instead: its contents sit at the end of the line (the end follows the
   language's direction, so right-to-left pages work), wrap with a gap when the line is too narrow, and the box keeps its height, so the next block
   never rides up beside it. The floats Phoca gives the compare and wish list icons inside these boxes do nothing in a flex row. */
.wblpp .ph-pull-right,
.wblpp .ph-pull-left {
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wblpp .ph-pull-right {
    justify-content: flex-end;
}

/* The add to cart box: Phoca's own spacing (the quantity input's side margins) already parts the quantity from the button, so no extra space
   between them; the gap above stays for the rows when the box wraps. */
.wblpp .ph-item-add-to-cart-box {
    column-gap: 0;
}

/* Compare and wish list next to each other in a column: the renderer puts that run of blocks in one box of ours (.wblpp-actions; Phoca's markup
   inside each block is unchanged), a flex row at the end of the line, so the two icons share one line as on Phoca's page. They show in the
   layout's order (no reordering): the owner moves the blocks in the layout to change it. A lone compare or wish list block is not wrapped. */
.wblpp .wblpp-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Phoca centres the public download button's box with auto side margins (main.css: margin 1em auto); inside Phoca's floated box those come to
   nothing. In a flex row they would centre it, so they are set to what they come to on Phoca's page. */
.wblpp .ph-pull-right > .ph-category-item-public-download {
    margin-inline: 0;
}

/* Phoca's clearing divs (.ph-cb, main.css "clear: both") only stopped the next part riding up beside Phoca's floats. The rules above replace those
   floats, so every clearing div inside our page is hidden. */
.wblpp .ph-cb {
    display: none;
}

/* A block box that holds Phoca's clearing divs and nothing else (the size block of a product with no size, weight or volume: Phoca's size layout
   always prints two) hides itself, so it takes no space. A box with any other element in it is never hidden. */
.wblpp .wblpp-block:has(> .ph-cb):not(:has(> :not(.ph-cb))) {
    display: none;
}

/* Every block starts below anything floated before it. Phoca's clearing divs did this for floats in the owner's own content too (a picture aligned
   left or right in the short description, the description, features or custom fields); with them hidden, each block box clears instead. */
.wblpp .wblpp-block {
    clear: both;
}

/* A plugin area prints what other extensions give it, which may float things of its own: its box holds them, so the next block never rides up. */
.wblpp .wblpp-block--event {
    display: flow-root;
}

/* ===== Layout features (Plan 3) ===== */
/*
 * Webal Phoca Pages' own layout features, used only where a layout asks for them: sticky columns, full width bands, tab groups and text sizes.
 * Breakpoints are Bootstrap's own (576, 768, 992, 1200 and 1400 px: Layout\Blocks::BREAKPOINTS); every rule is scoped to .wblpp; nothing moves (no
 * transition, no animation), so nothing needs stopping under prefers-reduced-motion. The layout's own values arrive as custom properties from the
 * small style Render\Front adds to the head through the Web Asset Manager while Phoca's view prints (written by Render\Styles; the system plugin
 * repeats the request as a fallback): --wblpp-top, --wblpp-fs, --wblpp-fw, --wblpp-lh and --wblpp-ls. The rules below
 * that read --wblpp-fs, --wblpp-fw, --wblpp-lh and --wblpp-ls give no fallback: they rely on Render\Styles printing the value whenever the renderer
 * prints the class (Styles::boxClasses and the block's rule are written from the same checked text settings), so a class never arrives without
 * its value. --wblpp-top falls back to 0rem, because a sticky column without a top space has no class of its own.
 */

/* Sticky columns (wblpp-sticky-<size>): from that size up the column stays --wblpp-top from the top of the window while the column beside it is
   taller (align-self keeps it its own height inside Bootstrap's row). A column taller than the window scrolls on its own, so a focused element in it
   can always be scrolled into view (WCAG 2.4.11 and 2.4.7); the block padding keeps focus rings inside the box, and the same scroll padding keeps
   them in view when a focused element is scrolled into view in the middle of the column. That padding sets the column's
   content 0.5 rem lower than the column beside it: accepted, a small even offset (M6 of the Plan 3 review). */
.wblpp .wblpp-sticky-xs {
    position: sticky;
    inset-block-start: var(--wblpp-top, 0rem);
    align-self: flex-start;
    max-block-size: calc(100vh - var(--wblpp-top, 0rem));
    max-block-size: calc(100dvh - var(--wblpp-top, 0rem));
    overflow-y: auto;
    overflow-x: hidden;
    padding-block: 0.5rem;
    scroll-padding-block: 0.5rem;
}

@media (min-width: 576px) {
    .wblpp .wblpp-sticky-sm {
        position: sticky;
        inset-block-start: var(--wblpp-top, 0rem);
        align-self: flex-start;
        max-block-size: calc(100vh - var(--wblpp-top, 0rem));
        max-block-size: calc(100dvh - var(--wblpp-top, 0rem));
        overflow-y: auto;
        overflow-x: hidden;
        padding-block: 0.5rem;
        scroll-padding-block: 0.5rem;
    }
}

@media (min-width: 768px) {
    .wblpp .wblpp-sticky-md {
        position: sticky;
        inset-block-start: var(--wblpp-top, 0rem);
        align-self: flex-start;
        max-block-size: calc(100vh - var(--wblpp-top, 0rem));
        max-block-size: calc(100dvh - var(--wblpp-top, 0rem));
        overflow-y: auto;
        overflow-x: hidden;
        padding-block: 0.5rem;
        scroll-padding-block: 0.5rem;
    }
}

@media (min-width: 992px) {
    .wblpp .wblpp-sticky-lg {
        position: sticky;
        inset-block-start: var(--wblpp-top, 0rem);
        align-self: flex-start;
        max-block-size: calc(100vh - var(--wblpp-top, 0rem));
        max-block-size: calc(100dvh - var(--wblpp-top, 0rem));
        overflow-y: auto;
        overflow-x: hidden;
        padding-block: 0.5rem;
        scroll-padding-block: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .wblpp .wblpp-sticky-xl {
        position: sticky;
        inset-block-start: var(--wblpp-top, 0rem);
        align-self: flex-start;
        max-block-size: calc(100vh - var(--wblpp-top, 0rem));
        max-block-size: calc(100dvh - var(--wblpp-top, 0rem));
        overflow-y: auto;
        overflow-x: hidden;
        padding-block: 0.5rem;
        scroll-padding-block: 0.5rem;
    }
}

@media (min-width: 1400px) {
    .wblpp .wblpp-sticky-xxl {
        position: sticky;
        inset-block-start: var(--wblpp-top, 0rem);
        align-self: flex-start;
        max-block-size: calc(100vh - var(--wblpp-top, 0rem));
        max-block-size: calc(100dvh - var(--wblpp-top, 0rem));
        overflow-y: auto;
        overflow-x: hidden;
        padding-block: 0.5rem;
        scroll-padding-block: 0.5rem;
    }
}

/* Full width rows with a background (D1): the background reaches the window's edges while the row's contents keep the page width. The colour is
   painted outside the row as border image outset, which never makes the page scroll sideways. With a Cassiopeia side column on the page the band
   stays at the page width, so it never runs behind the side column. */
.wblpp .wblpp-row-full.bg-body-secondary {
    --wblpp-band: var(--secondary-bg);
}

.wblpp .wblpp-row-full.bg-body-tertiary {
    --wblpp-band: var(--tertiary-bg);
}

.wblpp .wblpp-row-full.bg-primary-subtle {
    --wblpp-band: var(--primary-bg-subtle);
}

.wblpp .wblpp-row-full.bg-secondary-subtle {
    --wblpp-band: var(--secondary-bg-subtle);
}

.wblpp .wblpp-row-full:is(.bg-body-secondary, .bg-body-tertiary, .bg-primary-subtle, .bg-secondary-subtle) {
    border-image: conic-gradient(var(--wblpp-band) 0 0) fill 0 / / 0 100vw;
}

.wblpp-on:has(.container-sidebar-left, .container-sidebar-right) .wblpp .wblpp-row-full {
    border-image: none;
}

/* Tab groups (.wblpp-tabs): one markup, three looks per screen size, chosen by the layout (wblpp-look-<size>-<look>, printed for every size, so each
   Bootstrap range below has exactly one). Sections are the base look: every part open, Phoca's tab label as the section heading, the summaries
   hidden. Accordion: the summaries show (the browser's own disclosure control), each part opens and closes with no script, and the section heading
   stays for screen readers only. Tabs: the tab script reads --wblpp-look, shows the tab list, marks the group wblpp-tabs--as-tabs and shows one
   part at a time (where scripts run, the first paint already looks so: the first-paint rules below); with scripts off the tabs look reads as
   sections. */
.wblpp .wblpp-tabs {
    --wblpp-look: sections;
    margin-block-start: 2em;
}

.wblpp .wblpp-tabs__summary {
    display: none;
    min-block-size: 2.75rem;
    padding-block: 0.625rem;
    border-block-end: 1px solid var(--border-color);
    color: var(--link-color);
    font-weight: 600;
    cursor: pointer;
}

.wblpp .wblpp-tabs__summary:hover,
.wblpp .wblpp-tabs__tab:hover {
    text-decoration: underline;
}

.wblpp .wblpp-tabs__summary:active {
    color: var(--body-color);
}

.wblpp .wblpp-tabs__summary:focus-visible,
.wblpp .wblpp-tabs__tab:focus-visible,
.wblpp .wblpp-tabs--as-tabs > .wblpp-tabs__item > .wblpp-part:focus-visible {
    outline: 3px solid var(--link-color);
    outline-offset: 2px;
}

/* A part another look closed (closed in the accordion, then the window grew) still shows in the sections look where the browser can style the
   details content; elsewhere the tab script opens every part when the look changes. */
.wblpp .wblpp-tabs__item:not([open])::details-content {
    content-visibility: visible;
}

@media (max-width: 575.98px) {
    .wblpp .wblpp-look-xs-accordion {
        --wblpp-look: accordion;
    }

    .wblpp .wblpp-look-xs-tabs {
        --wblpp-look: tabs;
    }

    .wblpp .wblpp-look-xs-accordion > .wblpp-tabs__item > .wblpp-tabs__summary {
        display: list-item;
    }

    .wblpp .wblpp-look-xs-accordion > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
        padding-block: 0.5rem 1rem;
    }

    .wblpp .wblpp-look-xs-accordion > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wblpp .wblpp-look-xs-accordion > .wblpp-tabs__item:not([open])::details-content {
        content-visibility: hidden;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .wblpp .wblpp-look-sm-accordion {
        --wblpp-look: accordion;
    }

    .wblpp .wblpp-look-sm-tabs {
        --wblpp-look: tabs;
    }

    .wblpp .wblpp-look-sm-accordion > .wblpp-tabs__item > .wblpp-tabs__summary {
        display: list-item;
    }

    .wblpp .wblpp-look-sm-accordion > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
        padding-block: 0.5rem 1rem;
    }

    .wblpp .wblpp-look-sm-accordion > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wblpp .wblpp-look-sm-accordion > .wblpp-tabs__item:not([open])::details-content {
        content-visibility: hidden;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .wblpp .wblpp-look-md-accordion {
        --wblpp-look: accordion;
    }

    .wblpp .wblpp-look-md-tabs {
        --wblpp-look: tabs;
    }

    .wblpp .wblpp-look-md-accordion > .wblpp-tabs__item > .wblpp-tabs__summary {
        display: list-item;
    }

    .wblpp .wblpp-look-md-accordion > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
        padding-block: 0.5rem 1rem;
    }

    .wblpp .wblpp-look-md-accordion > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wblpp .wblpp-look-md-accordion > .wblpp-tabs__item:not([open])::details-content {
        content-visibility: hidden;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .wblpp .wblpp-look-lg-accordion {
        --wblpp-look: accordion;
    }

    .wblpp .wblpp-look-lg-tabs {
        --wblpp-look: tabs;
    }

    .wblpp .wblpp-look-lg-accordion > .wblpp-tabs__item > .wblpp-tabs__summary {
        display: list-item;
    }

    .wblpp .wblpp-look-lg-accordion > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
        padding-block: 0.5rem 1rem;
    }

    .wblpp .wblpp-look-lg-accordion > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wblpp .wblpp-look-lg-accordion > .wblpp-tabs__item:not([open])::details-content {
        content-visibility: hidden;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .wblpp .wblpp-look-xl-accordion {
        --wblpp-look: accordion;
    }

    .wblpp .wblpp-look-xl-tabs {
        --wblpp-look: tabs;
    }

    .wblpp .wblpp-look-xl-accordion > .wblpp-tabs__item > .wblpp-tabs__summary {
        display: list-item;
    }

    .wblpp .wblpp-look-xl-accordion > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
        padding-block: 0.5rem 1rem;
    }

    .wblpp .wblpp-look-xl-accordion > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wblpp .wblpp-look-xl-accordion > .wblpp-tabs__item:not([open])::details-content {
        content-visibility: hidden;
    }
}

@media (min-width: 1400px) {
    .wblpp .wblpp-look-xxl-accordion {
        --wblpp-look: accordion;
    }

    .wblpp .wblpp-look-xxl-tabs {
        --wblpp-look: tabs;
    }

    .wblpp .wblpp-look-xxl-accordion > .wblpp-tabs__item > .wblpp-tabs__summary {
        display: list-item;
    }

    .wblpp .wblpp-look-xxl-accordion > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
        padding-block: 0.5rem 1rem;
    }

    .wblpp .wblpp-look-xxl-accordion > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wblpp .wblpp-look-xxl-accordion > .wblpp-tabs__item:not([open])::details-content {
        content-visibility: hidden;
    }
}

/* The first paint, while the tab script has not run yet (it marks the group wblpp-tabs--ready in the same task as its first change): where scripts
   run, the page is first drawn as the script will leave it, so nothing shifts when it takes over (layout shift measured in T15). Accordion: only the
   first part's content shows (the script closes the others the first time); tabs: the tab list shows, only the first part shows, its heading for
   screen readers only. Under (scripting: enabled) only: with scripts off every part stays open and the tabs look reads as sections. Known cost: on
   a browser with scripts on where the tab script cannot run at all (its file blocked or broken), the other parts stay hidden, as in any tab
   widget whose script fails; the accordion's summaries and the tab list still name them. */
@media (scripting: enabled) and (max-width: 575.98px) {
    .wblpp .wblpp-look-xs-accordion:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type)::details-content {
        content-visibility: hidden;
    }

    .wblpp .wblpp-look-xs-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__list {
        display: flex;
    }

    .wblpp .wblpp-look-xs-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type) {
        display: none;
    }

    .wblpp .wblpp-look-xs-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
    }

    .wblpp .wblpp-look-xs-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (scripting: enabled) and (min-width: 576px) and (max-width: 767.98px) {
    .wblpp .wblpp-look-sm-accordion:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type)::details-content {
        content-visibility: hidden;
    }

    .wblpp .wblpp-look-sm-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__list {
        display: flex;
    }

    .wblpp .wblpp-look-sm-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type) {
        display: none;
    }

    .wblpp .wblpp-look-sm-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
    }

    .wblpp .wblpp-look-sm-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (scripting: enabled) and (min-width: 768px) and (max-width: 991.98px) {
    .wblpp .wblpp-look-md-accordion:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type)::details-content {
        content-visibility: hidden;
    }

    .wblpp .wblpp-look-md-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__list {
        display: flex;
    }

    .wblpp .wblpp-look-md-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type) {
        display: none;
    }

    .wblpp .wblpp-look-md-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
    }

    .wblpp .wblpp-look-md-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (scripting: enabled) and (min-width: 992px) and (max-width: 1199.98px) {
    .wblpp .wblpp-look-lg-accordion:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type)::details-content {
        content-visibility: hidden;
    }

    .wblpp .wblpp-look-lg-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__list {
        display: flex;
    }

    .wblpp .wblpp-look-lg-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type) {
        display: none;
    }

    .wblpp .wblpp-look-lg-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
    }

    .wblpp .wblpp-look-lg-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (scripting: enabled) and (min-width: 1200px) and (max-width: 1399.98px) {
    .wblpp .wblpp-look-xl-accordion:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type)::details-content {
        content-visibility: hidden;
    }

    .wblpp .wblpp-look-xl-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__list {
        display: flex;
    }

    .wblpp .wblpp-look-xl-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type) {
        display: none;
    }

    .wblpp .wblpp-look-xl-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
    }

    .wblpp .wblpp-look-xl-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (scripting: enabled) and (min-width: 1400px) {
    .wblpp .wblpp-look-xxl-accordion:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type)::details-content {
        content-visibility: hidden;
    }

    .wblpp .wblpp-look-xxl-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__list {
        display: flex;
    }

    .wblpp .wblpp-look-xxl-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item:not(:first-of-type) {
        display: none;
    }

    .wblpp .wblpp-look-xxl-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part {
        margin-block-start: 0;
    }

    .wblpp .wblpp-look-xxl-tabs:not(.wblpp-tabs--ready) > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* The tab list's look (display: flex where it shows: not hidden, or in the first paint above). */
.wblpp .wblpp-tabs__list:not([hidden]) {
    display: flex;
}

.wblpp .wblpp-tabs__list {
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-block-end: 1rem;
    border-block-end: 1px solid var(--border-color);
}

.wblpp .wblpp-tabs__tab {
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-block-end: 3px solid transparent;
    background: none;
    color: var(--link-color);
    font: inherit;
    cursor: pointer;
}

.wblpp .wblpp-tabs__tab:active {
    background-color: var(--secondary-bg);
}

/* The chosen tab: its own colour, weight and a line under it, so the choice never rests on colour alone. */
.wblpp .wblpp-tabs__tab[aria-selected="true"] {
    color: var(--body-color);
    border-block-end-color: currentColor;
    font-weight: 600;
}

.wblpp .wblpp-tabs--as-tabs > .wblpp-tabs__item:not(.wblpp-tabs__item--current),
.wblpp .wblpp-tabs--as-tabs > .wblpp-tabs__item > .wblpp-tabs__summary {
    display: none;
}

.wblpp .wblpp-tabs--as-tabs > .wblpp-tabs__item > .wblpp-part {
    margin-block-start: 0;
}

.wblpp .wblpp-tabs--as-tabs > .wblpp-tabs__item > .wblpp-part > .wblpp-part__title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (forced-colors: active) {
    /* The other tabs' line takes the page's own colour (invisible), the chosen one Highlight; the band is the theme's own background there. */
    .wblpp .wblpp-tabs__tab {
        border-block-end-color: Canvas;
    }

    .wblpp .wblpp-tabs__tab[aria-selected="true"] {
        border-block-end-color: Highlight;
    }

    /* The band's own selector, so it outweighs the band rule above. */
    .wblpp .wblpp-row-full:is(.bg-body-secondary, .bg-body-tertiary, .bg-primary-subtle, .bg-secondary-subtle) {
        border-image: none;
    }

    .wblpp .wblpp-tabs__summary:focus-visible,
    .wblpp .wblpp-tabs__tab:focus-visible,
    .wblpp .wblpp-tabs--as-tabs > .wblpp-tabs__item > .wblpp-part:focus-visible {
        outline-color: Highlight;
    }

    /* The phone Add to cart bar's top line and shadow (Plan 5): the line takes the text colour, the shadow goes. */
    .wblpp .wblpp-buybar {
        border-block-start-color: CanvasText;
        box-shadow: none;
    }

    /* Its button's focus: the template's button focus is a shadow, which forced colours remove (found by BB10): an outline instead. */
    .wblpp .wblpp-buybar__go:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

/* Text sizes (wblpp-text; the values on wblpp-b-<uid>): the block's text takes --wblpp-fs, a fluid clamp() in rem from a 390 px to a 1400 px window.
   The browser's zoom (up to 500 %) reaches 200 % text at every window width. The visitor's text-size setting scales the rem part only, so at wide
   windows a doubled setting grows the presets at least 1.4 times (Display 1.42), not 2, and a custom range less, down to about 1.17 times at the
   2.5 ratio limit: growth at 1400 px = (32 + 9.82 (r - 1)) / (16 r) for a range whose largest is r times its smallest (D8). The title's heading
   (Phoca's .ph-header) takes the size too, whatever its level; the content sections' own headings keep theirs (heading level and size stay
   separate). Title and price may also set weight, line height and letter spacing (wblpp-fw, wblpp-lh, wblpp-ls). For the price, weight and
   letter spacing apply to the figure (.ph-price-brutto, .ph-price-netto); the size and the line height apply to the whole price block. */
.wblpp .wblpp-text,
.wblpp .wblpp-text .ph-header {
    font-size: var(--wblpp-fs);
}

.wblpp .wblpp-fw .ph-header,
.wblpp .wblpp-fw .ph-price-brutto,
.wblpp .wblpp-fw .ph-price-netto {
    font-weight: var(--wblpp-fw);
}

.wblpp .wblpp-lh .ph-header,
.wblpp .wblpp-lh .ph-item-price-box {
    line-height: var(--wblpp-lh);
}

.wblpp .wblpp-ls .ph-header,
.wblpp .wblpp-ls .ph-price-brutto,
.wblpp .wblpp-ls .ph-price-netto {
    letter-spacing: var(--wblpp-ls);
}

/* ===== Module positions (Plan 5) ===== */
/* A module position block prints its modules in a plain box (.wblpp-block--position), or nothing when the position has none. Whether it has any is
   known only after Phoca's view printed (the system plugin prints the modules then, so a page in Joomla's view cache still shows today's modules),
   so a column whose only parts were empty positions is left empty, and a row with no part at all: neither shows (F10). The preview's placeholders
   count as parts. Only our own grid (Render\Renderer::page() prints .wblpp-row or .wblpp-row-full > .row.g-3 > the columns): Phoca's own empty
   spacer columns inside a block (layouts/form_question.php line 28) are never touched. A browser without :has() shows such a row's padding; nothing else. */
.wblpp :is(.wblpp-row, .wblpp-row-full) > .row > :empty {
    display: none;
}

.wblpp :is(.wblpp-row, .wblpp-row-full):not(:has(.wblpp-block, .wblpp-preview-empty)) {
    display: none;
}

/* ===== Phone Add to cart bar (Plan 5) ===== */
/* The bar Render\Renderer::buyBar prints as the product box's last child. Shown below 768 px (Bootstrap's md) where scripts run; never otherwise.
   It sits at the bottom of the window while the product box is on screen (sticky inside the box: it never covers the footer) and its space at the
   end of the box is kept from the first paint, so showing it moves nothing (CLS 0, F12). Off (wblpp-buybar--off, set by the server, cleared by the
   script): invisible, not focusable, out of the accessibility tree. No motion. */
.wblpp .wblpp-buybar {
    display: none;
}

@media (scripting: enabled) and (max-width: 767.98px) {
    .wblpp .wblpp-buybar {
        position: sticky;
        inset-block-end: 0;
        z-index: 1020;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 1rem;
        margin-block-start: 1rem;
        /* 3.5rem at the inline end stay free for Cassiopeia's Back to top link (fixed, 1 rem from the bottom and the end, above everything): its
           box and a gap, so it never covers the bar's button (WCAG 2.5.8, 2.4.11; F18). Cassiopeia's link itself is never restyled. */
        padding-block: 0.5rem;
        padding-inline: 1rem 3.5rem;
        background-color: var(--body-bg);
        color: var(--body-color);
        border-block-start: 1px solid var(--border-color);
        box-shadow: 0 -0.25rem 0.75rem rgb(0 0 0 / 0.08);
    }

    .wblpp .wblpp-buybar--off {
        visibility: hidden;
    }

    .wblpp .wblpp-buybar__price {
        margin: 0;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .wblpp .wblpp-buybar__go {
        min-block-size: 2.75rem;
        min-inline-size: 2.75rem;
    }

    /* While the bar shows, a focused element the browser scrolls to stops above it (WCAG 2.4.11). Generous on purpose: the bar may wrap at large
       text sizes, and more space here costs nothing. */
    html.wblpp-buybar-on {
        scroll-padding-block-end: 6rem;
    }
}