/* The readable baseline every page starts from (CMS-L16).

   pb-widgets.css deliberately decides structure and nothing else; until this
   sheet existed, nothing consumed the theme's design tokens at all — the type
   scale, the section rhythm, the button paddings and the card surface were
   emitted into :root and read by nobody, so an unstyled page rendered as bare
   browser HTML: default-size headings, hyperlink-blue CTAs, full-bleed
   sections. Every author — human or agent — had to re-derive the basics on
   every node before the page looked like anything.

   This sheet is where those tokens land on elements. Three rules govern it:

   * Only tokens. No literal colour, size or radius appears here — a value the
     theme has an opinion about is written as var(--…), so re-theming a site
     restyles this baseline with it. The single exception is a plain number
     that is not a design decision (a transition duration, min-width: 0).

   * Only page nodes. Everything is scoped to the page document — [data-pb],
     [data-pb-root] and the pb-* classes — so site chrome and admin screens
     are untouched. Selectors sit inside :where() to keep specificity at the
     floor: any page style the author writes must win even before the layer
     order settles it.

   * In @layer haya-defaults, like the sheets beside it: the site's tokens and
     the page's own styles always take precedence (CMS-L11's ordering), so
     nothing here can fight an author. An unlayered rule would silently beat
     both — the cascade lesson this repo already paid for once. */

@layer haya-defaults, haya-tokens, haya-page, haya-node;

@layer haya-defaults {

    /* ── the page's own text ─────────────────────────────────────────────── */

    /* Root sections carry the page's base type, whatever tag they render as.
       Everything inside inherits it, so prose matches the theme without any
       node naming a font size. */
    :where([data-pb-root]) {
        font-size: var(--font-size-body);
        line-height: var(--line-height);
    }

    /* The theme's type scale, applied to headings wherever they occur in the
       document: a heading widget (the element itself carries data-pb) and a
       heading inside rich text (a descendant of the widget's node) read the
       same rule. h4–h6 share the h3 weight because the theme defines three
       heading weights, not six. */
    :where(h1[data-pb], [data-pb] h1) {
        font-size: var(--font-size-h1);
        font-weight: var(--font-weight-h1);
        line-height: var(--line-height-heading);
        margin-block: 0 0.5em;
    }

    :where(h2[data-pb], [data-pb] h2) {
        font-size: var(--font-size-h2);
        font-weight: var(--font-weight-h2);
        line-height: var(--line-height-heading);
        margin-block: 0 0.5em;
    }

    :where(h3[data-pb], [data-pb] h3) {
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-h3);
        line-height: var(--line-height-heading);
        margin-block: 0 0.5em;
    }

    :where(h4[data-pb], [data-pb] h4) {
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h3);
        line-height: var(--line-height-heading);
        margin-block: 0 0.5em;
    }

    :where(h5[data-pb], [data-pb] h5) {
        font-size: var(--font-size-h5);
        font-weight: var(--font-weight-h3);
        line-height: var(--line-height-heading);
        margin-block: 0 0.5em;
    }

    :where(h6[data-pb], [data-pb] h6) {
        font-size: var(--font-size-h6);
        font-weight: var(--font-weight-h3);
        line-height: var(--line-height-heading);
        margin-block: 0 0.5em;
    }

    /* Prose links follow the theme; the CTA button below opts out by class. */
    :where([data-pb]) :where(a:not(.pb-button)) {
        color: var(--color-text-link);
    }

    /* A visited link keeps the same appearance as an unvisited one. */
    :where([data-pb]) :where(a:not(.pb-button):visited) {
        color: var(--color-text-link);
    }

    /* ── rhythm and width ────────────────────────────────────────────────── */

    /* Top-level sections get the theme's vertical rhythm. Only the section
       tag: a root header, footer or nav merged in from the layout is chrome
       with its own geometry and must not inherit an 80px band. */
    :where(section[data-pb-root]:not([data-pb-no-default-padding])) {
        padding: var(--section-padding-y) var(--section-padding-x);
    }

    /* The container widget is the page's measure: content inside it stops at
       the site's design width and centres. The builder's library tile writes
       the same two declarations onto a section preset; this makes the widget
       mean it by default, for authors who never open the library — the AI
       included. */
    :where(.pb-container) {
        max-width: var(--design-width);
        margin-inline: auto;
    }

    /* A column is a flex child; without this, one long word makes it wider
       than its track and the layout the author designed shears. */
    :where(.pb-column) {
        min-width: 0;
    }

    /* An image never overflows the box the author gave it. */
    :where([data-pb] img, img[data-pb]) {
        max-width: 100%;
        height: auto;
    }

    /* ── the CTA button ──────────────────────────────────────────────────── */

    /* Until this rule, .pb-button had no declaration anywhere in the product
       and the page's most conversion-critical widget rendered as an
       underlined hyperlink. */
    /* B09: padding counts inside the box everywhere on the page, so a button
       or a column with width:100% and padding does not run off a 390px
       screen. The storefront never had a reset; the admin's own reset is
       kept off the canvas on purpose (CMS-L41), so the page's defaults carry
       it. Zero specificity: any authored declaration wins. */
    :where([data-pb-root]) :where(*, *::before, *::after) {
        box-sizing: border-box;
    }

    :where(a.pb-button) {
        display: inline-block;
        max-width: 100%;
        background-color: var(--color-primary);
        color: var(--color-text-light);
        padding: var(--button-padding-y) var(--button-padding-x);
        border-radius: var(--radius-md);
        font-weight: var(--font-weight-h3);
        line-height: var(--line-height-heading);
        text-decoration: none;
        transition: background-color 0.15s ease;
    }

    :where(a.pb-button:visited) {
        color: var(--color-text-light);
        text-decoration: none;
    }

    :where(a.pb-button):hover {
        background-color: var(--color-primary-dark);
    }

    /* ── the product page's own pieces (2026-11-01) ──────────────────────── */

    /* Add to basket. Its only rule lived in the built-in product page's scoped
       sheet, so on an author's page the widget was a bare browser button —
       the .pb-button story again, on the button that takes the money. The
       built-in page keeps its own look: its scoped rule outranks this floor,
       and it is not inside .pb-add-to-cart. */
    :where(.pb-add-to-cart .btn-basket) {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        max-width: 100%;
        border: none;
        cursor: pointer;
        font: inherit;
        font-weight: var(--font-weight-h3);
        line-height: var(--line-height-heading);
        background-color: var(--color-primary);
        color: var(--color-text-light);
        padding: var(--button-padding-y) var(--button-padding-x);
        border-radius: var(--radius-md);
        transition: background-color 0.15s ease;
    }

    :where(.pb-add-to-cart .btn-basket):hover {
        background-color: var(--color-primary-dark);
    }

    :where(.pb-add-to-cart .btn-basket):focus-visible {
        outline: var(--border-width) solid var(--color-primary-dark);
        outline-offset: var(--border-width);
    }

    /* The basket glyph. The icon font has no "basket" glyph — the class never
       drew anything, and the gap above would have pushed the label off centre
       for an empty box — so the shipped line icon is painted in the button's
       own text colour. Relative to this sheet, so it resolves wherever the
       sheet is served from. */
    :where(.pb-add-to-cart .icon-basket) {
        display: inline-block;
        flex: none;
        inline-size: 1em;
        block-size: 1em;
        background-color: currentColor;
        mask: url("icons/lucide/shopping-cart.svg") center / contain no-repeat;
    }

    /* The answer in the button's place when it cannot be bought (CMS-L38-5).
       pb-widgets.css draws its chip; this gives it the theme's quiet voice. */
    :where([data-pb].product-unavailable, [data-pb] .product-unavailable) {
        color: var(--color-text-muted);
        font-size: var(--font-size-small);
    }

    /* The product's name. Its size is the heading rule's for the element the
       author chose; a paragraph chosen for it still reads as a title. No
       colour: it inherits, so a title on a dark band stays legible. */
    :where(.pb-product-title) {
        margin-block: 0 var(--spacing-sm);
    }

    :where(p.pb-product-title) {
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-h3);
        line-height: var(--line-height-heading);
    }

    /* The product's description, as the merchant formatted it: paragraphs
       apart, lists indented, nothing trailing below the last block. */
    :where(.pb-product-description) {
        line-height: var(--line-height);
    }

    :where(.pb-product-description) :where(p, ul, ol, blockquote, table) {
        margin-block: 0 var(--spacing-md);
    }

    :where(.pb-product-description) :where(ul, ol) {
        padding-inline-start: var(--spacing-lg);
    }

    :where(.pb-product-description) :where(li + li) {
        margin-block-start: var(--spacing-xs);
    }

    :where(.pb-product-description) > :where(:last-child) {
        margin-block-end: 0;
    }

    /* ── surfaces and small semantics ────────────────────────────────────── */

    :where(.pb-card) {
        background-color: var(--color-bg-card);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        padding: var(--card-padding);
    }

    :where(.pb-card-title, .pb-card h3[data-pb]) {
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h3);
    }

    :where(.pb-price) {
        font-weight: var(--font-weight-h2);
        color: var(--color-primary);
    }

    :where(.pb-price-was) {
        font-weight: var(--font-weight-body);
        color: var(--color-text-muted);
        text-decoration: line-through;
    }

    /* ── the blog (CMS-L80) ──────────────────────────────────────────────── */

    /* An article's title, date line, cover and text: defaults an author's own
       style always beats. The text is set for reading — a measured column and
       a generous line height. */
    :where(.pb-blog-title) {
        margin-block: 0 var(--spacing-sm);
    }

    :where(.pb-blog-meta) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        margin-block: 0 var(--spacing-md);
        color: var(--color-text-muted);
        font-size: var(--font-size-small);
    }

    :where(.pb-blog-meta__category) {
        color: var(--color-text-link);
        text-decoration: none;
    }

    :where(.pb-blog-cover) {
        margin: 0 0 var(--spacing-lg);
    }

    :where(.pb-blog-cover img) {
        display: block;
        inline-size: 100%;
        block-size: auto;
        border-radius: var(--radius-md);
    }

    :where(.pb-blog-body) {
        max-inline-size: 72ch;
        line-height: 1.9;
    }

    :where(.pb-blog-body) :where(p, ul, ol, blockquote, table, figure) {
        margin-block: 0 var(--spacing-md);
    }

    :where(.pb-blog-body) :where(h2, h3) {
        margin-block: var(--spacing-lg) var(--spacing-sm);
    }

    :where(.pb-blog-body) :where(ul, ol) {
        padding-inline-start: var(--spacing-lg);
    }

    :where(.pb-blog-body) :where(img) {
        max-inline-size: 100%;
        block-size: auto;
        border-radius: var(--radius-md);
    }

    :where(.pb-blog-body) > :where(:last-child) {
        margin-block-end: 0;
    }
}