/*
Theme Name: Corners of the Sun
Theme URI: https://cornersofthesun.com
Author: Chris Estep
Description: Custom block theme for cornersofthesun.com. Tokens, templates, homepage patterns, the artwork CPT, shop templates, and the WooCommerce quarantine.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: cornersofthesun
*/

/* Layout CSS only. Color, type, and spacing tokens all come from
   theme.json and are referenced here as var(--wp--preset--*). This file
   covers what block supports can't express: the header/footer chrome
   and nav toggle, focus styling, and the grids for the homepage
   sections, originals gallery, shop tiles, and contact form. Section
   classes (.cots-*) are set by the patterns and templates, so Lance
   can't remove them from the editor. Enqueued explicitly in
   functions.php -- block themes don't auto-load style.css. */

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

/* Page gutter. Feeds theme.json's root padding, so block content and
   the header/footer .wrap share one edge. */
:root {
    --cots-gutter: 1.5rem;
    /* Where pinned bars start: under the sticky header (61px) and the
       admin bar, which WordPress sets only for logged-in users and which
       scrolls away below 601px. */
    --cots-admin-bar: var(--wp-admin--admin-bar--height, 0px);
    --cots-header-h: calc(61px + var(--cots-admin-bar));
}
@media (min-width: 768px) {
    :root {
        --cots-gutter: 3rem;
    }
}
@media (max-width: 600px) {
    :root {
        --cots-admin-bar: 0px;
    }
}

/* No sideways scroll. `clip`, not `hidden`: hidden turns body into a
   scroll container, which silently breaks the sticky header. Browsers
   without `clip` fall back to `hidden` (no sticky header there). */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Baseline responsive-image reset. The legacy page content still
   migrating over from Elementor ships raw <img> tags with no
   constraint of its own -- without this, a full-width source image
   forces the whole page wider than the viewport. Patterns built in a
   later phase will size images deliberately; this is just the floor. */
img, svg, video {
    max-width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid var(--wp--preset--color--sun);
    outline-offset: 2px;
}

a:hover {
    text-decoration: underline;
}

/* Gutter container for the header/footer chrome. Content areas get
   their max-width from theme.json's contentSize via block layout
   instead -- this class is only for the nav bar and footer strip. */
.wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--cots-gutter);
}

/* Header */
.site-header {
    border-bottom: 1px solid var(--wp--preset--color--rule);
    background: var(--wp--preset--color--ground);
}
/* Sticky at every width, so the menu, search and cart are always one tap
   away. scroll-padding keeps in-page anchors (/#contact) from landing
   under it. */
.site-header {
    position: sticky;
    top: var(--cots-admin-bar);
    z-index: 50;
}
html {
    scroll-padding-top: var(--cots-header-h);
}
.header-inner {
    /* Wider than the page content and footer (.wrap's 1200px) so the full
       nav has room; only the header bar goes wide. */
    max-width: 1366px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--5);
    /* 8px + 44px badge + 8px keeps the header at its original 60px. */
    padding-block: var(--wp--preset--spacing--2);
    position: relative;
}
/* Wordmark: the round logo badge plus the name set in the display face.
   The badge is a small PNG in the theme (assets/images/logo-badge.png,
   132px for 3x screens). Swap it for an SVG once the logo is redrawn. */
.wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--3);
    min-width: 0;
    color: var(--wp--preset--color--ink);
}
/* The menu button and icons keep their size; only the wordmark gives way.
   Without this the wordmark (which can't wrap) crushed them on phones,
   and the menu bars ran into "Anderson". */
.nav-toggle,
.header-actions {
    flex: none;
}
.wordmark:hover {
    text-decoration: none;
}
.wordmark-badge {
    display: block;
    width: 44px;
    height: 44px;
    flex: none;
}
.wordmark-words {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    /* Last resort on very narrow screens: trim, never overlap. Sideways
       only: hidden would also cut the tagline's descenders (the g in
       "design"), which hang below its tight line box. */
    overflow-x: clip;
}
/* Phones: the name scales with the screen so it fits beside the menu
   button and cart (search moves into the menu below 480px). */
/* Sized to the room left beside the badge and the right-hand buttons
   (about the screen width minus 178px), from the measured text widths:
   the name is 11.4px wide per px of type, the tagline 16.7px. Full size
   from about 390px. */
@media (max-width: 479px) {
    .header-inner {
        gap: var(--wp--preset--spacing--3);
    }
    .wordmark {
        gap: var(--wp--preset--spacing--2);
    }
    .site-header .wordmark-text {
        font-size: clamp(0.6875rem, 8.8vw - 15.7px, 1rem);
    }
    .site-header .wordmark-tagline {
        font-size: clamp(0.5625rem, 6vw - 10.8px, 0.75rem);
    }
}
@media (max-width: 339px) {
    .site-header .wordmark-tagline {
        display: none;
    }
}
.wordmark-tagline {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--wp--preset--color--ink-soft, var(--wp--preset--color--ink));
}
.wordmark-text {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}
.primary-nav {
    display: flex;
    gap: 1.25rem;
    font-weight: 600;
    font-size: var(--wp--preset--font-size--step-0);
}
@media (min-width: 1280px) {
    .primary-nav {
        gap: var(--wp--preset--spacing--6);
    }
}
.primary-nav a {
    color: var(--wp--preset--color--ink);
}
.primary-nav a:hover {
    color: var(--wp--preset--color--ember);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--4);
}
.cart-link {
    color: var(--wp--preset--color--ink);
    display: inline-flex;
}

/* Social profile links (header, phone menu, footer). */
.social-links {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--4);
}
.social-links a {
    display: inline-flex;
    color: var(--wp--preset--color--ink);
}
.social-links a:hover {
    color: var(--wp--preset--color--ember);
}
.social-links svg {
    width: 20px;
    height: 20px;
}
/* In the header only where there's room beside the full nav; the footer
   always has them, and phones get them in the menu. */
.header-social {
    display: none;
}
@media (min-width: 1190px) {
    .header-social {
        display: flex;
        padding-right: var(--wp--preset--spacing--4);
        border-right: 1px solid var(--wp--preset--color--rule);
    }
}
.primary-nav__social,
.primary-nav__search {
    display: none;
}
/* Below 480px the search box lives at the top of the menu, which frees
   room in the header bar for the name. */
@media (max-width: 479px) {
    .header-search {
        display: none;
    }
    .primary-nav__search {
        display: block;
        padding-bottom: var(--wp--preset--spacing--3);
    }
}
.cart-link svg {
    width: 22px;
    height: 22px;
}

/* Mini cart (inc/shop.php). The panel's contents arrive by script only
   for visitors who have a cart; opening it is pure CSS. */
.cart-area {
    position: relative;
}
.cart-link {
    position: relative;
}
.cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--wp--preset--color--ember);
    color: var(--wp--preset--color--ground);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}
.cart-panel {
    position: absolute;
    top: calc(100% + var(--wp--preset--spacing--3));
    right: 0;
    z-index: 60;
    width: 320px;
    max-width: calc(100vw - 2 * var(--cots-gutter));
    padding: var(--wp--preset--spacing--5);
    background: var(--wp--preset--color--ground);
    border: 1px solid var(--wp--preset--color--rule);
    box-shadow: 0 16px 40px rgba(26, 24, 21, 0.14);
    font-size: var(--wp--preset--font-size--step--1);
}
/* Bridges the gap so the panel doesn't close as the pointer travels. */
.cart-panel::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--wp--preset--spacing--3));
    left: 0;
    right: 0;
    height: var(--wp--preset--spacing--3);
}
/* Closed until hover or keyboard focus, and never opens below 768px, where
   the icon is a plain link to the cart. */
.cart-panel:not([hidden]) {
    display: none;
}
@media (min-width: 768px) {
    .cart-area:hover .cart-panel:not([hidden]),
    .cart-area:focus-within .cart-panel:not([hidden]) {
        display: block;
    }
}
.cart-panel__items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--wp--preset--spacing--4);
}
.cart-panel__item {
    display: flex;
    gap: var(--wp--preset--spacing--3);
    align-items: flex-start;
}
.cart-panel__item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    flex: none;
}
.cart-panel__item a {
    color: var(--wp--preset--color--ink);
    font-weight: 600;
}
.cart-panel__meta {
    display: block;
    margin: var(--wp--preset--spacing--1) 0 0;
    color: var(--wp--preset--color--ink-soft);
}
.cart-panel__total {
    display: flex;
    justify-content: space-between;
    margin: var(--wp--preset--spacing--4) 0 0;
    padding-top: var(--wp--preset--spacing--3);
    border-top: 1px solid var(--wp--preset--color--rule);
    font-weight: 600;
}
.cart-panel__actions {
    display: grid;
    gap: var(--wp--preset--spacing--2);
    margin-top: var(--wp--preset--spacing--4);
}
.cart-panel__actions .wp-element-button {
    text-align: center;
    padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}
.cart-panel__actions .is-style-outline {
    background: transparent;
    color: var(--wp--preset--color--ink);
    border-color: var(--wp--preset--color--ink);
}

/* "Art" dropdown in the primary nav. The button toggles aria-expanded
   (header.html); on wide screens hover and keyboard focus open it too. */
.nav-group {
    position: relative;
}
.nav-group__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--wp--preset--color--ink);
    font: inherit;
    cursor: pointer;
}
.nav-group__toggle:hover {
    color: var(--wp--preset--color--ember);
}
.nav-group__toggle svg {
    transition: transform 0.15s;
}
.nav-group__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
/* "About": the word is a link; the chevron beside it opens the menu. */
.nav-group--split {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-group__menu {
    display: none;
}
.nav-group__toggle[aria-expanded="true"] + .nav-group__menu {
    display: flex;
}
@media (min-width: 1060px) {
    .nav-group__menu {
        position: absolute;
        top: 100%;
        left: -1rem;
        z-index: 40;
        flex-direction: column;
        min-width: 14rem;
        margin-top: 0.5rem;
        padding: var(--wp--preset--spacing--2) 0;
        background: var(--wp--preset--color--ground);
        border: 1px solid var(--wp--preset--color--rule);
        box-shadow: 0 8px 24px rgb(26 24 21 / 0.1);
    }
    /* Bridges the gap so the menu doesn't close while the pointer crosses it. */
    .nav-group__menu::before {
        content: "";
        position: absolute;
        inset: -0.5rem 0 100%;
    }
    .nav-group:hover .nav-group__menu,
    .nav-group:focus-within .nav-group__menu {
        display: flex;
    }
    .nav-group__menu a {
        padding: var(--wp--preset--spacing--2) 1rem;
        white-space: nowrap;
    }
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.nav-toggle-bar {
    width: 100%;
    height: 2px;
    background: var(--wp--preset--color--ink);
    display: block;
}

@media (max-width: 1059px) {
    .nav-toggle {
        display: flex;
    }
    .primary-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--wp--preset--color--ground);
        border-bottom: 1px solid var(--wp--preset--color--rule);
        padding: var(--wp--preset--spacing--4) 1.5rem var(--wp--preset--spacing--6);
        z-index: 30;
        /* The header is sticky, so a long open menu scrolls inside itself. */
        max-height: calc(100vh - var(--cots-header-h));
        max-height: calc(100dvh - var(--cots-header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .primary-nav.is-open {
        display: flex;
    }
    .primary-nav > a,
    .nav-group__toggle {
        padding-block: var(--wp--preset--spacing--3);
        border-bottom: 1px solid var(--wp--preset--color--rule);
    }
    .nav-group__toggle {
        width: 100%;
        justify-content: space-between;
    }
    .nav-group--split {
        flex-wrap: wrap;
        gap: 0;
        border-bottom: 1px solid var(--wp--preset--color--rule);
    }
    .nav-group--split .nav-group__link {
        flex: 1;
        padding-block: var(--wp--preset--spacing--3);
    }
    .nav-group--split .nav-group__toggle {
        width: auto;
        padding: var(--wp--preset--spacing--3) 0.25rem var(--wp--preset--spacing--3) 1rem;
        border-bottom: 0;
    }
    .nav-group--split .nav-group__menu {
        flex-basis: 100%;
    }
    .nav-group--split .nav-group__menu a:last-child {
        border-bottom: 0;
    }
    .nav-group__menu a {
        padding: var(--wp--preset--spacing--3) 0 var(--wp--preset--spacing--3) 1rem;
        border-bottom: 1px solid var(--wp--preset--color--rule);
    }
    .nav-group__menu {
        flex-direction: column;
    }
    .primary-nav__social {
        display: flex;
        gap: var(--wp--preset--spacing--6);
        padding-top: var(--wp--preset--spacing--5);
    }
}

/* Announcement banner (inc/announcements.php). Sits right after the
   header and scrolls away; only the header is sticky. Up to three stack,
   each a touch lighter than the one above. More than three may be in the
   markup (an inline script trims expired ones); CSS caps the stack. */
.wp-site-blocks > .cots-announcements {
    margin-block-start: 0;
}
.cots-announcement {
    background: var(--wp--preset--color--sun);
    color: var(--wp--preset--color--ink);
}
.cots-announcement:nth-child(2) {
    background: color-mix(in srgb, var(--wp--preset--color--sun) 86%, #fff);
}
.cots-announcement:nth-child(3) {
    background: color-mix(in srgb, var(--wp--preset--color--sun) 72%, #fff);
}
.cots-announcement:nth-child(n+4) {
    display: none;
}
.cots-announcement__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--4);
    padding-block: var(--wp--preset--spacing--3);
    text-align: center;
    line-height: 1.4;
}
/* balance: lines break evenly ("…The Art of the Forty / Ounce on
   Nov. 27…") instead of a full line and a stray word or two. */
.cots-announcement__message {
    margin: 0;
    text-wrap: balance;
}
@media (max-width: 767px) {
    .cots-announcement__inner {
        padding-block: var(--wp--preset--spacing--2);
        font-size: 0.875rem;
        line-height: 1.35;
    }
}
.cots-announcement__link {
    color: inherit;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.cots-announcement__link:hover {
    color: inherit;
    text-decoration-thickness: 3px;
}
/* The site-wide sun focus ring would vanish on the sun background. */
.cots-announcement__link:focus-visible {
    outline-color: var(--wp--preset--color--ink);
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--wp--preset--color--rule);
    padding-block: var(--wp--preset--spacing--7);
}
.footer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--5);
    align-items: flex-start;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--5);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--step--1);
}
.footer-nav a {
    color: var(--wp--preset--color--ink);
}
.footer-copy {
    color: var(--wp--preset--color--ink-soft);
    font-size: var(--wp--preset--font-size--step--1);
    margin: 0;
}
@media (min-width: 768px) {
    .footer-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------------
   Sections and shared type
   ------------------------------------------------------------------ */

/* Sections carry their own vertical padding; drop the layout's block gap
   between them so it isn't doubled. */
.wp-block-post-content > :is(.cots-hero, .cots-section) {
    margin-block-start: 0;
}

.cots-section {
    padding-block: var(--wp--preset--spacing--9);
}
.cots-band {
    background: var(--wp--preset--color--ground-sunk);
}
.cots-page {
    padding-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--9);
}
.cots-page__head {
    margin-bottom: var(--wp--preset--spacing--7);
}

.cots-measure {
    max-width: 65ch;
}
.cots-lead {
    font-size: var(--wp--preset--font-size--step-1);
    color: var(--wp--preset--color--ink-soft);
}
.cots-eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--wp--preset--font-size--step--1);
    font-weight: 600;
    color: var(--wp--preset--color--ink-soft);
}

.is-style-sun-underline {
    position: relative;
    display: inline-block;
    padding-bottom: var(--wp--preset--spacing--3);
    margin: 0 0 var(--wp--preset--spacing--6);
}
.is-style-sun-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    background: var(--wp--preset--color--sun);
}

.cots-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--4);
    /* Space below the whole row, not just the heading, so the link keeps
       its distance from the grid when it wraps under the heading. */
    margin-bottom: var(--wp--preset--spacing--6);
}
.cots-section-head > *,
.cots-section-head .is-style-sun-underline {
    margin-block: 0;
}
/* Each link stays whole, but a row of several (About's intro) wraps
   between them instead of running off the side of a phone. */
.cots-section-link {
    font-weight: 600;
    font-size: var(--wp--preset--font-size--step--1);
}
.cots-section-link a {
    white-space: nowrap;
}

.wp-element-button:hover {
    opacity: 0.9;
}
.wp-block-button.is-style-outline .wp-element-button:hover {
    opacity: 1;
    background: var(--wp--preset--color--ground-sunk);
}

/* Captions: Inter only below step-2 (DESIGN-DIRECTION.md), even when
   the element is technically a heading. */
.cots-meta,
.cots-availability,
.cots-product__title,
.cots-product__price,
.cots-hero__meta {
    font-family: var(--wp--preset--font-family--body);
}
.cots-meta {
    margin: var(--wp--preset--spacing--2) 0 0;
    font-size: var(--wp--preset--font-size--step--1);
    color: var(--wp--preset--color--ink-soft);
}
.cots-meta + .cots-meta {
    margin-top: 0;
}
.cots-availability {
    margin: var(--wp--preset--spacing--2) 0 0;
    font-size: var(--wp--preset--font-size--step--1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--leaf);
}
.cots-availability.is-sold {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--2);
    color: var(--wp--preset--color--ink-soft);
}
.cots-availability.is-sold::before {
    content: "";
    width: 20px;
    height: 3px;
    background: var(--wp--preset--color--sun);
}

/* ------------------------------------------------------------------
   Hero (blocks/hero)

   Full-width split: image panel, then a dark text panel. The hero is
   the one place the site puts color on a large surface, on purpose:
   it's the invitation. Two image modes:
     .is-photo  the slide's own hero image, cropped to fill the panel
     .is-art    an original with no hero image: the painting whole,
                over a blurred, darkened copy of itself
   With several slides, all are in the markup and an inline script keeps
   one; until it runs, or without JavaScript, only the first shows.
   ------------------------------------------------------------------ */

.cots-hero {
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--ground);
}
/* The hero starts right under the header. Drop the layout gap between the
   header and <main> there, or a strip of page background shows between
   them. */
.wp-site-blocks > main:has(> .wp-block-post-content > .cots-hero:first-child) {
    margin-block-start: 0;
}
.cots-hero__slides {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cots-hero__slide + .cots-hero__slide {
    display: none;
}
.cots-hero__slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.cots-hero__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56vh;
    overflow: hidden;
    isolation: isolate;
    background: #0f0e0c;
}
.cots-hero__media.is-photo .cots-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cots-hero__media.is-art {
    padding: var(--wp--preset--spacing--6) var(--cots-gutter);
}
.cots-hero__media.is-art .cots-hero__img {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(56vh - 64px);
    object-fit: contain;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.cots-hero__backdrop {
    position: absolute;
    inset: -10%;
    z-index: -1;
    width: 120%;
    max-width: none;
    height: 120%;
    object-fit: cover;
    filter: blur(48px) saturate(1.3) brightness(0.55);
}

.cots-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--wp--preset--spacing--7) var(--cots-gutter);
}
.cots-hero__copy > * {
    margin: 0;
}
.cots-hero__eyebrow {
    color: var(--wp--preset--color--sun);
}
.cots-hero__title {
    margin-top: var(--wp--preset--spacing--3);
    color: inherit;
    font-size: var(--wp--preset--font-size--step-5);
    line-height: 1.05;
}
.cots-hero__title a {
    color: inherit;
}
.cots-hero__meta {
    margin-top: var(--wp--preset--spacing--3);
    font-size: var(--wp--preset--font-size--step-1);
    color: rgba(250, 248, 244, 0.72);
}
/* Buttons stack in one column as wide as the longer label, so both are
   the same width. Grid instead of core's flex row. */
.cots-hero__copy .wp-block-buttons.cots-hero__ctas {
    display: grid;
    grid-template-columns: max-content;
    margin-top: var(--wp--preset--spacing--6);
    gap: var(--wp--preset--spacing--4);
}
.cots-hero__ctas .wp-block-button,
.cots-hero__ctas .wp-block-button__link {
    width: 100%;
    text-align: center;
}
/* Outline button on the dark panel: light border and text. */
.cots-hero .wp-block-button.is-style-outline .wp-element-button {
    border-color: var(--wp--preset--color--ground);
    color: var(--wp--preset--color--ground);
}
.cots-hero .wp-block-button.is-style-outline .wp-element-button:hover {
    background: rgba(250, 248, 244, 0.1);
}

@media (min-width: 960px) {
    .cots-hero__slide {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        height: min(78vh, 720px);
    }
    .cots-hero__media {
        min-height: 0;
    }
    .cots-hero__media.is-art {
        padding: var(--wp--preset--spacing--8);
    }
    .cots-hero__media.is-art .cots-hero__img {
        max-height: 100%;
    }
    /* Right edge lines up with the site's content edge on wide screens. */
    .cots-hero__copy {
        padding: var(--wp--preset--spacing--8) max(var(--cots-gutter), calc((100vw - 1104px) / 2)) var(--wp--preset--spacing--8) var(--wp--preset--spacing--8);
    }
}

/* ------------------------------------------------------------------
   Originals grid

   The art keeps its true proportions everywhere: no crop, no stretch.
   Below 768px it's one column, so there's no row to align across and
   the image renders at a real size, capped at 70vh so the piece and
   its caption fit one screen. From 768px, cards share rows, so each
   gets a fixed-height band and the art centers inside it with
   object-fit: contain. Captions land on a shared baseline however
   tall or wide each piece is.
   ------------------------------------------------------------------ */

.cots-art-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6);
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* The post template's flow layout gives every item after the first a
   top margin. In a grid that knocks the first card out of line and
   breaks the shared caption baseline, so zero it for both grids. */
.cots-art-grid > li,
.cots-shop-grid > li {
    margin: 0;
}
@media (min-width: 768px) {
    .cots-art-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1200px) {
    .cots-art-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cots-art__media,
.cots-art__media a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.cots-art__media a {
    width: 100%;
    height: 100%;
}

/* "Black light": on the card's picture, and a line on the piece's page.
   Sun on ink with a sky halo, the way paint glows under a UV lamp.
   The card's link wraps the picture tightly so the label lands on the
   art; the box height comes from --cots-media-h so the picture still
   fits without a percentage of the link's height. */
.cots-art__media:has(.cots-glow) a {
    position: relative;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 100%;
}
.wp-block-post-featured-image.cots-art__media:has(.cots-glow) img {
    max-height: var(--cots-media-h, 70vh);
}
.cots-glow {
    position: absolute;
    top: var(--wp--preset--spacing--3);
    left: var(--wp--preset--spacing--3);
    padding: 0.3em 0.8em;
    border-radius: 999px;
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--sun);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--step--1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgb(245 185 21 / 0.7);
    box-shadow: 0 0 0 1px var(--wp--preset--color--sky), 0 0 14px rgb(28 163 216 / 0.6);
    pointer-events: none;
}
.cots-glow.is-line {
    position: static;
    display: inline-block;
    margin: var(--wp--preset--spacing--3) 0 0;
}
.wp-block-post-featured-image.cots-art__media img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}
@media (min-width: 768px) {
    .cots-art__media {
        --cots-media-h: 340px;
        height: 340px;
        overflow: hidden;
    }
    .wp-block-post-featured-image.cots-art__media img {
        max-height: 100%;
    }
}
@media (min-width: 1200px) {
    .cots-art__media {
        --cots-media-h: 400px;
        height: 400px;
    }
}

.cots-art__caption {
    margin-top: var(--wp--preset--spacing--4);
}
.cots-art__title {
    margin: 0;
}
.cots-art__title a,
.cots-product__title a {
    color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------
   Shop tiles: uniform squares, because Printful mockups can take it
   ------------------------------------------------------------------ */

.cots-shop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--6);
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) {
    .cots-shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1200px) {
    .cots-shop-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.cots-product__media {
    margin: 0;
}
.cots-product__media img {
    border: 1px solid var(--wp--preset--color--rule);
}
.cots-product__title {
    margin: var(--wp--preset--spacing--4) 0 0;
    font-size: var(--wp--preset--font-size--step-0);
    font-weight: 600;
    line-height: 1.3;
}
.cots-product__price {
    margin: var(--wp--preset--spacing--1) 0 0;
    font-size: var(--wp--preset--font-size--step--1);
    color: var(--wp--preset--color--ink-soft);
}

/* ------------------------------------------------------------------
   Instagram (blocks/instagram): square tiles, 2 up on phones, 4 up
   from 768px. Posts are cropped to squares like Instagram's own grid.
   ------------------------------------------------------------------ */

.cots-ig-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--3);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 768px) {
    .cots-ig-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--wp--preset--spacing--5);
    }
}
.cots-ig-grid__item a {
    display: block;
}
.cots-ig-grid__item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
.cots-ig-grid__item a:hover img {
    opacity: 0.85;
}

/* ------------------------------------------------------------------
   About strip
   ------------------------------------------------------------------ */

.cots-about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--7);
    align-items: start;
}
.cots-about__media {
    margin: 0;
}
/* Fills its column; on phones capped so it doesn't push the copy a full
   screen down. */
.cots-about__media img {
    width: 100%;
    max-width: 320px;
    height: auto;
}
.cots-about__copy > :first-child {
    margin-top: 0;
}
@media (min-width: 768px) {
    .cots-about__inner {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
    .cots-about__media img {
        max-width: 420px;
    }
}

/* ------------------------------------------------------------------
   Contact + form
   ------------------------------------------------------------------ */

.cots-contact {
    scroll-margin-top: var(--wp--preset--spacing--5);
}
.cots-contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--7);
}
.cots-contact__copy > :first-child {
    margin-top: 0;
}
@media (min-width: 768px) {
    .cots-contact__inner {
        grid-template-columns: 1fr 1.2fr;
    }
}

.cots-form form {
    display: grid;
    gap: var(--wp--preset--spacing--2);
}
.cots-form label {
    margin-top: var(--wp--preset--spacing--3);
    font-size: var(--wp--preset--font-size--step--1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--ink-soft);
}
.cots-form input,
.cots-form textarea {
    width: 100%;
    font: inherit;
    padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 2px;
    background: var(--wp--preset--color--ground);
    color: var(--wp--preset--color--ink);
}
.cots-form input:focus-visible,
.cots-form textarea:focus-visible {
    border-color: var(--wp--preset--color--ink);
}
.cots-form .wp-block-button {
    margin-top: var(--wp--preset--spacing--4);
}
.cots-form__notice {
    margin: 0 0 var(--wp--preset--spacing--4);
    padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
    border-left: 4px solid var(--wp--preset--color--leaf);
    background: var(--wp--preset--color--ground-sunk);
}
.cots-form__notice.is-error {
    border-left-color: var(--wp--preset--color--ember);
}
/* Honeypot: off-screen, not display:none, so naive bots still fill it. */
.cots-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   Single artwork
   ------------------------------------------------------------------ */

.cots-back {
    margin: 0 0 var(--wp--preset--spacing--6);
}
/* On an artwork page the back link pins under the header for the whole
   page: it sits outside the photo column, so it isn't pushed up when that
   column runs out near the footer. */
@media (min-width: 960px) {
    .cots-single ~ * .cots-back,
    .cots-page > .cots-back {
        position: sticky;
        top: 61px;
        z-index: 2;
        margin-bottom: var(--wp--preset--spacing--5);
        padding-block: var(--wp--preset--spacing--3);
        background: var(--wp--preset--color--ground);
    }
}
.cots-single {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--7);
    align-items: start;
}
.cots-single__media {
    margin: 0;
}

/* Artwork gallery (blocks/artwork-gallery). Without JavaScript every photo
   shows, stacked. The script adds .is-interactive, which switches to one
   photo at a time with a thumbnail strip. */
.cots-gallery__item {
    margin: 0 0 var(--wp--preset--spacing--4);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cots-gallery__caption,
.cots-gallery__thumb-label {
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--wp--preset--color--ink-soft);
}
.cots-gallery__caption {
    margin-top: var(--wp--preset--spacing--2);
}
.cots-gallery__img {
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}
.cots-gallery.is-interactive .cots-gallery__item {
    display: none;
    margin-bottom: 0;
}
.cots-gallery.is-interactive .cots-gallery__item.is-active {
    display: flex;
}
.cots-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--3);
    margin: var(--wp--preset--spacing--4) 0 0;
    padding: 0;
    list-style: none;
}
.cots-gallery__thumb {
    display: block;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.cots-gallery__thumb-label {
    display: block;
    max-width: 72px;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}
.cots-gallery__thumb-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    opacity: 0.65;
}
.cots-gallery__thumb.is-active {
    border-color: var(--wp--preset--color--sun);
}
.cots-gallery__thumb.is-active .cots-gallery__thumb-img,
.cots-gallery__thumb:hover .cots-gallery__thumb-img {
    opacity: 1;
}
.cots-single__copy > :first-child {
    margin-top: 0;
}
.cots-single__body {
    margin-top: var(--wp--preset--spacing--6);
}
.cots-single__ask {
    margin: var(--wp--preset--spacing--7) 0 0;
    font-size: var(--wp--preset--font-size--step-2);
}
@media (min-width: 960px) {
    .cots-single {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--wp--preset--spacing--8);
    }
    /* The piece stays put while the inquiry form scrolls: the photo column
       and the details pin below the sticky header (61px). Only the form,
       the tallest part, moves. */
    /* Below the header (61px) *and* the pinned back-link bar (~49px), so
       the photo and details don't slide under it. */
    .cots-single__media,
    .cots-single__info {
        position: sticky;
        top: calc(61px + 3.5rem);
    }
    /* Keep the whole photo column shorter than the screen, or it can't
       stay pinned (the back link and thumbnails would scroll away). */
    .cots-single__media .cots-gallery__img {
        max-height: calc(100vh - 18rem);
    }
    .cots-single__info {
        z-index: 1;
        /* Opaque so the description and form scroll behind it, not through
           it. Only the title, medium and availability pin, so the block
           stays short; the description scrolls with the form. */
        background: var(--wp--preset--color--ground);
        padding-bottom: var(--wp--preset--spacing--4);
    }
    /* Keep focused fields out from under the pinned details. */
    .cots-single__copy :is(input, textarea, button, a) {
        scroll-margin-top: 16rem;
    }
}

/* ------------------------------------------------------------------
   Story pages (About): intro, text-beside-images sections, motto

   Text comes first in the markup, so on phones you read before you
   scroll past photos. From 960px the images move into a side column
   (right by default, left with .is-media-left) and stay in view while
   the longer text scrolls. These are photos, not artwork, so cropping
   to a height cap is fine here.
   ------------------------------------------------------------------ */

.cots-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--6);
    align-items: end;
    padding-bottom: var(--wp--preset--spacing--7);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}
.cots-intro__copy > * {
    margin: 0;
}
.cots-intro__copy > * + * {
    margin-top: var(--wp--preset--spacing--3);
}
.cots-intro__img {
    margin: 0;
}
.cots-intro__img img {
    width: 240px;
    aspect-ratio: 1;
    object-fit: cover;
}
@media (min-width: 768px) {
    .cots-intro {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .cots-intro__img img {
        width: 320px;
    }
}

.cots-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--7);
    padding-block: var(--wp--preset--spacing--8);
}
.cots-feature__copy {
    max-width: 65ch;
}
.cots-feature__copy > :first-child {
    margin-top: 0;
}
.cots-feature__copy .cots-eyebrow {
    margin-bottom: var(--wp--preset--spacing--2);
}
.cots-feature__media {
    display: grid;
    gap: var(--wp--preset--spacing--4);
    align-content: start;
}
.cots-feature__media > * {
    margin: 0;
}
/* Two or more photos sit side by side on phones instead of stacking. */
.cots-feature__media:has(> figure + figure) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cots-feature__img img {
    width: 100%;
    max-height: 60vh;
    object-fit: cover;
}
@media (min-width: 960px) {
    .cots-feature {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--wp--preset--spacing--8);
        align-items: start;
    }
    .cots-feature.is-media-left {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }
    .cots-feature.is-media-left .cots-feature__media {
        order: -1;
    }
    .cots-feature__media,
    .cots-feature__media:has(> figure + figure) {
        grid-template-columns: minmax(0, 1fr);
        position: sticky;
        top: var(--wp--preset--spacing--6);
    }
    .cots-feature__img img {
        max-height: 560px;
    }
}
/* Photos under the copy instead of beside it (Sonic Corners' intro), two
   across, so the page doesn't scroll past a tall column of them. */
@media (min-width: 960px) {
    .cots-feature.is-media-below {
        grid-template-columns: minmax(0, 1fr);
    }
    .cots-feature.is-media-below .cots-feature__media:has(> figure + figure) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }
    .cots-feature.is-media-below .cots-feature__img img {
        aspect-ratio: 4 / 3;
        max-height: none;
    }
}
/* A run of small photos (Sonic Corners' band photos): square tiles, three
   across from 600px, so more can be added without the column growing
   taller than the copy beside it. */
.cots-feature__media.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cots-feature__media.is-grid .cots-feature__img img {
    aspect-ratio: 1;
    max-height: none;
}
@media (min-width: 600px) {
    .cots-feature__media.is-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* About's photos: two across at every width, so a column of four or five
   is about as tall as the copy beside it. Tiles are cropped to one shape
   per row (4:5, or square with is-square); is-wide spans the row at 5:4,
   for artwork and landscapes. (A set ratio, not auto: core's
   contain-intrinsic-size on lazy images would make auto 1500px tall.) */
.cots-feature__media.is-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cots-feature__media.is-mosaic .cots-feature__img img {
    aspect-ratio: 4 / 5;
    height: auto;
    max-height: none;
}
.cots-feature__media.is-mosaic .cots-feature__img.is-square img {
    aspect-ratio: 1;
}
.cots-feature__media.is-mosaic .cots-feature__img.is-wide {
    grid-column: 1 / -1;
}
.cots-feature__media.is-mosaic .cots-feature__img.is-wide img {
    aspect-ratio: 5 / 4;
}
/* A short label under a photo ("Then", "Now" on the two logos). */
.cots-feature__img .wp-element-caption {
    margin: var(--wp--preset--spacing--2) 0 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--wp--preset--font-size--step--1);
    font-weight: 600;
    color: var(--wp--preset--color--ink-soft);
}

.cots-motto {
    max-width: 22ch;
    margin-inline: auto;
    padding-block: var(--wp--preset--spacing--8);
    text-align: center;
    text-wrap: balance;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--step-4);
    line-height: 1.1;
}
.cots-motto::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto var(--wp--preset--spacing--5);
    border-radius: 50%;
    background: var(--wp--preset--color--sun);
}

/* Press links (blocks/press-list): a plain list of headlines, each with
   its site name underneath. */
.cots-press-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 42rem;
}
.cots-press-list__item a {
    display: block;
    padding-block: var(--wp--preset--spacing--3);
    border-bottom: 1px solid var(--wp--preset--color--rule);
    color: var(--wp--preset--color--ink);
    text-decoration: none;
}
.cots-press-list__title {
    display: block;
    font-weight: 600;
}
.cots-press-list__host {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--wp--preset--color--ink-soft);
}
.cots-press-list__item a:hover .cots-press-list__title {
    color: var(--wp--preset--color--ember);
}

/* Collaborations (blocks/collab-grid): covers in square cells with title
   and credit, grouped under a heading per category. */
.cots-collab-group + .cots-collab-group {
    margin-top: var(--wp--preset--spacing--8);
}
.cots-collab-group__title {
    margin: 0 0 var(--wp--preset--spacing--4);
    font-size: var(--wp--preset--font-size--step-1);
}
.cots-collab-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--wp--preset--spacing--5);
}
.cots-collab-grid__item a {
    display: block;
    color: var(--wp--preset--color--ink);
    text-decoration: none;
}
.cots-collab-grid__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    /* Whole cover, never cropped; odd shapes sit on a quiet backdrop. */
    object-fit: contain;
    background: var(--wp--preset--color--ground-sunk);
}
.cots-collab-grid__title {
    display: block;
    margin-top: var(--wp--preset--spacing--2);
    font-weight: 600;
    line-height: 1.3;
}
.cots-collab-grid__credit {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--wp--preset--color--ink-soft);
}
.cots-collab-grid__item a:hover .cots-collab-grid__title {
    color: var(--wp--preset--color--ember);
}
/* A cover with its photo: two cells wide once the grid has two columns,
   each image lining up with the cells around it; title and credit under
   the cover, the photo's caption under the photo. */
/* Phones (one column): the cover and its photo stack, each full width,
   instead of splitting one cell into two small images. */
.cots-collab-grid__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--5);
    gap: var(--wp--preset--spacing--2);
    align-items: start;
}
.cots-collab-grid__main {
    display: block;
}
.cots-collab-grid__img.is-photo {
    object-fit: cover;
}
.cots-collab-grid__photo {
    display: block;
}
.cots-collab-grid__caption {
    display: block;
    margin-top: var(--wp--preset--spacing--1);
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--wp--preset--color--ink-soft);
}
@media (min-width: 30rem) {
    .cots-collab-grid__item.is-pair {
        grid-column: span 2;
    }
    .cots-collab-grid__pair {
        grid-template-columns: 1fr 1fr;
    }
}

/* Kind words (inc/kind-words.php): a client's quote under a card, on a
   piece's page, and a few together in Work with Lance. */
.cots-kind {
    display: block;
    margin: var(--wp--preset--spacing--3) 0 0;
    padding-left: var(--wp--preset--spacing--3);
    border-left: 3px solid var(--wp--preset--color--sun);
    font-family: var(--wp--preset--font-family--body);
}
.cots-kind__quote,
.cots-kind__quote p {
    display: block;
    margin: 0;
    font-size: var(--wp--preset--font-size--step--1);
    font-style: italic;
    line-height: 1.45;
    color: var(--wp--preset--color--ink);
}
.cots-kind__by {
    display: block;
    margin-top: var(--wp--preset--spacing--1);
    font-size: var(--wp--preset--font-size--step--1);
    color: var(--wp--preset--color--ink-soft);
}
.cots-kind__by::before {
    content: "— ";
}
.cots-kind.is-single {
    margin-block: var(--wp--preset--spacing--6);
    padding-left: var(--wp--preset--spacing--4);
}
.cots-kind.is-single .cots-kind__quote p {
    font-size: var(--wp--preset--font-size--step-1);
}
.cots-kind-words {
    margin-block: var(--wp--preset--spacing--7);
}
.cots-kind-words__title {
    margin: 0 0 var(--wp--preset--spacing--4);
    font-size: var(--wp--preset--font-size--step-1);
}
.cots-kind-words__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--wp--preset--spacing--5);
}
.cots-kind-words .cots-kind {
    margin: 0;
}
.cots-kind-words .cots-kind__quote p {
    font-size: var(--wp--preset--font-size--step-0);
}

/* Jump links above long grouped pages (artwork-series, collab-grid).
   Same look as the shop's category links. */
.cots-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
    margin-bottom: var(--wp--preset--spacing--8);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--step--1);
}
.cots-jump a {
    color: var(--wp--preset--color--ink);
    padding-block: var(--wp--preset--spacing--1);
    border-bottom: 3px solid transparent;
}
.cots-jump a:hover {
    text-decoration: none;
}
/* Mouse only: on a phone a tapped link keeps :hover until the next tap,
   so it stayed underlined after scrolling on to another section. */
@media (hover: hover) {
    .cots-jump a:hover {
        border-bottom-color: var(--wp--preset--color--sun);
    }
}
.cots-series__group,
.cots-collab-group {
    scroll-margin-top: var(--wp--preset--spacing--6);
}
/* Portfolio, Client work and the homepage: the jump links stay pinned
   under the sticky header while the groups scroll past. Every link stays
   on screen; on phones they wrap onto a second or third row, packed
   tighter. Jumping to a group lands its heading below the bar: the footer
   script (inc/ui.php) measures the bar into --cots-jump-h. */
.cots-series > .cots-jump,
.cots-collab-groups > .cots-jump {
    position: sticky;
    top: var(--cots-header-h);
    z-index: 40;
    padding-block: var(--wp--preset--spacing--3);
    background: var(--wp--preset--color--ground);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}
.cots-series:has(> .cots-jump) .cots-series__group,
.cots-collab-groups:has(> .cots-jump) .cots-collab-group,
.cots-home-nav ~ .cots-section {
    scroll-margin-top: calc(var(--cots-jump-h, 3.5rem) + var(--wp--preset--spacing--5));
}
/* Phones: each link is a small rounded chip, so wrapped rows read as
   separate links rather than a block of text. The section in view (and
   the shop's current category, shop.css) fills with sun. */
@media (max-width: 767px) {
    .cots-jump {
        gap: 5px;
        font-size: 0.8125rem;
        line-height: 1.25;
    }
    .cots-jump a {
        padding: 4px 9px;
        border: 1px solid var(--wp--preset--color--rule);
        border-radius: 999px;
        background: var(--wp--preset--color--ground-sunk);
    }
    .cots-jump a[aria-current="true"] {
        background: var(--wp--preset--color--sun);
        border-color: var(--wp--preset--color--sun);
    }
    .cots-series > .cots-jump,
    .cots-collab-groups > .cots-jump,
    .cots-home-nav .cots-jump {
        padding-block: var(--wp--preset--spacing--2);
    }
}

/* Homepage section links (inc/ui.php). Fixed under the header, out of
   sight until the hero has scrolled up behind the header; the footer
   script adds .is-shown. Without JavaScript it stays hidden. */
/* (The child selector outranks the content-width rule of the page's
   constrained layout, so the bar spans the screen.) */
.is-layout-constrained > .cots-home-nav,
.cots-home-nav {
    position: fixed;
    top: var(--cots-header-h);
    left: 0;
    right: 0;
    z-index: 40;
    max-width: none;
    margin: 0;
    background: var(--wp--preset--color--ground);
    border-bottom: 1px solid var(--wp--preset--color--rule);
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.cots-home-nav.is-shown {
    visibility: visible;
    transform: none;
    transition: transform 0.2s ease;
}
.cots-home-nav .cots-jump {
    margin-block: 0;
    padding-block: var(--wp--preset--spacing--3);
}
.cots-jump a[aria-current="true"] {
    border-bottom-color: var(--wp--preset--color--sun);
}

/* Floating buttons, bottom right (parts/footer.html): back to top on
   every page once you've scrolled a screen and a half, and on phones the
   social links above it, as tabs against the screen edge. */
.cots-float {
    position: fixed;
    right: 0;
    bottom: calc(var(--wp--preset--spacing--5) + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--wp--preset--spacing--2);
    pointer-events: none;
}
.cots-float__social,
.cots-float__top {
    pointer-events: auto;
    background: var(--wp--preset--color--ground);
    border: 1px solid var(--wp--preset--color--rule);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: 0 6px 20px rgb(26 24 21 / 0.12);
}
.cots-float__social {
    flex-direction: column;
    gap: 0;
    padding-block: var(--wp--preset--spacing--1);
}
.cots-float__social a,
.cots-float__top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--wp--preset--color--ink);
}
.cots-float__top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}
.cots-float__top.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s, transform 0.2s;
}
.cots-float__top:hover {
    color: var(--wp--preset--color--ember);
    text-decoration: none;
}
/* Nothing floating over the cart and checkout forms. */
.woocommerce-cart .cots-float__social,
.woocommerce-checkout .cots-float__social {
    display: none;
}
@media (min-width: 768px) {
    .cots-float {
        right: var(--wp--preset--spacing--5);
    }
    .cots-float__social {
        display: none;
    }
    .cots-float__top {
        border-right: 1px solid var(--wp--preset--color--rule);
        border-radius: 50%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cots-home-nav,
    .cots-home-nav.is-shown,
    .cots-float__top,
    .cots-float__top.is-shown {
        transition: none;
    }
}
.cots-series__group + .cots-series__group {
    margin-top: var(--wp--preset--spacing--9);
}

/* Email signup (blocks/signup-form). Reuses the contact form's field
   styling; the fields sit in a row where there's room. */
.cots-signup {
    max-width: 44rem;
}
.cots-signup__fields {
    display: grid;
    gap: var(--wp--preset--spacing--2);
}
.cots-signup__fields .wp-block-button {
    margin-top: var(--wp--preset--spacing--3);
}
.cots-signup__note {
    margin: var(--wp--preset--spacing--3) 0 0;
    font-size: var(--wp--preset--font-size--step--1);
    color: var(--wp--preset--color--ink-soft);
}
@media (min-width: 768px) {
    .cots-signup__fields {
        grid-template-columns: 1fr 1fr auto;
        align-items: end;
    }
    .cots-signup__fields .wp-block-button {
        margin-top: 0;
    }
}
/* Footer signup: a band above the logo row, copy beside the form once
   there's room. Heading and lead match the page sections (Get in touch). */
.footer-signup {
    display: grid;
    gap: var(--wp--preset--spacing--5);
    padding-bottom: var(--wp--preset--spacing--7);
    margin-bottom: var(--wp--preset--spacing--7);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}
.footer-signup__title {
    margin-bottom: var(--wp--preset--spacing--4);
    font-size: var(--wp--preset--font-size--step-3);
}
.footer-signup__lead {
    margin: 0;
}
.footer-signup .cots-signup {
    max-width: none;
    margin: 0;
}
@media (min-width: 768px) {
    .footer-signup {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
        gap: var(--wp--preset--spacing--8);
        align-items: center;
    }
}
/* In a page section the constrained layout would centre the form;
   keep it on the heading's edge. */
.cots-signup-section .cots-signup {
    margin-inline: 0 !important;
}

/* ------------------------------------------------------------------
   Search (inc/search.php): the header box and the results page
   ------------------------------------------------------------------ */

.header-search__toggle {
    display: inline-flex;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    list-style: none;
}
.header-search__toggle::-webkit-details-marker {
    display: none;
}
.header-search__toggle:hover,
.header-search[open] .header-search__toggle {
    color: var(--wp--preset--color--ember);
}
/* Hangs from the header's right edge (.header-inner is positioned), not
   from the icon, so it never runs off a phone screen. */
.header-search__panel {
    position: absolute;
    top: 100%;
    right: var(--cots-gutter);
    z-index: 60;
    width: 26rem;
    max-width: calc(100vw - 2 * var(--cots-gutter));
    padding: var(--wp--preset--spacing--4);
    background: var(--wp--preset--color--ground);
    border: 1px solid var(--wp--preset--color--rule);
    box-shadow: 0 16px 40px rgba(26, 24, 21, 0.14);
}
.cots-form .cots-search-form {
    display: flex;
    gap: var(--wp--preset--spacing--2);
}
.cots-search-form input {
    flex: 1;
    min-width: 0;
}
.cots-search-form .wp-element-button {
    flex: none;
}

.cots-search__form {
    max-width: 36rem;
    margin-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
}
.cots-search__group + .cots-search__group {
    margin-top: var(--wp--preset--spacing--9);
}
.cots-search__group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
    margin-bottom: var(--wp--preset--spacing--6);
    padding-bottom: var(--wp--preset--spacing--3);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}
.cots-search__group-title {
    margin: 0;
    font-size: var(--wp--preset--font-size--step-2);
}
.cots-search__see-all {
    font-weight: 600;
}
/* Client work covers: posters and album art aren't all square, so the
   whole cover shows on a sunk tile instead of being cropped. */
.cots-search__collab {
    display: grid;
    gap: var(--wp--preset--spacing--3);
    color: inherit;
    text-decoration: none;
}
.cots-search__collab-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--wp--preset--color--ground-sunk);
    border: 1px solid var(--wp--preset--color--rule);
}
.cots-search__collab:hover .cots-product__title {
    color: var(--wp--preset--color--ember);
}
.cots-search__pages {
    display: grid;
    gap: var(--wp--preset--spacing--5);
    max-width: 65ch;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cots-search__pages a {
    font-weight: 600;
    font-size: var(--wp--preset--font-size--step-1);
}
.cots-search__pages .cots-meta {
    margin-top: var(--wp--preset--spacing--1);
}
.cots-search__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wp--preset--spacing--3);
    margin-top: var(--wp--preset--spacing--8);
}
.cots-search__pagination .current {
    font-weight: 600;
}