/* ==========================================================================
   DreamShop - Shop archive
   Loaded only on the shop and product taxonomy archives.
   Tokens come from the active design (Prongon Store). The three shades below
   are the accent and gold walked to their accessible steps, already declared
   in that design, not new colours.
   ========================================================================== */

.ds-shop-archive {
	--ds-ink-muted: #5b616e;
	--ds-accent-deep: #0f62d6;
	--ds-gold-deep: #936a18;
	--ds-shell-pad: 24px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ds-shop-hero {
	background: rgba(24, 119, 242, 0.08);
	border-bottom: 1px solid var(--ds-border);
	overflow: hidden;
}

.ds-shop-hero__inner {
	max-width: var(--global-content-width);
	margin: 0 auto;
	padding: 42px var(--ds-shell-pad);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	align-items: center;
	gap: 48px;
}

.ds-shop-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-accent-deep);
}

.ds-shop-hero__title {
	margin: 0;
	max-width: 25ch;
	font-family: var(--ds-font);
	font-size: clamp(28px, 3.1vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ds-ink);
}

.ds-shop-hero__text {
	margin: 14px 0 0;
	max-width: 46ch;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ds-ink-muted);
}

/* A soft wash of accent light behind the image. Edge-free, so it reads as
   light rather than a stray shape. */
.ds-shop-hero__shape {
	position: absolute;
	inset: -34% -22% -26% 2%;
	background:
		radial-gradient(58% 62% at 58% 42%, rgba(24, 119, 242, 0.30) 0%, rgba(24, 119, 242, 0.10) 46%, rgba(24, 119, 242, 0) 73%),
		radial-gradient(42% 44% at 86% 78%, rgba(24, 119, 242, 0.18) 0%, rgba(24, 119, 242, 0) 72%);
	pointer-events: none;
	z-index: 0;
}

.ds-shop-hero__media {
	position: relative;
	z-index: 1;
	padding: 14px 14px 20px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg);
	box-shadow: var(--ds-shadow-soft);
}

.ds-shop-hero__media img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-height: 226px;
	object-fit: contain;
	object-position: center;
	border-radius: var(--ds-radius);
}

/* --------------------------------------------------------------------------
   Shell: sidebar + grid
   -------------------------------------------------------------------------- */

.ds-shop {
	padding: 40px 0 72px;
}

.ds-shop__inner {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* When every filter is switched off the left column disappears entirely. */
.ds-shop-archive.ds-shop-no-filters .ds-shop__inner {
	grid-template-columns: minmax(0, 1fr);
}

.ds-shop__main {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Filter sidebar
   -------------------------------------------------------------------------- */

.ds-shop-filters {
	position: sticky;
	top: 96px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow-soft);
	overflow: hidden;
}

.ds-shop-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--ds-border);
}

.ds-shop-filters__title {
	margin: 0;
	font-family: var(--ds-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ds-ink);
}

.ds-shop-filters__clear {
	font-size: 13px;
	font-weight: 600;
	color: var(--ds-accent-deep);
	text-decoration: none;
}

.ds-shop-filters__clear:hover {
	text-decoration: underline;
}

.ds-shop-filter {
	padding: 18px 20px;
	border-bottom: 1px solid var(--ds-border);
}

.ds-shop-filter:last-child {
	border-bottom: 0;
}

.ds-shop-filter__title {
	margin: 0 0 12px;
	font-family: var(--ds-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ds-ink);
}

/* Search ------------------------------------------------------------------ */

.ds-shop-search {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.ds-shop-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-surface);
	color: var(--ds-ink);
	font-family: var(--ds-font);
	font-size: 14px;
}

.ds-shop-search input[type="search"]::placeholder {
	color: var(--ds-ink-muted);
}

.ds-shop-search input[type="search"]:focus {
	outline: 2px solid var(--ds-accent-deep);
	outline-offset: 1px;
	border-color: var(--ds-accent-deep);
}

.ds-shop-search__btn {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--ds-radius-sm);
	background: var(--ds-accent-deep);
	color: var(--ds-accent-ink);
	cursor: pointer;
	transition: filter 0.15s ease;
}

.ds-shop-search__btn:hover {
	filter: brightness(1.08);
}

/* Checklists -------------------------------------------------------------- */

.ds-shop-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 268px;
	overflow-y: auto;
}

.ds-shop-checklist li + li {
	margin-top: 2px;
}

.ds-shop-checklist input[type="checkbox"] {
	position: absolute;
	width: 18px;
	height: 18px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ds-shop-checklist label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 6px;
	border-radius: var(--ds-radius-sm);
	font-size: 14px;
	color: var(--ds-ink);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ds-shop-checklist label:hover {
	background: #f3f6fc;
}

.ds-shop-checklist input[type="checkbox"] + label::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid #c3c9d4;
	border-radius: 5px;
	background: var(--ds-surface);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ds-shop-checklist input[type="checkbox"]:checked + label::before {
	background-color: var(--ds-accent-deep);
	border-color: var(--ds-accent-deep);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	background-position: center;
	background-repeat: no-repeat;
}

.ds-shop-checklist input[type="checkbox"]:focus-visible + label::before {
	outline: 2px solid var(--ds-accent-deep);
	outline-offset: 2px;
}

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

.ds-shop-checklist__count {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--ds-ink-muted);
	font-variant-numeric: tabular-nums;
}

.ds-shop-checklist input[type="checkbox"]:checked ~ label .ds-shop-checklist__label {
	font-weight: 600;
}

.ds-shop-stars {
	display: inline-flex;
	gap: 2px;
	color: #d9dee7;
}

.ds-shop-stars .ds-star.is-on {
	color: var(--ds-gold);
}

/* Price range ------------------------------------------------------------- */

.ds-shop-range {
	position: relative;
	height: 30px;
	margin: 2px 2px 0;
}

.ds-shop-range__track,
.ds-shop-range__fill {
	position: absolute;
	top: 50%;
	left: 0;
	height: 4px;
	border-radius: 99px;
	transform: translateY(-50%);
	pointer-events: none;
}

.ds-shop-range__track {
	right: 0;
	background: var(--ds-border);
}

.ds-shop-range__fill {
	background: var(--ds-accent-deep);
}

.ds-shop-range__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	pointer-events: none;
}

.ds-shop-range__input:focus {
	outline: none;
}

.ds-shop-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--ds-accent-deep);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(22, 24, 29, 0.22);
	cursor: pointer;
}

.ds-shop-range__input::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border: 2px solid var(--ds-accent-deep);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(22, 24, 29, 0.22);
	cursor: pointer;
}

.ds-shop-range__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(15, 98, 214, 0.24);
}

.ds-shop-range__readout {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ds-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* Sorting ----------------------------------------------------------------- */

.ds-shop-sort {
	width: 100%;
	height: 42px;
	padding: 0 34px 0 12px;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
	background-color: var(--ds-surface);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b616e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 16px;
	color: var(--ds-ink);
	font-family: var(--ds-font);
	font-size: 14px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.ds-shop-sort:focus {
	outline: 2px solid var(--ds-accent-deep);
	outline-offset: 1px;
	border-color: var(--ds-accent-deep);
}

/* Free shipping promo ----------------------------------------------------- */

.ds-shop-promo {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 16px 20px 20px;
	padding: 16px;
	border: 1px solid rgba(24, 119, 242, 0.22);
	border-radius: var(--ds-radius-sm);
	background: rgba(24, 119, 242, 0.07);
}

.ds-shop-promo__icon {
	flex: 0 0 auto;
	color: var(--ds-accent-deep);
	line-height: 0;
}

.ds-shop-promo__body {
	display: block;
	min-width: 0;
}

.ds-shop-promo__body strong {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ds-ink);
	line-height: 1.3;
}

.ds-shop-promo__body span {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ds-ink-muted);
}

.ds-shop-promo__body .woocommerce-Price-amount {
	color: inherit;
}

.ds-shop-promo__body span {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Toolbar: result count + sorting
   -------------------------------------------------------------------------- */

.ds-shop-controls {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
}

.ds-shop-controls .ds-shop-toolbar {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.ds-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 20px;
}

.ds-shop-toolbar__count {
	margin: 0;
	font-size: 14px;
	color: var(--ds-ink-muted);
}

.ds-shop-toolbar__count span {
	font-weight: 600;
	color: var(--ds-ink);
}

.ds-shop-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.ds-shop-toolbar__sort-label {
	font-size: 14px;
	color: var(--ds-ink-muted);
}

.ds-shop-toolbar__sort .ds-shop-sort {
	width: auto;
	min-width: 176px;
	height: 40px;
}

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

.ds-shop__main ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
}

.ds-shop__main ul.products li.product.ds-card {
	display: flex;
	flex-direction: column;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	box-shadow: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ds-shop__main ul.products li.product.ds-card:hover {
	transform: translateY(-3px);
	border-color: #d5dae3;
	box-shadow: var(--ds-shadow);
}

/* Card media -------------------------------------------------------------- */

.ds-card__media {
	position: relative;
	background: #f7f8fa;
	border-bottom: 1px solid var(--ds-border);
}

.ds-shop__main ul.products li.ds-card .ds-card__media > a {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* The sale flash sits inside the thumbnail link; keep it a compact pill. */
.ds-shop__main ul.products li.ds-card .ds-card__media span.onsale {
	right: auto;
	width: auto;
	max-width: none;
}

.ds-shop__main ul.products li.ds-card .ds-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.ds-shop__main ul.products li.ds-card:hover .ds-card__media img {
	transform: scale(1.035);
}

.ds-shop__main ul.products li.ds-card span.onsale {
	top: 10px;
	left: 10px;
	padding: 5px 10px;
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 999px;
	background: var(--ds-accent-deep);
	color: #fff;
}

/* Wishlist heart ---------------------------------------------------------- */

.ds-card__wish {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}

/* YITH builds the button in JavaScript, so target the classes it renders. */
.ds-card__wish .yith-add-to-wishlist-button-block {
	display: contents;
}

.ds-card__wish .yith-wcwl-add-to-wishlist-button,
.ds-card__wish .ds-card__wish-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--ds-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--ds-accent-deep);
	text-decoration: none;
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ds-card__wish .yith-wcwl-add-to-wishlist-button:hover,
.ds-card__wish .ds-card__wish-link:hover,
.ds-card__wish .yith-wcwl-add-to-wishlist-button--added,
	background: var(--ds-accent-deep);
	border-color: var(--ds-accent-deep);
	color: #fff;
}

.ds-card__wish .yith-wcwl-add-to-wishlist-button:focus-visible {
	outline: 2px solid var(--ds-accent-deep);
	outline-offset: 2px;
}

/* The label stays for assistive tech but never takes space on the card. */
.ds-card__wish .yith-wcwl-add-to-wishlist-button__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	display: block !important;
}

.ds-card__wish .yith-wcwl-icon,
.ds-card__wish .yith-wcwl-icon svg {
	width: 17px;
	height: 17px;
}

/* Card body --------------------------------------------------------------- */

.ds-card__body {
	flex: 1 1 auto;
	padding: 14px 16px 4px;
}

.ds-card__cat {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--ds-ink-muted);
}

.ds-card__title {
	margin: 0 0 8px;
	font-family: var(--ds-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ds-ink);
}

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

.ds-card__title a:hover {
	color: var(--ds-accent-deep);
}

.ds-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	font-size: 12.5px;
	color: var(--ds-ink-muted);
}

.ds-card__stars {
	display: inline-flex;
	gap: 2px;
	color: #d9dee7;
}

.ds-card__stars .ds-star.is-on {
	color: var(--ds-gold);
}

.ds-card__price {
	margin: 0 0 12px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ds-ink);
	font-variant-numeric: tabular-nums;
}

.ds-card__price del {
	margin-right: 6px;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--ds-ink-muted);
	opacity: 0.85;
}

.ds-card__price ins {
	text-decoration: none;
	color: var(--ds-ink);
}

.ds-card__price .woocommerce-Price-amount {
	color: inherit;
}

/* Card actions ------------------------------------------------------------ */

.ds-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 16px 16px;
}

.ds-shop__main ul.products li.ds-card .ds-card__actions .button,
.ds-shop__main ul.products li.ds-card .ds-card__actions a.button,
.ds-card__actions .ds-loop-buy-now,
.ds-card__actions .ds-card__buynow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 10px 14px;
	border-radius: var(--ds-radius);
	font-family: var(--ds-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.ds-card__actions .button.add_to_cart_button {
	background: var(--ds-surface);
	color: var(--ds-accent-deep);
	border: 1px solid var(--ds-accent);
}

.ds-card__actions .button.add_to_cart_button:hover {
	background: rgba(24, 119, 242, 0.07);
	filter: none;
	transform: none;
	color: var(--ds-accent-deep);
}

.ds-card__actions .button.add_to_cart_button.loading {
	opacity: 0.6;
	pointer-events: none;
}

.ds-card__actions .ds-card__buynow,
.ds-card__actions .ds-loop-buy-now {
	background: var(--ds-accent-deep);
	color: var(--ds-accent-ink);
	border: 1px solid var(--ds-accent-deep);
}

.ds-card__actions .ds-card__buynow:hover {
	filter: brightness(1.08);
	color: var(--ds-accent-ink);
}

.ds-card__actions .ds-btn-ico {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* Kadence injects an arrow glyph and uppercases button text; the reference
   card uses a plain, sentence-cased label instead. */
.ds-card__actions .button,
.ds-card__actions a.button,
.ds-card__actions .ds-card__buynow,
.ds-card__actions .ds-loop-buy-now {
	text-transform: none;
}

.ds-card__actions .button::after,
.ds-card__actions a.button::after,
.ds-card__actions .ds-card__buynow::after,
.ds-card__actions .ds-loop-buy-now::after,
.ds-card__actions .kadence-svg-iconset,
.ds-card__actions .kadence-arrow-right-alt-svg {
	display: none !important;
	content: none !important;
}

/* Out of stock and other non-button states. */
.ds-card__actions .stock,
.ds-card__actions .button.disabled,
.ds-card__actions a.button.disabled {
	width: 100%;
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background: #f1f2f5;
	color: var(--ds-ink-muted);
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
	opacity: 1;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.ds-shop-pagination {
	margin: 34px 0 0;
}

.ds-shop-pagination {
	clear: both;
	float: none;
	width: 100%;
	text-align: center;
}

.ds-shop-pagination ul {
	display: flex;
	float: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.ds-shop-pagination ul li {
	border: 0;
	margin: 0;
}

.ds-shop-pagination ul li a,
.ds-shop-pagination ul li span,
.ds-shop-pagination .page-numbers,
.ds-shop-pagination a.page-numbers,
.ds-shop-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-surface);
	color: var(--ds-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ds-shop-pagination .page-numbers:hover {
	border-color: var(--ds-accent-deep);
	color: var(--ds-accent-deep);
}

.woocommerce .ds-shop-pagination ul li span.page-numbers.current,
.ds-shop-pagination ul li span.page-numbers.current,
.ds-shop-pagination .page-numbers.current {
	background: var(--ds-accent-deep) !important;
	border-color: var(--ds-accent-deep) !important;
	color: #fff !important;
}

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

/* --------------------------------------------------------------------------
   Notices and empty state
   -------------------------------------------------------------------------- */

.ds-shop__main .woocommerce-message,
.ds-shop__main .woocommerce-info,
.ds-shop__main .woocommerce-error {
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-left: 4px solid var(--ds-accent-deep);
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow-soft);
	font-size: 14.5px;
}

.ds-shop__main .woocommerce-error {
	border-left-color: #d63638;
}

.ds-shop__main .woocommerce-info {
	border-left-color: var(--ds-gold-deep);
}

.ds-shop__main .woocommerce-message {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.ds-shop__no-products {
	padding: 64px 24px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	text-align: center;
}

.ds-shop__no-products h2 {
	margin: 0 0 8px;
	font-family: var(--ds-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--ds-ink);
}

.ds-shop__no-products p {
	margin: 0 0 20px;
	color: var(--ds-ink-muted);
}

.ds-shop__no-products .button {
	display: inline-flex;
	align-items: center;
	background: var(--ds-accent-deep);
	color: #fff;
	border-radius: var(--ds-radius);
	font-weight: 600;
}

.ds-shop__no-products .button:hover {
	background: var(--ds-accent-deep);
	color: #fff;
	filter: brightness(1.08);
}

/* --------------------------------------------------------------------------
   Mobile filter drawer
   -------------------------------------------------------------------------- */

.ds-shop-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-surface);
	color: var(--ds-ink);
	font-family: var(--ds-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ds-shop-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(22, 24, 29, 0.45);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.ds-shop-drawer-overlay.is-open {
	opacity: 1;
}

.ds-shop-drawer {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	width: min(360px, 88vw);
	display: flex;
	flex-direction: column;
	background: var(--ds-bg);
	transform: translateX(100%);
	transition: transform 0.26s ease;
	box-shadow: -18px 0 46px -30px rgba(22, 24, 29, 0.6);
}

.ds-shop-drawer.is-open {
	transform: translateX(0);
}

.ds-shop-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	background: var(--ds-surface);
	border-bottom: 1px solid var(--ds-border);
	font-family: var(--ds-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--ds-ink);
}

.ds-shop-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ds-ink);
	cursor: pointer;
}

.ds-shop-drawer__close:hover {
	background: #eef0f4;
}

.ds-shop-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
}

.ds-shop-drawer__body .ds-shop-filters {
	/* The clone carries the sidebar classes, so it inherits the responsive
	   display:none rule. Force it visible inside the drawer. */
	display: block;
	position: static;
	border: 0;
	border-radius: var(--ds-radius);
	box-shadow: none;
	overflow: visible;
}

.ds-shop-drawer__body .ds-shop-filters__head {
	padding: 16px;
	border-radius: var(--ds-radius) var(--ds-radius) 0 0;
	border: 1px solid var(--ds-border);
	border-bottom: 0;
	background: var(--ds-surface);
}

.ds-shop-drawer__body .ds-shop-filter {
	background: var(--ds-surface);
	border-left: 1px solid var(--ds-border);
	border-right: 1px solid var(--ds-border);
}

.ds-shop-drawer__body .ds-shop-filter:last-of-type {
	border-bottom: 1px solid var(--ds-border);
	border-radius: 0 0 var(--ds-radius) var(--ds-radius);
}

.ds-shop-drawer__foot {
	padding: 14px 16px;
	background: var(--ds-surface);
	border-top: 1px solid var(--ds-border);
}

.ds-shop-drawer__apply {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	border-radius: var(--ds-radius);
	background: var(--ds-accent-deep);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

body.ds-drawer-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.ds-shop-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		gap: 32px;
		padding: 44px var(--ds-shell-pad);
	}

	.ds-shop__inner {
		grid-template-columns: 248px minmax(0, 1fr);
		gap: 26px;
	}

	.ds-shop__main ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.ds-shop-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 36px var(--ds-shell-pad);
	}

	.ds-shop-hero__title {
		max-width: 30ch;
	}

	.ds-shop-hero__media {
		max-width: 460px;
	}

	.ds-shop-hero__media img {
		max-height: 220px;
	}

	.ds-shop {
		padding: 26px 0 56px;
	}

	.ds-shop__inner,
	.ds-shop-archive.ds-shop-no-filters .ds-shop__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	/* The sidebar moves into the drawer below this width. */
	.ds-shop-filters {
		display: none;
	}

	.ds-shop-filter-toggle {
		display: inline-flex;
		flex: 0 0 auto;
		order: 1;
	}

	.ds-shop-controls {
		gap: 10px;
	}

	.ds-shop-controls .ds-shop-toolbar {
		order: 2;
		flex: 1 1 200px;
		justify-content: flex-end;
	}

	.ds-shop-controls .ds-shop-toolbar__sort {
		order: 1;
	}

	.ds-shop-controls .ds-shop-toolbar__count {
		order: 2;
		flex: 1 1 100%;
		margin: 0;
	}

	.ds-shop-controls .ds-shop-toolbar__sort-label {
		display: none;
	}

	.ds-shop-controls .ds-shop-toolbar__sort .ds-shop-sort {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.ds-shop-archive {
		--ds-shell-pad: 18px;
	}

	.ds-shop-hero__title {
		font-size: clamp(26px, 6.4vw, 34px);
	}

	.ds-shop-hero__text {
		font-size: 14.5px;
	}

	.ds-shop-controls {
		gap: 10px;
	}

	.ds-shop-controls .ds-shop-toolbar {
		flex: 1 1 180px;
		gap: 10px;
	}

	.ds-shop-filter-toggle {
		height: 40px;
	}

	.ds-shop__main ul.products {
		gap: 14px;
	}

	.ds-card__body {
		padding: 12px 12px 2px;
	}

	.ds-card__actions {
		padding: 0 12px 12px;
		gap: 7px;
	}

	.ds-card__actions .button,
	.ds-card__actions .ds-card__buynow,
	.ds-card__actions .ds-loop-buy-now {
		font-size: 13px;
		padding: 9px 8px;
	}
}



@media (prefers-reduced-motion: reduce) {
	.ds-shop__main ul.products li.product.ds-card,
	.ds-card__wish .ds-card__wish-link,
	.ds-shop-drawer-overlay,
	.ds-shop-drawer,
	.ds-shop-hero__media img {
		transition: none;
	}

	.ds-shop__main ul.products li.product.ds-card:hover,
	.ds-shop__main ul.products li.ds-card:hover .ds-card__media img {
		transform: none;
	}
}

/* Kadence shouts buttons in caps and wraps pagination in a card; the
   reference card is sentence case on the page ground. */
body.ds-shop-archive .woocommerce ul.products li.product .ds-card__actions .button,
body.ds-shop-archive .woocommerce ul.products li.product .ds-card__actions a.button,
body.ds-shop-archive .woocommerce ul.products li.product .ds-card__actions .ds-card__buynow,
body.ds-shop-archive .ds-card__actions .button,
body.ds-shop-archive .ds-card__actions a.button,
body.ds-shop-archive .ds-card__actions .ds-card__buynow {
	text-transform: none;
	letter-spacing: normal;
}

body.ds-shop-archive .woocommerce .ds-shop-pagination {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 34px 0 0;
}

/* The drawer header already shows the word Filters. */
.ds-shop-drawer__body .ds-shop-filters__head {
	display: none;
}

/* --------------------------------------------------------------------------
   Two-up product grid and the sticky filter bar (sidebar is in the drawer)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ds-shop-controls {
		position: sticky;
		top: 0;
		z-index: 30;
		margin: 0 -16px 16px;
		padding: 10px 16px;
		background: var(--ds-bg);
		border-bottom: 1px solid var(--ds-border);
		box-shadow: 0 6px 16px -14px rgba(22, 24, 29, 0.5);
	}
}

@media (max-width: 519px) {
	.ds-shop__main ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	body.ds-shop-archive .ds-shop__main ul.products li.product.ds-card .ds-card__body {
		padding: 10px 10px 2px;
	}

	.ds-card__cat {
		margin-bottom: 4px;
		font-size: 10.5px;
	}

	body.ds-shop-archive .ds-shop__main ul.products li.product.ds-card .ds-card__title {
		margin-bottom: 6px;
		font-size: 12.5px;
		line-height: 1.3;
	}

	.ds-card__rating {
		gap: 3px;
		margin-bottom: 6px;
		font-size: 11px;
	}

	.ds-card__rating .ds-star {
		width: 11px;
		height: 11px;
	}

	body.ds-shop-archive .ds-shop__main ul.products li.product.ds-card .ds-card__price {
		margin-bottom: 8px;
		font-size: 13px;
	}

	.ds-card__price del {
		display: block;
		margin-right: 0;
		font-size: 11px;
	}

	.ds-card__price ins {
		display: block;
	}

	body.ds-shop-archive .ds-shop__main ul.products li.product.ds-card .ds-card__actions {
		gap: 6px;
		padding: 0 10px 10px;
	}

	body.ds-shop-archive .ds-shop__main ul.products li.product.ds-card .ds-card__actions .button,
	body.ds-shop-archive .ds-shop__main ul.products li.product.ds-card .ds-card__actions a.button,
	body.ds-shop-archive .ds-shop__main ul.products li.product.ds-card .ds-card__actions .ds-card__buynow,
	body.ds-shop-archive .ds-shop__main ul.products li.product.ds-card .ds-card__actions .ds-loop-buy-now {
		min-height: 38px;
		gap: 5px;
		padding: 8px 4px;
		font-size: 11.5px;
	}

	body.ds-shop-archive .ds-shop__main ul.products li.product.ds-card .ds-card__actions .ds-btn-ico {
		width: 13px;
		height: 13px;
	}

	.ds-card__wish .yith-wcwl-add-to-wishlist-button {
		width: 30px;
		height: 30px;
	}

	.ds-card__wish .yith-wcwl-icon,
	.ds-card__wish .yith-wcwl-icon svg {
		width: 15px;
		height: 15px;
	}

	.ds-shop__main ul.products li.ds-card .ds-card__media span.onsale {
		top: 8px;
		left: 8px;
		padding: 4px 7px;
		font-size: 10px;
	}

	.ds-shop-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
	}
}
