:root {
    --font-bembo: 'Bembo';
    --font-engravers-gothic: 'Engravers Gothic';
    --font-montage-serif: 'Montage Serif';
    --font-sweet-sans: 'Sweet Sans';
    --font-icons: 'gadabout-icons';
    /* TODO: Add theme fonts here */

    --theme-color-sage: #A5B2B0;
    --theme-color-cream: #F4ECE6;
    --theme-color-dark-grey: #2E2C2D;
    --theme-color-gold: #BC955F;
    --theme-color-olive: #4B4530;
    --theme-color-slate-blue: #2F4F63;
    /* TODO: Add theme colors here */
}

/* Gentle text shadow for legibility over image backgrounds. Add via the block's
   "Additional CSS class(es)" field. This file loads in both the editor and the
   front end (enqueue_block_assets), so it previews and renders the same. */
.text-shadow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.entry-content p.is-style-bembo-15,
.editor-styles-wrapper p.is-style-bembo-15 {
    font-family: var(--font-bembo);
    font-size: 15px;
    line-height: 27px;
    letter-spacing: 0.2px;
}

.entry-content p.is-style-bembo-16,
.editor-styles-wrapper p.is-style-bembo-16 {
    font-family: var(--font-bembo);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.2px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-bembo-16,
    .editor-styles-wrapper p.is-style-bembo-16 {
        font-family: var(--font-bembo);
        font-size: 16px;
        line-height: 29px;
        letter-spacing: 0.2px;
    }
}

.entry-content p.is-style-bembo-17,
.editor-styles-wrapper p.is-style-bembo-17 {
    font-family: var(--font-bembo);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.2px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-bembo-17,
    .editor-styles-wrapper p.is-style-bembo-17 {
        font-family: var(--font-bembo);
        font-size: 17px;
        line-height: 31px;
        letter-spacing: 0.2px;
    }
}

.entry-content p.is-style-bembo-18,
.editor-styles-wrapper p.is-style-bembo-18 {
    font-family: var(--font-bembo);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.2px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-bembo-18,
    .editor-styles-wrapper p.is-style-bembo-18 {
        font-family: var(--font-bembo);
        font-size: 18px;
        line-height: 34px;
        letter-spacing: 0.2px;
    }
}

.entry-content p.is-style-bembo-20,
.editor-styles-wrapper p.is-style-bembo-20 {
    font-family: var(--font-bembo);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.2px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-bembo-20,
    .editor-styles-wrapper p.is-style-bembo-20 {
        font-family: var(--font-bembo);
        font-size: 20px;
        line-height: 34px;
        letter-spacing: 0.2px;
    }
}

.entry-content p.is-style-engravers-gothic-12,
.editor-styles-wrapper p.is-style-engravers-gothic-12 {
    font-family: var(--font-engravers-gothic);
    font-size: 12px;
    letter-spacing: 1.5px;
}

.entry-content p.is-style-engravers-gothic-14,
.editor-styles-wrapper p.is-style-engravers-gothic-14 {
    font-family: var(--font-engravers-gothic);
    font-size: 11px;
    letter-spacing: 1.5px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-engravers-gothic-14,
    .editor-styles-wrapper p.is-style-engravers-gothic-14 {
        font-family: var(--font-engravers-gothic);
        font-size: 14px;
        letter-spacing: 1.5px;
    }
}

.entry-content p.is-style-engravers-gothic-16,
.editor-styles-wrapper p.is-style-engravers-gothic-16 {
    font-family: var(--font-engravers-gothic);
    font-size: 11px;
    letter-spacing: 1.5px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-engravers-gothic-16,
    .editor-styles-wrapper p.is-style-engravers-gothic-16 {
        font-family: var(--font-engravers-gothic);
        font-size: 16px;
        letter-spacing: 1.5px;
    }
}

.entry-content p.is-style-montage-serif-16,
.editor-styles-wrapper p.is-style-montage-serif-16 {
    font-family: var(--font-montage-serif);
    font-size: 16px;
}

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

.entry-content p.is-style-montage-serif-20,
.editor-styles-wrapper p.is-style-montage-serif-20 {
    font-family: var(--font-montage-serif);
    font-size: 14px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-montage-serif-20,
    .editor-styles-wrapper p.is-style-montage-serif-20 {
        font-family: var(--font-montage-serif);
        font-size: 20px;
    }
}

.entry-content p.is-style-montage-serif-22,
.editor-styles-wrapper p.is-style-montage-serif-22 {
    font-family: var(--font-montage-serif);
    font-size: 14px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-montage-serif-22,
    .editor-styles-wrapper p.is-style-montage-serif-22 {
        font-family: var(--font-montage-serif);
        font-size: 22px;
    }
}

.entry-content p.is-style-montage-serif-24,
.editor-styles-wrapper p.is-style-montage-serif-24 {
    font-family: var(--font-montage-serif);
    font-size: 14px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-montage-serif-24,
    .editor-styles-wrapper p.is-style-montage-serif-24 {
        font-family: var(--font-montage-serif);
        font-size: 24px;
    }
}

.entry-content p.is-style-montage-serif-30,
.editor-styles-wrapper p.is-style-montage-serif-30 {
    font-family: var(--font-montage-serif);
    font-size: 19px;
    line-height: 30px;
}

@media screen and (min-width: 576px) {
    .entry-content p.is-style-montage-serif-30,
    .editor-styles-wrapper p.is-style-montage-serif-30 {
        font-family: var(--font-montage-serif);
        font-size: 30px;
        line-height: 50px;
    }
}

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

	Press Card

	Shared by the Press Item and Press List blocks. Lives here (loaded on the
	front-end and in the editor via enqueue_block_assets) rather than in a
	per-block stylesheet so it's available whichever block renders the card.

----------------------------------------------------------------------------*/
.press-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.press-card__image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.press-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}
/* Hover anywhere on the card brightens the image and lifts it with a soft
   shadow (hover-capable devices only). */
@media (hover: hover) {
    .press-card__link:hover .press-card__image img {
        filter: brightness(105%);
    }
    .press-card__link:hover .press-card__image {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }
}
.press-card__footer {
    margin-top: 18px;
}
.press-card__title,
.press-card__subtitle {
    display: block;
    margin: 0;
    font-family: var(--font-engravers-gothic);
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 1.5px;
    font-weight: 400;
    text-transform: uppercase;
}

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

	Cover block — responsive min-height

	Add the "cover-tall" class to a core Cover block (Advanced -> Additional CSS
	class(es)) for a shorter min-height on mobile and a taller one on desktop.
	!important overrides the block's own inline min-height style; loaded in the
	editor and on the front-end so the preview matches.

----------------------------------------------------------------------------*/
.wp-block-cover.cover-tall {
    min-height: 600px !important;
}
@media (min-width: 992px) {
    .wp-block-cover.cover-tall {
        min-height: 800px !important;
    }
}
@media (min-width: 1200px) {
    .wp-block-cover.cover-tall {
        min-height: 1000px !important;
    }
}

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

	Project Card

	Used by the Project List block. Mobile: title + "View Project" sit below the
	image. Desktop (>=768px): an olive overlay with the title, "View Project",
	and optional location + subtitle fades in on hover, inset from the image
	edges. Loaded in the editor and on the front-end via enqueue_block_assets.

----------------------------------------------------------------------------*/
.project-card__link {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
}
.project-card__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.project-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-card__title {
    margin: 0;
    font-family: var(--font-montage-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.project-card__view,
.project-card__location,
.project-card__subtitle {
    font-family: var(--font-engravers-gothic);
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Mobile: title + view-project below the image; overlay unused. */
.project-card__overlay {
    display: none;
}
.project-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 32px 0 48px;
}
/* Mobile card uses smaller type than the desktop hover overlay. */
.project-card__footer .project-card__title {
    font-size: 18px;
}
.project-card__footer .project-card__view {
    font-size: 11px;
}

/* Desktop: olive hover overlay inset within the image; hide the mobile footer. */
@media (min-width: 768px) {
    .project-card__footer {
        display: none;
    }
    .project-card__overlay {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        inset: 65px 75px;
        padding: 60px;
        background-color: var(--theme-color-olive);
        color: var(--theme-color-sage);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }
    /* Two independent rows so the (long) subtitle never squeezes the title. */
    .project-card__overlay-row {
        display: flex;
        gap: 20px;
    }
    .project-card__overlay-row--top {
        align-items: center;
    }
    .project-card__overlay-row--bottom {
        align-items: flex-end;
    }
    /* Right-hand items hug the right edge even when their left-hand pair is absent. */
    .project-card__overlay .project-card__view,
    .project-card__overlay .project-card__subtitle {
        margin-left: auto;
        text-align: right;
    }
}
@media (hover: hover) and (min-width: 768px) {
    .project-card__link:hover .project-card__overlay {
        opacity: 1;
    }
}

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

	Press Slider (Featured Press block)

	Native block: an editable heading/description, a Slick slider of inner Press
	Item blocks, and a View All link. Text colour inherits the page foreground
	(sage on Olive Background, gold otherwise). Each slide is a Press Item block
	wrapper (.wp-block-jenniferbarron-press-item).

----------------------------------------------------------------------------*/
/* Inner content wrapper. The block itself is usually set to full-align so its
   background colour spans the viewport; this wrapper constrains the heading,
   slider, and footer to a chosen width (matching the constrained-layout rules
   in style.css) so they line up with the wide/content blocks above and below.
   No side padding here — the section's own padding supplies the page gutter, so
   the heading, description, and slider images all sit flush to this box's edges
   (and thus line up with the team section's edge-to-edge images below). */
.featured-press__inner {
    margin-left: auto;
    margin-right: auto;
}
.featured-press__inner--content {
    max-width: var(--wp--style--global--content-size, 840px);
}
.featured-press__inner--wide {
    max-width: var(--wp--style--global--wide-size, 1200px);
}
.featured-press__inner--full {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
/* Make the outer press images sit flush with the wrapper's box edges (1200px on
   large screens) so they line up with both the heading/description above and the
   team section's edge-to-edge images below. Each slide is inset only by its own
   gutter now (the wrapper has no side padding), so pull the slider out by exactly
   that gutter: 12px (.press-item) below 768px and 28px at/above it (.press-item
   12px + .press-card__link .px-md-3 16px) — independent of how many slides slick
   shows, since only the outermost slide's padding has to be undone. */
.featured-press__slider {
    margin-left: -12px;  /* 12px slide gutter */
    margin-right: -12px;
}
@media (min-width: 768px) {
    .featured-press__slider {
        margin-left: -28px;  /* 28px slide gutter */
        margin-right: -28px;
    }
}
.featured-press__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
    text-align: center;
}
.featured-press__heading {
    margin: 0;
    font-family: var(--font-montage-serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.featured-press__description {
    margin: 0;
    font-family: var(--font-bembo);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.2px;
}
@media (min-width: 992px) {
    .featured-press__header {
        flex-direction: row;
        gap: 48px;
        text-align: left;
    }
    /* Heading never shrinks — it always takes whatever room it needs to stay
       on one line; the description fills the rest. */
    .featured-press__heading {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 24px;
    }
    .featured-press__description {
        flex: 1 1 auto;
        font-size: 18px;
        line-height: 1.6;
        letter-spacing: normal;
    }
}
/* Each slide is an inner Press Item block; give it the horizontal gutter. */
.featured-press__slider .wp-block-jenniferbarron-press-item {
    padding: 0 12px;
}
/* The block's text-colour setting cascades to everything via inherit, but the
   View All link and the press card link are <a>s that a template's
   ".entry-content a" colour rule would otherwise override — keep them
   inheriting (high enough specificity to win on Olive Background pages). */
.entry-content .featured-press .featured-press__view-all,
.entry-content .featured-press .press-card__link {
    color: inherit;
}
/* The Press Item card brings px-3; keep it from md up, drop it on mobile. */
@media (max-width: 767.98px) {
    .featured-press .press-card__link {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
.featured-press__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    min-height: 24px;
    margin-top: 40px;
    padding: 0 12px;
}
/* Slick dots (appended into __dots) */
.featured-press__dots .slick-dots {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.featured-press__dots .slick-dots li {
    line-height: 0;
}
.featured-press__dots .slick-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}
.featured-press__dots .slick-dots .slick-active button {
    background: currentColor;
    opacity: 1;
}
.featured-press__view-all {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    color: inherit;
    text-decoration: none;
    font-family: var(--font-engravers-gothic);
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}
.featured-press__view-all::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
}
.featured-press__view-all:hover {
    opacity: 0.65;
}

/* Mobile (<=576px) shows pages of 4 as a 2x2 grid (Slick rows mode). Placed
   after the base rules above so these overrides win on source order (media
   queries don't add specificity). */
@media (max-width: 576px) {
    .featured-press__slider .wp-block-jenniferbarron-press-item {
        padding-bottom: 32px;
    }
    .featured-press .press-card__title,
    .featured-press .press-card__subtitle {
        font-size: 10px;
        line-height: 16px;
        letter-spacing: 1.5px;
    }
    .featured-press__footer {
        margin-top: 20px;
    }
}

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

	JB Image Banner block

	Two side-by-side background images with a text container (the inner blocks).
	Mobile-first: images sit side by side at their natural height and the text
	container stacks below them. From 992px up the container overlays the images,
	which then crop to a configurable min-height. Container width, padding, and
	colours come through as inline styles / CSS custom properties from render.php.

----------------------------------------------------------------------------*/
.jb-image-banner__images {
	display: flex;
}
.jb-image-banner__image {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}
.jb-image-banner__image img {
	display: block;
	width: 100%;
	height: auto;
}
/* Default container background; the block's colour support overrides this when
   a background is chosen (preset classes are !important, custom is inline). */
.jb-image-banner__container {
	background-color: #fff;
}
.jb-image-banner__container > :first-child {
	margin-top: 0;
}
.jb-image-banner__container > :last-child {
	margin-bottom: 0;
}
/* Below 992px the images sit side by side and the flex row stretches both halves
   to equal height; make each image fill its stretched half so the shorter one
   doesn't leave whitespace below it. */
@media (max-width: 991.98px) {
	.jb-image-banner__image img {
		height: 100%;
		object-fit: cover;
	}
}

@media (min-width: 992px) {
	.jb-image-banner {
		position: relative;
	}
	/* Images crop to a fixed height so both halves line up. */
	.jb-image-banner__image {
		min-height: var(--jb-banner-min-height, 600px);
	}
	.jb-image-banner__image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* The text container overlays the images, centred. */
	.jb-image-banner__container {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		transform: translate(-50%, -50%);
		width: var(--jb-banner-container-width, 760px);
		max-width: calc(100% - 48px);
	}
}

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

	Project Gallery block

	Full-bleed gallery of Project Image slots. Mobile-first: each slot is 100%
	and stacks, with horizontal padding + a vertical gap for breathing room (like
	the Project List block). From 768px the slots become a flex-wrap row: Full =
	100% (breaks the row), Half/Inset = 50%; flex-grow promotes a lone trailing
	slot to 100%. Inset adds interior padding so the image reads smaller, centred
	in its slot. Loaded in the editor and on the front-end so the preview matches.

----------------------------------------------------------------------------*/
.project-gallery {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
/* Mobile: keep the stacked images off the screen edges. !important beats the
   constrained-layout rule `.entry-content > .alignfull { padding: 0 }`. */
@media (max-width: 767.98px) {
	.project-gallery {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}
.project-gallery__item {
	margin: 0;
	min-width: 0;
}
.project-gallery__img,
.project-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
}
@media (min-width: 768px) {
	.project-gallery {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0;
		align-items: stretch;
	}
	/* Half/Inset are 50% slots; flex-grow:1 lets a lone trailing slot fill 100%.
	   min-width:0 + box-sizing keep the 50% basis from overflowing the row. */
	.project-gallery__item {
		box-sizing: border-box;
		flex: 1 1 50%;
	}
	.project-gallery__item--full {
		flex-basis: 100%;
	}
	/* Inset: the image sits at a fraction of the column width (horizontal
	   breathing room) and is centred, so the column height is driven by the flush
	   image it's paired with and the vertical space flexes to match it — no fixed
	   padding that collapses the image at smaller widths. Tune via the var. */
	.project-gallery__item--inset {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.project-gallery__item--inset img {
		width: var(--jb-inset-image-width, 60%);
		height: auto;
	}
	/* Inset (full width): a lone image centred on the full row at a chosen width
	   (set per image via --jb-inset-full-width), with vertical breathing room
	   above/below so it doesn't run flush with neighbouring rows. Lets a portrait
	   image stay a sensible height instead of spanning the whole viewport. The
	   padding is tunable via --jb-inset-full-padding-y. */
	.project-gallery__item--inset-full {
		flex-basis: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--jb-inset-full-padding-y, 120px) 0;
	}
	.project-gallery__item--inset-full img {
		width: var(--jb-inset-full-width, 50%);
		height: auto;
	}
	/* Cropped half slots: a per-image aspect ratio turns the 50% slot into a
	   fixed box and the image fills it via object-fit: cover, so a pair lines up
	   flush instead of padding the shorter image with whitespace. Only applies to
	   half slots (paired 50/50) at this breakpoint; on mobile images stack and
	   show in full. 'natural' (no --ar-* class) keeps the default height: auto.
	   Set both images in a pair to the same ratio for a seamless row. */
	.project-gallery__item--half.project-gallery__item--ar-4x5 { aspect-ratio: 4 / 5; }
	.project-gallery__item--half.project-gallery__item--ar-1x1 { aspect-ratio: 1 / 1; }
	.project-gallery__item--half.project-gallery__item--ar-4x3 { aspect-ratio: 4 / 3; }
	.project-gallery__item--half.project-gallery__item--ar-4x5 img,
	.project-gallery__item--half.project-gallery__item--ar-1x1 img,
	.project-gallery__item--half.project-gallery__item--ar-4x3 img {
		height: 100%;
		object-fit: cover;
	}
}

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

	Spacing utilities — Bootstrap scale extension

	Bootstrap's spacers stop at 5 (3rem). These add 6–9 in 0.5rem steps
	(6 = 3.5rem, 7 = 4rem, 8 = 4.5rem, 9 = 5rem) for padding-all (p), padding-x
	(px) and padding-y (py), plus the responsive breakpoint variants
	(e.g. px-md-6). !important matches how Bootstrap's own utilities behave.

----------------------------------------------------------------------------*/
.p-6 { padding: 3.5rem !important; }
.p-7 { padding: 4rem !important; }
.p-8 { padding: 4.5rem !important; }
.p-9 { padding: 5rem !important; }
.px-6 { padding-right: 3.5rem !important; padding-left: 3.5rem !important; }
.px-7 { padding-right: 4rem !important; padding-left: 4rem !important; }
.px-8 { padding-right: 4.5rem !important; padding-left: 4.5rem !important; }
.px-9 { padding-right: 5rem !important; padding-left: 5rem !important; }
.py-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.py-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-8 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.py-9 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
@media (min-width: 576px) {
	.p-sm-6 { padding: 3.5rem !important; }
	.p-sm-7 { padding: 4rem !important; }
	.p-sm-8 { padding: 4.5rem !important; }
	.p-sm-9 { padding: 5rem !important; }
	.px-sm-6 { padding-right: 3.5rem !important; padding-left: 3.5rem !important; }
	.px-sm-7 { padding-right: 4rem !important; padding-left: 4rem !important; }
	.px-sm-8 { padding-right: 4.5rem !important; padding-left: 4.5rem !important; }
	.px-sm-9 { padding-right: 5rem !important; padding-left: 5rem !important; }
	.py-sm-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
	.py-sm-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
	.py-sm-8 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
	.py-sm-9 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}
@media (min-width: 768px) {
	.p-md-6 { padding: 3.5rem !important; }
	.p-md-7 { padding: 4rem !important; }
	.p-md-8 { padding: 4.5rem !important; }
	.p-md-9 { padding: 5rem !important; }
	.px-md-6 { padding-right: 3.5rem !important; padding-left: 3.5rem !important; }
	.px-md-7 { padding-right: 4rem !important; padding-left: 4rem !important; }
	.px-md-8 { padding-right: 4.5rem !important; padding-left: 4.5rem !important; }
	.px-md-9 { padding-right: 5rem !important; padding-left: 5rem !important; }
	.py-md-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
	.py-md-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
	.py-md-8 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
	.py-md-9 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}
@media (min-width: 992px) {
	.p-lg-6 { padding: 3.5rem !important; }
	.p-lg-7 { padding: 4rem !important; }
	.p-lg-8 { padding: 4.5rem !important; }
	.p-lg-9 { padding: 5rem !important; }
	.px-lg-6 { padding-right: 3.5rem !important; padding-left: 3.5rem !important; }
	.px-lg-7 { padding-right: 4rem !important; padding-left: 4rem !important; }
	.px-lg-8 { padding-right: 4.5rem !important; padding-left: 4.5rem !important; }
	.px-lg-9 { padding-right: 5rem !important; padding-left: 5rem !important; }
	.py-lg-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
	.py-lg-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
	.py-lg-8 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
	.py-lg-9 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}
@media (min-width: 1200px) {
	.p-xl-6 { padding: 3.5rem !important; }
	.p-xl-7 { padding: 4rem !important; }
	.p-xl-8 { padding: 4.5rem !important; }
	.p-xl-9 { padding: 5rem !important; }
	.px-xl-6 { padding-right: 3.5rem !important; padding-left: 3.5rem !important; }
	.px-xl-7 { padding-right: 4rem !important; padding-left: 4rem !important; }
	.px-xl-8 { padding-right: 4.5rem !important; padding-left: 4.5rem !important; }
	.px-xl-9 { padding-right: 5rem !important; padding-left: 5rem !important; }
	.py-xl-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
	.py-xl-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
	.py-xl-8 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
	.py-xl-9 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}
@media (min-width: 1400px) {
	.p-xxl-6 { padding: 3.5rem !important; }
	.p-xxl-7 { padding: 4rem !important; }
	.p-xxl-8 { padding: 4.5rem !important; }
	.p-xxl-9 { padding: 5rem !important; }
	.px-xxl-6 { padding-right: 3.5rem !important; padding-left: 3.5rem !important; }
	.px-xxl-7 { padding-right: 4rem !important; padding-left: 4rem !important; }
	.px-xxl-8 { padding-right: 4.5rem !important; padding-left: 4.5rem !important; }
	.px-xxl-9 { padding-right: 5rem !important; padding-left: 5rem !important; }
	.py-xxl-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
	.py-xxl-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
	.py-xxl-8 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
	.py-xxl-9 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

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

	About cover text

	Utility for the cover-block paragraph at the top of the About page; narrows
	it on small phones so it wraps nicely over the hero.

----------------------------------------------------------------------------*/
@media screen and (max-width: 575.98px) {
    /* !important beats the block-layout rule the parent Group emits
       (.wp-container-… > :where(…) { max-width: 960px }), which otherwise wins
       on source order at equal specificity. */
    .about-cover-text {
        max-width: 336px !important;
    }
}

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

	Shop — product grid (page-shop.php)

	A square, image-only product grid below the page content. Bootstrap row-cols
	handle the columns (2-up mobile / 4-up from md); each card is a 1:1 box with
	the product image shown whole (contain) so catalog shots keep their white
	space. The grid sits in a .container, wider than the constrained intro text.

----------------------------------------------------------------------------*/
.product-grid-section {
    padding: 48px 0 80px;
}
.product-card__image {
    position: relative;
    overflow: hidden;
    background-color: #fff;
}
/* Square box via the width-based padding hack rather than `aspect-ratio`. Safari
   fails to resolve a child's percentage height against an aspect-ratio box, which
   let the image fall back to its intrinsic size and overflow. padding-bottom:100%
   is a definite, width-derived height that every browser resolves reliably. */
.product-card__image::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
/* Absolutely positioned inside that definite box, inset 30px on all sides for the
   breathing room around the product shot; object-fit keeps the shot whole. */
.product-card__img {
    position: absolute;
    top: 30px;
    left: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    object-fit: contain;
    transition: filter 0.3s ease;
}
/* Hover brightens the image on hover-capable devices, matching the other cards. */
@media (hover: hover) {
    .product-card__link:hover .product-card__img {
        filter: brightness(105%);
    }
}