*, *::before, *::after {
    box-sizing: border-box;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

body {
    margin: 0;
    background-color: var(--dynamo-colors-background);
    color: var(--dynamo-colors-text);
    font-family: var(--dynamo-typography-body-font-family);
    font-size: var(--dynamo-typography-body-font-size);
    font-weight: var(--dynamo-typography-body-font-weight);
    line-height: var(--dynamo-typography-body-line-height);
}

a {
    color: var(--dynamo-colors-link);
}

a:hover {
    color: var(--dynamo-colors-primary);
}

a:focus-visible {
    outline: 2px solid var(--dynamo-colors-link);
    outline-offset: 2px;
}

/* ── Headings ───────────────────────────────────────────────────────────── */

h1 {
    font-family: var(--dynamo-typography-h1-font-family);
    font-size: var(--dynamo-typography-h1-font-size);
    font-weight: var(--dynamo-typography-h1-font-weight);
    line-height: var(--dynamo-typography-h1-line-height);
}

h2 {
    font-family: var(--dynamo-typography-h2-font-family);
    font-size: var(--dynamo-typography-h2-font-size);
    font-weight: var(--dynamo-typography-h2-font-weight);
    line-height: var(--dynamo-typography-h2-line-height);
}

h3 {
    font-family: var(--dynamo-typography-h3-font-family);
    font-size: var(--dynamo-typography-h3-font-size);
    font-weight: var(--dynamo-typography-h3-font-weight);
    line-height: var(--dynamo-typography-h3-line-height);
}

h4 {
    font-family: var(--dynamo-typography-h4-font-family);
    font-size: var(--dynamo-typography-h4-font-size);
    font-weight: var(--dynamo-typography-h4-font-weight);
    line-height: var(--dynamo-typography-h4-line-height);
}

h5 {
    font-family: var(--dynamo-typography-h5-font-family);
    font-size: var(--dynamo-typography-h5-font-size);
    font-weight: var(--dynamo-typography-h5-font-weight);
    line-height: var(--dynamo-typography-h5-line-height);
}

h6 {
    font-family: var(--dynamo-typography-h6-font-family);
    font-size: var(--dynamo-typography-h6-font-size);
    font-weight: var(--dynamo-typography-h6-font-weight);
    line-height: var(--dynamo-typography-h6-line-height);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.dynamo-container {
    max-width: var(--dynamo-layout-container-max-width);
    margin-inline: auto;
    padding-inline: var(--dynamo-spacing-content-padding-x);
}

.dynamo-content-wrap {
    width: 100%;
    max-width: var(--dynamo-layout-content-width);
    margin-inline: auto;
}

/* ── Site header ────────────────────────────────────────────────────────── */

.site-header {
    background-color: var(--dynamo-colors-primary);
    color: var(--dynamo-colors-background);
    padding-top: var(--dynamo-spacing-header-padding-top);
    padding-bottom: var(--dynamo-spacing-header-padding-bottom);
    border-bottom: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    box-shadow: var(--dynamo-shadows-sm);

    .dynamo-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem;
    }
}

.site-header a {
    color: var(--dynamo-colors-background);
    text-decoration: none;
}

.site-header a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Header menu + cart wrapper ─────────────────────────────────────────── */
/* Applies at all viewports so the menu toggle button (a child of the nav, which
   is a flex item of this wrapper) moves with the customizer setting on mobile
   and tablet too. The open dropdown <ul> stays unaffected because it is
   absolutely positioned relative to .dynamo-container (see mobile rules below). */
.dynamo-header-menu-cart {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    justify-content: var(--dynamo-header-menu-cart, flex-end);
}

/* When the wrapper is set to space-between, the position setting controls the
   cart icon's placement via auto margins (which override the flex algorithm).
   Outside of space-between, no auto margins are applied so the cart sits with
   the menu under the wrapper's justify-content. */
.dynamo-header-menu-cart--space-between .dynamo-header-cart--left {
    margin-right: auto;
}
.dynamo-header-menu-cart--space-between .dynamo-header-cart--center {
    margin-inline: auto;
}
.dynamo-header-menu-cart--space-between .dynamo-header-cart--right {
    margin-left: auto;
}

.site-title {
    margin: 0;
    font-family: var(--dynamo-typography-h1-font-family);
    font-size: var(--dynamo-typography-h2-font-size);
    font-weight: var(--dynamo-typography-h1-font-weight);
    line-height: var(--dynamo-typography-h1-line-height);
    align-self: normal;
}

.site-description {
    margin: 0;
    opacity: 0.85;
}

/* ── Site footer ────────────────────────────────────────────────────────── */

.site-footer {
    background-color: var(--dynamo-colors-section-alt);
    color: var(--dynamo-colors-secondary);
    padding-top: var(--dynamo-spacing-footer-padding-top);
    padding-bottom: var(--dynamo-spacing-footer-padding-bottom);
    border-top: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

/* ── Main content area ──────────────────────────────────────────────────── */

.site-main {
    padding-top: var(--dynamo-spacing-content-padding-top);
    padding-bottom: var(--dynamo-spacing-content-padding-bottom);
}

/* ── Post / page entries ────────────────────────────────────────────────── */

.entry-header {
    margin-bottom: var(--dynamo-spacing-content-padding-top);
}

.entry-title {
    margin-top: 0;
}

.entry-title a {
    color: var(--dynamo-colors-text);
    text-decoration: none;
}

.entry-title a:hover {
    color: var(--dynamo-colors-primary);
}

.entry-title a:focus-visible {
    outline: 2px solid var(--dynamo-colors-link);
    outline-offset: 2px;
}

.entry-meta {
    color: var(--dynamo-colors-secondary);
    font-size: var(--dynamo-typography-body-font-size);
}

.entry-footer {
    margin-top: var(--dynamo-spacing-content-padding-top);
    padding-top: var(--dynamo-spacing-content-padding-top);
    border-top: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    color: var(--dynamo-colors-secondary);
}

/* ── Post cards (archive / index) ───────────────────────────────────────── */

.post-card {
    padding-bottom: var(--dynamo-spacing-content-padding-bottom);
    margin-bottom: var(--dynamo-spacing-content-padding-bottom);
    border-bottom: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

.post-card:last-child {
    border-bottom: none;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

.posts-navigation,
.post-navigation {
    margin-top: var(--dynamo-spacing-content-padding-top);
    border-top: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    padding-top: var(--dynamo-spacing-content-padding-top);
}

.posts-navigation a:focus-visible,
.post-navigation a:focus-visible {
    outline: 2px solid var(--dynamo-colors-link);
    outline-offset: 2px;
}

/* ── Archive header ─────────────────────────────────────────────────────── */

.archive-header,
.page-header {
    background-color: var(--dynamo-colors-section-alt);
    padding-top: var(--dynamo-spacing-content-padding-top);
    padding-bottom: var(--dynamo-spacing-content-padding-bottom);
    margin-bottom: var(--dynamo-spacing-content-padding-bottom);
    border-bottom: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

.archive-title,
.page-title {
    color: var(--dynamo-colors-text);
    margin: 0;
}

/* ── Search form ────────────────────────────────────────────────────────── */

.search-form input[type="search"] {
    border: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    border-radius: var(--dynamo-borders-radius);
    padding: 0.5rem 1rem;
    font-family: var(--dynamo-typography-body-font-family);
    font-size: var(--dynamo-typography-body-font-size);
    color: var(--dynamo-colors-text);
    background-color: var(--dynamo-colors-background);
}

.search-form input[type="search"]:focus-visible,
.search-form button:focus-visible,
.search-form input[type="submit"]:focus-visible {
    outline: 2px solid var(--dynamo-colors-link);
    outline-offset: 2px;
}

.search-form button,
.search-form input[type="submit"] {
    background-color: var(--dynamo-colors-primary);
    color: var(--dynamo-colors-background);
    border: none;
    border-radius: var(--dynamo-borders-radius);
    padding: 0.5rem 1rem;
    font-family: var(--dynamo-typography-body-font-family);
    font-size: var(--dynamo-typography-body-font-size);
    cursor: pointer;
}

/* ── Featured images ────────────────────────────────────────────────────── */

.entry-featured-image {
    display: block;
    margin: 0 0 var(--dynamo-spacing-content-padding-top);
}

.entry-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--dynamo-borders-radius);
}

/* ── Comments ───────────────────────────────────────────────────────────── */

.comments-area {
    margin-top: var(--dynamo-spacing-content-padding-bottom);
    padding-top: var(--dynamo-spacing-content-padding-top);
    border-top: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

.comments-title {
    margin-top: 0;
}

.comment-list,
.comment-list .children {
    list-style: none;
    padding: 0;
}

.comment-list .children {
    margin-inline-start: var(--dynamo-spacing-content-padding-top, 1.5rem);
    padding-inline-start: var(--dynamo-spacing-content-padding-top, 1.5rem);
    border-inline-start: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

.comment-body {
    padding: var(--dynamo-spacing-content-padding-top, 1rem) 0;
    border-bottom: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.comment-author .avatar {
    border-radius: 999px;
}

.comment-metadata {
    color: var(--dynamo-colors-secondary);
    font-size: 0.875rem;
}

.comment-reply-link {
    display: inline-block;
    margin-top: 0.5rem;
}

.no-comments {
    color: var(--dynamo-colors-secondary);
    font-style: italic;
}

/* ── 404 ────────────────────────────────────────────────────────────────── */

.error-404 .page-header {
    border-radius: var(--dynamo-borders-radius);
    box-shadow: var(--dynamo-shadows-md);
}

/* ── Accessibility: skip link ───────────────────────────────────────────── */

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    background-color: var(--dynamo-colors-primary);
    color: var(--dynamo-colors-background);
    padding: 0.5rem 1rem;
    border-radius: var(--dynamo-borders-radius);
}

.skip-link:focus {
    left: 0;
    top: 0;
}

/* ── Layout modes ───────────────────────────────────────────────────────── */

.dynamo-layout-boxed .dynamo-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--dynamo-spacing-lg);
    padding-right: var(--dynamo-spacing-lg);
}

.dynamo-content-wrap.dynamo-has-sidebar {
    display: flex;
    gap: var(--dynamo-spacing-xl, 2rem);
    align-items: flex-start;
}

.dynamo-content-wrap.dynamo-has-sidebar .dynamo-primary {
    flex: 1;
    min-width: 0;
}

.dynamo-content-wrap.dynamo-has-sidebar .dynamo-sidebar {
    flex: 0 0 var(--dynamo-layout-sidebar-width);
    min-width: 0;
}

@media (max-width: 768px) {
    .dynamo-content-wrap.dynamo-has-sidebar {
        flex-direction: column;
    }

    .dynamo-content-wrap.dynamo-has-sidebar .dynamo-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

.dynamo-sidebar {
    background-color: var(--dynamo-colors-section-alt);
    border: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    border-radius: var(--dynamo-borders-radius);
    padding: var(--dynamo-spacing-content-padding-x);
}

.dynamo-sidebar .widget + .widget {
    margin-top: var(--dynamo-spacing-content-padding-x);
    padding-top: var(--dynamo-spacing-content-padding-x);
    border-top: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
}

.dynamo-sidebar .widget-title,
.dynamo-sidebar .widgettitle {
    font-size: var(--dynamo-typography-h6-font-size);
    font-weight: var(--dynamo-typography-h6-font-weight);
    color: var(--dynamo-colors-text);
    margin-bottom: 0.75rem;
}

/* ── Sticky header feature ──────────────────────────────────────────────── */

.dynamo-sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ── Scroll-to-top feature ──────────────────────────────────────────────── */

.dynamo-scroll-top {
    position: fixed;
    right: var(--dynamo-spacing-content-padding-x, 1.5rem);
    bottom: var(--dynamo-spacing-content-padding-x, 1.5rem);
    width: 2.75rem;
    height: 2.75rem;
    border: var(--dynamo-borders-width) solid var(--dynamo-borders-color);
    border-radius: 999px;
    background-color: var(--dynamo-colors-primary);
    color: var(--dynamo-colors-background);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--dynamo-shadows-sm);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 150ms ease-out, transform 150ms ease-out;
    pointer-events: none;
    z-index: 99;
}

.dynamo-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dynamo-scroll-top:focus-visible {
    outline: 2px solid var(--dynamo-colors-link);
    outline-offset: 2px;
}

/* ── Breadcrumbs feature ────────────────────────────────────────────────── */

.dynamo-breadcrumbs {
    margin-bottom: var(--dynamo-spacing-content-padding-top, 1rem);
    font-size: 0.875rem;
    color: var(--dynamo-colors-secondary);
}

.dynamo-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

.dynamo-breadcrumbs li + li::before {
    content: '/';
    margin-right: 0.5rem;
    color: var(--dynamo-colors-secondary);
}

/* ── Primary nav ─────────────────────────────────────────────────────────── */
/* Targets the <nav> element wp_nav_menu emits inside the header, so styles
   apply regardless of the menu's slug or container class. */
.site-header nav ul {
    list-style: none;
    margin: 0;
    padding-block: 0;
    padding-inline: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.site-header nav ul a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 0;
}

.site-header nav ul a:hover,
.site-header nav ul a:focus-visible {
    text-decoration: underline;
}

.dynamo-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: inherit;
    padding: 0.4rem;
    cursor: pointer;
    line-height: 0;
}

.dynamo-menu-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dynamo-menu-toggle__icon--close { display: none; }
.site-header nav.is-open .dynamo-menu-toggle__icon--open  { display: none; }
.site-header nav.is-open .dynamo-menu-toggle__icon--close { display: inline; }

@media (max-width: 921px) {
    .dynamo-menu-toggle {
        display: inline-flex;
    }

    /* Anchor the absolute dropdown to .dynamo-container's full width. */
    .site-header .dynamo-container {
        position: relative;
    }

    /* Force the .dynamo-header-menu-cart wrapper to occupy at least half the
       container width on narrow viewports, then let the brand title shrink
       (with min-width: 0 + ellipsis) so the surplus space inside the wrapper
       lets justify-content actually redistribute the toggle + cart icon. */
    .site-header .site-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-header .dynamo-header-menu-cart {
        min-width: 50%;
    }

    .site-header nav ul {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .site-header nav.is-open ul {
        display: flex;
        position: absolute;
        top: 3rem;
        left: 0;
        right: 0;
        background-color: var(--dynamo-colors-primary);
        padding-inline: var(--dynamo-spacing-content-padding-x);
        padding-block: 0.25rem;
        box-shadow: var(--dynamo-shadows-sm);
        z-index: 50;
    }

    .site-header nav ul li {
        border-top: var(--dynamo-borders-width, 1px) solid var(--dynamo-borders-color, rgba(255, 255, 255, 0.15));
        width: 100%;
    }

    .site-header nav ul a {
        display: block;
        padding: 0.75rem 0;
        width: 100%;
    }
}

/* ── WordPress required classes ─────────────────────────────────────────── */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--dynamo-colors-background, #fff);
    clip: auto !important;
    clip-path: none;
    color: var(--dynamo-colors-text, #000);
    display: block;
    font-size: 0.875em;
    font-weight: 700;
    height: auto;
    left: 0.5rem;
    padding: 0.875rem 1.5rem;
    text-decoration: none;
    top: 0.5rem;
    width: auto;
    z-index: 100000;
}

.alignleft {
    float: left;
    margin: 0 1.5em 1em 0;
}

.alignright {
    float: right;
    margin: 0 0 1em 1.5em;
}

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

.wp-caption {
    max-width: 100%;
}

.wp-caption img {
    display: block;
    max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
    font-size: 0.875em;
    color: var(--dynamo-colors-text, currentColor);
    margin: 0.25em 0 0;
}

.sticky {
    display: block;
}

.bypostauthor {
    display: block;
}

/* ── WC Live Category Filter chip palette ───────────────────────────────
   Map the plugin's chip variables to the theme accent so hover, focus,
   and active states pick up the site palette instead of the plugin's
   neutral defaults. Scoped to .wclcf-chip-row so the variables only
   resolve when the chip row is actually on the page.

   Hover/focus uses the same solid accent fill as the active state so
   the chip "previews" what selection will look like — but we also need
   to lift the text colour so it stays readable against the accent
   (the plugin doesn't expose a --wclcf-chip-hover-fg variable). */
.wclcf-chip-row {
    --wclcf-chip-active-bg: var(--dynamo-colors-accent);
    --wclcf-chip-active-fg: var(--dynamo-colors-background);
    --wclcf-chip-hover-bg: var(--dynamo-colors-accent);
}

.wclcf-chip:hover,
.wclcf-chip:focus-visible {
    color: var(--dynamo-colors-background);
    border-color: var(--dynamo-colors-accent);
}