/* ==========================================================================
   Startuds - WooCommerce
   Loaded only on shop pages, or when a header cart / shop widget is present.
   Every value comes from a CSS variable set by inc/dynamic-css.php.
   ========================================================================== */

/* --- Shop wrapper --------------------------------------------------------- */

.st-shop { padding-block: var(--st-section-pad); }

.st-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 34px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--st-border);
}

.woocommerce .woocommerce-result-count { margin: 0; font-size: var(--st-size-small); }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select { width: auto; min-width: 210px; }

/* --- Product grid --------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: var(--st-card-text-align, left);
}

/* --- Product card --------------------------------------------------------- */

.st-product__inner,
.woocommerce ul.products li.product .st-product__inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--st-card-padding);
	border-radius: var(--st-radius-card);
	background: var(--st-card-bg);
	transition: background var(--st-transition), border-color var(--st-transition), box-shadow var(--st-transition), transform var(--st-transition);
}

.st-card-bordered .st-product__inner {
	border: var(--st-card-border-width) solid var(--st-border);
}

.st-card-shadow .st-product__inner {
	box-shadow: var(--st-shadow);
}

.st-card-hover-border .st-product__inner {
	border: var(--st-card-border-width) solid transparent;
}

.st-card-hover-border li.product:hover .st-product__inner {
	border-color: var(--st-border);
}

.st-card-hover-shadow li.product:hover .st-product__inner {
	box-shadow: var(--st-shadow-lg);
}

.woocommerce ul.products li.product:hover .st-product__inner {
	background: var(--st-card-bg-hover);
}

.st-product__media {
	position: relative;
	overflow: hidden;
	margin-bottom: 18px;
	border-radius: var(--st-radius-card);
	background: var(--st-image-bg);
}

.st-product__media img,
.st-product__media .woocommerce-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s ease;
}

.st-product__media.st-ratio img {
	position: absolute;
	inset: 0;
}

.woocommerce ul.products li.product:hover .st-product__media img {
	transform: scale(1.06);
}

.st-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
}

.st-card-center .st-product__body { align-items: center; text-align: center; }

/* Title, category, price */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-family: var(--st-font-product);
	font-size: var(--st-size-product-title);
	font-weight: var(--st-weight-product);
	line-height: 1.35;
	color: var(--st-heading);
	text-transform: none;
}

.st-product__cat {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--st-muted);
}

.st-product__cat a { color: inherit; }

.woocommerce ul.products li.product .price {
	margin: 0;
	font-family: var(--st-font-heading);
	font-size: var(--st-size-product-price);
	font-weight: 600;
	color: var(--st-heading);
}

.woocommerce ul.products li.product .price del {
	margin-right: 8px;
	opacity: 1;
	font-weight: 400;
	color: var(--st-muted);
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 600;
}

.st-product__excerpt {
	margin: 0;
	font-size: var(--st-size-small);
	color: var(--st-body);
}

.st-product__stock { font-size: 12px; font-weight: 600; }
.st-product__stock.is-in  { color: var(--st-instock); }
.st-product__stock.is-out { color: var(--st-outofstock); }

/* Star rating */

.woocommerce .star-rating { color: var(--st-star); font-size: 14px; margin: 2px 0; }
.st-card-center .woocommerce .star-rating { margin-inline: auto; }

/* --- Sale badge ----------------------------------------------------------- */

.woocommerce span.onsale,
.st-badge {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 5px 13px;
	background: var(--st-sale-bg);
	color: var(--st-sale-text);
	font-family: var(--st-font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.5;
	border-radius: 0;
}

.st-badge--rounded { border-radius: 4px; }
.st-badge--circle {
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 50%;
	font-size: 12px;
}
.st-badge--ribbon {
	padding-right: 20px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}

.st-badge--top-left     { top: 12px; left: 12px; }
.st-badge--top-right    { top: 12px; right: 12px; left: auto; }
.st-badge--bottom-left  { bottom: 12px; left: 12px; top: auto; }
.st-badge--bottom-right { bottom: 12px; right: 12px; top: auto; left: auto; }

/* --- Hover action row ----------------------------------------------------- */

.st-product__actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	background: rgba(255, 255, 255, .95);
	transform: translateY(101%);
	transition: transform .3s ease;
}

li.product:hover .st-product__actions,
li.product:focus-within .st-product__actions {
	transform: translateY(0);
}

.st-product__actions .button {
	padding: 11px 18px;
	font-size: 13px;
}

.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--st-primary);
}

/* --- Category tiles and subcategories ------------------------------------- */

.st-cat-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.st-cat-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--st-radius-card);
	color: inherit;
}

.st-cat-tile__media img { transition: transform .5s ease, opacity .3s ease; }

.st-cat-grid--hover-zoom .st-cat-tile:hover img { transform: scale(1.07); }
.st-cat-grid--hover-fade .st-cat-tile:hover img { opacity: .78; }

.st-cat-tile__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px;
	background: linear-gradient(to top, rgba(17, 20, 24, .68), transparent);
	color: #fff;
	text-align: center;
}

.st-cat-tile__title {
	display: block;
	font-family: var(--st-font-heading);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.st-cat-tile__cta {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	opacity: .85;
}

.st-cat-grid--hover-slide .st-cat-tile__cta {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .3s ease, opacity .3s ease;
}

.st-cat-grid--hover-slide .st-cat-tile:hover .st-cat-tile__cta {
	max-height: 30px;
	opacity: .85;
}

/* --- Category banner ------------------------------------------------------ */

.st-cat-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 280px;
	overflow: hidden;
	background: var(--st-bg-alt);
}

.st-cat-banner__media { position: absolute; inset: 0; }
.st-cat-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.st-cat-banner__overlay { position: absolute; inset: 0; background: rgba(17, 20, 24, .45); }

.st-cat-banner__content { position: relative; z-index: 2; padding-block: 50px; color: #fff; text-align: center; }
.st-cat-banner__title { margin: 0 0 10px; color: #fff; }
.st-cat-banner__desc { max-width: 640px; margin: 0 auto 12px; color: rgba(255, 255, 255, .88); }
.st-cat-banner .st-breadcrumb, .st-cat-banner .st-breadcrumb a { color: #fff; }

/* --- Single product ------------------------------------------------------- */

.st-single-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }

.woocommerce div.product .product_title {
	margin-bottom: 12px;
	font-size: var(--st-size-h2);
	text-transform: none;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin-bottom: 18px;
	font-family: var(--st-font-heading);
	font-size: 26px;
	font-weight: 600;
	color: var(--st-heading);
}

.woocommerce div.product p.price del { color: var(--st-muted); font-weight: 400; }

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-bottom: 24px;
}

.woocommerce div.product form.cart .button { min-height: 52px; }

.woocommerce div.product .product_meta {
	padding-top: 20px;
	border-top: 1px solid var(--st-border);
	font-size: var(--st-size-small);
}

.woocommerce div.product .product_meta > span { display: block; margin-bottom: 6px; }

/* Tabs */

.woocommerce div.product .woocommerce-tabs { margin-top: 60px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin: 0 0 26px;
	padding: 0;
	border-bottom: 1px solid var(--st-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 26px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 13px;
	border-bottom: 2px solid transparent;
	color: var(--st-body);
	font-family: var(--st-font-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	border-bottom-color: var(--st-primary);
	color: var(--st-heading);
}

.woocommerce .related, .woocommerce .upsells { margin-top: 70px; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { margin-bottom: 36px; text-align: center; }

/* --- Gallery -------------------------------------------------------------- */

.st-gallery { position: relative; }
.st-gallery .flex-viewport { border-radius: var(--st-radius-card); background: var(--st-image-bg); }
.st-gallery .flex-control-thumbs { margin-top: 12px; }
.st-gallery__video { margin-top: 12px; }
.st-gallery__video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* --- Quantity stepper ----------------------------------------------------- */

.st-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--st-border); border-radius: var(--st-radius-input); }
.st-qty .quantity { margin: 0; }
.st-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--st-heading);
}
.st-qty__btn:hover { background: var(--st-bg-alt); color: var(--st-primary); }
.woocommerce .quantity input.qty,
.st-qty__input {
	width: 62px;
	min-height: 50px;
	border: 0;
	border-inline: 1px solid var(--st-border);
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
}
.st-qty__input::-webkit-outer-spin-button,
.st-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Cart ----------------------------------------------------------------- */

.st-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }

.woocommerce table.shop_table {
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-card);
	border-collapse: collapse;
}
.woocommerce table.shop_table th {
	padding: 16px 14px;
	border-bottom: 1px solid var(--st-border);
	color: var(--st-heading);
	font-family: var(--st-font-heading);
	font-size: var(--st-size-small);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.woocommerce table.shop_table td { padding: 18px 14px; border-top: 1px solid var(--st-border); }
.woocommerce table.shop_table .product-thumbnail img { width: 78px; border-radius: var(--st-radius-card); }

.woocommerce a.remove { color: var(--st-outofstock) !important; font-weight: 400; }
.woocommerce a.remove:hover { background: var(--st-outofstock); color: #fff !important; }

.woocommerce-cart .cart-collaterals .cart_totals,
.st-order-review {
	padding: 26px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-card);
	background: var(--st-bg-alt);
}

.woocommerce-cart .cart-collaterals .cart_totals h2 { font-size: var(--st-size-h4); }

.st-cart-continue { margin-top: 20px; }
.st-cart-continue a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

.woocommerce .cart .button,
.woocommerce .cart input.button { min-height: 50px; }

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button.button {
	border-color: var(--st-primary);
	background: var(--st-primary);
	color: #fff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .checkout-button.button:hover {
	border-color: var(--st-dark);
	background: var(--st-dark);
}

/* Free shipping progress bar */

.st-ship-bar { margin-bottom: 22px; }
.st-ship-bar__text {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: var(--st-size-small);
	color: var(--st-heading);
}
.st-ship-bar__track { height: 6px; overflow: hidden; border-radius: 99px; background: var(--st-border); }
.st-ship-bar__fill { display: block; height: 100%; background: var(--st-primary); transition: width .4s ease; }
.st-ship-bar.is-complete .st-ship-bar__fill { background: var(--st-instock); }

/* --- Checkout ------------------------------------------------------------- */

.woocommerce-checkout .col2-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label { margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--st-outofstock); text-decoration: none; }

.woocommerce .select2-container .select2-selection--single {
	height: 48px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-input);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 15px;
	line-height: 46px;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }

/* Payment box: styled, never restructured, so gateways render as intended. */

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	border-radius: var(--st-radius-card);
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 18px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--st-border);
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: 12px;
	list-style: none;
	color: var(--st-heading);
	font-weight: 500;
}

.woocommerce-checkout #payment ul.payment_methods li img {
	display: inline-block;
	max-height: 26px;
	margin-left: 8px;
	vertical-align: middle;
}

.woocommerce-checkout #payment div.payment_box {
	border-radius: var(--st-radius-input);
	background: var(--st-bg-alt);
	color: var(--st-body);
	font-size: var(--st-size-small);
}

.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--st-bg-alt); }
.woocommerce-checkout #payment div.form-row.place-order { padding: 0; }
.woocommerce #payment #place_order { width: 100%; min-height: 54px; }

.st-checkout-trust {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--st-muted);
}

/* Step indicator */

.st-steps {
	display: flex;
	gap: 8px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	counter-reset: st-step;
}
.st-steps__item {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--st-muted);
}
.st-steps__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--st-border);
	border-radius: 50%;
	counter-increment: st-step;
}
.st-steps__dot::before { content: counter(st-step); font-size: 11px; }
.st-steps__item.is-done .st-steps__dot::before,
.st-steps__item.is-active .st-steps__dot::before { content: none; }
.st-steps__item.is-active .st-steps__dot::before { content: counter(st-step); }
.st-steps__item.is-active { color: var(--st-heading); font-weight: 600; }
.st-steps__item.is-active .st-steps__dot { border-color: var(--st-primary); background: var(--st-primary); color: #fff; }
.st-steps__item.is-done .st-steps__dot { border-color: var(--st-instock); background: var(--st-instock); color: #fff; }

/* --- Notices -------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--st-primary);
	border-radius: var(--st-radius-input);
	background: var(--st-bg-alt);
	font-size: var(--st-size-small);
}
.woocommerce-error { border-top-color: var(--st-outofstock); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--st-primary); }

/* --- Mini cart panel ------------------------------------------------------ */

.st-cart-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	width: 400px;
	max-width: 92vw;
	background: var(--st-bg);
	box-shadow: 0 0 44px rgba(17, 20, 24, .16);
	transition: transform .3s ease;
}

.st-cart-panel--right { right: 0; transform: translateX(102%); }
.st-cart-panel--left  { left: 0;  transform: translateX(-102%); }
.st-cart-panel.is-open { transform: translateX(0); }

.st-cart-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--st-border);
}
.st-cart-panel__title { margin: 0; font-size: var(--st-size-h4); text-transform: none; }
.st-cart-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; }
.st-cart-panel .cart_list li { padding: 14px 0; border-bottom: 1px solid var(--st-border); }
.st-cart-panel .buttons a { display: block; margin-bottom: 8px; text-align: center; }

/* --- Widgets -------------------------------------------------------------- */

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--st-primary); }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background: var(--st-border); }
.woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img { width: 60px; border-radius: var(--st-radius-card); }

/* --- Responsive ----------------------------------------------------------- */

@media (min-width: 421px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 783px) {
	.st-cat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.st-cat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-single-product { grid-template-columns: 1fr 1fr; gap: 50px; }
	.woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; gap: 40px; }
	.st-cat-banner { min-height: 340px; }
}

@media (min-width: 992px) {
	.woocommerce ul.products { grid-template-columns: repeat(var(--st-shop-columns, 4), minmax(0, 1fr)); }
	.st-cat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.st-cart-two-column .st-cart-layout,
	.st-checkout-two-column .woocommerce .woocommerce-checkout {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 44px;
	}

	.st-cart-two-column .st-cart-layout__totals { position: sticky; top: 100px; align-self: start; }
	.st-gallery--thumbs-left .flex-control-thumbs,
	.st-gallery--thumbs-right .flex-control-thumbs { display: grid; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.st-product__media img,
	.st-product__actions,
	.st-cart-panel,
	.st-ship-bar__fill { transition: none; }

	.woocommerce ul.products li.product:hover .st-product__media img { transform: none; }
}