/**
 * Shop archive (Shop / category / tag pages) — hero, toolbar, filter
 * sidebar, product grid, and grid/list view toggle. Mirrors the "Shop"
 * frame from the Zozia Beauty Pencil design.
 */

.zozia-shop {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 32px 48px;
	/* Overrides the theme's global 24px root block-gap (theme.json
	   styles.spacing.blockGap) between the header template part and
	   <main> — full gap read as an oversized empty strip above the
	   breadcrumb on every viewport, not just mobile (see the
	   max-width:860px block below, which used to be the only place
	   this was tightened). */
	margin-top: 8px;
}

/* Breadcrumb */
.zozia-shop-breadcrumb {
	padding: 10px 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

.zozia-shop-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.zozia-shop-breadcrumb a:hover {
	text-decoration: underline;
}

/* Hero */
.zozia-shop-hero-wrap {
	margin-top: 0;
	margin-block-start: 0;
}

.zozia-shop-hero {
	background: #F6D9E4;
	border-radius: 8px;
	padding: 24px 32px;
	gap: 24px;
}

.zozia-shop-hero-text {
	max-width: 480px;
}

.zozia-shop-hero-logo {
	margin: 0 0 14px;
}

.zozia-shop-hero-logo-img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	object-fit: contain;
	padding: 6px;
}

.zozia-shop-hero-title {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 34px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.zozia-shop-hero-subtitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* Clamp to 3 lines so a long category/brand/tag description can't stretch
   .zozia-shop-hero taller than the fixed 160px cover image (see
   .zozia-shop-hero-image below) — otherwise hero height swings wildly
   from term to term depending on how much the admin wrote. Any paragraph
   after the first is hidden outright: the card has no room for a second
   one once the first is already clamped. */
.zozia-shop-hero-subtitle p:not(:first-child) {
	display: none;
}

.zozia-shop-hero-subtitle p {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.zozia-shop-hero-image {
	flex-shrink: 0;
	width: 400px;
	height: 160px;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
}

.zozia-shop-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* "Title only" hero — no brand logo, subtitle, or cover image to fill
   the card (the plain Shop archive, or a category/brand/tag/attribute
   term with none of those set). Drops the padded pink card down to a
   plain heading instead of a mostly-empty full-width block. The class
   is added by inc/shop-hero-compact.php, whose PHP condition mirrors
   what brand-logo/shop-hero-subtitle/category-cover-image actually
   render — keep both in sync if that logic changes. */
body.zozia-shop-hero-title-only .zozia-shop-hero {
	background: none;
	padding: 0;
	gap: 0;
}

body.zozia-shop-hero-title-only .zozia-shop-hero-title {
	margin: 0 0 4px;
	font-size: 28px;
}

/* Toolbar */
.zozia-shop-toolbar {
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	gap: 16px;
}

.zozia-shop-toolbar-left,
.zozia-shop-toolbar-right {
	align-items: center;
	gap: 20px;
}

/* Right-align each wrapped row (Sort By/View/icons, then the filter
   pills below them) against the toolbar's right edge, rather than
   left-aligning to wherever the row happens to start. */
.zozia-shop-toolbar-right {
	justify-content: flex-end;
}

/* The inner toolbar-right (see templates/archive-product.html — it's
   nested inside another .zozia-shop-toolbar-right) stacks its two rows,
   the Sort By/View/icons controls and the filter pills, and stretches
   both to the same width — the wider row's natural content width — so
   their left *and* right edges line up regardless of how much content
   either row actually holds. `align-items: stretch` on a column flex
   container does that, but the block editor's own generated layout
   style for a vertical flex group sets align-items: flex-start instead
   (single class, lower specificity than this two-class descendant
   selector, so this always wins regardless of stylesheet order). */
.zozia-shop-toolbar-right .zozia-shop-toolbar-right {
	align-items: stretch;
}

.zozia-shop-toolbar-controls {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: flex-end;
}

.zozia-filter-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 6px;
	background: none;
	padding: 8px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.wp-block-woocommerce-product-results-count {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

/* "Sort By" and "View" per-page controls — matching custom button +
   listbox styling (see the comment in blocks/per-page-select/render.php
   for why these aren't native <select>s). */
.zozia-sort-by,
.zozia-per-page {
	display: flex;
	align-items: center;
	gap: 10px;
}

.zozia-sort-by__label,
.zozia-per-page__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.zozia-sort-by__dropdown,
.zozia-per-page__dropdown {
	position: relative;
}

.zozia-sort-by__trigger,
.zozia-per-page__trigger {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 36px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 6px;
	padding: 0 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
	white-space: nowrap;
}

.zozia-per-page__trigger {
	width: 148px;
}

/* "Price Low to High" / "Price High to Low" need more room than the
   per-page labels. */
.zozia-sort-by__trigger {
	width: 190px;
}

.zozia-sort-by__trigger svg,
.zozia-per-page__trigger svg {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.zozia-sort-by__trigger[aria-expanded="true"] svg,
.zozia-per-page__trigger[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.zozia-sort-by__menu,
.zozia-per-page__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(36, 16, 25, 0.1);
	overflow: hidden;
}

.zozia-per-page__menu {
	width: 148px;
}

.zozia-sort-by__menu {
	width: 190px;
}

.zozia-sort-by__menu[hidden],
.zozia-per-page__menu[hidden] {
	display: none;
}

.zozia-sort-by__option,
.zozia-per-page__option {
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
	cursor: pointer;
}

/* One option is always the current value, hidden here since it's
   already shown in the trigger above (see each block's render.php) —
   use :not([hidden]) rather than a plain adjacent-sibling selector so
   the divider lands between the two *visible* rows regardless of which
   option that hidden one is. */
.zozia-sort-by__option:not([hidden]) ~ .zozia-sort-by__option:not([hidden]),
.zozia-per-page__option:not([hidden]) ~ .zozia-per-page__option:not([hidden]) {
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.zozia-sort-by__option:hover,
.zozia-sort-by__option.is-active,
.zozia-per-page__option:hover,
.zozia-per-page__option.is-active {
	background-color: var(--wp--preset--color--surface);
}

.zozia-sort-by__option.is-selected,
.zozia-per-page__option.is-selected {
	font-weight: 600;
}

.zozia-view-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
}

.zozia-view-toggle__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--border-light);
	background: none;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	padding: 0;
}

.zozia-view-toggle__btn.is-active {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Quick-filter pills (Brand / Best Seller / New / Top Rated). "Best
   Seller"/"New"/"Top Rated" are shortcuts onto the same ?orderby= values
   as the "Sort By" dropdown above; "Brand" opens its own popover (see
   blocks/shop-filter-pills/render.php). */
.zozia-shop-filter-pills {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	/* Stretched to match the controls row's width above (see
	   .zozia-shop-toolbar-right .zozia-shop-toolbar-right) — right-align
	   the pills within that width so both rows' right edges (and, since
	   the rows are equal width, their left edges too) line up. */
	justify-content: flex-end;
}

.zozia-shop-filter-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	height: 36px;
	border: 1px solid #E3E3E3;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0 16px;
	background-color: #F2F2F2;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	white-space: nowrap;
}

.zozia-shop-filter-pill:hover {
	background-color: #E9E9E9;
}

.zozia-shop-filter-pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.zozia-shop-filter-pill.is-selected {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* Selected-brand chips — one per brand checked in the "Brand" popover,
   rendered inline in the pill row (see blocks/shop-filter-pills/render.php)
   so a shopper can drop a single brand without reopening the popover. */
.zozia-brand-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 36px;
	border: 1px solid var(--wp--preset--color--border-light);
	/* Smaller, near-square corners (vs. the full-pill shape used by the
	   "Brand"/sort pills above) so a chip reads as a distinct, removable
	   selection rather than another filter trigger. */
	border-radius: var(--wp--custom--radius--sm);
	padding: 0 12px;
	background-color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	/* Muted plum rather than the brighter primary pink — a selected chip
	   should read as quieter than the pink "is-selected" pill state. */
	color: var(--wp--preset--color--primary-dark);
	cursor: pointer;
	white-space: nowrap;
}

.zozia-brand-chip:hover,
.zozia-brand-chip:focus-visible {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary-dark);
}

.zozia-brand-chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.zozia-brand-chip svg {
	flex-shrink: 0;
}

/* "Brand" popover — searchable, multi-select checkbox list scoped to the
   current archive (see zozia_beauty_get_brand_filter_terms() in
   inc/product-brand-filter.php). Positioned the same way as the "Sort
   By"/"View" dropdowns (.zozia-sort-by__menu) but wider, since it holds
   a two-column brand list rather than a handful of stacked options. */
.zozia-brand-filter {
	position: relative;
}

.zozia-brand-filter__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	width: 480px;
	max-width: 90vw;
	/* Without this, `max-width: 90vw` only bounds the content box — the
	   20px padding and 1px border on each side (below) push the actual
	   rendered width past that cap, and past the viewport edge on narrow
	   phones once the popover is clamped there (see zoziaPositionPopover()
	   in shop.js). */
	box-sizing: border-box;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(36, 16, 25, 0.1);
	padding: 20px;
}

.zozia-brand-filter__panel[hidden] {
	display: none;
}

.zozia-brand-filter__header {
	margin-bottom: 16px;
}

.zozia-brand-filter__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.zozia-brand-filter__search {
	position: relative;
	margin-bottom: 16px;
}

.zozia-brand-filter__search svg {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}

.zozia-brand-filter__search-input {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 6px;
	padding: 0 14px 0 38px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
}

.zozia-brand-filter__search-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.zozia-brand-filter__list {
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	/* Fills the first column top-to-bottom before wrapping to the second,
	   matching the reference design, without needing to know the brand
	   count ahead of time (unlike a fixed-row-count CSS grid would). */
	column-count: 2;
	column-gap: 24px;
	margin-bottom: 16px;
}

.zozia-brand-filter__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	break-inside: avoid;
	cursor: pointer;
}

/* Same specificity as the flex rule above and loaded after the
   browser's own `[hidden]{display:none}` default, so without this the
   search filter's `option.hidden = true` (assets/js/shop.js) would get
   silently overridden back to visible. */
.zozia-brand-filter__option[hidden] {
	display: none;
}

.zozia-brand-filter__option-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.zozia-brand-filter__option input[type="checkbox"] {
	flex-shrink: 0;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	background-color: var(--wp--preset--color--white);
	appearance: none;
	cursor: pointer;
}

.zozia-brand-filter__option input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.zozia-brand-filter__option input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.zozia-brand-filter__empty {
	margin: 0;
	padding: 8px 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.zozia-brand-filter__footer {
	display: flex;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.zozia-brand-filter__reset,
.zozia-brand-filter__apply {
	flex: 1;
	height: 44px;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.zozia-brand-filter__reset {
	border: 1px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

.zozia-brand-filter__reset:hover {
	background-color: var(--wp--preset--color--surface);
}

.zozia-brand-filter__apply {
	border: 1px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.zozia-brand-filter__apply:hover {
	opacity: 0.9;
}

.zozia-brand-filter__reset:focus-visible,
.zozia-brand-filter__apply:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* "Reset filters" — only rendered/visible once a filter above is active
   (WooCommerce's own woocommerce/product-filter-active wrapper handles
   that, see templates/archive-product.html). Styled to match the
   Brand popover's own reset/apply buttons (.zozia-brand-filter__reset). */
.wp-block-woocommerce-product-filter-active {
	margin-top: 20px;
}

.zozia-filter-reset {
	margin: 0;
}

.zozia-filter-reset .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	cursor: pointer;
}

.zozia-filter-reset .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface);
}

.zozia-filter-reset .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Body: sidebar + grid */
.zozia-shop-body {
	align-items: flex-start;
	gap: 32px;
	padding-top: 24px;
}

.zozia-shop-sidebar {
	width: 220px;
	flex-shrink: 0;
}

.zozia-shop-sidebar.is-collapsed {
	display: none;
}

/* Mobile slide-in drawer chrome (backdrop, panel, header) — inert on
   desktop, where the sidebar just sits inline (see .is-collapsed above).
   Turned on inside the max-width: 860px block below. */
.zozia-shop-sidebar__backdrop,
.zozia-shop-sidebar__header {
	display: none;
}

/* Locks background scroll while the mobile filter drawer is open (see
   setSidebarOpen() in shop.js). */
body.zozia-filter-drawer-open {
	overflow: hidden;
}

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

/* Filter sections (accordion) */
.zozia-filter-section {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.zozia-filter-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.zozia-filter-heading__icon {
	font-size: 16px;
	line-height: 1;
}

.zozia-filter-section__body {
	padding-bottom: 16px;
}

.zozia-filter-section.is-collapsed .zozia-filter-section__body {
	display: none;
}

/* Checkbox filters (Availability, and any attribute filters added later).
   `fieldset` gets no border from WooCommerce's own stylesheet — it relies
   on an ancestor `.wc-block-product-filter-checkbox-list` class that
   isn't present on this block's actual wrapper, so without this reset
   the browser's default groove border shows around the whole list. */
.wp-block-woocommerce-product-filter-checkbox-list fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

.wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wc-block-product-filter-checkbox-list__label {
	gap: 10px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

/* The checkbox box and its checkmark are both sized in `em` off this
   wrapper's font-size — bumping it independently of the label text's
   13px gives a comfortably tappable ~16px box without enlarging the
   label. */
.wc-block-product-filter-checkbox-list__input-wrapper {
	font-size: 16px;
}

/* WooCommerce draws a faint 10%-opacity swatch square here by default;
   replaced below by an actual bordered box on the input itself. */
.wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}

input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	border: 1.5px solid var(--wp--preset--color--border-light) !important;
	border-radius: 4px !important;
	background-color: var(--wp--preset--color--white) !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="checkbox"].wc-block-product-filter-checkbox-list__input:hover {
	border-color: var(--wp--preset--color--primary) !important;
}

input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

.wc-block-product-filter-checkbox-list__mark {
	color: var(--wp--preset--color--white);
}

.wp-block-woocommerce-product-filter-price .wc-block-product-filter-price-slider__range-input::-webkit-slider-thumb {
	background: var(--wp--preset--color--sale);
}

/* WooCommerce's price slider grid is `auto 1fr auto` (min input | range
   track | max input). The min/max text inputs otherwise render at their
   browser-default intrinsic width (~150px+), which blows out the 220px
   sidebar — giving them a fixed, narrow width lets the "auto" tracks
   shrink to fit, and the middle "1fr" track (the slider) takes the rest. */
.wp-block-woocommerce-product-filter-price-slider,
.wc-block-product-filter-price-slider__content {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.wp-block-woocommerce-product-filter-price input[type="text"],
.wp-block-woocommerce-product-filter-price input[type="number"] {
	width: 55px !important;
	max-width: 55px !important;
	box-sizing: border-box !important;
	padding: 4px !important;
	font-size: 12px !important;
}

.wp-block-woocommerce-product-filter-price input[type="range"] {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Product grid */
.zozia-shop-grid ul.wc-block-product-template,
.zozia-shop-grid .wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zozia-shop-grid li.wc-block-product {
	position: relative;
	list-style: none;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Card image, sale badge, wishlist heart, title, and price are styled in
   assets/css/product-card.css — shared with every other product card on
   the site (see that file's docblock). Only grid layout, list-view, and
   pagination live here. */

/* Card "Add to cart" button — see product-template markup in
   archive-product.html / product-search-results.html. Colors/weight
   come from theme.json's global .wp-element-button styles; this just
   fits it to the card's compact size. */
.zozia-shop-grid .wp-block-woocommerce-product-button {
	margin: 0 14px 14px;
	margin-top: auto;
}

.zozia-shop-grid .wp-block-woocommerce-product-button .wp-element-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 28px;
	padding: 5px 12px;
	border-radius: var(--wp--custom--radius--md);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--primary);
	transition: background 0.15s ease, color 0.15s ease;
}

.zozia-shop-grid .wp-block-woocommerce-product-button .wp-element-button:hover,
.zozia-shop-grid .wp-block-woocommerce-product-button .wp-element-button:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Core's "View cart" link, shown under the button once a simple product's
   been added (WooCommerce Blocks ProductButton::get_view_cart_html()).
   It grows the card taller than its still-unadded neighbors, breaking row
   alignment — and it's redundant here: adding to cart already pops open
   the cart drawer (assets/js/cart-drawer.js listens for the same
   add-to-cart event), so there's already a faster path to the cart than
   this link. `!important` because Interactivity API toggles this
   element's `hidden` attribute at runtime — a plain `display: none` would
   get overridden the moment core clears `hidden`.

   Hides the `<span>` wrapper (get_view_cart_html()'s outer element, the
   one Interactivity API actually un-hides), not just the `<a>` inside it —
   .wp-block-woocommerce-product-button is a column flexbox with `gap`, so
   a merely-empty-but-still-`display: block` span was still claiming a
   `gap` below the button even at zero height. */
.zozia-shop-grid .wp-block-woocommerce-product-button > span:has(.added_to_cart.wc_forward) {
	display: none !important;
}

/* List view */
#zozia-shop-body.is-list-view .zozia-shop-grid ul.wc-block-product-template,
#zozia-shop-body.is-list-view .zozia-shop-grid .wc-block-grid__products {
	grid-template-columns: 1fr;
}

#zozia-shop-body.is-list-view .zozia-shop-grid li.wc-block-product {
	flex-direction: row;
	align-items: center;
}

#zozia-shop-body.is-list-view .zozia-shop-grid .wp-block-woocommerce-product-image {
	width: 140px;
	flex-shrink: 0;
	/* Image butts straight up against the card's pink background with no
	   breathing room otherwise — grid view gets its gap for free from the
	   title's own top margin, which doesn't apply here since image and
	   title are side-by-side flex siblings, not stacked. */
	margin-right: 20px;
}

#zozia-shop-body.is-list-view .zozia-shop-grid .wp-block-woocommerce-product-image img {
	aspect-ratio: 1 / 1;
}

#zozia-shop-body.is-list-view .zozia-shop-grid .wp-block-post-title,
#zozia-shop-body.is-list-view .zozia-shop-grid .wp-block-woocommerce-product-price {
	/* Grid view's title/price margins are asymmetric top vs bottom
	   (title: 12px/6px, price: 0/8px in product-card.css) to control
	   stacked spacing in a column card. In list view they're flex
	   siblings instead, and align-items: center on the row centers each
	   one's full margin box — the mismatched top/bottom margins then
	   pull the two texts to different visual heights even though their
	   boxes are centered. Zeroing vertical margin here (kept only in
	   grid view) makes each box just its line-height, so centering the
	   boxes centers the text itself, identically for both. */
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 16px;
}

#zozia-shop-body.is-list-view .zozia-shop-grid .wp-block-woocommerce-product-button {
	margin: 0 20px 0 auto;
}

#zozia-shop-body.is-list-view .zozia-shop-grid .wp-block-woocommerce-product-button .wp-element-button {
	width: auto;
	white-space: nowrap;
}

/* Pagination — square number pills (current page filled solid) plus
   outlined "Previous"/"Next" buttons with a directional arrow. Markup is
   core's Query Pagination block (see the product-collection query in
   page-zozia-beauty.html / archive-product.html): a
   .wp-block-query-pagination-numbers wrapper of `.page-numbers`
   links/current span, flanked by bare `.wp-block-query-pagination-next`
   / `-previous` anchors (no inner wrapper div) — WooCommerce only
   renders the previous link once there's a page before this one. */
.zozia-shop-pagination {
	margin-top: 32px;
	gap: 8px;
	align-items: center;
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 6px;
}

.zozia-shop-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 4px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.zozia-shop-pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--ink);
}

.zozia-shop-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.zozia-shop-pagination .page-numbers.dots {
	border-color: transparent;
}

.zozia-shop-pagination .wp-block-query-pagination-next,
.zozia-shop-pagination .wp-block-query-pagination-previous {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 16px;
	margin-left: 8px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border-light);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.zozia-shop-pagination .wp-block-query-pagination-previous {
	margin-left: 0;
	margin-right: 8px;
}

.zozia-shop-pagination .wp-block-query-pagination-next:hover,
.zozia-shop-pagination .wp-block-query-pagination-previous:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.zozia-shop-pagination .wp-block-query-pagination-next::after {
	content: "\2192";
}

.zozia-shop-pagination .wp-block-query-pagination-previous::before {
	content: "\2190";
}

/**
 * Responsive: sidebar collapses behind the Filter toggle, hero stacks,
 * grid drops to fewer columns.
 */
@media (max-width: 1024px) {
	.zozia-shop-grid ul.wc-block-product-template,
	.zozia-shop-grid .wc-block-grid__products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 860px) {
	.zozia-shop-hero {
		flex-wrap: wrap;
	}

	.zozia-shop-hero-image {
		width: 100%;
	}

	.zozia-shop-body {
		flex-wrap: wrap;
	}

	.zozia-shop-main {
		width: 100%;
	}

	/* Filter sidebar becomes a slide-in drawer from the left, matching
	   the cart drawer's pattern (see cart-drawer.css) mirrored to the
	   opposite side. Closed by default; .is-open is toggled by shop.js. */
	.zozia-shop-sidebar {
		position: fixed;
		inset: 0;
		z-index: 1000;
		width: auto;
		visibility: hidden;
		pointer-events: none;
	}

	.zozia-shop-sidebar.is-open {
		visibility: visible;
		pointer-events: auto;
	}

	/* On mobile .is-collapsed no longer applies (drawer visibility is
	   driven by .is-open instead) — without this, display:none would
	   block the drawer's own fixed-position box from ever showing again
	   if it was toggled while still in desktop mode. */
	.zozia-shop-sidebar.is-collapsed {
		display: block;
	}

	.zozia-shop-sidebar__backdrop {
		display: block;
		position: absolute;
		inset: 0;
		background: rgba(36, 16, 25, 0.45);
		opacity: 0;
		transition: opacity 0.3s ease;
		border: none;
		padding: 0;
		margin: 0;
		cursor: default;
	}

	.zozia-shop-sidebar.is-open .zozia-shop-sidebar__backdrop {
		opacity: 1;
	}

	.zozia-shop-sidebar__panel {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 320px;
		max-width: 85vw;
		box-sizing: border-box;
		background: var(--wp--preset--color--white);
		box-shadow: 12px 0 32px rgba(36, 16, 25, 0.15);
		padding: 0 24px 24px;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.35s ease;
	}

	.zozia-shop-sidebar.is-open .zozia-shop-sidebar__panel {
		transform: translateX(0);
	}

	.zozia-shop-sidebar__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		padding: 20px 0;
		background: var(--wp--preset--color--white);
	}

	.zozia-shop-sidebar__title {
		margin: 0;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 20px;
		font-weight: 600;
		color: var(--wp--preset--color--ink);
	}

	.zozia-shop-sidebar__close {
		display: flex;
		border: none;
		background: none;
		padding: 4px;
		margin: 0;
		cursor: pointer;
		color: var(--wp--preset--color--ink);
	}

	.zozia-shop-grid ul.wc-block-product-template,
	.zozia-shop-grid .wc-block-grid__products {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Toolbar (Filter / results count / Sort By / View / pills) — at full
	   width, three controls that need ~460px combined (Sort By + View +
	   grid-list icons) and four filter pills were each wrapping onto
	   their own stacked row, burning a lot of vertical space before any
	   products are visible. Compact this down to: Filter+count on one
	   row, then two horizontally-scrollable rows (controls, pills)
	   instead of four-plus stacked ones. */
	.zozia-shop-toolbar {
		flex-wrap: wrap;
		padding: 12px 0;
		row-gap: 10px;
	}

	.zozia-shop-toolbar-left,
	.zozia-shop-toolbar-right {
		flex: 1 1 100%;
		/* Flex items default to `min-width: auto`, which floors their size
		   at their content's min-content width — for this row that's the
		   combined width of every non-wrapping control/pill nested inside,
		   wider than the viewport. That floor overrides the overflow-x:auto
		   scrollers below (percentage widths inside them resolve against
		   this un-shrunk box, not the viewport), pushing the whole page
		   into horizontal scroll. Zeroing it lets the row actually shrink
		   to the container width so those scrollers do their job instead. */
		min-width: 0;
	}

	.zozia-shop-toolbar-left {
		justify-content: space-between;
	}

	.zozia-shop-toolbar-right .zozia-shop-toolbar-right {
		width: 100%;
		min-width: 0;
		gap: 10px;
	}

	.zozia-shop-toolbar-controls {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		width: 100%;
		min-width: 0;
		gap: 12px;
	}

	.zozia-shop-toolbar-controls::-webkit-scrollbar {
		display: none;
	}

	/* "Sort By" / "View" labels are redundant with the dropdown's own
	   value text ("Best Seller", "64 per page") — dropping them shrinks
	   each control enough that the row rarely needs to scroll at all. */
	.zozia-sort-by__label,
	.zozia-per-page__label {
		display: none;
	}

	.zozia-shop-filter-pills {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		width: 100%;
		min-width: 0;
	}

	.zozia-shop-filter-pills::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 480px) {
	.zozia-shop {
		padding-left: 16px;
		padding-right: 16px;
	}

	.zozia-shop-grid ul.wc-block-product-template,
	.zozia-shop-grid .wc-block-grid__products {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}