/* Revolutionary Ecommerce — frontend
 * Design system: tokens → utilities → components.
 * Light/dark via prefers-color-scheme; everything is responsive.
 */

:root {
	--re-bg:        #ffffff;
	--re-fg:        #0f172a;
	--re-muted:     #64748b;
	--re-border:    #e2e8f0;
	--re-surface:   #f8fafc;
	--re-surface-2: #f1f5f9;
	--re-primary:   #6366f1;
	--re-primary-2: #4f46e5;
	--re-primary-fg:#ffffff;
	--re-success:   #16a34a;
	--re-danger:    #dc2626;
	--re-warning:   #d97706;
	--re-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--re-shadow:    0 4px 12px rgba(15, 23, 42, .08);
	--re-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .18);
	--re-radius:    14px;
	--re-radius-sm: 8px;
	--re-radius-lg: 22px;
	--re-gap:       18px;
	--re-gap-lg:    32px;
	--re-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--re-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--re-trans:     180ms cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-color-scheme: dark) {
	:root {
		--re-bg:        #0b1220;
		--re-fg:        #e2e8f0;
		--re-muted:     #94a3b8;
		--re-border:    #1e293b;
		--re-surface:   #0f172a;
		--re-surface-2: #111c34;
		--re-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
		--re-shadow:    0 4px 12px rgba(0, 0, 0, .45);
		--re-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .6);
	}
}

[class^="revecom-"], [class*=" revecom-"] { box-sizing: border-box; }

/* ----------------------------- BUTTONS ----------------------------- */
.revecom-btn {
	appearance: none; -webkit-appearance: none;
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; min-height: 44px; padding: 10px 18px;
	font: 600 14px/1 var(--re-font);
	color: var(--re-fg);
	background: var(--re-surface);
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius-sm);
	cursor: pointer; text-decoration: none;
	transition: transform var(--re-trans), background var(--re-trans), border-color var(--re-trans), box-shadow var(--re-trans);
}
.revecom-btn:hover  { background: var(--re-surface-2); }
.revecom-btn:active { transform: translateY(1px); }
.revecom-btn:focus-visible { outline: 2px solid var(--re-primary); outline-offset: 2px; }

.revecom-btn--primary {
	color: var(--re-primary-fg);
	background: linear-gradient(135deg, var(--re-primary), var(--re-primary-2));
	border-color: transparent;
	box-shadow: var(--re-shadow-sm);
}
.revecom-btn--primary:hover { box-shadow: var(--re-shadow); filter: brightness(1.04); }
.revecom-btn--ghost { background: transparent; }
.revecom-btn--lg    { min-height: 52px; padding: 14px 22px; font-size: 15px; border-radius: 10px; }
.revecom-btn[disabled], .revecom-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ----------------------------- BADGES ----------------------------- */
.revecom-badge {
	position: absolute; top: 12px; left: 12px;
	display: inline-block; padding: 4px 10px;
	font: 700 11px/1.4 var(--re-font); letter-spacing: .08em; text-transform: uppercase;
	color: #fff; background: var(--re-danger);
	border-radius: 999px; box-shadow: var(--re-shadow-sm);
}
.revecom-badge--sale { background: var(--re-danger); }

/* ----------------------------- SHOP / GRID ----------------------------- */
.revecom-shop { color: var(--re-fg); }
.revecom-shop__header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: var(--re-gap-lg);
}
.revecom-shop__title { font: 700 28px/1.2 var(--re-font); margin: 0; }
.revecom-shop__sort select {
	appearance: none; padding: 8px 32px 8px 12px;
	background: var(--re-surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M3 4.5l3 3 3-3" fill="none" stroke="%2364748b" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 10px center;
	border: 1px solid var(--re-border); border-radius: var(--re-radius-sm);
	font: 500 14px/1 var(--re-font); color: var(--re-fg);
}

.revecom-grid {
	display: grid; gap: var(--re-gap-lg);
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.revecom-grid--cols-1 { --cols: 1; }
.revecom-grid--cols-2 { --cols: 2; }
.revecom-grid--cols-3 { --cols: 3; }
.revecom-grid--cols-4 { --cols: 4; }
.revecom-grid--cols-5 { --cols: 5; }
.revecom-grid--cols-6 { --cols: 6; }
@media (max-width: 980px) { .revecom-grid { --cols: 2; } }
@media (max-width: 560px) { .revecom-grid { --cols: 1; } }

.revecom-card {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--re-bg);
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	overflow: hidden;
	transition: transform var(--re-trans), box-shadow var(--re-trans), border-color var(--re-trans);
}
.revecom-card:hover { transform: translateY(-4px); box-shadow: var(--re-shadow-lg); border-color: transparent; }
.revecom-card__media {
	position: relative; display: block;
	aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--re-surface-2);
}
.revecom-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}
.revecom-card:hover .revecom-card__media img { transform: scale(1.05); }
.revecom-card__placeholder {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--re-surface-2), var(--re-surface));
}
.revecom-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.revecom-card__title { margin: 0; font: 600 15px/1.35 var(--re-font); }
.revecom-card__title a { color: var(--re-fg); text-decoration: none; }
.revecom-card__title a:hover { color: var(--re-primary); }
.revecom-card__price { color: var(--re-muted); font: 600 16px/1 var(--re-font); }
.revecom-card__price ins { background: none; color: var(--re-fg); margin-left: 6px; text-decoration: none; }
.revecom-card__price del { opacity: .55; }
.revecom-card .revecom-btn { margin-top: auto; }

.revecom-pager { margin-top: var(--re-gap-lg); display: flex; justify-content: center; gap: 6px; }
.revecom-pager .page-numbers {
	min-width: 40px; height: 40px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--re-border); border-radius: var(--re-radius-sm);
	color: var(--re-fg); text-decoration: none;
}
.revecom-pager .page-numbers.current { background: var(--re-primary); color: #fff; border-color: transparent; }

/* ----------------------------- PRODUCT SINGLE ----------------------------- */
.revecom-product-single {
	display: grid; gap: var(--re-gap-lg);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
@media (max-width: 880px) { .revecom-product-single { grid-template-columns: 1fr; } }
.revecom-product-single__media {
	position: relative;
	border-radius: var(--re-radius); overflow: hidden;
	background: var(--re-surface-2);
}
.revecom-product-single__image {
	width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.revecom-product-single__image--placeholder { width: 100%; aspect-ratio: 1; background: var(--re-surface-2); }
.revecom-product-single__gallery {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 8px; padding: 8px;
}
.revecom-product-single__gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--re-radius-sm); cursor: pointer; }
.revecom-product-single__title { margin: 0 0 8px; font: 700 32px/1.2 var(--re-font); }
.revecom-product-single__price { font: 700 24px/1 var(--re-font); color: var(--re-fg); margin-bottom: 14px; }
.revecom-product-single__price del { opacity: .5; margin-right: 10px; font-weight: 500; }
.revecom-product-single__price ins { background: none; color: var(--re-primary); text-decoration: none; }
.revecom-product-single__excerpt { color: var(--re-muted); margin-bottom: 24px; line-height: 1.6; }
.revecom-product-single__meta { color: var(--re-muted); font-size: 14px; margin: 6px 0; }
.revecom-product-single__meta a { color: var(--re-fg); }
.revecom-product-single__description { grid-column: 1 / -1; padding-top: var(--re-gap-lg); border-top: 1px solid var(--re-border); }
.revecom-product-single__description h2 { font: 700 22px/1 var(--re-font); margin: 0 0 var(--re-gap); }

.revecom-add-to-cart {
	display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
	margin-bottom: 18px;
}
.revecom-qty {
	display: inline-flex; align-items: center;
	border: 1px solid var(--re-border); border-radius: var(--re-radius-sm);
	overflow: hidden; background: var(--re-surface);
}
.revecom-qty__btn {
	appearance: none; background: transparent; border: 0;
	width: 38px; height: 44px; font-size: 18px; font-weight: 600;
	color: var(--re-fg); cursor: pointer;
}
.revecom-qty__btn:hover { background: var(--re-surface-2); }
.revecom-qty__input {
	appearance: none; -moz-appearance: textfield;
	width: 56px; height: 44px; border: 0; text-align: center;
	background: transparent; color: var(--re-fg);
	font: 600 15px/1 var(--re-font);
}
.revecom-qty__input::-webkit-outer-spin-button,
.revecom-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ----------------------------- CART ----------------------------- */
.revecom-cart__table {
	width: 100%; border-collapse: collapse; margin-bottom: var(--re-gap-lg);
}
.revecom-cart__table th, .revecom-cart__table td {
	padding: 14px 12px; text-align: left;
	border-bottom: 1px solid var(--re-border);
}
.revecom-cart__table th { font: 600 12px/1 var(--re-font); text-transform: uppercase; letter-spacing: .04em; color: var(--re-muted); }
.revecom-cart__thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--re-radius-sm); margin-right: 10px; vertical-align: middle; }
.revecom-cart__remove {
	width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid var(--re-border); background: var(--re-surface);
	color: var(--re-muted); cursor: pointer; font-size: 16px; line-height: 1;
}
.revecom-cart__remove:hover { color: var(--re-danger); border-color: var(--re-danger); }
.revecom-cart__qty {
	width: 70px; padding: 8px 10px;
	border: 1px solid var(--re-border); border-radius: var(--re-radius-sm);
	background: var(--re-surface); color: var(--re-fg);
}
.revecom-cart__bottom {
	display: grid; gap: var(--re-gap-lg);
	grid-template-columns: 1fr 360px; align-items: start;
}
@media (max-width: 720px) { .revecom-cart__bottom { grid-template-columns: 1fr; } }
.revecom-cart__coupon { display: flex; gap: 8px; }
.revecom-cart__coupon input {
	flex: 1; padding: 10px 14px;
	border: 1px solid var(--re-border); border-radius: var(--re-radius-sm);
	background: var(--re-surface); color: var(--re-fg);
}
.revecom-cart__totals {
	background: var(--re-surface); border: 1px solid var(--re-border);
	border-radius: var(--re-radius); padding: 22px;
	display: flex; flex-direction: column; gap: 10px;
}
.revecom-cart__totals > div { display: flex; justify-content: space-between; align-items: center; }
.revecom-cart__totals span { color: var(--re-muted); }
.revecom-cart__total { padding-top: 12px; border-top: 1px solid var(--re-border); font-size: 18px; }
.revecom-cart__total strong { color: var(--re-fg); }

/* ----------------------------- MINI CART ----------------------------- */
.revecom-mini-cart__toggle {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; background: var(--re-surface);
	border: 1px solid var(--re-border); border-radius: 999px;
	color: var(--re-fg); text-decoration: none; font-weight: 600;
}
.revecom-mini-cart__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 6px;
	background: var(--re-primary); color: #fff;
	border-radius: 999px; font-size: 12px; font-weight: 700;
}

/* ----------------------------- CHECKOUT ----------------------------- */
.revecom-checkout {
	display: grid; gap: var(--re-gap-lg);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
@media (max-width: 880px) { .revecom-checkout { grid-template-columns: 1fr; } }

.revecom-checkout__fields h2,
.revecom-checkout__summary h2 { font: 700 22px/1 var(--re-font); margin: 0 0 18px; }

.revecom-fields { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.revecom-fields .revecom-field[data-key="address_1"],
.revecom-fields .revecom-field[data-key="address_2"],
.revecom-fields .revecom-field[data-key="company"] { grid-column: 1 / -1; }
.revecom-field { display: flex; flex-direction: column; gap: 6px; }
.revecom-field--toggle { flex-direction: row; align-items: center; margin-top: 12px; }
.revecom-field__label { font: 500 13px/1 var(--re-font); color: var(--re-muted); }
.revecom-field.is-required .revecom-field__label::after { content: ""; }
.revecom-field input,
.revecom-field select,
.revecom-field textarea {
	padding: 12px 14px;
	background: var(--re-surface);
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius-sm);
	color: var(--re-fg); font: 500 14px/1.4 var(--re-font);
	transition: border-color var(--re-trans), box-shadow var(--re-trans);
}
.revecom-field input:focus,
.revecom-field select:focus,
.revecom-field textarea:focus { outline: none; border-color: var(--re-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }

.revecom-checkout__summary {
	background: var(--re-surface);
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	padding: 26px;
	position: sticky; top: 20px; align-self: start;
}
.revecom-summary { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.revecom-summary td, .revecom-summary th {
	padding: 8px 0; text-align: left; border-bottom: 1px solid var(--re-border);
	font-size: 14px;
}
.revecom-summary tfoot th { color: var(--re-muted); font-weight: 500; }
.revecom-summary__total th, .revecom-summary__total td { font-size: 16px; font-weight: 700; }

.revecom-payment-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.revecom-payment-method {
	display: block; padding: 14px;
	border: 1px solid var(--re-border); border-radius: var(--re-radius-sm);
	background: var(--re-bg); cursor: pointer;
	transition: border-color var(--re-trans), box-shadow var(--re-trans);
}
.revecom-payment-method:has(input:checked) { border-color: var(--re-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.revecom-payment-method__title { font-weight: 600; margin-left: 8px; }
.revecom-payment-method__fields { padding-top: 12px; padding-left: 28px; }
.revecom-payment-method:not(:has(input:checked)) .revecom-payment-method__fields { display: none; }

.revecom-stripe-card {
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--re-border); border-radius: var(--re-radius-sm);
	background: var(--re-surface);
}
.revecom-stripe-error { color: var(--re-danger); font-size: 13px; min-height: 18px; padding-top: 6px; }

.revecom-checkout__error { color: var(--re-danger); padding-top: 10px; min-height: 18px; }
.revecom-place-order { width: 100%; }

/* ----------------------------- ACCOUNT ----------------------------- */
.revecom-account {
	display: grid; gap: var(--re-gap-lg);
	grid-template-columns: 240px minmax(0, 1fr);
}
@media (max-width: 760px) { .revecom-account { grid-template-columns: 1fr; } }
.revecom-account__nav {
	display: flex; flex-direction: column;
	background: var(--re-surface); border: 1px solid var(--re-border);
	border-radius: var(--re-radius); padding: 8px;
}
.revecom-account__nav-item {
	padding: 12px 14px; border-radius: var(--re-radius-sm);
	color: var(--re-fg); text-decoration: none; font-weight: 500;
}
.revecom-account__nav-item:hover { background: var(--re-surface-2); }
.revecom-account__nav-item.is-active {
	background: var(--re-primary); color: var(--re-primary-fg);
}
.revecom-account__panel {
	background: var(--re-bg); border: 1px solid var(--re-border);
	border-radius: var(--re-radius); padding: 28px;
}
.revecom-account__panel h2 { margin-top: 0; font: 700 22px/1 var(--re-font); }

.revecom-account--guest {
	display: grid; gap: var(--re-gap-lg);
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) { .revecom-account--guest { grid-template-columns: 1fr; } }
.revecom-auth-card {
	background: var(--re-surface); border: 1px solid var(--re-border);
	border-radius: var(--re-radius); padding: 28px;
}
.revecom-auth-card__alt { margin-top: 14px; font-size: 14px; }
.revecom-auth-card a { color: var(--re-primary); }

.revecom-account-form { display: grid; gap: 14px; max-width: 420px; }
.revecom-orders, .revecom-downloads { width: 100%; border-collapse: collapse; }
.revecom-orders th, .revecom-orders td,
.revecom-downloads th, .revecom-downloads td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--re-border); font-size: 14px; }
.revecom-orders th, .revecom-downloads th { color: var(--re-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.revecom-addresses { display: grid; gap: var(--re-gap); grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .revecom-addresses { grid-template-columns: 1fr; } }
.revecom-addresses__card {
	background: var(--re-surface); border: 1px solid var(--re-border);
	border-radius: var(--re-radius); padding: 22px;
}

/* ----------------------------- THANK YOU ----------------------------- */
.revecom-thanks {
	background: linear-gradient(135deg, rgba(99, 102, 241, .1), rgba(99, 102, 241, .02));
	border: 1px solid var(--re-border); border-radius: var(--re-radius-lg);
	padding: 40px;
}
.revecom-thanks h2 { margin: 0 0 20px; font: 700 26px/1.3 var(--re-font); }
.revecom-thanks__meta { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

/* ----------------------------- NOTICES / EMPTY ----------------------------- */
.revecom-empty {
	padding: 40px; text-align: center; color: var(--re-muted);
	background: var(--re-surface); border: 1px dashed var(--re-border);
	border-radius: var(--re-radius);
}
.revecom-notice {
	padding: 12px 16px; border-radius: var(--re-radius-sm);
	background: var(--re-surface-2); border: 1px solid var(--re-border);
	margin-bottom: 16px;
}
.revecom-notice--success { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .3); color: var(--re-success); }
.revecom-notice--error   { background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .3); color: var(--re-danger); }

/* ----------------------------- TOAST ----------------------------- */
.revecom-toast {
	position: fixed; bottom: 24px; right: 24px;
	background: var(--re-fg); color: var(--re-bg);
	padding: 14px 18px; border-radius: var(--re-radius);
	box-shadow: var(--re-shadow-lg);
	display: flex; align-items: center; gap: 12px;
	transform: translateY(20px); opacity: 0;
	transition: transform var(--re-trans), opacity var(--re-trans);
	z-index: 9999;
}
.revecom-toast.is-visible { transform: translateY(0); opacity: 1; }
.revecom-toast a { color: inherit; text-decoration: underline; }

/* ----------------------------- CATEGORY CARD ----------------------------- */
.revecom-category-card {
	display: block; position: relative;
	background: var(--re-surface); border: 1px solid var(--re-border);
	border-radius: var(--re-radius); overflow: hidden;
	color: inherit; text-decoration: none;
	transition: transform var(--re-trans), box-shadow var(--re-trans);
}
.revecom-category-card:hover { transform: translateY(-3px); box-shadow: var(--re-shadow); }
.revecom-category-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.revecom-category-card__name { margin: 0; padding: 14px 16px 6px; font: 600 15px/1.2 var(--re-font); }
.revecom-category-card__count { display: inline-block; padding: 0 16px 14px; color: var(--re-muted); font-size: 13px; }