/*
 * Public vendor storefront (/store/{vendor}/) — Dokan's own store.php
 * template and store-header.php part, never copied into this theme.
 * Colors/type/spacing only, targeting Dokan's stable public-facing class
 * names; markup, product query, and Dokan's own JS are untouched. Loaded
 * only on the store page (Toga_Vendor_Storefront::enqueue_assets()).
 *
 * Phone/address are hidden at the data layer (Toga_Vendor_Storefront::
 * hide_private_contact_details(), Dokan's own hide_vendor_info setting),
 * not by CSS — so nothing here needs to fight leftover markup for those.
 */

/* -------------------------------------------------------------------- */
/* Page width — store.php has no theme content-width wrapper of its own */
/*                                                                       */
/* --toga-content-width (1180px) is the narrow, article-reading measure  */
/* — wrong here, since this wraps the same product grid Shop/homepage    */
/* render at the block editor's "wide" alignment (theme.json wideSize,   */
/* 1340px, ~1300px effective at typical desktop widths). Using the       */
/* content measure left the banner, tabs and search/sort row visibly     */
/* narrower than Shop/homepage, with empty space on the right — switched */
/* to --toga-wide-width, defined for exactly this "wide" case but unused */
/* until now.                                                            */
/* -------------------------------------------------------------------- */

body.dokan-store .woocommerce-breadcrumb,
.dokan-single-store {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--toga-wide-width);
	margin-inline: auto;
	padding-inline: var(--toga-gutter);
}

body.dokan-store .woocommerce-breadcrumb {
	margin-block: 0;
	padding-block: var(--toga-space-4);
}

.dokan-single-store {
	padding-block: var(--toga-space-6) var(--toga-space-9);
}

body.dokan-store .dokan-store-wrap,
body.dokan-store #dokan-primary,
body.dokan-store #dokan-content {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
}

/* -------------------------------------------------------------------- */
/* Store header — banner, avatar, name                                   */
/*                                                                       */
/* Ported from the Toga Design mockup's store-banner section: a flat,    */
/* full-bleed dark banner (no card border/radius) with a circular        */
/* avatar overlapping its bottom-left corner and the store name          */
/* overlaid beside it. Structure/positioning/sizing (280px banner,       */
/* 112px avatar at left:56px/bottom:-44px, name at left:190px/bottom:    */
/* 36px) are ported as literal px, matching the mockup exactly; colors   */
/* use --toga-ink/--toga-paper instead of the mockup's hardcoded hex.    */
/* The compatibility alias resolves to Toga's system editorial stack.    */
/* No remote Playfair/Poppins dependency is introduced for this surface. */
/*                                                                       */
/* Every property below needs !important: dokan-lite's style.css is      */
/* enqueued *after* this file (see toga_child_enqueue_assets()), so its  */
/* non-!important rules of equal-or-higher specificity would otherwise   */
/* win on source order/specificity alone. In particular, Dokan's own     */
/* `@media (min-width: 1200px) .profile-layout-default` block is what    */
/* actually produced the "banner compressed left, empty space on the     */
/* right" look — it swaps the store header into a fixed 320px-wide       */
/* sidebar card at desktop widths — not anything in `.dokan-single-      */
/* store` (that container's own width was the Part 1 fix and is          */
/* correct). Overridden unconditionally here so the layout is the same   */
/* at every width, matching the mockup (which has no responsive states   */
/* of its own either).                                                   */
/*                                                                       */
/* One deliberate deviation from the mockup's literal markup: its        */
/* avatar div is a child of the same `overflow:hidden` banner box that   */
/* wraps the pattern layer, which would clip the very overlap the        */
/* design is named for ("avatar circle overlapping bottom-left"). Here   */
/* the banner photo is sized to exactly fill the frame (no clipping      */
/* needed — object-fit crops it on its own box), and the avatar/name     */
/* overlay is positioned against `.profile-info-box` with nothing        */
/* clipping it, so the overlap actually renders instead of disappearing. */
/* -------------------------------------------------------------------- */

.dokan-profile-frame-wrapper {
	margin: 0 0 56px; /* clears the avatar's 44px overhang below the banner, plus breathing room */
}

.profile-frame {
	position: relative;
	background-color: var(--toga-ink) !important;
}

.profile-frame .profile-info-box {
	height: 280px;
}

.profile-info-img {
	position: absolute !important;
	inset: 0 !important;
	width: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Designed fallback when a seller has no banner uploaded — an Ink/
 * Terracotta wash, not Dokan's own bundled `default-store-banner.png`
 * (a decorative illustration). store-header.php only ever renders its
 * empty-state `.dummy-image` div when `get_banner()` returns falsy,
 * which it doesn't for this bundled default — it's a real, non-empty
 * URL — so this targets the stable, predictable asset filename directly
 * via an attribute selector instead, hiding the plugin image and
 * painting the wash on its parent (never on the image itself — an
 * opacity/background on the same element would hide both together).
 * A seller's real uploaded banner never matches this path and is
 * therefore untouched.
 *
 * Unlike the light paper-toned wash this replaced, the base here stays
 * --toga-ink: the store name/avatar overlay is white on every banner —
 * real photo or fallback — so the fallback needs to read dark too, not
 * just decorative.
 */
.profile-info-img.dummy-image {
	background:
		radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--toga-terracotta) 30%, transparent), transparent 55%),
		radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--toga-paper) 8%, transparent), transparent 55%),
		var(--toga-ink);
}

.profile-info-box:has(> .profile-info-img[src*="default-store-banner"]) {
	background:
		radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--toga-terracotta) 30%, transparent), transparent 55%),
		radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--toga-paper) 8%, transparent), transparent 55%),
		var(--toga-ink);
}

.profile-info-img[src*="default-store-banner"] {
	visibility: hidden;
}

/*
 * Dokan wraps the store-header's summery card in three nested layout
 * elements (`.profile-info-summery-wrapper` > `.profile-info-summery` >
 * `.profile-info-head`) that its own CSS sizes as a 320px-wide flex
 * column card at desktop widths. None of that geometry is wanted here —
 * the avatar and name are positioned directly against `.profile-info-box`
 * (already `position: relative` from Dokan's own base rule) instead — so
 * the wrapper layers are neutralized down to inert pass-throughs.
 */
.profile-info-summery-wrapper {
	padding: 0 !important;
}

.profile-info-summery {
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	background: none !important;
	display: block !important;
}

.profile-info-head {
	margin: 0 !important;
}

/*
 * The avatar circle overlapping the banner's bottom-left corner. Dokan
 * sizes/radii the *image* itself (`.profile-img.profile-img-circle img`)
 * at 80x80 with `margin: 0 auto`, not this wrapping div — so the wrapper
 * carries the position/size/ring-border, and the inner img is stretched
 * to fill it edge-to-edge instead of floating centered inside it.
 */
.profile-img.profile-img-circle {
	position: absolute !important;
	left: 56px !important;
	bottom: -44px !important;
	width: 112px !important;
	height: 112px !important;
	margin: 0 !important;
	box-sizing: border-box;
	border-radius: 50%;
	border: 4px solid var(--toga-surface);
	background-color: var(--toga-ink);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-img:has(> img[src*="mystery-person"]) {
	background-color: color-mix(in srgb, var(--toga-ink) 8%, var(--toga-paper));
}

.profile-img img[src*="mystery-person"] {
	visibility: hidden;
}

.profile-img img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--toga-paper);
}

.store-name {
	position: absolute !important;
	left: 190px !important;
	bottom: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 2rem;
	color: var(--toga-paper) !important;
}

@media (max-width: 599px) {
	.profile-frame .profile-info-box {
		height: 220px;
	}

	.profile-img.profile-img-circle {
		left: 20px !important;
		bottom: -36px !important;
		width: 88px !important;
		height: 88px !important;
	}

	.store-name {
		right: 16px !important;
		bottom: 16px !important;
		left: 124px !important;
		font-size: clamp(1.25rem, 6vw, 1.6rem);
		line-height: 1.15;
		overflow-wrap: anywhere;
	}
}

.dokan-store-info {
	display: flex;
	flex-wrap: wrap;
	gap: var(--toga-space-2) var(--toga-space-4);
	list-style: none;
	margin: 0 0 var(--toga-space-2);
	padding: 0;
	font-family: var(--wp--preset--font-family--inter);
	color: var(--toga-ink-70);
	font-size: 0.9rem;
}

.dokan-store-info li {
	margin: 0;
}

.dokan-store-info i {
	color: var(--toga-terracotta);
}

/* A "0 ratings" line is not useful merchandising copy on a marketplace
   that collects no reviews yet — the rest of the site already withholds
   fabricated/empty social proof (see Toga_Home's own doc comment); this is
   the same rule applied to the one place Dokan's own template prints it
   regardless. No filter exists to intercept the string itself, so this is
   a targeted visual suppression rather than invented data. */
.dokan-store-rating {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Store tabs (Products / Terms and Conditions) — de-purple                */
/* -------------------------------------------------------------------- */

.dokan-store-tabs {
	border-top: 1px solid var(--toga-border);
	padding: var(--toga-space-3) var(--toga-space-5);
	text-align: left;
}

.dokan-store-tabs ul.dokan-list-inline {
	display: flex;
	gap: var(--toga-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dokan-store-tabs ul.dokan-list-inline li a {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	color: var(--toga-ink-70);
	text-decoration: none;
}

.dokan-store-tabs ul.dokan-list-inline li a:hover,
.dokan-store-tabs ul.dokan-list-inline li a:focus-visible {
	color: var(--toga-terracotta);
}

/* -------------------------------------------------------------------- */
/* Store product search/sort row (Dokan's own                            */
/* .dokan-store-products-filter-area) — de-purple .dokan-btn-theme,      */
/* match the shop archive's sort-select treatment.                       */
/* -------------------------------------------------------------------- */

.dokan-store-products-filter-area {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--toga-space-2) var(--toga-space-3);
	margin: 0 0 var(--toga-space-5);
}

.dokan-store-products-filter-area .dokan-store-products-ordeby {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--toga-space-2);
	width: 100%;
}

.dokan-store-products-filter-area .product-name-search {
	flex: 1 1 14rem;
	height: var(--toga-control-height);
	padding: 0 var(--toga-space-3);
	font-family: var(--wp--preset--font-family--inter);
	border: 1px solid var(--toga-border-strong);
	border-radius: var(--toga-control-radius);
	background-color: var(--toga-surface);
}

/* Overrides Dokan's own .dokan-btn-theme (purple, unscoped-safe here since
   this rule only matches inside the store page's filter row). */
.dokan-store-products-filter-area .search-store-products.dokan-btn-theme {
	background-color: var(--toga-ink);
	border-color: var(--toga-ink);
	color: var(--toga-paper);
	border-radius: var(--toga-radius-pill);
	padding: 0.6em 1.5em;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	cursor: pointer;
	transition: var(--toga-transition);
}

.dokan-store-products-filter-area .search-store-products.dokan-btn-theme:hover,
.dokan-store-products-filter-area .search-store-products.dokan-btn-theme:focus-visible {
	background-color: var(--toga-ink-hover);
	border-color: var(--toga-ink-hover);
}

.dokan-store-products-filter-area select.orderby {
	height: var(--toga-control-height);
	padding: 0 var(--toga-space-6) 0 var(--toga-space-3);
	font-family: var(--wp--preset--font-family--inter);
	border: 1px solid var(--toga-border-strong);
	border-radius: var(--toga-radius-pill);
	background-color: var(--toga-surface);
	color: var(--toga-ink);
	cursor: pointer;
}

/* -------------------------------------------------------------------- */
/* Store sidebar (category/hours/contact widgets) — only renders when an  */
/* operator opts back into it; de-purpled for that case regardless.       */
/* -------------------------------------------------------------------- */

.dokan-store-sidebar .widget-title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1.05rem;
}

.dokan-store-sidebar a {
	color: var(--toga-ink);
}

.dokan-store-sidebar a:hover,
.dokan-store-sidebar a:focus-visible {
	color: var(--toga-terracotta);
}

/* -------------------------------------------------------------------- */
/* Product grid heading rhythm — matches the shop archive's own spacing   */
/* -------------------------------------------------------------------- */

.seller-items {
	margin-top: var(--toga-space-2);
}

.dokan-info {
	font-family: var(--wp--preset--font-family--inter);
	color: var(--toga-ink-70);
}