.sflow-widget {
	max-width: 780px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.55;
	color: #1e293b;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.sflow-widget *,
.sflow-widget *::before,
.sflow-widget *::after {
	box-sizing: inherit;
}

.sflow-section-title {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}

.sflow-subsection-title {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.005em;
	margin: 24px 0 12px;
}

/* ---------- Products ---------- */

.sflow-products-section {
	margin-bottom: 28px;
}

.sflow-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

/* Horizontal list display style */

.sflow-products-list {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.sflow-product-row {
	border-bottom: 1px solid #eef0f2;
	background: #fff;
	cursor: pointer;
	transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-left-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	border-left: 3px solid transparent;
}

.sflow-product-row:last-child {
	border-bottom: none;
}

.sflow-product-row.is-selected {
	background: #f0fdf4;
	border-left-color: #4caf50;
}

.sflow-product-row-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	cursor: pointer;
}

.sflow-product-row-input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
}

.sflow-product-row-image {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	background: #f5f5f5;
}

.sflow-product-row-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sflow-product-row-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sflow-product-row-info .sflow-product-title {
	font-size: 15px;
	margin: 0;
}

.sflow-product-row-info .sflow-product-description {
	font-size: 12.5px;
	color: #777;
	margin: 0;
	-webkit-line-clamp: 1;
}

.sflow-product-row-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 4px;
}

.sflow-product-row-quantity {
	flex-shrink: 0;
	margin-bottom: 0;
}

.sflow-product-row-price {
	flex-shrink: 0;
	margin-left: auto;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.sflow-product-row-inner {
		gap: 10px;
		padding: 12px;
	}

	.sflow-product-row-info .sflow-product-title {
		font-size: 14px;
	}

	.sflow-product-row-price {
		font-size: 15px;
	}
}

.sflow-product-card {
	position: relative;
	background: #ffffff;
	border: 2px solid #ececec;
	border-radius: 12px;
	padding: 18px;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.sflow-product-card:hover {
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
	transform: translateY(-2px);
}

.sflow-product-card.is-selected {
	border-color: #4caf50;
	background-color: #f6fff7;
	box-shadow: 0 4px 14px rgba(76, 175, 80, 0.18);
}

.sflow-product-card::after {
	content: "✓";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #4caf50;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.sflow-product-card.is-selected::after {
	opacity: 1;
	transform: scale(1);
}

.sflow-product-image {
	margin-bottom: 12px;
	border-radius: 8px;
	overflow: hidden;
	background: #f5f5f5;
}

.sflow-product-image img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.sflow-product-card:hover .sflow-product-image img {
	transform: scale(1.03);
}

.sflow-product-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #1e293b;
}

.sflow-product-description {
	font-size: 13px;
	color: #6b7280;
	margin: 0 0 10px;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sflow-product-price {
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: #e74c3c;
	margin-bottom: 8px;
}

.sflow-product-price del {
	font-size: 13px;
	font-weight: 400;
	color: #9ca3af;
	text-decoration: line-through;
	margin-right: 6px;
	opacity: 0.85;
}

.sflow-product-price ins {
	text-decoration: none;
}

.sflow-stock-count {
	display: block;
	font-size: 12px;
	color: #b7791f;
	margin-bottom: 8px;
}

.sflow-product-variations {
	margin-bottom: 10px;
}

.sflow-product-variations select {
	width: 100%;
	padding: 7px 10px;
	margin-bottom: 6px;
	border-radius: 7px;
	border: 1px solid #d5d8dc;
	font-size: 13px;
}

.sflow-product-quantity {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.sflow-qty-minus,
.sflow-qty-plus {
	width: 26px;
	height: 26px;
	border: 1px solid #d5d8dc;
	background: #f9fafb;
	border-radius: 7px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	color: #374151;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.sflow-qty-minus:hover,
.sflow-qty-plus:hover {
	background: #eef2ff;
	border-color: #a5b4fc;
}

.sflow-qty-minus:active,
.sflow-qty-plus:active {
	transform: scale(0.92);
}

/* Quantity number — third attempt at reliable visibility.
   The first two attempts tried to force the real <input>'s OWN text to
   stay visible against unpredictable theme CSS (plain, then !important).
   Both failed on at least one real site, which means SOME theme rule
   still wins for a property neither attempt covered. Rather than guess a
   third specific property, this stops depending on the input's own text
   rendering at all: the input's text is deliberately transparent, and a
   plain <span> sitting on top — a plain span, not an <input>, so it is
   essentially never targeted by theme "reset all inputs" rules — shows
   the actual digit instead. The input itself stays fully interactive
   (clickable, focusable, typeable, screen-reader value announced
   normally) for both real customers and assistive tech; only its own
   painted text is invisible on purpose. */
.sflow-qty-wrap {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 28px;
}

.sflow-qty-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	text-align: center;
	padding: 0;
	border: 1px solid #d5d8dc;
	border-radius: 7px;
	font-weight: 600;
	font-size: 13px;
	transition: border-color 0.15s ease;
	background-color: #ffffff !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	caret-color: #1f2937;
	box-sizing: border-box;
	-moz-appearance: textfield;
	appearance: textfield;
}

.sflow-qty-input::-webkit-inner-spin-button,
.sflow-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.sflow-qty-input:focus {
	outline: none;
	border-color: #a5b4fc;
	box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.25);
}

.sflow-qty-display {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	color: #1f2937 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	pointer-events: none;
	user-select: none;
}

.sflow-product-select label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
}

.sflow-product-select input {
	width: 18px;
	height: 18px;
	accent-color: #4caf50;
	cursor: pointer;
}

/* Extra products */

.sflow-extra-products-section {
	margin-top: 20px;
}

.sflow-extra-product {
	margin-top: 10px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.sflow-extra-product:hover {
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
	transform: translateY(-1px);
}

.sflow-extra-product:first-child {
	margin-top: 0;
}

.sflow-extra-product:has(.sflow-extra-product-check:checked) {
	border-color: #4caf50;
	box-shadow: 0 0 0 1px #4caf50;
	background: #f6fff8;
}

.sflow-extra-product-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	cursor: pointer;
}

.sflow-extra-product-check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #4caf50;
	cursor: pointer;
}

.sflow-extra-product-image {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	background: #f5f5f5;
}

.sflow-extra-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sflow-extra-product-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sflow-extra-product-label {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	color: #1e293b;
}

.sflow-extra-product-info .sflow-product-variations {
	margin: 2px 0 0;
}

.sflow-extra-product-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 4px;
}

.sflow-extra-product-quantity {
	flex-shrink: 0;
	margin-bottom: 0;
}

.sflow-extra-product-price {
	flex-shrink: 0;
	margin-left: auto;
	color: #e74c3c;
	font-weight: 700;
	font-size: 13.5px;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.sflow-extra-product-inner {
		gap: 10px;
		padding: 10px 12px;
	}

	.sflow-extra-product-label {
		font-size: 13.5px;
	}
}

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

.sflow-checkout-section {
	background: #f8f9fb;
	border: 1px solid #eef0f2;
	border-radius: 14px;
	padding: 24px;
}

/* Global "Form Layout" setting (Style Settings) — Two Column is the grid
   behavior every field's own half/full width already assumes; Single
   Column overrides that and stacks every field one-per-row instead. */
.sflow-widget.sflow-layout-single .sflow-fields-grid {
	grid-template-columns: 1fr;
}

.sflow-widget.sflow-layout-single .sflow-field-half {
	grid-column: auto;
}

.sflow-fields-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.sflow-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sflow-field-full {
	grid-column: 1 / -1;
}

.sflow-field label {
	font-size: 13px;
	font-weight: 600;
}

.sflow-required {
	color: #e74c3c;
}

.sflow-field input[type="text"],
.sflow-field input[type="email"],
.sflow-field input[type="tel"],
.sflow-field input[type="number"],
.sflow-field input[type="date"],
.sflow-field select,
.sflow-field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #d5d9e0;
	border-radius: 8px;
	background: #ffffff;
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.sflow-field input:focus,
.sflow-field select:focus,
.sflow-field textarea:focus {
	outline: none;
	border-color: #007bff;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
}

.sflow-field.has-error input,
.sflow-field.has-error select,
.sflow-field.has-error textarea {
	border-color: #dc3545;
}

.sflow-field-error {
	font-size: 12px;
	color: #dc3545;
	min-height: 14px;
}

.sflow-checkbox-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sflow-shipping-toggle {
	margin: 18px 0;
	font-size: 14px;
}

.sflow-shipping-toggle label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* Coupon */

.sflow-coupon-section {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 20px 0;
	flex-wrap: wrap;
}

.sflow-coupon-input {
	flex: 1;
	min-width: 160px;
	padding: 11px 13px;
	border: 1px solid #d5d9e0;
	border-radius: 8px;
	font-family: inherit;
	transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.sflow-coupon-input:focus {
	outline: none;
	border-color: #007bff;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
}

.sflow-apply-coupon {
	padding: 11px 20px;
	border: none;
	border-radius: 8px;
	background: #1e3a5f;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.sflow-apply-coupon:hover {
	background: #16304e;
}

.sflow-coupon-message {
	font-size: 13px;
	flex-basis: 100%;
}

.sflow-coupon-message.is-valid {
	color: #28a745;
}

.sflow-coupon-message.is-invalid {
	color: #dc3545;
}

/* Shipping method */

.sflow-shipping-method-section {
	margin: 20px 0;
}

.sflow-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sflow-shipping-placeholder {
	margin: 0;
	padding: 12px 14px;
	font-size: 13px;
	color: #999;
	font-style: italic;
	background: #fbfbfb;
	border: 1px dashed #e0e0e0;
	border-radius: 8px;
}

.sflow-shipping-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	border: 1px solid #e2e5ea;
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.sflow-shipping-option:has(input:checked) {
	border-color: #007bff;
	background: #f2f8ff;
}

.sflow-shipping-option input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: #007bff;
	cursor: pointer;
	margin: 0;
}

.sflow-shipping-option-label {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 14px;
	color: #1e293b;
}

.sflow-shipping-option-cost {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 14px;
	color: #1e293b;
}

/* Order summary */

.sflow-order-summary {
	margin: 20px 0;
}

.sflow-order-summary h4 {
	margin: 0 0 10px;
}

.sflow-summary-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.sflow-summary-header {
	display: flex;
	justify-content: space-between;
	padding: 12px 16px;
	font-weight: 700;
	font-size: 13px;
	color: #1e293b;
	background: #fafafa;
	border-bottom: 1px solid #e5e5e5;
}

.sflow-summary-line-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sflow-summary-line-items:empty {
	display: none;
}

.sflow-summary-line-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
	color: #4b5563;
}

.sflow-summary-line-image {
	width: 34px;
	height: 34px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	background: #f5f5f5;
}

.sflow-summary-line-name {
	flex: 1 1 auto;
	min-width: 0;
}

.sflow-summary-line-total {
	flex-shrink: 0;
	font-weight: 600;
	color: #1e293b;
}

.sflow-summary-totals {
	padding: 0 16px;
}

.sflow-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	font-size: 14px;
	color: #374151;
	border-bottom: 1px solid #f0f0f0;
}

.sflow-total-row {
	border-top: 2px solid #e5e5e5;
	border-bottom: none;
	margin-top: 2px;
	padding: 16px 0 18px;
	font-size: 18px;
	font-weight: 700;
	color: #1e293b;
}

.sflow-total {
	color: #e74c3c;
	font-weight: 700;
}

/* Payment */

.sflow-payment-section {
	margin: 20px 0;
}

.sflow-payment-methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sflow-payment-option {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 13px 15px;
	border: 1px solid #e2e5ea;
	border-radius: 10px 10px 0 0;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.sflow-payment-option-wrap:has(input:checked) .sflow-payment-option {
	border-color: #007bff;
	background: #f2f8ff;
}

.sflow-payment-option-wrap:not(:has(.sflow-payment-fields)) .sflow-payment-option {
	border-radius: 10px;
}

.sflow-payment-title {
	font-weight: 600;
}

/* Payment gateway icons (bKash, Nagad, card logos, etc.) come from each
   gateway plugin's own get_icon() output — every plugin ships its own
   markup and sizing convention, which is why they show up at wildly
   different sizes by default. Normalize them all to one consistent
   height. !important is needed because gateway plugins commonly set
   width/height directly as inline style="" or width="" attributes on
   their own <img> tag, which a plain stylesheet rule can't outrank. */
.sflow-payment-icon {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 28px;
}

.sflow-payment-icon img {
	max-height: 28px !important;
	width: auto !important;
	max-width: 90px !important;
	height: auto !important;
	object-fit: contain;
	vertical-align: middle;
}

.sflow-payment-description {
	flex-basis: 100%;
	font-size: 12.5px;
	color: #777;
}

.sflow-payment-fields {
	border: 1px solid #e2e5ea;
	border-top: none;
	border-radius: 0 0 10px 10px;
	padding: 13px 15px;
	background: #fbfbfc;
}

.sflow-no-gateways {
	color: #999;
	font-style: italic;
}

/* Submit button */

.sflow-place-order-wrap {
	margin-top: 22px;
	text-align: center;
}

.sflow-place-order-btn {
	display: inline-block;
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: 10px;
	background: #28a745;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 10px rgba(40, 167, 69, 0.18);
	transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}

.sflow-place-order-btn:hover {
	background: #218838;
	box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(40, 167, 69, 0.24);
}

.sflow-place-order-btn:active {
	transform: scale(0.98);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(40, 167, 69, 0.18);
}

.sflow-place-order-btn:focus-visible {
	outline: 3px solid #a8d8b9;
	outline-offset: 2px;
}

.sflow-place-order-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.sflow-messages {
	margin-top: 14px;
	font-size: 14px;
}

.sflow-messages:empty {
	display: none;
}

.sflow-messages.is-error {
	color: #dc3545;
	background: #fdecea;
	border: 1px solid #f5c2c7;
	border-radius: 6px;
	padding: 10px 14px;
}

.sflow-messages.is-success {
	color: #155724;
	background: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 6px;
	padding: 10px 14px;
}

/* WhatsApp thank-you button */

.sflow-whatsapp-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 8px;
	background: #25d366;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.sflow-whatsapp-button:hover,
.sflow-whatsapp-button:visited {
	color: #fff;
}

.sflow-order-success {
	text-align: center;
	padding: 32px 20px;
	background: #f9f9f9;
	border-radius: 10px;
}

.sflow-order-success-title {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 18px;
}

.sflow-order-success .sflow-whatsapp-button {
	font-size: 16px;
	padding: 14px 28px;
}

.sflow-continue-link {
	display: block;
	margin-top: 16px;
	color: #666;
	text-decoration: underline;
	font-size: 14px;
}

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

@media (max-width: 900px) {
	.sflow-widget {
		font-size: 14.5px;
	}

	.sflow-checkout-section {
		padding: 20px;
	}
}

@media (max-width: 600px) {
	.sflow-fields-grid {
		grid-template-columns: 1fr;
	}

	.sflow-field-half {
		grid-column: auto;
	}

	.sflow-products-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sflow-checkout-section {
		padding: 16px;
	}

	.sflow-payment-option,
	.sflow-shipping-option,
	.sflow-extra-product-inner {
		padding: 12px;
	}

	.sflow-coupon-section {
		flex-direction: column;
		align-items: stretch;
	}

	.sflow-coupon-input,
	.sflow-apply-coupon {
		width: 100%;
	}

	.sflow-place-order-btn {
		padding: 15px 18px;
		font-size: 16px;
	}
}

@media (max-width: 400px) {
	.sflow-products-grid {
		grid-template-columns: 1fr;
	}

	.sflow-product-row-inner {
		padding: 12px;
	}

	.sflow-shipping-option-label {
		font-size: 13.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sflow-widget * {
		transition: none !important;
	}
}