/* ============================================================
   Single Product — matches single-product.html exactly
   ============================================================ */
body.single-product {
	background-color: #f0f9ff;
	background-image: radial-gradient(#bae6fd 1px, transparent 1px);
	background-size: 20px 20px;
}
.mehedi-single-wrap { min-height: 60vh; }
.mehedi-single-wrap, .mehedi-single-wrap * { box-sizing: border-box; }

/* Primitives */
.hard-shadow { box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1); }
.hard-border  { border: 2px solid #000; }

.sp-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* Image placeholder */
.sp-img-placeholder { background: #0ea5e9; }
.sp-sale-flash {
	display: inline-block; margin-top: .75rem; padding: .25rem .6rem;
	background: #1d4ed8; color: #fff;
	font-size: .65rem; font-weight: 900; text-transform: uppercase;
	letter-spacing: .1em; border: 2px solid #000;
}

/* Gallery */
.mehedi-product-gallery-panel .woocommerce-product-gallery {
	width: 100% !important; margin: 0 !important; opacity: 1 !important; float: none !important;
}
.mehedi-product-gallery-panel .woocommerce-product-gallery__wrapper,
.mehedi-product-gallery-panel .woocommerce-product-gallery__image { width: 100%; margin: 0 !important; }
.mehedi-product-gallery-panel .woocommerce-product-gallery__image a,
.mehedi-product-gallery-panel .woocommerce-product-gallery__image img {
	display: block; width: 100% !important; height: auto !important;
	border: 2px solid #000 !important; box-shadow: 4px 4px 0 0 #000 !important;
	border-radius: 0 !important; background: #0ea5e9;
}
.mehedi-product-gallery-panel .flex-control-thumbs {
	display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 10px; margin: 16px 0 0; padding: 0 !important;
	list-style: none !important; float: none !important; width: 100% !important;
}
.mehedi-product-gallery-panel .flex-control-thumbs li {
	list-style: none !important; width: auto !important; margin: 0 !important; float: none !important;
}
.mehedi-product-gallery-panel .flex-control-thumbs li img {
	border: 2px solid #000 !important; box-shadow: 2px 2px 0 0 #000 !important;
	opacity: .7; transition: opacity .15s; cursor: pointer; width: 100% !important;
}
.mehedi-product-gallery-panel .flex-control-thumbs li img.flex-active,
.mehedi-product-gallery-panel .flex-control-thumbs li img:hover { opacity: 1; }
.mehedi-product-gallery-panel .woocommerce-product-gallery__trigger { display: none !important; }

/* Guidelines box */
.sp-guidelines-box { background: #fff; padding: 1.5rem; border: 2px solid #000; box-shadow: 4px 4px 0 0 #000; }
.sp-guidelines-header { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.sp-info-icon { color: #1d4ed8; flex-shrink: 0; }
.sp-guidelines-title {
	font-family: 'Anton', sans-serif; font-size: 1.125rem;
	text-transform: uppercase; letter-spacing: -.02em; margin: 0;
}
.sp-guidelines-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: .75rem; }
.sp-guideline-item { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; font-weight: 500; }
.sp-dot { margin-top: .375rem; width: 6px; height: 6px; background: #1d4ed8; flex-shrink: 0; }
.sp-guidelines-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.1); display: flex; gap: 1rem; }
.sp-link-btn { font-size: .65rem; font-weight: 900; text-transform: uppercase; text-decoration: underline; color: #000; transition: color .15s; }
.sp-link-btn:hover { color: #1d4ed8; }

/* Config panel */
.sp-config-panel { background: #fff; padding: 2rem; border: 2px solid #000; box-shadow: 4px 4px 0 0 #000; }
@media (max-width: 1023px) { .sp-config-panel { padding: 1.5rem; } }
@media (max-width: 639px)  { .sp-config-panel { padding: 1.25rem; } }

/* Header */
.sp-config-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.sp-badge-wrap { margin-bottom: .5rem; }
.sp-fast-badge { display: inline-block; background: #0ea5e9; color: #fff; padding: .25rem .5rem; font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; border: 2px solid #000; }
.sp-product-title { font-family: 'Anton', sans-serif !important; font-size: clamp(2rem, 5vw, 3rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; text-transform: uppercase !important; margin: 0 0 .25rem !important; color: #000 !important; }
.sp-short-desc { color: #6b7280; font-weight: 700; }
.sp-short-desc p { margin: 0; }
.sp-price-wrap { text-align: right; }
.sp-price-label { font-size: .65rem; font-weight: 900; text-transform: uppercase; color: #9ca3af; margin: 0 0 .25rem; }
.sp-price-display { font-family: 'Anton', sans-serif; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; color: #1d4ed8; letter-spacing: -.04em; line-height: 1; }
.sp-price-display .price, .sp-price-display .amount { font-family: inherit !important; font-size: inherit !important; color: #1d4ed8 !important; }
.sp-price-display del .amount { color: #9ca3af !important; }
.sp-price-display ins { background: transparent; text-decoration: none; }
.sp-divider { border: 0; border-top: 2px solid #000; margin: 1.5rem 0 1rem; }

/* ============================================================
   Option rows (native WooCommerce variation dropdowns)
   ============================================================ */
.sp-order-form.cart {
	display: block;
	margin: 0;
}
.sp-options-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 2rem;
}
@media (min-width: 768px) { .sp-options-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.sp-option-group { display: flex; flex-direction: column; gap: .75rem; }
.sp-option-label {
	display: block; font-size: .75rem; font-weight: 900;
	text-transform: uppercase; letter-spacing: .1em; color: #000;
}

/*
 * WooCommerce's variation form restyled as brutalist option rows.
 * The native <table class="variations"> markup is kept intact (so
 * wc-add-to-cart-variation.js keeps finding the selects) and only laid out as a
 * grid of option groups.
 */
.sp-order-form.variations_form table.variations,
.sp-order-form cart table.variations {
	display: block !important;
	border: 0 !important;
	width: 100% !important;
	margin: 0 0 2rem !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	text-align: left;
}
.sp-order-form table.variations > tbody {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1.5rem !important;
	vertical-align: top;
}
@media (min-width: 768px) {
	.sp-order-form table.variations > tbody {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}
.sp-order-form table.variations tr.sp-option-group {
	display: flex !important;
	flex-direction: column;
	gap: .75rem;
	border: 0 !important;
}
.sp-order-form table.variations td {
	display: block !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	width: auto !important;
}
.sp-order-form table.variations td.label,
.sp-order-form table.variations td.value { padding: 0 !important; }

/* Native WooCommerce variation dropdown */
.sp-order-form table.variations select,
.sp-order-form select.sp-variation-dropdown {
	width: 100% !important;
	min-height: 52px;
	padding: .75rem 1rem !important;
	background: #fff !important;
	border: 2px solid #000 !important;
	border-radius: 0 !important;
	box-shadow: 4px 4px 0 0 #000 !important;
	font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
	font-size: .875rem !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #000 !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px !important;
	padding-right: 42px !important;
	transition: box-shadow .15s ease, transform .1s ease, background-color .15s;
	height: 52px !important;
	line-height: 1.2 !important;
}
.sp-order-form table.variations select:hover,
.sp-order-form select.sp-variation-dropdown:hover { background-color: #f0f9ff !important; }
.sp-order-form table.variations select:focus,
.sp-order-form select.sp-variation-dropdown:focus {
	outline: none;
	background-color: #fff !important;
	box-shadow: 2px 2px 0 0 #000 !important;
	transform: translate(2px, 2px);
}
.sp-order-form table.variations select option,
.sp-order-form select.sp-variation-dropdown option {
	background: #fff;
	color: #000;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .875rem;
}

/* Clear selection link */
.sp-order-form .sp-reset-link,
.sp-order-form a.reset_variations {
	display: inline-block;
	margin-top: .5rem;
	font-size: .65rem;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: underline;
	color: #000;
}
.sp-order-form .sp-reset-link:hover,
.sp-order-form a.reset_variations:hover { color: #1d4ed8; }

/* ============================================================
   Quantity stepper
   ============================================================ */
.sp-qty-wrap { display: flex; align-items: center; align-items: stretch; }
.sp-qty-btn {
	width: 52px; min-width: 52px; height: 52px;
	border: 2px solid #000; background: #fff;
	font-size: 1.375rem; font-weight: 900; line-height: 1; color: #000;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; transition: background .15s, transform .1s;
}
.sp-qty-btn:hover { background: #f0f9ff; }
.sp-qty-btn:active { transform: translateY(2px); }
.sp-qty-input {
	width: 6rem; min-width: 6rem; height: 52px;
	border: 2px solid #000; border-left: 0; border-right: 0;
	text-align: center;
	font-family: 'Anton', sans-serif;
	font-size: 1.125rem;
	background: #fff; color: #000;
	-moz-appearance: textfield;
	border-radius: 0;
	padding: 0;
}
.sp-qty-input::-webkit-outer-spin-button,
.sp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-qty-input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px #1d4ed8; }
.sp-qty-hint { font-size: .65rem; font-weight: 900; text-transform: uppercase; color: #9ca3af; margin: 0; }

/* Hide WooCommerce's own duplicate quantity input inside the hidden wrap */
.single_variation_wrap.sp-visually-hidden .quantity,
.single_variation_wrap.sp-visually-hidden .variations_button,
.single_variation_wrap.sp-visually-hidden .woocommerce-variation-add-to-cart { display: none !important; }

/* ============================================================
   Design file upload
   ============================================================ */
.sp-upload-zone {
	position: relative; border: 2px dashed #000; padding: 2.5rem 1.5rem;
	text-align: center; background: #e0f2fe;
	display: flex; flex-direction: column; align-items: center; gap: .75rem;
	cursor: pointer; transition: background .2s, border-color .2s;
}
.sp-upload-zone:hover { background: #fff; border-color: #1d4ed8; }
.sp-upload-zone.drag-over { background: #dbeafe; border-color: #1d4ed8; }
.sp-upload-icon-wrap {
	width: 48px; height: 48px; background: #fff; border: 2px solid #000;
	box-shadow: 4px 4px 0 0 #000; display: flex; align-items: center;
	justify-content: center; transition: transform .2s;
}
.sp-upload-zone:hover .sp-upload-icon-wrap { transform: scale(1.1); }
.sp-upload-main { font-size: .875rem; font-weight: 900; text-transform: uppercase; margin: 0; }
.sp-upload-browse { color: #2563eb; text-decoration: underline; }
.sp-upload-hint { font-size: .65rem; font-weight: 700; color: #9ca3af; margin: .25rem 0 0; }
.sp-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sp-file-status { display: flex; align-items: center; gap: .5rem; font-size: .65rem; font-weight: 700; color: #9ca3af; word-break: break-word; }
.sp-file-dot { width: 8px; height: 8px; border-radius: 50%; background: #bfdbfe; flex-shrink: 0; transition: background .2s; }
.sp-file-dot.ready { background: #22c55e; }

/* ============================================================
   Price + actions
   ============================================================ */
.sp-actions-block { padding-top: 2rem; border-top: 2px solid #000; margin-top: 1rem; }
.sp-order-total {
	display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.5rem;
	flex-wrap: wrap; row-gap: .25rem;
}
.sp-total-label { font-size: .75rem; font-weight: 900; text-transform: uppercase; color: #9ca3af; }
.sp-total-price,
.sp-order-total .sp-total-price {
	font-family: 'Anton', sans-serif !important;
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 900; color: #1e3a8a; letter-spacing: -.04em; line-height: 1;
}
.sp-total-price .price,
.sp-total-price .amount,
.sp-total-price .woocommerce-Price-amount { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.sp-total-price del { color: #9ca3af; }
.sp-total-price del .amount { color: #9ca3af !important; text-decoration: line-through; }
.sp-total-price ins { background: transparent; text-decoration: none; padding: 0; }

.sp-availability { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.sp-availability .stock { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; margin: 0; display: inline-block; }
.sp-availability .stock.in-stock,
.sp-availability .in-stock { color: #15803d; }
.sp-availability .stock.out-of-stock,
.sp-availability .out-of-stock { color: #b91c1c; }

.sp-cta-row { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
@media (min-width: 640px) { .sp-cta-row { flex-direction: row; align-items: center; } }

.sp-add-to-cart {
	flex: 1 1 auto; min-height: 56px; padding: 0 2rem !important;
	background: #fff !important; border: 2px solid #000 !important;
	box-shadow: 4px 4px 0 0 #000 !important; border-radius: 0 !important;
	font-family: 'Anton', sans-serif !important; font-size: 1rem !important;
	text-transform: uppercase !important; letter-spacing: .05em !important;
	color: #000 !important; cursor: pointer; transition: transform .1s ease, box-shadow .1s ease;
	display: flex; align-items: center; justify-content: center; text-align: center;
	line-height: 1.2 !important;
}
.sp-add-to-cart:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 0 #000 !important; }
.sp-add-to-cart:active { transform: translateY(0); box-shadow: 0 0 0 0 #000 !important; }
.sp-add-to-cart.disabled,
.sp-add-to-cart.wc-variation-selection-needed {
	opacity: .5; cursor: not-allowed; pointer-events: none;
	box-shadow: 4px 4px 0 0 #000 !important;
}

.sp-express-checkout {
	display: flex; align-items: center; justify-content: center; gap: .75rem;
	flex: 0 0 auto;
	min-height: 56px; padding: 0 2.5rem;
	background: #1d4ed8;
	color: #fff; border: 2px solid #000; box-shadow: 4px 4px 0 0 #000;
	font-family: 'Anton', sans-serif; font-size: 1rem;
	text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
	cursor: pointer;
	transition: transform .1s ease, opacity .2s;
}
.sp-express-checkout:hover { opacity: .9; transform: translateY(-2px); }
.sp-express-checkout:active { transform: translateY(0); }
.sp-express-checkout.disabled,
.sp-express-checkout.wc-variation-selection-needed,
.sp-express-checkout:disabled {
	opacity: .5; cursor: not-allowed; pointer-events: none;
	box-shadow: 4px 4px 0 0 #000 !important;
}

.sp-add-to-cart.sp-btn-success {
	background: #22c55e !important;
	color: #fff !important;
	border-color: #000 !important;
}

@keyframes spFieldShake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}
.sp-field-shake {
	animation: spFieldShake 0.4s ease-in-out;
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 2px #dc2626 !important;
}

/* Trust badges */
.sp-trust-row {
	margin-top: 2rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(0,0,0,.08);
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: center; gap: 1.5rem;
}
@media (min-width: 640px) { .sp-trust-row { justify-content: flex-end; } }
.sp-trust-badge { display: flex; align-items: center; gap: .5rem; opacity: .6; }
.sp-trust-badge span { font-size: .65rem; font-weight: 900; text-transform: uppercase; }

/* ============================================================
   After summary: tabs + related
   ============================================================ */
.mehedi-product-after-summary { width: 100%; overflow: hidden; }
.mehedi-product-after-summary .woocommerce-tabs ul.tabs { display: flex !important; flex-wrap: wrap; gap: 12px; padding: 0 !important; margin: 0 0 24px !important; list-style: none !important; border: none !important; }
.mehedi-product-after-summary .woocommerce-tabs ul.tabs li { background: none !important; border: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.mehedi-product-after-summary .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 10px 18px !important; border: 2px solid #000 !important; box-shadow: 2px 2px 0 0 #000 !important; font-family: 'Anton', sans-serif !important; text-transform: uppercase !important; background: #fff !important; color: #000 !important; font-weight: 900 !important; font-size: 13px !important; text-decoration: none !important; }
.mehedi-product-after-summary .woocommerce-tabs ul.tabs li.active a { background: #1d4ed8 !important; color: #fff !important; }
.mehedi-product-after-summary .woocommerce-tabs .panel { background: #fff; border: 2px solid #000; box-shadow: 4px 4px 0 0 #000; padding: 24px; }
.mehedi-product-after-summary .woocommerce-tabs ul.tabs li::before, .mehedi-product-after-summary .woocommerce-tabs ul.tabs li::after { display: none !important; }

.mehedi-product-after-summary .related, .mehedi-product-after-summary .upsells { margin-top: 3rem; width: 100%; }
.mehedi-product-after-summary .related > h2, .mehedi-product-after-summary .upsells > h2 { font-family: 'Anton', sans-serif; font-size: clamp(1.75rem, 3vw, 2.25rem); text-transform: uppercase; letter-spacing: -.03em; margin-bottom: 1.5rem; color: #000; }
.mehedi-product-after-summary ul.products { display: grid !important; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 24px; padding: 0 !important; margin: 0 !important; list-style: none !important; }
@media (min-width: 768px)  { .mehedi-product-after-summary ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .mehedi-product-after-summary ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.mehedi-product-after-summary ul.products li.product { list-style: none !important; width: 100% !important; margin: 0 !important; padding: 24px !important; background: #fff; border: 2px solid #000; box-shadow: 4px 4px 0 0 #000; float: none !important; clear: none !important; transition: transform .15s ease; }
.mehedi-product-after-summary ul.products li.product:hover { transform: translateY(-4px); }
.mehedi-product-after-summary ul.products li.product a img { width: 100% !important; height: auto !important; border: 2px solid #000; box-shadow: 2px 2px 0 0 #000; margin-bottom: 12px; background: #e0f2fe; }
.mehedi-product-after-summary ul.products li.product .woocommerce-loop-product__title { font-family: 'Anton', sans-serif !important; font-size: 1.25rem !important; text-transform: uppercase !important; padding: 0 !important; margin: 8px 0 4px !important; color: #000; }
.mehedi-product-after-summary ul.products li.product .price { font-family: 'Anton', sans-serif !important; color: #1d4ed8 !important; font-size: 1.1rem !important; }
.mehedi-product-after-summary ul.products li.product .button { margin-top: 12px !important; display: inline-block !important; }

/* Notices */
.sp-config-panel .woocommerce-notices-wrapper .woocommerce-message,
.sp-config-panel .woocommerce-error {
	background: #fff; border: 2px solid #000; box-shadow: 4px 4px 0 0 #000;
	padding: 1rem 1.25rem; font-size: .8rem; font-weight: 800; margin-bottom: 1rem;
	list-style: none; color: #000;
}
.sp-config-panel .woocommerce-error { border-color: #b91c1c; }
