/*
Theme Name: Hermes
Theme URI: https://timotheacreations.com/product/hermes/
Author: Timothea Creations
Author URI: https://timotheacreations.com/
Description: Be smart. Named for the god of commerce, travel and messengers, Hermes is a fast, WooCommerce-ready block theme for modern online shops and professional service businesses.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.1.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: hermes
Domain Path: /languages
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, e-commerce, editor-style, featured-images, full-site-editing, one-column, rtl-language-support, style-variations, template-editing, threaded-comments, translation-ready, wide-blocks
*/

body {
    -webkit-font-smoothing: antialiased;
}

/* Set default line height for font size presets. */

.has-xx-large-font-size,
.has-xxx-large-font-size {
	line-height: 1;
}

/* Add a transition state for buttons. */

.wp-element-button {
    transition: border, background-color, color, box-shadow, opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(30px);
}

/* Fields */

label,
.jetpack-field-label .rich-text.jetpack-field-label__input,
.contact-form .grunion-checkbox-multiple-options legend, 
.contact-form .grunion-radio-options legend,
.wp-block-jetpack-contact-form-container .wp-block-jetpack-contact-form label {
    display: inline-block;
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: 0.25em;
    font-weight: inherit;
}

textarea,
input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]),
.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.jetpack-contact-form .jetpack-field .jetpack-field__input,
.jetpack-contact-form .jetpack-field .jetpack-field__textarea {
    backdrop-filter: saturate(1.075);
    background-color: transparent;
    border-color: currentColor;
    border-style: solid;
    border-radius: 6px;
    border-width: 1px;
    box-shadow: none;
    box-sizing: border-box;
    color: currentColor;
    filter: brightness(1.05);
    font-size: var(--wp--preset--font-size--small);
    font-weight: inherit;
    line-height: 1.5;
    min-height: 42px;
    padding: 0.8rem 1rem;
    width: 100%;
}

textarea:focus,
input:not([type=submit]):focus,
.wp-block-post-comments-form textarea:focus,
.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):focus {
    outline: 1px solid currentColor;
}

textarea::placeholder,
.input::placeholder,
.wp-block-jetpack-subscriptions__form .components-base-control__field input::placeholder {
    color: color-mix(in srgb, currentColor 60%, transparent);
}

/* -------------------------------------------------------------------------
   Form plugins in a themed section

   Hermes ships no form plugin — the newsletter slot takes whatever the buyer
   installs, via the `hermes_newsletter_form` filter. Those plugins arrive with
   their own palette, which lands badly on a coloured band: WPForms' submit
   button falls back to its brand blue (#066aab) and its labels to near-black,
   which is unreadable on the dark newsletter section.

   The plugin sets its colours from CSS custom properties but only *defines*
   a few of them on its own container, so the rest resolve against whatever an
   ancestor provides. Declaring them here therefore wins without `!important`
   and without out-specifying an ID. Anything not recognised is simply ignored,
   so this is inert when the plugin is absent.

   Scoped to .newsletter-form so it can never reach a form elsewhere on the site.
   ------------------------------------------------------------------------- */

.newsletter-form {
    /* WPForms */
    --wpforms-label-color: currentColor;
    --wpforms-label-sublabel-color: currentColor;
    --wpforms-label-error-color: currentColor;
    --wpforms-field-text-color: currentColor;
    --wpforms-field-border-color: currentColor;
    --wpforms-field-background-color: transparent;
    --wpforms-button-background-color: var(--wp--preset--color--primary);
    --wpforms-button-background-color-alt: var(--wp--preset--color--primary);
    --wpforms-button-text-color: var(--wp--preset--color--base);
    --wpforms-button-text-color-alt: var(--wp--preset--color--base);
    --wpforms-button-border-color: transparent;
    --wpforms-field-border-radius: 6px;
    --wpforms-button-border-radius: 0px;
}

/* Labels and helper text follow the section, for plugins that use plain CSS. */
.newsletter-form label,
.newsletter-form legend,
.newsletter-form .wpforms-field-sublabel,
.newsletter-form .wpforms-field-description,
.newsletter-form .gfield_label,
.newsletter-form .gfield_description,
.newsletter-form .wpcf7-form-control-wrap label {
    color: currentColor;
}

/*
 * A plugin's submit button should read as one of the theme's buttons.
 *
 * The custom properties above cover plugins that leave them undefined, but
 * WPForms' own stylesheet loads AFTER the theme's and outspecifies a plain
 * .newsletter-form button[type=submit] with
 * `div.wpforms-container-full input[type="submit"]` (0,2,2). The doubled
 * selector below simply carries more weight than that — no !important, and the
 * plain selector still catches every other plugin.
 */
.newsletter-form div[class*="wpforms-container"] input[type="submit"],
.newsletter-form div[class*="wpforms-container"] button[type="submit"],
.newsletter-form input[type="submit"],
.newsletter-form button[type="submit"] {
    background-color: var(--wp--preset--color--primary);
    border: 2px solid transparent;
    border-radius: 0;
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--roboto);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 900;
    min-height: 42px;
    padding: 0.85rem clamp(1.75rem, 3vw, 2rem);
    width: auto;
}

.newsletter-form div[class*="wpforms-container"] input[type="submit"]:hover,
.newsletter-form div[class*="wpforms-container"] button[type="submit"]:hover,
.newsletter-form div[class*="wpforms-container"] input[type="submit"]:focus,
.newsletter-form div[class*="wpforms-container"] button[type="submit"]:focus,
.newsletter-form input[type="submit"]:hover,
.newsletter-form button[type="submit"]:hover,
.newsletter-form input[type="submit"]:focus,
.newsletter-form button[type="submit"]:focus {
    background-color: transparent;
    border-color: currentColor;
    color: currentColor;
}

/* Keep a dropped-in form from sprawling: one field per row, full width. */
.newsletter-form .wpforms-container,
.newsletter-form form {
    margin: 0 auto;
    max-width: 420px;
    text-align: left;
}

/* Padding adjustment for input fiedls in Woo */
.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input.is-active input[type=email],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=number],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=password],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=tel],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=text],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=url],
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input.is-active input[type=email],
.wc-block-components-text-input.is-active input[type=number],
.wc-block-components-text-input.is-active input[type=password],
.wc-block-components-text-input.is-active input[type=tel],
.wc-block-components-text-input.is-active input[type=text],
.wc-block-components-text-input.is-active input[type=url] {
    padding: 1.5em .5em .5em;
}


/* Jetpack Forms: Clean up errors */

.contact-form__error {
    font-size: 13px;
}

.contact-form__input-error {
	font-size: 13px;
    gap: 8px;
}

.contact-form__input-error .contact-form__warning-icon {
    border-width: 0;
}

/* Jetpack Forms: Animated block style tweaks */

.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label label,
.contact-form .is-style-animated .grunion-field-wrap .grunion-field.has-placeholder ~ .animated-label__label label,
.contact-form .is-style-animated .grunion-field-wrap .grunion-field:focus ~ .animated-label__label label,
.contact-form .is-style-animated .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .animated-label__label label {
	opacity: 0.7;
    font-size: 12px;
}

/* Styling for hero areas. */
.header-cover .wp-block-template-part {
    max-width: none;
}

.header-cover .wp-block-template-part > .wp-block-group {
    padding-left: 0;
    padding-right: 0;
}

/* Cover block styles */
.wp-block-cover[class*="is-style-section"]:not(.is-style-default) .wp-block-cover__image-background {
    opacity: 0.25;
}

.wp-block-cover[class*="is-style-section"]:not(.is-style-default) .wp-block-cover__background {
    opacity: 0;
}

:root :where(.wp-block-cover.is-light){
    color: var(--wp--preset--color--base, #000);
}

.wp-block-cover[class*="is-style-section"]:not(.is-style-default) .wp-block-cover__background {
    opacity: 0;
}

/* Make sure footers have no margin. */
footer {
	margin-top: 0 !important;
}

/* Social Links: Better default color. */

.wp-block-social-links.is-style-logos-only li.wp-social-link {
	color: currentcolor;
}

.wp-block-social-links.is-style-logos-only .wp-social-link svg {
	height: 1em;
	width: 1em;
}

.wp-block-social-links.has-small-icon-size {
	font-size: 20px;
}

/* Navigation: Remove row gap to improve wrapping behavior */
.wp-block-navigation__container {
    row-gap: 0;
}

/* Move header core/navigation to the right on mobile. */

.order-0 {
	order: 0;
}

.order-1 {
	order: 1;
}

.grow-0 {
	flex-grow: 0;
}

.grow {
	flex-grow: 1;
}

@media (min-width: 600px) {

	.md\:order-0 {
		order: 0;
	}

	.md\:order-1 {
		order: 1;
	}

	.md\:grow-0 {
		flex-grow: 0;
	}

	.md\:grow {
		flex-grow: 1;
	}

}

.overflow-hidden {
	overflow: hidden;
}

/* Utility class for wide and full images with aspect ratios, as core does not support this yet. */
.aspect-16\/9 {
	aspect-ratio: 16/9;
}

.aspect-16\/9 img,
.aspect-16\/9 .components-placeholder {
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Ensure cropping works. */
.aspect-16\/9 .wp-block-image__crop-area,
.aspect-16\/9 .wp-block-image__crop-area img {
	aspect-ratio: unset;
}

/* WooCommerce Catalog Sorting Styles */
.wc-block-catalog-sorting {
    position: relative;
}

.wc-block-catalog-sorting > div,
.wc-block-catalog-sorting .woocommerce-ordering {
    align-items: center;
    display: flex;
    gap: 8px;
}

.wc-block-catalog-sorting > div >label,
.woocommerce .woocommerce-ordering > label {
    margin: 0;
    text-wrap: nowrap;
}

.wc-block-catalog-sorting select.orderby {
    appearance: none;
    background-color: transparent;
    border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
    font-family: inherit;
    font-size: inherit;
    border-radius: 6px;
    color: currentColor;
    cursor: pointer;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    width: 100%;
}

/* Arrow using CSS triangle for dynamic color */
.wc-block-catalog-sorting::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 0.35em solid transparent;
    border-right: 0.35em solid transparent;
    border-top: 0.4em solid currentColor;
    pointer-events: none;
}

/* Make sure the CSS triangle stays the same when it's hovered or selected */
.is-outline-mode .block-editor-block-list__block.wc-block-catalog-sorting:not(.remove-outline):not(.rich-text):not([contenteditable=true]).is-selected:after,
.is-outline-mode .block-editor-block-list__block.wc-block-catalog-sorting:not(.remove-outline).is-hovered:not(.is-selected):after {
    left: auto;
    outline-color: transparent;
    right: 0.75rem;
    top: 50%;
}

/* WooCommerce Sale Badge */
/* Needs to be specific because Woo is. */
.wc-block-grid .wc-block-grid__product-onsale,
.wc-block-grid__product-image .wc-block-grid__product-onsale {
    background-color: #FFF;
    border: none;
    color: #000;
    padding: 0.25em 1em;
}

/* Remove the paddings so the setting for sale badge is respected */
.wc-block-components-product-image__inner-container {
    padding: 0;
}

/* Remove an extra border from the qty selector */
.wc-block-components-quantity-selector input.input-text.qty.text,
input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]).wc-block-components-quantity-selector__input {
    border-style: none;
}

/* Reset padding for the qty selector */
input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]).qty {
    padding: inherit;
}

/* Remove unwated right margin the qty selector */
.woocommerce div.product form.cart div.quantity .qty {
    margin-right: 0;
}

/* Fix the qty selector height so it matches with the button next to it */
.wp-block-add-to-cart-with-options .wc-block-components-quantity-selector {
    height: 100%;
}

/* Make sure the qty selector's height is the same as the button next to it in the editor */
.wc-block-add-to-cart-with-options__quantity-selector > div,
.wc-block-add-to-cart-with-options__quantity-selector .wc-block-components-quantity-selector {
    height: 100%;
}

/* Remove unnecessary bottom margin from the variation selector labels */
.woocommerce-page label.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name,
.woocommerce-page label.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
    margin-bottom: 0;
}

/* Remove unwanted top margin from the title of the order confirmation page template */
.wc-block-order-confirmation-status h1 {
    margin-top: 0;
}

/* Add top margin to the express checkout */
.wcpay-express-checkout-wrapper {
    margin-top: var(--wp--style--block-gap);
}

/* Remove unwanted margin from the attribute value */
.wp-block-product-specifications-item__value p {
    margin: 0;
}

/* Remove underline from the attribute value */
.wp-block-product-specifications-item__value p a {
    text-decoration: none;
}

/* Reset unwanted margins */
.wc-block-components-product-summary,
.wc-block-components-product-summary p {
    margin: 0;
}

/* Make sure the paragraph has a line break */
.wc-block-components-product-summary p + p {
    margin-top: var(--wp--style--block-gap);
}

/* Remove underline from the product name inside cart */
.wc-block-cart-item__wrap .wc-block-components-product-name {
    text-decoration: none;
}

/* Utility class for reversing the order of rows */
@media (min-width: 782px) {
    .wp-block-columns.row-reverse {
        flex-direction: row-reverse;
    }
}

.shop-wrapper {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    max-width: 1280px;
    margin: 40px auto;
    padding: 0 20px;
}


.sidebar-block {
    margin-bottom: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

.sidebar-block h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Alignment is left to the block layout (justifyContent) — hardcoding
   space-between here overrode it, and with a single child that pushed
   catalog-sorting to the left on the category template while the shop kept
   it right. See the consolidated block further down. */
.shop-toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
}

ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    padding: 0;
    list-style: none;
}

.shop-pagination {
    margin-top: 40px;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .shop-wrapper {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        position: static;
    }
}

/* ── Product Card ───────────────────────────────────────── */
.product-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--wp--preset--color--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease;
    list-style: none;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.product-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    gap: 6px;
}

.badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge--sale {
    background: #ff4757;
    color: #fff;
}

.badge--featured {
    background: #ffa502;
    color: #fff;
}

.badge--soldout {
    background: #aaa;
    color: #fff;
}

.product-card__image-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.product-card:hover .product-card__image {
    transform: scale(1.05);
}

.product-card__actions {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    transition: opacity .3s ease;
}

.product-card:hover .product-card__actions {
    opacity: 1;
}

.action-btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform .2s;
}

.action-btn:hover {
    transform: scale(1.05);
}

.add-to-cart-btn {
    background: #fff;
    color: #333;
}

.view-btn {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
}

.product-card__info {
    padding: 16px;
}

.product-card__category {
    font-size: .75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.product-card__title {
    margin: 6px 0;
    font-size: 1rem;
}

.product-card__title a {
    text-decoration: none;
    color: inherit;
}

.product-card__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-top: 8px;
}


/* ── Single Product ─────────────────────────────────────── */
.single-product-wrapper {
    max-width: 1280px;
    margin: 40px auto;
    padding: 0 20px;
}

.single-product__breadcrumb {
    margin-bottom: 24px;
    font-size: .875rem;
    color: #999;
}

.single-product__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.gallery__main {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.gallery__main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.gallery__thumb-btn {
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    width: 72px;
    height: 72px;
    background: none;
    transition: border-color .2s;
}

.gallery__thumb-btn.active,
.gallery__thumb-btn:hover {
    border-color: #333;
}

.gallery__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.single-product__category {
    font-size: .8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.single-product__title {
    font-size: 2rem;
    margin: 8px 0 12px;
}

.single-product__price {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111;
    margin: 16px 0;
}

.single-product__short-desc {
    color: #555;
    line-height: 1.7;
    margin-bottom: 24px;
}

.single-product__add-to-cart {
    margin-bottom: 24px;
}

.single-product__share {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .875rem;
}

.single-product__share a {
    color: #555;
    text-decoration: none;
}

.single-product__share a:hover {
    text-decoration: underline;
}

.single-product__tabs {
    margin-bottom: 60px;
}

.related-title {
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.related-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .single-product__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .related-products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .related-products {
        grid-template-columns: 1fr;
    }
}

/* ── Product Card ──────────────────────────── */
.product-card {
    border-radius: 12px;
    overflow: hidden;
    background: var(--wp--preset--color--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.product-card__info {
    padding: 16px;
}

/* ── Single Product ────────────────────────── */
.single-product__layout {
    gap: 60px;
    margin: 40px 0;
}

.single-product__breadcrumb {
    font-size: 0.875rem;
    color: #999;
    margin-bottom: 24px;
}

.single-product__tabs {
    margin: 60px 0;
}

.single-product__related {
    margin-bottom: 80px;
}

/* ── Category Hero ─────────────────────────── */
.category-hero {
    text-align: center;
    padding: 40px 0;
}

.category-description {
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 768px) {
    .shop-layout {
        flex-direction: column;
    }

    .shop-sidebar {
        position: static;
        width: 100% !important;
    }

    .single-product__layout {
        flex-direction: column;
    }
}

/* ── Sticky Cart Bar ───────────────────────────────────────── */
.sticky-cart-bar {
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--wp--preset--color--surface);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
    transition: bottom .3s cubic-bezier(.4, 0, .2, 1);
    padding: 12px 20px;
}

.sticky-cart-bar.is-visible {
    bottom: 0;
}

.sticky-cart-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Product info */
.sticky-cart-bar__product {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.sticky-cart-bar__image {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.sticky-cart-bar__title {
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right side */
.sticky-cart-bar__right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.sticky-cart-bar__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
}

/* Quantity */
.sticky-cart-bar__quantity {
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.qty-btn {
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .2s;
    line-height: 1;
}

.qty-btn:hover {
    background: #e8e8e8;
}

.qty-input {
    width: 44px;
    height: 36px;
    border: none;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    text-align: center;
    font-size: .95rem;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Button */
.sticky-cart-bar__btn {
    padding: 10px 24px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .2s;
    white-space: nowrap;
}

.sticky-cart-bar__btn:hover {
    background: #333;
    transform: translateY(-1px);
}

.sticky-cart-bar__btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 640px) {
    .sticky-cart-bar__product {
        display: none;
    }

    .sticky-cart-bar__right {
        width: 100%;
        justify-content: space-between;
    }
}

.wc-block-grid__product,
.wp-block-woocommerce-product-template > * {
    margin-bottom: 24px;
}

/* ── Product Sections (Description & Reviews) ──────────────── */
.single-product__sections {
    margin: 60px auto;
}

.single-product__section {
    margin-bottom: 60px;
}

/* Title with lines on each side */
.section-title-wrap {
    gap: 16px;
    margin-bottom: 32px;
}

.section-title {
    white-space: nowrap;
    font-size: 0.85rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 !important;
}

.section-title-line {
    flex: 1;
    margin: 0 !important;
    height: 1px !important;
}

.woocommerce-Reviews-title {
    display: none;
}

/* ── Homepage General ──────────────────────────────────── */
.home-page {
    overflow-x: hidden;
}

/* The eyebrow sits on light sections and dark ones alike, so it cannot have
   one fixed colour. #9bb0b9 measured 1.83:1 against the light section
   background — far under the 4.5:1 AA needs — and only passed on the dark
   bands. currentColor takes the section's own ink and the opacity keeps it
   quieter than body copy while staying legible on either. 11px was also
   under the mobile readability floor, doubly so uppercase and tracked out. */
.section-eyebrow {
    font-size: 0.75rem !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: currentColor;
    opacity: 0.72;
}

.section-header {
    margin-bottom: var(--wp--preset--spacing--60);
}

/* ── Hero ──────────────────────────────────────────────── */
.home-hero .wp-block-cover__inner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hero__content {
    width: 100%;
}

.hero__eyebrow {
    letter-spacing: 0.2em;
}

.hero__btn-primary,
.hero__btn-secondary {
    transition: opacity .2s ease, transform .2s ease;
}

.hero__btn-primary:hover,
.hero__btn-secondary:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* ── Categories ────────────────────────────────────────── */
.home-categories .wc-block-product-categories-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-categories .wc-block-product-categories-list-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddeaea;
    border-radius: 4px;
    font-family: var(--wp--preset--font-family--roboto);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #1c1e22;
    transition: background .2s, border-color .2s, transform .2s;
}

.home-categories .wc-block-product-categories-list-item a:hover {
    background: #ddeaea;
    border-color: #9bb0b9;
    transform: translateY(-2px);
}

/* ── About ─────────────────────────────────────────────── */
.about__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/5;
}

/* ── Testimonials ──────────────────────────────────────── */
.testimonials-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--50);
}

.testimonial-card {
    display: flex;
    flex-direction: column;
}

.testimonial-stars {
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 16px !important;
}

/* ── Newsletter ────────────────────────────────────────── */
.newsletter-form {
    width: 100%;
}

/* -------------------------------------------------------------------------
   Newsletter slot layout

   This used to be a Mailchimp-for-WordPress block: `.newsletter-form form`
   was `display:flex` to put mc4wp's single [email][submit] row side by side,
   and `.mc4wp-form` carried hardcoded hexes (#fafcfc / #665259 / #ddeaea),
   against this theme's own rule 1 — no hard-coded colours.

   The theme no longer assumes any plugin (see hermes_newsletter_form), so the
   form has to survive whatever the buyer drops in. Flex on the form element
   pushed a multi-field form's fields and its submit button into two columns.
   Stack by default; go side by side only when the form really is one field.
   ------------------------------------------------------------------------- */

.newsletter-form form {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
    margin-inline: auto;
    max-width: 480px;
    width: 100%;
}

.newsletter-form .wpforms-field-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
    min-width: 0;
}

/*
 * A signup that asks only for an email reads better as one row: field, then
 * button, baselines aligned. Detected by what the form contains rather than by
 * counting children — WPForms keeps two 1px anti-spam fields in the markup, so
 * :only-child never matches. Do not "fix" those fields; they are the honeypot.
 */
@media (min-width: 600px) {
    .newsletter-form form:has(.wpforms-field-email):not(:has(.wpforms-field-name)):not(:has(.wpforms-field-textarea)) {
        align-items: flex-end;
        flex-direction: row;
    }

    .newsletter-form form:has(.wpforms-field-email):not(:has(.wpforms-field-name)):not(:has(.wpforms-field-textarea)) .wpforms-submit-container {
        flex: 0 0 auto;
    }
}

/*
 * The honeypot rows are 1px tall but still count as flex children, so each one
 * adds a full gap between the real field and the button. Collapse them without
 * hiding them — display:none would defeat the anti-spam check.
 */
.newsletter-form .wpforms-field-container > .wpforms-field[data-field-type="text"]:has(> label[aria-hidden="true"]) {
    margin: calc(var(--wp--preset--spacing--30) / -2) 0;
}

/*
 * WPForms pads every field 15px top and bottom of its own accord. With the row
 * layout above, align-items:flex-end then aligns the field WRAPPER against the
 * button, which leaves the input itself floating 15px higher than the button it
 * is supposed to sit beside. Zero the wrapper padding so the input's own edge is
 * what lines up; the gap on .wpforms-field-container already does the spacing,
 * and does it consistently for every plugin rather than only this one.
 */
.newsletter-form .wpforms-field-container > .wpforms-field {
    padding-bottom: 0;
    padding-top: 0;
}

.newsletter-form .wpforms-submit-container {
    margin: 0;
    padding: 0;
    text-align: center;
}


.about-layout {
    gap: var(--wp--preset--spacing--80) !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.about__image-wrap {
    flex-shrink: 0;
    min-width: 0;
}

.about__image-wrap img,
.about__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/5;
    display: block;
}

.about__image-wrap {
    flex: 0 0 50%;
    max-width: 50%;
}


/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
    .about-layout {
        flex-direction: column !important;
    }

    .about__image-wrap {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    .home-categories .wc-block-product-categories-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .home-categories .wc-block-product-categories-list {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── Hero Split ────────────────────────────────────────── */
.hero-split__inner {
    min-height: 100vh;
}

.hero-split__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-split__stats {
    border-top: 1px solid rgba(250, 252, 252, 0.15);
    padding-top: var(--wp--preset--spacing--60);
}

/* ── Hero Minimal ──────────────────────────────────────── */
.hero-minimal__inner {
    align-items: flex-end;
}

/* ── Editorial Product Grid ────────────────────────────── */
.editorial-grid {
    align-items: stretch;
}

.editorial-featured {
    flex: 0 0 45%;
}

.editorial-secondary {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.product-card--large .product-card__image-wrap img {
    aspect-ratio: 3/4;
    object-fit: cover;
    width: 100%;
}

.product-card--horizontal {
    background: var(--wp--preset--color--surface);
    border-radius: 8px;
    overflow: hidden;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.product-card__image-wrap--small img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero-split__inner {
        flex-direction: column !important;
    }

    .hero-split__text,
    .hero-split__image {
        width: 100% !important;
        flex-size: 100% !important;
    }

    .hero-split__image {
        min-height: 50vh !important;
    }

    .editorial-grid {
        flex-direction: column !important;
    }

    .editorial-featured {
        flex: none !important;
        width: 100% !important;
    }
}

/* ── Promo Banner ──────────────────────────────────────── */
.promo-banner__inner {
    position: relative;
}

.promo-banner__badge {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}

/* ── Stats Bar ─────────────────────────────────────────── */
.stats-bar__grid {
    gap: var(--wp--preset--spacing--50);
}

.stats-bar__divider {
    height: 40px !important;
    width: 1px !important;
    margin: 0 !important;
    opacity: 0.2;
}

.stat-item__icon {
    margin: 0 !important;
    line-height: 1 !important;
}

/* ── FAQ ───────────────────────────────────────────────── */

/* blockGap:"0" on the group does not survive into a flex layout here, leaving
   ~8px between rows. The rows divide themselves with a top border, so they
   need to sit flush for it to read as one list. */
.faq-list {
    row-gap: 0;
}

.faq-item {
    cursor: pointer;
}

/* The summary carried spacing|50 top AND bottom — 96px of padding around a
   single line of text, on top of the 24px the <details> already had. Five
   questions ran to 870px of mostly empty space. Hera's FAQ puts the padding
   on the <details> alone and nothing on the summary; matching that gets the
   same rhythm here. */
.faq-item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 24px;
    font-weight: 200;
    /* was #9bb0b9 — 2.26:1 on white, too faint for the one affordance that
       tells you the row opens. */
    color: inherit;
    opacity: 0.55;
    /* Without this the 24px glyph's own line-height (39.6px) sets the height
       of the whole row, not the question text. */
    line-height: 1;
    transition: transform .3s ease;
    flex-shrink: 0;
    margin-left: 20px;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

/* The answer is spaced off the question, not padded away from the row below:
   the <details> padding already handles that, the way Hera's does. */
.faq-item p {
    margin-block-start: var(--wp--preset--spacing--20);
    margin-block-end: 0;
    padding-bottom: 0;
}

/* ── Page Header ───────────────────────────────────────── */
.pattern-page-header .wp-block-separator {
    opacity: 0.4;
}

/* ── Two Col ───────────────────────────────────────────── */
.two-col__image img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
}

/* ── CTA ───────────────────────────────────────────────── */
.pattern-cta {
    text-align: center;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
    .promo-banner__inner {
        flex-direction: column !important;
    }

    .promo-banner__badge {
        display: none;
    }

    .stats-bar__grid {
        grid-template-columns: 1fr 1fr;
        display: grid !important;
    }

    .stats-bar__divider {
        display: none !important;
    }

    .two-col__inner {
        flex-direction: column !important;
    }

    .two-col__image {
        width: 100% !important;
    }
}

/* ── Consulting Hero ───────────────────────────────────── */
.consulting-hero__inner {
    border-bottom: 1px solid rgba(250, 252, 252, 0.1);
    padding-bottom: var(--wp--preset--spacing--80);
}

.consulting-hero__stats {
    border-top: 1px solid rgba(250, 252, 252, 0.1);
}

/* ── Services Grid ─────────────────────────────────────── */
.services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--40);
}

.service-card {
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}

.service-card__number {
    margin: 0 0 var(--wp--preset--spacing--40) !important;
    opacity: 0.5;
}

/* ── Portfolio Grid ────────────────────────────────────── */
.portfolio-grid .wp-block-post-template {
    gap: var(--wp--preset--spacing--50) !important;
}

.portfolio-card__image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 4px;
}

.portfolio-card {
    transition: opacity .2s ease;
}

.portfolio-card:hover {
    opacity: 0.85;
}

/* ── Team Grid ─────────────────────────────────────────── */
.team-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--50);
}

.team-card__photo img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 4px;
    filter: grayscale(20%);
    transition: filter .3s ease;
}

.team-card:hover .team-card__photo img {
    filter: grayscale(0%);
}

/* ── Contact ───────────────────────────────────────────── */
.contact-inner {
    align-items: stretch !important;
}

.contact-box {
    min-width: 320px;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .consulting-hero__inner {
        flex-direction: column !important;
    }

    .contact-inner {
        flex-direction: column !important;
    }

    .contact-box {
        width: 100% !important;
        min-width: unset !important;
    }
}

@media (max-width: 600px) {
    .services-grid,
    .team-grid {
        grid-template-columns: 1fr !important;
    }

    .consulting-hero__stats {
        grid-template-columns: 1fr 1fr;
        display: grid !important;
        gap: var(--wp--preset--spacing--50);
    }
}

/* NOTE: an unscoped copy of the homepage category-button grid used to live
   here — `display: grid !important` with four columns, plus button styling on
   every link and `display: none` on the counts. The only block that renders
   this list is the shop sidebar (archive-product, taxonomy-product_cat and
   content-product all use it; the homepage pattern builds its own markup), so
   the rule never styled a homepage grid — it just overrode the sidebar's own
   `flex-direction: column` and laid the categories out four across. Removed.
   The sidebar rules further down are the ones that apply. */

.wp-block-group.is-style-section-3.alignfull > .wp-block-columns {
    padding: 0;
}

/* ── Cart Page ─────────────────────────────────────────── */
.cart-page .wc-block-cart {
    max-width: 100%;
}

.cart-page .wp-block-woocommerce-cart-items-block {
    border-radius: 4px;
    overflow: hidden;
}

/* ── Checkout Page ─────────────────────────────────────── */
.checkout-trust {
    opacity: 0.7;
}

.checkout-trust p {
    font-size: 13px !important;
    letter-spacing: 0.02em;
}

.checkout-page .wc-block-checkout {
    max-width: 100%;
}

.checkout-page .wp-block-woocommerce-checkout-fields-block {
    padding-right: var(--wp--preset--spacing--60);
}

/* Remove WooCommerce's own page title since we have ours */
.cart-page .woocommerce-cart h1,
.checkout-page .woocommerce-checkout h1 {
    display: none;
}

/* ── Checkout Header ───────────────────────────────────── */
.checkout-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--wp--preset--color--primary);
}

.checkout-header .wp-block-separator {
    margin: 0 !important;
    opacity: 0.3;
}

.two-col__inner {
    gap: var(--wp--preset--spacing--80) !important;
}

.two-col__inner {
    gap: var(--wp--preset--spacing--80) !important;
    align-items: center !important;
}
.about__image-wrap {
    gap: var(--wp--preset--spacing--80) !important;
}

.about__image-wrap {
    gap: var(--wp--preset--spacing--80) !important;
    align-items: center !important;
}

.two-col__image img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 4px;
}
/* =========================================================================
   STICKY FOOTER
   Nothing pushed the footer down on short pages, so it floated mid-screen.
   ========================================================================= */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > footer {
	flex-shrink: 0;
	/* Core emits :where(.wp-site-blocks) > * { margin-block-start: <blockGap> },
	   which lands on the footer and opens a strip of page background between
	   the last section and the footer. Invisible when the last section shares
	   the page background, obvious the moment it is a coloured band (cta-banner,
	   cta-contact, newsletter). Sections butt against the footer instead. */
	margin-block-start: 0;
}

/* =========================================================================
   SHOP SIDEBAR & PRODUCT FILTERS
   The sidebar had a sticky position but no reliable width, and there was no
   styling at all for WooCommerce's filter blocks — so the controls collapsed
   into each other and could not be used.
   ========================================================================= */

.shop-layout {
	gap: 40px;
	align-items: flex-start;
	margin-top: 40px;
}

/* Fixed width, and crucially it must not shrink inside a nowrap flex row. */
.shop-sidebar {
	flex: 0 0 280px;
	max-width: 280px;
	min-width: 0;
	position: sticky;
	top: 24px;
	align-self: flex-start;
}

.shop-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* Derived from the surrounding text, not a fixed grey. It was #999, which is a
   plausible grey on the default mint page and fails on every one of the four
   palettes — 2.14:1 on Caduceus, 2.31:1 on the default, 2.85:1 on Logios — and
   would have been invisible had any variation gone mid-grey. */
.sidebar-heading {
	margin-block: 0 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: color-mix(in srgb, currentColor 74%, transparent);
}

/* --- Sidebar category list -------------------------------------------
   A stacked list of plain links. The button treatment belongs to the
   homepage category grid (.home-categories) and reads as a call to action;
   in a sidebar the same styling turns navigation into a wall of blocks. */
.shop-sidebar .wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.shop-sidebar .wc-block-product-categories-list--depth-1 {
	margin-inline-start: 0.9rem;
}

.shop-sidebar .wc-block-product-categories-list-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding-block: 0.4rem;
}

.shop-sidebar .wc-block-product-categories-list-item a {
	background: none;
	border: 0;
	padding: 0;
	text-decoration: none;
	color: inherit;
	font-size: 0.95rem;
	transition: color .18s;
}

.shop-sidebar .wc-block-product-categories-list-item a:hover,
.shop-sidebar .wc-block-product-categories-list-item a:focus-visible {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* The counts are visible again now the unscoped `display: none` above is gone,
   which is what showCount:true in the templates always intended. #9bb0b9 was
   2.26:1 on the sidebar's white — inherit the sidebar's ink instead. */
.shop-sidebar .wc-block-product-categories-list-item-count {
	font-size: 0.78rem;
	color: inherit;
	opacity: 0.6;
	flex: 0 0 auto;
}

/* The current category should read as current. */
.shop-sidebar .wc-block-product-categories-list-item.is-active > a,
.shop-sidebar .wc-block-product-categories-list-item.current-cat > a {
	font-weight: 600;
}

/* --- Inline filters (drawer disabled) ---------------------------------
   With showFilterDrawer:false the filters render straight into the sidebar
   rather than behind a "Filter products" button, so the overlay chrome is
   never output. These guards keep it hidden if a template forgets the flag. */
.shop-sidebar .wc-block-product-filters__open-overlay {
	display: none;
}

.shop-sidebar .wc-block-product-filters.is-filter-drawer-disabled .wc-block-product-filters__overlay,
.shop-sidebar .wc-block-product-filters.is-filter-drawer-disabled .wc-block-product-filters__overlay-wrapper,
.shop-sidebar .wc-block-product-filters.is-filter-drawer-disabled .wc-block-product-filters__overlay-dialog,
.shop-sidebar .wc-block-product-filters.is-filter-drawer-disabled .wc-block-product-filters__overlay-content {
	position: static;
	display: block;
	inset: auto;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	background: none;
	box-shadow: none;
	padding: 0;
	transform: none;
	opacity: 1;
	visibility: visible;
}

.shop-sidebar .wc-block-product-filters__overlay-header {
	display: none;
}

/* --- WooCommerce product filters ------------------------------------- */

.shop-filters .wp-block-woocommerce-product-filter,
.shop-filters > * + * {
	margin-block-start: 1.75rem;
}

/* Each filter group gets a clear boundary so they stop reading as one mass. */
.shop-filters .wp-block-woocommerce-product-filter {
	padding-block-end: 1.5rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.shop-filters .wp-block-woocommerce-product-filter:last-child {
	border-bottom: 0;
	padding-block-end: 0;
}

.shop-filters h3,
.shop-filters .wp-block-heading {
	font-size: var(--wp--preset--font-size--small);
	margin-block: 0 0.65rem;
}

/* Price slider: give the track room so the two handles cannot overlap. */
.shop-filters .wc-block-product-filter-price-slider,
.shop-filters .wp-block-woocommerce-product-filter-price-slider {
	padding-inline: 8px;
	margin-block: 0.5rem 1rem;
}

/* Leave WooCommerce's grid alone here. It lays the block out as two rows —
   the slider spanning the top, the min and max inputs side by side beneath —
   and an earlier `display: flex` on this selector destroyed that. The three
   children then shared one row, and the slider, which has no intrinsic width,
   collapsed to 0px: an invisible, undraggable track sitting between two text
   boxes that read as a separate second filter. Only the row gap needs setting. */
.shop-filters .wc-block-product-filter-price-slider__content {
	row-gap: 0.75rem;
}

/* The classic (non-block) price filter has no grid of its own. */
.shop-filters .wc-block-price-filter__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.shop-filters input[type="text"],
.shop-filters input[type="number"] {
	min-width: 0;
	width: 100%;
	max-width: 110px;
	padding: 0.45rem 0.6rem;
	font-size: 0.875rem;
}

/* Checkbox and rating rows: readable hit targets, no overlap. */
.shop-filters .wc-block-components-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 0.4rem;
	line-height: 1.4;
}

.shop-filters .wc-block-components-checkbox__label {
	font-size: 0.9375rem;
}

.shop-filters .wc-block-components-filter-submit-button,
.shop-filters .wp-block-woocommerce-product-filter-clear-button {
	margin-block-start: 1rem;
}

/* Stack the whole thing on smaller screens. */
@media (max-width: 900px) {
	.shop-layout {
		flex-wrap: wrap !important;
	}

	.shop-sidebar {
		flex: 1 1 100%;
		max-width: none;
		position: static;
	}
}

/* =========================================================================
   ANIMATIONS
   Gated behind .hermes-js so no-JS visitors see everything immediately, and
   behind prefers-reduced-motion so anyone who asks for stillness gets it.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

    .hermes-js .wp-block-columns > .wp-block-column,
    .hermes-js .wp-block-group.alignfull > .wp-block-heading,
    .hermes-js .wp-block-group.alignfull > .wp-block-group > .wp-block-heading,
    .hermes-js .wc-block-product-template > li,
    .hermes-js ul.products > li.product {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
                    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

    .hermes-js .wp-block-columns > .wp-block-column.is-revealed,
    .hermes-js .wp-block-group.alignfull > .wp-block-heading.is-revealed,
    .hermes-js .wp-block-group.alignfull > .wp-block-group > .wp-block-heading.is-revealed,
    .hermes-js .wc-block-product-template > li.is-revealed,
    .hermes-js ul.products > li.product.is-revealed {
        opacity: 1;
        transform: none;
    }
}

/* Header gains a shadow once the page scrolls. */
header,
.wp-site-blocks > header {
    transition: box-shadow 220ms ease, background-color 220ms ease;
}

.hermes-scrolled header,
.hermes-scrolled .wp-site-blocks > header {
    box-shadow: 0 1px 0 0 color-mix(in srgb, currentColor 10%, transparent),
                0 10px 30px -22px rgba(0, 0, 0, 0.5);
}

/* Product cards lift slightly on hover — a shop affordance, kept subtle. */
@media (prefers-reduced-motion: no-preference) {
    .wc-block-product-template > li,
    ul.products > li.product {
        transition: transform 220ms ease;
    }

    .wc-block-product-template > li:hover,
    ul.products > li.product:hover {
        transform: translateY(-3px);
    }
}


/* =========================================================================
   TAP TARGETS
   ========================================================================= */

/* Core sizes the mobile menu toggle to its 24px icon and nothing more: the
   bare WCAG 2.5.8 floor, well under the 44px a thumb wants, on the single
   most-used control on a phone. An overlay pseudo-element grows the hit area
   to 44x44 without occupying any layout space, so no header shifts.

   It grows upward, downward and inward only. Padding the button, or growing
   this overlay outward, pushes past the viewport edge — Hermes' header is
   nowrap and sits flush right, and either approach put it 2px over a 360px
   screen and raised a horizontal scrollbar. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    position: relative;
}

.wp-block-navigation__responsive-container-open::after,
.wp-block-navigation__responsive-container-close::after {
    content: "";
    position: absolute;
    inset: -10px 0 -10px -20px;
}

/* The logos-only social style strips the anchor's padding, so the tap target
   collapses to the 24px glyph itself. Same overlay trick, but grown 4px
   sideways rather than 10px: the icons sit 8px apart, and a wider overlay
   would have neighbouring targets overlapping so a tap aimed at one link
   opened another. 32x44 is what fits without that. */
.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor {
    position: relative;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor::after {
    content: "";
    position: absolute;
    inset: -10px -4px;
}


/* A page whose content ends in a full-bleed coloured section still showed a
   strip of page background above the footer. It was never the footer's margin
   (that is already zeroed above) and never the pattern: theme.json gives
   core/post-content a bottom padding of spacing|60, and an `alignfull` child
   stretches sideways out of that wrapper but cannot cover its padding. So the
   band stopped ~48-175px short of the footer. Hermes sets no post-content
   padding, which is why Hermes alone never showed this.

   Drop the padding only when the content ends in a full-width section; a
   prose page ending in a paragraph still gets its breathing room. */
.wp-block-post-content:has(> .alignfull:last-child) {
    padding-bottom: 0;
}