/* The structure the widgets need, and nothing else.

   In @layer haya-defaults beside pb-behaviors.css, for the reason CMS-L11
   recorded: an unlayered rule beats a layered one whatever the load order, so
   a sheet outside the layers would quietly outrank both the site's tokens and
   the styles an author wrote in the panel.

   That layering is the whole contract here. Nothing in this file decides a
   colour, a font, a spacing or a radius that the theme has an opinion about —
   it decides what is a row and what is a column, what scrolls and what wraps,
   and which of a tab strip's panels is showing. Everything visible is a token
   the site owns or a declaration the style panel can overrule.

   Three widgets work without any JavaScript on purpose, and it is worth
   saying how, because each looks like a library that is missing:

   * the accordion is <details>, with the exclusive behaviour coming from the
     element's own `name` attribute;
   * the tabs are radio inputs, because "one of these at a time" is what a
     radio group is, and the browser gives keyboard movement for free;
   * the modal is a checkbox, since <dialog> cannot be opened without a
     script, and a button that does nothing until one arrives is worse than a
     panel with no focus trap. */

@layer haya-defaults {

    /* ── divider ─────────────────────────────────────────────────────────── */

    .pb-divider {
        border-block-start: var(--pb-divider-thickness, 1px) var(--pb-divider-style, solid) currentColor;
        color: var(--color-border, rgba(0, 0, 0, 0.12));
        width: 100%;
    }

    .pb-divider--vertical {
        border-block-start: 0;
        border-inline-start: var(--pb-divider-thickness, 1px) var(--pb-divider-style, solid) currentColor;
        width: auto;
        min-height: 1.5em;
        align-self: stretch;
    }

    .pb-divider--labelled {
        display: flex;
        align-items: center;
        gap: 8px;
        border: 0;
    }

    .pb-divider-line {
        flex: 1 1 auto;
        border-block-start: var(--pb-divider-thickness, 1px) var(--pb-divider-style, solid) currentColor;
    }

    .pb-divider-label {
        flex: 0 0 auto;
        color: var(--color-text-muted, inherit);
    }

    /* ── icon ────────────────────────────────────────────────────────────── */

    .pb-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit;
    }

    /* ── image ───────────────────────────────────────────────────────────── */

    /* The node is the <figure>, so the style panel's "object fit" lands on
       it; the picture inherits it (CMS-L41 task 11). Widgets that frame a
       picture — gallery, slider, card, testimonial — set their default fit on
       the figure too, so the author's own value replaces theirs. */
    .pb-image > img,
    .pb-image > a,
    .pb-image > a > img {
        object-fit: inherit;
        object-position: inherit;
    }

    /* Only once the author has given the figure a size or a fit does the
       picture fill it — a column, so a caption keeps its line under it.
       Without one the picture keeps its natural size: a small logo is not
       stretched across the page. */
    .pb-image--sized {
        display: flex;
        flex-direction: column;
    }

        .pb-image--sized > img,
        .pb-image--sized > a {
            display: block;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
        }

        .pb-image--sized > a > img {
            display: block;
            width: 100%;
            height: 100%;
        }

    /* ── video ───────────────────────────────────────────────────────────── */

    .pb-video {
        display: block;
        width: 100%;
        height: auto;
    }

    /* ── list ────────────────────────────────────────────────────────────── */

    .pb-list {
        padding-inline-start: 1.4em;
        margin-block: 0;
    }

    .pb-list--disc {
        list-style: disc;
    }

    .pb-list--decimal {
        list-style: decimal;
    }

    .pb-list--none,
    .pb-list--check {
        list-style: none;
        padding-inline-start: 0;
    }

    /* A tick drawn in text rather than an icon file: the list is content, and
       a marker that needs a network request is a marker that sometimes is not
       there when the sentence is read. A list whose entries carry an icon
       widget uses "none" — the icon is the marker, and its colour is its own
       (CMS-L41 task 11). */
    .pb-list--check > li {
        padding-inline-start: 1.6em;
        position: relative;
    }

        .pb-list--check > li::before {
            content: "✓";
            position: absolute;
            inset-inline-start: 0;
            color: var(--color-primary, currentColor);
        }

    /* An entry's text sits on the marker's line: the text widget is a block,
       and its own paragraph margins would push it below the bullet. */
    .pb-list > li > [data-pb] > p:only-child {
        margin: 0;
    }

    /* ── menu ────────────────────────────────────────────────────────────── */

    .pb-menu-list {
        display: flex;
        justify-content: var(--pb-menu-align, flex-start);
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
    }

    .pb-menu--vertical .pb-menu-list {
        flex-direction: column;
        align-items: var(--pb-menu-align, flex-start);
    }

    /* Each entry is an <li> holding a button the starter draws as plain text
       (CMS-L41 task 11). The underline on hover is the one thing left here:
       a link that does not answer the pointer reads as a label. */
    .pb-menu-list > li .pb-button:hover {
        text-decoration: underline;
    }

    .pb-menu-list > li > [data-pb] > p:only-child {
        margin: 0;
    }

    /* Submenus: a menu inside an entry (user decision 2026-10-13). Under a
       horizontal bar it drops down as a panel; a level inside that panel
       opens in place, indented under its entry, rather than flying out
       sideways — a flyout from a bar near the page's edge would leave the
       screen, and only a script could know to flip it. Under a vertical menu
       every level is an indented list. Hover and keyboard focus open it. */

    .pb-menu-list > li {
        position: relative;
    }

    /* Closed is display: none, not hidden: a hidden panel still takes room
       past the page's edge and gives the page a sideways scrollbar. */
    .pb-menu--flyout {
        display: none;
        position: absolute;
        inset-block-start: 100%;
        inset-inline-start: 0;
        z-index: 40;
        min-width: 220px;
        padding: 8px;
        border: 1px solid var(--color-border, rgba(0, 0, 0, .08));
        border-radius: 12px;
        background-color: var(--color-bg-card, #ffffff);
        color: var(--color-text-dark, inherit);
        box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
        opacity: 1;
        transform: none;
        transition: opacity .15s ease, transform .15s ease, display .15s allow-discrete;
    }

    .pb-menu-list > li:hover > .pb-menu--flyout,
    .pb-menu-list > li:focus-within > .pb-menu--flyout,
    .pb-menu--flyout.is-open {
        display: block;
    }

    @starting-style {
        .pb-menu-list > li:hover > .pb-menu--flyout,
        .pb-menu-list > li:focus-within > .pb-menu--flyout {
            opacity: 0;
            transform: translateY(6px);
        }
    }

    /* A level inside a panel opens in place, under its entry. */
    .pb-menu--flyout .pb-menu--flyout {
        position: static;
        min-width: 0;
        padding: 0;
        padding-inline-start: 12px;
        border: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .pb-menu--sub > .pb-menu-list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .pb-menu--flyout > .pb-menu-list > li > .pb-button {
        display: block;
        padding: 8px 12px;
        border-radius: 8px;
        white-space: nowrap;
    }

    .pb-menu--flyout > .pb-menu-list > li > .pb-button:hover {
        background-color: var(--color-bg-gray, rgba(0, 0, 0, .04));
        text-decoration: none;
    }

    .pb-menu--inline {
        margin-block-start: 6px;
        padding-inline-start: 16px;
    }

    /* The caret on an entry that opens something. Physical borders on
       purpose: the chevron is a shape rotated into place, and logical ones
       would turn it sideways in a right-to-left page. */
    .pb-menu-list > li:has(> .pb-menu--sub) > .pb-button::after {
        content: "";
        display: inline-block;
        width: .4em;
        height: .4em;
        margin-inline-start: .5em;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-.2em) rotate(45deg);
    }

    /* Inside a panel the caret sits at the row's far end. */
    .pb-menu--flyout > .pb-menu-list > li:has(> .pb-menu--sub) > .pb-button::after {
        float: inline-end;
        margin-block-start: .45em;
    }

    /* A touch screen has no hover: every level is shown, indented. */
    @media (hover: none) {
        .pb-menu--flyout {
            display: block;
            position: static;
            min-width: 0;
            padding: 4px 0 0;
            padding-inline-start: 12px;
            border: 0;
            background-color: transparent;
            box-shadow: none;
        }
    }

    /* ── gallery ─────────────────────────────────────────────────────────── */

    .pb-gallery {
        display: grid;
        grid-template-columns: repeat(var(--pb-gallery-columns, 3), minmax(0, 1fr));
        gap: var(--pb-gallery-gap, 8px);
    }

    /* A cell is an item slot holding an image widget (CMS-L41 task 11). The
       shape is the gallery's, so every picture in the grid is the same box
       whatever its file; the caption shows only when the gallery says so. */
    .pb-gallery > [data-pb] {
        min-width: 0;
    }

    .pb-gallery > [data-pb] figure {
        margin: 0;
        object-fit: cover;
    }

    .pb-gallery > [data-pb] img,
    .pb-gallery > [data-pb] .pb-image-placeholder {
        display: block;
        width: 100%;
        aspect-ratio: var(--pb-gallery-ratio, 4 / 3);
    }

    .pb-gallery > [data-pb] figcaption {
        font-size: 0.875em;
        color: var(--color-text-muted, inherit);
        padding-block-start: 4px;
    }

    .pb-gallery:not(.pb-gallery--captions) > [data-pb] figcaption {
        display: none;
    }

    /* ── slider ──────────────────────────────────────────────────────────── */

    .pb-slider-track {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    /* A slide is an item slot the author builds in (CMS-L41 task 11): at
       least as tall as the strip, and a picture alone in it fills it. */
    .pb-slider-track > [data-pb] {
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-width: 0;
        min-height: var(--pb-slider-height, 360px);
        box-sizing: border-box;
    }

    .pb-slider-track > [data-pb] figure {
        margin: 0;
        object-fit: cover;
    }

    .pb-slider-track > [data-pb] img,
    .pb-slider-track > [data-pb] .pb-image-placeholder {
        display: block;
        width: 100%;
        height: var(--pb-slider-height, 360px);
    }

    .pb-slider-track > [data-pb] figcaption {
        font-size: 0.875em;
        color: var(--color-text-muted, inherit);
        padding-block-start: 4px;
    }

    .pb-slider-track > [data-pb] [data-pb] > p:only-child {
        margin: 0;
    }

    /* A reader who asked for less motion gets the jump, not the glide. */
    @media (prefers-reduced-motion: reduce) {
        .pb-slider-track {
            scroll-behavior: auto;
        }
    }

    /* ── accordion ───────────────────────────────────────────────────────── */

    .pb-accordion-item {
        border-block-end: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    }

    /* The summary holds a title section the author built, so the browser's
       own triangle — which sits on a line of its own beside a block — gives
       way to a chevron drawn here, at the end of the row (CMS-L41 task 11). */
    .pb-accordion-title {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        list-style: none;
    }

        .pb-accordion-title::-webkit-details-marker {
            display: none;
        }

        .pb-accordion-title > [data-pb] {
            flex: 1 1 auto;
            min-width: 0;
        }

        .pb-accordion-title::after {
            content: "";
            flex: none;
            width: 0.5em;
            height: 0.5em;
            border-inline-end: 2px solid currentColor;
            border-block-end: 2px solid currentColor;
            transform: rotate(45deg);
            opacity: 0.6;
            transition: transform 150ms ease;
        }

    .pb-accordion-item[open] > .pb-accordion-title::after {
        transform: rotate(-135deg);
    }

    .pb-accordion-title > [data-pb] p:only-child,
    .pb-accordion-body > [data-pb] > [data-pb] > p:only-child {
        margin: 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .pb-accordion-title::after {
            transition: none;
        }
    }

    /* ── tabs ────────────────────────────────────────────────────────────── */

    /* Radios first, then the strip of titles, then the panels: CSS only looks
       forward, so a checked radio can reach the title and the panel at its
       position through `~`. One rule per position, up to the item limit
       (WidgetItemSlots.MaxItems) — a tab strip has a handful, and the limit is
       enforced where tabs are added (CMS-L41 task 11). */
    .pb-tabs {
        display: flex;
        flex-direction: column;
    }

    /* Off the screen rather than display:none, so the radio stays operable by
       keyboard and its focus ring can be drawn on the title. */
    .pb-tab-radio {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* One line, never two (CMS-L41 task 11): titles that do not fit scroll
       sideways inside the strip, in either direction, rather than wrapping
       into a second row that reads as a second set of tabs. "safe" keeps a
       centred or end-aligned strip from pushing its first titles out of
       reach once it overflows. The baseline is a shadow, not a border, so
       the active title's underline paints over it without the -1px overlap
       a scrolling box would clip. */
    .pb-tab-bar {
        display: flex;
        flex-wrap: nowrap;
        justify-content: safe var(--pb-tabs-align, flex-start);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
        box-shadow: inset 0 -1px 0 var(--color-border, rgba(0, 0, 0, 0.12));
    }

    /* The label is only the click target; the section inside it is the tab
       the author styles, so the label lays out as if it were not there. */
    .pb-tab-label {
        display: contents;
        cursor: pointer;
    }

        .pb-tab-label > [data-pb] {
            flex: none;
            white-space: nowrap;
            cursor: pointer;
            border-block-end: 2px solid transparent;
            color: var(--color-text-muted, inherit);
        }

        .pb-tab-label > [data-pb] p:only-child {
            margin: 0;
        }

    .pb-tab-panel {
        display: none;
    }

    .pb-tab-radio:nth-of-type(1):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(1) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(1):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(1) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(1):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(1) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(2):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(2) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(2):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(2) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(2):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(2) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(3):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(3) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(3):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(3) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(3):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(3) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(4):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(4) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(4):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(4) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(4):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(4) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(5):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(5) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(5):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(5) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(5):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(5) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(6):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(6) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(6):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(6) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(6):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(6) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(7):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(7) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(7):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(7) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(7):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(7) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(8):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(8) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(8):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(8) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(8):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(8) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(9):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(9) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(9):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(9) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(9):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(9) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(10):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(10) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(10):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(10) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(10):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(10) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(11):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(11) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(11):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(11) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(11):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(11) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(12):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(12) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(12):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(12) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(12):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(12) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(13):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(13) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(13):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(13) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(13):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(13) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(14):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(14) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(14):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(14) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(14):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(14) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(15):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(15) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(15):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(15) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(15):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(15) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(16):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(16) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(16):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(16) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(16):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(16) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(17):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(17) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(17):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(17) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(17):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(17) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(18):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(18) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(18):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(18) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(18):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(18) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(19):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(19) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(19):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(19) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(19):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(19) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    .pb-tab-radio:nth-of-type(20):checked ~ .pb-tab-panels > .pb-tab-panel:nth-child(20) {
        display: block;
    }

    .pb-tab-radio:nth-of-type(20):checked ~ .pb-tab-bar > .pb-tab-label:nth-child(20) > [data-pb] {
        color: inherit;
        border-block-end-color: var(--color-primary, currentColor);
    }

    .pb-tab-radio:nth-of-type(20):focus-visible ~ .pb-tab-bar > .pb-tab-label:nth-child(20) > [data-pb] {
        outline: 2px solid var(--color-primary, currentColor);
        outline-offset: -2px;
    }

    /* ── table ───────────────────────────────────────────────────────────── */

    .pb-table-scroll {
        overflow-x: auto;
    }

    .pb-table {
        width: 100%;
        border-collapse: collapse;
    }

        .pb-table th,
        .pb-table td {
            padding: 8px 10px;
            text-align: start;
        }

    .pb-table--bordered th,
    .pb-table--bordered td {
        border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    }

    .pb-table--striped tbody tr:nth-child(even) {
        background: var(--color-bg-gray, rgba(0, 0, 0, 0.03));
    }

    /* ── card ────────────────────────────────────────────────────────────── */

    /* Two panels the author builds in — media and body (CMS-L41 task 11). */
    .pb-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
    }

        .pb-card > [data-pb] {
            min-width: 0;
        }

    .pb-card--horizontal {
        flex-direction: row;
        align-items: flex-start;
    }

        .pb-card--horizontal > [data-pb]:first-child {
            flex: 0 0 40%;
        }

    .pb-card figure {
        margin: 0;
        object-fit: cover;
    }

    .pb-card img {
        display: block;
        width: 100%;
    }

    .pb-card h3[data-pb] {
        margin: 0;
    }

    .pb-card [data-pb] > p:only-child {
        margin: 0;
    }

    .pb-card .pb-button {
        align-self: flex-start;
    }

    /* ── testimonial ─────────────────────────────────────────────────────── */

    .pb-testimonial {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
    }

    .pb-testimonial--horizontal {
        flex-direction: row;
        align-items: flex-start;
    }

    /* The portrait is the media slot's image widget (CMS-L41 task 11): its
       size and corners are written on the image node, and the picture fills
       whatever box that is. */
    .pb-testimonial > [data-pb] {
        flex: 0 0 auto;
    }

    .pb-testimonial > [data-pb] figure {
        margin: 0;
        object-fit: cover;
    }

    .pb-testimonial > [data-pb] img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .pb-testimonial-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }

    .pb-testimonial blockquote[data-pb] {
        margin: 0;
    }

    .pb-testimonial-body [data-pb] > p:only-child {
        margin: 0;
    }

    /* ── rating ──────────────────────────────────────────────────────────── */

    /* Stars in the node's own text colour (CMS-L41 task 11): a filled one is
       the colour, an empty one the same colour faded — so recolouring the
       node recolours both, and they stay a pair. */
    .pb-rating {
        display: inline-flex;
        gap: 2px;
        line-height: 1;
        color: var(--color-warning, currentColor);
    }

    .pb-rating-star:not(.is-on) {
        opacity: 0.25;
    }


    /* ── map ─────────────────────────────────────────────────────────────── */

    .pb-map-frame {
        display: block;
        width: 100%;
        height: var(--pb-map-height, 360px);
        border: 0;
    }

    /* ── modal ───────────────────────────────────────────────────────────── */

    .pb-modal-toggle {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .pb-modal-trigger {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }

    .pb-modal-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    .pb-modal-toggle:checked ~ .pb-modal-backdrop {
        display: flex;
    }

    /* The dismiss surface is the backdrop itself, as a label: clicking away
       closes, which is what every reader expects and what no script is
       needed for. */
    .pb-modal-dismiss {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        cursor: default;
    }

    .pb-modal-panel {
        position: relative;
        display: flex;
        flex-direction: column;
        z-index: 1;
        max-height: 90vh;
        overflow: auto;
        width: 100%;
        background: var(--color-bg-card, #fff);
        color: var(--color-text-dark, inherit);
        border-radius: var(--radius-md, 8px);
    }

    .pb-modal-panel--small {
        max-width: 380px;
    }

    .pb-modal-panel--medium {
        max-width: 560px;
    }

    .pb-modal-panel--large {
        max-width: 880px;
    }

    .pb-modal-panel--full {
        max-width: none;
        height: 90vh;
    }

    /* The header, the body and the action bar are slots of real widgets
       (CMS-L41 task 11). Their padding and dividing lines are defaults on the
       slot itself, in this layer, so the author's own values for that part
       replace them — the part is the box the author styles, edge to edge. */
    .pb-modal-header > [data-pb] {
        padding-block: 12px;
        padding-inline: 16px 44px;
        border-block-end: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
        font-weight: 600;
    }

    .pb-modal-body {
        flex: 1 1 auto;
        min-height: 0;
    }

        .pb-modal-body > [data-pb-slot] > [data-pb] {
            padding: 16px;
        }

    .pb-modal-actions > [data-pb] {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        padding: 12px 16px;
        border-block-start: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    }

    /* A lone paragraph in the button or the header sits on the line. */
    .pb-modal-trigger [data-pb] > p:only-child,
    .pb-modal-header [data-pb] > p:only-child {
        margin: 0;
    }

    /* Over the header's end, so the header slot runs the panel's full width
       and its background reaches the corner. */
    .pb-modal-close {
        position: absolute;
        inset-block-start: 10px;
        inset-inline-end: 14px;
        z-index: 1;
        cursor: pointer;
        font-size: 20px;
        line-height: 1;
    }

    /* ── add to cart, when the product cannot be bought (CMS-L38-5) ─────── */

    .product-unavailable {
        display: inline-block;
        margin: 0;
        padding: 0.6em 1em;
        border-radius: var(--radius-md, 8px);
        background: color-mix(in srgb, currentColor 8%, transparent);
        font-weight: 600;
    }

    /* The cart menu (CMS-L58). The control's own look travels with the
       storefront component (CartMenu.razor.css); this only keeps the widget
       box from stretching the trigger across a header row. */
    .pb-cart-menu {
        display: inline-flex;
        align-items: center;
    }

    /* The account menu (CMS-L30). Structure only, like every rule in this sheet:
       what it looks like is the theme's and the author's, and pb-design.css puts
       the tokens on it. The sign-out button is a form control talked back into
       sitting in a row of links. */
    .pb-account-menu {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .pb-account-menu__out {
        display: flex;
        margin: 0;
    }

    .pb-account-menu__out button {
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        color: inherit;
        cursor: pointer;
    }

    /* ── The account menu ─────────────────────────────────────────────────
       Inline is a header's row; stacked is a dashboard's sidebar. The rules
       are structure and the colours are tokens, so a shop that picked its
       own palette keeps its sidebar in it. */

    .pb-account-menu__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border: 0;
        border-radius: var(--radius-sm);
        background: none;
        font: inherit;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
    }

        .pb-account-menu__link:hover {
            background: var(--surface-muted, rgba(0, 0, 0, .04));
        }

        /* Where the reader is. A colour alone would leave this invisible to
           anyone who cannot see it, which is why the markup also carries
           aria-current. */
        .pb-account-menu__link--current {
            background: var(--surface-muted, rgba(0, 0, 0, .06));
            font-weight: 600;
            color: var(--color-text-link);
        }

    .pb-account-menu--stacked {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* The inline rule above wraps, which is right for a header's row and
           wrong here: a *column* container that wraps lays its items out in
           columns, so instead of an over-wide item shrinking, the container
           grows to fit it. That is what put a long e-mail address 33px
           outside the sidebar. */
        flex-wrap: nowrap;
        gap: 2px;
    }

        .pb-account-menu--stacked .pb-account-menu__link {
            justify-content: flex-start;
            width: 100%;
            padding: 10px 12px;
        }

        .pb-account-menu--stacked .pb-account-menu__out {
            display: block;
        }

    .pb-account-menu__who {
        display: flex;
        align-items: center;
        gap: 10px;
        /* Without this the block is as wide as the longest word in it and
           pushes out of the sidebar: a flex item's default min-width is its
           content, so the ellipsis below never gets a chance to apply. An
           e-mail address as a display name is the ordinary case, not the
           edge one — somebody who has not set a name yet. */
        min-width: 0;
        padding: 4px 4px 12px;
        margin-block-end: 8px;
        border-block-end: 1px solid var(--color-border);
    }

    .pb-account-menu__avatar {
        display: grid;
        /* It is a circle at a fixed size, so it must not be squeezed when the
           name beside it is long. */
        flex: 0 0 auto;
        place-items: center;
        inline-size: 36px;
        block-size: 36px;
        border-radius: 50%;
        background: var(--surface-muted, #eef4ff);
        color: var(--color-text-link);
        font-weight: 600;
    }

    .pb-account-menu__name {
        font-size: 14px;
        font-weight: 600;
        /* A long name shortens rather than pushing the sidebar wider.
           `min-width: 0` on the row above is not enough on its own: a flex
           item's floor is its content, and the name is the item, so the floor
           has to be lifted here too. `flex: 1 1 0` rather than `auto` for the
           same reason — an auto basis is the content's width, which is the
           thing being contained. Measured, not guessed: it was 34px outside
           the sidebar, spilling past its left edge. */
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@layer haya-defaults { .pb-text { white-space: pre-wrap; } }

/* ── site credit (SiteCredit) ───────────────────────────────────────────── */

@layer haya-defaults {
    .pb-site-credit {
        margin: 0;
        font-size: 0.8125rem;
        color: var(--color-text-muted, #6b7280);
    }

    .pb-site-credit a,
    .pb-site-credit-name {
        color: inherit;
        font-weight: 600;
        text-decoration: none;
    }

    .pb-site-credit a:hover {
        text-decoration: underline;
    }

    /* What the storefront draws under a footer that does not carry the
       widget: a page built without the agent, a hidden footer, an old one. */
    .store-fallback-credit {
        padding-block: 12px;
        padding-inline: 16px;
        text-align: center;
    }
}

/* Outside the layers on purpose, and the one rule in this file that is: an
   unlayered !important outranks everything an author can write, because the
   style panel and the agent cannot emit !important at all. Only the
   properties that would make the line vanish are held; how it looks stays
   the author's. */
[data-pb-credit] {
    visibility: visible !important;
    opacity: 1 !important;
    clip-path: none !important;
    content-visibility: visible !important;
}

/* The form widget (CMS-L76-1): a site form from the Forms module. Theme
   tokens only, in the defaults layer, so the style panel and the page's own
   CSS always win. */
@layer haya-defaults {
    .pb-form-body {
        display: grid;
        gap: 1rem;
    }

    .pb-form-field {
        display: grid;
        gap: 0.35rem;
    }

    .pb-form-label {
        font-weight: var(--font-weight-h3, 600);
        color: var(--color-text-dark);
    }

    .pb-form-required {
        color: var(--color-error);
    }

    .pb-form-input {
        width: 100%;
        box-sizing: border-box;
        padding: 0.65rem 0.8rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-bg-card);
        color: var(--color-text-dark);
        font: inherit;
    }

    .pb-form-input:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 1px;
    }

    .pb-form-field.is-invalid .pb-form-input {
        border-color: var(--color-error);
    }

    .pb-form-check {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        cursor: pointer;
    }

    .pb-form-help {
        color: var(--color-text-muted);
    }

    .pb-form-error {
        color: var(--color-error);
    }

    .pb-form-error:empty {
        display: none;
    }

    .pb-form-message:empty {
        display: none;
    }

    .pb-form-message--sent {
        padding: 1rem;
        border: 1px solid var(--color-primary);
        border-radius: var(--radius-md);
    }

    .pb-form-message--error,
    .pb-form-message--closed {
        color: var(--color-error);
    }

    .pb-form-captcha-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .pb-form-captcha-image svg {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-md);
    }

    .pb-form-captcha-refresh {
        background: none;
        border: 0;
        padding: 0;
        color: var(--color-text-link);
        text-decoration: underline;
        cursor: pointer;
        font: inherit;
    }

    /* Off-screen, not display:none: some bots skip hidden fields. */
    .pb-form-hp {
        position: absolute;
        inset-inline-start: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .pb-form-empty {
        padding: 1rem;
        border: 1px dashed var(--color-border);
        border-radius: var(--radius-md);
        color: var(--color-text-muted);
        text-align: center;
    }

    .pb-form-submit {
        justify-self: start;
    }
}