/* DigiSphereX Extras: wishlist / compare / contact / tray */

/* --- header badges --- */
.atx-ico { position: relative; display: inline-flex; }
.atx-ico .atx-count {
	position: absolute; top: -3px; inset-inline-end: -9px;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 999px; background: var(--at-orange); color: #fff;
	font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
	display: none;
}
.atx-ico .atx-count.show { display: block; }
/* keep badge white-on-orange in dark mode (generic dark .atx-count rule would override text) */
html[data-theme="dark"] .atx-ico .atx-count { color: #fff; background: var(--at-orange); }


/* --- product card buttons --- */
.product { position: relative; }
.atx-cardbtns {
	position: absolute; top: 8px; inset-inline-end: 8px; z-index: 5;
	display: flex; flex-direction: column; gap: 6px;
	opacity: 0; transform: translateX(4px); transition: .18s ease;
}
@media (hover: hover) { .product:hover .atx-cardbtns, .atx-cardbtns:focus-within { opacity: 1; transform: none; } }
.atx-cardbtns { opacity: 1; transform: none; }
.atx-btn {
	width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d9dee3;
	background: #fff; color: #444; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 4px rgba(0,0,0,.08); transition: .15s ease;
}
.atx-btn:hover { border-color: #0a58ca; color: #0a58ca; }
.atx-btn.active { background: #0a58ca; border-color: #0a58ca; color: #fff; }
.atx-btn.wish.active { background: #e63946; border-color: #e63946; }

.atx-singlebtns { display: flex; gap: 8px; margin: 8px 0 14px; }
.atx-singlebtns .atx-btn { width: 42px; height: 42px; border-radius: 10px; }

/* --- wishlist grid --- */
#atx-wishlist-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px;
}
.atx-mini-card {
	border: 1px solid #e3e7eb; border-radius: 12px; overflow: hidden; background: #fff;
	display: flex; gap: 12px; padding: 12px;
}
.atx-mini-img { flex: 0 0 84px; height: 84px; border-radius: 8px; overflow: hidden; background: #f2f4f6; display: block; }
.atx-mini-img img { width: 100%; height: 100%; object-fit: contain; }
.atx-mini-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.atx-mini-name { font-weight: 600; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.35; }
.atx-mini-name:hover { text-decoration: underline; }
.atx-mini-price { font-weight: 700; color: #0a58ca; }
.atx-mini-actions { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.atx-addcart {
	border: 0; border-radius: 8px; background: #0a58ca; color: #fff;
	font-size: 12.5px; font-weight: 600; padding: 8px 12px; cursor: pointer;
}
.atx-addcart:hover { background: #094aa8; }
.atx-empty { color: #667; font-size: 15px; }
/* legacy ring loader retired - branded .atx-loading lives in the v2 block below */

/* --- compare table --- */
#atx-compare-wrap { overflow-x: auto; }
.atx-cmp-table { border-collapse: collapse; min-width: 640px; width: 100%; }
.atx-cmp-table th, .atx-cmp-table td {
	border: 1px solid #e3e7eb; padding: 12px 14px; text-align: start; vertical-align: middle;
}
.atx-cmp-table thead th a { font-size: 14.5px; font-weight: 700; text-decoration: none; color: inherit; }
.atx-cmp-table tbody td:first-child, .atx-cmp-table thead th:first-child {
	font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: #667; white-space: nowrap; background: #f7f9fb; min-width: 110px;
}
.atx-cmp-rowimg img { max-height: 90px; width: auto; }
.atx-cmp-price { font-weight: 700; color: #0a58ca; }
.atx-instock { color: #188038; font-weight: 600; }
.atx-outstock { color: #c5221f; font-weight: 600; }

/* --- compare tray --- */
#atx-tray {
	position: fixed; bottom: 0; inset-inline: 0; z-index: 999;
	background: #10151a; color: #fff;
	display: none; align-items: center; justify-content: center; gap: 14px;
	padding: 12px 20px; box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
#atx-tray.on { display: flex; }
.atx-tray-txt { font-size: 14px; opacity: .9; }
.atx-tray-go {
	background: #0a58ca; color: #fff; text-decoration: none; font-weight: 600;
	border-radius: 999px; padding: 9px 18px; font-size: 13.5px;
}
.atx-tray-go:hover { background: #094aa8; }
.atx-tray-clear {
	background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff;
	border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer;
}

/* --- toast --- */
.atx-toast {
	position: fixed; bottom: 74px; left: 50%; z-index: 1000;
	transform: translate(-50%, 12px);
	background: #10151a; color: #fff; font-size: 13.5px;
	border-radius: 999px; padding: 10px 20px;
	opacity: 0; pointer-events: none; transition: .25s ease;
}
.atx-toast.on { opacity: 1; transform: translate(-50%, 0); }
html[dir="rtl"] .atx-toast { direction: rtl; }

/* --- contact form v3 (page + footer band) --- */
.atx-contact { max-width: 620px; display: grid; gap: 4px; position: relative; }
.atx-contact--foot { max-width: none; }

.atx-cf { display: grid; gap: 14px; }
.atx-cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .atx-cf-row { grid-template-columns: 1fr; } }

.atx-fld { display: grid; gap: 6px; align-content: start; }
.atx-fld label {
	font-size: 13px; font-weight: 800; letter-spacing: .01em;
	color: #16283c;
}
.atx-fld input, .atx-fld select, .atx-fld textarea {
	width: 100%; border: 1.5px solid #b9c4d0; border-radius: 10px;
	padding: 11px 13px; font-size: 14.5px; background: #fff;
	font-family: inherit; color: #101f30; transition: border-color .15s, box-shadow .15s;
}
.atx-fld select { cursor: pointer; }
.atx-fld textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.atx-fld input:focus, .atx-fld select:focus, .atx-fld textarea:focus {
	outline: none; border-color: #0b5cab;
	box-shadow: 0 0 0 3.5px rgba(11,92,171,.13); background: #fff;
}
.atx-fld input:user-invalid, .atx-fld textarea:user-invalid { border-color: #e2574c; }

.atx-count { justify-self: end; font-size: 11.5px; color: #93a3b4; margin-top: -2px; }

.atx-consent {
	display: flex; gap: 9px; align-items: flex-start;
	font-size: 12.5px; line-height: 1.55; color: #5b6b7c; cursor: pointer;
}
.atx-consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: #0b5cab; flex: none; cursor: pointer; }
.atx-consent a { color: #0b5cab; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.atx-hp { position: absolute !important; inset-inline-start: -9999px !important; height: 1px; width: 1px; opacity: 0; }

.atx-cf-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.atx-btn.atx-cf-send {
	border: 0; border-radius: 999px; cursor: pointer;
	background: linear-gradient(135deg, #0b5cab, #084a8c);
	color: #fff; font-weight: 700; font-size: 14.5px;
	padding: 13px 34px; min-width: 190px; text-align: center;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	box-shadow: 0 6px 16px rgba(11,92,171,.28);
	transition: transform .15s, box-shadow .15s, opacity .15s;
}
.atx-btn.atx-cf-send:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(11,92,171,.34); }
.atx-btn.atx-cf-send:active { transform: translateY(0); }
.atx-btn.atx-cf-send .atx-minispin { display: none; animation: atx-mini .8s linear infinite; }
.atx-btn.atx-cf-send.loading { pointer-events: none; opacity: .85; }
.atx-btn.atx-cf-send.loading .atx-minispin { display: block; }
@keyframes atx-mini { to { transform: rotate(360deg); } }

.atx-cmsg { font-size: 13.5px; font-weight: 700; }
.atx-cmsg.ok { color: #188038; }
.atx-cmsg.bad { color: #c5221f; }

/* success panel */
.atx-cf-done {
	text-align: center; padding: 34px 20px;
	background: linear-gradient(180deg, #f4faf6, #eef7f1);
	border: 1.5px dashed #bfe3cd; border-radius: 16px;
	animation: atx-pop-in .35s cubic-bezier(.2,.9,.3,1.15);
}
.atx-cf-done h3 { margin: 14px 0 6px; font-size: 19px; color: #177245; }
.atx-cf-done p { margin: 0 auto 18px; max-width: 420px; font-size: 13.5px; line-height: 1.65; color: #4c6152; }
.atx-cf-done .atx-btn.txt { background: #22a55f; box-shadow: none; cursor: pointer; border: 0; color: #fff !important; }
@keyframes atx-pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ---------- Professional contact page ---------- */
.atx-cpage { max-width: 1080px; margin: 0 auto; }
.atx-cpage-hero {
	text-align: center; padding: 8px 16px 34px;
}
.atx-cpage-hero h1 {
	margin: 0 0 10px; font-size: clamp(26px, 4vw, 36px); font-weight: 900;
	color: #10243c; letter-spacing: -.01em;
}
.atx-cpage-hero p {
	margin: 0 auto 18px; max-width: 640px;
	font-size: 15px; line-height: 1.75; color: #3d5066;
}
.atx-cpage-badge {
	display: inline-flex; align-items: center; gap: 7px;
	background: #e9f5ee; color: #177245; border: 1.5px solid #bfe3cd;
	border-radius: 999px; padding: 8px 18px;
	font-size: 12.5px; font-weight: 800;
}
.atx-cpage-badge svg { flex: none; }

.atx-cpage-grid {
	display: grid; grid-template-columns: .78fr 1.22fr; gap: 26px;
	align-items: start;
}
@media (max-width: 860px) { .atx-cpage-grid { grid-template-columns: 1fr; } }

.atx-cpage-side { display: grid; gap: 12px; position: sticky; top: 92px; }
@media (max-width: 860px) { .atx-cpage-side { position: static; } }
.atx-cinfo {
	display: flex; align-items: center; gap: 13px;
	background: #fff; border: 1.5px solid #e2e9f1; border-radius: 14px;
	padding: 14px 16px; text-decoration: none;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.atx-cinfo:hover { border-color: #0b5cab; box-shadow: 0 10px 24px rgba(11,92,171,.12); transform: translateY(-2px); }
.atx-cinfo-ic {
	flex: none; width: 42px; height: 42px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #eaf2fb, #dceafa); color: #0b5cab;
}
.atx-cinfo-tx { display: grid; gap: 2px; min-width: 0; }
.atx-cinfo-tx b { font-size: 13px; font-weight: 800; color: #16283c; }
.atx-cinfo-tx i { font-style: normal; font-size: 13px; color: #48607a; word-break: break-word; }
.atx-cpage-note {
	background: linear-gradient(135deg, #fff8ef, #fdf1df);
	border: 1.5px solid #f6ddb8; border-radius: 14px;
	padding: 14px 16px; font-size: 12.5px; line-height: 1.65; color: #7a5a25;
}
.atx-cpage-note strong { color: #b45309; }

.atx-cpage-main {
	background: #fff; border-radius: 20px;
	padding: 30px 30px 26px;
	box-shadow: 0 18px 50px rgba(16,36,60,.10);
	border: 1px solid #edf1f6;
}

.atx-cpage-map {
	margin-top: 26px; border-radius: 20px; overflow: hidden;
	border: 1px solid #edf1f6; box-shadow: 0 18px 50px rgba(16,36,60,.08);
	line-height: 0;
}
.atx-cpage-map iframe {
	width: 100%; border: 0; min-height: 360px;
}

.atx-cpage-social {
	margin-top: 4px; display: grid; gap: 10px;
	background: #fff; border: 1.5px solid #e2e9f1; border-radius: 14px;
	padding: 14px 16px;
}
.atx-cpage-social b { font-size: 13px; font-weight: 800; color: #16283c; }
.atx-cpage-social-row { display: flex; gap: 8px; flex-wrap: wrap; }
.atx-cpage-social-row a {
	flex: none; width: 40px; height: 40px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #f2f6fb; color: #0b5cab; transition: background .15s, color .15s, transform .15s;
}
.atx-cpage-social-row a:hover { background: #0b5cab; color: #fff; transform: translateY(-2px); }

/* ============ v2: Wishlist suite ============ */
.atx-page { min-height: 220px; }

/* ---------- Branded charging-battery loader (storewide) ---------- */
.atx-loading {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px; padding: 70px 0; color: #7c8ea1;
	font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
}
.atx-loading p { margin: 0; }

.atx-batt {
	position: relative; display: flex; gap: 3px; align-items: stretch;
	width: 56px; height: 28px; padding: 3.5px;
	border: 2.5px solid #0b5cab; border-radius: 8px;
	background: #f6f9fc; overflow: visible;
}
/* battery terminal */
.atx-batt::after {
	content: ''; position: absolute; inset-inline-end: -7.5px; top: 50%;
	transform: translateY(-50%);
	width: 4.5px; height: 12px; border-radius: 0 3.5px 3.5px 0;
	background: #0b5cab;
}
/* three charge-level bars filling sequentially: red -> orange -> green
   NOTE: intentionally NOT gated by prefers-reduced-motion - this loader is
   decorative and must stay animated on every machine per store owner request */
.atx-batt::before,
.atx-batt i::before,
.atx-batt i::after {
	content: ''; flex: 1; border-radius: 2.5px;
	background: #e3eaf2;
	transform: scaleY(.55);
	animation: atx-bar 1.5s ease-in-out infinite;
	will-change: transform, background-color;
}
.atx-batt::before    { --bar: #ef4444; animation-delay: 0s; }
.atx-batt i          { display: contents; }
.atx-batt i::before  { --bar: #f97316; animation-delay: .3s; }
.atx-batt i::after   { --bar: #22c55e; animation-delay: .6s; }
@keyframes atx-bar {
	0%        { background: #e3eaf2; transform: scaleY(.55); }
	14%, 72%  { background: var(--bar); transform: scaleY(1); filter: brightness(1.3); }
	86%, 100% { background: #e3eaf2; transform: scaleY(.55); filter: brightness(1); }
}

/* soft heartbeat ring around the battery frame */
.atx-batt {
	animation: atx-ring 1.5s ease-out infinite;
}
@keyframes atx-ring {
	0%, 100%  { box-shadow: 0 0 0 0 rgba(11,92,171,.28); }
	40%       { box-shadow: 0 0 0 6px rgba(34,197,94,.14); }
}

/* theme kills all animations under prefers-reduced-motion (!important);
   exempt ONLY this decorative loader so it stays alive everywhere */
@media (prefers-reduced-motion: reduce) {
	.atx-batt,
	.atx-batt::before,
	.atx-batt i::before,
	.atx-batt i::after {
		animation-duration: 1.5s !important;
		animation-iteration-count: infinite !important;
		transition-duration: 0s;
	}
}

/* buttons (text variant used in cards/pages) */
.atx-btn.txt, a.atx-btn {
	width: auto; height: auto; border-radius: 9px; padding: 9px 18px;
	font-size: 13.5px; font-weight: 700; text-decoration: none;
	background: #f97316; color: #111827 !important; border: none;
	display: inline-block;
}
a.atx-btn:hover { background: #ea580c; }
.atx-btn.ghost { background: #fff; color: #0b5cab !important; border: 1px solid #c8d4e0; }
.atx-btn.ghost:hover { background: #eef4fa; }

/* unified tool/text buttons (difftoggle, share, clear, newsletter) */
.atx-tbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 9px 18px; border-radius: 9px; cursor: pointer;
	border: 1px solid transparent; font-size: 13.5px; font-weight: 700;
	line-height: 1.2; text-decoration: none; white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.atx-tbtn:active { transform: translateY(1px); }
.atx-tbtn.ghost {
	background: #fff; color: #0b5cab; border-color: #c8d4e0;
}
.atx-tbtn.ghost:hover { background: #eef4fa; border-color: #a9c3e4; }
.atx-tbtn.primary {
	background: linear-gradient(135deg, var(--at-orange, #f68b1f), #ffb056);
	color: #fff; border-color: transparent;
	box-shadow: 0 6px 14px rgba(246,139,31,.28);
}
.atx-tbtn.primary:hover { filter: brightness(1.05); }
.atx-tbtn svg { flex: none; }
/* danger-ish clear button */
.atx-tbtn.danger { color: #b91c1c; border-color: #f3c4c4; }
.atx-tbtn.danger:hover { background: #fdecec; border-color: #ef9a9a; }
html[data-theme="dark"] .atx-tbtn.ghost {
	background: transparent; color: #7db3ee; border-color: rgba(125,179,238,.45);
}
html[data-theme="dark"] .atx-tbtn.ghost:hover { background: rgba(125,179,238,.12); border-color: rgba(125,179,238,.65); }
html[data-theme="dark"] .atx-tbtn.danger { color: #f2938f; border-color: rgba(242,147,143,.4); }
html[data-theme="dark"] .atx-tbtn.danger:hover { background: rgba(220,38,38,.15); border-color: rgba(242,147,143,.6); }


.atx-empty { text-align: center; padding: 56px 20px; color: #5b6b7d; font-size: 15px; }
.atx-empty .atx-btn { margin-top: 14px; }
.atx-empty-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.atx-empty-actions .atx-btn, .atx-empty-actions .atx-tbtn { margin-top: 0; }

/* wish grid */
.atx-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.atx-wcard {
	position: relative; display: flex; flex-direction: column; gap: 7px;
	background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 12px;
	transition: .15s ease;
}
.atx-wcard:hover { box-shadow: 0 4px 16px rgba(11,92,171,.10); }
.atx-wimg { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #f6f8fa; }
.atx-wimg img { width: 100%; height: 100%; object-fit: contain; }
.atx-drop {
	position: absolute; top: 8px; inset-inline-start: 8px;
	background: #dc2626; color: #fff; font-size: 11px; font-weight: 700;
	padding: 3px 8px; border-radius: 999px;
}
.atx-wremove {
	position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3;
	width: 26px; height: 26px; border-radius: 50%; border: none;
	background: rgba(15,23,42,.55); color: #fff; cursor: pointer; font-size: 15px; line-height: 1;
}
.atx-wremove:hover { background: #dc2626; }
.atx-wname { font-size: 13.5px; font-weight: 600; color: #12263a; line-height: 1.35; min-height: 2.6em; }
.atx-wname a { color: inherit; text-decoration: none; }
.atx-wname a:hover { color: #0b5cab; }
.atx-wprice { font-size: 15px; font-weight: 800; color: #0b5cab; }
.atx-wprice del { color: #94a3b8; font-weight: 500; }
.atx-wstock { font-size: 12px; font-weight: 700; }
.atx-wstock.in { color: #15803d; }
.atx-wstock.out { color: #dc2626; }
.atx-wcard .atx-btn { margin-top: auto; }

/* inline notify form */
.atx-notify { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.atx-notify input[type="email"] {
	flex: 1 1 110px; min-width: 0; border: 1px solid #cbd5e1; border-radius: 8px;
	padding: 7px 9px; font-size: 12.5px;
}
.atx-nmsg { flex-basis: 100%; font-size: 12px; }
.atx-nmsg.ok, .atx-nl-msg.ok, .atx-cmsg.ok { color: #15803d; }
.atx-nmsg.bad, .atx-nl-msg.bad, .atx-cmsg.bad { color: #dc2626; }

/* share + newsletter prompt */
.atx-sharebar { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.atx-copied[hidden] { display: none; }
.atx-nlprompt {
	margin-top: 26px; padding: 16px 18px; border-radius: 12px;
	background: linear-gradient(135deg, #0b5cab, #084a8c); color: #fff;
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.atx-nlprompt[hidden] { display: none; }
.atx-nl-in strong { font-size: 15px; }
.atx-nl-in span { opacity: .85; font-size: 13px; }
.atx-nl-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.atx-nl-form input[type="email"] {
	border: none; border-radius: 8px; padding: 9px 11px; font-size: 13px; min-width: 200px;
}
.atx-nl-form .atx-btn { background: #fbbf24; color: #12263a !important; }
.atx-nl-form .atx-btn:hover { background: #f59e0b; }
.atx-nl-msg { flex-basis: 100%; font-size: 12.5px; color: #fff; }

/* compare table */
.atx-cmp-hint { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 10px; }
.atx-cmp-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-bottom: 12px; }
.atx-ctablewrap { overflow-x: auto; border: 1px solid #e3e8ee; border-radius: 12px; background: #fff; }
table.atx-ctable { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.atx-ctable th, .atx-ctable td { padding: 11px 14px; border-bottom: 1px solid #edf1f5; text-align: start; vertical-align: middle; }
.atx-ctable thead th { background: #f7fafc; position: sticky; top: 0; z-index: 2; }
.atx-ctable tbody th[scope="row"] { font-weight: 700; color: #48586b; white-space: nowrap; background: #fbfcfe; }
.atx-chead { min-width: 170px; text-align: center !important; }
.atx-chead img { width: 90px; height: 90px; object-fit: contain; display: block; margin: 0 auto 8px; }
.atx-cname { display: block; font-size: 13px; font-weight: 700; color: #12263a; margin-bottom: 8px; line-height: 1.35; }
.atx-chead a { text-decoration: none; }
.atx-cremove {
	float: inline-end; width: 24px; height: 24px; border-radius: 50%; border: none;
	background: transparent; color: #94a3b8; cursor: pointer; font-size: 15px;
}
.atx-cremove:hover { background: #fee2e2; color: #dc2626; }
td.atx-cval.best { background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; position: relative; }
td.atx-cval.best::after {
	content: attr(data-best); position: absolute; inset-inline-end: 8px; top: 50%;
	transform: translateY(-50%); font-size: 10px; font-weight: 800; color: #059669;
}
.atx-st.in { color: #15803d; font-weight: 700; }
.atx-st.out { color: #dc2626; font-weight: 700; }
.atx-ctable.diff-only tr.same-row { display: none; }

/* Compare tables in dark mode — consistent with the shop table tokens so no
   bright/white sheet ever breaks the dark reader. */
html[data-theme="dark"] .atx-ctablewrap { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] table.atx-ctable th,
html[data-theme="dark"] table.atx-ctable td { border-bottom-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .atx-ctable thead th { background: rgba(13,28,46,.55); }
html[data-theme="dark"] .atx-ctable tbody th[scope="row"] { color: #9fb2cb; background: rgba(19,36,55,.65); }
html[data-theme="dark"] .atx-cname { color: #eaf2fb; }
html[data-theme="dark"] td.atx-cval.best { background: rgba(30,158,74,.16); box-shadow: inset 0 0 0 1px rgba(126,212,162,.45); }
html[data-theme="dark"] td.atx-cval.best::after { color: #7ed4a2; }
html[data-theme="dark"] .atx-cmp-hint { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.35); color: #fcd34d; }
html[data-theme="dark"] .atx-cremove:hover { background: rgba(220,38,38,.18); color: #f2938f; }
html[data-theme="dark"] .atx-st.in,
html[data-theme="dark"] .atx-instock { color: #7ed4a2; }
html[data-theme="dark"] .atx-st.out,
html[data-theme="dark"] .atx-outstock { color: #f2938f; }
html[data-theme="dark"] .atx-cmp-table th,
html[data-theme="dark"] .atx-cmp-table td { border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .atx-cmp-table tbody td:first-child,
html[data-theme="dark"] .atx-cmp-table thead th:first-child { color: #9fb2cb; background: rgba(19,36,55,.65); }
html[data-theme="dark"] .atx-cmp-price { color: #7db3ee; }

/* toast */
.atx-toast {
	position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(-50%) translateY(16px);
	background: #12263a; color: #fff; padding: 10px 20px; border-radius: 999px;
	font-size: 13.5px; opacity: 0; pointer-events: none; transition: .25s ease; z-index: 99999;
}
[dir="rtl"] .atx-toast { transform: translateX(50%) translateY(16px); }
.atx-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
[dir="rtl"] .atx-toast.on { transform: translateX(50%) translateY(0); }

/* contact form messages */
.atx-cmsg { margin-top: 10px; font-size: 14px; font-weight: 600; }

/* tray (floating) */
.atx-tray {
	position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 9998;
	display: flex; flex-direction: column; gap: 10px;
}
.atx-tray a {
	width: 46px; height: 46px; border-radius: 50%;
	background: #0b5cab; color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(11,92,171,.35); position: relative; transition: .15s;
}
.atx-tray a:hover { background: #084a8c; transform: scale(1.06); }


/* ============ Quick view modal ============ */
#atx-qv { position: fixed; inset: 0; z-index: 100000; }
#atx-qv[hidden] { display: none; }
.atx-qv-backdrop {
	position: absolute; inset: 0;
	background: rgba(10,25,45,.55);
	backdrop-filter: blur(3px);
	animation: atx-fadein .18s ease;
}
@keyframes atx-fadein { from { opacity: 0; } to { opacity: 1; } }
.atx-qv-panel {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: min(860px, calc(100vw - 28px));
	max-height: calc(100vh - 48px);
	background: #fff; border-radius: 16px;
	box-shadow: 0 24px 70px rgba(8,25,50,.35);
	overflow: hidden auto;
	animation: atx-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes atx-pop { from { opacity: 0; transform: translate(-50%, -47%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.atx-qv-close {
	position: sticky; inset-inline-start: 100%; float: inline-end;
	margin: 12px 12px -30px 0; z-index: 3;
	width: 34px; height: 34px; border-radius: 50%; border: none;
	background: #f1f5f9; color: #475569; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: .15s ease;
}
.atx-qv-close:hover { background: #fee2e2; color: #dc2626; }
[dir="rtl"] .atx-qv-close { margin: 12px 0 -30px 12px; }

.atx-qv-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 26px; padding: 20px 26px 26px; align-items: start;
}
.atx-qv-imgwrap {
	border-radius: 12px; overflow: hidden;
	background: radial-gradient(120% 120% at 50% 0%, #f8fafc 60%, #eef2f7 100%);
	display: flex; align-items: center; justify-content: center;
}
.atx-qv-imgwrap img { width: 100%; max-height: 380px; object-fit: contain; padding: 18px; }
.atx-qv-name { margin: 8px 0 6px; font-size: 19px; font-weight: 800; color: var(--at-navy, #10365e); line-height: 1.4; }
.atx-qv-price { font-size: 21px; font-weight: 800; color: var(--at-blue, #0b5cab); }
.atx-qv-price del { font-size: 14px; color: var(--at-muted, #5c6c7d); opacity: .8; }
.atx-qv-info .atc-meta { margin-top: 8px; }
.atx-qv-attrs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin-top: 14px; padding: 13px 15px; background: #f8fafc; border-radius: 10px; border: 1px solid #edf1f5; }
.atx-qv-attr { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.atx-qv-attr span { color: var(--at-muted, #5c6c7d); }
.atx-qv-attr b { color: var(--at-text, #22303f); text-align: end; }
.atx-qv-desc { margin: 13px 0 0; font-size: 13px; line-height: 1.65; color: var(--at-muted, #5c6c7d); }
.atx-qv-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }
.atx-qv-actions .atx-btn { flex: 1 1 auto; text-align: center; }

@media (max-width: 720px) {
	.atx-qv-grid { grid-template-columns: 1fr; gap: 16px; padding: 14px 16px 20px; }
	.atx-qv-imgwrap img { max-height: 240px; padding: 10px; }
	.atx-qv-name { font-size: 16.5px; }
	.atx-qv-price { font-size: 18px; }
	.atx-qv-attrs { grid-template-columns: 1fr; }
	.atx-qv-actions .atx-btn { flex-basis: 100%; }
}
/* ---------- a11y & polish ---------- */
::selection { background: #0b5cab; color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 3px solid #f97316;
	outline-offset: 2px;
	border-radius: 4px;
}
/* dynamic order field */
.atx-fld .atx-hint{display:block;margin-top:4px;font-size:11px;color:#8598ab}
.atx-fld-order[hidden]{display:none!important}

/* ================= Dark mode (quick view + modals) ================= */
html[data-theme="dark"] .atx-qv-panel { background: #132437; }
html[data-theme="dark"] .atx-qv-close { background: #1b2c42; color: #b9cde0; }
html[data-theme="dark"] .atx-qv-close:hover { background: #2a1418; color: #fda4af; }
html[data-theme="dark"] .atx-qv-imgwrap {
	background: radial-gradient(120% 120% at 50% 0%, #1b2c42 60%, #132437 100%);
}
html[data-theme="dark"] .atx-qv-name { color: #eaf2fb; }
html[data-theme="dark"] .atx-qv-attrs { background: #0f1c2e; border-color: #2a3b52; }
html[data-theme="dark"] .atx-qv-attr b { color: #dbe7f4; }
html[data-theme="dark"] .atx-qv-desc { color: #9fb2cb; }

/* ================= Dark mode: contact page =================
   Uniform surfaces & type matching the rest of the theme (and the checkout
   forms). Surfaces: #132437 · borders: #22344a / rgba(255,255,255,.14)
   Headings: #eaf2fb · body: #dbe7f4 · labels: #c3d4e6 · muted: #9fb2cb
   Accent: #7db3ee · icon cards: #1b2c42. */

/* page hero */
html[data-theme="dark"] .atx-cpage-hero h1 { color: #eaf2fb; }
html[data-theme="dark"] .atx-cpage-hero p  { color: #c3d4e6; }
html[data-theme="dark"] .atx-cpage-badge {
	background: rgba(30,158,74,.14); color: #7ed4a2;
	border-color: rgba(30,158,74,.35);
}

/* info cards, social box, map, main form panel */
html[data-theme="dark"] .atx-cinfo,
html[data-theme="dark"] .atx-cpage-social,
html[data-theme="dark"] .atx-cpage-main,
html[data-theme="dark"] .atx-cpage-map {
	background: #132437; border-color: #22344a;
	box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
html[data-theme="dark"] a.atx-cinfo:hover { border-color: #7db3ee; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
html[data-theme="dark"] .atx-cinfo-ic {
	background: #1b2c42; color: #7db3ee;
}
html[data-theme="dark"] .atx-cinfo-tx b,
html[data-theme="dark"] .atx-cpage-social b { color: #eaf2fb; }
html[data-theme="dark"] .atx-cinfo-tx i { color: #c3d4e6; }

/* tip/callout note */
html[data-theme="dark"] .atx-cpage-note {
	background: #1a2737; border-color: #3a4d63; color: #b9cde0;
}
html[data-theme="dark"] .atx-cpage-note strong { color: #ffc56a; }

/* social link tiles */
html[data-theme="dark"] .atx-cpage-social-row a {
	background: #1b2c42; color: #7db3ee;
}
html[data-theme="dark"] .atx-cpage-social-row a:hover { background: #0b5cab; color: #fff; }

/* form fields: align type + size with the checkout inputs for a unified look */
html[data-theme="dark"] .atx-fld input,
html[data-theme="dark"] .atx-fld select,
html[data-theme="dark"] .atx-fld textarea {
	font-size: inherit; padding: 9px 12px;
}
html[data-theme="dark"] .atx-fld label { color: #c3d4e6; }

/* consent line + counter */
html[data-theme="dark"] .atx-consent { color: #9fb2cb; }
html[data-theme="dark"] .atx-consent input { accent-color: #7db3ee; }
html[data-theme="dark"] .atx-consent a { color: #7db3ee; }
html[data-theme="dark"] .atx-count { color: #6d8299; }

/* status + success states */
html[data-theme="dark"] .atx-cmsg.ok { color: #7ed4a2; }
html[data-theme="dark"] .atx-cmsg.bad { color: #f2938f; }
html[data-theme="dark"] .atx-cf-done {
	background: linear-gradient(180deg, #132f24, #102a1f);
	border-color: rgba(30,158,74,.35);
}
html[data-theme="dark"] .atx-cf-done h3 { color: #7ed4a2; }
html[data-theme="dark"] .atx-cf-done p  { color: #b9cde0; }

/* buttons: keep brand gradient, refine the text/ghost variants */
html[data-theme="dark"] .atx-btn.txt { background: #15803d; color: #fff !important; }
html[data-theme="dark"] .atx-btn.ghost {
	background: transparent; color: #7db3ee !important;
	border-color: rgba(125,179,238,.45);
}
html[data-theme="dark"] .atx-btn.ghost:hover { background: rgba(125,179,238,.12); }
html[data-theme="dark"] .atx-cf-done .atx-btn.txt { background: #22a55f; }

/* ===== Homepage Top offers: scroller ===== */
.at-offers-scroll { position: relative; }
.at-offers-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: thin; }
.at-offers-track ul.products { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; }
.at-offers-track ul.products li.product { flex: 0 0 auto; width: auto; margin: 0; scroll-snap-align: start; }
.at-offers-sbtn {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--at-border,#dbe3ec);
	background: #fff; color: #0b5cab; font-size: 22px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 10px rgba(12,41,71,.12); transition: .15s;
}
.at-offers-sbtn:hover { background: #0b5cab; color: #fff; }
.at-offers-prev { left: -18px; }
.at-offers-next { right: -18px; }
html[data-theme="dark"] .at-offers-sbtn {
	background: #16263c; border-color: #2a3d57; color: #7db3ee;
}
html[data-theme="dark"] .at-offers-sbtn:hover { background: #0b5cab; color: #fff; }
@media (max-width: 767px) {
	.at-offers-sbtn { display: none; }
}