/* =============================================================================
   theme.css - Blank theme look, on top of style.css (never edit that file)
   =============================================================================
   The default look of app-boilerplate: its theme.css config, typography,
   buttons, surfaces, forms and tables (sections 1-6), then the WordPress
   layer (7), the theme's own components (8) and the plugin integrations
   (9). The child theme's style.css loads after this file and re-skins the
   site by overriding the section 1 tokens.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CONFIG - change these (in the child theme) to re-skin the site
   -------------------------------------------------------------------------- */

:root {
    /* Fonts. Inter is loaded from Google Fonts by functions-enqueue.php
       (weights 400-700, variable); the system stack behind it shows until
       it arrives and stands in wherever the font is blocked. To change the
       face, override these in the child theme and enqueue the new family. */
    --headings-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --body-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;

    /* Brand - ink by default: buttons and accents follow the text color and
       invert automatically in dark mode. For a colored brand, point these at
       any style.css palette color instead (e.g. var(--violet) / var(--violet-rgb))
       and the tints, focus rings, and active nav states all follow. Change it
       here AND in the three override blocks below (body.dark, the
       prefers-color-scheme query, body.light). */
    --brand:     var(--black);
    --brand-rgb: var(--black-rgb);

    /* Shape */
    --radius:    8px;    /* controls: inputs, buttons, pills */
    --radius-lg: 12px;   /* surfaces: cards, tables */

    /* Tokens that never flip: text on a coloured surface (the red of a
       destructive button) stays white in both modes, shadows darken in both
       modes, and the green of a done mark is the darker shade of the
       style.css green, which holds white text at 5:1. */
    --on-accent:    #FFFFFF;
    --shadow-rgb:   0, 0, 0;
    --green-strong: #15803D;

    /* Error messages and the destructive item of an actions menu. Flips
       with the mode: a deep red on the light surfaces, a soft red on the
       dark ones, both above 4.5:1 on the canvas, the cards and the fields. */
    --error-text: #B91C1C;

    /* Floating buttons: the size of each round button, the space between
       two of them and their distance from the screen edges. The footer band
       under the stack is sized from the same three values. */
    --fab-size:   48px;
    --fab-gap:    12px;
    --fab-offset: 16px;

    /* Modals (ui.js): the widest a modal grows, its corners, its shadow and
       the dimmed, blurred page behind it. A child theme restyles every modal
       by setting these in its own :root; anything further (a gradient, a
       different entrance) goes in its own .modal rules. */
    --modal-width:    480px;
    --modal-radius:   var(--radius-lg);
    --modal-shadow:   0 12px 32px -8px rgba(var(--shadow-rgb), .24);
    --modal-backdrop: rgba(var(--shadow-rgb), .5);
    --modal-blur:     0px;

    /* Hairline used for every border; flips with the mode */
    --border: rgba(var(--black-rgb), .12);

    /* Plate behind the custom logo. Logo artwork is drawn in dark ink on a
       transparent background, so it reads straight off the surface in light
       mode and needs a white card under it in dark mode to stay legible. A
       neutral token cannot do this: they all flip. */
    --logo-plate: transparent;

    /* The two surfaces that are not plain cards: the chrome (top bar) and
       the fields (inputs, selects, textareas). Both modes layer the page like
       a code editor - chrome, then the canvas, the cards, the fields - each
       one step lighter in light mode and darker in dark mode. */
    --chrome: #F3F3F3;
    --field:  #FFFFFF;

    /* Neutrals of a code editor's light theme replacing the style.css
       defaults: soft #3B3B3B ink instead of jet black, an #F8F8F8 canvas,
       pure white cards, #E5E5E5 dividers */
    --black:  #3B3B3B;   --black-rgb:  59, 59, 59;
    --white:  #FFFFFF;   --white-rgb:  255, 255, 255;
    --dark:   #505050;   --dark-rgb:   80, 80, 80;
    --gray:   #616161;   --gray-rgb:   97, 97, 97;
    --silver: #E5E5E5;   --silver-rgb: 229, 229, 229;
    --light:  #F8F8F8;   --light-rgb:  248, 248, 248;
}

/* Dark mode - the layered grays of a code editor's dark theme rather than a
   flat near-black: #181818 chrome (top bar), a #1F1F1F canvas,
   #252526 cards, #313131 fields, #2B2B2B dividers and #CCCCCC text, so
   every layer is told apart at a glance and buttons invert to light. The
   :root values above are overridden by three blocks that stay in sync:
   body.dark (a toggle a site can add, a body class from JavaScript), the
   prefers-color-scheme query (the OS preference) and body.light. The
   derived tokens (--brand, --border) are repeated in the body.* blocks
   because var() inside a custom property resolves where
   the property is declared - :root - so they must be re-declared on body to
   pick up the flipped neutrals. */
body.dark {
    --black:  #CCCCCC;   --black-rgb:  204, 204, 204;
    --white:  #252526;   --white-rgb:  37, 37, 38;
    --dark:   #B4B4B4;   --dark-rgb:   180, 180, 180;
    --gray:   #9D9D9D;   --gray-rgb:   157, 157, 157;
    --silver: #2B2B2B;   --silver-rgb: 43, 43, 43;
    --light:  #1F1F1F;   --light-rgb:  31, 31, 31;

    --brand:     var(--black);
    --brand-rgb: var(--black-rgb);
    --border:    rgba(var(--black-rgb), .10);

    --chrome: #181818;
    --field:  #313131;

    --logo-plate: #FFFFFF;

    --error-text: #F87171;
}

@media (prefers-color-scheme: dark) {
    :root {
        --black:  #CCCCCC;   --black-rgb:  204, 204, 204;
        --white:  #252526;   --white-rgb:  37, 37, 38;
        --dark:   #B4B4B4;   --dark-rgb:   180, 180, 180;
        --gray:   #9D9D9D;   --gray-rgb:   157, 157, 157;
        --silver: #2B2B2B;   --silver-rgb: 43, 43, 43;
        --light:  #1F1F1F;   --light-rgb:  31, 31, 31;

        --brand:     var(--black);
        --brand-rgb: var(--black-rgb);
        --border:    rgba(var(--black-rgb), .10);

        --chrome: #181818;
        --field:  #313131;

        --logo-plate: #FFFFFF;

        --error-text: #F87171;
    }
}

/* Explicit light mode - a toggle sets body.light to override a dark OS
   preference. Values mirror the :root defaults above; this is the
   one sanctioned place neutrals are written outside the config block. */
body.light {
    --black:  #3B3B3B;   --black-rgb:  59, 59, 59;
    --white:  #FFFFFF;   --white-rgb:  255, 255, 255;
    --dark:   #505050;   --dark-rgb:   80, 80, 80;
    --gray:   #616161;   --gray-rgb:   97, 97, 97;
    --silver: #E5E5E5;   --silver-rgb: 229, 229, 229;
    --light:  #F8F8F8;   --light-rgb:  248, 248, 248;

    --brand:     var(--black);
    --brand-rgb: var(--black-rgb);
    --border:    rgba(var(--black-rgb), .12);

    --chrome: #F3F3F3;
    --field:  #FFFFFF;

    --logo-plate: transparent;

    --error-text: #B91C1C;
}

/* -----------------------------------------------------------------------------
   2. TYPOGRAPHY - tighter tracking on large text reads more refined
   -------------------------------------------------------------------------- */

h1, h2, h3 {
    letter-spacing: -0.01em;
}

/* A word longer than the line (an email address in the dashboard greeting,
   a pasted link) breaks instead of pushing the page wider than the screen */
h1, h2, h3, h4, h5, h6,
p {
    overflow-wrap: anywhere;
}

/* Inter is drawn for screens: grayscale smoothing on macOS keeps its strokes
   at the weight they were designed at, and the variable axis is left to the
   browser so every weight between 400 and 700 renders from one file */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
}

/* Vertical rhythm: text blocks keep comfortable spacing everywhere
   (style.css only gives them 8px) */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 16px;
}

p {
    margin-bottom: 12px;
}

/* -----------------------------------------------------------------------------
   3. BUTTONS - solid ink, hairline border, layered hover instead of the
   style.css opacity fade
   -------------------------------------------------------------------------- */

button,
.button {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: var(--white); /* inverts with --brand, so it works in both modes */
    padding: 8px 16px;
    border-radius: var(--radius);
    letter-spacing: .01em;
    transition: background-color .15s ease, border-color .15s ease;
}

/* Hover: a translucent --white veil lightens the ink button in light mode
   and dims the inverted button in dark mode - one rule for both */
button:not([disabled]):hover,
.button:not([disabled]):hover {
    opacity: 1;
    background-image: linear-gradient(rgba(var(--white-rgb), .14), rgba(var(--white-rgb), .14));
}

button:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Secondary: quiet surface button with a hairline edge */
button.button-alt,
.button.button-alt {
    background: var(--white);
    border-color: rgba(var(--black-rgb), .15);
    color: var(--black);
}

button.button-alt:not([disabled]):hover,
.button.button-alt:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--black-rgb), .04), rgba(var(--black-rgb), .04));
    border-color: rgba(var(--black-rgb), .3);
}

/* Destructive: the red of a delete, used by the confirm box of a
   destructive action (confirmDialog() with danger). Hover darkens the red
   in both modes (a --white veil would lighten it in light mode and weaken
   the white label), and the focus ring is red too. */
button.button-danger,
.button.button-danger {
    background: var(--red);
    border-color: var(--red);
    color: var(--on-accent);
}

button.button-danger:not([disabled]):hover,
.button.button-danger:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--shadow-rgb), .16), rgba(var(--shadow-rgb), .16));
}

button.button-danger:focus-visible,
.button.button-danger:focus-visible {
    outline-color: var(--red);
}

/* -----------------------------------------------------------------------------
   4. SHELL - the public top bar and footer from style.css on the soft canvas
   -------------------------------------------------------------------------- */

/* Soft canvas behind the content; cards sit on --white and the chrome (top
   bar) on --chrome. All three flip in dark mode, so this needs no
   dark overrides. */
body {
    background: var(--light);
}

.header {
    background: var(--chrome);
}

/* Below 768px style.css folds the menu column to max-height 0, which
   hides it from the eye but not from the Tab key. Folded, it is also
   hidden from the keyboard and screen readers: visibility turns hidden once
   the closing slide has run and visible the moment the menu opens. The
   512px cap style.css puts on the open menu is raised to a height no menu
   reaches, so a long menu with its submenus open is never cut off. From
   768px the column is always shown. */
.header .custom-column.hidden-for-mobile {
    visibility: hidden;
    transition: max-height .25s ease, visibility 0s linear .25s;
}

.header.expanded .custom-column.hidden-for-mobile {
    max-height: 2048px;
    visibility: visible;
    transition: max-height .25s ease, visibility 0s linear 0s;
}

@media (min-width: 768px) {
    .header .custom-column.hidden-for-mobile {
        visibility: visible;
    }
}

/* Submenus of the primary menu: script.js puts a toggle button after the
   link of every item with a submenu (li.has-submenu > a + button.submenu-
   toggle + ul) and ui.js opens the submenu (ul.open) on a click or
   a tap, or under a hovering mouse from 768px. The button is a small chevron in the
   link's ink, pointing down, up while its submenu is open. Mobile first:
   inside the phone menu the submenu is an expandable group under its item,
   shown only while open (style.css shows every submenu there with
   !important, so folding it needs !important too). */
.header li.has-submenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.header li.has-submenu > ul {
    flex: 0 0 100%;
    padding-inline-start: 16px;
}

.header li.has-submenu > ul:not(.open) {
    display: none !important;
}

.header .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-inline-start: 4px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.header .submenu-toggle:not([disabled]):hover {
    background-image: none;
}

.header .submenu-toggle::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}

.header .submenu-toggle[aria-expanded="true"]::before {
    transform: translateY(2px) rotate(225deg);
}

/* From 768px the submenu is a panel under its item. Its look (padding,
   radius, elevation, item rows) is written with the style.css selectors,
   so a child theme's .header li > ul rules still win; the open and closed
   states use the has-submenu class. Closed, the panel is hidden from the
   eye, the keyboard and screen readers (visibility), so the style.css
   rules that show a submenu on :hover and :focus-within (they only set
   display) no longer open it: the toggle and the pointer do. Open, it
   fades in and drops 8px into place. */
@media (min-width: 768px) {
    .header li > ul {
        top: calc(100% + 8px);
        z-index: 30;
        min-width: 200px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 0 12px 32px -8px rgba(var(--shadow-rgb), .24);
        text-align: start;
    }

    .header li > ul::before {
        border-radius: inherit;
    }

    .header li > ul > li {
        padding: 0;
    }

    .header li > ul > li > a {
        display: block;
        padding: 8px 12px;
        border-radius: var(--radius);
        white-space: nowrap;
    }

    .header li > ul > li > a:hover {
        background: rgba(var(--black-rgb), .05);
    }

    .header li.has-submenu > ul,
    .header li.has-submenu > ul:not(.open) {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    }

    .header li.has-submenu > ul.open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
    }

    .header .submenu-toggle {
        width: 24px;
        height: 24px;
    }
}

/* With reduced motion the menus open and close at once */
@media (prefers-reduced-motion: reduce) {
    .header .custom-column.hidden-for-mobile,
    .header.expanded .custom-column.hidden-for-mobile,
    .header li.has-submenu > ul,
    .header li.has-submenu > ul.open,
    .header .submenu-toggle::before {
        transition: none;
    }
}

/* Footer sits quietly on the canvas */
.footer p {
    color: var(--gray);
    font-size: .85rem;
}

/* -----------------------------------------------------------------------------
   5. COMPONENTS - forms, fields, tables and code in the boilerplate card language
   -------------------------------------------------------------------------- */

/* Inline form: a label on its own line, then a text control and its action
   button sharing one row. The pattern for mini-forms (invite by email,
   quick-add fields) so they match full forms instead of stacking raw
   full-width controls. */
.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
    clear: both; /* never sit beside a floated legend */
}

.inline-form label {
    flex: 0 0 100%;
    margin-bottom: 8px;
}

/* Mobile: the row stacks. The control takes the full width and the
   buttons move to their own line beneath it, sharing that line with the
   gutter between them. min-width: 0 lets a control shrink below its
   intrinsic width (a select sized by its longest option, a text input by
   its default 20 characters), so it never pushes past a phone screen. */
.inline-form input:not([type="checkbox"]):not([type="radio"]),
.inline-form select {
    flex: 1 1 100%;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
}

.inline-form > * + * {
    margin-top: 8px;
}

.inline-form > label + * {
    margin-top: 0;
}

/* A file input has a wide built-in minimum (its button plus the file name);
   it shrinks to its row instead of pushing a phone screen wider */
input[type="file"] {
    min-width: 0;
    max-width: 100%;
}

.inline-form button {
    flex: 1 1 auto;
    white-space: nowrap;
}

.inline-form button + button {
    margin-inline-start: 8px;
}

/* Desktop: the control takes a comfortable width and stops (a search box
   stretched across the whole screen reads as a gap between the title and
   its buttons), and the controls share one line with a margin gutter: the
   control right after the full-width label is the row start, so it gets
   none */
@media (min-width: 768px) {
    .inline-form input:not([type="checkbox"]):not([type="radio"]),
    .inline-form select {
        flex: 0 1 420px;
    }

    .inline-form > * + * {
        margin-top: 0;
        margin-inline-start: 8px;
    }

    .inline-form > label + * {
        margin-inline-start: 0;
    }

    .inline-form button {
        flex: 0 0 auto;
    }
}

/* Side-by-side fields: a .custom-row inside a form stacks its field groups
   on mobile and, from 768px, splits the width evenly between them with a
   margin gutter instead of letting the inputs shrink-wrap and sit flush
   against each other. Scoped to forms so the header/footer rows that share
   the class are untouched. */
form .custom-row {
    display: block;
}

@media (min-width: 768px) {
    form .custom-row {
        display: flex;
    }

    form .custom-row > div {
        flex: 1 1 0;
    }

    /* A button beside a field keeps its label on one line, the field
       beside it gives up the width, and it stays at its own height, level
       with the top of the field, when the field wraps onto two lines */
    form .custom-row > button {
        flex: 0 0 auto;
        align-self: flex-start;
        white-space: nowrap;
    }

    form .custom-row > * + * {
        margin-inline-start: 16px;
    }
}

/* Page titles: one size for every page - pages, the blog, archives,
   search, 404, the shop, the product and the article head - with tighter tracking at
   that size */
.custom-container > h1,
.post-hero h1,
.woocommerce-products-header__title,
.single-product .product_title.entry-title {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

@media (min-width: 1024px) {
    .custom-container > h1,
    .post-hero h1,
    .woocommerce-products-header__title,
    .single-product .product_title.entry-title {
        font-size: 2.5rem;
    }
}

/* A heading above a table or list is a caption for it, not a second title */
.custom-container > h3 {
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
}

/* Field hints: <small> notes inside labels and hint paragraphs read as
   quiet muted text. The convention is <small> with no literal
   parentheses - "Leave blank to keep your current password", not
   "(Leave blank...)". */
label small,
legend small,
form p small,
p small {
    color: var(--gray);
    font-weight: normal;
}

/* Text that follows a form or button (helper links under the login form)
   gets clear space */
form + p,
button + p,
.button + p {
    margin-top: 16px;
}

/* No trailing space at the bottom of cards */
fieldset > :last-child,
.wrapper > :last-child {
    margin-bottom: 0;
}

/* Inputs: hairline border, rounded, ink focus ring. Plugins print their
   buttons as submit, button and reset inputs, which take the button look
   (section 7) instead of the field one. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
    border: 1px solid rgba(var(--black-rgb), .14);
    border-radius: var(--radius);
    background: var(--field);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Placeholders take the muted ink instead of the browser's fixed gray,
   which falls under 3:1 on the dark field */
input::placeholder,
textarea::placeholder {
    color: var(--gray);
    opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}

/* Form sections render as cards; the legend sits inside the card
   (floated full-width) instead of straddling the fieldset border. Cards
   carry their edge with the hairline; the shadow is only a hint of depth.
   Browsers give a fieldset min-width: min-content, so a select holding a
   long option (a name with its email address) would stretch the card past
   a phone screen; min-width: 0 keeps the card at its column's width and the
   control shrinks inside it. */
fieldset {
    min-width: 0;
    margin-bottom: 16px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03), 0 12px 32px -20px rgba(var(--shadow-rgb), .16);
}

/* Legends speak in the same voice as table headers: a micro-label */
legend {
    float: inline-start;
    width: 100%;
    padding: 0;
    margin-bottom: 16px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray);
}

/* Option rows inside a card keep an even rhythm; the card's own last-child
   rule takes the trailing margin off */
fieldset > div {
    margin-bottom: 8px;
}

input[type="radio"] + label {
    display: inline;
    margin-inline-start: 8px;
    font-weight: 500;
}

/* The floated legend must not squeeze what follows it: flex/grid/overflow
   boxes (unlike normal block flow) get placed in the leftover space beside
   a float, which for a 100%-wide float is a zero-width sliver at the edge.
   Clearing the first sibling puts everything back below the legend. */
legend + * {
    clear: both;
}

/* Tables render as cards: rounded white surface, micro-label headers,
   row hairlines, no zebra */
.table-wrapper {
    overflow: auto;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03), 0 12px 32px -20px rgba(var(--shadow-rgb), .16);
}

/* Separate borders with zero spacing draw exactly like collapsed ones here
   (cells carry only a bottom hairline), and they let a pinned cell take its
   hairline along when the table scrolls beneath it */
table {
    border-collapse: separate;
    border-spacing: 0;
}

th,
td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
}

th {
    background: var(--light);
    color: var(--gray);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: start;
}

td {
    font-size: .9rem;
    font-variant-numeric: tabular-nums; /* digits line up in data columns */
}

tr:nth-child(even) td {
    background: transparent;
}

tr:last-child td {
    border-bottom: none;
}

/* The first column stays put while a wide table scrolls, so a row keeps its
   label in view however many columns it carries. A table whose first column
   must never wrap (short labels beside many numeric columns) adds
   white-space: nowrap to it in the project theme. Written as tbody tr td so
   it outranks the even-row reset above (tr:nth-child(even) td), which would
   otherwise leave the pinned cell transparent on every second row. */
thead tr th:first-child,
tbody tr td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--white);
}

thead tr th:first-child {
    background: var(--light);
}

/* The column's edge exists only while other columns slide under it:
   script.js sets is-scrolled on the wrapper as it scrolls sideways, and the hairline
   plus shadow show that as layering, not as a cut. A table that fits its
   wrapper never shows an edge. */
.table-wrapper.is-scrolled thead tr th:first-child,
.table-wrapper.is-scrolled tbody tr td:first-child {
    box-shadow: 1px 0 0 var(--border), 12px 0 16px -12px rgba(var(--shadow-rgb), .10);
}

/* The row under the pointer lifts as one, pinned cell included */
tbody tr:hover td,
tbody tr:hover td:first-child {
    background: var(--light);
}

/* Code blocks match the card language */
pre {
    border-radius: var(--radius);
}

hr {
    border-top-color: var(--border);
}

/* -----------------------------------------------------------------------------
   6. DETAIL SURFACES - read-only pages join the same card language as forms,
   fieldsets and tables so every page reads as one system
   -------------------------------------------------------------------------- */

/* Generic surface for read-only content that isn't a form, fieldset, table or
   definition list (detail sub-sections, the dashboard welcome, empty states).
   Same five-property recipe as the form/fieldset/table cards. Named .panel
   so it never collides with the .card classes plugins print. */
.panel {
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}

.panel > :last-child {
    margin-bottom: 0;
}

/* .detail-list is the label/value layout for detail pages. Only the class is
   styled: WordPress and plugins print bare <dl> elements for their own data.
   Card matches the form/table surface; on desktop the rows align on a label
   column with hairline separators, echoing the table treatment. */
.detail-list {
    margin: 0 0 24px;
    padding: 8px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}

.detail-list dt {
    color: var(--gray);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.detail-list dd {
    margin: 0;
    margin-top: 4px;
    color: var(--black);
    font-size: .95rem;
    overflow-wrap: anywhere;
}

/* Mobile: the label stacks above its value with a tighter rhythm */
.detail-list dt {
    margin-top: 16px;
}

.detail-list dt:first-of-type {
    margin-top: 0;
}

/* Desktop: a wrapping flex row where each label takes 25% and its value
   the other 75%, so the pair fills a line and every dt/dd pair (source
   order) sits on a row of its own */
@media (min-width: 768px) {
    .detail-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 24px;
    }

    .detail-list dt {
        flex: 0 0 25%;
        width: 25%;
    }

    .detail-list dd {
        flex: 0 0 75%;
        width: 75%;
        min-width: 0;
    }

    /* Label and value share one line height, so the small label sits
       centred on the first line of its value, a wrapped value included */
    .detail-list dt,
    .detail-list dd {
        margin-top: 0;
        padding: 12px 0;
        border-top: 1px solid var(--border);
        line-height: 24px;
    }

    /* First row (first label + its value) drops the top rule */
    .detail-list dt:first-of-type,
    .detail-list dt:first-of-type + dd {
        border-top: none;
    }

    .detail-list dd {
        padding-inline-start: 16px;
    }
}

/* Button rows: used across nearly every form and detail page. A wrapping
   flex row where each action spaces itself with sibling margins, keeping
   actions 8px apart in both directions with clear space above the row
   (16px container + 8px child top margin = 24px before the first row). */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
}

.form-actions > * {
    margin-inline-end: 8px;
    margin-top: 8px;
}

/* -----------------------------------------------------------------------------
   7. WORDPRESS - logo, menus, content blocks, listings, pagination, widgets
   -------------------------------------------------------------------------- */

/* Custom logo (Appearance > Customize > Site Identity), sized off a shared
   height whatever its proportions, on the --logo-plate so dark artwork
   stays legible in dark mode */
.custom-logo-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius);
    background: var(--logo-plate);
    vertical-align: middle;
}

.custom-logo {
    display: block;
    width: auto;
    height: 40px;
}

@media (min-width: 768px) {
    .custom-logo {
        height: 48px;
    }
}

/* Footer menu links sit quietly next to the copyright line */
.footer nav a {
    color: var(--gray);
    font-size: .85rem;
    transition: color .15s ease;
}

.footer nav a:hover {
    color: var(--black);
}

/* The page the visitor is on stands out in the menus */
.header nav .current-menu-item > a,
.header nav .current_page_item > a,
.footer nav .current-menu-item > a {
    font-weight: 600;
}

/* Visually hidden text that screen readers still announce (WordPress core,
   forms and plugins print it for labels and skip links) */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    top: 8px;
    left: 8px;
    z-index: 100000;
    width: auto;
    height: auto;
    padding: 12px 16px;
    clip: auto;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .12), 0 8px 24px rgba(var(--shadow-rgb), .16);
}

/* Page content: the block editor output of pages and posts */
.content {
    padding-top: 32px;
    padding-bottom: 32px;
}

.post-content > :last-child {
    margin-bottom: 0;
}

.post-content img,
.post-content video,
.post-content iframe {
    max-width: 100%;
    height: auto;
}

.post-content blockquote {
    margin: 24px 0;
    padding-inline-start: 16px;
    border-inline-start: 4px solid var(--brand);
    color: var(--dark);
}

.post-content blockquote > :last-child {
    margin-bottom: 0;
}

.post-content figure {
    margin: 24px 0;
}

.post-content figcaption,
.wp-caption-text,
.wp-element-caption {
    margin-top: 8px;
    color: var(--gray);
    font-size: .85rem;
}

.alignleft {
    float: inline-start;
    margin-inline-end: 24px;
    margin-bottom: 16px;
}

.alignright {
    float: inline-end;
    margin-inline-start: 24px;
    margin-bottom: 16px;
}

.aligncenter {
    display: block;
    margin-inline: auto;
}

.wp-block-image.aligncenter,
.wp-block-image .aligncenter {
    text-align: center;
}

/* Submit, button and reset inputs (plugin forms print them) take the
   button look of section 3 */
input[type="submit"],
input[type="button"],
input[type="reset"] {
    padding: 8px 16px;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--white);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

input[type="submit"]:not([disabled]):hover,
input[type="button"]:not([disabled]):hover,
input[type="reset"]:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--white-rgb), .14), rgba(var(--white-rgb), .14));
}

input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Block editor buttons take the boilerplate button look */
.wp-block-button__link {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
}

.wp-block-button__link:hover {
    text-decoration: none;
    background-image: linear-gradient(rgba(var(--white-rgb), .14), rgba(var(--white-rgb), .14));
}

.is-style-outline .wp-block-button__link {
    background: var(--white);
    border-color: rgba(var(--black-rgb), .15);
    color: var(--black);
}

/* Block editor tables render as the table card */
.wp-block-table {
    overflow: auto;
    margin: 24px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03), 0 12px 32px -20px rgba(var(--shadow-rgb), .16);
}

.wp-block-table table {
    width: 100%;
    margin: 0;
}

/* Post listings (home, archives, search): a card grid - no gap. Row >
   .custom-column > .inner-column > content: the column only takes its
   exact share of the row (100%, then 50% and 33.333%) and carries no
   padding; the .inner-column pads by 8px, half of the 16px gutter on
   every side, and the row's -8px margin takes the outer half back so the
   cards sit flush with the container. Column and inner column are flex
   boxes, so every card in a row fills the same height. From 768px a card
   left alone on the last row widens to fill it; .post-grid keeps it at its
   column width. */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

.card-grid > .custom-column {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

.card-grid > .custom-column > .inner-column {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
}

.card-grid > .custom-column > .inner-column > .wrapper {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}

@media (min-width: 768px) {
    .card-grid > .custom-column {
        flex: 1 1 50%;
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .card-grid > .custom-column {
        flex-basis: 33.333%;
        width: 33.333%;
    }
}

/* A post card keeps its column width even when it is the last one alone */
@media (min-width: 768px) {
    .post-grid > .custom-column {
        flex-grow: 0;
    }
}

.card-grid > .custom-column > .inner-column > .post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    color: var(--black);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.card-grid > .custom-column > .inner-column > .post-card:hover {
    text-decoration: none;
    border-color: rgba(var(--black-rgb), .24);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03), 0 12px 32px -20px rgba(var(--shadow-rgb), .24);
}

/* The card image fills the top of the card edge to edge in a 3:2 frame
   (style.css draws the image absolutely inside .media-wrapper, so the
   frame's shape is set on the wrapper); the light surface shows behind
   transparent images */
.post-card .media-wrapper {
    flex: 0 0 auto;
    margin: 0;
    aspect-ratio: 3 / 2;
    border-bottom: 1px solid var(--border);
    background: var(--light);
}

.post-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 24px;
}

.post-card-date {
    display: block;
    margin-bottom: 8px;
    color: var(--gray);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.post-card h2 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    line-height: 1.3;
}

.post-card p {
    margin: 0;
    color: var(--gray);
    font-size: .95rem;
}

/* Single article: the full page container, lined up with the header and
   the listings, with a back link, a large title, the date and author, the
   featured image and the article text */
.custom-container.post-single {
    padding-bottom: 64px;
}

.post-back {
    display: inline-block;
    margin-bottom: 24px;
    color: var(--gray);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.post-back::before {
    content: "\2190";
    margin-inline-end: 8px;
}

.post-back:hover {
    color: var(--black);
    text-decoration: none;
}

/* The head of a post or page (template-parts/entry-hero.php): the title
   column with the featured image under it, each the full width. The row
   takes back the inner columns' 8px with its negative margin, so the
   title and image line up with the container. */
.post-hero {
    margin: -8px -8px 32px;
}

.post-hero > .custom-column {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
}

.post-hero > .custom-column > .inner-column {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
}



.post-meta {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--gray);
    font-size: .9rem;
}

.post-meta-author::before {
    content: "\00b7";
    margin-inline-start: 8px;
    margin-inline-end: 8px;
}

.post-lead {
    margin-top: 16px;
    margin-bottom: 0;
    color: var(--dark);
    font-size: 1.125rem;
    line-height: 1.6;
}

/* The featured image keeps its own proportions - never cropped or
   stretched past its size - and is capped by height rather than filling
   the width, so the title, the image and the start of the text share the
   first screen. It lines up with the text, with the cards' rounded
   corners. */
.post-featured-image {
    margin: 0;
    padding: 0;
}

.post-featured-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 320px;
    border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
    .post-featured-image img {
        max-height: 400px;
    }
}

@media (min-width: 1024px) {
    .post-featured-image img {
        max-height: 480px;
    }
}

.post-hero-media > .inner-column {
    padding-top: 24px;
}

/* On a page the featured image sits between the title and the content */
.custom-container > .post-featured-image {
    margin-bottom: 32px;
}

/* Article text: a larger size and open line height for long reading. Only
   the article's own blocks (direct children of .post-content) take it, so
   shortcodes and plugin markup inside a post keep their own look. */
.post-single .post-content > p,
.post-single .post-content > ul,
.post-single .post-content > ol {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.post-single .post-content > h2 {
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: 1.5rem;
    line-height: 1.3;
}

.post-single .post-content > h3 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 1.25rem;
    line-height: 1.35;
}

.post-single .post-content > :first-child {
    margin-top: 0;
}

.post-single .post-content > ul,
.post-single .post-content > ol {
    padding-inline-start: 24px;
}

.post-single .post-content > ul > li,
.post-single .post-content > ol > li {
    margin-bottom: 8px;
}

.post-single .post-content > p a,
.post-single .post-content > ul > li a,
.post-single .post-content > ol > li a {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: rgba(var(--black-rgb), .32);
    text-underline-offset: 4px;
}

.post-single .post-content > p a:hover,
.post-single .post-content > ul > li a:hover,
.post-single .post-content > ol > li a:hover {
    text-decoration-color: var(--black);
}

/* Previous and next posts: a card grid of two halves below the article; a
   lone next post keeps its place on the right */
.post-navigation {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.post-navigation-row:has(> .post-navigation-next:first-child) {
    justify-content: flex-end;
}

@media (min-width: 768px) {
    .card-grid.post-navigation-row > .custom-column {
        flex: 0 0 50%;
        width: 50%;
    }
}

.card-grid > .custom-column > .inner-column > .post-navigation-card {
    display: flex;
    flex-direction: column;
    color: var(--black);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.card-grid > .custom-column > .inner-column > .post-navigation-card:hover {
    text-decoration: none;
    border-color: rgba(var(--black-rgb), .24);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03), 0 12px 32px -20px rgba(var(--shadow-rgb), .24);
}

.post-navigation-next .post-navigation-card {
    text-align: end;
}

.post-navigation-label {
    display: block;
    margin-bottom: 4px;
    color: var(--gray);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.post-navigation-title {
    display: block;
    font-weight: 600;
    line-height: 1.4;
}

/* Landing sections for a front page (the child's front-page.php): the
   hero, the page's own content and the latest posts
   (blank_theme_render_latest_posts), each a section with its own
   container. The hero title keeps the one page-title size; the lead line
   and the buttons sit under it. */
.landing-hero .custom-container {
    padding-top: 32px;
    padding-bottom: 48px;
}

.landing-lead {
    max-width: 640px;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--gray);
    font-size: 1.125rem;
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .landing-lead {
        font-size: 1.25rem;
    }
}

/* Buttons space themselves with sibling margins and wrap on small screens */
.landing-actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
}

.landing-actions .button {
    margin-top: 8px;
    margin-inline-end: 8px;
}

.landing-image {
    margin: 40px 0 0;
    padding: 0;
}

.landing-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 480px;
    border-radius: var(--radius-lg);
}

.landing-content .custom-container {
    padding-top: 16px;
    padding-bottom: 48px;
}

.landing-posts .custom-container {
    padding-top: 16px;
    padding-bottom: 64px;
}

/* A section title with its link on the right, on one line from 768px */
.landing-section-header {
    align-items: center;
    margin-bottom: 24px;
}

.landing-section-header h2 {
    margin-top: 0;
    margin-bottom: 0;
}

.landing-section-link .button {
    margin-top: 12px;
}

@media (min-width: 768px) {
    .landing-section-header > .custom-column {
        flex: 1 1 auto;
        width: auto;
    }

    .landing-section-header > .landing-section-link {
        flex: 0 0 auto;
        text-align: end;
    }

    .landing-section-link .button {
        margin-top: 0;
    }
}

/* The message a listing shows with nothing to list replaces the grid */
.listing-empty {
    color: var(--gray);
}

/* Pagination under listings (the_posts_pagination and paginate_links) */
.navigation.pagination,
.pagination {
    margin-top: 32px;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.nav-links .page-numbers,
.pagination .page-numbers {
    display: inline-block;
    min-width: 40px;
    margin-inline-end: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    text-align: center;
}

.nav-links .page-numbers:hover,
.pagination .page-numbers:hover {
    text-decoration: none;
    background-image: linear-gradient(rgba(var(--black-rgb), .04), rgba(var(--black-rgb), .04));
}

.nav-links .page-numbers.current,
.pagination .current {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--white);
    font-weight: 700;
}

.nav-links .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* Widget area (registered with WooCommerce for the shop sidebar) */
.widget-area {
    margin-bottom: 32px;
}

.widget-area > li,
.widget-area .widget {
    margin-bottom: 24px;
    list-style: none;
}

.widget-title {
    margin-bottom: 12px;
    color: var(--gray);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   8. THEME COMPONENTS - cards and action menus of the [list_user_posts]
   shortcode and dashboard-style pages, the actions menu, the modal and the
   notices.
   The actions menu is hidden by default and opened by ui.js
   (.open).
   -------------------------------------------------------------------------- */

.custom-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}

/* The actions menu (the [list_user_posts] items): a row's actions behind
   one round button with three dots, a disclosure menu of ui.js that puts .open
   on the panel. The markup and these rules are app-boilerplate's
   (renderActionsMenu() there). Its items are rows like a submenu's; a
   destructive one (actions-menu-danger) is set apart in red. On phones the
   panel opens in the flow under its button; from 768px it floats 8px under
   the button at its end edge and, closed, is hidden from the eye, the
   keyboard and screen readers (visibility); open, it fades in and drops 8px
   into place. */
.actions-menu-holder {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-align: start;
}

.actions-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--brand);
}

.actions-menu-toggle:not([disabled]):hover,
.actions-menu-toggle[aria-expanded="true"] {
    border-color: var(--border);
    background: rgba(var(--black-rgb), .05);
    background-image: none;
}

.actions-menu-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.actions-menu {
    display: none;
    min-width: 160px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 12px 32px -8px rgba(var(--shadow-rgb), .24);
    text-align: start;
    white-space: normal;
}

.actions-menu.open {
    display: block;
}

.actions-menu a,
.actions-menu button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--dark);
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.actions-menu a:hover,
.actions-menu button:not([disabled]):hover {
    background: rgba(var(--black-rgb), .05);
    background-image: none;
    color: var(--black);
    text-decoration: none;
}

/* A destructive item: a little space above it and the error red */
.actions-menu .actions-menu-danger {
    margin-top: 4px;
    color: var(--error-text);
}

.actions-menu .actions-menu-danger:not([disabled]):hover {
    background: rgba(var(--red-rgb), .08);
    color: var(--error-text);
}

@media (min-width: 768px) {
    /* Closed, the floating panel takes no room at all (display: none), so
       a table never gets a scrollbar for menus nobody opened; open, it
       fades and drops in */
    .actions-menu {
        position: absolute;
        right: 0;
        z-index: 30;
        width: 224px;
    }

    .actions-menu.open {
        animation: actions-menu-in .15s ease;
    }

    /* A table scrolls inside its wrapper, which would clip the floating
       panel: while one of its rows has the menu open, the wrapper lets it
       spill over */
    .table-wrapper:has(.actions-menu.open) {
        overflow: visible;
    }
}

@keyframes actions-menu-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

[dir="rtl"] .actions-menu {
    right: auto;
    left: 0;
}

/* The end of a row, as app-boilerplate's theme.css draws it: a lone action
   is a small secondary button in the place of the actions menu, in the
   error red when it destroys; row-link is a lone plain link where a row
   offers one thing to open and nothing to do */
.row-link {
    display: inline-block;
    margin-inline-end: 12px;
    vertical-align: middle;
}

button.row-action,
.button.row-action {
    padding: 4px 12px;
    font-size: .8rem;
    line-height: 1.4;
    vertical-align: middle;
}

button.row-action-danger,
.button.row-action-danger {
    color: var(--error-text);
}

button.row-action-danger:not([disabled]):hover,
.button.row-action-danger:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--red-rgb), .08), rgba(var(--red-rgb), .08));
    border-color: var(--error-text);
}

button.row-action-danger:focus-visible,
.button.row-action-danger:focus-visible {
    outline-color: var(--error-text);
}

/* The modal (ui.js, the app-boilerplate file): a native <dialog> over a
   dimmed page, centred, full width with a 16px gutter on phones and 480px
   wide at most. Plain by default, a surface like the menus' panels: it
   fades in as it opens (at once with reduced motion), the close button
   sits at the top end and the actions line up at the end. A child theme
   dresses it up through the modal tokens and its own .modal rules. The
   confirm box of the Delete item is one. */
.modal {
    width: calc(100% - 32px);
    max-width: var(--modal-width);
    margin: auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--modal-radius);
    background: var(--white);
    color: var(--black);
    box-shadow: var(--modal-shadow);
}

.modal[open] {
    animation: modal-fade .2s ease-out;
}

.modal::backdrop {
    /* Browsers from before 2024 hand ::backdrop no custom properties, so
       each value carries the default as its fallback */
    background: var(--modal-backdrop, rgba(0, 0, 0, .5));
    -webkit-backdrop-filter: blur(var(--modal-blur, 0px));
    backdrop-filter: blur(var(--modal-blur, 0px));
}

@keyframes modal-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-body {
    position: relative;
    padding: 24px 20px;
}

.modal-title {
    margin: 0 0 8px 0;
    padding-inline-end: 40px;
    font-size: 1.25rem;
}

/* The message of a confirm or alert box keeps its line breaks */
.modal-text {
    margin: 0 0 24px 0;
    color: var(--gray);
    white-space: pre-line;
}

/* The close button sits level with the title's centre and stays quiet:
   no fill and no edge until it is hovered */
.modal-close {
    position: absolute;
    top: 28px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--gray);
    font-size: 1.3rem;
    line-height: 1;
}

[dir="rtl"] .modal-close {
    right: auto;
    left: 16px;
}

.modal-close:not([disabled]):hover {
    background: rgba(var(--black-rgb), .06);
    background-image: none;
    border-color: var(--border);
    color: var(--black);
}

/* The cross sits on the button's own line height (style.css gives every
   span 1.5, which would push it off centre) */
.modal-close span {
    line-height: 1;
}

.modal .modal-actions {
    justify-content: flex-end;
    margin-top: 8px;
}

.modal .modal-actions > *:last-child {
    margin-inline-end: 0;
}

/* A status line under a form in a modal: muted, red for an error, gone
   while empty */
.modal-status {
    margin: 12px 0 0 0;
    color: var(--gray);
    font-size: .9rem;
}

.modal-status.is-error {
    color: var(--error-text);
}

.modal-status:empty {
    display: none;
}

/* A modal's done state: centred, under a round check */
.modal-success {
    text-align: center;
}

.modal-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(var(--green-rgb), .12);
    color: var(--green-strong);
    font-size: 1.75rem;
}

/* The done state's title is centred, so it keeps no room for the close
   button */
.modal-success .modal-title {
    padding-inline-end: 0;
}

@media (min-width: 768px) {
    .modal-body {
        padding: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .actions-menu.open {
        animation: none;
    }

    .modal[open] {
        animation: none;
    }
}

/* The notices (ui.js, the app-boilerplate file): a stack at the top of
   the window, clear of the floating buttons at the bottom. Full width with
   a 16px gutter on phones; from 768px a 360px column at the top end, under
   the header. The WordPress toolbar of a signed-in visitor pushes it down.
   Each notice is a card with a colored edge at its start (green for
   success, the brand for info, red for an error) and a round close button.
   It slides in and fades out, at once with reduced motion. The stack is a
   manual popover where the browser has them, so the popover defaults are
   undone here. */
.notify-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    bottom: auto;
    left: 16px;
    /* Above the WordPress toolbar (z-index 99999) and its open menus, which
       hang over the stack; browsers with popovers put it in the top layer */
    z-index: 100000;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--black);
    overflow: visible;
    pointer-events: none;
}

.admin-bar .notify-stack {
    top: 64px;
}

.notify {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    padding: 12px 12px 12px 16px;
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--green);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    box-shadow: 0 16px 32px -16px rgba(var(--shadow-rgb), .5);
    pointer-events: auto;
    animation: notify-enter .25s cubic-bezier(.2, .7, .2, 1);
    transition: opacity .3s ease;
}

.notify-info {
    border-inline-start-color: var(--brand);
}

.notify-error {
    border-inline-start-color: var(--error-text);
}

.notify.is-leaving {
    opacity: 0;
}

.notify-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 4px 0;
    font-size: .95rem;
    white-space: pre-line;
}

/* The close button stays quiet, as the modal's: no fill and no edge
   until it is hovered */
.notify-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-inline-start: 12px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--gray);
    font-size: 1.2rem;
    line-height: 1;
}

.notify-close:not([disabled]):hover {
    background: rgba(var(--black-rgb), .06);
    background-image: none;
    border-color: var(--border);
    color: var(--black);
}

@keyframes notify-enter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 768px) {
    .notify-stack {
        top: 88px;
        left: auto;
        width: 360px;
    }

    .admin-bar .notify-stack {
        top: 120px;
    }

    [dir="rtl"] .notify-stack {
        right: auto;
        left: 16px;
    }
}

/* The status line of a form (setFormStatus()): right after its buttons,
   red for an error, the ink for success, gone while empty */
.form-status {
    margin: 12px 0 0 0;
    color: var(--gray);
    font-size: .95rem;
}

.form-status.is-error {
    color: var(--error-text);
}

.form-status.is-success {
    color: var(--black);
}

.form-status.is-info {
    color: var(--gray);
}

.form-status:empty {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .notify {
        animation: none;
        transition: none;
    }
}

/* Section: Item List - the [list_user_posts] shortcode */
.section-item-list h2 {
    margin: 0;
    font-size: 1.5rem;
}

.section-item-list h3 {
    margin: 0;
    font-size: 1.15rem;
}

.section-item-list h3:not(:first-child) {
    margin-top: 4px;
}

.section-item-list h3:not(:last-child) {
    margin-bottom: 8px;
}

/* The search field and the list of items take the full width; only the
   header row sets its title and button side by side */
.section-item-list .list-search > .custom-column,
.section-item-list .list-items > .custom-column {
    flex: 0 0 100%;
    width: 100%;
}

.section-item-list .item p,
.section-item-list .item span {
    font-size: .85rem;
}

.section-item-list .item p {
    margin: 0;
}

/* A post that is not published yet (draft, pending review, scheduled)
   carries its status beside the date */
.section-item-list .item .post-status-badge {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--light);
    color: var(--dark);
    font-size: .75rem;
    font-weight: 600;
    line-height: 20px;
    vertical-align: middle;
}

.section-item-list .item:not(:last-child) {
    margin-bottom: 16px;
}

.section-item-list .item .wrapper .wrapper {
    position: relative;
    padding: 0;
}

/* An item's View link and its actions stay on one line */
.section-item-list .column-item-actions > .inner-column {
    white-space: nowrap;
}

/* style.css gives every text input a bottom margin with a higher
   specificity; the search field sits alone on its row */
.section-item-list form input {
    margin: 0 !important;
}

@media screen and (max-width: 424px) {
    .section-item-list .custom-column > a.button {
        margin-top: 8px;
    }

    /* The actions sit under the title on a phone: the space belongs to the
       inner column, never to the column that sizes the row */
    .section-item-list .column-item-actions > .inner-column {
        padding-top: 16px;
    }
}

@media screen and (min-width: 425px) {
    .section-item-list .custom-column {
        flex-basis: auto;
        width: auto;
    }

    .section-item-list .custom-card > .custom-row,
    .section-item-list .item .custom-card > .wrapper > .custom-row:first-child {
        justify-content: space-between;
        align-items: center;
    }
}

/* When the page shows floating buttons, the footer ends with an empty
   band as tall as the stack plus its offset, so at the bottom of the page
   no footer text sits under them: the offset plus one button
   (--fab-offset, --fab-size), then a gap and a button more for each
   further visible button, up to four. A page without floating buttons
   gets no band. */
body:has(.fab-stack li:not([hidden])) .footer::after {
    content: "";
    display: block;
    height: calc(var(--fab-offset) + var(--fab-size));
}

/* The rules count visible buttons whatever hidden ones sit in between */
body:has(.fab-stack li:not([hidden]) ~ li:not([hidden])) .footer::after {
    height: calc(var(--fab-offset) + 2 * var(--fab-size) + var(--fab-gap));
}

body:has(.fab-stack li:not([hidden]) ~ li:not([hidden]) ~ li:not([hidden])) .footer::after {
    height: calc(var(--fab-offset) + 3 * var(--fab-size) + 2 * var(--fab-gap));
}

body:has(.fab-stack li:not([hidden]) ~ li:not([hidden]) ~ li:not([hidden]) ~ li:not([hidden])) .footer::after {
    height: calc(var(--fab-offset) + 4 * var(--fab-size) + 3 * var(--fab-gap));
}

/* Floating action buttons: a fixed stack in the bottom end corner (the
   color-mode feature's light/dark switch lives here) */
.fab-stack {
    position: fixed;
    inset-inline-end: var(--fab-offset);
    bottom: var(--fab-offset);
    z-index: 40;
    margin: 0;
    padding: 0;
}

.fab-stack li {
    list-style: none;
}

/* Spacing between visible items only: a hidden sibling renders no margin,
   so the stack always sits flush at its bottom offset */
.fab-stack li + li {
    margin-top: var(--fab-gap);
}

.fab-stack button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fab-size);
    height: var(--fab-size);
    padding: 0;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .12), 0 8px 24px rgba(var(--shadow-rgb), .16);
}

.fab-stack button svg {
    width: 20px;
    height: 20px;
}

/* The light/dark switch holds both icons and shows the mode it leads to:
   the moon while the page is light, the sun while it is dark - from the
   operating system until the visitor picks, then from body.light/.dark */
.fab-stack .icon-sun {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .fab-stack .icon-moon {
        display: none;
    }

    .fab-stack .icon-sun {
        display: block;
    }
}

body.light .fab-stack .icon-moon,
body.dark .fab-stack .icon-sun {
    display: block;
}

body.light .fab-stack .icon-sun,
body.dark .fab-stack .icon-moon {
    display: none;
}

/* Google Sign-In button container ([google_login_button]) */
.google-signin-button-container {
    max-width: 256px;
    margin: 32px 0;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   9. PLUGINS - ACF front-end forms, Profile Builder and Paid Member
   Subscriptions forms, WooCommerce. Every rule only matches markup the
   plugin prints, so a site without the plugin carries nothing that runs.
   Plugin stylesheets ship with high specificity; the !important flags
   below are the only way to win over them.
   -------------------------------------------------------------------------- */

/* ACF */
.acf-field {
    margin-bottom: 16px !important;
    padding: 0 !important;
    padding-top: 16px !important;
}

.acf-field:first-child {
    padding-top: 0 !important;
}

/* ACF draws its field separators in a fixed light grey; the theme's
   border token keeps them quiet in both color modes */
.acf-form .acf-fields > .acf-field {
    border-top-color: var(--border) !important;
}

/* The editor's Add Media button (post_content="true") takes the theme's
   secondary button look instead of the WordPress admin blue */
.acf-form .wp-media-buttons .button {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--white) !important;
    color: var(--black) !important;
    font-weight: 600;
}

.acf-form .wp-media-buttons .button .wp-media-buttons-icon::before {
    color: var(--gray);
}

.acf-url i {
    top: 50% !important;
    transform: translateY(-50%);
}

.acf-button {
    padding: 8px 16px !important;
    border: 1px solid var(--brand) !important;
    border-radius: var(--radius) !important;
    background-color: var(--brand) !important;
    color: var(--white) !important;
    font-size: .8rem;
    font-weight: 700;
    transition: background-color .15s ease;
}

.acf-button:hover {
    background-image: linear-gradient(rgba(var(--white-rgb), .14), rgba(var(--white-rgb), .14)) !important;
}

/* The notice ACF prints above a form it has just saved (#message.updated),
   and the messages [acf_post_form] prints instead of a form (log in, not
   found, not allowed): a panel with a coloured edge, like the plugin
   notices below */
.custom-container #message.updated,
.form-message {
    margin: 0 0 24px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--brand);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
}

.custom-container #message.updated {
    border-inline-start-color: var(--green);
}

.form-message-error {
    border-inline-start-color: var(--red);
}

.custom-container #message.updated p {
    margin: 0;
}

/* The basic uploader of image and file fields: the browser's file button
   takes the theme's secondary button look */
.acf-form input[type="file"] {
    max-width: 100%;
    color: var(--gray);
    font-size: .9rem;
}

.acf-form input[type="file"]::file-selector-button {
    margin-inline-end: 12px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease;
}

.acf-form input[type="file"]::file-selector-button:hover {
    border-color: rgba(var(--black-rgb), .24);
}

/* Profile Builder and Paid Member Subscriptions */
p.wppb-form-field {
    margin-bottom: 16px;
}

.pms-account-navigation + form .select2-container .select2-selection--single {
    height: auto;
}

.pms-account-navigation + form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

.pms-account-navigation + form .select2-container .select2-selection--single,
.pms-account-navigation + form .select2-search__field {
    padding: 8px;
    border: 1px solid rgba(var(--black-rgb), .14);
    border-radius: var(--radius);
}

.wppb-user-forms ul,
.wppb-user-forms ul ul {
    margin: 0;
    padding-left: 0;
}

.wppb-user-forms ul li {
    list-style-type: none;
}

.wppb-form-field label {
    margin-bottom: 8px;
}

.wppb-form-field input[type=checkbox] {
    margin-inline-end: 8px;
}

/* Their submit inputs take the button look (section 7) on a line of
   their own */
.wppb-user-forms input[type="button"],
.wppb-user-forms input[type="submit"],
.pms-form input[type="submit"] {
    display: block !important;
    width: auto !important;
    margin-bottom: 8px !important;
}

.pms-section-billing-details .cozmoslabs-form-field-wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
}

.pms-billing-country .chosen-single,
.pms-billing-state .chosen-single {
    height: 44px !important;
}

.pms-billing-country .chosen-single span,
.pms-billing-state .chosen-single span {
    padding: 8px 16px !important;
}

/* The arrow sprite comes from the plugin's own stylesheet; only its
   position is moved to the taller field */
.pms-billing-country .chosen-single div b,
.pms-billing-state .chosen-single div b {
    background-position: 0 12px !important;
}

.wppb-sc-heading-before-reg-buttons,
.wppb-user-forms .wppb-password-field-container + .wppb-description-delimiter,
.wppb-msf-step-commands .wppb-msf-button[disabled],
.wppb-user-forms .wppb-form-error br,
#pass-strength-result,
#wppb-recover-password-container .wppb-error + .wppb-error,
#wppb-edit-user .pms-account-subscription-details-table,
#wppb-edit-user .wppb-msf-prev,
#wppb-edit-user .wppb-msf-next {
    display: none !important;
}

.wppb-user-forms .login-register-lost-password {
    margin-top: 16px;
    margin-bottom: 0;
}

.wppb-user-forms .login-register-lost-password .login-separator {
    padding: 0 4px;
}

.wppb-user-forms .wppb-description-delimiter,
.wppb-user-forms .wppb-form-error {
    display: block;
    margin-bottom: 32px;
}

.wppb-user-forms .wppb-form-error {
    color: var(--red);
}

.wppb-user-forms .wppb-required {
    padding-inline-start: 4px;
    color: var(--red);
}

.wppb-user-forms .wppb-msf-button {
    float: none !important;
}

.wppb-user-forms .wppb-password-field-container {
    position: relative;
}

.wppb-user-forms .wppb-show-pw,
.wppb-user-forms .wppb-hide-pw {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
}

#pms_success-messages-wrapper {
    margin-bottom: 32px;
}

/* [pms-account] tabs as pills, the same recipe as the WooCommerce account
   menu below; the plugin draws its active tab with an !important
   box-shadow underline, so only that property needs !important here */
.pms-account-navigation {
    margin-bottom: 24px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.pms-account-navigation ul li.pms-account-navigation-link {
    margin: 0;
    margin-inline-end: 4px;
    margin-bottom: 4px;
}

.pms-account-navigation ul li.pms-account-navigation-link a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--dark);
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.pms-account-navigation ul li.pms-account-navigation-link a:hover {
    box-shadow: none !important;
    background: rgba(var(--black-rgb), .04);
    color: var(--black);
}

.pms-account-navigation ul li.pms-account-navigation-link a.pms-account-navigation-link--active {
    box-shadow: none !important;
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
}

.pms-account-subscription-details-table {
    margin: 0 !important;
}

.pms-price-breakdown__holder {
    margin: 32px 0 !important;
}

#pms-subscription-plans-discount {
    margin-top: 32px;
    margin-bottom: 32px;
}

#pms-apply-discount {
    display: inline-block !important;
}

#pms-subscription-plans-discount-messages-wrapper {
    margin-top: -16px !important;
    margin-bottom: 32px !important;
}

/* WooCommerce: its own stylesheets lay out the shop; these rules give its
   buttons, prices, notices and forms the theme's look */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    padding: 8px 16px;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--white);
    font-weight: 700;
    line-height: 1.5;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: var(--brand);
    background-image: linear-gradient(rgba(var(--white-rgb), .14), rgba(var(--white-rgb), .14));
    color: var(--white);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--black);
    font-weight: 600;
}

.woocommerce span.onsale {
    min-width: 0;
    min-height: 0;
    padding: 4px 12px;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--white);
    font-size: .75rem;
    line-height: 1.5;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    border-top-color: var(--brand);
    background: var(--white);
    color: var(--black);
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--brand);
}

.woocommerce-error {
    border-top-color: var(--red);
}

.woocommerce-error::before {
    color: var(--red);
}

/* The "View cart" link WooCommerce adds next to an Add to cart button once
   the product is in the cart: a sibling margin keeps it off the button, and
   the padding matches the button's so both sit on one line */
.woocommerce a.added_to_cart {
    display: inline-block;
    margin-inline-start: 12px;
    padding: 8px 0;
    color: var(--black);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.woocommerce a.added_to_cart:hover {
    color: var(--brand);
}

/* The cart block lays each item row out as its own grid on small screens,
   with a fixed 132px product column; below 360px wide that row outgrows
   the container and cuts the line total off. The product column here
   takes the room that is left instead - the one place the theme touches a
   grid, and only because WooCommerce draws the row that way. */
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.is-small table.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: 80px minmax(0, 1fr);
}

.woocommerce .quantity .qty {
    width: 80px;
}

.woocommerce-breadcrumb {
    color: var(--gray);
    font-size: .85rem;
}

/* My Account: WooCommerce lays out the menu (30%) beside the content
   (68%); the menu takes the boilerplate pill look and the content sits
   on a card */
.woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-MyAccount-navigation li {
    margin-bottom: 4px;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--dark);
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
    text-decoration: none;
    background: rgba(var(--black-rgb), .04);
    color: var(--black);
}

.woocommerce-MyAccount-navigation li.is-active a {
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
    font-weight: 600;
}

/* Log out ends the menu, set apart by a hairline */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--gray);
}

.woocommerce-account .woocommerce-MyAccount-content {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .03), 0 12px 32px -20px rgba(var(--shadow-rgb), .16);
}

.woocommerce-MyAccount-content > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .woocommerce-MyAccount-navigation {
        margin-bottom: 24px;
    }
}

/* Inside the content card a fieldset is a titled group, not a second card */
.woocommerce-MyAccount-content fieldset {
    margin: 24px 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* Field notes under their field, in the muted hint voice */
.woocommerce form .form-row span > em {
    display: block;
    margin-top: 8px;
    color: var(--gray);
    font-size: .85rem;
    font-style: normal;
}

/* Addresses: each title on one line with its Add / Edit link */
.woocommerce-account .addresses .woocommerce-Address-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.woocommerce-account .addresses .woocommerce-Address-title::before,
.woocommerce-account .addresses .woocommerce-Address-title::after {
    display: none;
}

.woocommerce-account .addresses .woocommerce-Address-title h2 {
    float: none;
    margin: 0;
    margin-inline-end: 12px;
    font-size: 1.15rem;
}

.woocommerce-account .addresses .woocommerce-Address-title .edit {
    float: none;
    color: var(--brand);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.woocommerce-account .addresses address {
    color: var(--gray);
    font-style: normal;
    line-height: 1.6;
}

.woocommerce-account .addresses .col-1,
.woocommerce-account .addresses .col-2 {
    margin-top: 16px;
}

/* The shop sidebar and the product list share the page */
.main-content > .widget-area + ul.products,
.main-content > .widget-area + .product {
    clear: both;
}