/* ============================================================
   SOLDIER APPAREL — WOOCOMMERCE STYLES
   Selaras dengan home design system (lihat soldier-home.css):
   - Product card: aspect-ratio 3/4, info panel border-top, hover gunmetal
   - Section pattern: section-label + section-title, ghost SOLDIER text
   - Button & swatches pakai clip-path angled + amber accent
   ============================================================ */

/* ============================================================
   WOO PAGE WRAPPER
   ============================================================ */

.soldier-woo-content {
	background: var(--sa-black);
	padding: 60px clamp(24px, 6vw, 96px) 100px;
	color: var(--sa-mist);
	position: relative;
	overflow: hidden;
}

.soldier-woo-content::before {
	content: 'SOLDIER';
	position: absolute;
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: 200px;
	color: rgba(255, 255, 255, 0.022);
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	letter-spacing: -0.05em;
	pointer-events: none;
	white-space: nowrap;
	z-index: 0;
}

.soldier-woo-wrapper {
	max-width: 1320px;
	margin: 0 auto;
	width: 100%;
	position: relative;
	z-index: 1;
}

/* Sembunyikan default Woo page title (kita pakai banner) */
.soldier-woo-content .woocommerce-products-header,
.soldier-woo-content .woocommerce-products-header__title,
.soldier-woo-content .woocommerce-breadcrumb {
	display: none;
}

/* ============================================================
   NOTICES (cart added, errors, info)
   ============================================================ */

.soldier-woo-content .woocommerce-message,
.soldier-woo-content .woocommerce-info,
.soldier-woo-content .woocommerce-error,
.soldier-woo-content .woocommerce-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	border-left: 3px solid var(--sa-amber);
	color: var(--sa-mist);
	padding: 16px 24px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	margin: 0 0 24px;
	list-style: none;
	border-radius: 0;
}

.woocommerce-error { border-left-color: var(--sa-red); }
.woocommerce-info  { border-left-color: var(--sa-olive); }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--sa-amber);
}

.woocommerce-message a.button,
.woocommerce-info a.button {
	background: transparent !important;
	color: var(--sa-amber) !important;
	border: 1px solid var(--sa-amber) !important;
	padding: 8px 18px !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 10px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	margin-right: 8px;
}

.woocommerce-message a.button:hover {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

/* ============================================================
   PRODUCT BREADCRUMB (single product)
   ============================================================ */

.soldier-product-breadcrumb {
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--sa-smoke);
	margin: 0 0 28px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.soldier-product-breadcrumb a {
	color: var(--sa-smoke) !important;
	text-decoration: none !important;
	transition: color 0.2s;
}

.soldier-product-breadcrumb a:hover {
	color: var(--sa-amber) !important;
}

.soldier-product-breadcrumb .sep {
	color: var(--sa-steel);
}

/* ============================================================
   SHOP TOOLBAR — result count + ordering dalam satu row
   ============================================================ */

.soldier-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	border-left: 3px solid var(--sa-amber);
	margin: 0 0 32px;
	flex-wrap: wrap;
}

.soldier-woo-content .woocommerce-result-count {
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sa-mist);
	margin: 0;
}

.soldier-woo-content .woocommerce-ordering {
	margin: 0;
}

.soldier-woo-content .woocommerce-ordering select {
	background: var(--sa-gunmetal);
	color: var(--sa-white);
	border: 1px solid var(--sa-steel);
	padding: 10px 36px 10px 14px;
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	margin: 0;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--sa-amber) 50%),
	                  linear-gradient(135deg, var(--sa-amber) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.soldier-woo-content .woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--sa-amber);
}

/* ============================================================
   PRODUCT LOOP / ARCHIVE GRID
   Match home featured-products grid: 4 cols, gap 2px tipis
   ============================================================ */

/* PENTING: target HANYA ul.products. Section `.related.products` &
   `.upsells.products` juga punya class .products (di section element),
   kalau pakai `.products` selektor saja, section ikut kena display:grid
   dan h2 + ul jadi grid items side-by-side. */
.soldier-woo-content ul.products {
	margin: 0 0 64px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

/* CRITICAL: WC default CSS punya `ul.products::before` & `::after` dengan
   `content: " "; display: table` (buat clear float layout lama). Saat
   ul.products kita ubah ke `display: grid`, dua pseudo itu otomatis jadi
   GRID ITEM — bikin slot kosong di kolom pertama (row 1) dan kolom terakhir
   (last row). Harus dimatikan supaya products mulai dari grid col 1. */
.soldier-woo-content ul.products::before,
.soldier-woo-content ul.products::after {
	content: none !important;
	display: none !important;
}

.soldier-woo-content ul.products li.product,
.soldier-woo-content ul.products .product,
.soldier-woo-content ul.products li.product.first,
.soldier-woo-content ul.products li.product.last {
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
	clear: none !important;
	grid-column: auto !important;
	grid-row: auto !important;
	list-style: none;
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0;
}

/* Amber accent line on top — appears on hover (matches home series-card behavior) */
.soldier-woo-content ul.products li.product::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--sa-amber);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
	z-index: 4;
}

.soldier-woo-content ul.products li.product:hover {
	border-color: var(--sa-olive);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}

.soldier-woo-content ul.products li.product:hover::before {
	transform: scaleX(1);
}

/* WC default ul.products.columns-* can force float layout — kill it.
   Soldier grid: 6 col desktop → 5 large laptop → 4 tablet → 3 mobile large → 2 phone. */
.soldier-woo-content ul.products.columns-1,
.soldier-woo-content ul.products.columns-2,
.soldier-woo-content ul.products.columns-3,
.soldier-woo-content ul.products.columns-4,
.soldier-woo-content ul.products.columns-5,
.soldier-woo-content ul.products.columns-6 {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 12px !important;
}

@media (max-width: 1280px) {
	.soldier-woo-content ul.products,
	.soldier-woo-content ul.products.columns-1,
	.soldier-woo-content ul.products.columns-2,
	.soldier-woo-content ul.products.columns-3,
	.soldier-woo-content ul.products.columns-4,
	.soldier-woo-content ul.products.columns-5,
	.soldier-woo-content ul.products.columns-6 {
		grid-template-columns: repeat(5, 1fr) !important;
	}
}

@media (max-width: 1024px) {
	.soldier-woo-content ul.products,
	.soldier-woo-content ul.products.columns-1,
	.soldier-woo-content ul.products.columns-2,
	.soldier-woo-content ul.products.columns-3,
	.soldier-woo-content ul.products.columns-4,
	.soldier-woo-content ul.products.columns-5,
	.soldier-woo-content ul.products.columns-6 {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 10px !important;
	}
}

@media (max-width: 768px) {
	.soldier-woo-content ul.products,
	.soldier-woo-content ul.products.columns-1,
	.soldier-woo-content ul.products.columns-2,
	.soldier-woo-content ul.products.columns-3,
	.soldier-woo-content ul.products.columns-4,
	.soldier-woo-content ul.products.columns-5,
	.soldier-woo-content ul.products.columns-6 {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 8px !important;
	}
}

@media (max-width: 480px) {
	.soldier-woo-content ul.products,
	.soldier-woo-content ul.products.columns-1,
	.soldier-woo-content ul.products.columns-2,
	.soldier-woo-content ul.products.columns-3,
	.soldier-woo-content ul.products.columns-4,
	.soldier-woo-content ul.products.columns-5,
	.soldier-woo-content ul.products.columns-6 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}
}

.soldier-woo-content ul.products li.product > a:first-of-type,
.soldier-woo-content ul.products li.product > a.woocommerce-LoopProduct-link {
	text-decoration: none !important;
	color: inherit;
	display: block;
	position: relative;
	overflow: hidden;
}

/* Product image — aspect ratio 3/4 (sama dengan home featured) */
.soldier-woo-content ul.products li.product a img,
.soldier-woo-content ul.products li.product img.attachment-woocommerce_thumbnail {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
	background: #1a1a1a;
}

.soldier-woo-content ul.products li.product:hover img {
	transform: scale(1.05);
}

/* Subtle gradient overlay di image (match home product-img-hover) */
.soldier-woo-content ul.products li.product > a::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 10, 0.55) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Sale badge (square + mono + amber) */
.soldier-woo-content ul.products li.product .onsale,
.soldier-woo-content span.onsale {
	background: var(--sa-amber);
	color: var(--sa-black);
	font-family: var(--sa-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: 0;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	top: 14px;
	left: 14px;
	right: auto;
	margin: 0;
	position: absolute;
	z-index: 3;
}

/* Series eyebrow — row container, chip kecil di dalam.
   Container kasih bg charcoal full-width buat continuity, chip span yang
   jadi visual tag pembeda kategori (border + padding tight). */
.soldier-woo-content ul.products li.product .soldier-loop-series {
	display: block;
	padding: 12px 14px 4px;
	margin: 0;
	background: var(--sa-charcoal);
	border-top: 1px solid var(--sa-steel);
	transition: background 0.3s ease;
	line-height: 1;
}

.soldier-woo-content ul.products li.product .soldier-loop-series-tag {
	display: inline-block;
	max-width: 100%;
	padding: 3px 7px;
	font-family: var(--sa-font-mono);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sa-olive-light);
	background: var(--sa-gunmetal);
	border: 1px solid var(--sa-steel);
	border-radius: 2px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all 0.3s ease;
	box-sizing: border-box;
	vertical-align: middle;
}

.soldier-woo-content ul.products li.product:hover .soldier-loop-series {
	background: var(--sa-gunmetal);
}

.soldier-woo-content ul.products li.product:hover .soldier-loop-series-tag {
	color: var(--sa-amber);
	border-color: var(--sa-amber);
	background: var(--sa-charcoal);
}

/* Title — clamp 2 baris dengan ellipsis "..." untuk konsistensi.
   Fixed max-height supaya semua card sama tinggi visual. */
.soldier-woo-content ul.products li.product .woocommerce-loop-product__title,
.soldier-woo-content ul.products li.product h2.woocommerce-loop-product__title,
.soldier-woo-content ul.products li.product h3 {
	font-family: var(--sa-font-display);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--sa-white);
	padding: 4px 14px 10px;
	margin: 0;
	display: -webkit-box;
	display: -moz-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--sa-charcoal);
	transition: background 0.3s ease;
	height: 50px;
	min-height: 50px;
	max-height: 50px;
	box-sizing: border-box;
	word-break: normal;
	overflow-wrap: break-word;
}

.soldier-woo-content ul.products li.product:hover .woocommerce-loop-product__title {
	background: var(--sa-gunmetal);
}

/* Price */
.soldier-woo-content ul.products li.product .price {
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--sa-amber) !important;
	padding: 0 18px 16px;
	margin: 0;
	display: block;
	background: var(--sa-charcoal);
	transition: background 0.3s;
}

.soldier-woo-content ul.products li.product:hover .price {
	background: var(--sa-gunmetal);
}

.soldier-woo-content ul.products li.product .price del {
	color: var(--sa-smoke);
	font-size: 14px;
	font-weight: 400;
	margin-right: 8px;
	opacity: 0.6;
}

.soldier-woo-content ul.products li.product .price ins {
	background: transparent;
	text-decoration: none;
	color: var(--sa-amber);
}

/* Star rating hidden (kita gak pakai rating system di archive) */
.soldier-woo-content ul.products li.product .star-rating {
	display: none;
}

/* Add to cart button — di info panel, full-width feel */
.soldier-woo-content ul.products li.product .button,
.soldier-woo-content ul.products li.product a.button.add_to_cart_button,
.soldier-woo-content ul.products li.product .added_to_cart {
	background: transparent;
	color: var(--sa-amber);
	border: 1px solid var(--sa-amber);
	font-family: var(--sa-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 11px 14px;
	margin: 0 18px 18px;
	border-radius: 0;
	display: block;
	text-align: center;
	text-decoration: none !important;
	transition: all 0.2s;
	line-height: 1;
}

.soldier-woo-content ul.products li.product .button:hover,
.soldier-woo-content ul.products li.product a.button.add_to_cart_button:hover {
	background: var(--sa-amber);
	color: var(--sa-black);
}

.soldier-woo-content ul.products li.product .added_to_cart {
	margin-top: -10px;
}

/* ============================================================
   PAGINATION
   Reset semua default WC + plugin styling (termasuk warna merah default).
   Tactical look: square buttons, mono font, amber accent on current/hover.
   ============================================================ */

.soldier-woo-content .woocommerce-pagination,
.soldier-woo-content nav.woocommerce-pagination {
	margin-top: 48px;
	text-align: center;
	clear: both;
	background: transparent !important;
	border: none !important;
}

.soldier-woo-content .woocommerce-pagination ul,
.soldier-woo-content .woocommerce-pagination ul.page-numbers,
.soldier-woo-content nav.woocommerce-pagination ul {
	border: none !important;
	display: inline-flex !important;
	gap: 6px;
	padding: 0 !important;
	margin: 0 !important;
	white-space: nowrap;
	background: transparent !important;
	list-style: none;
}

.soldier-woo-content .woocommerce-pagination ul li {
	border: none !important;
	margin: 0 !important;
	overflow: visible !important;
	padding: 0 !important;
	display: inline-block;
	background: transparent !important;
}

.soldier-woo-content .woocommerce-pagination ul li a,
.soldier-woo-content .woocommerce-pagination ul li span,
.soldier-woo-content .woocommerce-pagination ul li a.page-numbers,
.soldier-woo-content .woocommerce-pagination ul li span.page-numbers {
	background: var(--sa-charcoal) !important;
	color: var(--sa-mist) !important;
	border: 1px solid var(--sa-steel) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 12px !important;
	letter-spacing: 0.1em !important;
	font-weight: 600;
	padding: 0 !important;
	min-width: 42px;
	height: 42px;
	line-height: 40px !important;
	transition: all 0.2s ease;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	box-sizing: border-box;
	text-align: center;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.soldier-woo-content .woocommerce-pagination ul li a:hover,
.soldier-woo-content .woocommerce-pagination ul li a.page-numbers:hover {
	background: var(--sa-gunmetal) !important;
	color: var(--sa-amber) !important;
	border-color: var(--sa-amber) !important;
}

.soldier-woo-content .woocommerce-pagination ul li span.current,
.soldier-woo-content .woocommerce-pagination ul li span.page-numbers.current {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	border-color: var(--sa-amber) !important;
	font-weight: 700;
}

/* Prev/Next arrow — sedikit lebih lebar untuk visual balance */
.soldier-woo-content .woocommerce-pagination ul li a.prev,
.soldier-woo-content .woocommerce-pagination ul li a.next {
	min-width: 52px;
	font-size: 14px !important;
}

/* Dots/ellipsis (…) — non-clickable, gak perlu border */
.soldier-woo-content .woocommerce-pagination ul li span.dots,
.soldier-woo-content .woocommerce-pagination ul li span.page-numbers.dots {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--sa-smoke) !important;
}

/* ============================================================
   SINGLE PRODUCT
   Pakai struktur default Woo (float left/right), restyle visual.
   ============================================================ */

/* Single product layout — pakai CSS Grid 2 kolom × 2 baris supaya:
   Row 1 Col 1 = main image  |  Row 1-2 Col 2 = .summary (title, price, dll)
   Row 2 Col 1 = thumbnails (BELOW main image, horizontal scroll)
   Sebelumnya pakai float kiri/kanan tapi BSI thumbs sibling bikin .summary
   ke-push ke bawah. Grid solve karena setiap area independen. */
.soldier-woo-content div.product {
	color: var(--sa-mist);
	position: relative;
	z-index: 1;
	/* PAKAI FLEX bukan GRID — supaya .images dan .summary natural height
	   masing-masing (grid bikin row stretch ngikut summary yg tall →
	   empty space di bawah image). Dengan flex + align-items: flex-start,
	   tiap item natural height, no enforced equal-height row. */
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 40px !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
}

/* Gallery left — flex item col 1 (~50% width).
   Container .images jadi flex column buat stack gallery + bsi-thumbs
   vertically (BSI thumbs di-move ke dalam .images via JS). */
.soldier-woo-content div.product div.images {
	flex: 0 0 calc(50% - 20px) !important;
	max-width: calc(50% - 20px) !important;
	min-width: 0 !important;
	width: calc(50% - 20px) !important;
	float: none !important;
	margin-bottom: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
	overflow: visible !important;
	align-self: flex-start !important;
	height: auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}

/* Frame untuk product image — charcoal bg + amber accent line atas + corner brackets
   tactical. PENTING: height: auto + min-height: 0 supaya frame cuma setinggi
   image content (gak stretch ngikut row grid yg tall).
   Plus override FlexSlider inline height yg ditambahin pas init. */
.soldier-woo-content div.product div.images .woocommerce-product-gallery,
.soldier-woo-content div.product div.images .woocommerce-product-gallery[style*="height"] {
	position: relative !important;
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	padding: 12px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
}

/* Wrapper di dalam gallery — transparent passthrough.
   FORCE height auto + overflow visible buat KALAHKAN FlexSlider yg set
   inline style="height: XXXpx" pas init. Itu yg bikin container tall
   meskipun cuma 1 slide visible. */
.soldier-woo-content div.product div.images .woocommerce-product-gallery__wrapper,
.soldier-woo-content div.product div.images .flex-viewport,
.soldier-woo-content div.product .woocommerce-product-gallery .flex-viewport,
.soldier-woo-content div.product .woocommerce-product-gallery__wrapper {
	position: relative !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
}

/* Amber accent line di atas frame */
.soldier-woo-content div.product div.images .woocommerce-product-gallery::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--sa-amber);
	z-index: 5;
	pointer-events: none;
}

/* Tactical corner brackets (top-left & bottom-right) — frame industrial */
.soldier-woo-content div.product div.images .woocommerce-product-gallery::after {
	content: '';
	position: absolute;
	bottom: -2px; right: -2px;
	width: 24px; height: 24px;
	border-bottom: 3px solid var(--sa-amber);
	border-right: 3px solid var(--sa-amber);
	pointer-events: none;
	z-index: 5;
}

.soldier-woo-content div.product div.images .woocommerce-product-gallery__wrapper::before {
	content: '';
	position: absolute;
	top: -2px; left: -2px;
	width: 24px; height: 24px;
	border-top: 3px solid var(--sa-amber);
	border-left: 3px solid var(--sa-amber);
	pointer-events: none;
	z-index: 5;
}

/* ===== GALLERY SLIDE VISIBILITY — bypass FlexSlider =====
   Approach: hide SEMUA slide by default. JS toggles class .soldier-slide-active
   ke slide yg mau visible. Reliable regardless of FlexSlider state. */
.soldier-woo-content div.product div.images .woocommerce-product-gallery__image {
	background: var(--sa-charcoal) !important;
	overflow: visible !important;
	aspect-ratio: auto !important;
	position: relative !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: none !important;
	left: auto !important;
	top: auto !important;
	z-index: auto !important;
	transform: none !important;
}

/* Visible: hanya yang punya class .soldier-slide-active (set by JS) */
.soldier-woo-content div.product div.images .woocommerce-product-gallery__image.soldier-slide-active {
	display: block !important;
}

/* Fallback: kalau JS belum jalan, show first child supaya ada gambar */
.soldier-woo-content div.product div.images .woocommerce-product-gallery__wrapper:not(.soldier-gallery-init) > .woocommerce-product-gallery__image:first-child {
	display: block !important;
}

/* Main gallery IMAGE — natural ratio, no force aspect, no max-height clip */
.soldier-woo-content div.product div.images .woocommerce-product-gallery__image img,
.soldier-woo-content div.product div.images .woocommerce-product-gallery__image > a > img,
.soldier-woo-content div.product div.images .woocommerce-product-gallery__wrapper > div > img,
.soldier-woo-content div.product div.images .woocommerce-product-gallery__wrapper > div > a > img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	border: none !important;
	background: transparent !important;
	position: relative !important;
	z-index: 1 !important;
	margin: 0 auto !important;
}

/* duplicate selector removed — wrapper rules sudah di-define di atas */

/* BSI thumbnails — sekarang flex item dalam .images (di-move by JS).
   Posisi natural di bawah gallery (flex column). */
.soldier-woo-content div.product .flex-control-thumbs,
.soldier-woo-content div.product ol.flex-control-thumbs,
.soldier-woo-content div.product .bsi-thumbs,
.soldier-woo-content div.product ol.bsi-thumbs {
	grid-column: auto !important;
	grid-row: auto !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 14px 0 24px !important;
	list-style: none !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	gap: 8px !important;
	box-sizing: border-box !important;
	scrollbar-width: thin;
	scrollbar-color: var(--sa-amber) var(--sa-charcoal);
	float: none !important;
	clear: none !important;
}

/* Custom scrollbar tactical (webkit) */
.soldier-woo-content div.product .flex-control-thumbs::-webkit-scrollbar,
.soldier-woo-content div.product .bsi-thumbs::-webkit-scrollbar {
	height: 6px;
}
.soldier-woo-content div.product .flex-control-thumbs::-webkit-scrollbar-track,
.soldier-woo-content div.product .bsi-thumbs::-webkit-scrollbar-track {
	background: var(--sa-charcoal);
}
.soldier-woo-content div.product .flex-control-thumbs::-webkit-scrollbar-thumb,
.soldier-woo-content div.product .bsi-thumbs::-webkit-scrollbar-thumb {
	background: var(--sa-amber);
	border-radius: 0;
}

.soldier-woo-content div.product .flex-control-thumbs li,
.soldier-woo-content div.product .bsi-thumbs li {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
	height: 80px !important;
	min-height: 80px !important;
	max-height: 80px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	list-style: none !important;
	flex: 0 0 80px !important;
	aspect-ratio: 1 / 1;
}

/* IMG dalam thumbnail — override inline style BSI JS (width:60px height:60px
   border-radius:4px) dengan !important */
.soldier-woo-content div.product .flex-control-thumbs img,
.soldier-woo-content div.product .bsi-thumbs img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	object-fit: cover !important;
	border: 1px solid var(--sa-steel) !important;
	background: var(--sa-charcoal) !important;
	padding: 4px !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	opacity: 0.5 !important;
	border-radius: 0 !important;
	transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

.soldier-woo-content div.product .flex-control-thumbs img:hover,
.soldier-woo-content div.product .bsi-thumbs img:hover {
	opacity: 1 !important;
	border-color: var(--sa-amber) !important;
	transform: scale(1.03);
}

/* Active thumbnail — amber border tactical (BSI JS hardcode #f90 inline, override) */
.soldier-woo-content div.product .flex-control-thumbs img.flex-active,
.soldier-woo-content div.product .bsi-thumbs img.flex-active {
	opacity: 1 !important;
	border-color: var(--sa-amber) !important;
}

.soldier-woo-content div.product div.images .flex-control-thumbs img:hover,
.soldier-woo-content div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--sa-amber);
}

/* Zoom lightbox trigger */
.soldier-woo-content div.product .woocommerce-product-gallery__trigger {
	background: var(--sa-charcoal);
	color: var(--sa-amber) !important;
	border: 1px solid var(--sa-steel);
	border-radius: 0;
	width: 38px;
	height: 38px;
	line-height: 36px;
	text-align: center;
	top: 12px;
	right: 12px;
	text-decoration: none !important;
	font-size: 16px;
	transition: all 0.2s;
}

.soldier-woo-content div.product .woocommerce-product-gallery__trigger:hover {
	background: var(--sa-amber);
	color: var(--sa-black) !important;
	border-color: var(--sa-amber);
}

/* Summary right — flex item col 2 (~50% width), natural height.
   Dengan flex parent, summary natural height tidak akan mempengaruhi
   image height. Tiap kolom independent. */
.soldier-woo-content div.product div.summary,
.soldier-woo-content div.product .summary.entry-summary {
	flex: 0 0 calc(50% - 20px) !important;
	max-width: calc(50% - 20px) !important;
	width: calc(50% - 20px) !important;
	min-width: 0 !important;
	float: none !important;
	margin-bottom: 0 !important;
	clear: none !important;
	padding-left: 0 !important;
	box-sizing: border-box !important;
	align-self: flex-start !important;
	grid-column: auto !important;
	grid-row: auto !important;
}

/* Section LAIN di bawah summary (tabs description, related products, upsells,
   reviews, dll) — span FULL WIDTH semua kolom grid. Default grid auto-placement
   akan squeeze mereka ke kolom kiri/kanan, jadi explicit override. */
.soldier-woo-content div.product .woocommerce-tabs,
.soldier-woo-content div.product .related,
.soldier-woo-content div.product .related.products,
.soldier-woo-content div.product .upsells,
.soldier-woo-content div.product .upsells.products,
.soldier-woo-content div.product #reviews,
.soldier-woo-content div.product .clear {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	grid-column: auto !important;
	grid-row: auto !important;
}

/* Series eyebrow di atas product title — pakai categories list */
.soldier-woo-content div.product .summary .posted_in {
	font-family: var(--sa-font-mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--sa-amber);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	border: none;
	padding: 0;
}

.soldier-woo-content div.product .summary .posted_in::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--sa-amber);
}

.soldier-woo-content div.product .summary .posted_in a {
	color: var(--sa-amber) !important;
	text-decoration: none !important;
}

.soldier-woo-content div.product .summary .posted_in a:hover {
	color: var(--sa-white) !important;
}

/* Product title */
.soldier-woo-content div.product .summary .product_title {
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: clamp(26px, 2.8vw, 38px);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--sa-white);
	margin: 0 0 16px;
	line-height: 1.05;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sa-steel);
}

/* Price — dengan amber underline accent biar lebih premium */
.soldier-woo-content div.product p.price,
.soldier-woo-content div.product span.price,
.soldier-woo-content div.product .summary .price {
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 36px;
	color: var(--sa-amber) !important;
	margin: 0 0 24px;
	display: inline-block;
	line-height: 1;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--sa-amber);
}

.soldier-woo-content div.product p.price del,
.soldier-woo-content div.product span.price del {
	color: var(--sa-smoke);
	font-size: 22px;
	font-weight: 400;
	margin-right: 12px;
	opacity: 0.7;
}

.soldier-woo-content div.product p.price ins,
.soldier-woo-content div.product span.price ins {
	background: transparent;
	text-decoration: none;
	color: var(--sa-amber);
}

/* Rating */
.soldier-woo-content div.product .woocommerce-product-rating {
	margin-bottom: 18px;
	color: var(--sa-amber);
}

.soldier-woo-content div.product .star-rating {
	color: var(--sa-amber);
}

/* Short description */
.soldier-woo-content div.product .woocommerce-product-details__short-description {
	color: var(--sa-mist);
	font-size: 15px;
	line-height: 1.75;
	margin-bottom: 26px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--sa-steel);
	font-weight: 300;
}

.soldier-woo-content div.product .woocommerce-product-details__short-description p {
	margin: 0 0 0.8em;
}

.soldier-woo-content div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Variations table — bersih, no border */
.soldier-woo-content div.product form.cart .variations {
	border: none;
	margin: 0 0 20px;
	width: 100%;
}

.soldier-woo-content div.product form.cart .variations tr,
.soldier-woo-content div.product form.cart .variations tbody {
	background: transparent;
}

.soldier-woo-content div.product form.cart .variations th,
.soldier-woo-content div.product form.cart .variations td {
	padding: 8px 8px 12px 0;
	border: none;
	background: transparent;
	color: var(--sa-mist);
	vertical-align: middle;
}

.soldier-woo-content div.product form.cart .variations th.label {
	width: 110px;
	padding-right: 16px;
	vertical-align: middle !important;
}

.soldier-woo-content div.product form.cart .variations label {
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: var(--sa-mist) !important;
	margin: 0 !important;
	font-weight: 600 !important;
}

.soldier-woo-content div.product form.cart .variations select {
	background: var(--sa-charcoal);
	color: var(--sa-white);
	border: 1px solid var(--sa-steel);
	padding: 12px 36px 12px 14px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--sa-amber) 50%),
	                  linear-gradient(135deg, var(--sa-amber) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.soldier-woo-content div.product .reset_variations {
	font-family: var(--sa-font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sa-smoke) !important;
	display: inline-block;
	margin-top: 4px;
	text-decoration: none !important;
	transition: color 0.2s;
}

.soldier-woo-content div.product .reset_variations:hover {
	color: var(--sa-amber) !important;
}

/* Variation swatches (color & size buttons) */
.soldier-woo-content .variable-items-wrapper,
.soldier-woo-content ul.variable-items-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

.soldier-woo-content .variable-item,
.soldier-woo-content li.variable-item {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	color: var(--sa-mist) !important;
	padding: 9px 16px !important;
	border-radius: 0 !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	margin: 0 !important;
	min-width: 44px !important;
	min-height: auto !important;
	box-shadow: none !important;
	transition: all 0.2s !important;
}

.soldier-woo-content .variable-item:hover,
.soldier-woo-content li.variable-item:hover {
	border-color: var(--sa-amber) !important;
	color: var(--sa-amber) !important;
}

.soldier-woo-content .variable-item.selected,
.soldier-woo-content li.variable-item.selected,
.soldier-woo-content .variable-item[aria-checked="true"] {
	background: var(--sa-amber) !important;
	border-color: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

/* Color swatch */
.soldier-woo-content .variable-item.color-variable-item,
.soldier-woo-content li.variable-item.color-variable-item {
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	min-width: 38px !important;
	overflow: hidden;
}

.soldier-woo-content .variable-item-contents,
.soldier-woo-content .variable-item-span,
.soldier-woo-content .variable-item-span-color,
.soldier-woo-content .variable-item-span-image {
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	color: inherit !important;
}

/* Hide duplicate variation labels yang plugin inject */
.soldier-woo-content .variable-item-contents > span:not(.variable-item-span) {
	display: none;
}

/* ============================================================
   TOBER VARIATION SWATCHES — Custom plugin (tober-variation-swatches)
   Plugin gak punya CSS sendiri, default rendering kotak putih polos.
   Restyle ke tactical dark theme.
   ============================================================ */

/* Hide native <select> yang plugin biarkan visible (untuk fallback) */
.soldier-woo-content .tober-select-hidden,
.soldier-woo-content .tober-swatch-wrapper > .tober-select-hidden {
	display: none !important;
}

/* Wrapper utk daftar swatch */
.soldier-woo-content .tober-swatch-wrapper {
	width: 100%;
}

.soldier-woo-content .tober-swatch-list {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Setiap swatch item — square tactical button.
   Plugin inject inline <style> dengan background:#f5f5f5 + border:#ddd,
   pakai !important supaya override style inline plugin. */
.soldier-woo-content .tober-swatch-wrapper .tober-swatch__item,
.soldier-woo-content .tober-type-image .tober-swatch__item,
.soldier-woo-content .tober-type-text .tober-swatch__item {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 54px !important;
	height: 54px !important;
	min-width: 54px !important;
	min-height: 54px !important;
	padding: 0 !important;
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
	color: var(--sa-white) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	position: relative !important;
	box-sizing: border-box !important;
	outline: none !important;
	box-shadow: none !important;
	gap: 0 !important;
}

/* Label text di dalam swatch — make sure visible bright white */
.soldier-woo-content .tober-swatch__item .tober-swatch__label-text,
.soldier-woo-content .tober-type-text .tober-swatch__item .tober-swatch__label-text,
.soldier-woo-content .tober-swatch__item--text .tober-swatch__label-text {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	line-height: 1 !important;
	opacity: 1 !important;
}

/* Disabled swatch state (variant unavailable / not selectable yet) —
   plugin kasih .tober-swatch--disabled class. Subtle visual cue: opacity
   reduce + diagonal line steel (gak harsh red). */
.soldier-woo-content .tober-swatch__item.tober-swatch--disabled,
.soldier-woo-content .tober-swatch__item--disabled,
.soldier-woo-content .tober-type-text .tober-swatch__item.tober-swatch--disabled,
.soldier-woo-content .tober-type-image .tober-swatch__item.tober-swatch--disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	position: relative;
	background: transparent !important;
	border-color: var(--sa-steel) !important;
}

.soldier-woo-content .tober-swatch__item.tober-swatch--disabled::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 12%;
	right: 12%;
	height: 1px;
	background: var(--sa-smoke);
	transform: rotate(-30deg);
	z-index: 2;
	pointer-events: none;
}

.soldier-woo-content .tober-swatch__item.tober-swatch--disabled .tober-swatch__label-text {
	color: var(--sa-smoke) !important;
}

.soldier-woo-content .tober-swatch__item.tober-swatch--disabled:hover {
	background: transparent !important;
	border-color: var(--sa-steel) !important;
	color: var(--sa-smoke) !important;
}

.soldier-woo-content .tober-swatch-wrapper .tober-swatch__item:hover,
.soldier-woo-content .tober-type-image .tober-swatch__item:hover,
.soldier-woo-content .tober-type-text .tober-swatch__item:hover {
	border-color: var(--sa-amber) !important;
	background: var(--sa-gunmetal) !important;
	color: var(--sa-amber) !important;
}

.soldier-woo-content .tober-swatch__item.selected,
.soldier-woo-content .tober-swatch__item[aria-pressed="true"],
.soldier-woo-content .tober-swatch__item.is-selected,
.soldier-woo-content .tober-type-image .tober-swatch__item.selected,
.soldier-woo-content .tober-type-text .tober-swatch__item.selected {
	background: var(--sa-amber) !important;
	border-color: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

/* Inner img-wrap — override plugin yang kasih border 2px ddd + bg f5f5f5 */
.soldier-woo-content .tober-swatch-wrapper .tober-swatch__item .tober-swatch__img-wrap,
.soldier-woo-content .tober-type-image .tober-swatch__item .tober-swatch__img-wrap,
.soldier-woo-content .tober-type-text .tober-swatch__item .tober-swatch__img-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	min-width: auto !important;
	min-height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

.soldier-woo-content .tober-type-image .tober-swatch__item:hover:not(.tober-swatch--disabled) .tober-swatch__img-wrap,
.soldier-woo-content .tober-swatch__item:hover .tober-swatch__img-wrap {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Label text di dalam swatch (fallback kalau gak ada image) */
.soldier-woo-content .tober-swatch__item .tober-swatch__label-text {
	font-family: var(--sa-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
	line-height: 1;
}

/* Checkmark muncul saat selected */
.soldier-woo-content .tober-swatch__item .tober-swatch__check {
	display: none;
	position: absolute;
	top: 2px;
	right: 4px;
	font-size: 10px;
	color: var(--sa-black);
	font-weight: 900;
}

.soldier-woo-content .tober-swatch__item.selected .tober-swatch__check,
.soldier-woo-content .tober-swatch__item.is-selected .tober-swatch__check {
	display: block;
}

/* Hide redundant name yang plugin tampilkan di bawah (sudah ada di label) */
.soldier-woo-content .tober-swatch__item .tober-swatch__name {
	display: none;
}

/* Hide nested duplicate wrapper (plugin kadang inject double) */
.soldier-woo-content .tober-swatch-wrapper .tober-swatch-wrapper {
	all: unset;
	display: contents;
}

/* Quantity */
.soldier-woo-content div.product .quantity {
	margin-right: 12px;
	display: inline-block;
	vertical-align: middle;
}

.soldier-woo-content div.product .quantity .qty {
	background: var(--sa-charcoal);
	color: var(--sa-white);
	border: 1px solid var(--sa-steel);
	font-family: var(--sa-font-display);
	font-weight: 600;
	font-size: 16px;
	width: 80px;
	padding: 13px 8px;
	text-align: center;
	border-radius: 0;
}

.soldier-woo-content div.product .quantity .qty:focus {
	outline: none;
	border-color: var(--sa-amber);
}

/* ============================================================
   3 BUTTONS GROUP — Add to Cart, Beli Sekarang, Custom Order WhatsApp
   Konsisten: tactical clip-path angled, equal height, responsive layout.
   Hierarchy:
   - Tambah ke Keranjang = secondary (outline amber)
   - BELI SEKARANG       = primary (filled amber)
   - Custom Order WA     = alternate (green outline tactical)
   ============================================================ */

/* Wrapper buttons row → flex grid responsif */
.soldier-woo-content div.product form.cart {
	display: block;
}

/* Tambah ke Keranjang — SECONDARY outline amber */
.soldier-woo-content div.product form.cart .button,
.soldier-woo-content div.product form.cart button.single_add_to_cart_button,
body.single-product div.product form.cart button.single_add_to_cart_button,
body.single-product .product form.cart .button {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 14px 24px !important;
	border-radius: 0 !important;
	border: 2px solid var(--sa-amber) !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	text-shadow: none !important;
	box-shadow: none !important;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
	transition: all 0.2s ease;
	min-height: 50px;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	margin: 0;
}

.soldier-woo-content div.product form.cart .button:hover,
.soldier-woo-content div.product form.cart button.single_add_to_cart_button:hover,
body.single-product div.product form.cart button.single_add_to_cart_button:hover {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

/* BELI SEKARANG — PRIMARY filled amber */
.soldier-woo-content div.product .soldier-buy-now-button,
body.single-product .soldier-buy-now-button {
	background: var(--sa-amber) !important;
	background-color: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 14px 24px !important;
	border-radius: 0 !important;
	border: 2px solid var(--sa-amber) !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	text-shadow: none !important;
	box-shadow: none !important;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
	transition: all 0.2s ease;
	min-height: 50px;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}

.soldier-woo-content div.product .soldier-buy-now-button:hover,
body.single-product .soldier-buy-now-button:hover {
	background: var(--sa-black) !important;
	background-color: var(--sa-black) !important;
	color: var(--sa-amber) !important;
	border-color: var(--sa-amber) !important;
}

/* Layout — Buttons stack vertical di mobile, side-by-side desktop */
.soldier-woo-content div.product form.cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 12px;
}

.soldier-woo-content div.product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0 !important;
}

.soldier-woo-content div.product form.cart .variations,
.soldier-woo-content div.product form.cart .single_variation_wrap,
.soldier-woo-content div.product form.cart .woocommerce-variation,
.soldier-woo-content div.product form.cart .woocommerce-variation-add-to-cart {
	flex: 1 1 100% !important;
}

.soldier-woo-content div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px;
	align-items: stretch;
}

.soldier-woo-content div.product form.cart .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
}

.soldier-woo-content div.product form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
	flex: 1 1 200px !important;
}

.soldier-woo-content div.product form.cart .woocommerce-variation-add-to-cart .soldier-buy-now-button {
	flex: 1 1 200px !important;
}

/* WhatsApp inline CTA — TERTIARY button konsisten height dengan 2 button lain */
.soldier-wa-product-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: transparent;
	border: 2px solid #25d366;
	border-radius: 0;
	padding: 12px 20px;
	text-decoration: none !important;
	color: var(--sa-white) !important;
	margin: 12px 0 0;
	transition: all 0.2s ease;
	clear: both;
	flex: 1 1 100%;
	min-height: 50px;
	box-sizing: border-box;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.soldier-wa-product-cta:hover {
	background: #25d366;
	color: var(--sa-black) !important;
}

.soldier-wa-product-cta:hover .wa-icon {
	background: var(--sa-black);
	color: #25d366;
}

.soldier-wa-product-cta:hover .wa-text-sub {
	color: var(--sa-black) !important;
}

.soldier-wa-product-cta .wa-icon {
	width: 28px;
	height: 28px;
	background: #25d366;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.soldier-wa-product-cta .wa-icon svg {
	width: 16px;
	height: 16px;
}

.soldier-wa-product-cta .wa-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.soldier-wa-product-cta .wa-text-main {
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.soldier-wa-product-cta .wa-text-sub {
	font-family: var(--sa-font-mono);
	font-size: 9px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #25d366;
	margin-top: 2px;
	transition: color 0.2s;
}

/* Product meta — HIDE per user request (SKU/Kategori/Tag/Brand bikin clutter).
   PHP remove_action sudah di-pasang di functions.php tapi backup hide CSS
   in case Elementor Theme Builder render via path lain. */
.soldier-woo-content div.product .product_meta,
body.single-product .product_meta {
	display: none !important;
}

.soldier-woo-content div.product .product_meta_hidden_fallback {
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sa-smoke);
	padding-top: 22px;
	margin-top: 26px;
	border-top: 1px solid var(--sa-steel);
	clear: both;
	line-height: 1.4;
}

.soldier-woo-content div.product .product_meta > span {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
	padding-left: 18px;
	position: relative;
}

.soldier-woo-content div.product .product_meta > span::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 12px;
	height: 1px;
	background: var(--sa-amber);
}

.soldier-woo-content div.product .product_meta > span:last-child {
	margin-bottom: 0;
}

.soldier-woo-content div.product .product_meta > span > span:not(.posted_in):not(.tagged_as):not(.sku_wrapper),
.soldier-woo-content div.product .product_meta .sku,
.soldier-woo-content div.product .product_meta .tagged_as a,
.soldier-woo-content div.product .product_meta .posted_in a {
	color: var(--sa-white) !important;
	font-weight: 600;
}

.soldier-woo-content div.product .product_meta a {
	color: var(--sa-amber) !important;
	text-decoration: none !important;
	transition: color 0.2s;
}

.soldier-woo-content div.product .product_meta a:hover {
	color: var(--sa-white) !important;
}

/* Stock status */
.soldier-woo-content div.product .stock {
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 14px;
	padding: 6px 10px;
	display: inline-block;
	border: 1px solid currentColor;
}

.soldier-woo-content div.product .stock.in-stock { color: var(--sa-olive-light); }
.soldier-woo-content div.product .stock.out-of-stock { color: var(--sa-red); }

/* Variation selected — price & availability blocks */
.soldier-woo-content div.product .woocommerce-variation {
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	border-left: 3px solid var(--sa-amber);
	padding: 16px 18px;
	margin: 0 0 18px;
}

.soldier-woo-content div.product .woocommerce-variation-price .price {
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 28px;
	color: var(--sa-amber) !important;
	margin: 0 0 8px;
	display: block;
}

.soldier-woo-content div.product .woocommerce-variation-description p {
	font-size: 13px;
	color: var(--sa-mist);
	margin: 0 0 6px;
	line-height: 1.6;
}

.soldier-woo-content div.product .woocommerce-variation-availability p {
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sa-olive-light);
	margin: 0;
}

.soldier-woo-content div.product .woocommerce-variation-availability .out-of-stock {
	color: var(--sa-red);
}

.soldier-woo-content div.product .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}

.soldier-woo-content div.product .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

/* ============================================================
   TABS (Description, Additional Info, Reviews)
   ============================================================ */

.soldier-woo-content div.product .woocommerce-tabs {
	clear: both;
	width: 100%;
	margin-top: 56px;
	padding-top: 36px;
	border-top: 1px solid var(--sa-steel);
}

.soldier-woo-content div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--sa-steel);
	padding: 0 !important;
	margin: 0 0 28px !important;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.soldier-woo-content div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.soldier-woo-content div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.soldier-woo-content div.product .woocommerce-tabs ul.tabs li::before,
.soldier-woo-content div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.soldier-woo-content div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--sa-font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--sa-smoke);
	padding: 18px 28px;
	display: block;
	text-decoration: none !important;
	transition: color 0.2s, background 0.2s;
}

.soldier-woo-content div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--sa-mist);
	background: var(--sa-charcoal);
}

.soldier-woo-content div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--sa-amber);
}

.soldier-woo-content div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sa-amber);
	background: var(--sa-charcoal);
}

.soldier-woo-content div.product .woocommerce-tabs .panel {
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	border-top: 2px solid var(--sa-amber);
	color: var(--sa-mist);
	font-size: 15px;
	line-height: 1.8;
	margin: 0;
	padding: 32px 36px;
	font-weight: 300;
}

/* Panel content typography — text content (deskripsi, info tambahan, dll)
   biar terstruktur sama theme. */
.soldier-woo-content div.product .woocommerce-tabs .panel h1,
.soldier-woo-content div.product .woocommerce-tabs .panel h2,
.soldier-woo-content div.product .woocommerce-tabs .panel h3,
.soldier-woo-content div.product .woocommerce-tabs .panel h4 {
	font-family: var(--sa-font-display) !important;
	font-weight: 900 !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--sa-white) !important;
	margin: 28px 0 14px;
	line-height: 1.15;
}

.soldier-woo-content div.product .woocommerce-tabs .panel h2 { font-size: 22px; padding-left: 14px; border-left: 3px solid var(--sa-amber); }
.soldier-woo-content div.product .woocommerce-tabs .panel h3 { font-size: 18px; color: var(--sa-amber) !important; }
.soldier-woo-content div.product .woocommerce-tabs .panel h4 { font-size: 15px; color: var(--sa-olive-light) !important; letter-spacing: 0.15em; }

.soldier-woo-content div.product .woocommerce-tabs .panel > *:first-child {
	margin-top: 0;
}

/* ============================================================
   USER-PASTED INLINE STYLES — override semua white/light bg & dark text
   yang user paste dari template HTML eksternal (Word/Google Docs/blog editor).
   Inline style menang vs CSS tanpa !important, jadi pakai attribute selector
   + !important.
   ============================================================ */

/* Background di div/section yang di-set putih/light → force gunmetal */
.soldier-woo-content div.product .woocommerce-tabs .panel div[style*="background"],
.soldier-woo-content div.product .woocommerce-tabs .panel section[style*="background"],
.soldier-woo-content div.product .woocommerce-tabs .panel article[style*="background"],
.soldier-woo-content div.product .woocommerce-tabs .panel aside[style*="background"],
.soldier-woo-content div.product .woocommerce-tabs .panel p[style*="background"] {
	background: var(--sa-gunmetal) !important;
	background-color: var(--sa-gunmetal) !important;
	background-image: none !important;
	border-radius: 0 !important;
	border-color: var(--sa-steel) !important;
}

/* Border-left accent (user style biru/hijau/orange) → semua jadi amber */
.soldier-woo-content div.product .woocommerce-tabs .panel [style*="border-left"] {
	border-left-color: var(--sa-amber) !important;
}

/* Text colors di inline style — override semua ke mist (body text) */
.soldier-woo-content div.product .woocommerce-tabs .panel [style*="color:"],
.soldier-woo-content div.product .woocommerce-tabs .panel [style*="color :"] {
	color: var(--sa-mist) !important;
}

/* Re-assert headings (override universal color rule di atas) */
.soldier-woo-content div.product .woocommerce-tabs .panel h1,
.soldier-woo-content div.product .woocommerce-tabs .panel h2,
.soldier-woo-content div.product .woocommerce-tabs .panel h3,
.soldier-woo-content div.product .woocommerce-tabs .panel h4,
.soldier-woo-content div.product .woocommerce-tabs .panel h1[style],
.soldier-woo-content div.product .woocommerce-tabs .panel h2[style],
.soldier-woo-content div.product .woocommerce-tabs .panel h3[style],
.soldier-woo-content div.product .woocommerce-tabs .panel h4[style] {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display) !important;
}

.soldier-woo-content div.product .woocommerce-tabs .panel h3,
.soldier-woo-content div.product .woocommerce-tabs .panel h3[style] {
	color: var(--sa-amber) !important;
}

.soldier-woo-content div.product .woocommerce-tabs .panel h4,
.soldier-woo-content div.product .woocommerce-tabs .panel h4[style] {
	color: var(--sa-olive-light) !important;
}

/* Re-assert strong + b + a */
.soldier-woo-content div.product .woocommerce-tabs .panel strong,
.soldier-woo-content div.product .woocommerce-tabs .panel b,
.soldier-woo-content div.product .woocommerce-tabs .panel strong[style],
.soldier-woo-content div.product .woocommerce-tabs .panel b[style] {
	color: var(--sa-white) !important;
}

.soldier-woo-content div.product .woocommerce-tabs .panel a,
.soldier-woo-content div.product .woocommerce-tabs .panel a[style] {
	color: var(--sa-amber) !important;
}

/* List items (li) — text color override */
.soldier-woo-content div.product .woocommerce-tabs .panel li,
.soldier-woo-content div.product .woocommerce-tabs .panel li[style] {
	color: var(--sa-mist) !important;
	border-color: var(--sa-steel) !important;
}

/* Paragraph p text override */
.soldier-woo-content div.product .woocommerce-tabs .panel p,
.soldier-woo-content div.product .woocommerce-tabs .panel p[style] {
	color: var(--sa-mist) !important;
}

.soldier-woo-content div.product .woocommerce-tabs .panel p {
	margin: 0 0 14px;
	color: var(--sa-mist);
}

.soldier-woo-content div.product .woocommerce-tabs .panel strong,
.soldier-woo-content div.product .woocommerce-tabs .panel b {
	color: var(--sa-white);
	font-weight: 700;
}

.soldier-woo-content div.product .woocommerce-tabs .panel em,
.soldier-woo-content div.product .woocommerce-tabs .panel i {
	color: var(--sa-olive-light);
	font-style: italic;
}

.soldier-woo-content div.product .woocommerce-tabs .panel a {
	color: var(--sa-amber) !important;
	text-decoration: underline;
	text-decoration-color: rgba(212, 152, 46, 0.4);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s;
}

.soldier-woo-content div.product .woocommerce-tabs .panel a:hover {
	text-decoration-color: var(--sa-amber);
}

.soldier-woo-content div.product .woocommerce-tabs .panel ul,
.soldier-woo-content div.product .woocommerce-tabs .panel ol {
	margin: 0 0 18px;
	padding-left: 0;
	list-style: none;
}

.soldier-woo-content div.product .woocommerce-tabs .panel ul li,
.soldier-woo-content div.product .woocommerce-tabs .panel ol li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
	color: var(--sa-mist);
	line-height: 1.7;
}

.soldier-woo-content div.product .woocommerce-tabs .panel ul li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 12px;
	width: 8px;
	height: 1px;
	background: var(--sa-amber);
}

.soldier-woo-content div.product .woocommerce-tabs .panel ol {
	counter-reset: sa-list;
}

.soldier-woo-content div.product .woocommerce-tabs .panel ol li {
	counter-increment: sa-list;
}

.soldier-woo-content div.product .woocommerce-tabs .panel ol li::before {
	content: counter(sa-list, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--sa-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--sa-amber);
}

/* Attribute table di "Informasi Tambahan" tab */
.soldier-woo-content div.product .woocommerce-tabs .panel table.shop_attributes,
.soldier-woo-content div.product .woocommerce-tabs .panel table.woocommerce-product-attributes {
	border: 1px solid var(--sa-steel);
	border-collapse: collapse;
	width: 100%;
	margin: 0;
}

.soldier-woo-content div.product .woocommerce-tabs .panel table.shop_attributes th,
.soldier-woo-content div.product .woocommerce-tabs .panel table.woocommerce-product-attributes th {
	background: var(--sa-gunmetal);
	color: var(--sa-amber);
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 14px 18px;
	border-bottom: 1px solid var(--sa-steel);
	border-right: 1px solid var(--sa-steel);
	text-align: left;
	width: 30%;
}

.soldier-woo-content div.product .woocommerce-tabs .panel table.shop_attributes td,
.soldier-woo-content div.product .woocommerce-tabs .panel table.woocommerce-product-attributes td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--sa-steel);
	color: var(--sa-mist);
	font-size: 14px;
}

.soldier-woo-content div.product .woocommerce-tabs .panel table.shop_attributes tr:last-child th,
.soldier-woo-content div.product .woocommerce-tabs .panel table.shop_attributes tr:last-child td {
	border-bottom: none;
}

.soldier-woo-content div.product .woocommerce-tabs .panel h2 {
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: 26px;
	text-transform: uppercase;
	color: var(--sa-white);
	margin: 0 0 16px;
}

.soldier-woo-content div.product .woocommerce-tabs .panel p {
	margin: 0 0 1em;
}

/* Additional info table */
.soldier-woo-content table.shop_attributes {
	border: 1px solid var(--sa-steel);
	background: var(--sa-charcoal);
	border-collapse: collapse;
}

.soldier-woo-content table.shop_attributes th,
.soldier-woo-content table.shop_attributes td {
	border-bottom: 1px solid var(--sa-steel);
	padding: 14px 18px;
	background: transparent;
	color: var(--sa-mist);
	font-family: var(--sa-font-body);
	font-style: normal;
}

.soldier-woo-content table.shop_attributes tr:last-child th,
.soldier-woo-content table.shop_attributes tr:last-child td {
	border-bottom: none;
}

.soldier-woo-content table.shop_attributes th {
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sa-amber);
	width: 30%;
	background: var(--sa-gunmetal);
}

/* Reviews */
.soldier-woo-content #reviews #comments ol.commentlist {
	padding: 0;
	list-style: none;
}

.soldier-woo-content #reviews #comments ol.commentlist li {
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	padding: 20px;
	margin-bottom: 12px;
}

.soldier-woo-content #reviews #comments ol.commentlist li img.avatar {
	background: var(--sa-gunmetal);
	border: 1px solid var(--sa-steel);
	padding: 2px;
	border-radius: 0;
}

.soldier-woo-content #reviews #respond {
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	padding: 24px;
	margin-top: 16px;
}

.soldier-woo-content #reviews textarea,
.soldier-woo-content #reviews input[type="text"],
.soldier-woo-content #reviews input[type="email"] {
	background: var(--sa-gunmetal);
	color: var(--sa-white);
	border: 1px solid var(--sa-steel);
	padding: 12px 14px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	width: 100%;
	border-radius: 0;
}

/* ============================================================
   RELATED & UPSELL PRODUCTS — match home featured section header.
   PENTING: paksa display:block di section supaya h2 + ul stack vertical.
   ============================================================ */

.soldier-woo-content .related,
.soldier-woo-content .upsells,
.soldier-woo-content section.related.products,
.soldier-woo-content section.upsells.products {
	clear: both;
	width: 100%;
	display: block !important;
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--sa-steel);
}

.soldier-woo-content .related > h2,
.soldier-woo-content .upsells > h2 {
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: clamp(28px, 3vw, 40px);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--sa-white) !important;
	margin: 0 0 28px;
	display: block;
	width: 100%;
	position: relative;
	padding-left: 38px;
}

.soldier-woo-content .related > h2::before,
.soldier-woo-content .upsells > h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	height: 1px;
	background: var(--sa-amber);
}

/* Related/upsells grid — 6 kolom konsisten sama archive. Card shape SAMA
   dengan archive (aspect 3:4) supaya proporsi seragam di seluruh site. */
.soldier-woo-content .related ul.products,
.soldier-woo-content .upsells ul.products {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 12px !important;
	margin: 0 !important;
	width: 100%;
}

@media (max-width: 1280px) {
	.soldier-woo-content .related ul.products,
	.soldier-woo-content .upsells ul.products {
		grid-template-columns: repeat(5, 1fr) !important;
	}
}

@media (max-width: 1024px) {
	.soldier-woo-content .related ul.products,
	.soldier-woo-content .upsells ul.products {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.soldier-woo-content .related ul.products,
	.soldier-woo-content .upsells ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.soldier-woo-content .related ul.products,
	.soldier-woo-content .upsells ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ============================================================
   CART
   ============================================================ */

.soldier-woo-content table.shop_table {
	border: 1px solid var(--sa-steel);
	border-collapse: collapse;
	background: var(--sa-charcoal);
	margin: 0 0 28px;
	width: 100%;
}

.soldier-woo-content table.shop_table th {
	background: var(--sa-gunmetal);
	color: var(--sa-amber);
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 16px;
	border-bottom: 1px solid var(--sa-steel);
	text-align: left;
}

.soldier-woo-content table.shop_table td {
	border-top: 1px solid var(--sa-steel);
	padding: 18px 16px;
	color: var(--sa-mist);
	background: transparent;
	vertical-align: middle;
}

.soldier-woo-content table.shop_table .product-name a {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	text-decoration: none !important;
	letter-spacing: 0.03em;
}

.soldier-woo-content table.shop_table .product-name a:hover {
	color: var(--sa-amber) !important;
}

.soldier-woo-content table.shop_table .product-price,
.soldier-woo-content table.shop_table .product-subtotal {
	font-family: var(--sa-font-display);
	font-weight: 700;
	color: var(--sa-amber);
}

.soldier-woo-content table.shop_table .product-quantity input.qty {
	background: var(--sa-gunmetal);
	color: var(--sa-white);
	border: 1px solid var(--sa-steel);
	padding: 8px;
	width: 64px;
	text-align: center;
	border-radius: 0;
	font-family: var(--sa-font-display);
	font-weight: 600;
}

.soldier-woo-content table.shop_table .product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border: 1px solid var(--sa-steel);
}

.soldier-woo-content a.remove {
	color: var(--sa-red) !important;
	font-size: 20px;
	background: transparent;
	width: 24px;
	height: 24px;
	line-height: 22px;
	text-decoration: none !important;
}

.soldier-woo-content a.remove:hover {
	background: var(--sa-red);
	color: var(--sa-white) !important;
}

.soldier-woo-content .cart-collaterals {
	margin-top: 20px;
}

.soldier-woo-content .cart-collaterals .cart_totals {
	background: var(--sa-charcoal);
	padding: 28px;
	border: 1px solid var(--sa-steel);
	border-left: 3px solid var(--sa-amber);
}

.soldier-woo-content .cart-collaterals .cart_totals h2 {
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--sa-white);
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sa-steel);
}

.soldier-woo-content .cart-collaterals .order-total .woocommerce-Price-amount {
	color: var(--sa-amber);
	font-size: 22px;
	font-weight: 700;
}

.soldier-woo-content a.checkout-button,
.soldier-woo-content .cart-collaterals .checkout-button {
	background: var(--sa-amber);
	color: var(--sa-black) !important;
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 16px 24px;
	border-radius: 0;
	border: none;
	display: block;
	text-align: center;
	text-decoration: none !important;
	margin-top: 18px;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
	transition: background 0.2s;
}

.soldier-woo-content a.checkout-button:hover {
	background: #e0a030;
	color: var(--sa-black) !important;
}

/* ============================================================
   CART — broaden scope ke Elementor cart widget (body.woocommerce-cart)
   Cart page pakai Elementor cart widget, bukan .soldier-woo-content wrapper.
   ============================================================ */

body.woocommerce-cart table.shop_table,
body.woocommerce-cart .woocommerce-cart-form table.cart,
body.woocommerce-cart .e-shop-table table {
	border: none !important;
	border-collapse: collapse !important;
	background: transparent !important;
	margin: 0 !important;
	width: 100%;
	color: var(--sa-mist) !important;
}

/* Force tr & td & inner wrappers di cart table jadi transparent supaya bg
   charcoal section ke-show. Default WC + Elementor cart kasih white bg ke
   wrapper div, tbody, tr, atau td. Universal `> *` pada e-shop-table mastiin
   gak ada wrapper yang nutupin bg dark. */
body.woocommerce-cart .e-shop-table > *,
body.woocommerce-cart .e-shop-table tbody,
body.woocommerce-cart .e-shop-table thead,
body.woocommerce-cart .e-shop-table tfoot,
body.woocommerce-cart .woocommerce-cart-form table.cart tr,
body.woocommerce-cart .e-shop-table tr,
body.woocommerce-cart table.shop_table tr,
body.woocommerce-cart table.shop_table tbody,
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart form.woocommerce-cart-form {
	background: transparent !important;
	background-color: transparent !important;
}

body.woocommerce-cart table.shop_table th,
body.woocommerce-cart .woocommerce-cart-form table.cart th {
	background: var(--sa-gunmetal) !important;
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 16px;
	border-bottom: 1px solid var(--sa-steel);
	text-align: left;
}

body.woocommerce-cart table.shop_table td,
body.woocommerce-cart .woocommerce-cart-form table.cart td {
	border-top: 1px solid var(--sa-steel);
	padding: 18px 16px;
	color: var(--sa-mist);
	background: transparent;
	vertical-align: middle;
}

body.woocommerce-cart table.shop_table .product-name a {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	text-decoration: none !important;
	letter-spacing: 0.03em;
}

body.woocommerce-cart table.shop_table .product-name a:hover {
	color: var(--sa-amber) !important;
}

/* Harga di kolom HARGA dan SUBTOTAL → PUTIH (user request). Amber hanya
   buat order-total di cart_totals. */
body.woocommerce-cart table.shop_table .product-price,
body.woocommerce-cart table.shop_table .product-subtotal,
body.woocommerce-cart .woocommerce-cart-form .product-price,
body.woocommerce-cart .woocommerce-cart-form .product-subtotal,
body.woocommerce-cart .e-shop-table .product-price,
body.woocommerce-cart .e-shop-table .product-subtotal {
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: var(--sa-white) !important;
}

body.woocommerce-cart table.shop_table .product-price .woocommerce-Price-amount,
body.woocommerce-cart table.shop_table .product-price .woocommerce-Price-amount *,
body.woocommerce-cart table.shop_table .product-price bdi,
body.woocommerce-cart table.shop_table .product-subtotal .woocommerce-Price-amount,
body.woocommerce-cart table.shop_table .product-subtotal .woocommerce-Price-amount *,
body.woocommerce-cart table.shop_table .product-subtotal bdi,
body.woocommerce-cart .e-shop-table .product-price *,
body.woocommerce-cart .e-shop-table .product-subtotal * {
	color: var(--sa-white) !important;
}

body.woocommerce-cart table.shop_table .product-quantity input.qty,
body.woocommerce-cart input.qty {
	background: var(--sa-gunmetal) !important;
	color: var(--sa-white) !important;
	border: 1px solid var(--sa-steel) !important;
	padding: 10px 8px !important;
	width: 60px !important;
	text-align: center;
	border-radius: 0 !important;
	font-family: var(--sa-font-display);
	font-weight: 600;
	font-size: 15px;
	-moz-appearance: textfield;
}

body.woocommerce-cart input.qty::-webkit-outer-spin-button,
body.woocommerce-cart input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Soldier qty stepper: container + -/+ buttons (JS-injected).
   3 elemen sejajar: [−][input][+] PACKED — no gap antara button & input.
   Container pakai max-content width supaya gak ke-stretch oleh parent. */
body.woocommerce-cart .soldier-qty-stepper,
body.woocommerce-cart .quantity.soldier-qty-stepper,
body.woocommerce-cart .product-quantity .soldier-qty-stepper,
body.woocommerce-cart td.product-quantity .quantity.soldier-qty-stepper,
body.woocommerce-cart .quantity.soldier-qty-stepper.soldier-qty-wrap {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--sa-steel) !important;
	background: var(--sa-gunmetal) !important;
	width: -webkit-max-content !important;
	width: -moz-max-content !important;
	width: max-content !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: content-box !important;
	height: auto !important;
	overflow: visible !important;
}

body.woocommerce-cart .soldier-qty-stepper .soldier-qty-btn,
body.woocommerce-cart .soldier-qty-btn {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--sa-amber) !important;
	border: none !important;
	border-radius: 0 !important;
	width: 38px !important;
	min-width: 38px !important;
	max-width: 38px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--sa-font-display) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	outline: none !important;
	flex: 0 0 38px !important;
	text-shadow: none !important;
}

/* Hover hanya untuk device yg support hover (desktop) — di mobile/touch
   `:hover` bisa sticky setelah tap, bikin button keliatan "stuck amber". */
@media (hover: hover) {
	body.woocommerce-cart .soldier-qty-stepper .soldier-qty-btn:hover,
	body.woocommerce-cart .soldier-qty-btn:hover {
		background: var(--sa-amber) !important;
		color: var(--sa-black) !important;
	}
}

/* Active state buat touch feedback (gak sticky karena release after tap) */
body.woocommerce-cart .soldier-qty-stepper .soldier-qty-btn:active,
body.woocommerce-cart .soldier-qty-btn:active {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

/* Hilangkan focus outline default browser untuk +/- buttons (kita pakai
   amber pseudo-feedback aja) */
body.woocommerce-cart .soldier-qty-stepper .soldier-qty-btn:focus,
body.woocommerce-cart .soldier-qty-btn:focus,
body.woocommerce-cart .soldier-qty-stepper .soldier-qty-btn:focus-visible,
body.woocommerce-cart .soldier-qty-btn:focus-visible {
	outline: none !important;
	background: transparent !important;
	color: var(--sa-amber) !important;
}

/* Input qty di dalam stepper — center, separator borders kiri-kanan tipis */
body.woocommerce-cart .soldier-qty-stepper input.qty,
body.woocommerce-cart .quantity.soldier-qty-stepper input.qty {
	border: none !important;
	border-left: 1px solid var(--sa-steel) !important;
	border-right: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
	height: 40px !important;
	padding: 8px 4px !important;
	width: 50px !important;
	min-width: 50px !important;
	max-width: 50px !important;
	background: var(--sa-gunmetal) !important;
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-align: center !important;
	flex: 0 0 50px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	display: block !important;
}

body.woocommerce-cart input.qty:focus {
	outline: none;
	border-color: var(--sa-amber) !important;
}

/* Cart table column widths — pakai table-layout default (auto) tapi kasih
   width PERSENTASE per kolom supaya header & body row align dan title gak
   ke-squeeze ke single-character-per-line.
   Total: 6 + 12 + auto + 12 + 14 + 14 = ~58% explicit, 42% buat title. */
body.woocommerce-cart .woocommerce-cart-form table.cart {
	table-layout: auto !important;
	width: 100% !important;
}

body.woocommerce-cart table.shop_table .product-remove,
body.woocommerce-cart .woocommerce-cart-form table.cart th.product-remove,
body.woocommerce-cart .woocommerce-cart-form table.cart td.product-remove {
	width: 36px !important;
	text-align: center !important;
	padding: 14px 4px !important;
}

body.woocommerce-cart table.shop_table .product-thumbnail,
body.woocommerce-cart .woocommerce-cart-form table.cart th.product-thumbnail,
body.woocommerce-cart .woocommerce-cart-form table.cart td.product-thumbnail,
body.woocommerce-cart .e-shop-table .product-thumbnail {
	width: 90px !important;
	padding: 14px 4px !important;
}

body.woocommerce-cart table.shop_table .product-name,
body.woocommerce-cart .woocommerce-cart-form table.cart th.product-name,
body.woocommerce-cart .woocommerce-cart-form table.cart td.product-name {
	min-width: 140px !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
	padding: 14px 10px !important;
	line-height: 1.4 !important;
}

body.woocommerce-cart table.shop_table .product-price,
body.woocommerce-cart .woocommerce-cart-form table.cart th.product-price,
body.woocommerce-cart .woocommerce-cart-form table.cart td.product-price {
	width: 85px !important;
	white-space: nowrap !important;
	padding: 14px 8px !important;
	font-size: 13px;
}

body.woocommerce-cart table.shop_table .product-quantity,
body.woocommerce-cart .woocommerce-cart-form table.cart th.product-quantity,
body.woocommerce-cart .woocommerce-cart-form table.cart td.product-quantity {
	width: 130px !important;
	padding: 14px 6px !important;
}

body.woocommerce-cart table.shop_table .product-subtotal,
body.woocommerce-cart .woocommerce-cart-form table.cart th.product-subtotal,
body.woocommerce-cart .woocommerce-cart-form table.cart td.product-subtotal {
	width: 90px !important;
	white-space: nowrap !important;
	text-align: right !important;
	padding: 14px 8px !important;
	font-size: 13px;
}

/* Header row padding adjust */
body.woocommerce-cart .woocommerce-cart-form table.cart thead th {
	padding: 14px 8px !important;
	font-size: 11px !important;
}

/* Pastikan thead row & body row pakai layout sama (gak collapse) */
body.woocommerce-cart .woocommerce-cart-form table.cart thead,
body.woocommerce-cart .woocommerce-cart-form table.cart tbody,
body.woocommerce-cart .woocommerce-cart-form table.cart tr {
	display: table-row-group !important;
}

body.woocommerce-cart .woocommerce-cart-form table.cart thead {
	display: table-header-group !important;
}

body.woocommerce-cart .woocommerce-cart-form table.cart tr {
	display: table-row !important;
}

body.woocommerce-cart .woocommerce-cart-form table.cart th,
body.woocommerce-cart .woocommerce-cart-form table.cart td {
	display: table-cell !important;
	vertical-align: middle !important;
}

body.woocommerce-cart table.shop_table .product-thumbnail img,
body.woocommerce-cart .woocommerce-cart-form table.cart .product-thumbnail img,
body.woocommerce-cart .e-shop-table .product-thumbnail img,
body.woocommerce-cart table.cart img {
	width: 80px !important;
	height: 80px !important;
	min-width: 80px !important;
	min-height: 80px !important;
	max-width: 80px !important;
	max-height: 80px !important;
	object-fit: cover !important;
	border: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
	display: block !important;
	box-shadow: none !important;
	background: var(--sa-charcoal);
}

/* Remove "X" icon — perfect circle, RED filled by default (user request),
   hover slight darker. */
body.woocommerce-cart a.remove,
body.woocommerce-cart .remove,
body.woocommerce-cart .product-remove a.remove,
body.woocommerce-cart .e-shop-table a.remove {
	color: var(--sa-white) !important;
	font-size: 16px !important;
	background: var(--sa-red) !important;
	background-color: var(--sa-red) !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	max-width: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	border: 1px solid var(--sa-red) !important;
	border-radius: 50% !important;
	text-align: center !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s !important;
	font-weight: 400 !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
}

body.woocommerce-cart a.remove:hover,
body.woocommerce-cart .remove:hover {
	background: #c43030 !important;
	background-color: #c43030 !important;
	color: var(--sa-white) !important;
	border-color: #c43030 !important;
	transform: scale(1.05);
}

/* Coupon row — flex grow input + button, full width container */
body.woocommerce-cart .coupon {
	display: flex !important;
	align-items: stretch !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: 100% !important;
	flex-wrap: wrap;
}

body.woocommerce-cart #coupon_code,
body.woocommerce-cart input[name="coupon_code"] {
	background: var(--sa-charcoal) !important;
	color: var(--sa-white) !important;
	border: 1px solid var(--sa-steel) !important;
	padding: 12px 16px !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 13px !important;
	letter-spacing: 0.1em !important;
	border-radius: 0 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
}

body.woocommerce-cart #coupon_code:focus {
	border-color: var(--sa-amber) !important;
	outline: none;
}

body.woocommerce-cart button[name="apply_coupon"],
body.woocommerce-cart button[name="update_cart"] {
	background: transparent !important;
	color: var(--sa-mist) !important;
	border: 1px solid var(--sa-steel) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 12px 20px !important;
	border-radius: 0 !important;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap !important;
	flex-shrink: 0;
}

body.woocommerce-cart button[name="apply_coupon"]:hover,
body.woocommerce-cart button[name="update_cart"]:hover {
	border-color: var(--sa-amber) !important;
	color: var(--sa-amber) !important;
}

/* Cart totals box — Elementor variant */
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .e-cart-totals {
	background: var(--sa-charcoal) !important;
	padding: 28px !important;
	border: 1px solid var(--sa-steel) !important;
	border-left: 3px solid var(--sa-amber) !important;
}

body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .e-cart-totals h2,
body.woocommerce-cart .e-cart-section-title {
	font-family: var(--sa-font-display) !important;
	font-weight: 900 !important;
	font-size: 22px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	color: var(--sa-white) !important;
	margin: 0 0 16px !important;
	padding-bottom: 16px !important;
	border-bottom: 1px solid var(--sa-steel) !important;
}

body.woocommerce-cart .cart_totals table tr,
body.woocommerce-cart .e-cart-totals tr,
body.woocommerce-cart .e-cart-totals > div {
	border-bottom: 1px solid var(--sa-steel);
}

/* SEMUA text di cart totals → terang (default WC kasih dark color yang gak keliatan
   di tema gelap). Pakai high-specificity universal selector di scope cart totals. */
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart_totals *,
body.woocommerce-cart .e-cart-totals,
body.woocommerce-cart .e-cart-totals *,
body.woocommerce-cart .e-cart-section-cart-totals,
body.woocommerce-cart .e-cart-section-cart-totals * {
	color: var(--sa-white) !important;
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .e-cart-totals th {
	background: transparent !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 12px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	padding: 16px 0 !important;
	border: none !important;
	color: var(--sa-mist) !important;
	vertical-align: top !important;
	text-align: left !important;
	width: 38%;
}

body.woocommerce-cart .cart_totals table td,
body.woocommerce-cart .e-cart-totals td {
	color: var(--sa-white) !important;
	padding: 16px 0 !important;
	text-align: right !important;
	border: none !important;
	background: transparent !important;
	vertical-align: top !important;
}

/* Shipment row — content suka multi-line (destination + calculator link).
   Pastikan stack vertikal di kolom kanan, gak numpuk sama label. */
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals td,
body.woocommerce-cart .cart_totals tr.shipping td,
body.woocommerce-cart .e-cart-totals .woocommerce-shipping-totals td {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	padding-left: 0 !important;
	padding-top: 8px !important;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-totals th,
body.woocommerce-cart .cart_totals tr.shipping th,
body.woocommerce-cart .e-cart-totals .woocommerce-shipping-totals th {
	display: block !important;
	width: 100% !important;
	padding-bottom: 4px !important;
}

/* CRITICAL: WC default kasih `td::before { content: attr(data-title) }`
   buat responsive table label. Saat td di-set display:block (buat fix overlap),
   pseudo `::before` ikut visible → label "Shipment" muncul DUA KALI overlap.
   Disable pseudo content explicitly. */
body.woocommerce-cart .cart_totals td::before,
body.woocommerce-cart .cart_totals td::after,
body.woocommerce-cart .e-cart-totals td::before,
body.woocommerce-cart .e-cart-totals td::after,
body.woocommerce-cart table.shop_table_responsive td::before,
body.woocommerce-cart .shop_table_responsive tr td::before {
	content: '' !important;
	display: none !important;
}

/* Shipping calculator form — default hide (WC core punya inline `style="display:none"`,
   kita backup pakai CSS no-!important supaya inline-style "display: block" dari
   WC JS toggle bisa override). Style detail ada di section bawah. */
body.woocommerce-cart .shipping-calculator-form {
	display: none;
}

/* WC JS toggle akan set inline `style="display: block"`. Attribute selector
   match ini punya specificity lebih tinggi dari hide rule, jadi form expand. */
body.woocommerce-cart .shipping-calculator-form[style*="display: block"],
body.woocommerce-cart .shipping-calculator-form[style*="display:block"] {
	display: block !important;
}

/* Cart totals table — pakai CSS GRID instead of native table layout.
   Reason: table column widths di-share antar rows. Saat shipping row
   pakai display:block, browser tetep compute column widths dari row
   lain (Subtotal/Total) → td shipping cuma dapat slot kolom value (~62%).
   Pakai grid ngebebasin tiap row punya layout sendiri. */
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart .cart_totals table {
	display: grid !important;
	grid-template-columns: 1fr !important;
	width: 100% !important;
	gap: 0;
}

body.woocommerce-cart .cart_totals table thead,
body.woocommerce-cart .cart_totals table tbody {
	display: contents !important; /* skip tbody dari layout */
}

/* Default row: label LEFT + value RIGHT (Subtotal, Total, dst) */
body.woocommerce-cart .cart_totals table tr {
	display: grid !important;
	grid-template-columns: 38% 1fr !important;
	width: 100% !important;
	column-gap: 12px;
	align-items: baseline;
	padding: 14px 0 !important;
	border-bottom: 1px solid var(--sa-steel) !important;
}

body.woocommerce-cart .cart_totals table tr:last-child {
	border-bottom: none !important;
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
	display: block !important;
	width: auto !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

/* Shipment row → FULL WIDTH single column (stack vertical). */
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals.shipping,
body.woocommerce-cart .cart_totals tr.shipping {
	display: block !important;
	width: 100% !important;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-totals.shipping th,
body.woocommerce-cart .cart_totals tr.shipping th {
	display: block !important;
	width: 100% !important;
	padding: 0 0 8px !important;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-totals.shipping td,
body.woocommerce-cart .cart_totals tr.shipping td {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	padding: 0 !important;
}

/* Hide input fields & box-looking elements yang ngambang di shipment area
   kalau form-nya collapsed. */
body.woocommerce-cart .cart_totals tr.shipping td > input:not([type="radio"]):not([type="hidden"]),
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals td > input:not([type="radio"]):not([type="hidden"]) {
	display: none !important;
}

/* Style form fields saat expanded — dark tactical look, FULL WIDTH. */
body.woocommerce-cart .shipping-calculator-form {
	background: var(--sa-gunmetal);
	border: 1px solid var(--sa-steel);
	padding: 18px !important;
	margin-top: 12px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: block;
	float: none !important;
}

body.woocommerce-cart .shipping-calculator-form p.form-row,
body.woocommerce-cart .shipping-calculator-form .form-row,
body.woocommerce-cart .shipping-calculator-form .form-row-wide {
	margin: 0 0 14px !important;
	padding: 0 !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	box-sizing: border-box !important;
}

body.woocommerce-cart .shipping-calculator-form label {
	display: block !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--sa-mist) !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
}

body.woocommerce-cart .shipping-calculator-form select,
body.woocommerce-cart .shipping-calculator-form input[type="text"],
body.woocommerce-cart .shipping-calculator-form input[type="number"],
body.woocommerce-cart .shipping-calculator-form input {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	background: var(--sa-charcoal) !important;
	color: var(--sa-white) !important;
	border: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
	padding: 12px 14px !important;
	font-family: var(--sa-font-body) !important;
	font-size: 14px !important;
	display: block !important;
	box-sizing: border-box !important;
	outline: none;
	float: none !important;
	margin: 0 !important;
}

body.woocommerce-cart .shipping-calculator-form select:focus,
body.woocommerce-cart .shipping-calculator-form input:focus {
	border-color: var(--sa-amber) !important;
}

body.woocommerce-cart .shipping-calculator-form button.button,
body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 14px 24px !important;
	cursor: pointer;
	transition: background 0.2s;
	margin-top: 4px !important;
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
}

body.woocommerce-cart .shipping-calculator-form button.button:hover {
	background: #e0a030 !important;
}

/* Select2 dropdown (kalau WC pakai select2) — dark theme override */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection,
body.woocommerce-cart .shipping-calculator-form .select2-selection {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
	min-height: 42px !important;
}

body.woocommerce-cart .shipping-calculator-form .select2-selection__rendered {
	color: var(--sa-white) !important;
	line-height: 40px !important;
	padding-left: 12px !important;
}

body.woocommerce-cart .shipping-calculator-form .select2-selection__arrow {
	height: 40px !important;
}

/* Style ulang yang BOLEH muncul di shipping row: destination message & calc link */
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart_totals tr.shipping .woocommerce-shipping-destination,
body.woocommerce-cart .e-cart-totals .woocommerce-shipping-destination {
	display: block !important;
	color: var(--sa-mist) !important;
	font-size: 13px !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	line-height: 1.5 !important;
	float: none !important;
	clear: both !important;
}

body.woocommerce-cart .cart_totals .shipping-calculator-button,
body.woocommerce-cart .cart_totals tr.shipping .shipping-calculator-button,
body.woocommerce-cart .e-cart-totals .shipping-calculator-button {
	display: inline-block !important;
	color: var(--sa-amber) !important;
	text-decoration: none !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 12px !important;
	letter-spacing: 0.12em !important;
	border-bottom: 1px dashed rgba(212, 152, 46, 0.4) !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
body.woocommerce-cart .e-cart-totals .woocommerce-shipping-calculator,
body.woocommerce-cart form.woocommerce-shipping-calculator {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: both !important;
	box-sizing: border-box !important;
}

/* Universal: nuke float pada child elements di shipping row supaya gak ada text-wrap weirdness */
body.woocommerce-cart .cart_totals tr.shipping > * > *,
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals > * > * {
	float: none !important;
}

body.woocommerce-cart .woocommerce-shipping-destination,
body.woocommerce-cart #shipping_method,
body.woocommerce-cart .woocommerce-shipping-methods {
	margin: 4px 0 8px !important;
	padding: 0 !important;
	list-style: none !important;
	color: var(--sa-mist) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

body.woocommerce-cart #shipping_method li,
body.woocommerce-cart .woocommerce-shipping-methods li {
	color: var(--sa-mist) !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
}

body.woocommerce-cart .woocommerce-shipping-calculator {
	margin: 4px 0 0 !important;
	padding: 0 !important;
}

body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-cart .e-cart-totals .order-total td {
	text-align: right !important;
	display: table-cell !important;
}

body.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount,
body.woocommerce-cart .e-cart-totals .order-total .woocommerce-Price-amount {
	color: var(--sa-amber) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	font-family: var(--sa-font-display) !important;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .e-cart-totals .order-total th {
	color: var(--sa-white) !important;
	font-size: 14px !important;
}

/* Update Cart button — flat tactical rectangle, NO border-radius, NO clip-path.
   Border PENUH wrap-around text. text-align center. white-space:nowrap supaya
   gak overflow. */
body.woocommerce-cart button[name="update_cart"],
body.woocommerce-cart .button[name="update_cart"],
body.woocommerce-cart .actions button[name="update_cart"],
body.woocommerce-cart .e-shop-table button[name="update_cart"] {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--sa-mist) !important;
	border: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	padding: 14px 26px !important;
	cursor: pointer;
	transition: all 0.2s;
	opacity: 1 !important;
	box-shadow: none !important;
	outline: none !important;
	text-shadow: none !important;
	display: inline-block !important;
	width: auto !important;
	min-width: 160px !important;
	height: auto !important;
	line-height: 1.2 !important;
	min-height: 0 !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	white-space: nowrap !important;
	text-align: center !important;
	text-indent: 0 !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

body.woocommerce-cart button[name="update_cart"]:hover:not(:disabled),
body.woocommerce-cart .actions button[name="update_cart"]:hover:not(:disabled) {
	border-color: var(--sa-amber) !important;
	color: var(--sa-amber) !important;
	background: transparent !important;
}

body.woocommerce-cart button[name="update_cart"]:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	color: var(--sa-smoke) !important;
}

/* Re-assert amber color on links di cart totals (universal `*` rule di atas
   nyamain semua text ke putih — perlu re-override untuk link). */
body.woocommerce-cart .cart_totals a,
body.woocommerce-cart .cart_totals a *,
body.woocommerce-cart .e-cart-totals a,
body.woocommerce-cart .e-cart-totals a *,
body.woocommerce-cart .shipping-calculator-button {
	color: var(--sa-amber) !important;
}

/* Re-assert amber color on order-total price (universal rule nyamain ke putih) */
body.woocommerce-cart .order-total .woocommerce-Price-amount,
body.woocommerce-cart .order-total .woocommerce-Price-amount *,
body.woocommerce-cart .order-total bdi,
body.woocommerce-cart .order-total bdi * {
	color: var(--sa-amber) !important;
}

/* Explicit: SEMUA harga (bdi, Price-amount, currencySymbol) di cart totals
   non-order-total → putih terang. Beberapa WC theme & Elementor kasih
   default color khusus untuk price elements yang gak ke-override universal. */
body.woocommerce-cart .cart_totals tr:not(.order-total) .woocommerce-Price-amount,
body.woocommerce-cart .cart_totals tr:not(.order-total) .woocommerce-Price-amount *,
body.woocommerce-cart .cart_totals tr:not(.order-total) bdi,
body.woocommerce-cart .cart_totals tr:not(.order-total) .woocommerce-Price-currencySymbol,
body.woocommerce-cart .e-cart-totals tr:not(.order-total) .woocommerce-Price-amount,
body.woocommerce-cart .e-cart-totals tr:not(.order-total) bdi {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
}

/* Proceed to checkout button — high specificity supaya universal rule
   `.cart_totals a` (yang nyamain text amber) gak menang.
   Default: amber bg + black text. Hover: inverted (charcoal bg + amber
   border + amber text) — beda dari default, gak blob amber. */
body.woocommerce-cart .cart_totals a.checkout-button,
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .e-cart-totals a.checkout-button,
body.woocommerce-cart .e-cart-totals .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart a.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--sa-amber) !important;
	background-color: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	padding: 16px 24px !important;
	border-radius: 0 !important;
	border: 2px solid var(--sa-amber) !important;
	display: block;
	text-align: center;
	text-decoration: none !important;
	margin-top: 18px;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Hover: inverted look (dark bg + amber border + amber text).
   Beda jauh dari default amber → kontras jelas, gak blend sama amber lain. */
body.woocommerce-cart .cart_totals a.checkout-button:hover,
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .e-cart-totals a.checkout-button:hover,
body.woocommerce-cart .e-cart-totals .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--sa-black) !important;
	background-color: var(--sa-black) !important;
	color: var(--sa-amber) !important;
	border-color: var(--sa-amber) !important;
}

/* Cross-sells "You may be interested in" — kasih grid 6-col konsisten */
body.woocommerce-cart .cross-sells,
body.woocommerce-cart .elementor-widget-woocommerce-cart .cross-sells {
	margin-top: 56px !important;
	padding-top: 36px !important;
	border-top: 1px solid var(--sa-steel) !important;
	width: 100% !important;
	clear: both !important;
	display: block !important;
}

body.woocommerce-cart .cross-sells > h2 {
	display: none; /* Heading-nya udah di-handle Elementor divider widget */
}

body.woocommerce-cart .cross-sells ul.products {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 12px !important;
	margin: 0 !important;
	list-style: none;
	padding: 0;
}

@media (max-width: 1280px) {
	body.woocommerce-cart .cross-sells ul.products {
		grid-template-columns: repeat(5, 1fr) !important;
	}
}

@media (max-width: 1024px) {
	body.woocommerce-cart .cross-sells ul.products {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

@media (max-width: 768px) {
	body.woocommerce-cart .cross-sells ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 480px) {
	body.woocommerce-cart .cross-sells ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Cart notices/info messages */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
	background: var(--sa-charcoal) !important;
	color: var(--sa-mist) !important;
	border: 1px solid var(--sa-steel) !important;
	border-left: 3px solid var(--sa-amber) !important;
	padding: 18px 24px !important;
	font-family: var(--sa-font-body);
	border-radius: 0 !important;
}

body.woocommerce-cart .woocommerce-error {
	border-left-color: var(--sa-red) !important;
}

/* Generic buttons */
.soldier-woo-content a.button,
.soldier-woo-content button.button,
.soldier-woo-content input.button {
	background: var(--sa-charcoal);
	color: var(--sa-mist) !important;
	border: 1px solid var(--sa-steel);
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 11px 20px;
	border-radius: 0;
	transition: all 0.2s;
	cursor: pointer;
	text-decoration: none !important;
	display: inline-block;
	box-shadow: none;
}

.soldier-woo-content a.button:hover,
.soldier-woo-content button.button:hover,
.soldier-woo-content input.button:hover {
	background: var(--sa-amber);
	color: var(--sa-black) !important;
	border-color: var(--sa-amber);
}

.soldier-woo-content a.button.alt,
.soldier-woo-content button.button.alt,
.soldier-woo-content input.button.alt {
	background: var(--sa-amber);
	color: var(--sa-black) !important;
	border-color: var(--sa-amber);
}

.soldier-woo-content a.button.alt:hover,
.soldier-woo-content button.button.alt:hover,
.soldier-woo-content input.button.alt:hover {
	background: #e0a030;
}

/* Coupon input */
.soldier-woo-content .cart .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
}

.soldier-woo-content .cart .coupon input[type="text"] {
	background: var(--sa-gunmetal);
	color: var(--sa-white);
	border: 1px solid var(--sa-steel);
	padding: 11px 14px;
	font-family: var(--sa-font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ============================================================
   CHECKOUT
   ============================================================ */

.soldier-woo-content .woocommerce form .form-row label,
.soldier-woo-content form .form-row label {
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sa-mist);
	margin-bottom: 8px;
	display: block;
}

.soldier-woo-content form .form-row input.input-text,
.soldier-woo-content form .form-row textarea,
.soldier-woo-content form .form-row select {
	background: var(--sa-charcoal);
	color: var(--sa-white);
	border: 1px solid var(--sa-steel);
	padding: 13px 14px;
	border-radius: 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	width: 100%;
}

.soldier-woo-content form .form-row input.input-text:focus,
.soldier-woo-content form .form-row textarea:focus,
.soldier-woo-content form .form-row select:focus {
	border-color: var(--sa-amber);
	outline: none;
}

.soldier-woo-content .select2-container--default .select2-selection--single {
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	color: var(--sa-white);
	border-radius: 0;
	height: 46px;
	padding: 6px 12px;
}

.soldier-woo-content .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--sa-white);
	line-height: 32px;
}

.soldier-woo-content .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--sa-amber) transparent transparent transparent;
}

.select2-dropdown {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	color: var(--sa-mist);
}

.select2-results__option {
	color: var(--sa-mist);
	padding: 10px 14px;
	background: transparent;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

.soldier-woo-content #order_review,
.soldier-woo-content .woocommerce-checkout #payment {
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	padding: 28px;
	border-radius: 0;
}

.soldier-woo-content .woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--sa-steel);
	padding: 0;
	list-style: none;
}

.soldier-woo-content .woocommerce-checkout #payment ul.payment_methods li {
	padding: 10px 0;
	color: var(--sa-mist);
}

.soldier-woo-content .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	margin-right: 8px;
	accent-color: var(--sa-amber);
}

.soldier-woo-content .woocommerce-checkout #payment ul.payment_methods li label {
	display: inline;
	font-family: var(--sa-font-display);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sa-white);
}

.soldier-woo-content .woocommerce-checkout #payment div.payment_box {
	background: var(--sa-gunmetal);
	color: var(--sa-mist);
	border-radius: 0;
	margin-top: 8px;
	font-size: 13px;
}

.soldier-woo-content .woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--sa-gunmetal);
}

.soldier-woo-content #place_order {
	background: var(--sa-amber);
	color: var(--sa-black);
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	padding: 17px 28px;
	border-radius: 0;
	border: none;
	width: 100%;
	cursor: pointer;
	margin-top: 14px;
	clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
	transition: background 0.2s;
}

#place_order:hover {
	background: #e0a030;
}

/* Checkout headings */
.soldier-woo-content .woocommerce-billing-fields h3,
.soldier-woo-content .woocommerce-shipping-fields h3,
.soldier-woo-content .woocommerce-additional-fields h3,
.soldier-woo-content #order_review_heading {
	font-family: var(--sa-font-display);
	font-weight: 900;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--sa-white);
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sa-steel);
}

/* ============================================================
   MY ACCOUNT
   ============================================================ */

.soldier-woo-content .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
}

.soldier-woo-content .woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid var(--sa-steel);
	margin: 0;
	padding: 0;
}

.soldier-woo-content .woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: none;
}

.soldier-woo-content .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 14px 20px;
	font-family: var(--sa-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sa-mist) !important;
	text-decoration: none !important;
	transition: all 0.2s;
}

.soldier-woo-content .woocommerce-MyAccount-navigation ul li.is-active a,
.soldier-woo-content .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--sa-amber);
	color: var(--sa-black) !important;
}

.soldier-woo-content .woocommerce-MyAccount-content {
	color: var(--sa-mist);
}

.soldier-woo-content .woocommerce-MyAccount-content h2,
.soldier-woo-content .woocommerce-MyAccount-content h3 {
	font-family: var(--sa-font-display);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--sa-white);
}

/* Login & register forms */
.soldier-woo-content .u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.soldier-woo-content .woocommerce-form-login,
.soldier-woo-content .woocommerce-form-register {
	background: var(--sa-charcoal);
	border: 1px solid var(--sa-steel);
	padding: 28px;
}

/* ============================================================
   CLEARFIX untuk single product float
   ============================================================ */

.soldier-woo-content div.product::after {
	content: "";
	display: table;
	clear: both;
}

/* ============================================================
   TOBER VARIATION SWATCHES override
   Plugin pakai class .tober-swatch-* untuk warna/ukuran picker.
   ============================================================ */

.soldier-woo-content .tober-swatch-wrapper {
	margin: 6px 0 0 !important;
	padding: 0 !important;
}

.soldier-woo-content .tober-swatch-list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.soldier-woo-content .tober-swatch__item {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	color: var(--sa-mist) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: all 0.2s !important;
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
}

/* Image-type (warna) — square thumbnail */
.soldier-woo-content .tober-type-image .tober-swatch__item {
	width: 56px !important;
	height: 56px !important;
	overflow: hidden;
}

.soldier-woo-content .tober-swatch__img-wrap {
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
	display: block;
}

.soldier-woo-content .tober-swatch__img-wrap img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
	border: none !important;
}

/* Button-type (ukuran) — text pill */
.soldier-woo-content .tober-type-button .tober-swatch__item,
.soldier-woo-content .tober-type-text .tober-swatch__item {
	padding: 10px 18px !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	min-width: 48px !important;
	text-align: center !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.soldier-woo-content .tober-swatch__item:hover {
	border-color: var(--sa-amber) !important;
	color: var(--sa-amber) !important;
}

.soldier-woo-content .tober-swatch__item.tober-swatch--active {
	border-color: var(--sa-amber) !important;
	box-shadow: 0 0 0 2px var(--sa-amber) !important;
}

.soldier-woo-content .tober-type-button .tober-swatch__item.tober-swatch--active,
.soldier-woo-content .tober-type-text .tober-swatch__item.tober-swatch--active {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	box-shadow: none !important;
}

.soldier-woo-content .tober-swatch__item.tober-swatch--disabled {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	position: relative;
}

.soldier-woo-content .tober-swatch__item.tober-swatch--disabled::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 47%, var(--sa-red) 48%, var(--sa-red) 52%, transparent 53%);
	pointer-events: none;
}

/* Checkmark badge active state (image type) */
.soldier-woo-content .tober-swatch__check {
	position: absolute !important;
	top: 2px !important;
	right: 2px !important;
	width: 16px !important;
	height: 16px !important;
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	border-radius: 50% !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	z-index: 2;
}

.soldier-woo-content .tober-swatch__item.tober-swatch--active .tober-swatch__check {
	display: flex !important;
}

/* Swatch name label di bawah image */
.soldier-woo-content .tober-swatch__name {
	display: none !important;
}

/* ============================================================
   TBSC (ToberHost Shopee Card) — recommended/related products listing
   Plugin inject .tbsc-img-wrap, .tbsc-price-row, .tbsc-meta dalam
   li.product. Source HTML-nya rusak (div/a tag mismatched) + img punya
   inline style height:auto. Solusi: absolute positioning img + flex
   column layout di li.product supaya semua sibling tertata rapi.
   ============================================================ */

/* Image wrapper — fixed aspect ratio, gunmetal bg */
.soldier-woo-content ul.products li.product .tbsc-img-wrap {
	position: relative !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #1a1a1a !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	width: 100% !important;
}

/* The <a> inside .tbsc-img-wrap also needs to fill */
.soldier-woo-content ul.products li.product .tbsc-img-wrap > a {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

/* Img — absolute positioning supaya inline style "height:auto" gak ngaruh */
.soldier-woo-content ul.products li.product .tbsc-img-wrap img,
.soldier-woo-content ul.products li.product .tbsc-img-wrap a img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.5s ease !important;
	max-width: none !important;
}

.soldier-woo-content ul.products li.product:hover .tbsc-img-wrap img {
	transform: scale(1.05) !important;
}

/* Price row — block sibling of img-wrap & h2 */
.soldier-woo-content ul.products li.product .tbsc-price-row {
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	line-height: 1.1 !important;
	color: var(--sa-amber) !important;
	padding: 4px 14px 8px !important;
	margin: 0 !important;
	background: var(--sa-charcoal) !important;
	display: block !important;
	transition: background 0.3s ease;
}

.soldier-woo-content ul.products li.product:hover .tbsc-price-row {
	background: var(--sa-gunmetal) !important;
}

.soldier-woo-content ul.products li.product .tbsc-price {
	color: var(--sa-amber) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
}

.soldier-woo-content ul.products li.product .tbsc-price .woocommerce-Price-amount {
	color: var(--sa-amber) !important;
}

.soldier-woo-content ul.products li.product .tbsc-price .woocommerce-Price-currencySymbol {
	color: var(--sa-amber) !important;
	font-weight: 500 !important;
	margin-right: 1px;
}

/* Meta row — rating + sold count, paksa di bottom dengan margin-top:auto.
   Horizontal padding 14px konsisten sama series eyebrow, title, price row. */
.soldier-woo-content ul.products li.product .tbsc-meta {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 2px 14px 14px !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 9px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--sa-smoke) !important;
	background: var(--sa-charcoal) !important;
	transition: background 0.3s ease;
	margin: 0 !important;
	margin-top: auto !important;
	min-height: 30px;
	box-sizing: border-box;
}

.soldier-woo-content ul.products li.product:hover .tbsc-meta {
	background: var(--sa-gunmetal) !important;
}

.soldier-woo-content ul.products li.product .tbsc-star1 {
	width: 11px !important;
	height: 11px !important;
	fill: var(--sa-amber) !important;
	flex-shrink: 0;
}

.soldier-woo-content ul.products li.product .tbsc-rnum {
	color: var(--sa-amber) !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
}

.soldier-woo-content ul.products li.product .tbsc-sold {
	color: var(--sa-smoke) !important;
	margin-left: auto !important;
	letter-spacing: 0.15em !important;
}

/* tbsc wrapper containers (single product layout, if used) — dark-ify */
.soldier-woo-content .tbsc-sp-wrap,
.soldier-woo-content .tbsc-sp-box,
.soldier-woo-content .tbsc-tabs,
.soldier-woo-content .tbsc-tabs-nav,
.soldier-woo-content .tbsc-tab-btn {
	background: transparent !important;
	color: var(--sa-mist) !important;
}

/* ============================================================
   ELEMENTOR PRO — Woo Cart & Checkout & Products widgets
   Widget Elementor wrap WC element. Inner WC class tetap pakai
   style kita, tapi outer widget perlu padding/background fix.
   ============================================================ */

/* Whole cart/checkout page: tactical dark background */
body.woocommerce-cart,
body.woocommerce-checkout {
	background: var(--sa-black) !important;
}

/* Divider widget "Your cart" / "You may be interested in" → tactical heading */
body.woocommerce-cart .elementor-widget-divider,
body.woocommerce-checkout .elementor-widget-divider {
	padding: 0;
}

body.woocommerce-cart .elementor-divider,
body.woocommerce-checkout .elementor-divider {
	display: block;
	margin: 0;
}

/* Separator span = parent of text. JANGAN di-hide karena text-nya nested di dalam.
   Hanya hilangkan line decorations (::before / ::after di dalam separator). */
body.woocommerce-cart .elementor-divider .elementor-divider-separator,
body.woocommerce-checkout .elementor-divider .elementor-divider-separator {
	display: block !important;
	border: none !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	flex: none !important;
}

body.woocommerce-cart .elementor-divider .elementor-divider-separator::before,
body.woocommerce-cart .elementor-divider .elementor-divider-separator::after,
body.woocommerce-checkout .elementor-divider .elementor-divider-separator::before,
body.woocommerce-checkout .elementor-divider .elementor-divider-separator::after {
	display: none !important;
}

body.woocommerce-cart .elementor-divider__text,
body.woocommerce-cart .elementor-divider__element,
body.woocommerce-checkout .elementor-divider__text,
body.woocommerce-checkout .elementor-divider__element {
	font-family: var(--sa-font-display) !important;
	font-weight: 900 !important;
	font-size: clamp(28px, 3vw, 44px) !important;
	letter-spacing: -0.01em !important;
	text-transform: uppercase !important;
	color: var(--sa-white) !important;
	line-height: 1.05 !important;
	padding: 0 0 0 38px !important;
	position: relative;
	display: block !important;
	background: transparent !important;
	border: none !important;
}

body.woocommerce-cart .elementor-divider__text::before,
body.woocommerce-checkout .elementor-divider__text::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	height: 1px;
	background: var(--sa-amber);
}

body.woocommerce-cart .elementor-widget-woocommerce-cart,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout {
	background: transparent;
	color: var(--sa-mist);
	padding: 24px 0;
}

/* Hilangkan SEMUA white box-shadow, outline & light border default Elementor cart widget.
   Elementor Pro Woo cart widget kasih box-shadow putih + outline buat "card" look,
   nyebabin garis putih di sekeliling cart table & cart totals. */
body.woocommerce-cart .elementor-widget-woocommerce-cart *,
body.woocommerce-cart .e-cart-layout-two-column *,
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .e-cart-section,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .e-cart-totals,
body.woocommerce-cart .elementor-element {
	box-shadow: none !important;
	outline: none !important;
}

/* Default outline browser pada form/input/button — biar tetap accessible
   (visible focus), tapi pakai amber bukan default biru/putih. */
body.woocommerce-cart input:focus,
body.woocommerce-cart select:focus,
body.woocommerce-cart button:focus,
body.woocommerce-cart a:focus {
	outline: 2px solid var(--sa-amber) !important;
	outline-offset: 2px !important;
}

/* Cart section background — Elementor pakai class `.e-cart-section` di tiap
   card section (LEFT: .e-shop-table.e-cart-section, RIGHT: .e-cart-totals.e-cart-section,
   coupon: .coupon.e-cart-section). Target itu langsung.
   IMPORTANT: gunakan .e-cart-section saja, BUKAN wildcard yg bisa kena
   `.e-cart-content` (pesan destination shipment). */
body.woocommerce-cart .e-cart-section,
body.woocommerce-cart .e-shop-table,
body.woocommerce-cart .e-cart-totals,
body.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
	background: var(--sa-charcoal) !important;
	background-color: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
}

/* Sticky right column wrapper (Elementor) — tidak perlu bg sendiri,
   biarin .e-cart-totals di dalamnya yang punya bg. */
body.woocommerce-cart .e-cart__column-inner,
body.woocommerce-cart .e-sticky-right-column,
body.woocommerce-cart .e-cart__container,
body.woocommerce-cart .e-cart__column {
	background: transparent !important;
}

/* Reset border/bg yang mungkin diwarisin pesan/inner content TEXT span
   (jangan biarin pesan destination keliatan kayak input box). */
body.woocommerce-cart .e-cart-content,
body.woocommerce-cart .woocommerce-shipping-may-be-available-html,
body.woocommerce-cart .e-checkout-message,
body.woocommerce-cart .woocommerce-shipping-destination,
body.woocommerce-cart .woocommerce-shipping-methods,
body.woocommerce-cart .woocommerce-shipping-calculator {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Cart totals box punya amber left border (override section umum) */
body.woocommerce-cart .e-cart-totals,
body.woocommerce-cart .cart_totals {
	border-left: 3px solid var(--sa-amber) !important;
}

/* CRITICAL FIX — WC default CSS punya `.cart_totals { float: right; width: 48%; }`
   yang bikin semua isi cart totals (termasuk form shipping calculator)
   ke-constrain ke 48% width. Override jadi full width. */
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .woocommerce-page .cart_totals,
body.woocommerce-cart .e-cart-totals .cart_totals {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	clear: both !important;
}

/* Plus force tabel & shipping_calculator dari WC default rule */
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals .shipping_calculator,
body.woocommerce-cart .cart_totals .shipping_calculator,
body.woocommerce-cart .cart-collaterals .shipping_calculator {
	float: none !important;
	width: 100% !important;
	clear: both !important;
}

/* Cart table card (.e-shop-table) jangan punya amber left border, biarkan
   border steel uniform. Override kalau e-cart-section umum kasih border khusus. */
body.woocommerce-cart .e-shop-table {
	border-left: 1px solid var(--sa-steel) !important;
}

/* Links di cart totals (Hitung biaya pengiriman, dll) → amber konsisten */
body.woocommerce-cart .shipping-calculator-button,
body.woocommerce-cart .woocommerce-shipping-calculator a,
body.woocommerce-cart .cart_totals a,
body.woocommerce-cart .e-cart-totals a {
	color: var(--sa-amber) !important;
	text-decoration: none !important;
	border-bottom: 1px dashed rgba(212, 152, 46, 0.4);
	transition: border-color 0.2s;
}

body.woocommerce-cart .shipping-calculator-button:hover,
body.woocommerce-cart .cart_totals a:hover {
	color: var(--sa-amber) !important;
	border-bottom-color: var(--sa-amber);
}

/* Cart table inside .woocommerce-cart-form: hilangkan border luar yang dobel
   karena parent section udah punya border */
body.woocommerce-cart .woocommerce-cart-form > table.shop_table,
body.woocommerce-cart .e-cart-section table.shop_table {
	border: none !important;
	background: transparent !important;
	margin: 0 !important;
}

/* Cart text di shipment / "Masukkan alamat" — pakai sa-smoke */
body.woocommerce-cart .shipping-calculator-form,
body.woocommerce-cart .woocommerce-shipping-destination,
body.woocommerce-cart .woocommerce-shipping-methods {
	color: var(--sa-smoke) !important;
	font-size: 13px;
}

body.woocommerce-cart .woocommerce-shipping-destination strong {
	color: var(--sa-white) !important;
}

body.woocommerce-cart .elementor-widget-woocommerce-cart .e-cart-section-title,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page h2,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout h2 {
	font-family: var(--sa-font-display);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--sa-white) !important;
}

/* Empty cart message styling — kotak tactical "warning" look */
.soldier-woo-content .cart-empty,
.elementor-widget-woocommerce-cart .cart-empty,
body.woocommerce-cart .wc-empty-cart-message,
.wc-empty-cart-message {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-left: 3px solid var(--sa-amber) !important;
	color: var(--sa-mist) !important;
	padding: 48px 32px !important;
	font-family: var(--sa-font-body) !important;
	font-size: 15px !important;
	font-weight: 300 !important;
	text-align: center;
	margin: 0 0 32px !important;
	position: relative;
}

body.woocommerce-cart .wc-empty-cart-message::before {
	content: '⌖';
	display: block;
	font-family: var(--sa-font-mono);
	font-size: 36px;
	color: var(--sa-amber);
	margin-bottom: 12px;
	line-height: 1;
}

.elementor-widget-woocommerce-cart .return-to-shop,
.wc-empty-cart-message + .return-to-shop {
	margin-top: 16px;
}

.elementor-widget-woocommerce-cart .return-to-shop .button,
.return-to-shop .button {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	padding: 14px 32px !important;
	border-radius: 0 !important;
	border: none !important;
	text-decoration: none !important;
	display: inline-block;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
	transition: background 0.2s;
}

.elementor-widget-woocommerce-cart .return-to-shop .button:hover,
.return-to-shop .button:hover {
	background: #e0a030 !important;
}

/* Elementor cart/checkout outer widget — kasih dark background dan wrapper */
body.woocommerce-cart .elementor-widget-woocommerce-cart .elementor-widget-container,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .elementor-widget-container,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout .elementor-widget-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 32px;
}

/* Elementor products grid (recommended) — match home product card */
.elementor-widget-woocommerce-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 2px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.elementor-widget-woocommerce-products ul.products li.product {
	background: var(--sa-gunmetal) !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden;
}

.elementor-widget-woocommerce-products ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
	transition: transform 0.5s ease;
}

.elementor-widget-woocommerce-products ul.products li.product:hover img {
	transform: scale(1.05);
}

.elementor-widget-woocommerce-products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sa-font-display) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-transform: uppercase !important;
	color: var(--sa-white) !important;
	padding: 18px 16px 6px !important;
	margin: 0 !important;
	background: var(--sa-charcoal);
	border-top: 1px solid var(--sa-steel);
}

.elementor-widget-woocommerce-products ul.products li.product .price {
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	color: var(--sa-amber) !important;
	padding: 0 16px 16px !important;
	background: var(--sa-charcoal);
}

@media (max-width: 1024px) {
	.elementor-widget-woocommerce-products ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.elementor-widget-woocommerce-products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	body.woocommerce-cart .elementor-widget-woocommerce-cart .elementor-widget-container,
	body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .elementor-widget-container,
	body.woocommerce-checkout .elementor-widget-woocommerce-checkout .elementor-widget-container {
		padding: 20px 16px;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
	.soldier-woo-content ul.products,
	.soldier-woo-content .products {
		grid-template-columns: repeat(3, 1fr);
	}

	.soldier-woo-content::before {
		font-size: 140px;
	}
}

@media (max-width: 768px) {
	.soldier-woo-content {
		padding: 40px 16px 60px;
	}

	.soldier-woo-content::before {
		font-size: 90px;
	}

	.soldier-shop-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 14px 16px;
	}

	.soldier-woo-content .woocommerce-ordering select {
		width: 100%;
	}

	.soldier-woo-content ul.products,
	.soldier-woo-content .products {
		grid-template-columns: repeat(2, 1fr);
		gap: 2px;
	}

	.soldier-woo-content ul.products li.product .soldier-loop-series {
		padding: 10px 12px 4px;
	}

	.soldier-woo-content ul.products li.product .soldier-loop-series-tag {
		font-size: 7px;
		padding: 2px 6px;
		letter-spacing: 0.14em;
	}

	.soldier-woo-content ul.products li.product .woocommerce-loop-product__title {
		font-size: 12px;
		padding: 4px 12px 8px;
		height: 44px;
		min-height: 44px;
		max-height: 44px;
	}

	.soldier-woo-content ul.products li.product .price {
		font-size: 16px;
		padding: 0 12px 10px;
	}

	.soldier-woo-content ul.products li.product .tbsc-price-row {
		font-size: 15px !important;
		padding: 2px 12px 6px !important;
	}

	.soldier-woo-content ul.products li.product .tbsc-meta {
		padding: 2px 12px 12px !important;
		font-size: 8px !important;
	}

	.soldier-woo-content ul.products li.product .button {
		font-size: 9px;
		padding: 9px 10px;
		margin: 0 12px 12px;
		letter-spacing: 0.15em;
	}

	/* Single product — stack columns */
	.soldier-woo-content div.product div.images,
	.soldier-woo-content div.product div.summary {
		width: 100%;
		float: none;
		margin-bottom: 28px;
		padding-left: 0;
		padding-right: 0;
	}

	.soldier-woo-content div.product .summary .product_title {
		font-size: 28px;
	}

	.soldier-woo-content div.product p.price,
	.soldier-woo-content div.product span.price {
		font-size: 28px;
	}

	.soldier-woo-content div.product form.cart .variations th.label {
		width: 90px;
	}

	/* Tables stack on mobile */
	.soldier-woo-content table.shop_table_responsive thead {
		display: none;
	}

	.soldier-woo-content table.shop_table_responsive tr {
		display: block;
		border: 1px solid var(--sa-steel);
		margin-bottom: 14px;
		background: var(--sa-charcoal);
	}

	.soldier-woo-content table.shop_table_responsive td {
		display: block;
		text-align: right;
		padding: 12px 14px;
		border-top: 1px solid var(--sa-steel);
	}

	.soldier-woo-content table.shop_table_responsive td:first-child {
		border-top: none;
	}

	.soldier-woo-content table.shop_table_responsive td::before {
		content: attr(data-title);
		float: left;
		font-family: var(--sa-font-mono);
		font-size: 10px;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--sa-smoke);
	}

	.soldier-woo-content div.product .woocommerce-tabs ul.tabs {
		flex-direction: column;
	}

	.soldier-woo-content div.product .woocommerce-tabs ul.tabs li {
		border-bottom: 1px solid var(--sa-steel);
	}

	.soldier-woo-content div.product .woocommerce-tabs ul.tabs li.active {
		border-left: 2px solid var(--sa-amber);
		border-bottom: 1px solid var(--sa-steel);
	}

	.soldier-woo-content div.product .woocommerce-tabs ul.tabs li a {
		padding: 12px 16px;
		font-size: 11px;
	}

	.soldier-woo-content .u-columns.col2-set {
		grid-template-columns: 1fr;
	}

	.soldier-woo-content .related > h2,
	.soldier-woo-content .upsells > h2 {
		font-size: 24px;
		padding-left: 32px;
	}
}

@media (max-width: 480px) {
	.soldier-woo-content ul.products,
	.soldier-woo-content .products {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
}

/* ============================================================
   MOBILE COMPREHENSIVE FIXES (≤768px) — SHOP, SINGLE, CART
   ============================================================ */

@media (max-width: 768px) {
	/* Single product summary + image stack VERTICAL di mobile.
	   Grid → 1 kolom × 3 baris (image / thumbs / summary). */
	.soldier-woo-content div.product,
	body.single-product .soldier-woo-content div.product {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto auto !important;
		column-gap: 0 !important;
	}

	.soldier-woo-content div.product div.images {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	.soldier-woo-content div.product .flex-control-thumbs,
	.soldier-woo-content div.product .bsi-thumbs {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	.soldier-woo-content div.product .summary,
	.soldier-woo-content div.product .summary.entry-summary {
		grid-column: 1 !important;
		grid-row: 3 !important;
	}

	.soldier-woo-content div.product div.images,
	.soldier-woo-content div.product .summary,
	.soldier-woo-content div.product .summary.entry-summary,
	.soldier-woo-content div.product .flex-control-thumbs,
	.soldier-woo-content div.product .bsi-thumbs,
	body.single-product .soldier-woo-content div.product div.images,
	body.single-product .soldier-woo-content div.product div.summary {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		clear: both !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-bottom: 24px !important;
		box-sizing: border-box;
	}

	.soldier-woo-content div.product .flex-control-thumbs,
	.soldier-woo-content div.product .bsi-thumbs {
		grid-template-columns: repeat(5, 1fr) !important;
		gap: 6px !important;
		margin-top: 12px !important;
	}

	/* Title — clamp font besar supaya gak overflow di narrow viewport */
	.soldier-woo-content div.product .summary .product_title {
		font-size: clamp(22px, 6vw, 30px) !important;
		line-height: 1.05 !important;
		word-break: break-word;
		hyphens: auto;
	}

	.soldier-woo-content div.product p.price,
	.soldier-woo-content div.product span.price,
	.soldier-woo-content div.product .summary .price {
		font-size: 26px !important;
	}

	/* Variant swatches — wrap horizontal, gak stack vertical */
	.soldier-woo-content .tober-swatch-list {
		flex-wrap: wrap !important;
		gap: 6px !important;
	}

	.soldier-woo-content .tober-swatch-wrapper .tober-swatch__item,
	.soldier-woo-content .tober-type-image .tober-swatch__item,
	.soldier-woo-content .tober-type-text .tober-swatch__item {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		font-size: 10px !important;
	}

	/* Variation table label kolom kecil-in supaya value column lebar */
	.soldier-woo-content div.product form.cart .variations th.label {
		width: 70px !important;
		font-size: 10px !important;
		padding: 6px 8px 6px 0 !important;
	}

	/* Quantity + add to cart full width row */
	.soldier-woo-content div.product form.cart .quantity {
		display: block;
		margin-bottom: 12px;
	}

	.soldier-woo-content div.product form.cart .quantity .qty {
		width: 100% !important;
		max-width: 120px;
	}

	.soldier-woo-content div.product form.cart button.single_add_to_cart_button,
	body.single-product div.product form.cart button.single_add_to_cart_button,
	.soldier-woo-content div.product .soldier-buy-now-button,
	body.single-product .soldier-buy-now-button {
		width: 100% !important;
		flex: 1 1 100% !important;
		display: flex !important;
		padding: 14px 20px !important;
	}

	/* Form cart layout di mobile — quantity full row, lalu 2 buttons full row each */
	.soldier-woo-content div.product form.cart .quantity {
		flex: 1 1 100% !important;
		display: block !important;
	}

	.soldier-woo-content div.product form.cart .quantity .qty,
	.soldier-woo-content div.product form.cart .quantity input.qty {
		width: 100% !important;
		max-width: 200px !important;
	}

	/* WhatsApp inline CTA full width */
	.soldier-wa-product-cta {
		flex: 1 1 100% !important;
		width: 100%;
		flex-direction: row;
		justify-content: center;
		text-align: left;
	}

	/* Related products grid → 2 kolom di mobile */
	.soldier-woo-content .related ul.products,
	.soldier-woo-content .upsells ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}

	/* Tabs description: full width tabs, padding lebih kecil */
	.soldier-woo-content div.product .woocommerce-tabs .panel {
		padding: 20px 16px !important;
	}

	/* Cart mobile — stack columns, tighter padding */
	body.woocommerce-cart .e-cart-layout-two-column,
	body.woocommerce-cart .e-cart__container {
		display: block !important;
	}

	body.woocommerce-cart .e-cart__column,
	body.woocommerce-cart .e-cart__column-start,
	body.woocommerce-cart .e-cart__column-end {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 18px;
	}

	body.woocommerce-cart .e-sticky-right-column {
		position: static !important; /* batalin sticky on mobile */
	}

	body.woocommerce-cart .e-cart-section,
	body.woocommerce-cart .e-shop-table,
	body.woocommerce-cart .e-cart-totals {
		padding: 16px !important;
	}

	/* Cart column layout mobile — reset desktop amber-left-border (20px padding)
	   karena kolom udah stacked vertical, padding cuma bikin overflow. */
	body.woocommerce-cart .e-cart__column.e-cart__column-start {
		border-left: none !important;
		border-top: 3px solid var(--sa-amber) !important;
		padding-left: 0 !important;
		padding-top: 16px !important;
	}

	/* Cart mobile — clean card layout per item.
	   Grid 80px image + 1fr info, X remove absolute top-right.
	   Row 1: image + (title + price stack)
	   Row 2: qty stepper + subtotal (split horizontal)
	*/
	body.woocommerce-cart .woocommerce-cart-form table.cart {
		table-layout: auto !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.woocommerce-cart .e-shop-table table.shop_table {
		display: block !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.cart thead {
		display: none !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.cart tbody {
		display: block !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.cart tr {
		display: grid !important;
		grid-template-columns: 80px 1fr auto !important;
		grid-auto-rows: min-content !important;
		gap: 6px 12px !important;
		padding: 14px 0 !important;
		border-top: 1px solid var(--sa-steel) !important;
		border-bottom: none !important;
		align-items: start;
		position: relative;
	}

	body.woocommerce-cart .woocommerce-cart-form table.cart tr:first-child {
		border-top: none !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.cart td {
		display: block !important;
		padding: 0 !important;
		border: none !important;
		text-align: left !important;
		min-width: 0 !important;
		max-width: 100% !important;
		width: auto !important;
		vertical-align: top !important;
	}

	/* Image — col 1, span row 1+2 (top + price row) */
	body.woocommerce-cart .woocommerce-cart-form table.cart td.product-thumbnail {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
		width: 80px !important;
		align-self: start !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.cart td.product-thumbnail img {
		width: 80px !important;
		height: 80px !important;
		min-width: 80px !important;
		max-width: 80px !important;
		min-height: 80px !important;
		max-height: 80px !important;
	}

	/* Title — col 2, row 1 */
	body.woocommerce-cart .woocommerce-cart-form table.cart td.product-name {
		grid-column: 2 !important;
		grid-row: 1 !important;
		display: block !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.cart td.product-name a {
		font-size: 13px !important;
		line-height: 1.3 !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
		display: block;
	}

	/* X remove — col 3 row 1, top-right corner inline */
	body.woocommerce-cart .woocommerce-cart-form table.cart td.product-remove {
		grid-column: 3 !important;
		grid-row: 1 !important;
		align-self: start !important;
		justify-self: end !important;
		position: static !important;
	}

	/* Price — col 2-3, row 2 (below title, same row as image bottom) */
	body.woocommerce-cart .woocommerce-cart-form table.cart td.product-price {
		grid-column: 2 / span 2 !important;
		grid-row: 2 !important;
		display: block !important;
		font-family: var(--sa-font-mono) !important;
		font-size: 12px !important;
		color: var(--sa-smoke) !important;
		letter-spacing: 0.08em;
		align-self: start !important;
	}

	/* Qty — col 1-2 row 3, full row spans below image */
	body.woocommerce-cart .woocommerce-cart-form table.cart td.product-quantity {
		grid-column: 1 / span 2 !important;
		grid-row: 3 !important;
		justify-self: start !important;
		margin-top: 6px !important;
	}

	/* Subtotal — col 3 row 3 (right side same row as qty) */
	body.woocommerce-cart .woocommerce-cart-form table.cart td.product-subtotal {
		grid-column: 3 !important;
		grid-row: 3 !important;
		font-size: 15px !important;
		font-weight: 700;
		color: var(--sa-amber) !important;
		text-align: right !important;
		align-self: center !important;
		justify-self: end !important;
		white-space: nowrap;
		margin-top: 6px !important;
		min-width: 0 !important;
	}

	/* Pastikan e-shop-table card gak overflow horizontal — strict width */
	body.woocommerce-cart .e-shop-table {
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box;
	}

	body.woocommerce-cart .woocommerce-cart-form {
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box;
	}

	/* Mobile: disable data-title pseudo from WC responsive table */
	body.woocommerce-cart .woocommerce-cart-form table.cart td::before {
		content: none !important;
		display: none !important;
	}

	/* Cart actions row (Coupon + Update Cart) — stack vertical full width di mobile.
	   Selector chain panjang biar menang specificity vs desktop rule
	   `.actions button[name="update_cart"] { width: auto }`. */
	body.woocommerce-cart .woocommerce-cart-form td.actions,
	body.woocommerce-cart td.actions {
		display: block !important;
		padding: 16px 0 !important;
		text-align: left !important;
	}

	body.woocommerce-cart .coupon,
	body.woocommerce-cart .actions .coupon {
		flex-direction: column !important;
		gap: 10px !important;
		margin-bottom: 14px !important;
		width: 100% !important;
		display: flex !important;
	}

	body.woocommerce-cart #coupon_code,
	body.woocommerce-cart input[name="coupon_code"],
	body.woocommerce-cart .coupon input[name="coupon_code"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		box-sizing: border-box !important;
	}

	body.woocommerce-cart button[name="apply_coupon"],
	body.woocommerce-cart button[name="update_cart"],
	body.woocommerce-cart .actions button[name="update_cart"],
	body.woocommerce-cart .actions button[name="apply_coupon"],
	body.woocommerce-cart .e-shop-table button[name="update_cart"],
	body.woocommerce-cart .e-shop-table button[name="apply_coupon"],
	body.woocommerce-cart .coupon button[name="apply_coupon"] {
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		text-align: center !important;
		padding: 14px 20px !important;
		font-size: 12px !important;
		box-sizing: border-box !important;
		white-space: nowrap !important;
	}

	/* Cart totals: padding ke 16px, font size standardize */
	body.woocommerce-cart .cart_totals table tr {
		padding: 12px 0 !important;
	}

	body.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
		font-size: 20px !important;
	}

	/* Section heading divider (Your cart, You may be interested) — kecilin */
	body.woocommerce-cart .elementor-divider__text,
	body.woocommerce-cart .elementor-divider__element {
		font-size: clamp(22px, 6vw, 32px) !important;
		padding-left: 28px !important;
	}

	body.woocommerce-cart .elementor-divider__text::before {
		width: 18px !important;
	}

	/* Page banner title (ALL PRODUCTS, etc) → ngecilin di mobile */
	.soldier-page-banner .banner-title,
	.soldier-woo-content .banner-title {
		font-size: clamp(32px, 9vw, 52px) !important;
	}
}

@media (max-width: 480px) {
	/* Related products → 1 kolom di phone kecil */
	.soldier-woo-content .related ul.products,
	.soldier-woo-content .upsells ul.products,
	body.woocommerce-cart .cross-sells ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Variant swatch sedikit lebih kecil */
	.soldier-woo-content .tober-swatch-wrapper .tober-swatch__item,
	.soldier-woo-content .tober-type-image .tober-swatch__item,
	.soldier-woo-content .tober-type-text .tober-swatch__item {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		min-height: 40px !important;
	}

	/* Single product title sangat kecil viewport */
	.soldier-woo-content div.product .summary .product_title {
		font-size: 22px !important;
	}

	/* Page banner: ngecilin lagi */
	.soldier-page-banner .banner-title,
	.soldier-woo-content .banner-title {
		font-size: clamp(28px, 10vw, 40px) !important;
	}

	/* Cart thumbnail kecilin */
	body.woocommerce-cart .woocommerce-cart-form table.cart td.product-thumbnail img {
		width: 64px !important;
		height: 64px !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.cart tr {
		grid-template-columns: 64px 1fr !important;
	}
}

/* ============================================================
   CHECKOUT PAGE — Tactical theme override.
   Page pakai Elementor Checkout widget + native WC form.
   Body class: body.woocommerce-checkout
   Container utama: .checkout.woocommerce-checkout (form)
   Elementor wrappers: .e-checkout__container, .e-checkout__column-start,
   .e-checkout__column-end, .e-checkout__order_review
   ============================================================ */

/* Body bg + base color */
body.woocommerce-checkout {
	background: var(--sa-black) !important;
}

/* Elementor checkout column wrappers — transparent, biarin section card
   di dalamnya yang punya bg */
body.woocommerce-checkout .e-checkout__container,
body.woocommerce-checkout .e-checkout__column,
body.woocommerce-checkout .e-checkout__column-start,
body.woocommerce-checkout .e-checkout__column-end,
body.woocommerce-checkout .e-checkout__column-inner {
	background: transparent !important;
	box-shadow: none !important;
}

/* Section cards di checkout — dark charcoal tactical */
body.woocommerce-checkout .e-checkout-section,
body.woocommerce-checkout .e-woocommerce-login-section,
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout #order_review_heading + #order_review {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	padding: 24px !important;
	margin-bottom: 18px !important;
	border-radius: 0 !important;
}

/* Order review (right column) → amber left border accent */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout .e-checkout__order_review,
body.woocommerce-checkout .e-checkout__order_review-2 {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-left: 3px solid var(--sa-amber) !important;
	padding: 24px !important;
	border-radius: 0 !important;
}

/* SEMUA heading di checkout → tactical font + style */
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-checkout h4,
body.woocommerce-checkout h5,
body.woocommerce-checkout .e-woocommerce-coupon-nudge,
body.woocommerce-checkout #order_review_heading {
	font-family: var(--sa-font-display) !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	letter-spacing: -0.01em !important;
	color: var(--sa-white) !important;
	background: transparent !important;
}

body.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading {
	font-size: clamp(20px, 2.4vw, 26px) !important;
	margin: 0 0 18px !important;
	padding: 0 0 12px 38px !important;
	border-bottom: 1px solid var(--sa-steel) !important;
	position: relative;
}

body.woocommerce-checkout h3::before,
body.woocommerce-checkout #order_review_heading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 24px;
	height: 1px;
	background: var(--sa-amber);
}

/* Elementor divider/heading widget di checkout */
body.woocommerce-checkout .elementor-divider__text,
body.woocommerce-checkout .elementor-divider__element {
	font-family: var(--sa-font-display) !important;
	font-weight: 900 !important;
	font-size: clamp(24px, 3vw, 36px) !important;
	text-transform: uppercase !important;
	color: var(--sa-white) !important;
	padding-left: 38px !important;
	position: relative;
}

body.woocommerce-checkout .elementor-divider__text::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	height: 1px;
	background: var(--sa-amber);
}

body.woocommerce-checkout .elementor-divider .elementor-divider-separator {
	display: block !important;
	border: none !important;
	background: transparent !important;
}

body.woocommerce-checkout .elementor-divider-separator::before,
body.woocommerce-checkout .elementor-divider-separator::after {
	display: none !important;
}

/* ============================================================
   CHECKOUT FORM — input/textarea/select tactical look
   ============================================================ */

/* Form row layout — preserve WC half/wide columns */
body.woocommerce-checkout form.checkout .form-row {
	display: block;
	margin: 0 0 16px;
	padding: 0;
}

body.woocommerce-checkout form.checkout .form-row-first {
	float: left;
	width: 48%;
	margin-right: 4%;
}

body.woocommerce-checkout form.checkout .form-row-last {
	float: right;
	width: 48%;
	margin-right: 0;
}

body.woocommerce-checkout form.checkout .form-row-wide {
	clear: both;
	width: 100%;
}

body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout form.checkout .woocommerce-additional-fields__field-wrapper {
	overflow: hidden; /* clear floats */
}

/* Labels */
body.woocommerce-checkout form.checkout label,
body.woocommerce-checkout form.checkout .form-row label {
	font-family: var(--sa-font-mono) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--sa-mist) !important;
	margin-bottom: 8px !important;
	display: block !important;
}

body.woocommerce-checkout form.checkout label .required,
body.woocommerce-checkout form.checkout abbr.required {
	color: var(--sa-amber) !important;
	border: none !important;
	text-decoration: none !important;
	margin-left: 4px;
}

/* Inputs / textareas / select */
body.woocommerce-checkout form.checkout input.input-text,
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout form.checkout select,
body.woocommerce-checkout form.checkout .select2-container .select2-selection,
body.woocommerce-checkout form.checkout .select2-selection--single {
	background: var(--sa-gunmetal) !important;
	color: var(--sa-white) !important;
	border: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
	padding: 12px 14px !important;
	font-family: var(--sa-font-body) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease;
	min-height: 44px;
}

body.woocommerce-checkout form.checkout input.input-text:focus,
body.woocommerce-checkout form.checkout textarea:focus,
body.woocommerce-checkout form.checkout select:focus,
body.woocommerce-checkout form.checkout .select2-container--focus .select2-selection,
body.woocommerce-checkout form.checkout .select2-container--open .select2-selection {
	border-color: var(--sa-amber) !important;
	outline: none !important;
	box-shadow: none !important;
}

body.woocommerce-checkout form.checkout textarea {
	min-height: 100px !important;
	resize: vertical;
}

/* Select2 dropdown — dark */
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--sa-white) !important;
	line-height: 22px !important;
	padding-left: 0 !important;
	padding-right: 20px !important;
}

body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 12px !important;
}

body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow b {
	border-color: var(--sa-amber) transparent transparent transparent !important;
}

.select2-dropdown {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
	color: var(--sa-white) !important;
}

.select2-dropdown .select2-search__field {
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	color: var(--sa-white) !important;
	padding: 8px 10px !important;
}

.select2-dropdown .select2-results__option {
	color: var(--sa-mist) !important;
	padding: 10px 14px !important;
}

.select2-dropdown .select2-results__option--highlighted[aria-selected],
.select2-dropdown .select2-results__option--highlighted {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

.select2-dropdown .select2-results__option[aria-selected="true"] {
	background: var(--sa-gunmetal) !important;
	color: var(--sa-amber) !important;
}

/* Field validation states */
body.woocommerce-checkout form.checkout .form-row.woocommerce-validated input.input-text,
body.woocommerce-checkout form.checkout .form-row.woocommerce-validated select {
	border-color: var(--sa-olive) !important;
}

body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid select {
	border-color: var(--sa-red) !important;
}

/* Checkbox + radio */
body.woocommerce-checkout form.checkout input[type="checkbox"],
body.woocommerce-checkout form.checkout input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	margin-right: 8px !important;
	accent-color: var(--sa-amber);
	cursor: pointer;
	vertical-align: middle;
}

body.woocommerce-checkout form.checkout label.checkbox,
body.woocommerce-checkout form.checkout .create-account label,
body.woocommerce-checkout form.checkout .woocommerce-form__label-for-checkbox {
	font-family: var(--sa-font-body) !important;
	font-size: 13px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--sa-mist) !important;
	display: flex !important;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}

/* ============================================================
   LOGIN / COUPON NUDGE — toggle sections di atas form
   ============================================================ */

body.woocommerce-checkout .e-woocommerce-login-section,
body.woocommerce-checkout .e-woocommerce-login-nudge,
body.woocommerce-checkout .e-woocommerce-coupon-nudge {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-left: 3px solid var(--sa-amber) !important;
	padding: 14px 20px !important;
	margin-bottom: 14px !important;
	color: var(--sa-mist) !important;
	font-size: 13px;
}

body.woocommerce-checkout .e-woocommerce-login-anchor,
body.woocommerce-checkout .showcoupon,
body.woocommerce-checkout .checkout_coupon_toggle {
	color: var(--sa-amber) !important;
	text-decoration: none !important;
	border-bottom: 1px dashed rgba(212, 152, 46, 0.4);
	font-weight: 600;
}

body.woocommerce-checkout .e-woocommerce-login-anchor:hover,
body.woocommerce-checkout .showcoupon:hover {
	color: var(--sa-amber) !important;
	border-bottom-color: var(--sa-amber);
}

/* Login form & coupon form panels (collapsed by default) */
body.woocommerce-checkout form.login,
body.woocommerce-checkout form.checkout_coupon {
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	padding: 18px !important;
	margin: 10px 0 18px !important;
}

body.woocommerce-checkout form.checkout_coupon .form-row {
	display: flex !important;
	gap: 8px;
	margin: 0 !important;
	flex-wrap: wrap;
}

body.woocommerce-checkout form.checkout_coupon .form-row input[name="coupon_code"] {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
}

body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
	background: transparent !important;
	color: var(--sa-mist) !important;
	border: 1px solid var(--sa-steel) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	padding: 12px 22px !important;
	border-radius: 0 !important;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.2s;
}

body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover {
	border-color: var(--sa-amber) !important;
	color: var(--sa-amber) !important;
}

/* ============================================================
   ORDER REVIEW TABLE — right column summary
   ============================================================ */

body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
	border: none !important;
	border-collapse: collapse !important;
	background: transparent !important;
	width: 100% !important;
	margin: 0 0 18px !important;
}

body.woocommerce-checkout table.shop_table thead th {
	background: var(--sa-gunmetal) !important;
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	padding: 14px 12px !important;
	border-bottom: 1px solid var(--sa-steel) !important;
	text-align: left;
}

body.woocommerce-checkout table.shop_table tbody tr,
body.woocommerce-checkout table.shop_table tfoot tr {
	background: transparent !important;
	border-top: 1px solid var(--sa-steel) !important;
}

body.woocommerce-checkout table.shop_table tbody td,
body.woocommerce-checkout table.shop_table tfoot td,
body.woocommerce-checkout table.shop_table tfoot th {
	padding: 14px 12px !important;
	color: var(--sa-white) !important;
	background: transparent !important;
	border: none !important;
}

body.woocommerce-checkout table.shop_table .product-name {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display);
	font-weight: 600;
	font-size: 14px;
}

body.woocommerce-checkout table.shop_table .product-name .product-quantity {
	color: var(--sa-amber);
	font-weight: 600;
	margin-left: 6px;
}

body.woocommerce-checkout table.shop_table .product-name .variation {
	color: var(--sa-smoke);
	font-size: 12px;
	margin: 4px 0 0;
	font-family: var(--sa-font-mono);
	letter-spacing: 0.05em;
}

body.woocommerce-checkout table.shop_table .product-name .variation dt {
	display: inline;
	margin-right: 4px;
	font-weight: 600;
}

body.woocommerce-checkout table.shop_table .product-name .variation dd {
	display: inline;
	margin: 0 12px 0 0;
}

body.woocommerce-checkout table.shop_table .product-total {
	color: var(--sa-amber);
	font-family: var(--sa-font-display);
	font-weight: 700;
	text-align: right;
	font-size: 14px;
}

body.woocommerce-checkout table.shop_table tfoot th {
	color: var(--sa-mist) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	text-align: left;
}

body.woocommerce-checkout table.shop_table tfoot .order-total th {
	color: var(--sa-white) !important;
	font-size: 13px !important;
}

body.woocommerce-checkout table.shop_table tfoot .order-total td,
body.woocommerce-checkout table.shop_table tfoot .order-total .woocommerce-Price-amount {
	color: var(--sa-amber) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	text-align: right;
}

body.woocommerce-checkout table.shop_table tfoot td .woocommerce-Price-amount {
	color: var(--sa-white);
	font-family: var(--sa-font-display);
	font-weight: 700;
}

/* ============================================================
   SHIPPING ROW — CLEAN VERSION
   ============================================================
   Layout final yang simpel + predictable:
   tr.shipping → 1 row card (gunmetal bg + steel border 1px)
     th "Shipment" → label di atas (amber mono, no padding kiri/kanan
       beyond container)
     td (block container) → methods list di bawah
       ul → list flex column
         li → tiap method box (gunmetal lebih gelap + border, full row)
   ============================================================ */

/* Reset semua table layout untuk shipping row */
body.woocommerce-checkout table.shop_table tr.shipping,
body.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	border: 1px solid var(--sa-steel) !important;
	padding: 0 !important;
	margin: 10px 0 !important;
	box-sizing: border-box !important;
}

/* th = label "SHIPMENT" — sebuah baris header dengan bg gunmetal */
body.woocommerce-checkout table.shop_table tr.shipping > th,
body.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals > th {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	background: var(--sa-gunmetal) !important;
	border: none !important;
	border-bottom: 1px solid var(--sa-steel) !important;
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	text-align: left !important;
	box-sizing: border-box !important;
}

/* td = methods container — block dengan padding kecil, bg charcoal */
body.woocommerce-checkout table.shop_table tr.shipping > td,
body.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals > td {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 8px !important;
	margin: 0 !important;
	background: var(--sa-charcoal) !important;
	border: none !important;
	text-align: left !important;
	box-sizing: border-box !important;
}

/* Semua wrapper antara td dan ul (kalau Biteship inject .package wrapper) */
body.woocommerce-checkout tr.shipping > td > div,
body.woocommerce-checkout tr.shipping > td > section,
body.woocommerce-checkout tr.shipping > td > .package,
body.woocommerce-checkout tr.woocommerce-shipping-totals > td > div,
body.woocommerce-checkout tr.woocommerce-shipping-totals > td > section,
body.woocommerce-checkout tr.woocommerce-shipping-totals > td > .package {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	box-sizing: border-box !important;
}

/* ul = method list (block layout — bukan flex untuk simplicity) */
body.woocommerce-checkout #shipping_method,
body.woocommerce-checkout .woocommerce-shipping-methods,
body.woocommerce-checkout ul.shipping_method {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* li = tiap method box — block row dengan internal flex */
body.woocommerce-checkout #shipping_method > li,
body.woocommerce-checkout .woocommerce-shipping-methods > li,
body.woocommerce-checkout ul.shipping_method > li {
	display: flex !important;
	width: 100% !important;
	max-width: 100% !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 11px 12px !important;
	margin: 0 0 4px !important;
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	color: var(--sa-white) !important;
	font-family: var(--sa-font-body) !important;
	font-size: 13px !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s !important;
	float: none !important;
	clear: both !important;
}

body.woocommerce-checkout #shipping_method > li:last-child,
body.woocommerce-checkout .woocommerce-shipping-methods > li:last-child {
	margin-bottom: 0 !important;
}

body.woocommerce-checkout #shipping_method > li:hover {
	border-color: var(--sa-amber) !important;
}

body.woocommerce-checkout #shipping_method > li:has(input:checked) {
	border-color: var(--sa-amber) !important;
	background: var(--sa-charcoal) !important;
}

/* Radio button */
body.woocommerce-checkout #shipping_method > li > input[type="radio"],
body.woocommerce-checkout .woocommerce-shipping-methods > li > input[type="radio"] {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
	accent-color: var(--sa-amber) !important;
	cursor: pointer !important;
}

/* Label — flex 1 untuk fill remaining space, dengan price di akhir */
body.woocommerce-checkout #shipping_method > li > label,
body.woocommerce-checkout .woocommerce-shipping-methods > li > label,
body.woocommerce-checkout ul.shipping_method > li > label {
	display: flex !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--sa-white) !important;
	font-family: var(--sa-font-body) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
}

body.woocommerce-checkout #shipping_method > li > label .woocommerce-Price-amount,
body.woocommerce-checkout .woocommerce-shipping-methods > li > label .woocommerce-Price-amount {
	margin-left: auto !important;
	flex-shrink: 0 !important;
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	white-space: nowrap !important;
}

/* Shipping calculator notice */
body.woocommerce-checkout .woocommerce-shipping-calculator,
body.woocommerce-checkout .woocommerce-shipping-destination {
	display: block !important;
	width: 100% !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	color: var(--sa-mist) !important;
	font-size: 12px !important;
}

/* MOBILE — sedikit lebih compact */
@media (max-width: 768px) {
	body.woocommerce-checkout #shipping_method > li,
	body.woocommerce-checkout .woocommerce-shipping-methods > li {
		padding: 10px !important;
		gap: 8px !important;
	}
	body.woocommerce-checkout #shipping_method > li > label,
	body.woocommerce-checkout .woocommerce-shipping-methods > li > label {
		font-size: 12px !important;
		gap: 8px !important;
	}
	body.woocommerce-checkout #shipping_method > li > label .woocommerce-Price-amount {
		font-size: 13px !important;
	}
}

/* ============================================================
   PAYMENT METHODS — Midtrans, dll
   ============================================================ */

body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout ul.wc_payment_methods {
	background: transparent !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
	border: none !important;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method,
body.woocommerce-checkout ul.wc_payment_methods li {
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	margin: 0 0 8px !important;
	padding: 14px 18px !important;
	border-radius: 0 !important;
	list-style: none !important;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
	border-color: var(--sa-amber) !important;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
	font-family: var(--sa-font-display) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--sa-white) !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	margin: 0 !important;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method img {
	max-height: 28px;
	margin-left: 8px;
	vertical-align: middle;
}

body.woocommerce-checkout #payment ul.payment_methods li .payment_box {
	background: var(--sa-charcoal) !important;
	color: var(--sa-mist) !important;
	border: none !important;
	border-top: 1px solid var(--sa-steel) !important;
	margin: 14px -18px -14px !important;
	padding: 14px 18px !important;
	font-size: 13px;
	line-height: 1.6;
}

body.woocommerce-checkout #payment ul.payment_methods li .payment_box::before,
body.woocommerce-checkout #payment ul.payment_methods li .payment_box::after {
	display: none !important;
}

body.woocommerce-checkout #payment ul.payment_methods li .payment_box p:last-child {
	margin-bottom: 0;
}

/* Terms checkbox container */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	padding: 16px !important;
	margin: 16px 0 !important;
	color: var(--sa-mist) !important;
	font-size: 13px;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions {
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	padding: 14px !important;
	margin: 10px 0 !important;
	max-height: 220px;
	overflow-y: auto;
	color: var(--sa-mist);
	font-size: 13px;
	line-height: 1.6;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions h1,
body.woocommerce-checkout .woocommerce-terms-and-conditions h2,
body.woocommerce-checkout .woocommerce-terms-and-conditions h3,
body.woocommerce-checkout .woocommerce-terms-and-conditions h4 {
	color: var(--sa-white) !important;
	font-size: 14px !important;
	margin: 12px 0 6px !important;
	letter-spacing: 0 !important;
}

/* ============================================================
   PLACE ORDER BUTTON — amber tactical, prominent
   ============================================================ */

body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order,
body.woocommerce-checkout .form-row.place-order button#place_order {
	background: var(--sa-amber) !important;
	background-color: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	border: 2px solid var(--sa-amber) !important;
	border-radius: 0 !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	padding: 16px 32px !important;
	cursor: pointer;
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	margin-top: 14px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	white-space: nowrap !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout button#place_order:hover {
	background: var(--sa-black) !important;
	background-color: var(--sa-black) !important;
	color: var(--sa-amber) !important;
	border-color: var(--sa-amber) !important;
}

/* Notices / errors di checkout */
body.woocommerce-checkout .woocommerce-NoticeGroup,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info {
	background: var(--sa-charcoal) !important;
	color: var(--sa-mist) !important;
	border: 1px solid var(--sa-steel) !important;
	border-left: 3px solid var(--sa-amber) !important;
	padding: 14px 18px !important;
	margin-bottom: 14px !important;
	border-radius: 0 !important;
	font-size: 13px;
}

body.woocommerce-checkout .woocommerce-error {
	border-left-color: var(--sa-red) !important;
}

body.woocommerce-checkout .woocommerce-error li,
body.woocommerce-checkout .woocommerce-message li {
	color: var(--sa-mist) !important;
}

/* Strong/links di checkout */
body.woocommerce-checkout .woocommerce-checkout strong,
body.woocommerce-checkout .woocommerce-checkout b {
	color: var(--sa-white);
	font-weight: 700;
}

body.woocommerce-checkout a:not(.button) {
	color: var(--sa-amber);
	text-decoration: none;
	transition: color 0.2s;
}

body.woocommerce-checkout a:not(.button):hover {
	color: #e0a030;
}

/* ============================================================
   MOBILE — Checkout (≤768px)
   ============================================================ */

@media (max-width: 768px) {
	/* Stack columns vertical */
	body.woocommerce-checkout .e-checkout__container {
		display: block !important;
	}

	body.woocommerce-checkout .e-checkout__column,
	body.woocommerce-checkout .e-checkout__column-start,
	body.woocommerce-checkout .e-checkout__column-end {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 14px;
	}

	body.woocommerce-checkout .e-sticky-right-column {
		position: static !important;
	}

	/* Form rows stacked */
	body.woocommerce-checkout form.checkout .form-row-first,
	body.woocommerce-checkout form.checkout .form-row-last {
		float: none !important;
		width: 100% !important;
		margin-right: 0 !important;
	}

	/* Section card tighter padding */
	body.woocommerce-checkout .e-checkout-section,
	body.woocommerce-checkout .woocommerce-billing-fields,
	body.woocommerce-checkout .woocommerce-additional-fields,
	body.woocommerce-checkout #order_review {
		padding: 18px !important;
	}

	body.woocommerce-checkout h3,
	body.woocommerce-checkout #order_review_heading {
		font-size: 18px !important;
	}

	body.woocommerce-checkout form.checkout input.input-text,
	body.woocommerce-checkout form.checkout textarea,
	body.woocommerce-checkout form.checkout select {
		font-size: 16px !important; /* prevent iOS zoom */
		padding: 12px !important;
	}

	body.woocommerce-checkout #place_order {
		font-size: 14px !important;
		padding: 16px 20px !important;
		letter-spacing: 0.16em !important;
	}
}

/* ============================================================
   CHECKOUT — Force amber accent + hilangkan white default outline
   Elementor checkout widget render outer wrapper dengan box-shadow/border
   putih default (efek "card lift"). Replace dengan amber tactical accent.
   ============================================================ */

/* Elementor checkout widget + container — hilangkan SEMUA box-shadow/outline
   putih default */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page *,
body.woocommerce-checkout .e-checkout-layout-two-column,
body.woocommerce-checkout .e-checkout-layout-two-column *,
body.woocommerce-checkout .elementor-element {
	box-shadow: none !important;
	outline: none !important;
}

/* LEFT column (.e-checkout__column-start) — amber left border accent untuk
   konsisten sama RIGHT column yang juga amber left border. */
body.woocommerce-checkout .e-checkout__column.e-checkout__column-start {
	background: transparent !important;
	border: none !important;
	border-left: 3px solid var(--sa-amber) !important;
	padding-left: 20px !important;
	box-shadow: none !important;
}

/* Pastikan RIGHT column tetap amber left border (sudah ada di rule lain
   tapi re-assert utk jaga-jaga) */
body.woocommerce-checkout .e-checkout__column.e-checkout__column-end {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* col2-set & col-1/col-2 (native WC layout containers) — strip default border
   yang kadang putih */
body.woocommerce-checkout .col2-set,
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Elementor button "Return Cart" — tactical link style */
body.woocommerce-checkout .elementor-button-link,
body.woocommerce-checkout .elementor-button.elementor-button-link {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--sa-amber) !important;
	border: 1px solid var(--sa-amber) !important;
	border-radius: 0 !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	padding: 10px 22px !important;
	transition: all 0.2s ease;
	box-shadow: none !important;
	text-shadow: none !important;
}

body.woocommerce-checkout .elementor-button-link:hover,
body.woocommerce-checkout .elementor-button.elementor-button-link:hover {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	border-color: var(--sa-amber) !important;
}

body.woocommerce-checkout .elementor-button-link .elementor-button-icon i {
	color: inherit !important;
}

/* Mobile: kalau column stack, left amber border tetap visible di atas */
@media (max-width: 768px) {
	body.woocommerce-checkout .e-checkout__column.e-checkout__column-start {
		border-left: none !important;
		border-top: 3px solid var(--sa-amber) !important;
		padding-left: 0 !important;
		padding-top: 16px !important;
	}
}

/* ============================================================
   CHECKOUT — TOP HEADER STRIP (LOGO + LABEL + RETURN CART)
   + COUNTDOWN TIMER SECTION
   ============================================================
   Page checkout dibuild via Elementor: ada section custom di atas billing
   form berisi (LEFT) logo + "Checkout" label, (RIGHT) tombol Return Cart,
   lalu section kedua berisi countdown timer "Your order is reserved for".
   Default Elementor data set bg putih → clash sama tactical dark theme.

   Element IDs di-extract dari _elementor_data DB:
   - 18f2fb5e = wrapper top strip (logo row)
   - 67edfc22 = inner left column (logo + heading)
   - 5383c5bc = inner right column (Return Cart button)
   - 39696e0e = image widget LOGO (Logo-1.png — versi DARK)
   - 7bbbb4f9 = heading widget "Checkout"
   - 34cb5ea3 = wrapper countdown section
   - 2f51634 = inner container countdown
   - bd3064 = countdown card
   ============================================================ */

/* Top strip + countdown wrapper sections → tactical black bg */
body.woocommerce-checkout .elementor-element.elementor-element-18f2fb5e,
body.woocommerce-checkout .elementor-element.elementor-element-67edfc22,
body.woocommerce-checkout .elementor-element.elementor-element-5383c5bc,
body.woocommerce-checkout .elementor-element.elementor-element-34cb5ea3 {
	background: var(--sa-black) !important;
	background-color: var(--sa-black) !important;
	background-image: none !important;
}

/* Countdown inner cards → charcoal panel dengan amber accent */
body.woocommerce-checkout .elementor-element.elementor-element-2f51634,
body.woocommerce-checkout .elementor-element.elementor-element-bd3064 {
	background: var(--sa-charcoal) !important;
	background-color: var(--sa-charcoal) !important;
	background-image: none !important;
	border: 1px solid var(--sa-steel) !important;
	border-top: 2px solid var(--sa-amber) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Border antara logo column dan return cart column — pakai amber-translucent
   bukan abu default biar konsisten sama vibe tactical */
body.woocommerce-checkout .elementor-element.elementor-element-67edfc22 {
	border-color: var(--sa-steel) !important;
}

/* Logo image (id 39696e0e) — Logo-1.png itu versi DARK (hitam di white bg).
   Sekarang bg-nya udah black, jadi logo gak keliatan. Pakai filter
   brightness(0) invert(1) buat flip ke putih — sama persis effect kayak
   logo_invert option di [soldier_header] shortcode. */
body.woocommerce-checkout .elementor-element.elementor-element-39696e0e img,
body.woocommerce-checkout .elementor-element.elementor-element-39696e0e .elementor-widget-container img {
	filter: brightness(0) invert(1) !important;
}

/* "Checkout" label heading — text putih, border separator pakai amber */
body.woocommerce-checkout .elementor-element.elementor-element-7bbbb4f9,
body.woocommerce-checkout .elementor-element.elementor-element-7bbbb4f9 h1,
body.woocommerce-checkout .elementor-element.elementor-element-7bbbb4f9 h2,
body.woocommerce-checkout .elementor-element.elementor-element-7bbbb4f9 h3,
body.woocommerce-checkout .elementor-element.elementor-element-7bbbb4f9 h4,
body.woocommerce-checkout .elementor-element.elementor-element-7bbbb4f9 h5,
body.woocommerce-checkout .elementor-element.elementor-element-7bbbb4f9 .elementor-heading-title {
	color: var(--sa-white) !important;
	border-color: var(--sa-amber) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

/* "Your order is reserved for :" heading → mist text */
body.woocommerce-checkout .elementor-element.elementor-element-4c46074a,
body.woocommerce-checkout .elementor-element.elementor-element-4c46074a h1,
body.woocommerce-checkout .elementor-element.elementor-element-4c46074a h2,
body.woocommerce-checkout .elementor-element.elementor-element-4c46074a h3,
body.woocommerce-checkout .elementor-element.elementor-element-4c46074a h4,
body.woocommerce-checkout .elementor-element.elementor-element-4c46074a h5,
body.woocommerce-checkout .elementor-element.elementor-element-4c46074a .elementor-heading-title {
	color: var(--sa-mist) !important;
	font-family: var(--sa-font-mono) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.16em !important;
	font-size: 12px !important;
}

/* Countdown widget — numbers & labels jadi amber/white */
body.woocommerce-checkout .elementor-widget-countdown,
body.woocommerce-checkout .elementor-widget-countdown .elementor-countdown-wrapper,
body.woocommerce-checkout .elementor-widget-countdown .elementor-countdown-item {
	background: transparent !important;
	color: var(--sa-white) !important;
}

body.woocommerce-checkout .elementor-widget-countdown .elementor-countdown-digits {
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 800 !important;
}

body.woocommerce-checkout .elementor-widget-countdown .elementor-countdown-label {
	color: var(--sa-mist) !important;
	font-family: var(--sa-font-mono) !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	font-size: 10px !important;
}

/* Return Cart button (id 475f7235) — amber-bordered ghost button konsisten
   sama style button lain di tema. Override default gradient. */
body.woocommerce-checkout .elementor-element.elementor-element-475f7235 .elementor-button-link,
body.woocommerce-checkout .elementor-element.elementor-element-475f7235 a.elementor-button {
	background: transparent !important;
	background-image: none !important;
	color: var(--sa-amber) !important;
	border: 1px solid var(--sa-amber) !important;
	border-radius: 0 !important;
	font-family: var(--sa-font-mono) !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 10px 18px !important;
	transition: all 0.25s ease !important;
}

body.woocommerce-checkout .elementor-element.elementor-element-475f7235 .elementor-button-link:hover,
body.woocommerce-checkout .elementor-element.elementor-element-475f7235 a.elementor-button:hover {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

body.woocommerce-checkout .elementor-element.elementor-element-475f7235 .elementor-button-icon i,
body.woocommerce-checkout .elementor-element.elementor-element-475f7235 .elementor-button-icon {
	color: inherit !important;
}

/* ============================================================
   ORDER RECEIVED / THANK YOU PAGE (page-id-737)
   ============================================================
   Page Order Summary di-build via Elementor. Markup utama (extract
   dari _elementor_data):
   - Container 5e46df6c (bg classic, likely white) → top strip
     dengan logo + "Thank You" heading 359940c1
   - Container 22cbbc92 (bg #FFFEFE = WHITE) → wrapper details box
     yg user complaint
   - Container 6fbfc12e → 4 icon-box info section
   - Widget 'woocommerce-purchase-summary' → render order details
   ============================================================ */

body.woocommerce-order-received,
body.woocommerce-checkout.woocommerce-order-received {
	background: var(--sa-black) !important;
}

/* Top strip section (logo + Thank You heading) — force black */
body.woocommerce-order-received .elementor-element.elementor-element-5e46df6c,
body.woocommerce-order-received .elementor-element.elementor-element-16272ad6 {
	background: var(--sa-black) !important;
	background-color: var(--sa-black) !important;
	background-image: none !important;
}

/* Outer wrapper container 4b02a881 + WHITE inner 22cbbc92 (yg user complain) */
body.woocommerce-order-received .elementor-element.elementor-element-4b02a881,
body.woocommerce-order-received .elementor-element.elementor-element-22cbbc92 {
	background: var(--sa-charcoal) !important;
	background-color: var(--sa-charcoal) !important;
	background-image: none !important;
	border: 1px solid var(--sa-steel) !important;
	border-top: 2px solid var(--sa-amber) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Info boxes section (4 icon-boxes "What's Next") */
body.woocommerce-order-received .elementor-element.elementor-element-6fbfc12e {
	background: var(--sa-black) !important;
	background-color: var(--sa-black) !important;
}

/* "Thank You" heading — putih display font dengan amber separator */
body.woocommerce-order-received .elementor-element.elementor-element-359940c1,
body.woocommerce-order-received .elementor-element.elementor-element-359940c1 h1,
body.woocommerce-order-received .elementor-element.elementor-element-359940c1 h2,
body.woocommerce-order-received .elementor-element.elementor-element-359940c1 h3,
body.woocommerce-order-received .elementor-element.elementor-element-359940c1 .elementor-heading-title {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	border-color: var(--sa-amber) !important;
}

/* Logo image — flip dark logo jadi putih (sama kayak checkout) */
body.woocommerce-order-received .elementor-widget-image img {
	filter: brightness(0) invert(1) !important;
}

/* Override per logo image yang specifik di top strip */
body.woocommerce-order-received .elementor-element-5e46df6c .elementor-widget-image img,
body.woocommerce-order-received .elementor-element-16272ad6 .elementor-widget-image img {
	filter: brightness(0) invert(1) !important;
}

/* WC notice "Terima kasih. Pesanan Anda telah diterima." */
body.woocommerce-order-received .woocommerce-notice,
body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received p.woocommerce-thankyou-order-received {
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-left: 3px solid var(--sa-amber) !important;
	border-radius: 0 !important;
	color: var(--sa-white) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	padding: 18px 22px !important;
	margin: 0 0 28px !important;
	text-align: left !important;
}

/* Order overview list (Order Number, Date, Total, Payment Method) */
body.woocommerce-order-received ul.woocommerce-thankyou-order-details,
body.woocommerce-order-received ul.order_details {
	list-style: none !important;
	margin: 0 0 32px !important;
	padding: 20px 22px !important;
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-radius: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px 32px !important;
}

body.woocommerce-order-received ul.woocommerce-thankyou-order-details li,
body.woocommerce-order-received ul.order_details li {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	color: var(--sa-mist) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 1 1 auto !important;
}

body.woocommerce-order-received ul.woocommerce-thankyou-order-details li strong,
body.woocommerce-order-received ul.order_details li strong {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	margin-top: 4px !important;
}

body.woocommerce-order-received ul.woocommerce-thankyou-order-details li.total strong,
body.woocommerce-order-received ul.order_details li.total strong {
	color: var(--sa-amber) !important;
}

/* "Order Details" section heading */
body.woocommerce-order-received .woocommerce-order-details h2,
body.woocommerce-order-received .woocommerce-customer-details h2,
body.woocommerce-order-received h2.woocommerce-order-details__title,
body.woocommerce-order-received h2.woocommerce-column__title {
	font-family: var(--sa-font-display) !important;
	font-weight: 900 !important;
	font-size: clamp(22px, 3vw, 32px) !important;
	color: var(--sa-white) !important;
	text-transform: uppercase !important;
	letter-spacing: -0.01em !important;
	margin: 28px 0 18px !important;
	padding-left: 38px !important;
	position: relative !important;
	border: none !important;
}

body.woocommerce-order-received .woocommerce-order-details h2::before,
body.woocommerce-order-received .woocommerce-customer-details h2::before,
body.woocommerce-order-received h2.woocommerce-order-details__title::before,
body.woocommerce-order-received h2.woocommerce-column__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	height: 2px;
	background: var(--sa-amber);
}

/* Order Details table */
body.woocommerce-order-received table.shop_table,
body.woocommerce-order-received table.woocommerce-table--order-details,
body.woocommerce-order-received table.order_details {
	width: 100% !important;
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-collapse: collapse !important;
	margin: 0 0 28px !important;
}

body.woocommerce-order-received table.shop_table thead th,
body.woocommerce-order-received table.order_details thead th {
	background: var(--sa-black) !important;
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	padding: 14px 16px !important;
	border-bottom: 2px solid var(--sa-amber) !important;
	text-align: left !important;
}

body.woocommerce-order-received table.shop_table thead th:last-child,
body.woocommerce-order-received table.order_details thead th:last-child {
	text-align: right !important;
}

body.woocommerce-order-received table.shop_table tbody td,
body.woocommerce-order-received table.order_details tbody td {
	padding: 14px 16px !important;
	color: var(--sa-white) !important;
	background: var(--sa-gunmetal) !important;
	border-top: 1px solid var(--sa-steel) !important;
	font-size: 14px !important;
	vertical-align: top !important;
}

body.woocommerce-order-received table.shop_table tbody td.product-total,
body.woocommerce-order-received table.shop_table tbody td.product-quantity {
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 700 !important;
	text-align: right !important;
}

body.woocommerce-order-received table.shop_table .product-name a {
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-display) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

body.woocommerce-order-received table.shop_table .product-name a:hover {
	color: var(--sa-white) !important;
}

body.woocommerce-order-received table.shop_table tfoot th,
body.woocommerce-order-received table.shop_table tfoot td {
	padding: 12px 16px !important;
	color: var(--sa-mist) !important;
	background: var(--sa-charcoal) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	border-top: 1px solid var(--sa-steel) !important;
}

body.woocommerce-order-received table.shop_table tfoot td {
	text-align: right !important;
}

body.woocommerce-order-received table.shop_table tfoot tr:last-child th,
body.woocommerce-order-received table.shop_table tfoot tr:last-child td,
body.woocommerce-order-received table.shop_table tfoot .order-total th,
body.woocommerce-order-received table.shop_table tfoot .order-total td {
	color: var(--sa-amber) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	border-top: 2px solid var(--sa-amber) !important;
}

body.woocommerce-order-received table.shop_table tfoot .order-total .amount,
body.woocommerce-order-received table.shop_table tfoot .order-total .woocommerce-Price-amount {
	color: var(--sa-amber) !important;
	font-size: 20px !important;
	font-family: var(--sa-font-display) !important;
}

/* Action buttons di tabel: Bayar, Batal */
body.woocommerce-order-received table.shop_table .button,
body.woocommerce-order-received .woocommerce-button,
body.woocommerce-order-received p.order-again .button {
	background: transparent !important;
	color: var(--sa-amber) !important;
	border: 1px solid var(--sa-amber) !important;
	border-radius: 0 !important;
	padding: 10px 20px !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: all 0.2s !important;
	display: inline-block !important;
	margin: 4px !important;
}

body.woocommerce-order-received table.shop_table .button:hover,
body.woocommerce-order-received .woocommerce-button:hover {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

/* ============================================================
   CUSTOMER ADDRESSES — Billing + Shipping address blocks
   ============================================================
   Markup WC standar (di order received page):
     <section class="woocommerce-customer-details">
       <section class="woocommerce-columns--addresses col2-set addresses">
         <div class="woocommerce-column--billing-address col-1">
           <h2 class="woocommerce-column__title">Billing</h2>
           <address>...</address>
         </div>
         <div class="woocommerce-column--shipping-address col-2">
           <h2 class="woocommerce-column__title">Shipping</h2>
           <address>...</address>
         </div>
       </section>
     </section>

   Custom template kit kadang inject extra "Payment Info" section
   dengan Midtrans snap URL. Style juga.
   ============================================================ */

body.woocommerce-order-received .woocommerce-customer-details {
	margin-top: 32px !important;
	width: 100% !important;
	display: block !important;
}

body.woocommerce-order-received .woocommerce-columns,
body.woocommerce-order-received .woocommerce-columns--addresses,
body.woocommerce-order-received .col2-set,
body.woocommerce-order-received .woocommerce-customer-details .addresses,
body.woocommerce-order-received section.woocommerce-customer-details > section {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* Clear any float overrides */
body.woocommerce-order-received .woocommerce-columns::before,
body.woocommerce-order-received .woocommerce-columns::after,
body.woocommerce-order-received .col2-set::before,
body.woocommerce-order-received .col2-set::after {
	content: none !important;
	display: none !important;
}

body.woocommerce-order-received .woocommerce-column--billing-address,
body.woocommerce-order-received .woocommerce-column--shipping-address,
body.woocommerce-order-received .woocommerce-column.col-1,
body.woocommerce-order-received .woocommerce-column.col-2,
body.woocommerce-order-received .woocommerce-customer-details .col-1,
body.woocommerce-order-received .woocommerce-customer-details .col-2 {
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-top: 2px solid var(--sa-amber) !important;
	padding: 24px 26px !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	text-align: left !important;
}

/* Force grid placement: billing kiri, shipping kanan */
body.woocommerce-order-received .woocommerce-column--billing-address,
body.woocommerce-order-received .col-1 {
	grid-column: 1 / 2 !important;
}

body.woocommerce-order-received .woocommerce-column--shipping-address,
body.woocommerce-order-received .col-2 {
	grid-column: 2 / 3 !important;
}

/* Column titles "Billing address" / "Shipping address" — small subheader */
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received h2.woocommerce-column__title {
	font-family: var(--sa-font-display) !important;
	font-weight: 800 !important;
	font-size: 18px !important;
	color: var(--sa-white) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	margin: 0 0 14px !important;
	padding: 0 0 10px !important;
	border-bottom: 1px solid var(--sa-steel) !important;
	text-align: left !important;
}

body.woocommerce-order-received .woocommerce-column__title::before {
	display: none !important;
}

body.woocommerce-order-received address {
	color: var(--sa-mist) !important;
	font-style: normal !important;
	line-height: 1.7 !important;
	font-size: 13px !important;
	font-family: var(--sa-font-body) !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	display: block !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* PENTING: address content area sebelumnya WHITE bg karena template kit
   Electrodeals inject styling. Nuke bg semua descendants address +
   force text mist. */
body.woocommerce-order-received .woocommerce-column--billing-address,
body.woocommerce-order-received .woocommerce-column--shipping-address,
body.woocommerce-order-received .woocommerce-column--billing-address *,
body.woocommerce-order-received .woocommerce-column--shipping-address *,
body.woocommerce-order-received address,
body.woocommerce-order-received address *,
body.woocommerce-order-received address div,
body.woocommerce-order-received address p,
body.woocommerce-order-received address span,
body.woocommerce-order-received address br {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* Restore bg gunmetal di parent column saja (override universal nuke di atas) */
body.woocommerce-order-received .woocommerce-column--billing-address,
body.woocommerce-order-received .woocommerce-column--shipping-address,
body.woocommerce-order-received .woocommerce-column.col-1,
body.woocommerce-order-received .woocommerce-column.col-2,
body.woocommerce-order-received .woocommerce-customer-details .col-1,
body.woocommerce-order-received .woocommerce-customer-details .col-2 {
	background: var(--sa-gunmetal) !important;
	background-color: var(--sa-gunmetal) !important;
}

/* Text colors di dalam address — pastikan terlihat di dark bg */
body.woocommerce-order-received .woocommerce-column--billing-address address,
body.woocommerce-order-received .woocommerce-column--shipping-address address,
body.woocommerce-order-received address,
body.woocommerce-order-received address span:not(.woocommerce-customer-details--phone):not(.woocommerce-customer-details--email),
body.woocommerce-order-received address p:not(.woocommerce-customer-details--phone):not(.woocommerce-customer-details--email),
body.woocommerce-order-received .woocommerce-column--billing-address > *:not(h2):not(h3):not(.woocommerce-column__title),
body.woocommerce-order-received .woocommerce-column--shipping-address > *:not(h2):not(h3):not(.woocommerce-column__title) {
	color: var(--sa-mist) !important;
}

body.woocommerce-order-received .woocommerce-customer-details--phone,
body.woocommerce-order-received .woocommerce-customer-details--email {
	color: var(--sa-amber) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	margin: 10px 0 0 !important;
	padding-top: 10px !important;
	border-top: 1px solid var(--sa-steel) !important;
	display: block !important;
}

body.woocommerce-order-received .woocommerce-customer-details--phone::before,
body.woocommerce-order-received .woocommerce-customer-details--email::before {
	color: var(--sa-amber) !important;
}

/* ===== Payment Info section (custom template kit / Midtrans) ===== */
body.woocommerce-order-received .payment-info-section,
body.woocommerce-order-received .payment-info,
body.woocommerce-order-received h2.payment-info-title,
body.woocommerce-order-received h3.payment-info-title {
	margin-top: 32px;
}

body.woocommerce-order-received table.payment-info,
body.woocommerce-order-received table.midtrans-payment,
body.woocommerce-order-received .payment-info table {
	width: 100% !important;
	background: var(--sa-gunmetal) !important;
	border: 1px solid var(--sa-steel) !important;
	border-top: 2px solid var(--sa-amber) !important;
	border-collapse: collapse !important;
	margin: 14px 0 0 !important;
}

body.woocommerce-order-received table.payment-info th,
body.woocommerce-order-received table.payment-info td,
body.woocommerce-order-received .payment-info table th,
body.woocommerce-order-received .payment-info table td {
	padding: 14px 16px !important;
	text-align: left !important;
	border-top: 1px solid var(--sa-steel) !important;
}

body.woocommerce-order-received table.payment-info th,
body.woocommerce-order-received .payment-info table th {
	color: var(--sa-olive-light) !important;
	font-family: var(--sa-font-mono) !important;
	font-size: 10px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	width: 160px !important;
	background: var(--sa-charcoal) !important;
	border-right: 1px solid var(--sa-steel) !important;
}

body.woocommerce-order-received table.payment-info td,
body.woocommerce-order-received .payment-info table td {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-body) !important;
	font-size: 13px !important;
	word-break: break-all !important;
}

body.woocommerce-order-received table.payment-info td a,
body.woocommerce-order-received .payment-info table td a,
body.woocommerce-order-received .payment-info a {
	color: var(--sa-amber) !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(255, 191, 30, 0.4) !important;
	transition: border-color 0.2s, color 0.2s;
}

body.woocommerce-order-received table.payment-info td a:hover,
body.woocommerce-order-received .payment-info a:hover {
	color: var(--sa-white) !important;
	border-bottom-color: var(--sa-amber) !important;
}

/* Generic h2/h3 headings (PAYMENT INFO label) yang ga ke-cover lain */
body.woocommerce-order-received .woocommerce-order-details + h2,
body.woocommerce-order-received .woocommerce-customer-details ~ h2,
body.woocommerce-order-received section h2.payment-title,
body.woocommerce-order-received section h3.payment-title {
	font-family: var(--sa-font-display) !important;
	font-weight: 800 !important;
	font-size: clamp(20px, 2.5vw, 28px) !important;
	color: var(--sa-white) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	margin: 32px 0 0 !important;
	padding-left: 38px !important;
	position: relative !important;
}

body.woocommerce-order-received .woocommerce-order-details + h2::before,
body.woocommerce-order-received .woocommerce-customer-details ~ h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	height: 2px;
	background: var(--sa-amber);
}

/* Icon boxes section (4 icon-boxes "What's Next") */
body.woocommerce-order-received .elementor-widget-icon-box .elementor-icon-box-title,
body.woocommerce-order-received .elementor-widget-icon-box .elementor-icon-box-title a {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

body.woocommerce-order-received .elementor-widget-icon-box .elementor-icon-box-description,
body.woocommerce-order-received .elementor-widget-icon-box .elementor-icon-box-content p {
	color: var(--sa-mist) !important;
}

body.woocommerce-order-received .elementor-widget-icon-box .elementor-icon,
body.woocommerce-order-received .elementor-widget-icon-box .elementor-icon i,
body.woocommerce-order-received .elementor-widget-icon-box .elementor-icon svg {
	color: var(--sa-amber) !important;
	fill: var(--sa-amber) !important;
}

/* Mobile: stack order details list + addresses */
@media (max-width: 768px) {
	body.woocommerce-order-received ul.woocommerce-thankyou-order-details,
	body.woocommerce-order-received ul.order_details {
		flex-direction: column !important;
		gap: 14px !important;
	}
	body.woocommerce-order-received .woocommerce-columns--addresses {
		grid-template-columns: 1fr !important;
	}
	body.woocommerce-order-received .woocommerce-order-details h2,
	body.woocommerce-order-received .woocommerce-customer-details h2 {
		font-size: 22px !important;
		padding-left: 30px !important;
	}
	body.woocommerce-order-received table.shop_table thead th,
	body.woocommerce-order-received table.shop_table tbody td {
		padding: 10px 12px !important;
		font-size: 12px !important;
	}
}

/* ============================================================
   HIDE PLACEHOLDER CONTENT di Order Summary (page 737)
   ============================================================
   Elementor template kit nyisain Lorem ipsum text + container
   kosong dengan 6 white box placeholders. User minta dihapus.

   Element IDs dari _elementor_data:
   - f4fd5d3 → container yg berisi 711ea725 (text-editor Lorem ipsum
     + image widget 1a5dc13c)
   - 7ea28b54 → container kosong (mungkin tempat 6 white boxes)
   - 6fbfc12e → 4 icon-boxes "Original Product" dll — udah set
     hide_desktop/tablet/mobile di Elementor settings sendiri, tapi
     CSS jaga2 force hide.
   ============================================================ */
body.woocommerce-order-received .elementor-element.elementor-element-f4fd5d3,
body.woocommerce-order-received .elementor-element.elementor-element-711ea725,
body.woocommerce-order-received .elementor-element.elementor-element-6557d959,
body.woocommerce-order-received .elementor-element.elementor-element-1a5dc13c,
body.woocommerce-order-received .elementor-element.elementor-element-7ea28b54,
body.woocommerce-order-received .elementor-element.elementor-element-6fbfc12e {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* HIDE RATING & SOLD — moved to soldier-global.css supaya apply di
   semua page termasuk home (yg gak load CSS ini). */

/* ============================================================
   SINGLE PRODUCT GALLERY — PREV/NEXT BUTTONS
   ============================================================
   Custom buttons di-inject via soldier-single-product.js untuk
   navigation gambar produk. Cursor grab/grabbing dari JS handle
   touch swipe + mouse drag.
   ============================================================ */
.soldier-woo-content div.product div.images,
.soldier-woo-content div.product .woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
	position: relative !important;
}

.soldier-gallery-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 10 !important;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(15, 16, 17, 0.85) !important;
	color: var(--sa-amber) !important;
	border: 1px solid var(--sa-amber) !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: all 0.2s ease !important;
	opacity: 0.85 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.soldier-gallery-nav:hover {
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
	opacity: 1 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.soldier-gallery-nav:focus {
	outline: 2px solid var(--sa-amber) !important;
	outline-offset: 2px !important;
}

.soldier-gallery-nav svg {
	width: 22px !important;
	height: 22px !important;
	display: block !important;
	stroke: currentColor !important;
}

/* Prev/next position — di SAMPING image (bukan overlap content image)
   supaya foto produk full visible. Outside the inner image area. */
.soldier-gallery-prev {
	left: 6px !important;
}

.soldier-gallery-next {
	right: 6px !important;
}

/* Smaller size + semi-transparent biar gak mendominasi visual */
.soldier-gallery-nav {
	opacity: 0.6 !important;
}

.soldier-gallery-nav:hover {
	opacity: 1 !important;
}

/* Hover effect untuk hint bisa di-swipe — cursor grab di gallery area */
.soldier-woo-content div.product .woocommerce-product-gallery__wrapper {
	cursor: grab !important;
}

.soldier-woo-content div.product .woocommerce-product-gallery__wrapper:active {
	cursor: grabbing !important;
}

/* Mobile — buttons sedikit lebih kecil + offset edge */
@media (max-width: 768px) {
	.soldier-gallery-nav {
		width: 38px !important;
		height: 38px !important;
		background: rgba(15, 16, 17, 0.9) !important;
	}
	.soldier-gallery-nav svg {
		width: 18px !important;
		height: 18px !important;
	}
	.soldier-gallery-prev {
		left: 10px !important;
	}
	.soldier-gallery-next {
		right: 10px !important;
	}
}

/* ============================================================
   SOLDIER SIMPLE GALLERY — Custom template override
   ============================================================
   Markup ada di woocommerce/single-product/product-image.php:
     .soldier-simple-gallery
       .soldier-gallery-main
         .soldier-gallery-slide.soldier-active (1 visible)
         .soldier-gallery-slide (hidden)
         ...
       .soldier-gallery-thumbs
         .soldier-gallery-thumb.soldier-thumb-active
         ...
   ============================================================ */

/* Reset WC gallery container — override semua FlexSlider styling */
.soldier-woo-content div.product div.images.soldier-simple-gallery,
.soldier-woo-content div.product .soldier-simple-gallery {
	opacity: 1 !important;
	display: block !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* MAIN IMAGE AREA — frame charcoal + amber top accent */
.soldier-woo-content .soldier-simple-gallery .soldier-gallery-main {
	position: relative !important;
	background: var(--sa-charcoal) !important;
	border: 1px solid var(--sa-steel) !important;
	padding: 12px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
	margin: 0 0 14px !important;
}

/* Amber accent top line */
.soldier-woo-content .soldier-simple-gallery .soldier-gallery-main::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 3px !important;
	background: var(--sa-amber) !important;
	z-index: 4 !important;
	pointer-events: none !important;
}

/* Corner brackets — top-left & bottom-right */
.soldier-woo-content .soldier-simple-gallery .soldier-gallery-main::after {
	content: '' !important;
	position: absolute !important;
	bottom: -1px !important;
	right: -1px !important;
	width: 22px !important;
	height: 22px !important;
	border-bottom: 3px solid var(--sa-amber) !important;
	border-right: 3px solid var(--sa-amber) !important;
	z-index: 4 !important;
	pointer-events: none !important;
}

/* Slide — hide all by default, show ONLY active */
.soldier-woo-content .soldier-simple-gallery .soldier-gallery-slide {
	display: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-slide.soldier-active {
	display: block !important;
}

/* Anchor wrapper */
.soldier-woo-content .soldier-simple-gallery .soldier-gallery-image-link {
	display: block !important;
	width: 100% !important;
	cursor: grab !important;
	user-select: none !important;
	-webkit-user-drag: none !important;
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-image-link:active {
	cursor: grabbing !important;
}

/* THE IMAGE — natural ratio, full visible, NO crop */
.soldier-woo-content .soldier-simple-gallery .soldier-gallery-image {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	background: transparent !important;
	border: none !important;
	margin: 0 auto !important;
	pointer-events: none !important;
}

/* THUMBNAILS ROW */
.soldier-woo-content .soldier-simple-gallery .soldier-gallery-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	width: 100% !important;
	padding: 4px 0 8px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	scrollbar-width: thin;
	scrollbar-color: var(--sa-amber) var(--sa-charcoal);
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-thumbs::-webkit-scrollbar {
	height: 6px;
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-thumbs::-webkit-scrollbar-track {
	background: var(--sa-charcoal);
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-thumbs::-webkit-scrollbar-thumb {
	background: var(--sa-amber);
	border-radius: 0;
}

/* Each thumb button */
.soldier-woo-content .soldier-simple-gallery .soldier-gallery-thumb {
	flex: 0 0 80px !important;
	width: 80px !important;
	height: 80px !important;
	padding: 4px !important;
	margin: 0 !important;
	background: var(--sa-charcoal) !important;
	border: 2px solid var(--sa-steel) !important;
	cursor: pointer !important;
	overflow: hidden !important;
	transition: border-color 0.2s !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-thumb:hover {
	border-color: var(--sa-olive-light) !important;
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-thumb.soldier-thumb-active {
	border-color: var(--sa-amber) !important;
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

/* Prev/next arrows on main image — di pinggir, amber border */
.soldier-woo-content .soldier-simple-gallery .soldier-gallery-main .soldier-gallery-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 10 !important;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(15, 16, 17, 0.85) !important;
	color: var(--sa-amber) !important;
	border: 1px solid var(--sa-amber) !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 0.7 !important;
	transition: opacity 0.2s, background 0.2s !important;
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-main .soldier-gallery-nav:hover {
	opacity: 1 !important;
	background: var(--sa-amber) !important;
	color: var(--sa-black) !important;
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-main .soldier-gallery-prev {
	left: 8px !important;
}

.soldier-woo-content .soldier-simple-gallery .soldier-gallery-main .soldier-gallery-next {
	right: 8px !important;
}

/* Mobile — thumbs sedikit lebih kecil */
@media (max-width: 768px) {
	.soldier-woo-content .soldier-simple-gallery .soldier-gallery-thumb {
		flex: 0 0 64px !important;
		width: 64px !important;
		height: 64px !important;
	}
	.soldier-woo-content .soldier-simple-gallery .soldier-gallery-main .soldier-gallery-nav {
		width: 36px !important;
		height: 36px !important;
	}
}