:root {
    --font-baskerville: 'Baskerville';
    --font-golden-brown: 'Golden Brown';
    --font-sweet-sans: 'Sweet Sans';
    --font-icons: 'gadabout-icons';
    /* TODO: Add theme fonts here */

    --theme-color-dark-blue: #006794;
    --theme-color-light-blue: #80B3D2;
    --theme-color-white: #FFFFFF;
    /* TODO: Add theme colors here */
}

/*----------------------------------------------------------------------------

    Page-template color flips (front end + editor)

    Defined HERE, not style.css, because blocks.css is enqueued on BOTH the front
    end (enqueue_block_assets) and the editor — so one rule covers both contexts.
    On the front end WordPress core adds the `page-template-*` class to <body>
    automatically; in the editor, editor.js mirrors it onto the canvas. Two
    selectors so the rule wins over the base body color in each context:
      - `body.…`                    beats the element-level default on the front end
      - `.editor-styles-wrapper.…`  beats theme.json's editor default in the editor

    To add another flip template: create `page-<slug>.php` (with a Template Name
    header) and copy this rule with `page-template-page-<slug>`. No JS changes —
    editor.js is generic.
----------------------------------------------------------------------------*/
body.page-template-page-blue-background,
.editor-styles-wrapper.page-template-page-blue-background {
    background-color: var(--theme-color-light-blue);
    color: var(--theme-color-white);
}
@media (max-width: 782px) {
    .wp-block-columns.reverse-on-mobile {
        flex-direction: column-reverse;
    }
}

/*----------------------------------------------------------------------------

    Font-combination block styles

    Registered in functions.php (ginger_ross_register_block_styles) for
    core/paragraph and core/heading. Keep this list in the same order as the
    registrations: font family alphabetical, then size ascending.

----------------------------------------------------------------------------*/
.entry-content .is-style-baskerville-24,
.editor-styles-wrapper .is-style-baskerville-24 {
    font-family: var(--font-baskerville);
    font-size: 24px;
    letter-spacing: 0.5px;
}

.entry-content .is-style-golden-brown-40,
.editor-styles-wrapper .is-style-golden-brown-40 {
    font-family: var(--font-golden-brown);
    font-size: 40px;
    letter-spacing: 0.5px;
}

.entry-content .is-style-sweet-sans-10,
.editor-styles-wrapper .is-style-sweet-sans-10 {
    font-family: var(--font-sweet-sans);
    font-size: 10px;
    letter-spacing: 1.9px;
}

.entry-content .is-style-sweet-sans-12,
.editor-styles-wrapper .is-style-sweet-sans-12 {
    font-family: var(--font-sweet-sans);
    font-size: 12px;
    letter-spacing: 1.9px;
}

.entry-content .is-style-sweet-sans-13,
.editor-styles-wrapper .is-style-sweet-sans-13 {
    font-family: var(--font-sweet-sans);
    font-size: 13px;
    line-height: 24px;
}

.entry-content .is-style-sweet-sans-14,
.editor-styles-wrapper .is-style-sweet-sans-14 {
    font-family: var(--font-sweet-sans);
    font-size: 14px;
}

.entry-content .is-style-sweet-sans-15,
.editor-styles-wrapper .is-style-sweet-sans-15 {
    font-family: var(--font-sweet-sans);
    font-size: 15px;
    line-height: 32px;
}

.entry-content .is-style-sweet-sans-17,
.editor-styles-wrapper .is-style-sweet-sans-17 {
    font-family: var(--font-sweet-sans);
    font-size: 17px;
    line-height: 30px;
}

.entry-content .is-style-sweet-sans-18,
.editor-styles-wrapper .is-style-sweet-sans-18 {
    font-family: var(--font-sweet-sans);
    font-size: 18px;
}

@media (max-width: 782px) {
    .entry-content .is-style-baskerville-24,
    .editor-styles-wrapper .is-style-baskerville-24 {
        font-size: 20px;
    }

    .entry-content .is-style-golden-brown-40,
    .editor-styles-wrapper .is-style-golden-brown-40 {
        font-size: 36px;
    }
}

.entry-content a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.entry-content a:hover,
.entry-content a:focus-visible {
    color: var(--theme-color-light-blue);
}
body.page-template-page-blue-background .entry-content a:hover,
body.page-template-page-blue-background .entry-content a:focus-visible {
    color: var(--theme-color-dark-blue);
}

.entry-content .underlined-links a,
.editor-styles-wrapper .underlined-links a {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: none;
}
.entry-content .underlined-links a:hover,
.entry-content .underlined-links a:focus-visible,
body.page-template-page-blue-background .entry-content .underlined-links a:hover,
body.page-template-page-blue-background .entry-content .underlined-links a:focus-visible,
.editor-styles-wrapper .underlined-links a:hover,
.editor-styles-wrapper .underlined-links a:focus-visible {
    color: inherit;
}
.entry-content .underlined-links a::after,
.editor-styles-wrapper .underlined-links a::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: '';
    background-color: currentColor;
    transition: height 0.2s ease;
}
.entry-content .underlined-links a:hover::after,
.entry-content .underlined-links a:focus-visible::after,
.editor-styles-wrapper .underlined-links a:hover::after,
.editor-styles-wrapper .underlined-links a:focus-visible::after {
    height: 4px;
}

/*----------------------------------------------------------------------------

    Example Grid / Example Card (starter custom blocks)

    Loaded in both the editor and the front end (enqueue_block_assets), so the
    editor preview matches the front end. The grid is a custom CSS grid (not
    WordPress layout), so the column/row gap comes from the block-spacing control
    wired by hand in index.js + render.php (falls back to 32px). The column count
    is a reactive class (has-N-columns), not a CSS var, so the editor updates live.

----------------------------------------------------------------------------*/
.example-grid__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 782px) {
    .example-grid.has-2-columns .example-grid__inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .example-grid.has-3-columns .example-grid__inner {
        grid-template-columns: repeat(3, 1fr);
    }
}
.example-card {
    padding: 24px;
    border: 1px solid currentColor;
}
.example-card__content {
    margin: 0;
}

/*----------------------------------------------------------------------------

    Recent Projects block

    The public block uses one title list and one coordinated image stack. The
    editor keeps every child visible as a compact selection card so responsive
    visibility settings can never make authored content impossible to edit.

----------------------------------------------------------------------------*/
.recent-projects {
    position: relative;
    color: var(--theme-color-white);
    background-color: var(--theme-color-light-blue);
}
.recent-projects__layout {
    display: grid;
    grid-template-areas:
        "media"
        "content";
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}
.recent-projects__content {
    grid-area: content;
    min-width: 0;
}
.recent-projects__heading {
    margin: 0 0 36px;
    color: inherit;
    font-family: var(--font-sweet-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1.9px;
    text-transform: uppercase;
}
.recent-projects__list {
    display: grid;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.recent-projects__item {
    min-width: 0;
    margin: 0;
}
.entry-content .recent-projects__link,
.editor-styles-wrapper .recent-projects__link {
    display: inline-flex;
    max-width: 100%;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 24px;
    color: var(--theme-color-white);
    text-decoration: none;
}
.entry-content .recent-projects__link:hover,
.entry-content .recent-projects__link:focus-visible,
.editor-styles-wrapper .recent-projects__link:hover,
.editor-styles-wrapper .recent-projects__link:focus-visible {
    color: var(--theme-color-white);
}
.entry-content .recent-projects__link:focus-visible,
.editor-styles-wrapper .recent-projects__link:focus-visible {
    outline: 2px solid var(--theme-color-white);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px var(--theme-color-dark-blue);
}
.recent-projects__title {
    min-width: 0;
    font-family: var(--font-golden-brown);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.5px;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}
.recent-projects__view {
    display: none;
    flex: 0 0 auto;
    font-family: var(--font-baskerville);
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}
.recent-projects__media {
    position: relative;
    grid-area: media;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-color: var(--theme-color-light-blue);
}
.recent-projects__media-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    background-color: var(--theme-color-light-blue);
    transition: opacity 0.3s ease;
}
.recent-projects__media-layer.is-outgoing {
    z-index: 1;
    opacity: 1;
}
.recent-projects__media-layer.is-visible {
    z-index: 2;
    opacity: 1;
}
.recent-projects__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.recent-projects__media-layer.has-no-image .recent-projects__image {
    display: none;
}
.recent-projects.is-switching-without-motion .recent-projects__media-layer {
    transition: none;
}

/* The three controls use the exact ranges documented in DEFAULTS.md. */
@media (max-width: 480px) {
    .recent-projects.is-hidden-mobile {
        display: none;
    }
}
@media (min-width: 481px) and (max-width: 782px) {
    .recent-projects.is-hidden-tablet {
        display: none;
    }
}
@media (min-width: 783px) {
    .recent-projects.is-hidden-desktop {
        display: none;
    }
    .recent-projects__layout {
        grid-template-areas: "content media";
        grid-template-columns: minmax(max-content, 2fr) minmax(0, 3fr);
        gap: clamp(32px, 5.6vw, 100px);
        align-items: start;
    }
    .recent-projects__content {
        align-self: center;
    }
    .recent-projects__heading {
        margin-bottom: 56px;
    }
    .recent-projects__title {
        font-size: 40px;
    }
    .entry-content .recent-projects__link,
    .editor-styles-wrapper .recent-projects__link {
        max-width: none;
        flex-wrap: nowrap;
    }
    .recent-projects__title,
    .recent-projects__view {
        overflow-wrap: normal;
        white-space: nowrap;
    }
}
@media (min-width: 783px) and (hover: hover) {
    .recent-projects__view {
        display: inline-block;
        visibility: hidden;
    }
    .recent-projects__item.is-active .recent-projects__view {
        visibility: visible;
    }
}
@media (prefers-reduced-motion: reduce) {
    .recent-projects__media-layer {
        transition-duration: 0.01ms;
    }
}

/* Editor-only parent/child presentation. */
.recent-projects--editor .recent-projects__layout {
    grid-template-areas: "content media";
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(32px, 5.6vw, 100px);
    align-items: start;
}
.recent-projects--editor .recent-projects__content {
    align-self: center;
}
.recent-projects__visibility-notice {
    margin: 0 0 28px;
    color: #1e1e1e;
}
.recent-projects--editor .recent-projects__heading {
    margin-bottom: 56px;
}
.recent-projects__editor-list {
    display: grid;
    gap: 34px;
}
.recent-projects__editor-list > .block-list-appender {
    position: static;
    width: 100%;
}
.recent-projects__editor-list > .block-list-appender .block-list-appender__toggle {
    width: 100%;
    min-height: 52px;
    color: var(--theme-color-white);
    border: 1px dashed rgba(255, 255, 255, 0.65);
    box-shadow: none;
}
.recent-projects__editor-list > .block-list-appender .block-list-appender__toggle:hover,
.recent-projects__editor-list > .block-list-appender .block-list-appender__toggle:focus-visible {
    color: var(--theme-color-white);
    border-color: var(--theme-color-white);
    box-shadow: none;
}
.recent-project-selection-editor {
    margin: 0;
}
.recent-project-selection {
    min-width: 0;
    color: var(--theme-color-white);
}
.recent-project-selection.is-empty,
.recent-project-selection.is-invalid {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 14px 16px;
    border: 1px dashed rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.08);
}
.recent-project-selection__title,
.recent-project-selection__message {
    margin: 0;
    color: inherit;
}
.recent-project-selection__title {
    display: flex;
    align-items: baseline;
    gap: 24px;
    flex-wrap: nowrap;
    font-family: var(--font-golden-brown);
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-transform: uppercase;
}
.recent-project-selection__view {
    display: none;
    flex: 0 0 auto;
    font-family: var(--font-baskerville);
    font-size: 20px;
    font-style: italic;
    line-height: 1.2;
    text-transform: none;
}
.recent-project-selection-editor.is-editor-active .recent-project-selection__view {
    display: inline-block;
}
.recent-project-selection__message {
    font-family: var(--font-sweet-sans);
    font-size: 14px;
    line-height: 1.5;
}
.recent-project-selection__message--warning {
    font-weight: 700;
}
.recent-projects__editor-media {
    position: relative;
    grid-area: media;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: rgba(255, 255, 255, 0.12);
}
.recent-projects__editor-image,
.recent-projects__editor-image-placeholder {
    width: 100%;
    height: 100%;
}
.recent-projects__editor-image {
    display: block;
    object-fit: cover;
}
.recent-projects__editor-image-placeholder {
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--theme-color-white);
    font-family: var(--font-sweet-sans);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/*----------------------------------------------------------------------------

    Project Gallery + Project Image blocks

    The parent owns the Project title so alignment and padding apply equally to
    the heading and images. Its inner custom flex layout applies native block
    spacing and exposes the column gap used by Half/Third basis calculations.

----------------------------------------------------------------------------*/
.project-gallery__title {
    padding-top: 0;
    margin: 30px 0 20px;
    color: var(--theme-color-dark-blue);
    font-family: var(--font-golden-brown);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.5px;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}
.project-gallery__title:last-child {
    margin-bottom: 0;
}
.project-gallery.alignfull > .project-gallery__title {
    padding-left: 24px;
}
.project-gallery__title-fallback {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
body.single-project.floating-header .project-gallery,
.editor-styles-wrapper.project-template-floating-header .project-gallery {
    position: relative;
}
body.single-project.floating-header .project-gallery__title,
.editor-styles-wrapper.project-template-floating-header .project-gallery__title {
    position: absolute;
    top: clamp(110px, calc(15vw - 32.5px), 140px);
    right: 0;
    left: 0;
    z-index: 6;
    padding-top: 0;
    margin: 0;
    color: var(--theme-color-white);
}
.editor-styles-wrapper.project-template-floating-header .project-gallery::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    height: 400px;
    pointer-events: none;
    content: '';
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}
.project-gallery__items {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.project-gallery__item {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
}
.project-gallery__image,
.project-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
}
.project-gallery__item.is-ratio-4-5 {
    aspect-ratio: 4 / 5;
}
.project-gallery__item.is-ratio-5-7 {
    aspect-ratio: 5 / 7;
}
.project-gallery__item.is-ratio-2-3 {
    aspect-ratio: 2 / 3;
}
.project-gallery__item.is-ratio-1-1 {
    aspect-ratio: 1 / 1;
}
.project-gallery__item.is-ratio-3-2 {
    aspect-ratio: 3 / 2;
}
.project-gallery__item:not(.is-ratio-natural) img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.project-gallery__item.is-empty {
    aspect-ratio: auto;
}
.project-gallery__media-state {
    display: grid;
    min-height: 160px;
    place-items: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid currentColor;
}
.project-gallery__media-state .components-notice {
    margin: 0;
}
.project-gallery__items--editor > .block-list-appender {
    flex: 0 0 100%;
}
.project-gallery--editor .block-editor-button-block-appender {
    color: var(--theme-color-dark-blue);
    background-color: var(--theme-color-white);
    box-shadow: inset 0 0 0 1px var(--theme-color-dark-blue);
}

@media (min-width: 783px) {
    .project-gallery__title {
        padding-top: 16px;
        margin: 0 0 30px;
        font-size: 40px;
    }
    .project-gallery.alignfull > .project-gallery__title {
        padding-left: 40px;
    }
    .project-gallery__items {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
    }
    .project-gallery__item.is-width-full {
        flex-basis: 100%;
    }
    .project-gallery__item.is-width-half {
        flex-basis: max(
            0px,
            calc((100% - var(--project-gallery-column-gap, 0px)) / 2)
        );
    }
    .project-gallery__item.is-width-third {
        flex-basis: max(
            0px,
            calc((100% - (2 * var(--project-gallery-column-gap, 0px))) / 3)
        );
    }
    .project-gallery__item.is-ratio-natural {
        align-self: flex-start;
    }
}

/*----------------------------------------------------------------------------

    Project List block

    The parent owns a custom grid so its native block-spacing setting is
    applied directly by the editor and renderer. The selected native background
    remains visible through gaps and in an unused final desktop grid cell.

----------------------------------------------------------------------------*/
.project-list__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
.project-list__grid > * {
    min-width: 0;
    align-self: start;
}
.project-list.is-ratio-4-5 .project-card__link {
    aspect-ratio: 4 / 5;
}
.project-list.is-ratio-2-3 .project-card__link {
    aspect-ratio: 2 / 3;
}
.project-list.is-ratio-1-1 .project-card__link {
    aspect-ratio: 1 / 1;
}
.project-list.is-ratio-3-2 .project-card__link {
    aspect-ratio: 3 / 2;
}
.project-list__in-progress {
    min-width: 0;
    padding: 48px;
    color: inherit;
    background-color: var(--theme-color-light-blue);
}
.project-list__in-progress-title {
    margin: 0;
    color: inherit;
    font-family: var(--font-sweet-sans);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1.9px;
    text-transform: uppercase;
}
.project-list__in-progress-list {
    margin-top: 32px;
}
.project-list__in-progress-list .wp-block-list {
    margin: 0;
    padding: 0;
    color: inherit;
    list-style: none;
    font-family: var(--font-golden-brown);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.project-list__in-progress-list li {
    margin: 0;
    overflow-wrap: anywhere;
}
.project-list__in-progress-list li + li {
    margin-top: 20px;
}

@media (min-width: 783px) {
    .project-list__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .project-list__in-progress {
        padding: 120px;
    }
    .project-list__in-progress-title {
        font-size: 12px;
    }
    .project-list__in-progress-list .wp-block-list {
        font-size: 38px;
    }
}

/* Editor-only parent/child presentation. */
.project-list--editor .project-card__link {
    pointer-events: none;
}
.project-list--editor .project-card__link::after,
.project-list--editor .project-card__overlay {
    opacity: 1;
}
.project-list--editor .project-list__grid > .block-list-appender {
    grid-column: 1 / -1;
    align-self: stretch;
}
.project-list--editor .block-list-appender .block-editor-button-block-appender {
    color: var(--theme-color-dark-blue);
    background-color: var(--theme-color-white);
    box-shadow: inset 0 0 0 1px var(--theme-color-dark-blue);
}
.project-list__project-editor > .components-notice {
    margin: 0;
}

/*----------------------------------------------------------------------------

    Project Card (template-parts/cards/project.php)

    Shared by front-end lists and server-rendered block previews. The overlay
    is visible by default and becomes hover-revealed only on hover-capable
    desktop devices.

----------------------------------------------------------------------------*/
.project-card {
    min-width: 0;
}
.project-card__link {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 5;
    padding: 28px;
    overflow: clip;
    color: var(--theme-color-white);
    text-decoration: none;
}
.project-card__media {
    position: absolute;
    inset: 0;
}
.project-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.project-card__media--placeholder {
    display: grid;
    place-items: center;
    background-color: var(--theme-color-light-blue);
}
.project-card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: var(--theme-color-white);
}
.project-card__placeholder-mark {
    display: block;
    width: min(96px, 28%);
}
.project-card__placeholder-mark svg {
    display: block;
    width: 100%;
    height: auto;
}
.project-card__coming-soon {
    margin-top: 16px;
    font-family: var(--font-golden-brown);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}
.project-card__link::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: '';
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 40%);
    opacity: 1;
    pointer-events: none;
    transition: opacity 300ms ease;
}
.project-card__overlay {
    position: sticky;
    z-index: 2;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: auto;
    color: var(--theme-color-white);
    opacity: 1;
    pointer-events: none;
    transition: opacity 300ms ease;
}
.project-card__title {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-golden-brown);
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.project-card__view {
    font-family: var(--font-baskerville);
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.5px;
}
.project-card__link:focus-visible {
    outline: 3px solid var(--theme-color-white);
    outline-offset: -6px;
    box-shadow: 0 0 0 3px var(--theme-color-dark-blue);
}

@media (min-width: 783px) {
    .project-card__link {
        padding: 50px;
    }
    .project-card__overlay {
        bottom: 50px;
    }
    .project-card__title {
        font-size: 50px;
    }
    .project-card__view {
        font-size: 26px;
    }
}

@media (min-width: 783px) and (hover: hover) {
    .project-card__link::after,
    .project-card__overlay {
        opacity: 0;
    }
    .project-card__link:hover::after,
    .project-card__link:hover .project-card__overlay,
    .project-card__link:focus-visible::after,
    .project-card__link:focus-visible .project-card__overlay {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-card__link::after,
    .project-card__overlay {
        transition: none;
    }
}

/* Shopify collection cards follow the page's background and text color. */
.wp-block-shopify-collection-shopify-collection-block .product-card,
.wp-block-shopify-collection-shopify-collection-block .product-card:hover,
.wp-block-shopify-collection-shopify-collection-block .wp-shopify-product-grid .shopify-product-block__product {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.wp-block-shopify-collection-shopify-collection-block .product-card__image-container,
.wp-block-shopify-collection-shopify-collection-block .product-card__image-container img,
.wp-block-shopify-collection-shopify-collection-block .shopify-product-block__product__image,
.wp-block-shopify-collection-shopify-collection-block .shopify-product-block__product__image img {
    border-radius: 0;
}

.wp-block-shopify-collection-shopify-collection-block .product__link,
.wp-block-shopify-collection-shopify-collection-block .product-card .product-card__details .product-card__title,
.wp-block-shopify-collection-shopify-collection-block .product-card__price,
.wp-block-shopify-collection-shopify-collection-block .shopify-product-block__product__content h3 {
    color: inherit;
}

/* The plugin marks its editor-only price color as important. */
.wp-block-shopify-collection-shopify-collection-block .wp-shopify-product-grid .shopify-product-block__product__content p {
    color: inherit !important;
}

.wp-block-shopify-collection-shopify-collection-block .product-card .product-card__details {
    display: block;
    padding-inline: 0;
    text-align: left;
}

.wp-block-shopify-collection-shopify-collection-block .product-card .product-card__details .product-card__title {
    margin: 0 0 5px;
}

/* Match the editor preview's 10px image inset. */
.wp-block-shopify-collection-shopify-collection-block .wp-shopify-product-grid .shopify-product-block__product__content {
    display: block;
    padding-inline: 10px;
    text-align: left;
}

.wp-block-shopify-collection-shopify-collection-block .product-card .product-card__image-container img,
.wp-block-shopify-collection-shopify-collection-block .product-card:hover .product-card__image-container img {
    aspect-ratio: 2 / 3;
    width: 100%;
    height: auto;
    /* Shopify injects object-fit: cover !important into its media styles. */
    object-fit: contain !important;
    /* Replace Shopify's low-resolution background image behind contained photos. */
    background: var(--theme-color-white) !important;
    object-position: center;
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.wp-block-shopify-collection-shopify-collection-block .product-card__image-container {
    aspect-ratio: 2 / 3;
    background-color: var(--theme-color-white);
}

.wp-block-shopify-collection-shopify-collection-block .wp-shopify-product-grid .shopify-product-block__product__image img {
    display: block;
    background-color: var(--theme-color-white);
    aspect-ratio: 2 / 3;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

@media (hover: hover) {
    .wp-block-shopify-collection-shopify-collection-block .product-card:hover .product-card__image-container img {
        transform: scale(1.05);
        filter: brightness(1.05);
    }
}

.wp-block-shopify-collection-shopify-collection-block .product-card__hover-button {
    bottom: 10px;
    right: 10px;
    background-color: var(--theme-color-white);
    border-color: var(--theme-color-white);
    color: var(--theme-color-dark-blue);
    font-family: var(--font-sweet-sans);
}

.wp-block-shopify-collection-shopify-collection-block .product-card__hover-button span {
    color: inherit;
    font-family: inherit;
}

.wp-block-shopify-collection-shopify-collection-block .product-card__hover-button::before {
    background-image: none;
    background-color: currentColor;
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z"/%3E%3C/svg%3E') center / contain no-repeat;
}

/* Shopify collection pagination; leave the plugin's disabled greys intact. */
.wp-block-shopify-collection-shopify-collection-block .pagination-button-list button:not(:disabled) {
    background-color: transparent;
    border-color: var(--theme-color-dark-blue);
    color: var(--theme-color-dark-blue);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.wp-block-shopify-collection-shopify-collection-block .pagination-button-list button:not(:disabled) svg,
.wp-block-shopify-collection-shopify-collection-block .pagination-button-list button:not(:disabled) svg polyline {
    stroke: currentColor;
}

@media (hover: hover) {
    .wp-block-shopify-collection-shopify-collection-block .pagination-button-list button:not(:disabled):hover {
        background-color: var(--theme-color-dark-blue);
        color: var(--theme-color-white);
    }
}