/*
 * Production Store — WooCommerce overrides.
 * Loaded after theme.css.
 */

/* ============================================================
   Product card glue (match the original .product-card design)
   ============================================================ */
.product-card .product-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.product-card .product-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card .product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	justify-content: center;
	margin-top: 0.6rem;
	border: none;
	cursor: pointer;
	font-weight: 700;
}

.product-card .product-card__cta.added {
	display: none;
}

.product-card .product-card__vendor {
	color: inherit;
	opacity: 0.85;
	font-size: 0.78rem;
	font-weight: 600;
	margin-right: 0.4rem;
}

.product-card .product-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
}

.product-card .product-card__price .price {
	display: contents;
}

.product-card .product-card__price del {
	opacity: 0.6;
	font-size: 0.85em;
}

.product-card .product-card__savings {
	font-size: 0.78rem;
	color: var(--red);
	font-weight: 600;
}

.product-card .product-card__excerpt {
	color: var(--muted);
	font-size: 0.88rem;
	margin: 0;
}

.product-card .yith-wcwl-add-to-wishlist {
	margin: 0;
}

.product-card .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 999px;
	background: var(--product-chip-bg);
	border: 1px solid var(--product-line);
	color: inherit;
}

/* ============================================================
   WC loop / shop archive — use the marketplace product-grid
   ============================================================ */
.woocommerce .products,
.woocommerce-page .products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin: 0 0 1rem;
}

.woocommerce .woocommerce-ordering select {
	background: var(--surface);
	color: inherit;
	border: 1px solid var(--line);
	padding: 0.5rem 0.8rem;
	border-radius: 10px;
}

/* ============================================================
   Single product page (lightweight — design is storefront-driven)
   ============================================================ */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 2rem;
	margin-top: 1.5rem;
}

@media (max-width: 900px) {
	.single-product div.product {
		grid-template-columns: 1fr;
	}
}

.single-product .product_title {
	font-family: var(--font-main);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	margin: 0 0 0.6rem;
}

.single-product .price {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--text);
}

.single-product .woocommerce-product-details__short-description {
	color: var(--text-soft);
	margin: 1rem 0;
}

.single-product button.single_add_to_cart_button {
	background: var(--red, #e61e25);
	color: #fff;
	border: none;
	padding: 0.9rem 1.4rem;
	border-radius: 12px;
	font-weight: 700;
	cursor: pointer;
}

.single-product button.single_add_to_cart_button:hover {
	background: var(--red-2, #ff2a2a);
}

/* ============================================================
   Cart / checkout minimal
   ============================================================ */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
	width: min(1100px, calc(100% - 32px));
	margin: 1.5rem auto 3rem;
}

.woocommerce table.shop_table {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.85rem 1rem;
	border-color: var(--line);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--red, #e61e25);
	color: #fff;
	border-radius: 10px;
	padding: 0.7rem 1.2rem;
	font-weight: 700;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--red-2, #ff2a2a);
	color: #fff;
}

.woocommerce form .form-row label {
	font-weight: 600;
}

/* ============================================================
   Dokan vendor store page light adjustments
   ============================================================ */
.dokan-store-wrap .products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.1rem;
}

.dokan-store-wrap .products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* ============================================================
   Hide WC default chrome we replace
   ============================================================ */
.woocommerce .woocommerce-breadcrumb {
	display: none;
}

.woocommerce .woocommerce-notices-wrapper {
	margin-top: 1rem;
}

/* ============================================================
   H3: Footer socials links (template uses <a><span>)
   ============================================================ */
.socials a {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	color: var(--footer-text);
	font-size: 0.64rem;
	font-weight: 900;
	text-decoration: none;
	border: 1px solid var(--bottom-line);
	border-radius: 0.65rem;
	background: var(--bottom-chip-bg);
	transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.socials a:hover {
	color: var(--red, #e61e25);
	border-color: var(--red, #e61e25);
}

.socials a span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

/* ============================================================
   H4: Footer legal nav (container is now <nav>)
   ============================================================ */
.footer-bottom .footer-legal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.footer-bottom .footer-legal-nav ul,
.footer-bottom .footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-bottom .footer-legal-nav a {
	color: inherit;
	text-decoration: none;
}

.footer-bottom .footer-legal-nav a:hover {
	color: var(--red, #e61e25);
}

/* ============================================================
   M8: Neutralize Storefront chrome that conflicts with our layout
   ============================================================ */
.storefront-header-section,
.storefront-breadcrumb,
.storefront-handheld-footer-bar,
.site-footer .storefront-footer-widgets,
.storefront-primary-navigation,
.storefront-secondary-navigation {
	display: none !important;
}

/* Hide Storefront's own site header/footer since we render our own */
.site-header,
.site-footer {
	display: none !important;
}

/* Neutralize Storefront's .col-full width container without hiding content */
.site-content .col-full,
.site-footer .col-full,
.hentry .col-full {
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

body.storefront,
body[class*="storefront"] {
	background: var(--bg, #ffffff);
}

.site-main {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.woocommerce .site-main,
.woocommerce-page .site-main {
	width: min(1500px, calc(100% - 32px));
	margin: 1.5rem auto;
	box-sizing: border-box;
}

/* Single product / cart / checkout content width */
.single-product .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
	width: min(1100px, calc(100% - 32px));
	margin: 1.5rem auto 3rem;
}

/* Ensure our marketplace-shell wraps the page cleanly */
body[class*="storefront"] #page,
body[class*="storefront"] .marketplace-shell {
	background: var(--bg, #ffffff);
}

/* Reset Storefront link/button colors to theme where needed */
.storefront-primary-navigation,
.storefront-secondary-navigation {
	display: none !important;
}

/* ============================================================
   WC form controls (dark-mode aware via var(--*))
   ============================================================ */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.woocommerce .input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce .input-text:focus {
	border-color: var(--red, #e61e25);
	box-shadow: 0 0 0 3px rgba(230, 30, 37, 0.14);
	outline: none;
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
	color: var(--muted);
}

.woocommerce form .form-row label,
.woocommerce form .form-row .optional,
.woocommerce form .form-row .required {
	color: var(--text-soft);
}

.woocommerce form .form-row .required {
	color: var(--red, #e61e25);
}

/* Select dropdown arrow — theme-aware (data URIs can't use CSS vars) */
.woocommerce select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	padding-right: 2.2rem;
}

:root[data-theme="dark"] .woocommerce select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a4b4c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Header search bar category <select> (not inside .woocommerce container) */
select.search-bar__category {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	padding-right: 1.8rem;
	cursor: pointer;
}

:root[data-theme="dark"] select.search-bar__category {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a4b4c7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* General form inputs outside WooCommerce (search, comments, etc.) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 10px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	border-color: var(--red, #e61e25);
	box-shadow: 0 0 0 3px rgba(230, 30, 37, 0.14);
	outline: none;
}

input::placeholder,
textarea::placeholder {
	color: var(--muted);
}

/* ============================================================
   WC notices (messages / info / errors)
   ============================================================ */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
	background: var(--surface);
	color: var(--text);
	border-top-color: var(--red, #e61e25);
	border-radius: 12px;
	box-shadow: var(--shadow-soft, none);
	padding: 1rem 1.2rem;
	margin: 0 0 1.2rem;
	list-style: none;
}

.woocommerce .woocommerce-error {
	border-top-color: #e2401c;
}

.woocommerce .woocommerce-info {
	border-top-color: var(--red, #e61e25);
}

.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-error a {
	color: var(--red, #e61e25);
	font-weight: 700;
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
	background: transparent;
	color: var(--red, #e61e25);
	border: 1px solid var(--red, #e61e25);
}

/* ============================================================
   Single product page: tabs, related, gallery, summary
   ============================================================ */
.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
	margin: 2rem 0 1rem;
	list-style: none;
}

.single-product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 10px 10px 0 0;
	padding: 0;
}

.single-product .woocommerce-tabs ul.tabs li.active {
	border-color: var(--red, #e61e25);
	background: var(--surface);
}

.single-product .woocommerce-tabs ul.tabs li a {
	color: var(--text-soft);
	padding: 0.7rem 1.1rem;
	display: inline-block;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--text);
}

.single-product .woocommerce-tabs .panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 0 14px 14px 14px;
	padding: 1.4rem;
	margin: 0 0 2rem;
	color: var(--text-soft);
}

.single-product .related > h2,
.single-product .upsells > h2 {
	font-family: var(--font-main);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	margin: 2rem 0 1rem;
	color: var(--text);
}

.single-product .product_meta,
.single-product .product_meta a,
.single-product .sku_wrapper,
.single-product .posted_in {
	color: var(--muted);
	font-size: 0.85rem;
}

.single-product .product_meta a:hover {
	color: var(--red, #e61e25);
}

/* Star ratings */
.woocommerce .star-rating,
.woocommerce p.stars,
.woocommerce p.stars a {
	color: #f5a623;
}

.woocommerce .comment-form-rating .stars a {
	color: #f5a623;
}

/* Quantity input */
.woocommerce .quantity .qty {
	width: 4rem;
	text-align: center;
}

/* Product gallery thumbnails */
.single-product .flex-control-thumbs li {
	margin: 0.4rem;
}

.single-product .flex-control-thumbs img {
	border-radius: 10px;
	border: 1px solid var(--line);
}

.single-product .flex-control-thumbs img.flex-active {
	border-color: var(--red, #e61e25);
}

/* ============================================================
   Cart / checkout specifics
   ============================================================ */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
	color: var(--text);
	font-family: var(--font-main);
}

.woocommerce-cart .cart_totals .shop_table,
.woocommerce-checkout .shop_table {
	margin-bottom: 1.2rem;
}

.woocommerce-cart .coupon .button,
.woocommerce-cart .cart_totals .button,
.woocommerce-checkout .button {
	width: auto;
}

.woocommerce-cart .product-thumbnail img {
	border-radius: 10px;
}

.woocommerce-cart .product-name a,
.woocommerce-cart .product-subtotal,
.woocommerce-cart .product-total {
	color: var(--text);
}

.woocommerce-cart .cart_item td,
.woocommerce-cart .cart_item th {
	color: var(--text-soft);
}

.woocommerce-cart .product-remove a {
	color: var(--muted) !important;
}

.woocommerce-cart .product-remove a:hover {
	color: var(--red, #e61e25) !important;
}

/* Checkout order review */
.woocommerce-checkout #order_review_heading {
	color: var(--text);
}

/* ============================================================
   My account page
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation ul,
.woocommerce-account .woocommerce-MyAccount-navigation li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.5rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 0.6rem 1rem;
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--text-soft);
	background: var(--surface);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--red, #e61e25);
	color: #fff;
	border-color: var(--red, #e61e25);
}

.woocommerce-account .woocommerce-MyAccount-content {
	color: var(--text-soft);
}

.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--red, #e61e25);
}

.woocommerce-account table.my_account_orders .button {
	background: transparent;
	color: var(--red, #e61e25);
	border: 1px solid var(--red, #e61e25);
}

/* ============================================================
   Pagination (WC + WP)
   ============================================================ */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul li {
	border: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 2rem 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
nav.woocommerce-pagination a,
nav.woocommerce-pagination span {
	display: inline-grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.6rem;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--text-soft);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination a:hover {
	border-color: var(--red, #e61e25);
	color: var(--red, #e61e25);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination .current {
	background: var(--red, #e61e25);
	color: #fff;
	border-color: var(--red, #e61e25);
}

/* ============================================================
   WC price filter widget / layered nav (sidebar) — keep dark-aware
   ============================================================ */
.woocommerce .widget_price_filter .price_slider_wrapper .price_slider,
.woocommerce .widget_layered_nav ul li a,
.woocommerce .widget_product_categories ul li a {
	color: var(--text-soft);
}

.woocommerce .widget_price_filter .price_slider_amount .button {
	background: var(--red, #e61e25);
	color: #fff;
}

/* ============================================================
   No-products / empty states
   ============================================================ */
.no-products,
.woocommerce .woocommerce-info.empty,
p.no-products {
	color: var(--muted);
	padding: 1.5rem;
	border: 1px dashed var(--line);
	border-radius: 14px;
	text-align: center;
	background: var(--surface-2);
}

/* ============================================================
   Quick-view & wishlist plugin glue (YITH)
   ============================================================ */
.yith-wcwl-add-to-wishlist .yith-wcwl-add-button a,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a {
	color: var(--text);
}

#yith-wcwl-popup-message {
	background: var(--surface) !important;
	color: var(--text) !important;
	border: 1px solid var(--line) !important;
	border-radius: 12px !important;
}

/* ============================================================
   Pro polish: focus-visible, selection, scrollbar, theme switch
   ============================================================ */

/* Keyboard focus ring — visible in both themes, never on mouse click */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--red, #e61e25);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Text selection */
::selection {
	background: rgba(230, 30, 37, 0.22);
	color: var(--text);
}

/* Custom scrollbars (WebKit + Firefox) — adapt to theme */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--muted);
	background-clip: padding-box;
	border: 2px solid transparent;
}

/* Smooth transition when toggelling between light & dark.
   Scoped to a curated set of properties to avoid layout jank. */
body,
.marketplace-shell,
.top-strip,
.market-header,
.secondary-nav,
.hero,
.features,
.categories,
.product-showcase,
.promo-grid,
.seller-ambassador,
.advantages,
.brands,
.metrics,
.micro-trust,
.market-footer,
.product-card,
.category-card,
.promo-card,
.recruit-card,
.feature-card,
.search-bar,
.mobile-drawer__panel,
.woocommerce table.shop_table,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.single-product .woocommerce-tabs .panel {
	transition:
		background-color 280ms ease,
		border-color 280ms ease,
		color 280ms ease,
		box-shadow 280ms ease;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	body,
	.marketplace-shell,
	.top-strip,
	.market-header,
	.secondary-nav,
	.hero,
	.features,
	.categories,
	.product-showcase,
	.promo-grid,
	.seller-ambassador,
	.advantages,
	.brands,
	.metrics,
	.micro-trust,
	.market-footer,
	.product-card,
	.category-card,
	.promo-card,
	.recruit-card,
	.feature-card,
	.search-bar,
	.mobile-drawer__panel,
	.woocommerce table.shop_table,
	.woocommerce .woocommerce-message,
	.woocommerce .woocommerce-info,
	.woocommerce .woocommerce-error,
	.single-product .woocommerce-tabs .panel {
		transition: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* Ensure the theme toggle button itself is keyboard-accessible & visible */
.theme-toggle:focus-visible,
.mobile-theme-toggle:focus-visible {
	outline: 2px solid var(--red, #e61e25);
	outline-offset: 3px;
}