/* ============================================================
   Shopify Connect — Front-end Styles
   ============================================================ */

/* ---------- Variables ---------- */
:root {
	--sc-font: inherit;
	--sc-radius: 8px;
	--sc-radius-lg: 12px;
	--sc-btn-bg: #fa9f1b;
	--sc-btn-color: #2d4159;
	--sc-btn-radius: 6px;
	--sc-cart-width: 380px;
	--sc-transition: 0.3s ease;
	--sc-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
	--sc-border: #e5e5e5;
	--sc-text: #111;
	--sc-muted: #6b6b6b;
	--sc-bg: #fff;
	--sc-overlay: rgba(0, 0, 0, 0.4);
}

/* ---------- Cart Trigger (icon button, place in header via Elementor) ---------- */
.sc-cart-trigger[type="button"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	border: 0;
	justify-content: center;
	width: 30px;
	padding: 0;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--sc-btn-color);
	line-height: 1;
	transition: opacity 0.2s;
}

/* Elementor's Theme Style > Buttons component styles plain button/
   [type=button]/[type=submit] elements site-wide on :hover AND :focus (not
   just :focus-visible) using !important — a higher-specificity rule alone
   isn't enough to beat that, so these are pinned down with !important too,
   across every state Elementor's selector list covers. */
.sc-cart-trigger[type="button"]:hover,
.sc-cart-trigger[type="button"]:focus,
.sc-cart-trigger[type="button"]:focus-visible {
	background: none !important;
	color: var(--sc-btn-color) !important;
	border: none !important;
	box-shadow: none !important;
}

.sc-cart-trigger[type="button"]:hover {
	opacity: 0.7;
	border-radius: 0;
}

.sc-cart-trigger[type="button"]:focus-visible {
	outline: 2px solid var(--sc-btn-bg);
	outline-offset: 2px;
}

.sc-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--sc-btn-bg);
	color: var(--sc-btn-color);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}

.sc-cart-count:empty,
.sc-cart-count[textContent="0"] {
	display: none;
}

/* ---------- Overlay ---------- */
.sc-cart-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--sc-overlay);
	z-index: 9998;
	opacity: 0;
	transition: opacity var(--sc-transition);
}

.sc-cart-overlay.is-open {
	display: block;
	opacity: 1;
}

/* ---------- Mini Cart Drawer ---------- */
.sc-mini-cart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--sc-cart-width);
	max-width: 100vw;
	background: var(--sc-bg);
	box-shadow: var(--sc-shadow);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--sc-transition);
}

.sc-mini-cart.is-open {
	transform: translateX(0);
}

/* No scrollbar on body when cart is open */
body.sc-cart-open {
	overflow: hidden;
}

.sc-cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--sc-border);
}

.sc-cart-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--sc-text);
}

#sc-mini-cart .sc-cart-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--sc-muted);
	line-height: 1;
	transition: color 0.2s;
}

#sc-mini-cart .sc-cart-close:hover {
	color: var(--sc-text);
	border-radius: 0;
}

#sc-mini-cart .sc-cart-close:focus-visible {
	outline: 2px solid var(--sc-btn-bg);
	outline-offset: 2px;
}

/* Body / items */
.sc-cart-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 24px;
	position: relative;
}

.sc-cart-loading {
	display: flex;
	justify-content: center;
	padding: 40px 0;
}

.sc-cart-loading[aria-hidden="true"] {
	display: none;
}

.sc-spinner {
	width: 28px;
	height: 28px;
	border: 2px solid var(--sc-border);
	border-top-color: var(--sc-text);
	border-radius: 50%;
	animation: sc-spin 0.7s linear infinite;
}

@keyframes sc-spin {
	to {
		transform: rotate(360deg);
	}
}

.sc-cart-empty {
	text-align: center;
	padding: 40px 0;
	color: var(--sc-muted);
}

/* Line items */
.sc-cart-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sc-cart-item {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 12px;
	align-items: start;
}

.sc-item-image-wrap {
	border-radius: var(--sc-radius);
	overflow: hidden;
	background: #f5f5f5;
	aspect-ratio: 1;
}

.sc-item-image {
	width: 72px;
	height: 72px;
	object-fit: cover;
	display: block;
}

.sc-item-details {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sc-item-title {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--sc-text);
	line-height: 1.4;
}

.sc-item-variant {
	margin: 0;
	font-size: 13px;
	color: var(--sc-muted);
}

.sc-item-qty-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

/* Quantity control base — the mini cart's own look. The product widget
   (product.css, which loads after this file and only on pages that use the
   widget) overrides this with its own distinct styling, so the two don't
   need to match visually. */
.sc-qty-control {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	overflow: hidden;
}

#sc-mini-cart .sc-qty-btn {
	width: 36px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--sc-text);
	transition: background 0.15s;
}

#sc-mini-cart .sc-qty-btn:hover {
	background: #f0f0f0;
	border-radius: 0;
}

#sc-mini-cart .sc-qty-btn:focus-visible {
	outline: 2px solid var(--sc-btn-bg);
	outline-offset: -2px;
}

#sc-mini-cart .sc-qty-input {
	width: 50px;
	height: 40px;
	border: none;
	border-left: 1px solid var(--sc-border);
	border-right: 1px solid var(--sc-border);
	text-align: center;
	font-size: 15px;
	color: var(--sc-text);
	background: var(--sc-bg);
	-moz-appearance: textfield;
}

.sc-qty-input::-webkit-inner-spin-button,
.sc-qty-input::-webkit-outer-spin-button {
	display: none;
}

.sc-item-price {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--sc-text);
	white-space: nowrap;
}

#sc-mini-cart .sc-item-remove {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--sc-muted);
	transition: color 0.2s;
}

#sc-mini-cart .sc-item-remove:hover {
	color: #c00;
	border-radius: 0;
}

#sc-mini-cart .sc-item-remove:focus-visible {
	outline: 2px solid var(--sc-btn-bg);
	outline-offset: 2px;
}

/* Footer */
.sc-cart-footer {
	border-top: 1px solid var(--sc-border);
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sc-cart-subtotal {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 600;
	color: var(--sc-text);
}

.sc-cart-tax-note {
	margin: 0;
	font-size: 12px;
	color: var(--sc-muted);
}

.sc-cart-message {
	margin: 0;
	font-size: 13px;
	min-height: 0;
}

.sc-cart-message:empty {
	display: none;
}

.sc-cart-message.sc-msg-error {
	color: #c00;
}

.sc-cart-message.sc-msg-success {
	color: #1a7f37;
}

#sc-mini-cart .sc-checkout-btn {
	display: block;
	width: 100%;
	padding: 14px;
	background: var(--sc-btn-bg);
	color: var(--sc-btn-color);
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: var(--sc-btn-radius);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: opacity 0.2s;
}

#sc-mini-cart .sc-checkout-btn:hover {
	opacity: 0.85;
	color: var(--sc-btn-color);
}

#sc-mini-cart .sc-checkout-btn:focus-visible {
	outline: 2px solid var(--sc-btn-bg);
	outline-offset: 2px;
}

#sc-mini-cart .sc-checkout-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
	:root {
		--sc-cart-width: 100vw;
	}

	.sc-cart-item {
		grid-template-columns: 60px 1fr auto;
	}

	.sc-item-image,
	.sc-item-image-wrap {
		width: 60px;
		height: 60px;
	}
}