/* ==========================================================================
   My Zawar — WooCommerce block restyling

   WooCommerce ships its own opinionated styles. This file bends its block
   output back onto the design system in components.css, reusing the same
   tokens rather than restating hex values. Loaded only on WooCommerce routes
   (see myzawar_is_woocommerce_context).

   !important appears only where WooCommerce sets an inline or higher
   specificity style we cannot otherwise outrank.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global resets — corners are sharp
   -------------------------------------------------------------------------- */
.wc-block-components-button,
.wc-block-components-text-input input,
.wc-block-components-select__select,
.wc-block-components-quantity-selector,
.wc-block-grid__product-image img,
.wc-block-product-template img,
.wp-block-woocommerce-product-image img {
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */
.wc-block-components-button:not(.is-link) {
	background-color: var(--wine-700);
	border: 0;
	border-radius: 0;
	color: var(--ivory-50);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	min-height: 3rem;
	padding: 1rem 2rem;
	text-transform: uppercase;
	transition: background-color var(--dur-base) var(--ease-silk);
}

.wc-block-components-button:not(.is-link):hover {
	background-color: var(--wine-600);
	color: var(--ivory-50);
}

.wc-block-components-button:not(.is-link):focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(194, 160, 92, .4);
}

.wc-block-components-button.is-link {
	color: var(--gold-700);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}
.wc-block-components-button.is-link:hover { color: var(--wine-700); }

/* Add to Bag on product cards spans the card, matching the source grid. */
.wp-block-add-to-cart-with-options .single_add_to_cart_button,
.wc-block-components-product-button .wp-block-button__link {
	background-color: var(--wine-700);
	border-radius: 0;
	color: var(--ivory-50);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	padding: 0.875rem 1rem;
	text-transform: uppercase;
	width: 100%;
}
.wc-block-components-product-button .wp-block-button__link:hover {
	background-color: var(--wine-600);
}

/* --------------------------------------------------------------------------
   3. Price
   -------------------------------------------------------------------------- */
.wc-block-components-product-price,
.wc-block-components-product-price__value {
	color: var(--wine-700);
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wc-block-components-product-price__regular,
.wc-block-components-product-price del,
del .wc-block-components-product-price__value {
	color: var(--ink-400);
	font-size: 13px;
	font-weight: 400;
	text-decoration: line-through;
}

.wc-block-components-product-price ins {
	text-decoration: none;
}

/* PDP price is the large variant. */
.wp-block-woocommerce-product-price .wc-block-components-product-price__value,
.single-product .summary .price {
	font-size: 28px;
}

/* --------------------------------------------------------------------------
   4. Product cards (Product Collection / Product Template)
   White card on a warm ivory band, no resting shadow — see DESIGN-SYSTEM 6.3.
   -------------------------------------------------------------------------- */
.wc-block-product-template__responsive-wrapper .wc-block-product,
.wp-block-woocommerce-product-template li.product,
.wc-block-grid__product {
	background-color: var(--surface);
	display: flex;
	flex-direction: column;
	height: 100%;
	text-align: center;
	transition: box-shadow var(--dur-base) var(--ease-silk);
}

.wc-block-product-template__responsive-wrapper .wc-block-product:hover,
.wp-block-woocommerce-product-template li.product:hover {
	box-shadow: var(--shadow-sm);
}

.wp-block-woocommerce-product-template li.product .wp-block-post-featured-image,
.wc-block-grid__product-image {
	background-color: var(--surface-image);
	overflow: hidden;
}

.wp-block-woocommerce-product-template li.product img {
	object-fit: cover;
	transition: transform var(--dur-image) var(--ease-silk);
	width: 100%;
}
.wp-block-woocommerce-product-template li.product:hover img {
	transform: scale(1.06);
}

/* Category label above the product name. */
.wp-block-woocommerce-product-template .wc-block-components-product-category-list,
.wp-block-woocommerce-product-template .wp-block-post-terms {
	color: var(--gold-700);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.wp-block-woocommerce-product-template .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.wc-block-components-product-title,
.wp-block-woocommerce-product-template .wp-block-post-title {
	color: var(--ink-800);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.4;
	/* Reserve two lines so buttons align across a row. */
	min-height: 2.45em;
}
.wp-block-woocommerce-product-template .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-std);
}
.wp-block-woocommerce-product-template .wp-block-post-title a:hover {
	color: var(--wine-700);
}

/* --------------------------------------------------------------------------
   5. Sale / stock badges
   -------------------------------------------------------------------------- */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge {
	background-color: var(--wine-800);
	border: 0;
	border-radius: 0;
	color: var(--gold-400);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	padding: 0.25rem 0.625rem;
	text-transform: uppercase;
}

.wc-block-components-product-stock-indicator {
	color: var(--ink-500);
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.02em;
}
.wc-block-components-product-stock-indicator--out-of-stock {
	color: var(--danger);
}

/* --------------------------------------------------------------------------
   6. Rating
   -------------------------------------------------------------------------- */
.wc-block-components-product-rating__stars span::before,
.wc-block-review-list-item__rating__stars span::before {
	color: var(--gold-500);
}

.wc-block-components-product-rating-counter {
	color: var(--ink-500);
	font-size: 12px;
}

/* --------------------------------------------------------------------------
   7. Filter sidebar — reproduce the .filter-acc look from the source PLP
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-product-filters .wp-block-group > h3,
.wc-block-filter-title,
.wp-block-woocommerce-product-filter > .wp-block-heading {
	border-bottom: 1px solid var(--hairline);
	color: var(--ink-800);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	padding-bottom: 0.75rem;
	text-transform: uppercase;
}

.wc-block-components-checkbox__label,
.wc-block-components-filter-submit-button + label {
	color: var(--ink-600);
	font-family: var(--font-sans);
	font-size: 14px;
}

.wc-block-components-checkbox__input[type="checkbox"] {
	accent-color: var(--wine-700);
	border: 1px solid var(--line-strong);
	border-radius: 0;
	height: 16px;
	width: 16px;
}

.wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--wine-700);
	border-color: var(--wine-700);
}

/* Price slider — wine thumbs on a hairline track. */
.wc-block-price-filter__range-input-wrapper,
.wc-block-components-price-slider__range-input-wrapper {
	background-color: var(--ivory-400);
	border-radius: 0;
	height: 6px;
}

.wc-block-components-price-slider__range-input-progress,
.wc-block-price-filter__range-input-progress {
	--range-color: var(--wine-700);
	background: var(--wine-700);
	height: 6px;
}

.wc-block-components-price-slider__range-input::-webkit-slider-thumb {
	background-color: var(--wine-700);
	border: 2px solid var(--ivory-50);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	height: 16px;
	width: 16px;
}
.wc-block-components-price-slider__range-input::-moz-range-thumb {
	background-color: var(--wine-700);
	border: 2px solid var(--ivory-50);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	height: 16px;
	width: 16px;
}

/* Active filter chips. */
.wc-block-components-chip {
	background-color: var(--wine-50);
	border: 1px solid var(--hairline);
	border-radius: 0;
	color: var(--wine-700);
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Catalog sorting and result count
   -------------------------------------------------------------------------- */
.wc-block-catalog-sorting select,
.wc-block-components-sort-select__select {
	background-color: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: 0;
	color: var(--ink-800);
	font-family: var(--font-sans);
	font-size: 14px;
	height: 3rem;
	padding-inline: 1rem;
}

.wc-block-product-results-count,
.woocommerce-result-count {
	color: var(--ink-500);
	font-family: var(--font-sans);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   9. Pagination
   -------------------------------------------------------------------------- */
.wc-block-pagination-page,
.wp-block-query-pagination-numbers .page-numbers {
	border: 1px solid var(--hairline);
	color: var(--ink-700);
	display: inline-grid;
	font-family: var(--font-sans);
	font-size: 13px;
	height: 2.75rem;
	min-width: 2.75rem;
	place-items: center;
	text-decoration: none;
	transition: all var(--dur-base) var(--ease-std);
}

.wc-block-pagination-page:hover,
.wp-block-query-pagination-numbers .page-numbers:hover {
	border-color: var(--gold-400);
	color: var(--wine-700);
}

.wc-block-pagination-page--active,
.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wine-700);
	border-color: var(--wine-700);
	color: var(--ivory-50);
}

/* --------------------------------------------------------------------------
   10. Quantity stepper — the source [data-qty] control
   -------------------------------------------------------------------------- */
.wc-block-components-quantity-selector {
	border: 1px solid var(--line-strong);
	border-radius: 0;
	height: 3rem;
}
.wc-block-components-quantity-selector::after { display: none; }

.wc-block-components-quantity-selector__button {
	color: var(--ink-700);
	font-size: 18px;
	transition: color var(--dur-base) var(--ease-std);
	width: 2.75rem;
}
.wc-block-components-quantity-selector__button:hover {
	background-color: var(--ivory-200);
	color: var(--wine-700);
}

.wc-block-components-quantity-selector__input {
	color: var(--ink-800);
	font-family: var(--font-sans);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* Classic quantity input on the single product form. */
.quantity input.qty {
	border: 1px solid var(--line-strong);
	border-radius: 0;
	color: var(--ink-800);
	font-family: var(--font-sans);
	height: 3rem;
	text-align: center;
	width: 4.5rem;
}

/* --------------------------------------------------------------------------
   11. Form fields — cart, checkout, coupon, account
   Mirrors the .field / .field-label components.
   -------------------------------------------------------------------------- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea,
.wc-block-components-select__select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background-color: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: 0;
	color: var(--ink-800);
	font-family: var(--font-sans);
	font-size: 15px;
	padding-inline: 1rem;
	transition: all var(--dur-fast) var(--ease-std);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--gold-500);
	box-shadow: 0 0 0 3px rgba(194, 160, 92, .25);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.wc-block-components-text-input label,
.wc-block-components-select__label,
.woocommerce form .form-row label {
	color: var(--ink-700);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wc-block-components-validation-error {
	color: var(--danger);
	font-family: var(--font-sans);
	font-size: 12px;
}

/* --------------------------------------------------------------------------
   12. Cart and checkout layout
   -------------------------------------------------------------------------- */
.wc-block-components-title,
.wc-block-cart__submit-container + *,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	color: var(--ink-900);
	font-family: var(--font-serif);
	font-weight: 400;
}

.wc-block-components-sidebar,
.wc-block-components-totals-wrapper {
	background-color: var(--surface);
	border: 1px solid var(--hairline);
}

.wc-block-components-totals-item {
	color: var(--ink-600);
	font-family: var(--font-sans);
	font-size: 14px;
}

.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wine-700);
	font-size: 17px;
	font-weight: 600;
}

.wc-block-cart-items__header,
.wc-block-cart-item__wrap {
	border-color: var(--hairline);
}

.wc-block-cart-items__header {
	color: var(--ink-500);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata__description {
	color: var(--ink-500);
	font-size: 12px;
}
.wc-block-cart-item__remove-link:hover { color: var(--danger); }

/* Checkout step headings read as the source's numbered wizard steps. */
.wc-block-checkout__form .wc-block-components-checkout-step__title {
	color: var(--ink-900);
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 400;
}
.wc-block-components-checkout-step__description {
	color: var(--ink-500);
	font-family: var(--font-sans);
	font-size: 13px;
}
.wc-block-components-checkout-step__heading-content {
	color: var(--gold-700);
}

/* --------------------------------------------------------------------------
   13. Mini cart drawer — matches the source #cartDrawer
   -------------------------------------------------------------------------- */
.wc-block-mini-cart__drawer .wc-block-components-drawer {
	background-color: var(--ivory-50);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__screen-overlay {
	background-color: rgba(34, 6, 12, .45);
}

.wc-block-mini-cart__title {
	color: var(--ink-900);
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 400;
}

.wc-block-mini-cart__footer {
	background-color: var(--ivory-100);
	border-top: 1px solid var(--hairline);
}

/* The header trigger is an .icon-btn with a wine count badge. */
.wc-block-mini-cart__button {
	color: var(--ink-700);
	display: grid;
	height: 2.75rem;
	padding: 0;
	place-items: center;
	transition: color var(--dur-base) var(--ease-std);
	width: 2.75rem;
}
.wc-block-mini-cart__button:hover { color: var(--wine-700); }

.wc-block-mini-cart__badge {
	background-color: var(--wine-700);
	border-radius: 9999px;
	color: var(--ivory-50);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	min-width: 18px;
}

.wc-block-mini-cart__amount { display: none; }

/* --------------------------------------------------------------------------
   14. Notices
   -------------------------------------------------------------------------- */
.wc-block-components-notice-banner {
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: 14px;
}
.wc-block-components-notice-banner.is-success {
	background-color: var(--success-bg, #EDF4EF);
	border-color: var(--success);
}
.wc-block-components-notice-banner.is-error {
	background-color: #FBEFEF;
	border-color: var(--danger);
}
.wc-block-components-notice-banner.is-info {
	background-color: #EDF2F6;
	border-color: var(--info);
}

/* --------------------------------------------------------------------------
   15. Single product gallery — vertical thumbs, sharp corners, zoom cursor
   -------------------------------------------------------------------------- */
.woocommerce-product-gallery {
	background-color: var(--surface-image);
}

.woocommerce-product-gallery__wrapper {
	cursor: zoom-in;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-top: 0.75rem;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	list-style: none;
	margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	opacity: .72;
	transition: opacity var(--dur-base) var(--ease-silk);
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	box-shadow: 0 0 0 2px var(--wine-700);
	opacity: 1;
}

.woocommerce-product-gallery__trigger {
	background-color: rgba(255, 253, 251, .92);
	border-radius: 9999px;
	color: var(--ink-700);
}

/* --------------------------------------------------------------------------
   16. Variation swatches — metal options render as .swatch discs
   -------------------------------------------------------------------------- */
.variations {
	border: 0;
}

.variations th.label label {
	color: var(--ink-700);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.variations select {
	background-color: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: 0;
	color: var(--ink-800);
	font-family: var(--font-sans);
	height: 3rem;
	padding-inline: 1rem;
	width: 100%;
}

.reset_variations {
	color: var(--gold-700);
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   17. Product tabs — the source [data-pdp-tabs] treatment
   -------------------------------------------------------------------------- */
.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs li a {
	color: var(--ink-500);
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	padding: 0 0 0.875rem;
	text-transform: uppercase;
	transition: color var(--dur-base) var(--ease-std);
}

.woocommerce-tabs ul.tabs li a::after {
	background: var(--wine-700);
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.875rem;
	transform: translateY(1px);
	width: 0;
	transition: width var(--dur-base) var(--ease-silk);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--wine-700);
}

.woocommerce-tabs ul.tabs li.active a::after { width: 100%; }

.woocommerce-tabs .panel h2 {
	color: var(--ink-900);
	font-family: var(--font-serif);
	font-weight: 400;
}

/* Specification table. */
.woocommerce-product-attributes {
	border: 0;
	width: 100%;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	border-bottom: 1px solid var(--hairline);
	font-family: var(--font-sans);
	font-size: 14px;
	padding: 0.75rem 0;
	text-align: left;
}
.woocommerce-product-attributes th {
	color: var(--ink-500);
	font-weight: 500;
	width: 40%;
}
.woocommerce-product-attributes td { color: var(--ink-800); }

/* --------------------------------------------------------------------------
   18. Reviews
   -------------------------------------------------------------------------- */
.woocommerce #reviews .comment_container {
	background-color: var(--surface);
	border: 1px solid var(--hairline);
	padding: 1.5rem;
}

.woocommerce #reviews .comment-text .meta {
	color: var(--ink-500);
	font-family: var(--font-sans);
	font-size: 12px;
}

.woocommerce #review_form .comment-form-rating .stars a {
	color: var(--gold-500);
}

/* --------------------------------------------------------------------------
   19. Sticky mobile add-to-cart bar (rendered by assets/js/product.js)
   -------------------------------------------------------------------------- */
.mz-sticky-atc {
	background-color: var(--ivory-50);
	border-top: 1px solid var(--hairline);
	bottom: 0;
	box-shadow: var(--shadow-lg, 0 18px 48px rgba(46, 11, 19, .10));
	left: 0;
	position: fixed;
	right: 0;
	transform: translateY(100%);
	transition: transform var(--dur-base) var(--ease-silk);
	z-index: 70;
}

.mz-sticky-atc.is-visible { transform: none; }

@media (min-width: 1024px) {
	.mz-sticky-atc { display: none; }
}

/* --------------------------------------------------------------------------
   20. Theme-rendered WooCommerce fragments
   Markup produced by the filters in inc/woocommerce.php rather than by
   WooCommerce itself, so it needs its own rules.
   -------------------------------------------------------------------------- */

/* 20.1 Star rating drawn from the icon registry */
.myzawar-rating {
	align-items: center;
	color: var(--gold-500);
	display: inline-flex;
	gap: 2px;
	line-height: 1;
}

.myzawar-rating .myzawar-star { color: var(--ink-300); }
.myzawar-rating .myzawar-star.is-filled { color: var(--gold-500); }

/* Hide WooCommerce's own star font wherever the themed rating replaces it */
.myzawar-rating + .woocommerce-review-link { margin-left: 8px; }

/* 20.2 Percentage sale flash */
.myzawar-sale-flash {
	background-color: var(--sale);
	color: var(--ivory-50);
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	left: 12px;
	letter-spacing: 0.14em;
	padding: 4px 8px;
	position: absolute;
	text-transform: uppercase;
	top: 12px;
	z-index: 2;
}

/* 20.3 Quantity stepper. product.js injects the two buttons; the input is
   tagged by the woocommerce_quantity_input_classes filter. */
.myzawar-qty {
	align-items: center;
	border: 1px solid var(--line-strong);
	display: inline-flex;
	height: 3rem;
}

.myzawar-qty__btn {
	align-items: center;
	color: var(--ink-600);
	display: grid;
	height: 100%;
	place-items: center;
	transition: color var(--dur-base) var(--ease-std);
	width: 2.75rem;
}

.myzawar-qty__btn:hover { color: var(--wine-700); }

.myzawar-qty__btn:focus-visible {
	outline: 2px solid transparent;
	outline-offset: -2px;
	box-shadow: inset 0 0 0 2px rgba(194, 160, 92, .5);
}

.myzawar-qty__input,
.woocommerce .quantity .myzawar-qty__input {
	appearance: textfield;
	border: 0;
	font-family: var(--font-sans);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	height: 100%;
	text-align: center;
	width: 3.5rem;
}

.myzawar-qty__input::-webkit-outer-spin-button,
.myzawar-qty__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.myzawar-qty__input:focus-visible {
	outline: 2px solid transparent;
	box-shadow: inset 0 0 0 2px rgba(194, 160, 92, .35);
}

/* 20.4 WooCommerce's own breadcrumb trail, matched to myzawer/breadcrumbs */
.myzawar-breadcrumbs ol {
	align-items: center;
	color: var(--ink-500);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--font-sans);
	font-size: 12px;
	gap: 8px;
	letter-spacing: 0.04em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.myzawar-breadcrumbs li:not(:last-child)::after {
	color: var(--ink-300);
	content: "/";
	margin-left: 8px;
}

.myzawar-breadcrumbs a { color: inherit; text-decoration: none; }
.myzawar-breadcrumbs a:hover { color: var(--wine-700); }

/* 20.5 Return-to-shop button inherits the primary button treatment */
.myzawar-btn-primary.button {
	background-color: var(--wine-700);
	color: var(--ivory-50);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	padding: 1rem 2rem;
	text-transform: uppercase;
}

.myzawar-btn-primary.button:hover { background-color: var(--wine-600); }

/* 20.6 Shop sidebar — collapses above the grid on narrow screens */
@media (max-width: 1023px) {
	.mz-shop-sidebar { flex-basis: 100% !important; }
}
