﻿/**
 * Siddik DevKit – store layout, header bar & page rhythm.
 * All rules scoped to .siddwdk-* / .elementor-widget-siddwdk-* (WP.org safe).
 *
 * Tip: Add CSS class "siddwdk-store-header" to an Elementor section
 * that contains Account, Cart, Wishlist & Search widgets.
 */

:root {
	--siddwdk-header-height: 52px;
	--siddwdk-header-gap: 10px;
	--siddwdk-section-gap: 24px;
	--siddwdk-content-max: 1200px;
}

/* ── Base UI shell (Elementor + Gutenberg) ── */
.siddwdk-ui,
[class*="siddwdk-"][class*="-block"],
[class*="elementor-widget-siddwdk-"] .elementor-widget-container {
	font-family: var(--siddwdk-font);
	line-height: 1.5;
	color: var(--siddwdk-text);
}

/* Balanced vertical rhythm — not too tight, not scattered */
[class*="elementor-widget-siddwdk-"] {
	margin-block: var(--siddwdk-section-gap);
}

[class*="siddwdk-"][class*="-block"]:not(.siddwdk-store-header *) {
	margin-block: var(--siddwdk-section-gap);
}

/* ── Header widgets: compact, never stretch full column ── */
.elementor-widget-siddwdk-account,
.elementor-widget-siddwdk-header-cart,
.elementor-widget-siddwdk-wishlist,
.elementor-widget-siddwdk-header-search,
.siddwdk-account-block,
.siddwdk-header-cart-block,
.siddwdk-wishlist-block,
.siddwdk-header-search-block {
	margin-block: 0;
}

.elementor-widget-siddwdk-account > .elementor-widget-container,
.elementor-widget-siddwdk-header-cart > .elementor-widget-container,
.elementor-widget-siddwdk-wishlist > .elementor-widget-container {
	width: fit-content;
	max-width: 100%;
	margin-inline: 0;
}

.elementor-widget-siddwdk-header-search > .elementor-widget-container,
.siddwdk-header-search-block {
	width: 100%;
	max-width: var(--siddwdk-content-max);
}

/* Cart / account inner — dropdown stays under icon */
.top-nav-mini-cart-icon-container,
.top-nav-mini-cart-icon-contents,
.siddwdk-header-cart-block .top-nav-mini-cart-icon-contents,
.elementor-widget-siddwdk-header-cart .top-nav-mini-cart-icon-contents {
	display: inline-flex;
	align-items: center;
	position: relative;
	width: fit-content;
	max-width: 100%;
}

.top-nav-mini-cart-icon-contents.is-open .dropdown-content,
.top-nav-mini-cart-icon-contents:hover .dropdown-content,
.siddwdk-header-cart-block .top-nav-mini-cart-icon-contents.is-open .dropdown-content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mini-cart-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--siddwdk-header-height);
	height: var(--siddwdk-header-height);
	padding: 0;
	text-decoration: none;
	color: var(--siddwdk-icon-color, #144443);
	background: var(--siddwdk-surface, #fff);
	border: 1px solid var(--siddwdk-input-border, #c5cdd4);
	border-radius: var(--siddwdk-radius-pill);
}

.mini-cart-icon svg {
	stroke: currentColor;
	color: currentColor;
}

.mini-cart-icon:hover {
	background: var(--siddwdk-primary, #144443);
	border-color: var(--siddwdk-primary, #144443);
	color: #fff;
}

.mini-cart-icon .cart-quick-info {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mini-cart-icon .items-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	color: #fff;
	background: var(--siddwdk-danger, #e74c3c);
	border-radius: var(--siddwdk-radius-pill);
	border: 2px solid var(--siddwdk-surface);
}

.mini-cart-icon .items-count:empty,
.mini-cart-icon .items-count[data-count="0"] {
	opacity: 0.85;
}

.dropdown-content {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	min-width: 300px;
	max-width: min(360px, calc(100vw - 32px));
	padding: var(--siddwdk-spacing-md);
	background: var(--siddwdk-surface);
	border: 1px solid var(--siddwdk-border);
	border-radius: var(--siddwdk-radius-md);
	box-shadow: var(--siddwdk-shadow-lg);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--siddwdk-transition), visibility var(--siddwdk-transition), transform var(--siddwdk-transition);
}

.dropdown-content .woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dropdown-content .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: var(--siddwdk-spacing-sm) 0;
	color: var(--siddwdk-text-muted);
	font-size: 14px;
	text-align: center;
}

/* ── Store header bar (Elementor section class or auto-detect) ── */
.siddwdk-store-header,
.elementor-top-section.siddwdk-store-header {
	padding-block: var(--siddwdk-spacing-sm);
	background: var(--siddwdk-surface);
	border-bottom: 1px solid var(--siddwdk-border-light);
	margin-bottom: var(--siddwdk-section-gap);
}

.siddwdk-store-header .elementor-container,
.siddwdk-store-header .wp-block-group__inner-container {
	max-width: var(--siddwdk-content-max);
	margin-inline: auto;
}

.siddwdk-store-header .elementor-row,
.siddwdk-store-header .elementor-widget-wrap,
.siddwdk-store-header .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--siddwdk-header-gap);
}

.siddwdk-store-header .elementor-column,
.siddwdk-store-header .wp-block-column {
	width: auto !important;
	flex: 0 0 auto !important;
	max-width: 100%;
}

.siddwdk-store-header .elementor-widget-siddwdk-header-search,
.siddwdk-store-header .siddwdk-header-search-block {
	flex: 1 1 220px;
	min-width: 0;
	max-width: 100%;
}

.siddwdk-store-header .elementor-widget-siddwdk-header-search > .elementor-widget-container,
.siddwdk-store-header .siddwdk-header-search-block {
	width: 100%;
	max-width: none;
}

.siddwdk-store-header__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--siddwdk-header-gap);
	margin-left: auto;
}

/* Auto group header icons when in same Elementor row */
.elementor-row:has(> .elementor-column .elementor-widget-siddwdk-account):has(> .elementor-column .elementor-widget-siddwdk-header-cart) {
	flex-wrap: wrap;
	align-items: center;
	gap: var(--siddwdk-header-gap);
}

.elementor-row:has(> .elementor-column .elementor-widget-siddwdk-account) > .elementor-column:has(.elementor-widget-siddwdk-account),
.elementor-row:has(> .elementor-column .elementor-widget-siddwdk-header-cart) > .elementor-column:has(.elementor-widget-siddwdk-header-cart),
.elementor-row:has(> .elementor-column .elementor-widget-siddwdk-wishlist) > .elementor-column:has(.elementor-widget-siddwdk-wishlist) {
	width: auto !important;
	flex: 0 0 auto !important;
}

/* Search row — full width, tight to header */
.elementor-widget-siddwdk-header-search,
.siddwdk-header-search-block {
	margin-block: var(--siddwdk-spacing-sm);
}

.elementor-widget-siddwdk-header-search .tm-widget-search-form,
.siddwdk-header-search-block.tm-widget-search-form {
	width: 100%;
}

/* ── Info banner ── */
.elementor-widget-siddwdk-info-banner,
.siddwdk-info-banner-block {
	margin-block: var(--siddwdk-section-gap);
}

.elementor-widget-siddwdk-info-banner .siddwdk-info-banner-advanced .info-banner-inner,
.siddwdk-info-banner-block .siddwdk-info-banner-advanced .info-banner-inner {
	overflow: hidden;
}

/* Product category card — siddwdk-product-category-ui.css */

/* ── WC Products section ── */
.elementor-widget-siddwdk-wc-products,
.siddwdk-wc-products-block {
	margin-block: var(--siddwdk-section-gap);
}

/* ── Gutenberg header group ── */
.wp-block-group.siddwdk-store-header {
	padding: var(--siddwdk-spacing-sm) var(--siddwdk-spacing-md);
	background: var(--siddwdk-surface);
	border: 1px solid var(--siddwdk-border-light);
	border-radius: var(--siddwdk-radius-lg);
	margin-bottom: var(--siddwdk-section-gap);
}

@media (max-width: 767px) {
	.siddwdk-store-header .elementor-row,
	.siddwdk-store-header .elementor-widget-wrap {
		justify-content: center;
	}

	.siddwdk-store-header .elementor-widget-siddwdk-header-search,
	.siddwdk-store-header .siddwdk-header-search-block {
		flex: 1 1 100%;
		order: -1;
	}

	.dropdown-content {
		right: 50%;
		transform: translate(50%, 6px);
	}

	.top-nav-mini-cart-icon-contents.is-open .dropdown-content,
	.top-nav-mini-cart-icon-contents:hover .dropdown-content {
		transform: translate(50%, 0);
	}
}
