/*
 * MedyPharmacy — WooCommerce integration layer.
 *
 * WooCommerce's own layout stylesheets are dequeued (see
 * inc/woocommerce-config.php). This file maps WooCommerce's remaining markup
 * onto the existing MedyPharmacy design system so nothing looks "default".
 *
 * Rule of thumb: never redefine a design token here. Only bridge WooCommerce
 * classes to the classes that already exist in assets/css/style.css.
 */

/* -------------------------------------------------------------------------
 * Notices
 * ---------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	list-style: none;
	margin: 0 0 var(--s2);
	padding: 12px 16px;
	border: 1px solid var(--g2);
	border-left: 4px solid var(--g);
	border-radius: var(--r);
	background: var(--gl);
	color: var(--gd);
	font-size: 14px;
}

.woocommerce-error {
	border-color: var(--red);
	border-left-color: var(--red);
	background: #fdecec;
	color: #8a1f22;
}

.woocommerce-info {
	border-color: var(--b);
	border-left-color: var(--t2);
	background: var(--bg);
	color: var(--t);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: right;
	margin-left: var(--s2);
}

/* -------------------------------------------------------------------------
 * Buttons — WooCommerce buttons adopt the existing .btn look
 * ---------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .cart .button,
.woocommerce .cart input.button {
	display: inline-block;
	font: 500 14px var(--f);
	padding: 10px 18px;
	border: 1px solid var(--gd);
	border-radius: var(--r);
	background: var(--gd);
	color: #fff;
	cursor: pointer;
	text-align: center;
	line-height: 1.4;
	text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--g);
	color: #fff;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.alt.disabled {
	opacity: .5;
	cursor: not-allowed;
}

.woocommerce a.button.wc-backward,
.woocommerce .button.wc-backward {
	background: #fff;
	color: var(--g);
}

/* -------------------------------------------------------------------------
 * Product loop — our .card markup replaces WooCommerce's default item
 * ---------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

/* The theme renders .card directly; make sure WooCommerce's own
   "onsale" flash never doubles up with our .badge.sale. */
.woocommerce span.onsale {
	display: none;
}

/* -------------------------------------------------------------------------
 * Single product
 * ---------------------------------------------------------------------- */
.woocommerce div.product {
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	margin: 0;
}

/*
 * Gallery image.
 *
 * The uploaded photos are small (e.g. 378x264), so they are scaled up to fill
 * the gallery column instead of sitting tiny in the middle of it.
 */
.woocommerce div.product .woocommerce-product-gallery__image {
	width: 100%;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
	border-radius: var(--r);
	background: var(--bg);
}

/* Slides must be full width so flexslider can size the track. */
.woocommerce div.product .woocommerce-product-gallery .slides > li {
	width: 100%;
}

/*
 * Flexslider base styles.
 *
 * WooCommerce ships these in woocommerce-layout.css, which this theme does not
 * load. Without them the gallery wrapper collapses to zero height and the
 * product image disappears.
 */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
	max-height: 2000px;
	transition: all 1s ease;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-nav {
	width: 100%;
	position: absolute;
	bottom: -40px;
	text-align: center;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a {
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: rgba(255, 255, 255, .85);
	border-radius: 50%;
	color: var(--gd);
	text-decoration: none;
	opacity: 0;
	transition: opacity .2s;
	z-index: 2;
}

.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a {
	opacity: 1;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav .flex-prev {
	left: 10px;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav .flex-next {
	right: 10px;
}

/* The slider track must lay its slides out in a row. */
.woocommerce div.product .woocommerce-product-gallery .slides {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .woocommerce-product-gallery .slides > li {
	margin: 0;
	padding: 0;
}

/* Gallery thumbnails adopt the original .thumbs look. */
/*
 * Thumbnail strip.
 *
 * Flexslider positions this absolutely and sets each thumbnail to its natural
 * size via an inline onload handler. The theme lays it out as a normal flex row
 * under the main image, so both need overriding.
 */
.woocommerce div.product .flex-control-nav.flex-control-thumbs {
	position: static;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.woocommerce div.product .flex-control-thumbs li {
	width: 72px;
	flex: 0 0 72px;
	margin: 0;
	float: none;
}

/* Beat flexslider's inline width/height attributes. */
.woocommerce div.product .flex-control-thumbs img {
	width: 72px !important;
	height: 72px !important;
	object-fit: contain;
}

.woocommerce div.product .flex-control-thumbs img {
	border: 1px solid var(--b);
	background: var(--bg);
	border-radius: var(--r);
	padding: 6px;
	opacity: 1;
}

.woocommerce div.product .flex-control-thumbs img.flex-active {
	border: 2px solid var(--g);
}

.woocommerce div.product .product_title {
	font-size: 30px;
	font-weight: 700;
	margin: 8px 0 var(--s1);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--gd);
	font-weight: 700;
}

.woocommerce div.product p.price.big,
.woocommerce div.product span.price.big {
	font-size: 28px;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--t2);
	font-weight: 400;
	font-size: 15px;
	opacity: 1;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	text-decoration: none;
	font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--t2);
	margin-bottom: var(--s2);
}

/* Stock line */
.woocommerce div.product .stock {
	font-size: 13px;
	color: var(--t2);
	margin: 0 0 var(--s1);
}

.woocommerce div.product .stock.in-stock {
	color: var(--g);
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--red);
}

/* -------------------------------------------------------------------------
 * Variations form — hidden, driven by the packaging table
 * ---------------------------------------------------------------------- */
/*
 * The packaging/pricing table is the customer-facing selector. WooCommerce's
 * native variation dropdowns stay in the DOM (so WooCommerce's own JS can
 * validate and submit the correct variation) but are visually hidden.
 */
.woocommerce div.product form.cart .variations {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: 0;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	padding: 0;
	border: 0;
}

.woocommerce div.product form.cart .variations select {
	width: 100%;
}

.woocommerce div.product form.cart .reset_variations {
	display: none !important;
}

/* Single variation price block is replaced by our .big price + summary. */
.woocommerce div.product .single_variation_wrap .woocommerce-variation {
	margin-bottom: var(--s1);
}

.woocommerce div.product .woocommerce-variation-price {
	display: none;
}

.woocommerce div.product .woocommerce-variation-availability {
	font-size: 13px;
	color: var(--t2);
}

/* -------------------------------------------------------------------------
 * Add to cart form — adopt the original .buy / .qty layout
 * ---------------------------------------------------------------------- */
.woocommerce div.product form.cart {
	display: flex;
	gap: var(--s1);
	align-items: center;
	flex-wrap: wrap;
	margin: var(--s2) 0 0;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	display: none;
}

/*
 * Quantity stepper.
 *
 * WooCommerce wraps the input in `.quantity`; the original design used `.qty`
 * with explicit minus/plus buttons. Both are styled here so the stepper looks
 * identical to the original.
 */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--b);
	border-radius: var(--r);
	margin: 0;
	float: none;
	overflow: hidden;
	background: #fff;
}

.woocommerce div.product form.cart .quantity button,
.woocommerce div.product form.cart .qty button {
	width: 40px;
	min-width: 40px;
	border: 0;
	background: #fff;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--g);
	display: grid;
	place-items: center;
	transition: background .15s, color .15s;
	padding: 0;
}

.woocommerce div.product form.cart .quantity button:hover,
.woocommerce div.product form.cart .qty button:hover {
	background: var(--gl);
}

.woocommerce div.product form.cart .quantity button:active,
.woocommerce div.product form.cart .qty button:active {
	background: var(--g);
	color: #fff;
}

.woocommerce div.product form.cart .quantity input.qty,
.woocommerce div.product form.cart .qty input {
	width: 56px;
	border: 0;
	border-left: 1px solid var(--b);
	border-right: 1px solid var(--b);
	text-align: center;
	padding: 10px 0;
	background: #fff;
	font-weight: 600;
	-moz-appearance: textfield;
}

.woocommerce div.product form.cart .quantity input.qty:focus,
.woocommerce div.product form.cart .qty input:focus {
	outline: none;
	background: var(--gl);
}

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

.woocommerce div.product form.cart .button {
	flex: 1;
	min-width: 160px;
}

.woocommerce div.product form.cart .variations_button {
	display: flex;
	gap: var(--s1);
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Product meta (SKU / categories / tags) — WooCommerce's own block
 * ---------------------------------------------------------------------- */
.woocommerce div.product .product_meta {
	font-size: 13px;
	color: var(--t2);
	margin-top: var(--s2);
	padding-top: var(--s2);
	border-top: 1px solid var(--b);
}

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

.woocommerce div.product .product_meta a {
	color: var(--g);
}

/* -------------------------------------------------------------------------
 * Tabs — WooCommerce's default tabs are removed; our .tablist is used.
 * These rules only apply if a plugin re-adds the default tabs.
 * ---------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: none;
}

/* -------------------------------------------------------------------------
 * Related / upsells
 * ---------------------------------------------------------------------- */
.woocommerce .related.products,
.woocommerce .upsells.products {
	clear: both;
}

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
	margin-top: var(--s4);
}

/* -------------------------------------------------------------------------
 * Cart page
 *
 * Uses the original .cart / .ci / .tot markup. WooCommerce still owns the
 * form, quantities and totals; these rules only style its inputs.
 * ---------------------------------------------------------------------- */
.woocommerce-cart .woocommerce-cart-form {
	margin: 0;
}

/* Line item: thumbnail | details | quantity | line total | remove */
.woocommerce-cart .cart .ci {
	grid-template-columns: 96px minmax(0, 1fr) max-content max-content max-content;
	align-items: center;
	gap: var(--s2);
	padding: var(--s2);
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}

.woocommerce-cart .cart .ci:hover {
	border-color: var(--g2);
	box-shadow: var(--sh);
}

.woocommerce-cart .cart .ci .th {
	width: 96px;
	height: 96px;
	background: var(--bg);
	border-radius: var(--r);
	padding: 8px;
	display: grid;
	place-items: center;
}

.woocommerce-cart .cart .ci .th img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.woocommerce-cart .cart .ci > div > b {
	display: block;
	font-size: 15px;
	line-height: 1.35;
}

.woocommerce-cart .cart .ci > div > b a {
	font-weight: 600;
}

.woocommerce-cart .cart .ci > div > b a:hover {
	color: var(--g);
}

/* Packaging / variation details under the product name. */
.woocommerce-cart .cart .ci .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--t2);
}

.woocommerce-cart .cart .ci .variation dt,
.woocommerce-cart .cart .ci .variation dd {
	margin: 0;
	font-weight: 400;
}

.woocommerce-cart .cart .ci .variation dd p {
	margin: 0;
}

/* Quantity input. */
/*
 * `.qty` is a grid item, so it stretches to its track by default. Forcing
 * `justify-self: end` plus `width: max-content` keeps the stepper compact.
 */
.woocommerce-cart .cart .ci .qty {
	display: inline-flex;
	width: max-content;
	justify-self: end;
	align-self: center;
}

/*
 * The stepper must size to its content (2 buttons + input), not stretch to the
 * grid track. `width: max-content` keeps it compact regardless of the column.
 */
.woocommerce-cart .cart .quantity {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	border: 1px solid var(--b);
	border-radius: var(--r);
	overflow: hidden;
	background: #fff;
}

/* The stepper children must never grow or shrink. */
.woocommerce-cart .cart .quantity > * {
	flex: 0 0 auto;
}

.woocommerce-cart .cart .quantity button {
	width: 36px;
	min-width: 36px;
	border: 0;
	background: #fff;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	color: var(--g);
	display: grid;
	place-items: center;
	padding: 0;
	transition: background .15s, color .15s;
}

.woocommerce-cart .cart .quantity button:hover {
	background: var(--gl);
}

.woocommerce-cart .cart .quantity button:active {
	background: var(--g);
	color: #fff;
}

.woocommerce-cart .cart .quantity input.qty {
	width: 56px;
	border: 0;
	border-left: 1px solid var(--b);
	border-right: 1px solid var(--b);
	text-align: center;
	padding: 9px 0;
	background: #fff;
	font-weight: 600;
	-moz-appearance: textfield;
}

.woocommerce-cart .cart .quantity input.qty:focus {
	outline: none;
	background: var(--gl);
}

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

/* Line total. */
.woocommerce-cart .cart .ci > b {
	font-size: 16px;
	white-space: nowrap;
	color: var(--gd);
}

/* Remove link. */
.woocommerce-cart .cart .rm {
	background: none;
	border: 0;
	color: var(--red);
	cursor: pointer;
	font: 500 13px var(--f);
	text-decoration: none;
	padding: 4px 0;
	white-space: nowrap;
}

.woocommerce-cart .cart .rm:hover {
	text-decoration: underline;
}

/* Actions row under the items. */
.woocommerce-cart .cart form > p {
	margin: var(--s2) 0 0;
}

/* Coupon row */
.woocommerce-cart .coupon {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: var(--s2);
}

.woocommerce-cart .coupon input[type="text"] {
	max-width: 220px;
}

/* Order summary panel. */
.woocommerce-cart .cart .tot {
	position: sticky;
	top: 88px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.woocommerce-cart .cart .tot h3 {
	margin: 0 0 var(--s2);
	font-size: 18px;
}

.woocommerce-cart .cart .tot > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s2);
	padding: 8px 0;
}

.woocommerce-cart .cart .tot > div + div {
	border-top: 1px solid var(--b);
}

.woocommerce-cart .cart .tot > div:last-of-type {
	border-top: 2px solid var(--b);
	margin-top: 4px;
	padding-top: 12px;
	font-size: 17px;
}

.woocommerce-cart .cart .tot .btn.full {
	margin-top: var(--s2);
}

/* Empty cart state. */
.woocommerce-cart .cart .empty {
	background: var(--bg);
	border: 1px dashed var(--b);
	border-radius: var(--r);
	padding: var(--s4) var(--s3);
	text-align: center;
	color: var(--t2);
}

.woocommerce-cart .cart .empty .btn {
	margin-left: 8px;
}

/* Responsive: stack the summary under the items. */
@media (max-width: 860px) {
	.woocommerce-cart .cart .tot {
		position: static;
	}
}

@media (max-width: 560px) {
	.woocommerce-cart .cart .ci {
		grid-template-columns: 72px 1fr;
		row-gap: var(--s1);
	}

	.woocommerce-cart .cart .ci .th {
		width: 72px;
		height: 72px;
	}

	.woocommerce-cart .cart .ci .qty,
	.woocommerce-cart .cart .ci > b,
	.woocommerce-cart .cart .ci .rm {
		grid-column: 2;
	}

	.woocommerce-cart .cart .ci > b {
		font-size: 15px;
	}
}
/* -------------------------------------------------------------------------
 * Checkout
 *
 * Two-column layout (form + order summary) matching the cart page. WooCommerce
 * owns the fields, totals and payment; these rules only style them.
 * ---------------------------------------------------------------------- */
/*
 * The two-column grid lives on the inner `.cart` div (the generic `.cart`
 * rule in style.css — the same one the cart page uses): `.checkout-col` is
 * the left (form) column, `.tot` is the right summary. The form itself stays
 * a normal block so `.cart` sizes its columns against the full form width,
 * not a nested fraction of it.
 */
.woocommerce-checkout form.checkout.woocommerce-checkout {
	margin: 0;
	padding-bottom: var(--s4);
}

.woocommerce-checkout .checkout-col {
	min-width: 0;
}

.woocommerce-checkout .checkout-col h3 {
	margin-top: var(--s3);
}

.woocommerce-checkout .checkout-col h3:first-child {
	margin-top: 0;
}

/* Section headings inside the form. */
.woocommerce-checkout h3 {
	margin: var(--s3) 0 var(--s2);
	font-size: 18px;
}

.woocommerce-checkout #customer_details h3:first-child {
	margin-top: 0;
}

/* Field rows. */
.woocommerce-checkout .form-row {
	margin-bottom: var(--s2);
	padding: 0;
}

.woocommerce-checkout .form-row label {
	display: block;
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 4px;
}

.woocommerce-checkout .form-row .required {
	color: var(--red);
	text-decoration: none;
}

.woocommerce-checkout .form-row .woocommerce-input-wrapper {
	display: block;
}

/*
 * Checkout fields.
 *
 * The base `input` rule uses --b (#E3EAE4), which is almost invisible on white.
 * A slightly darker border plus a subtle background makes the fields read as
 * inputs rather than plain text.
 */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #cfd8d1;
	border-radius: var(--r);
	background: #fff;
	color: var(--t);
	transition: border-color .15s, box-shadow .15s;
}

.woocommerce-checkout .form-row input.input-text:hover,
.woocommerce-checkout .form-row textarea:hover,
.woocommerce-checkout .form-row select:hover {
	border-color: #b6c2b9;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	outline: none;
	border-color: var(--g);
	box-shadow: 0 0 0 3px rgba(22, 133, 43, .12);
}

/* Invalid / validated states must stay visible. */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
	border-color: var(--red);
}

.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-validated select {
	border-color: var(--g2);
}

/* Select2 dropdowns match the native selects. */
.woocommerce-checkout .select2-container .select2-selection--single {
	border: 1px solid #cfd8d1;
	padding: 5px 0;
}

.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
	border-color: var(--g);
	box-shadow: 0 0 0 3px rgba(22, 133, 43, .12);
}

/* Two-column field rows on wider screens. */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	width: calc(50% - var(--s1));
	float: left;
}

.woocommerce-checkout .form-row-last {
	float: right;
}

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

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper::after {
	content: "";
	display: table;
	clear: both;
}

/* Select2 (country / state dropdowns). */
.woocommerce-checkout .select2-container .select2-selection--single {
	height: auto;
	padding: 6px 0;
	border: 1px solid var(--b);
	border-radius: var(--r);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

/* Order summary panel (right column). */
.woocommerce-checkout .cart .tot {
	position: sticky;
	top: 88px;
}

.woocommerce-checkout .cart .tot h3 {
	margin: 0 0 var(--s2);
	font-size: 18px;
}

.woocommerce-checkout #order_review {
	border: 1px solid var(--b);
	border-radius: var(--r);
	padding: var(--s2);
	background: #fff;
	margin-top: var(--s2);
}

/*
 * The base `table` rule in style.css sets `min-width: 560px`, which would force
 * the 340px summary column to overflow the page. Every table inside the
 * checkout summary must opt out of that minimum.
 */
.woocommerce-checkout #order_review table,
.woocommerce-checkout #order_review table.shop_table,
.woocommerce-checkout #payment table {
	min-width: 0;
	width: 100%;
	background: transparent;
	border: 0;
	margin: 0;
}

/* Keep long product names from stretching the column. */
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th {
	white-space: normal;
	word-break: break-word;
}

/* The summary column must never grow past its grid track. */
.woocommerce-checkout .cart .tot {
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * `overflow-wrap: anywhere` above is for long product names; prices must
 * stay on one line (otherwise e.g. "₹2,040" breaks mid-number).
 */
.woocommerce-checkout .cart .tot .woocommerce-Price-amount {
	white-space: nowrap;
}

.woocommerce-checkout #order_review table.shop_table th {
	background: transparent;
	color: var(--t2);
	font-weight: 600;
	padding: 8px 0;
	border-bottom: 1px solid var(--b);
}

.woocommerce-checkout #order_review table.shop_table td {
	padding: 8px 0;
	border-top: 1px solid var(--b);
	vertical-align: top;
}

.woocommerce-checkout #order_review table.shop_table .product-name {
	word-break: break-word;
}

.woocommerce-checkout #order_review table.shop_table .product-quantity {
	color: var(--t2);
	font-weight: 400;
}

.woocommerce-checkout #order_review table.shop_table .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--t2);
}

.woocommerce-checkout #order_review table.shop_table .variation dt,
.woocommerce-checkout #order_review table.shop_table .variation dd {
	margin: 0;
	font-weight: 400;
}

.woocommerce-checkout #order_review table.shop_table .variation dd p {
	margin: 0;
}

.woocommerce-checkout #order_review table.shop_table tfoot .order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot .order-total td {
	border-top: 2px solid var(--b);
	font-size: 17px;
	padding-top: 12px;
}

/*
 * The original style.css has `.tot div { display: flex }`, which also matches
 * WooCommerce's own wrappers (#order_review, #payment, .place-order). That made
 * the Place Order button stretch to the full height of the summary.
 *
 * Reset those wrappers back to normal block flow.
 */
.woocommerce-checkout .tot #order_review,
.woocommerce-checkout .tot #payment,
.woocommerce-checkout .tot .place-order,
.woocommerce-checkout .tot .form-row,
.woocommerce-checkout .tot .woocommerce-terms-and-conditions-wrapper {
	display: block;
	justify-content: flex-start;
	margin-bottom: 0;
}

.woocommerce-checkout .tot #order_review table {
	display: table;
}

.woocommerce-checkout .tot #order_review table thead {
	display: table-header-group;
}

.woocommerce-checkout .tot #order_review table tbody {
	display: table-row-group;
}

.woocommerce-checkout .tot #order_review table tfoot {
	display: table-footer-group;
}

.woocommerce-checkout .tot #order_review table tr {
	display: table-row;
}

.woocommerce-checkout .tot #order_review table th,
.woocommerce-checkout .tot #order_review table td {
	display: table-cell;
}

/* -------------------------------------------------------------------------
 * Place Order button (full width, beneath both columns)
 * ---------------------------------------------------------------------- */
.woocommerce-checkout .checkout-actions {
	margin-top: var(--s3);
	padding-top: var(--s3);
	border-top: 1px solid var(--b);
}

.woocommerce-checkout .checkout-place-order {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 15px 24px;
	font: 600 16px var(--f);
	letter-spacing: .01em;
	color: #fff;
	background: var(--gd);
	border: 1px solid var(--gd);
	border-radius: var(--r);
	cursor: pointer;
	text-align: center;
	transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
	box-shadow: 0 2px 8px rgba(20, 83, 45, .18);
}

.woocommerce-checkout .checkout-place-order:hover {
	background: var(--g);
	border-color: var(--g);
	box-shadow: 0 4px 14px rgba(20, 83, 45, .24);
}

.woocommerce-checkout .checkout-place-order:active {
	transform: translateY(1px);
	box-shadow: 0 1px 4px rgba(20, 83, 45, .2);
}

.woocommerce-checkout .checkout-place-order:focus-visible {
	outline: 2px solid var(--g);
	outline-offset: 2px;
}

/* Hide the default button if a plugin re-adds it. */
.woocommerce-checkout #payment #place_order {
	display: none;
}

/* Payment section. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: var(--s2);
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--s2);
	padding: 0;
	border: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: var(--s1);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline;
	font-weight: 500;
	cursor: pointer;
}

.woocommerce-checkout #payment div.form-row {
	padding: 0;
}

.woocommerce-checkout #payment .payment_box {
	background: var(--gl);
	border-radius: var(--r);
	padding: var(--s2);
	font-size: 13px;
	color: var(--t2);
	margin-top: 6px;
}

.woocommerce-checkout #payment .payment_box::before {
	display: none;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	margin-top: var(--s1);
}

/* Coupon toggle above the form. */
.woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--gl);
	border: 1px solid var(--b);
	border-radius: var(--r);
	padding: var(--s2);
	margin-bottom: var(--s2);
	font-size: 14px;
}

.woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.woocommerce-checkout form.checkout_coupon {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	border: 1px solid var(--b);
	border-radius: var(--r);
	padding: var(--s2);
	margin-bottom: var(--s2);
}

.woocommerce-checkout form.checkout_coupon p {
	margin: 0;
	flex: 1 1 200px;
}

/* Responsive: stack the summary under the form. */
@media (max-width: 1024px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: 1fr 300px;
	}
}

@media (max-width: 860px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout .cart .tot {
		position: static;
	}

	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		width: 100%;
		float: none;
	}
}

@media (max-width: 560px) {
	.woocommerce-checkout #order_review {
		padding: var(--s2) 12px;
	}

	.woocommerce-checkout #order_review table.shop_table {
		font-size: 13px;
	}

	.woocommerce-checkout #order_review table.shop_table th,
	.woocommerce-checkout #order_review table.shop_table td {
		padding: 6px 4px;
	}
}
/* -------------------------------------------------------------------------
 * Order received / order details
 * ---------------------------------------------------------------------- */
.woocommerce-order ul.woocommerce-order-overview {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin: 0 0 var(--s3);
	padding: var(--s3);
	border: 1px solid var(--b);
	border-radius: var(--r);
	background: var(--gl);
}

.woocommerce-order ul.woocommerce-order-overview li {
	margin: 0;
	font-size: 13px;
	color: var(--t2);
	border: 0;
	padding: 0;
	float: none;
}

.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	color: var(--t);
	font-size: 15px;
}

/* -------------------------------------------------------------------------
 * Tables (orders, downloads, addresses)
 * ---------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--b);
	border-radius: var(--r);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	min-width: 0;
}

.woocommerce table.shop_table th {
	background: var(--g);
	color: #fff;
	font-weight: 600;
	padding: 10px 12px;
}

.woocommerce table.shop_table td {
	padding: 10px 12px;
	border-top: 1px solid var(--b);
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	background: var(--bg);
	color: var(--t);
}

/* -------------------------------------------------------------------------
 * My account
 * ---------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100%;
	float: none;
	margin-bottom: var(--s3);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 8px 14px;
	border: 1px solid var(--b);
	border-radius: var(--r);
	font-size: 14px;
	font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--gl);
	border-color: var(--g);
	color: var(--g);
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
}

/* -------------------------------------------------------------------------
 * Forms (login, register, lost password)
 * ---------------------------------------------------------------------- */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	border: 1px solid var(--b);
	border-radius: var(--r);
	padding: var(--s3);
	margin: 0 0 var(--s3);
}

.woocommerce form .form-row {
	margin-bottom: var(--s2);
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 4px;
}

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

/* -------------------------------------------------------------------------
 * Pagination — WooCommerce's own pager adopts the .pager look
 * ---------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: var(--s3);
	border: 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	float: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 38px;
	padding: 8px;
	border: 1px solid var(--b);
	background: #fff;
	border-radius: var(--r);
	font: 500 14px var(--f);
	color: var(--t);
	display: block;
	text-align: center;
}

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

/* -------------------------------------------------------------------------
 * Ordering dropdown — adopt the original .tools select
 * ---------------------------------------------------------------------- */
.woocommerce .woocommerce-ordering {
	margin: 0;
	float: none;
}

.woocommerce .woocommerce-ordering select {
	width: auto;
	padding: 10px 12px;
	border: 1px solid var(--b);
	border-radius: var(--r);
	background: #fff;
	font: 400 14px var(--f);
	color: var(--t);
}

/* -------------------------------------------------------------------------
 * Result count (hidden: our .tools renders the count)
 * ---------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count {
	display: none;
}

/* -------------------------------------------------------------------------
 * Star ratings
 * ---------------------------------------------------------------------- */
.woocommerce .star-rating {
	color: #e0a100;
	font-size: 13px;
}

.woocommerce .star-rating::before {
	color: var(--b);
}

/* -------------------------------------------------------------------------
 * Sale flash on loop items (we render .badge.sale ourselves)
 * ---------------------------------------------------------------------- */
.woocommerce ul.products li.product .onsale {
	display: none;
}

/* -------------------------------------------------------------------------
 * Responsive adjustments mirroring the original breakpoints
 * ---------------------------------------------------------------------- */
@media (max-width: 860px) {
	.woocommerce div.product form.cart {
		flex-wrap: wrap;
	}

	.woocommerce div.product form.cart .button {
		flex: 1 1 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
	}

	/* Checkout: stack the form and the order summary. */
	.woocommerce-checkout .cart {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout #order_review {
		padding: var(--s2);
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
		display: block;
	}

	/* Billing/shipping fields go full width instead of two columns. */
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last,
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
		width: 100%;
		float: none;
	}

	.woocommerce-checkout #order_review table.shop_table {
		font-size: 13px;
	}

	.woocommerce-checkout #order_review table.shop_table th,
	.woocommerce-checkout #order_review table.shop_table td {
		padding: 8px 6px;
	}

	/* Coupon toggle sits above the form on small screens. */
	.woocommerce-form-coupon-toggle .woocommerce-info {
		font-size: 13px;
	}
}

@media (max-width: 560px) {
	.woocommerce div.product .product_title {
		font-size: 24px;
	}

	.woocommerce div.product p.price.big,
	.woocommerce div.product span.price.big {
		font-size: 24px;
	}

	.woocommerce-order ul.woocommerce-order-overview {
		flex-direction: column;
		gap: var(--s2);
	}

	/* Checkout: tighter spacing and a scrollable summary table. */
	.woocommerce-checkout #order_review {
		padding: var(--s2) 12px;
	}

	.woocommerce-checkout #order_review table.shop_table {
		min-width: 0;
		font-size: 12px;
	}

	.woocommerce-checkout #order_review table.shop_table th,
	.woocommerce-checkout #order_review table.shop_table td {
		padding: 6px 4px;
	}

	.woocommerce-checkout #order_review table.shop_table .product-name {
		word-break: break-word;
	}

	.woocommerce-checkout #payment ul.payment_methods li label {
		font-size: 14px;
	}

	.woocommerce-checkout #payment #place_order {
		width: 100%;
	}

	/* Cart line items stack on very small screens. */
	.woocommerce-cart .cart .ci {
		grid-template-columns: 56px 1fr;
		row-gap: var(--s1);
	}

	.woocommerce-cart .cart .ci .qty,
	.woocommerce-cart .cart .ci > b,
	.woocommerce-cart .cart .ci .rm {
		grid-column: 2;
	}
}

/* -------------------------------------------------------------------------
 * Reviews carousel (homepage "What Our Customers Say")
 *
 * Extends the original .testi block with a sliding track. The first slide is
 * always visible, so the section looks identical to the original design when
 * JavaScript is unavailable.
 * ---------------------------------------------------------------------- */
.testi-carousel {
	position: relative;
}

.testi-track {
	position: relative;
	min-height: 190px;
}

.testi-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	background: #fff;
	color: var(--t);
	border-radius: 12px;
	padding: var(--s3);
	display: flex;
	gap: var(--s2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease, visibility .35s;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.testi-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	position: relative;
}

.testi-slide img {
	border-radius: 50%;
	width: 64px;
	height: 64px;
	flex: none;
	object-fit: cover;
	border: 2px solid var(--gl);
}

.testi-slide blockquote {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.testi-slide blockquote b {
	display: inline-block;
	margin-top: 6px;
	color: var(--gd);
}

.testi-slide blockquote small {
	color: var(--t2);
}

.testi-slide blockquote small a {
	color: var(--g);
	font-weight: 500;
}

.testi-slide blockquote small a:hover {
	text-decoration: underline;
}

.testi-stars {
	display: block;
	margin-bottom: 8px;
	line-height: 1;
	letter-spacing: 1px;
}

.testi-stars b {
	color: #e0a100;
	font-size: 16px;
}

.testi-stars b.off {
	color: #d8ded9;
}

/* Navigation */
.testi-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	margin-top: var(--s3);
}

.testi-prev,
.testi-next {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: grid;
	place-items: center;
	transition: background .15s, border-color .15s, transform .15s;
}

.testi-prev:hover,
.testi-next:hover {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .6);
}

.testi-prev:active,
.testi-next:active {
	transform: scale(.94);
}

.testi-dots {
	display: flex;
	gap: 8px;
}

.testi-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: background .15s, transform .15s;
}

.testi-dots button:hover {
	background: rgba(255, 255, 255, .6);
}

.testi-dots button[aria-selected="true"] {
	background: #fff;
	transform: scale(1.25);
}

@media (max-width: 860px) {
	.testi-track {
		min-height: 230px;
	}
}

@media (max-width: 560px) {
	.testi-track {
		min-height: 300px;
	}

	.testi-slide {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--s2);
	}

	.testi-slide blockquote {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.testi-slide {
		transition: none;
	}
}
/* -------------------------------------------------------------------------
 * Product reviews tab
 *
 * WooCommerce renders the review list and form with its own markup; these
 * rules bring it in line with the theme's card / form components.
 * ---------------------------------------------------------------------- */
.woocommerce div.product #reviews {
	margin: 0;
}

.woocommerce div.product #reviews .woocommerce-Reviews-title {
	font-size: 18px;
	margin: 0 0 var(--s2);
}

.woocommerce div.product #reviews .woocommerce-Reviews-title span {
	color: var(--g);
}

/* Review list */
.woocommerce div.product #reviews ol.commentlist {
	list-style: none;
	margin: 0 0 var(--s3);
	padding: 0;
}

.woocommerce div.product #reviews ol.commentlist li.review {
	margin: 0 0 var(--s2);
	padding: var(--s2);
	background: #fff;
	border: 1px solid var(--b);
	border-radius: var(--r);
}

.woocommerce div.product #reviews .comment_container {
	display: flex;
	gap: var(--s2);
	align-items: flex-start;
}

.woocommerce div.product #reviews .comment_container img.avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex: none;
	margin: 0;
	border: 0;
	padding: 0;
}

.woocommerce div.product #reviews .comment-text {
	flex: 1;
	margin: 0;
	border: 0;
	padding: 0;
}

.woocommerce div.product #reviews .comment-text .star-rating {
	float: none;
	margin: 0 0 6px;
	font-size: 13px;
}

.woocommerce div.product #reviews .comment-text p.meta {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--t2);
}

.woocommerce div.product #reviews .comment-text p.meta strong {
	color: var(--t);
	font-weight: 600;
}

.woocommerce div.product #reviews .comment-text .description p {
	margin: 0;
}

/* Review form */
.woocommerce div.product #review_form_wrapper {
	margin-top: var(--s3);
	padding-top: var(--s3);
	border-top: 1px solid var(--b);
}

.woocommerce div.product #review_form .comment-reply-title {
	display: block;
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 var(--s2);
}

.woocommerce div.product #review_form .comment-form-rating {
	margin-bottom: var(--s2);
}

.woocommerce div.product #review_form .comment-form-rating label {
	display: block;
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 4px;
}

.woocommerce div.product #review_form .comment-form-rating p.stars {
	margin: 0;
	line-height: 1;
}

.woocommerce div.product #review_form .comment-form-rating p.stars a {
	color: #e0a100;
	font-size: 20px;
	text-decoration: none;
}

.woocommerce div.product #review_form .comment-form-comment label,
.woocommerce div.product #review_form .comment-form-author label,
.woocommerce div.product #review_form .comment-form-email label {
	display: block;
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 4px;
}

.woocommerce div.product #review_form .comment-form-comment textarea {
	width: 100%;
	min-height: 110px;
}

.woocommerce div.product #review_form .comment-form-author,
.woocommerce div.product #review_form .comment-form-email {
	display: inline-block;
	width: calc(50% - var(--s1));
	vertical-align: top;
}

.woocommerce div.product #review_form .comment-form-email {
	margin-left: var(--s1);
}

.woocommerce div.product #review_form .form-submit {
	margin: var(--s2) 0 0;
}

.woocommerce div.product #review_form .form-submit input[type="submit"] {
	display: inline-block;
	font: 500 14px var(--f);
	padding: 10px 18px;
	border: 1px solid var(--gd);
	border-radius: var(--r);
	background: var(--gd);
	color: #fff;
	cursor: pointer;
}

.woocommerce div.product #review_form .form-submit input[type="submit"]:hover {
	background: var(--g);
}

/* "Verified owner" badge */
.woocommerce div.product #reviews .woocommerce-review__verified {
	color: var(--g);
	font-style: normal;
	font-size: 12px;
}

@media (max-width: 560px) {
	.woocommerce div.product #review_form .comment-form-author,
	.woocommerce div.product #review_form .comment-form-email {
		display: block;
		width: 100%;
		margin-left: 0;
	}
}