/*
 * Sophix Cart — Sophix Natural theme
 *
 * Palette taken from the live site (Elementor global colours + computed styles):
 *   Espresso  #2A1C14  headings, header bar, primary text        (--e-global-color-93ce5bd)
 *   Cocoa     #40291D  hover / secondary dark                      (--e-global-color-c7e1e0c)
 *   Rust      #6A300E  commerce actions: same as "Add to Cart"    (--e-global-color-55970ef)
 *   Bark      #7A4D2D  secondary brown, links                      (--e-global-color-cf433ba)
 *   Gold      #C79A58  accent on dark: eyebrows, counts, "Ingredients." highlight
 *   Blush     #E9D3C8  soft surface: announcement bar, borders    (--e-global-color-5e54f8c)
 * Type: DM Serif Display for headings, Manrope for small caps / labels (both already loaded
 * by the site), body text inherits the theme.
 *
 * Every rule is scoped to .sxc-ui with "body" in front, so the theme's global button, input
 * and link styles (Hello Elementor paints buttons pink) cannot leak in.
 */

:root {
	--sxc-espresso: #2A1C14;
	--sxc-cocoa: #40291D;
	--sxc-rust: #6A300E;
	--sxc-rust-dark: #52250B;
	--sxc-bark: #7A4D2D;
	--sxc-gold: #C79A58;
	--sxc-blush: #E9D3C8;
	--sxc-blush-soft: #F6ECE6;
	--sxc-cream: #FCF8F5;
	--sxc-white: #FFFFFF;
	--sxc-muted: #7A6558;
	--sxc-line: #EADDD4;
	--sxc-danger: #A3261B;

	--sxc-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
	--sxc-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sxc-radius: 12px;
	--sxc-btn-radius: 5px; /* matches the site's Add to Cart buttons */
	--sxc-shadow: 0 18px 50px rgba(42, 28, 20, .28);
}

/* ---------- reset inside plugin UI (beats theme + Elementor kit styles) ---------- */
body .sxc-ui,
body .sxc-ui * { box-sizing: border-box; }
body .sxc-ui button {
	font-family: var(--sxc-sans); font-size: inherit; line-height: 1.2;
	text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0;
	border: 0; border-radius: 0; background: none; color: inherit; padding: 0; margin: 0;
	cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body .sxc-ui button:hover,
body .sxc-ui button:focus { background: none; color: inherit; box-shadow: none; }
body .sxc-ui button:focus-visible,
body .sxc-ui a:focus-visible,
body .sxc-ui input:focus-visible { outline: 2px solid var(--sxc-gold); outline-offset: 2px; }
body .sxc-ui a { color: var(--sxc-rust); text-decoration: none; box-shadow: none; }
body .sxc-ui a:hover { color: var(--sxc-espresso); }
body .sxc-ui h2 { margin: 0; padding: 0; letter-spacing: normal; text-transform: none; }
body .sxc-ui ul { list-style: none; margin: 0; padding: 0; }
body .sxc-ui img { max-width: none; }

html.sxc-lock, html.sxc-lock body { overflow: hidden; }

.sxc-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--sxc-sans); font-size: 10.5px; font-weight: 700;
	letter-spacing: .22em; text-transform: uppercase; color: var(--sxc-gold);
}
.sxc-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* ---------- overlay + drawer ---------- */
.sxc-overlay {
	position: fixed; inset: 0; z-index: 99998;
	background: rgba(42, 28, 20, .55);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sxc-overlay[hidden] { display: none; }

.sxc-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 99999;
	width: min(440px, 100vw); height: 100vh; height: 100dvh;
	display: flex; flex-direction: column;
	background: var(--sxc-cream); color: var(--sxc-espresso);
	box-shadow: var(--sxc-shadow);
	transform: translateX(105%); visibility: hidden;
	transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility .28s;
}
.sxc-drawer.is-open { transform: none; visibility: visible; }

.sxc-drawer__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 22px 24px 20px; background: var(--sxc-espresso); color: var(--sxc-white);
	border-bottom: 3px solid var(--sxc-gold);
}
.sxc-drawer__titles { display: flex; flex-direction: column; gap: 6px; }
body .sxc-ui .sxc-drawer__head h2 {
	font-family: var(--sxc-serif); font-weight: 400; font-size: 28px; line-height: 1.1;
	color: var(--sxc-white); display: flex; align-items: center; gap: 10px;
}
.sxc-count-pill {
	font-family: var(--sxc-sans); font-size: 12px; font-weight: 700; line-height: 1;
	min-width: 26px; padding: 6px 8px; border-radius: 999px; text-align: center;
	background: var(--sxc-gold); color: var(--sxc-espresso);
}
body .sxc-ui button.sxc-icon-btn {
	width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1;
	color: var(--sxc-white); border: 1px solid rgba(255, 255, 255, .25);
	display: inline-flex; align-items: center; justify-content: center;
}
body .sxc-ui button.sxc-icon-btn:hover { background: rgba(255, 255, 255, .1); color: var(--sxc-gold); border-color: var(--sxc-gold); }

.sxc-drawer .sxc-cart-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.sxc-lines { overflow-y: auto; flex: 1; padding: 4px 24px !important; background: var(--sxc-white); }
.sxc-line {
	display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px;
	padding: 18px 0; border-bottom: 1px solid var(--sxc-line); align-items: start;
}
.sxc-line:last-child { border-bottom: 0; }
.sxc-line__img img, .sxc-row__product img {
	width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block;
	background: var(--sxc-blush-soft); border: 1px solid var(--sxc-line);
}
body .sxc-ui a.sxc-line__name {
	display: block; color: var(--sxc-espresso); font-weight: 700; font-size: 15px; line-height: 1.35;
}
body .sxc-ui a.sxc-line__name:hover { color: var(--sxc-rust); }
.sxc-line__unit { color: var(--sxc-muted); font-size: 13.5px; margin: 3px 0 10px; }
.sxc-line__side { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.sxc-line__total { font-weight: 700; white-space: nowrap; color: var(--sxc-espresso); font-size: 15px; }

/* quantity stepper */
.sxc-qty {
	display: inline-flex; align-items: stretch; height: 36px;
	border: 1px solid var(--sxc-blush); border-radius: 999px; overflow: hidden; background: var(--sxc-white);
}
body .sxc-ui button.sxc-qty__btn {
	width: 36px; font-size: 18px; color: var(--sxc-espresso); background: var(--sxc-blush-soft);
	display: inline-flex; align-items: center; justify-content: center;
}
body .sxc-ui button.sxc-qty__btn:hover { background: var(--sxc-blush); color: var(--sxc-rust); }
body .sxc-ui button.sxc-qty__btn:disabled { opacity: .35; cursor: not-allowed; background: var(--sxc-blush-soft); color: var(--sxc-espresso); }
body .sxc-ui input.sxc-qty__input {
	width: 46px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
	text-align: center; font: 700 14px/1 var(--sxc-sans); color: var(--sxc-espresso); background: var(--sxc-white);
	-moz-appearance: textfield; appearance: textfield;
}
body .sxc-ui input.sxc-qty__input:focus { outline: none; background: var(--sxc-cream); }
.sxc-qty__input::-webkit-outer-spin-button,
.sxc-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

body .sxc-ui button.sxc-remove {
	font-size: 12.5px; font-weight: 600; color: var(--sxc-muted);
	text-decoration: underline; text-underline-offset: 3px;
}
body .sxc-ui button.sxc-remove:hover { color: var(--sxc-danger); background: none; }

/* drawer footer */
.sxc-foot { padding: 20px 24px 24px; background: var(--sxc-cream); border-top: 1px solid var(--sxc-line); }
.sxc-subtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sxc-subtotal > span { font-family: var(--sxc-sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sxc-muted); }
.sxc-subtotal > strong { font-family: var(--sxc-serif); font-weight: 400; font-size: 26px; color: var(--sxc-espresso); }
.sxc-note { color: var(--sxc-muted); font-size: 12.5px; margin: 6px 0 16px; }

body .sxc-ui button.sxc-checkout-btn {
	width: 100%; padding: 16px 20px; border-radius: var(--sxc-btn-radius);
	background: var(--sxc-rust); color: var(--sxc-white);
	font: 700 15px/1 var(--sxc-sans); letter-spacing: .04em;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
body .sxc-ui button.sxc-checkout-btn::after { content: "→"; transition: transform .15s ease; }
body .sxc-ui button.sxc-checkout-btn:hover { background: var(--sxc-espresso); color: var(--sxc-white); }
body .sxc-ui button.sxc-checkout-btn:hover::after { transform: translateX(3px); }
body .sxc-ui button.sxc-checkout-btn:disabled { opacity: .7; cursor: progress; background: var(--sxc-rust); }

body .sxc-ui a.sxc-view-cart, body .sxc-ui a.sxc-continue, body .sxc-ui a.sxc-link {
	display: block; text-align: center; margin-top: 14px; font-weight: 700; font-size: 13.5px;
	color: var(--sxc-rust); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sxc-gold);
}
body .sxc-ui a.sxc-view-cart:hover, body .sxc-ui a.sxc-continue:hover, body .sxc-ui a.sxc-link:hover { color: var(--sxc-espresso); }

.sxc-errors {
	margin: 0 0 16px !important; padding: 12px 14px !important;
	background: var(--sxc-blush-soft); border-left: 3px solid var(--sxc-rust);
	border-radius: 6px; font-size: 13px; color: var(--sxc-espresso);
}
.sxc-errors li + li { margin-top: 4px; }

.sxc-empty { padding: 56px 24px; text-align: center; color: var(--sxc-muted); background: var(--sxc-white); flex: 1; }
.sxc-empty p { font-family: var(--sxc-serif); font-size: 22px; color: var(--sxc-espresso); margin: 0 0 6px; }

/* ---------- [sophix_cart] full cart page ---------- */
.sxc-cart-page { color: var(--sxc-espresso); }
.sxc-loading { color: var(--sxc-muted); }
.sxc-cart-page .sxc-empty { border: 1px solid var(--sxc-line); border-radius: var(--sxc-radius); }
.sxc-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
body .sxc-ui table.sxc-table { width: 100%; border-collapse: collapse; margin: 0; border: 0; background: var(--sxc-white); }
body .sxc-ui .sxc-table th {
	text-align: left; font: 700 11px/1 var(--sxc-sans); text-transform: uppercase; letter-spacing: .18em;
	color: var(--sxc-muted); padding: 0 14px 14px; border: 0; border-bottom: 2px solid var(--sxc-espresso); background: transparent;
}
body .sxc-ui .sxc-table td { padding: 20px 14px; border: 0; border-bottom: 1px solid var(--sxc-line); vertical-align: middle; background: transparent; }
body .sxc-ui .sxc-table tbody tr:hover td { background: var(--sxc-cream); }
.sxc-row__product { display: flex; gap: 16px; align-items: center; }
.sxc-row__product img { width: 76px; height: 76px; }
body .sxc-ui .sxc-row__product button.sxc-remove { display: block; margin-top: 8px; }
.sxc-row__total { font-weight: 700; white-space: nowrap; }
.sxc-row__price { white-space: nowrap; color: var(--sxc-muted); }

.sxc-summary {
	position: sticky; top: 24px; border-radius: var(--sxc-radius); overflow: hidden;
	background: var(--sxc-cream); border: 1px solid var(--sxc-line);
}
body .sxc-ui .sxc-summary h2 {
	font-family: var(--sxc-serif); font-weight: 400; font-size: 24px; color: var(--sxc-white);
	background: var(--sxc-espresso); padding: 18px 22px; border-bottom: 3px solid var(--sxc-gold);
}
.sxc-summary > :not(h2) { margin-left: 22px; margin-right: 22px; }
.sxc-summary > .sxc-subtotal { padding-top: 16px; }
.sxc-summary > .sxc-subtotal + .sxc-subtotal { padding-top: 8px; }
.sxc-summary > .sxc-errors { margin-top: 16px !important; }
.sxc-summary > :last-child { margin-bottom: 22px; }
body .sxc-ui .sxc-summary > button.sxc-checkout-btn { width: calc(100% - 44px); margin: 0 22px; }

@media (max-width: 900px) {
	.sxc-page { grid-template-columns: 1fr; gap: 24px; }
	.sxc-summary { position: static; }
	body .sxc-ui .sxc-table thead { display: none; }
	body .sxc-ui .sxc-table, body .sxc-ui .sxc-table tbody, body .sxc-ui .sxc-table tr, body .sxc-ui .sxc-table td { display: block; width: 100%; }
	body .sxc-ui .sxc-table tr { padding: 16px 0; border-bottom: 1px solid var(--sxc-line); }
	body .sxc-ui .sxc-table td { border: 0; padding: 6px 0; }
	body .sxc-ui .sxc-table td[data-label] { display: flex; justify-content: space-between; align-items: center; }
	body .sxc-ui .sxc-table td[data-label]::before {
		content: attr(data-label); font: 700 11px/1 var(--sxc-sans); text-transform: uppercase; letter-spacing: .16em; color: var(--sxc-muted);
	}
	body .sxc-ui .sxc-table tbody tr:hover td { background: transparent; }
}

/* ---------- floating button + [sophix_cart_icon] ---------- */
body .sxc-ui.sxc-fab {
	position: fixed; right: 20px; bottom: 96px; z-index: 99997;
	width: 58px; height: 58px; border-radius: 50%;
	background: var(--sxc-rust); color: var(--sxc-white); box-shadow: var(--sxc-shadow);
	display: flex; align-items: center; justify-content: center;
}
body .sxc-ui.sxc-fab:hover { background: var(--sxc-espresso); color: var(--sxc-white); }
body .sxc-ui.sxc-fab[hidden] { display: none; }
.sxc-fab__count, .sxc-cart-icon__count {
	position: absolute; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	background: var(--sxc-gold); color: var(--sxc-espresso);
	font: 700 11px/20px var(--sxc-sans); text-align: center;
}
.sxc-fab__count { top: -3px; right: -3px; }

body .sxc-ui.sxc-cart-icon {
	position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px; color: inherit;
}
body .sxc-ui.sxc-cart-icon:hover { color: var(--sxc-gold); background: none; }
.sxc-cart-icon__count { top: -4px; left: 20px; }
.sxc-cart-icon__label, .sxc-cart-icon__total { margin-left: 6px; font-family: var(--sxc-sans); font-weight: 600; }

.sxc-bump { animation: sxc-bump .4s ease; }
@keyframes sxc-bump { 50% { transform: scale(1.15); } }

/* Elementor's own mini-cart panel is replaced by the drawer */
.elementor-menu-cart__container,
.elementor-menu-cart__main { display: none !important; }

/* While the cart/checkout page pushes local changes to WooCommerce */
html.sxc-syncing .woocommerce-checkout,
html.sxc-syncing .woocommerce-cart-form { opacity: .4; pointer-events: none; }

.sxc-auto-checkout { font-family: var(--sxc-serif); font-size: 22px; color: var(--sxc-espresso); padding: 40px 0; text-align: center; }

/* ---------- toasts ---------- */
#sxc-toasts {
	position: fixed; right: 24px; top: 96px; z-index: 100000;
	display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.sxc-toast {
	background: var(--sxc-espresso); color: var(--sxc-white);
	padding: 14px 18px; border-radius: 8px; max-width: 340px;
	box-shadow: 0 10px 30px rgba(42, 28, 20, .3); border-left: 4px solid var(--sxc-gold);
	font: 600 14px/1.4 var(--sxc-sans);
	opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease;
}
.sxc-toast--warn { border-left-color: #E07A5F; }
.sxc-toast.show { opacity: 1; transform: none; }

@media (max-width: 480px) {
	#sxc-toasts { left: 16px; right: 16px; top: auto; bottom: 96px; }
	.sxc-toast { max-width: none; }
	.sxc-drawer__head { padding: 18px 16px; }
	.sxc-lines { padding: 4px 16px !important; }
	.sxc-foot { padding: 16px; }
	.sxc-line { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
	.sxc-line__img img { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.sxc-drawer, .sxc-toast { transition: none; }
	.sxc-bump { animation: none; }
}