/*
 * WooCommerce + Dokan presentation overrides.
 * Loaded only on commerce pages (see inc/enqueue.php), AFTER WooCommerce's own
 * stylesheets so these rules win.
 *
 * IMPORTANT — specificity notes:
 * WooCommerce ships `.woocommerce img, .woocommerce-page img { height: auto }`
 * (specificity 0,1,1) and `.woocommerce ul.products li.product { width: 30.75%; float: left }`
 * (0,1,3). Single-class theme rules such as `.brand__mark` (0,1,0) LOSE to those on every
 * WooCommerce page, which silently inflates the header logo and collapses the product grid.
 * The rules below deliberately match or exceed WooCommerce's specificity rather than
 * reaching for !important.
 */

/* ---------------------------------------------------------------- header logo
 * Without this the brand mark renders at its intrinsic height on shop/cart/
 * checkout/account pages.
 */
.woocommerce .site-header .brand__mark,
.woocommerce-page .site-header .brand__mark,
.woocommerce .drawer .brand__mark,
.woocommerce-page .drawer .brand__mark {
	height: clamp(34px, 4.4vw, 44px);
	width: auto;
}
.woocommerce .site-header .custom-logo,
.woocommerce-page .site-header .custom-logo {
	height: clamp(40px, 5vw, 56px);
	width: auto;
}
/* Footer/social icons must not inflate either. */
.woocommerce .site-footer img,
.woocommerce-page .site-footer img { height: auto; max-height: 56px; width: auto; }
.woocommerce .site-footer .pay-badge,
.woocommerce-page .site-footer .pay-badge { height: 24px; }

/* ---------------------------------------------------------------- product grid
 * Neutralise WooCommerce's float layout so the theme's CSS grid controls columns.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product.product-card,
.woocommerce-page ul.products li.product.product-card {
	background: var(--white, #fff);
	border: 1px solid var(--stone, #D9CBB8);
	border-radius: var(--r-card, 16px);
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product.product-card:hover,
.woocommerce-page ul.products li.product.product-card:hover {
	border-color: var(--gold, #A88B5C);
	transform: translateY(-2px);
}
.product-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; }

/* Row alignment.
   Cards in a row hold different things — one has a star rating, another does not — so the
   price and the button landed at different heights and the row read as ragged. Pushing the
   price to the bottom of the body and the button to the bottom of the card makes every card
   agree on where those two things live, whatever sits above them. */
.woocommerce ul.products li.product.product-card,
.woocommerce-page ul.products li.product.product-card { height: 100%; }
.product-card__body { display: flex; flex-direction: column; flex: 1; }
.product-card__price { margin-top: auto; }
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button { margin-top: auto; }

/* Badges float over the media. */
.product-card__media { position: relative; }
.product-card__media .badge-row { position: absolute; inset: 10px 10px auto 10px; z-index: 2; }

/* Loop add-to-cart — WooCommerce prints this after the card body. */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	display: block;
	margin: 0 16px 16px;
	padding: 11px 18px;
	background: var(--forest, #153F35);
	color: #fff;
	border-radius: var(--r-pill, 999px);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	text-align: center;
	line-height: 1.3;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
	background: var(--forest-soft, #1B4C40);
	color: #fff;
}
.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin: -8px 16px 14px;
	font-size: 12px;
	text-align: center;
	color: var(--taupe, #716A5D);
}

/* ---------------------------------------------------------------- archive chrome */
.woocommerce-products-header { margin-bottom: 18px; }
.woocommerce-products-header__title { font-size: clamp(30px, 4.4vw, 52px); }
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count { color: var(--taupe, #716A5D); font-size: 13px; margin: 0 0 14px; float: none; }
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering { float: none; margin: 0 0 18px; }
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	border: 1px solid var(--stone, #D9CBB8);
	border-radius: var(--r-pill, 999px);
	padding: 9px 16px;
	font-family: inherit;
	font-size: 13px;
	background: #fff;
	color: var(--charcoal, #625F58);
}

/* ---------------------------------------------------------------- notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	border-top-color: var(--gold, #A88B5C);
	border-radius: 12px;
	background: var(--sand, #F1ECE4);
	color: var(--charcoal, #625F58);
}
.woocommerce-message .button, .woocommerce-info .button {
	background: var(--forest, #153F35);
	color: #fff;
	border-radius: var(--r-pill, 999px);
}

/* ---------------------------------------------------------------- single product */
.woocommerce div.product .product_title { font-size: clamp(28px, 4vw, 44px); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--charcoal, #625F58); font-size: 22px; font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product p.price del { color: var(--taupe, #716A5D); }
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	background: var(--forest, #153F35);
	color: #fff;
	border-radius: var(--r-pill, 999px);
	padding: 14px 30px;
	font-weight: 600;
	letter-spacing: .02em;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--forest-soft, #1B4C40); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--gold, #A88B5C); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--stone, #D9CBB8); }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

/* Destination-VAT note (BR-11) rendered by Karuvia Core under the price. */
.woocommerce div.product .vat-note { font-size: 12.5px; color: var(--taupe, #716A5D); margin: 6px 0 14px; }

/* stars */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce .star-rating::before { color: var(--gold, #A88B5C); }

/* ---------------------------------------------------------------- cart / checkout */
.woocommerce table.shop_table { border-radius: var(--r-card, 16px); border-color: var(--stone, #D9CBB8); }
.woocommerce table.shop_table th { font-family: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe, #716A5D); }
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3 { font-size: 22px; }
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button {
	background: var(--forest, #153F35);
	color: #fff;
	border-radius: var(--r-pill, 999px);
	font-weight: 600;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--forest-soft, #1B4C40); }

/* Every OTHER WooCommerce button.
   Only the `.alt` variants were branded above, but WooCommerce reserves `.alt` for the one
   primary call to action per screen — Log in, Register, Save address, Apply coupon and the
   whole My Account area use plain `.button`, which fell through to WooCommerce's default
   grey pill. Those are the buttons that read as belonging to a different site. */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce .woocommerce-Button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page a.button,
.woocommerce-page .woocommerce-Button {
	background: var(--forest, #153F35);
	color: var(--white, #FDFCF9);
	border: 1px solid var(--forest, #153F35);
	border-radius: var(--r-pill, 999px);
	padding: 12px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce .woocommerce-Button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page .woocommerce-Button:hover {
	background: var(--forest-soft, #1B4C40);
	border-color: var(--forest-soft, #1B4C40);
	color: var(--white, #FDFCF9);
	transform: translateY(-1px);
}
/* Keyboard focus must stay visible on a pill that has no default outline. */
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce-page button.button:focus-visible,
.woocommerce-page input.button:focus-visible,
.woocommerce-page a.button:focus-visible {
	outline: 2px solid var(--gold, #A88B5C);
	outline-offset: 2px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	border: 1px solid var(--stone, #D9CBB8);
	border-radius: 12px;
	padding: 12px 14px;
	font-family: inherit;
	background: #fff;
}

/* Cart & Checkout BLOCKS (WooCommerce Blocks) inherit the brand. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	background: var(--forest, #153F35);
	border-radius: var(--r-pill, 999px);
	color: #fff;
}

/* ---------------------------------------------------------------- my account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--charcoal, #625F58);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--sand, #F1ECE4); }

/* ---------------------------------------------------------------- Dokan storefront */
.karuvia-dokan-store .dokan-store-header,
.dokan-store-wrap .profile-frame { border-radius: var(--r-panel, 20px); overflow: hidden; }
.dokan-dashboard .dokan-dash-sidebar { border-radius: var(--r-panel, 20px); }
.dokan-btn, .dokan-btn-theme {
	background: var(--forest, #153F35);
	border-color: var(--forest, #153F35);
	border-radius: var(--r-pill, 999px);
	color: #fff;
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 768px) {
	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product {
		width: auto;
		float: none;
		margin: 0;
	}
}


/* ============================================================================
   Karuvia — Dokan brand skin
   Dokan ships its own purple/grey UI. These rules bring the vendor directory,
   storefront and dashboard onto the Karuvia design system, matching the
   prototype's Vendors.dc.html / VendorStorefront.dc.html specs:
   card = #FFF, 1px #D9CBB8, 20px radius; banner 16/7 on #F1ECE4;
   headings Cormorant Garamond; primary = forest green, accent = champagne gold.
   ========================================================================= */

/* ---------- directory shell ---------- */
.dokan-seller-listing { max-width: 1400px; margin-inline: auto; }
.dokan-seller-listing .dokan-clearfix::after { content: none; }

/* search / filter bar */
.dokan-store-list-filter-button,
.dokan-seller-listing .dokan-btn,
.dokan-seller-listing .dokan-btn-theme,
.dokan-store-wrap .dokan-btn-theme {
  background: #153F35 !important;
  border-color: #153F35 !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: Manrope, system-ui, sans-serif !important;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 11px 22px !important;
}
.dokan-seller-listing .dokan-btn:hover,
.dokan-store-list-filter-button:hover { background: #1B4C40 !important; border-color: #1B4C40 !important; }

.store-search, .dokan-store-list-filter-area, .seller-listing-content > form {
  background: #fff !important;
  border: 1px solid #D9CBB8 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}
.store-search-input, .dokan-store-list-filter-area input[type="text"] {
  border: 1px solid #D9CBB8 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-family: Manrope, system-ui, sans-serif !important;
  font-size: 14px !important;
  background: #F8F5F0 !important;
  box-shadow: none !important;
}
.store-count { font-size: 13px; color: #716A5D; font-family: Manrope, system-ui, sans-serif; }

/* ---------- vendor cards (prototype: 20px radius, stone border) ---------- */
.dokan-seller-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,330px),1fr)); gap: clamp(16px,2vw,24px); }
.dokan-single-seller { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }

.store-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #D9CBB8 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  display: flex; flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  height: 100%;
}
.store-wrapper:hover {
  border-color: #A88B5C !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 50px -20px rgba(21,63,53,.35) !important;
}

/* banner — prototype uses 16/7 on soft sand */
.store-wrapper .store-header, .store-wrapper .store-banner {
  aspect-ratio: 16 / 7; height: auto !important; min-height: 0 !important;
  /* background-COLOR, not the shorthand: Dokan paints the store banner as a background-image
     on this element, and `background:` resets background-image, erasing the banner and
     leaving flat cream. The colour is only meant as the ground behind/absent an image. */
  background-color: #F1ECE4 !important; position: relative; overflow: hidden;
}
.store-wrapper .store-banner img { width: 100%; height: 100%; object-fit: cover; }

/* the round avatar Dokan floats over the banner */
.store-wrapper .seller-avatar, .store-wrapper .store-avatar {
  border: 3px solid #fff !important;
  box-shadow: 0 8px 22px -10px rgba(21,63,53,.45) !important;
  border-radius: 999px !important;
  overflow: hidden;
}

/* body */
.store-wrapper .store-content, .store-wrapper .store-data-container {
  padding: 22px 22px 24px !important;
  display: flex; flex-direction: column; gap: 10px; flex: 1;
  background-color: #fff !important;
}
.store-wrapper .store-data h2,
.store-wrapper .store-data h3,
.store-wrapper h2 a, .store-wrapper h3 a {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
  color: #153F35 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  text-shadow: none !important;
}
.store-wrapper .store-data p,
.store-wrapper .store-address,
.store-wrapper .store-phone,
.store-wrapper .store-data li {
  font-family: Manrope, system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #625F58 !important;
  text-shadow: none !important;
  margin: 0 !important;
}
.store-wrapper .store-data i, .store-wrapper .dokan-icons { color: #A88B5C !important; }

/* rating stars → champagne gold */
.store-wrapper .seller-rating .star-rating span::before,
.store-wrapper .star-rating span::before,
.dokan-store-wrap .star-rating span::before { color: #A88B5C !important; }

/* footer / "Visit store" */
.store-wrapper .store-footer {
  background: #fff !important;
  border-top: 1px solid #D9CBB8 !important;
  padding: 14px 22px !important;
}
.store-wrapper .store-footer a,
.dokan-btn-round {
  background: #153F35 !important;
  border-color: #153F35 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: Manrope, system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}
.store-wrapper .store-footer a:hover, .dokan-btn-round:hover { background: #1B4C40 !important; }

/* kill Dokan's grey overlay on the banner */
.store-wrapper .store-header::after, .store-wrapper .store-banner::after { display: none !important; }
.store-wrapper .store-data-container { color: #625F58 !important; }

/* ---------- single storefront ---------- */
.dokan-store-wrap .profile-frame,
.dokan-single-store .profile-frame {
  border: 1px solid #D9CBB8 !important;
  border-radius: 20px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}
.dokan-single-store .profile-info-box .profile-info-summery-wrapper {
  /* Same trap as the listing cards: the shorthand erased Dokan's banner background-image,
     so every storefront rendered a blank cream band instead of the vendor's banner. */
  background-color: #F1ECE4 !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 20px 20px 0 0 !important;
}
.dokan-single-store .profile-info-summery-wrapper .profile-info-img img { border-radius: 999px !important; border: 3px solid #fff !important; }
.dokan-single-store .store-info h3,
.dokan-single-store .profile-info-summery-wrapper .profile-info h3 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  color: #153F35 !important; font-weight: 400 !important;
}
.dokan-store-tabs ul li a {
  font-family: Manrope, system-ui, sans-serif !important;
  color: #625F58 !important; font-size: 13.5px !important;
}
.dokan-store-tabs ul li.active a, .dokan-store-tabs ul li a:hover {
  color: #153F35 !important; border-bottom: 2px solid #A88B5C !important;
}

/* ---------- vendor dashboard ---------- */
.dokan-dashboard .dokan-dash-sidebar { background: #153F35 !important; border-radius: 20px; overflow: hidden; }
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a { color: #F1ECE4 !important; font-family: Manrope, system-ui, sans-serif !important; }
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover { background: #1B4C40 !important; }
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active a { color: #fff !important; }
.dokan-dashboard-content { border-radius: 20px; border: 1px solid #D9CBB8; background: #fff; }
.dokan-dashboard-content h1, .dokan-dashboard-content h2 { font-family: "Cormorant Garamond", Georgia, serif !important; color: #153F35 !important; font-weight: 400 !important; }

/* ---------- generic Dokan buttons everywhere ---------- */
.dokan-btn-default { border-radius: 999px !important; border-color: #D9CBB8 !important; color: #153F35 !important; background: #fff !important; }
.dokan-btn-success, .dokan-btn-primary { background: #153F35 !important; border-color: #153F35 !important; border-radius: 999px !important; }
.dokan-alert, .dokan-info { border-radius: 12px !important; background: #F1ECE4 !important; border-color: #D9CBB8 !important; color: #625F58 !important; }

/* ============================================================================
   Karuvia — full-width pages, shortcode grids, Dokan polish, responsive
   ========================================================================= */

/* ---- 1. Full-width page templates -----------------------------------------
   .page-article is a 760px editorial measure. Pages that host WooCommerce or
   Dokan shortcodes (Services, Vendors) must not inherit it, or the product grid
   collapses into unusably narrow columns. */
.page-article--wide,
.site-main--landing .entry-content,
.page-template-template-full-width .page-article {
	max-width: var(--max, 1400px);
	margin-inline: auto;
	padding-inline: var(--gutter, clamp(16px, 3vw, 40px));
}
.page-template-template-full-width .wrap--single { padding-inline: 0; }

/* Pages that contain a Woo/Dokan shortcode go full width even on the default
   page template — the shortcode is the page's whole purpose. */
.page-article:has(ul.products),
.page-article:has(.dokan-seller-listing),
.page-article:has(.dokan-store-wrap) {
	max-width: var(--max, 1400px);
}

/* ---- 2. Product grids inside page content (shortcodes) --------------------- */
.entry-content ul.products,
.woocommerce .entry-content ul.products,
.woocommerce-page .entry-content ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.entry-content ul.products li.product,
.entry-content ul.products[class*="columns-"] li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	display: flex;
	flex-direction: column;
}
/* the card must fill its cell and keep a sane image box */
.entry-content ul.products li.product .product-card__media { aspect-ratio: 4 / 5; }
.entry-content ul.products li.product img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 3. Dokan store cards: banner image was not filling its box ------------ */
.store-wrapper .store-header img,
.store-wrapper .store-banner img,
.store-wrapper .store-header a img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
	position: absolute;
	inset: 0;
}
.store-wrapper .store-header { display: block; }
/* name/address sit over the banner in Dokan's markup — give them a readable plate */
.store-wrapper .store-data-container { position: relative; z-index: 2; }

/* "Featured" ribbon → champagne gold, not Dokan blue */
.store-wrapper .featured-favourite,
.store-wrapper .dokan-store-featured,
.featured-favourite {
	background: var(--gold, #A88B5C) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-family: Manrope, system-ui, sans-serif !important;
	font-size: 10px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 10px !important;
	box-shadow: none !important;
	z-index: 3;
}
.store-wrapper .featured-favourite::before { content: none !important; }

/* the cramped green pill in the card footer */
.store-wrapper .store-footer { display: flex; align-items: center; justify-content: flex-end; }
.store-wrapper .store-footer a,
.store-wrapper .store-footer .dokan-btn-round {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 18px !important; width: auto !important; height: auto !important;
	min-width: 0 !important; line-height: 1.2 !important;
}

/* the directory toolbar */
.dokan-store-list-filter-area, .store-search { padding: 14px 18px !important; }
.dokan-seller-listing .sort-by select,
.dokan-seller-listing select {
	border: 1px solid var(--stone, #D9CBB8) !important;
	border-radius: 999px !important;
	padding: 9px 16px !important;
	font-family: Manrope, system-ui, sans-serif !important;
	background: #fff !important;
}

/* ---- 4. Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.dokan-seller-wrap { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
	.entry-content ul.products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
}
@media (max-width: 768px) {
	.page-article--wide, .page-article { padding-inline: clamp(16px, 4vw, 24px); }
	.dokan-seller-wrap { grid-template-columns: 1fr 1fr; gap: 14px; }
	.entry-content ul.products,
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr 1fr !important; gap: 12px; }
	.store-wrapper .store-data h2, .store-wrapper .store-data h3, .store-wrapper h3 a { font-size: 20px !important; }
	.dokan-dashboard .dokan-dash-sidebar { border-radius: 14px; }
}
@media (max-width: 520px) {
	.dokan-seller-wrap { grid-template-columns: 1fr; }
	.entry-content ul.products,
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr !important; }
	.store-wrapper .store-header, .store-wrapper .store-banner { aspect-ratio: 16 / 9; }
}
/* never let a page scroll sideways */
/* `clip`, not `hidden`. overflow-x:hidden on <html> makes it a scroll container, which
   silently kills `position: sticky` on every descendant — the sticky header scrolled
   away entirely. overflow-x:clip gives the same "no sideways scrolling" guarantee
   without establishing a scroll container, so sticky keeps working. */
html, body { overflow-x: clip; }
.wrap, .site-main, .entry-content { min-width: 0; }

/* ==========================================================================
   Karuvia v2 — corrected vendor cards + product detail page
   Supersedes the earlier Dokan block. Two corrections of note:
   (a) `.store-footer a` previously matched the VENDOR AVATAR link (Dokan puts
       the avatar inside .store-footer), turning every avatar into a green pill.
   (b) PDP now follows prototype Product.dc.html: 4:5 gallery @20px radius on
       #F1ECE4, sticky summary at 104px, Cormorant title, gold eyebrow, 26px rule.
   ========================================================================== */

/* ----------------------------------------------------- VENDOR CARD (fixed) */
.store-wrapper .store-header{aspect-ratio:16/7;height:auto!important;min-height:0!important;background:#F1ECE4!important;position:relative;overflow:hidden;display:block}
.store-wrapper .store-banner{position:absolute;inset:0;height:100%!important;width:100%;margin:0!important;background:#F1ECE4!important}
.store-wrapper .store-banner a{display:block;width:100%;height:100%}
.store-wrapper .store-banner img{width:100%!important;height:100%!important;object-fit:cover!important;display:block;border-radius:0!important}

.store-wrapper .store-content{padding:0!important;background:#fff!important;flex:1;display:flex;flex-direction:column}
.store-wrapper .store-data-container{position:relative;padding:20px 22px 18px!important;background:#fff!important;color:#625F58!important;display:flex;flex-direction:column;gap:8px}

/* "Featured" → champagne-gold pill, floated over the banner */
.store-wrapper .featured-favourite{position:absolute;top:-34px;left:18px;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;z-index:3}
.store-wrapper .featured-favourite .featured-label{background:#A88B5C!important;color:#fff!important;border-radius:999px!important;font-family:Manrope,system-ui,sans-serif!important;font-size:9px!important;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:5px 11px!important;display:inline-block;box-shadow:0 6px 18px -8px rgba(21,63,53,.5)}

.store-wrapper .store-data{display:flex;flex-direction:column;gap:6px}
.store-wrapper .store-data h2{margin:0!important;line-height:1.12!important}
.store-wrapper .store-data h2 a{font-family:"Cormorant Garamond",Georgia,serif!important;font-size:24px!important;color:#153F35!important;font-weight:400!important;text-shadow:none!important}
.store-wrapper .store-data h2 a:hover{color:#7C6435!important}
.store-wrapper .store-address,.store-wrapper .store-phone{font-family:Manrope,system-ui,sans-serif!important;font-size:12.5px!important;line-height:1.6!important;color:#625F58!important;margin:0!important;text-shadow:none!important}
.store-wrapper .store-address br{display:none}
.store-wrapper .store-address span{display:inline}
.store-wrapper .store-phone i{color:#A88B5C!important;margin-right:5px}

/* footer: the avatar lives here — it must NOT be a button */
.store-wrapper .store-footer{background:#fff!important;border-top:1px solid #D9CBB8!important;padding:12px 22px!important;display:flex;align-items:center;gap:10px;justify-content:flex-start}
.store-wrapper .store-footer .seller-avatar{margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;width:auto!important;height:auto!important}
.store-wrapper .store-footer .seller-avatar a,
.store-wrapper .store-footer a:has(img){background:none!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;display:inline-block!important;width:auto!important;min-width:0!important}
.store-wrapper .store-footer .seller-avatar img{width:40px!important;height:40px!important;border-radius:999px!important;object-fit:cover;border:2px solid #fff;box-shadow:0 4px 12px -6px rgba(21,63,53,.5);display:block;position:static!important}
/* only real text links in the footer become buttons */
.store-wrapper .store-footer a:not(:has(img)){background:#153F35!important;color:#fff!important;border-radius:999px!important;padding:8px 16px!important;font-family:Manrope,system-ui,sans-serif!important;font-size:12px!important;font-weight:600!important;margin-left:auto}
.store-wrapper .store-footer a:not(:has(img)):hover{background:#1B4C40!important}

/* ------------------------------------------------------ PRODUCT DETAIL PAGE */
.single-product div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.single-product div.product .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0!important;display:grid;gap:12px}
.single-product .woocommerce-product-gallery__wrapper{margin:0!important}
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a{display:block}
.single-product .woocommerce-product-gallery__image:first-child{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#F1ECE4}
.single-product .woocommerce-product-gallery__image:first-child img{width:100%!important;height:100%!important;object-fit:cover!important}
.single-product .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 0!important;padding:0!important;list-style:none}
.single-product .flex-control-thumbs li{width:auto!important;margin:0!important;float:none!important}
.single-product .flex-control-thumbs img{aspect-ratio:1;object-fit:cover;border-radius:14px;background:#F1ECE4;opacity:.75}
.single-product .flex-control-thumbs img.flex-active,.single-product .flex-control-thumbs img:hover{opacity:1}

.single-product div.product .summary.entry-summary{width:100%!important;float:none!important;margin:0!important;position:sticky;top:104px}
.single-product .summary .badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.single-product .summary .badge{font-size:9px!important;letter-spacing:.13em;padding:5px 10px!important;border-radius:999px!important}
.single-product .product_title{font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:400!important;font-size:clamp(30px,3.8vw,48px)!important;line-height:1.08!important;color:#153F35!important;margin:12px 0 0!important;text-wrap:pretty}
.single-product .woocommerce-product-details__short-description{font-size:14.5px;color:#716A5D;margin:10px 0 0}
.single-product .woocommerce-product-rating{margin:16px 0 0!important;display:flex;align-items:center;gap:10px;min-height:20px}
.single-product .woocommerce-product-rating .woocommerce-review-link{font-size:12.5px;color:#625F58}
/* champagne rule before the price, per the prototype */
.single-product .summary p.price{position:relative;margin:26px 0 0!important;padding-top:26px;font-size:clamp(26px,3vw,34px)!important;color:#153F35!important;font-weight:500!important;letter-spacing:-.02em}
.single-product .summary p.price::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#D9CBB8}
.single-product .summary p.price del{font-size:15px;color:#A8A196;font-weight:400}
.single-product .summary p.price ins{text-decoration:none}
.single-product .summary .vat-note{font-size:12.5px;color:#625F58;margin-top:6px}
.single-product .summary .stock{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:12.5px;color:#625F58}
.single-product .summary .stock::before{content:"";width:7px;height:7px;border-radius:999px;background:#153F35;display:inline-block}
.single-product .summary .stock.out-of-stock::before{background:#C46A4E}
.single-product form.cart{margin:22px 0 0!important;display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.single-product form.cart .quantity input{height:48px;border:1px solid #D9CBB8;border-radius:999px;padding:0 14px;font-family:Manrope,system-ui,sans-serif;background:#FDFCF9;width:88px;text-align:center;color:#153F35;font-size:15px;font-weight:600;line-height:48px;-moz-appearance:textfield;appearance:textfield;opacity:1}
.single-product form.cart .quantity input::-webkit-outer-spin-button,
.single-product form.cart .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.single-product form.cart .single_add_to_cart_button{flex:1;min-width:180px;height:48px;border-radius:999px!important}
.single-product .product_meta{margin-top:22px;font-size:12.5px;color:#716A5D;border-top:1px solid #D9CBB8;padding-top:16px}
.single-product .product_meta a{color:#7C6435}

/* tabs + related */
.single-product .woocommerce-tabs{grid-column:1/-1;margin-top:clamp(28px,4vw,56px)}
.single-product .woocommerce-tabs ul.tabs{padding:0!important;margin:0 0 18px!important}
.single-product .related.products,.single-product .upsells.products{grid-column:1/-1;margin-top:clamp(28px,4vw,56px)}
.single-product .related.products>h2,.single-product .upsells.products>h2{font-family:"Cormorant Garamond",Georgia,serif!important;font-size:clamp(24px,3vw,34px)!important;color:#153F35!important;font-weight:400!important;margin-bottom:18px}

@media(max-width:900px){
  .single-product div.product{grid-template-columns:1fr;gap:24px}
  .single-product div.product .summary.entry-summary{position:static}
}
@media(max-width:520px){
  .single-product form.cart{flex-direction:column}
  .single-product form.cart .quantity input{width:100%}
}

/* ------------------------------------------------------------------ seller disclosure
 * Per-product trader identity, customer-service contacts and returns terms. Required by the
 * Omnibus Directive for a marketplace, and by the client's feedback ("contacts and
 * Information (Retour & Customer Service) for every product visible").
 * ---------------------------------------------------------------------------------- */
.karuvia-seller {
	margin: 28px 0 0;
	padding: 22px 24px;
	background: var(--cream);
	border: 1px solid var(--stone);
	border-radius: var(--r-card);
}
.karuvia-seller__title { font-size: 19px; margin: 0 0 12px; }
.karuvia-seller__subtitle {
	font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--taupe); margin: 18px 0 8px;
}
.karuvia-seller__line { font-size: 15px; margin: 0 0 4px; }
.karuvia-seller__store { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.karuvia-seller__meta { font-size: 13px; color: var(--taupe); margin: 0 0 10px; }
.karuvia-seller__legal,
.karuvia-seller__returns { font-size: 13.5px; line-height: 1.65; color: var(--charcoal); margin: 0 0 8px; }
.karuvia-seller__contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.karuvia-seller__contacts a { text-decoration: underline; text-underline-offset: 3px; }
.karuvia-seller__escalate { font-size: 13.5px; margin: 12px 0 0; }

/* ------------------------------------------------------------------ shipment tracking */
.karuvia-tracking { margin: 32px 0 0; }
.karuvia-tracking__title { font-size: 21px; margin: 0 0 10px; }
.karuvia-tracking__note { font-size: 13.5px; color: var(--taupe); margin: 0 0 14px; }
.karuvia-tracking__table { width: 100%; border-collapse: collapse; }
.karuvia-tracking__table th,
.karuvia-tracking__table td {
	text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--stone); vertical-align: top;
}
.karuvia-tracking__table th { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--forest); width: 34%; }
.karuvia-tracking__number { font-family: var(--font-mono); font-size: 13.5px; }
.karuvia-tracking__provider { margin-left: 10px; font-size: 13px; }
.karuvia-tracking__date { display: block; font-size: 12.5px; color: var(--taupe); margin-top: 4px; }

@media (max-width: 600px) {
	.karuvia-tracking__table th, .karuvia-tracking__table td { display: block; width: auto; }
	.karuvia-tracking__table th { border-bottom: 0; padding-bottom: 2px; }
}

/* ------------------------------------------------------------------ account: login / register
 * Dokan appends a customer/vendor choice to WooCommerce's registration form as two
 * <label class="radio"> inside one <p class="user-role vendor-customer-registration">,
 * separated by a <br>. Unstyled, those labels collapse to a few characters wide, the text
 * wraps one word per line and the block overlaps the privacy paragraph beneath it — which is
 * what "Become a Vendor" showed. Styled explicitly here so it renders as a real choice
 * control regardless of what generic form CSS is in play.
 * ------------------------------------------------------------------------------------------ */
.woocommerce-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
/* woocommerce-layout.css sets `.woocommerce .col2-set .col-1 { width: 48% }` — three
   classes, so it outranks a two-class override and squeezed each grid cell to 48% of
   itself (173px of 360px), wrapping every label one word per line. Matching its
   specificity is enough because this file is enqueued after WooCommerce's. */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	width: auto; float: none; margin: 0;
	/* Column is a stretched grid item; making it a flex column lets the form inside fill it,
	   so Login and Register cards end level instead of one running longer than the other. */
	display: flex;
	flex-direction: column;
}

/* Two side-by-side forms need more than the 760px editorial reading measure. */
.woocommerce-account .page-article,
.woocommerce-account .page-article__body { max-width: min(1100px, 100%); }
.woocommerce-account form.login,
.woocommerce-account form.register {
	background: var(--white);
	border: 1px solid var(--stone);
	border-radius: var(--r-card);
	padding: clamp(20px, 2.4vw, 30px);
	margin: 0;
	height: 100%;
}

/* the customer / vendor choice */
.woocommerce form.register p.user-role,
.woocommerce form.register p.vendor-customer-registration {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	margin: 18px 0;
	overflow: visible;
	clear: both;
}
.woocommerce form.register p.user-role br { display: none; }
/* WooCommerce puts its clearfix on EVERY .form-row, and this one is display:grid — so
   ::before became a grid item, took the first cell, and pushed "I am a customer" into
   column 2 with "I am a vendor" wrapping to row 2. Same defect as the product grid and the
   My Account columns; neutralise it here too. */
.woocommerce form.register p.user-role::before,
.woocommerce form.register p.user-role::after,
.woocommerce form.register p.vendor-customer-registration::before,
.woocommerce form.register p.vendor-customer-registration::after {
	content: none;
	display: none;
}
.woocommerce form.register p.user-role label.radio {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 13px 16px;
	background: var(--cream);
	border: 1px solid var(--stone);
	border-radius: var(--r-card);
	font-size: 14px;
	line-height: 1.3;
	white-space: normal;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.woocommerce form.register p.user-role label.radio:hover { border-color: var(--gold); }
.woocommerce form.register p.user-role input[type="radio"] {
	position: static;
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 18px;
	accent-color: var(--forest);
}
.woocommerce form.register p.user-role label.radio:has(input:checked) {
	border-color: var(--forest);
	background: var(--white);
	box-shadow: inset 0 0 0 1px var(--forest);
}

/* the vendor-only fields Dokan reveals when "I am a vendor" is chosen */
.woocommerce form.register .show_if_seller { margin-top: 4px; }
.woocommerce-account .woocommerce-privacy-policy-text { clear: both; margin-top: 14px; font-size: 13px; color: var(--taupe); }
.woocommerce-account .woocommerce-privacy-policy-text a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 782px) {
	.woocommerce-account .u-columns { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ shop hero */
.shop-hero { max-width: 60ch; margin: 0 0 clamp(24px, 4vw, 40px); }
.shop-hero__standfirst {
	font-family: var(--font-display);
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.2;
	color: var(--forest);
	margin: 0 0 12px;
}
.shop-hero__descriptor { font-size: 15px; line-height: 1.75; color: var(--charcoal); margin: 0; }

/* ==================================================================================
   MY ACCOUNT — the two-area sign-in gate (see woocommerce/myaccount/form-login.php)
   ================================================================================== */
/* No container of its own: WooCommerce renders this inside the theme's page wrapper, which
   already applies --max and --gutter. Re-applying both indented the gate a second time and
   left it visibly narrower than the breadcrumb and title above it. */
.account-gate { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; }
.account-gate__intro { max-width: 62ch; margin: 0 0 clamp(24px, 4vw, 40px); }
.account-gate__title { font-size: clamp(28px, 4vw, 40px); margin: 0 0 10px; }
.account-gate__lede { font-size: 16px; line-height: 1.75; color: var(--charcoal, #625F58); margin: 0; }

/* Two equal areas. `1fr 1fr` rather than auto-sizing so the boxes are the same width
   whatever they contain, and stretch alignment so they are the same height too — the
   vendor side carries more fields than the customer side and would otherwise be taller. */
.account-gate__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 32px);
	align-items: stretch;
}
.account-area {
	display: flex; flex-direction: column;
	background: var(--white, #FDFCF9);
	border: 1px solid var(--stone, #D9CBB8);
	border-radius: var(--r-card, 18px);
	padding: clamp(22px, 3vw, 34px);
}
/* A quiet tint distinguishes the vendor side without introducing a second card style. */
.account-area--seller { background: var(--cream, #F1ECE4); }
.account-area__head { margin-bottom: 18px; }
.account-area__title { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 8px; }
.account-area__lede { font-size: 14.5px; line-height: 1.7; color: var(--charcoal, #625F58); margin: 0; }

.account-compliance {
	border: 1px solid var(--stone, #D9CBB8);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 22px;
	background: rgba(253, 252, 249, .7);
}
.account-compliance__title {
	font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--gold-ink, #7C6435); margin: 0 0 10px;
}
.account-compliance__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.account-compliance__list li {
	position: relative; padding-left: 18px;
	font-size: 13px; line-height: 1.65; color: var(--charcoal, #625F58);
}
.account-compliance__list li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--gold, #A88B5C);
}

/* The forms fill the remaining height so both cards end level. */
.account-area__forms { display: grid; gap: 22px; align-content: start; flex: 1; }
.account-form__title {
	font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--gold-ink, #7C6435); margin: 0 0 12px;
	padding-bottom: 8px; border-bottom: 1px solid var(--stone, #D9CBB8);
}
/* WooCommerce gives `form.login` and `form.register` their own border, radius and padding.
   Inside an area card that reads as a box drawn inside a box, and the inner one overflowed
   the card's rounded corner. The area card is the container here, so strip the inner chrome. */
.woocommerce .account-area form.login,
.woocommerce .account-area form.register,
.woocommerce-page .account-area form.login,
.woocommerce-page .account-area form.register {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	background: none;
}
.account-form--register { padding-top: 4px; }
.account-form .form-row { margin: 0 0 14px; }
.account-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--forest, #153F35); }
.account-form input.input-text,
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="tel"] {
	width: 100%; box-sizing: border-box;
	border: 1px solid var(--stone, #D9CBB8); border-radius: 12px;
	padding: 12px 14px; font-family: inherit; font-size: 14px;
	background: #fff; color: var(--forest, #153F35);
}
.account-form input:focus-visible {
	outline: 2px solid var(--gold, #A88B5C); outline-offset: 1px; border-color: var(--forest, #153F35);
}
/* Submit and "remember me" sat on different baselines because the button is a tall pill
   and the checkbox label is text — align them on a flex row instead. */
.account-form__actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px;
}
.account-form__remember { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 400; }
.account-form__remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--forest, #153F35); }
.account-form__lost { margin: 12px 0 0; font-size: 13px; }
.account-form__lost a { color: var(--forest, #153F35); text-decoration: underline; text-underline-offset: 3px; }
.account-form__lost a:hover { color: var(--gold-ink, #7C6435); }
.account-form .woocommerce-privacy-policy-text p { font-size: 12px; line-height: 1.65; color: var(--charcoal, #625F58); }

/* The required marker was WooCommerce red (#a00) against a warm palette — visually alien.
   Terracotta-ink is the brand's warm red darkened to clear AA, so the asterisk still reads as
   "you must answer this" instead of becoming a decorative gold; it matches the marker on the
   community feedback form so `*` means one thing across the site.
   WooCommerce sets the colour via `.woocommerce form .form-row .required` (0,3,1), so a plain
   `.account-area .required` (0,2,0) loses; this matches that weight rather than !important. */
.woocommerce .account-area .required,
.woocommerce-page .account-area .required,
.account-area .account-form label .required {
	color: var(--terracotta-ink, #A65237);
	text-decoration: none;
	border: 0;
}

/* Dokan's "I am a customer / I am a vendor" pair is redundant here: the surrounding area
   already declares the role, and the template posts it as a hidden field. Hidden rather
   than removed so Dokan's own script still finds the inputs it toggles `.show_if_seller` on.
   Kept in the a11y tree's flow via clip rather than display:none for the same reason. */
.account-area .vendor-customer-registration {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Belt and braces. Dokan's script is what actually reveals and re-enables this block (see
   karuvia_dokan_registration_default_role() in inc/woocommerce.php); this only guarantees the
   fields are visible if that script fails to run, since in the Vendors & Experts area they
   are never optional. It cannot substitute for the filter — CSS cannot undo the
   `prop('disabled', true)` the script applies alongside the hide. */
.account-area--seller .show_if_seller { display: block; }

/* Dokan's vendor fields adopt the same control styling as the rest of the card. */
.account-area .show_if_seller .form-group { margin-bottom: 14px; }
.account-area .show_if_seller input.input-text,
.account-area .show_if_seller input.form-control {
	width: 100%; box-sizing: border-box;
	border: 1px solid var(--stone, #D9CBB8); border-radius: 12px;
	padding: 12px 14px; font-family: inherit; font-size: 14px; background: #fff;
}
.account-area .show_if_seller .split-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.account-area .show_if_seller small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--charcoal, #625F58); }
.account-area input[type="radio"], .account-area input[type="checkbox"] { accent-color: var(--forest, #153F35); }

@media (max-width: 900px) {
	/* Side by side, these two cards squeeze the vendor form's paired name fields to about
	   140px each. Stack instead. */
	.account-gate__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.account-area .show_if_seller .split-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- empty cart
 * Matches the empty-wishlist treatment: illustration, a warm line, two ways onward. The
 * default is a grey sentence and one button, which reads as an error rather than an
 * invitation. */
.cart-empty-state { text-align: center; padding: clamp(24px, 5vw, 56px) 20px; }
.cart-empty-state__art {
	display: block; margin: 0 auto clamp(20px, 3vw, 30px);
	width: min(100%, 560px); height: auto;
	border-radius: var(--r-card, 16px);
}
.cart-empty-state__title { font-size: clamp(26px, 3.6vw, 38px); margin: 0 0 10px; }
.cart-empty-state__text { max-width: 46ch; margin: 0 auto 22px; color: var(--charcoal, #625F58); line-height: 1.75; }
.cart-empty-state__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; }
/* WooCommerce prints its own "Return to shop" button after this template on some versions. */
.cart-empty-state + .return-to-shop { display: none; }

/* The BLOCK cart's empty state.
 * The classic template above (woocommerce/cart/cart-empty.php) only renders when the Cart
 * page uses the shortcode. WooCommerce now ships a Cart block by default, which draws its own
 * empty state — a dark circular sad-face icon set as a background on the heading. That icon is
 * what actually appears on this site, so it is replaced here with the client's photograph
 * rather than left in place beside a template nobody sees. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
	content: "";
	display: block;
	width: min(100%, 520px);
	aspect-ratio: 3 / 2;
	margin: 0 auto clamp(18px, 3vw, 28px);
	background-image: url("../images/cart-empty.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--r-card, 16px);
	/* WooCommerce sizes its icon with these; reset so the photo controls its own box. */
	height: auto;
	mask: none;
	-webkit-mask: none;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--font-display, serif);
	font-size: clamp(26px, 3.6vw, 38px);
	color: var(--forest, #153F35);
	font-weight: 400;
}
/* The dotted separator between the message and the cross-sells is visual noise here. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots { display: none; }

/* ---------------------------------------------------------------- pet details
 * Replaces WooCommerce's generic "Additional information" table on the single product page.
 * Two columns on desktop so a short list does not run down the page as a thin ribbon. */
.karuvia-pet-details { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--stone, #D9CBB8); border-radius: var(--r-card, 16px); background: var(--white, #FDFCF9); }
.karuvia-pet-details__title { font-family: var(--font-body, sans-serif); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink, #7C6435); margin: 0 0 12px; }
.karuvia-pet-details__list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; align-items: baseline; }
.karuvia-pet-details__list dt { font-size: 12.5px; color: var(--taupe, #716A5D); }
.karuvia-pet-details__list dd { margin: 0; font-size: 14px; color: var(--forest, #153F35); }
@media (max-width: 480px) { .karuvia-pet-details__list { grid-template-columns: 1fr; gap: 2px 0; } .karuvia-pet-details__list dd { margin-bottom: 8px; } }