/* Conversion fixes, accessibility and guest shopping controls. Original styling remains in styles.css. */
[hidden]{display:none!important}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #00f0ff;outline-offset:4px}img{max-width:100%}select option{background:#101321;color:#fff}main>section#builder,main>section.py-20{max-width:1280px;margin-inline:auto;padding-inline:24px}#siteHeader{transition:transform .25s,background .25s}#siteHeader.scrolled{background:rgba(7,10,18,.94);backdrop-filter:blur(18px);border-bottom:1px solid #ffffff15}.store-actions{display:flex;align-items:center;gap:12px}.store-actions .icon-btn{background:none;border:0;position:relative}.badge-count{position:absolute;top:-3px;right:-5px;background:#00f0ff;color:#050505;border-radius:999px;font:700 10px sans-serif;padding:2px 4px}.skip-link{position:fixed;top:-100px;left:12px;z-index:10000;background:#00f0ff;color:#000;padding:12px}.skip-link:focus{top:12px}.store-dialog{color:#fff;background:#0b101d;border:1px solid #ffffff25;border-radius:20px;padding:24px;margin:auto;max-width:560px;width:calc(100% - 24px);max-height:85dvh;overflow:auto;box-shadow:0 30px 90px #0009}.store-dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;font:700 22px Rajdhani,sans-serif}.dialog-heading button{padding:8px}.menu-links{display:grid;gap:12px}.menu-links a:hover{color:#00f0ff}.store-input{display:block;width:100%;margin-top:6px;background:#ffffff08;color:white;border:1px solid #ffffff20;border-radius:12px;padding:11px 14px;min-width:0}.store-input:focus{border-color:#00f0ff}.store-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#00f0ff;color:#050505;border:1px solid transparent;border-radius:12px;padding:12px 20px;font-weight:700;transition:background .2s,transform .2s}.store-button:hover{background:#fff;transform:translateY(-1px)}.store-button.secondary{background:#ffffff08;color:#fff;border-color:#ffffff30}.store-button.secondary:hover{border-color:#00f0ff}.store-page{max-width:1280px;margin:auto;padding:150px 24px 80px;min-height:65vh}.store-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.store-product-grid.list{grid-template-columns:1fr}.store-product-grid.list .product-card{display:grid;grid-template-columns:220px 1fr}.wish-button{position:absolute;top:12px;right:12px;border-radius:50%;background:#070a12bb;width:40px;height:40px}.wish-button[aria-pressed=true],[data-wish][aria-pressed=true]{color:#00f0ff}.card-add{position:absolute;bottom:12px;left:12px;right:12px;background:#00f0ff;color:#000;border-radius:12px;font-weight:700;padding:10px;opacity:0;transform:translateY(10px);transition:.2s}.product-card:hover .card-add,.product-card:focus-within .card-add{opacity:1;transform:none}.shop-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px}.shop-layout>aside{align-self:start}.shop-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:28px}.category-pills{display:flex;gap:8px;overflow:auto;flex:1}.category-pills a{white-space:nowrap;border-radius:999px;padding:8px 16px;border:1px solid #ffffff20}.category-pills a[aria-current]{background:#00f0ff;color:#000}.empty-state{grid-column:1/-1;text-align:center;padding:50px 20px}.empty-state h2,.empty-state h1{font:700 26px Orbitron,sans-serif;margin-bottom:15px}.empty-state p{color:#aab3c9;margin-bottom:20px}.cart-row{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid #ffffff15}.cart-row img{width:70px;height:70px;object-fit:contain;background:#ffffff05;border-radius:10px}.quantity-control{display:flex;align-items:center;gap:10px;margin-top:10px}.quantity-control button{border:1px solid #ffffff25;border-radius:8px;width:30px;height:30px}.quantity-control .remove-item{width:auto;padding:0 10px}.cart-totals{margin:24px 0;display:grid;gap:12px}.cart-totals div{display:flex;justify-content:space-between}.cart-totals .total{font-size:22px;font-weight:700;border-top:1px solid #ffffff20;padding-top:16px}.checkout-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px}.form-status{white-space:pre-wrap;color:#00f0ff;overflow-wrap:anywhere}.form-status.error{color:#fda4af}#dcToast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:10000;max-width:calc(100% - 24px);background:#14243a;color:#fff;border:1px solid #00f0ff55;padding:14px 24px;border-radius:12px}.detail-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #ffffff20;padding-bottom:12px}.detail-tabs button{padding:10px 16px;border-radius:8px}.detail-tabs button[aria-selected=true]{background:#00f0ff;color:#000}.product-details dl{display:grid;grid-template-columns:140px 1fr;gap:10px}.support-chips{display:flex;flex-wrap:wrap;gap:8px}.support-chips button{border:1px solid #ffffff25;padding:6px 12px;border-radius:999px}.vs-dots button[aria-current=true]{background:#00f0ff}.vs-slide:not(.is-active){visibility:hidden;pointer-events:none}.vs-slide.is-active{visibility:visible}.reveal-text,.timeline-item,.feature-card{opacity:1!important;transform:none!important}.noscript-note{position:fixed;bottom:0;left:0;right:0;background:#10243a;color:#fff;padding:20px;z-index:10000}.catHeroStage{min-height:340px}.performance-slide{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;padding:70px 40px 30px}.performance-slide img{height:290px;width:100%;object-fit:contain}.performance-slide h3{font:700 30px Orbitron,sans-serif}.builder-option.is-selected,.component-card.is-selected{border-color:#00f0ff!important;box-shadow:0 0 20px #00f0ff30}.vs-content{z-index:2}.vs-social a[href='#']{display:none}.form-honeypot{position:absolute;left:-10000px}.store-dialog form label{display:block}.store-dialog #shopProducts{grid-template-columns:1fr}.store-dialog .store-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dc-poster-image{max-height:540px;object-fit:cover}.vs-dots button{width:12px;height:12px;border-radius:999px;border:1px solid #fff;background:#ffffff50;margin:4px}.vs-dots button[aria-current=true]{width:30px}.slider-pause{position:absolute;bottom:22px;right:22px;z-index:5;background:#0008;border:1px solid #ffffff40;border-radius:999px;color:white;padding:7px 12px}.store-dialog#zoomDialog{max-width:950px}.store-dialog#zoomDialog img{max-height:70vh}.cart-row .item-total{white-space:nowrap}#main{overflow-x:clip}
@media(hover:none){.card-add{opacity:1;transform:none}}@media(max-width:1000px){.store-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-layout{grid-template-columns:200px minmax(0,1fr)}.brand-text{font-size:15px}.store-actions{gap:4px}.checkout-grid{grid-template-columns:1fr}}@media(max-width:700px){.brand-text{display:none}.brand-logo{height:48px;width:auto}.store-actions .icon-btn{width:36px;height:40px;font-size:22px}.shop-layout{grid-template-columns:1fr}.shop-toolbar{flex-wrap:wrap}.category-pills{order:3;flex-basis:100%}.store-product-grid{gap:12px}.store-product-grid.list .product-card{grid-template-columns:130px 1fr}.store-page{padding:110px 16px 50px}.performance-slide{grid-template-columns:1fr;padding:100px 20px 30px}.performance-slide img{height:180px}.performance-slide h3{font-size:22px}.cart-row{grid-template-columns:50px minmax(0,1fr);gap:12px}.cart-row img{width:50px;height:50px}.cart-row .item-total{grid-column:2}.store-dialog{padding:18px}.vs-title{font-size:clamp(34px,9vw,58px)!important}.vs-content{padding-inline:24px!important}.store-product-grid .card-add{font-size:12px;padding:8px}.card-image{min-height:180px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ========================================================================== 
   Digitron dark grey + white button theme
   Loaded after styles.css so the visual theme changes without touching markup.
   ========================================================================== */
:root {
  --bg: #202124;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --panel-bg: #292a2e;
  --panel-border: rgba(255, 255, 255, 0.14);
  --chip-bg: rgba(255, 255, 255, 0.08);
  --chip-border: rgba(255, 255, 255, 0.15);
  --hover-bg: rgba(255, 255, 255, 0.12);
  --label-bg: #292a2e;
  --brand-accent: #ffffff;
  --brand-secondary: #d7d7d9;
}

html {
  background: #202124;
  color-scheme: dark;
}

body {
  background: #202124 !important;
  color: #ffffff;
}

/* Neutral page and section backgrounds. */
.bg-\[\#030305\],
.bg-\[\#0a0a0f\],
.bg-\[\#0f1115\] {
  background-color: #242529 !important;
}

.from-\[\#070A12\] {
  --tw-gradient-from: #202124 !important;
}

.via-\[\#070A12\] {
  --tw-gradient-via: #202124 !important;
}

.to-\[\#070A12\] {
  --tw-gradient-to: #202124 !important;
}

#siteHeader.scrolled,
.header-glass {
  background: rgba(32, 33, 36, 0.96) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.mobile-dropdown,
.mobile-menu-shell,
.mobile-quick-links,
.dc-menu-inner,
.dc-account-shell,
.dc-chatbot-panel,
.store-dialog,
.dc-poster-slider {
  background: #292a2e !important;
}

.mobile-menu-shell {
  background-image: linear-gradient(180deg, #303136 0%, #242529 100%) !important;
}

.store-dialog,
.dc-menu-inner,
.dc-account-shell,
.dc-chatbot-panel {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.glass-panel,
.dc-promo-card,
.dc-account-user,
.dc-stat,
.dc-linkrow {
  background-color: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.store-input,
.input-style,
.price-number,
.wish-select,
.quote-select,
.dc-chatbot-input {
  background: #303136 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

select option,
.wish-select option,
.quote-select option {
  background: #292a2e !important;
  color: #ffffff !important;
}

/* Primary buttons are white; secondary actions remain outlined. */
.store-button,
.vs-btn,
.catBtn {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #17181a !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.store-button:hover,
.vs-btn:hover,
.catBtn:hover {
  background: #e7e7e8 !important;
  border-color: #e7e7e8 !important;
  color: #17181a !important;
}

.store-button.secondary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #ffffff !important;
  box-shadow: none;
}

.store-button.secondary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #17181a !important;
}

.card-add,
.category-pills a[aria-current],
.detail-tabs button[aria-selected="true"],
.skip-link,
.badge-count {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #17181a !important;
}

.support-chips button,
.quantity-control button,
.detail-tabs button,
.builder-nav,
.dc-chat-chip {
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff;
}

.support-chips button:hover,
.quantity-control button:hover,
.detail-tabs button:hover,
.builder-nav:hover,
.dc-chat-chip:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #17181a !important;
}

/* Replace the former cyan and purple utility colours. */
.bg-brand-accent {
  background-color: #ffffff !important;
}

.bg-brand-secondary {
  background-color: #d7d7d9 !important;
}

.bg-brand-accent\/5,
.bg-brand-secondary\/5 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.bg-brand-accent\/10,
.bg-brand-secondary\/10,
.bg-cyan-400\/10,
.bg-blue-500\/10,
.bg-indigo-400\/10 {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

.bg-brand-accent\/20,
.bg-brand-secondary\/20 {
  background-color: rgba(255, 255, 255, 0.20) !important;
}

.text-brand-accent,
.text-brand-secondary,
.text-cyan-400,
.text-blue-500,
.text-indigo-400,
.vs-title .vs-accent {
  color: #ffffff !important;
}

.text-brand-accent\/10,
.text-brand-secondary\/10 {
  color: rgba(255, 255, 255, 0.72) !important;
}

.border-brand-accent,
.border-brand-secondary {
  border-color: #ffffff !important;
}

.border-brand-accent\/20 {
  border-color: rgba(255, 255, 255, 0.20) !important;
}

.border-brand-accent\/25 {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.border-brand-accent\/30 {
  border-color: rgba(255, 255, 255, 0.30) !important;
}

.border-brand-accent\/50,
.border-brand-secondary\/50 {
  border-color: rgba(255, 255, 255, 0.50) !important;
}

.border-t-brand-accent {
  border-top-color: #ffffff !important;
}

.from-brand-accent,
.from-cyan-400 {
  --tw-gradient-from: #ffffff !important;
}

.from-brand-secondary {
  --tw-gradient-from: #d7d7d9 !important;
}

.from-brand-accent\/5,
.from-brand-secondary\/5 {
  --tw-gradient-from: rgba(255, 255, 255, 0.05) !important;
}

.from-brand-accent\/10,
.from-brand-secondary\/10 {
  --tw-gradient-from: rgba(255, 255, 255, 0.10) !important;
}

.from-brand-accent\/20,
.from-brand-secondary\/20 {
  --tw-gradient-from: rgba(255, 255, 255, 0.20) !important;
}

.via-brand-secondary {
  --tw-gradient-via: #e4e4e5 !important;
}

.via-brand-accent\/50 {
  --tw-gradient-via: rgba(255, 255, 255, 0.50) !important;
}

.via-brand-secondary\/10 {
  --tw-gradient-via: rgba(255, 255, 255, 0.10) !important;
}

.to-brand-accent {
  --tw-gradient-to: #ffffff !important;
}

.to-brand-secondary,
.to-purple-500 {
  --tw-gradient-to: #d7d7d9 !important;
}

.to-brand-accent\/10,
.to-brand-secondary\/10 {
  --tw-gradient-to: rgba(255, 255, 255, 0.10) !important;
}

.ring-brand-accent,
.ring-brand-accent\/50,
.focus\:ring-brand-accent:focus,
.focus\:ring-brand-accent\/50:focus {
  --tw-ring-color: rgba(255, 255, 255, 0.72) !important;
}

.shadow-brand-accent\/5,
.shadow-brand-accent\/10,
.shadow-brand-accent\/20,
.shadow-brand-accent\/30,
.shadow-brand-accent\/40,
.shadow-brand-accent\/50,
.shadow-brand-secondary\/20,
.hover\:shadow-brand-accent\/10:hover,
.hover\:shadow-brand-accent\/20:hover,
.hover\:shadow-brand-accent\/30:hover,
.hover\:shadow-brand-accent\/40:hover {
  --tw-shadow-color: rgba(0, 0, 0, 0.34) !important;
}

.hover\:bg-brand-accent:hover,
.group:hover .group-hover\:bg-brand-accent {
  background-color: #ffffff !important;
}

.hover\:bg-brand-accent\/10:hover,
.group:hover .group-hover\:bg-brand-accent\/10 {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

.hover\:bg-brand-accent\/20:hover,
.group:hover .group-hover\:bg-brand-accent\/20 {
  background-color: rgba(255, 255, 255, 0.20) !important;
}

.hover\:text-brand-accent:hover,
.group:hover .group-hover\:text-brand-accent {
  color: #ffffff !important;
}

.hover\:border-brand-accent:hover,
.hover\:border-brand-accent\/30:hover,
.hover\:border-brand-accent\/50:hover,
.group:hover .group-hover\:border-brand-accent\/30,
.group:hover .group-hover\:border-brand-accent\/50 {
  border-color: #ffffff !important;
}

.peer:checked ~ .peer-checked\:bg-brand-accent {
  background-color: #ffffff !important;
}

.peer:checked ~ .peer-checked\:bg-brand-accent\/20 {
  background-color: rgba(255, 255, 255, 0.20) !important;
}

.peer:checked ~ .peer-checked\:border-brand-accent,
.peer:checked ~ .peer-checked\:border-brand-accent\/50 {
  border-color: #ffffff !important;
}

.peer:checked ~ .peer-checked\:text-brand-accent {
  color: #ffffff !important;
}

/* Neutral interaction highlights and decorative glows. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: #ffffff !important;
}

.store-input:focus,
.input-style:focus,
.price-number:focus,
.admin-select:focus,
.dc-chatbot-input:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}

.builder-option.is-selected,
.component-card.is-selected,
.component-card.selected,
.component-card.is-active {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22), 0 12px 30px rgba(0, 0, 0, 0.28) !important;
}

.component-card:hover {
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32) !important;
}

.component-card.selected .status-dot,
.custom-checkbox:checked,
.vs-dots button[aria-current="true"] {
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

.product-card::before,
.cart-item::before {
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.24) 50%, transparent 60%) !important;
}

.feature-card::before {
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.13), transparent 40%) !important;
}

.timeline-line {
  background-image: linear-gradient(to bottom, transparent 0%, #ffffff 20%, #aeb0b4 50%, #ffffff 80%, transparent 100%) !important;
}

.vs-slide1::before,
.vs-slide2::before,
.vs-slide3::before {
  background: radial-gradient(1000px 600px at 20% 10%, rgba(255, 255, 255, 0.09), transparent 60%),
              radial-gradient(900px 500px at 80% 0%, rgba(255, 255, 255, 0.06), transparent 55%) !important;
}

.vs-overlay {
  background: linear-gradient(to bottom, rgba(32, 33, 36, 0.22), rgba(32, 33, 36, 0.42), rgba(32, 33, 36, 0.68)) !important;
}

/* Shop by Category: restore the original per-category coloured hover glows. */
.dc-categories-section .dc-orbit-category[data-color="#00f0ff"] {
  --orbit-color: #00f0ff !important;
  --category-glow-rgb: 0, 240, 255;
}

.dc-categories-section .dc-orbit-category[data-color="#7000ff"] {
  --orbit-color: #7000ff !important;
  --category-glow-rgb: 112, 0, 255;
}

.dc-categories-section .dc-orbit-category[data-color="#00ff88"] {
  --orbit-color: #00ff88 !important;
  --category-glow-rgb: 0, 255, 136;
}

.dc-categories-section .dc-orbit-category[data-color="#ffaa00"] {
  --orbit-color: #ffaa00 !important;
  --category-glow-rgb: 255, 170, 0;
}

.dc-categories-section .dc-orbit-category[data-color="#ff2d55"] {
  --orbit-color: #ff2d55 !important;
  --category-glow-rgb: 255, 45, 85;
}

.dc-categories-section .dc-orbit-category[data-color="#38bdf8"] {
  --orbit-color: #38bdf8 !important;
  --category-glow-rgb: 56, 189, 248;
}

.dc-categories-section .dc-orbit-glow {
  background: transparent !important;
  opacity: 0 !important;
  transform: scale(0.9);
  filter: blur(24px) !important;
  transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.5s ease !important;
}

.dc-categories-section .dc-orbit-category:hover .dc-orbit-glow,
.dc-categories-section .dc-orbit-category:focus-visible .dc-orbit-glow {
  background: rgb(var(--category-glow-rgb)) !important;
  opacity: 0.28 !important;
  transform: scale(1.5) !important;
  box-shadow: 0 0 52px 18px rgba(var(--category-glow-rgb), 0.42) !important;
}

.dc-categories-section .dc-orbit-category:hover .dc-orbit-ring,
.dc-categories-section .dc-orbit-category:focus-visible .dc-orbit-ring {
  border-color: rgba(var(--category-glow-rgb), 0.62) !important;
  box-shadow: 0 0 24px rgba(var(--category-glow-rgb), 0.42) !important;
}

.dc-categories-section .dc-orbit-category:hover .dc-orbit-circle,
.dc-categories-section .dc-orbit-category:focus-visible .dc-orbit-circle {
  border-color: rgb(var(--category-glow-rgb)) !important;
  box-shadow: 0 0 0 1px rgba(var(--category-glow-rgb), 0.9),
              0 0 34px rgba(var(--category-glow-rgb), 0.72),
              0 0 68px rgba(var(--category-glow-rgb), 0.28),
              0 20px 40px -10px rgba(0, 0, 0, 0.55) !important;
}

.dc-categories-section .dc-orbit-category:hover h3,
.dc-categories-section .dc-orbit-category:focus-visible h3 {
  color: rgb(var(--category-glow-rgb)) !important;
  text-shadow: 0 0 18px rgba(var(--category-glow-rgb), 0.68);
}

.wish-button {
  background: rgba(32, 33, 36, 0.90) !important;
}

.wish-button[aria-pressed="true"],
[data-wish][aria-pressed="true"],
.form-status,
.menu-links a:hover {
  color: #ffffff !important;
}

#dcToast {
  background: #303136 !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

.noscript-note {
  background: #292a2e !important;
}

/* ========================================================================== 
   Site-wide alignment polish
   Keeps text, icons, buttons, cards and form controls on consistent baselines.
   ========================================================================== */
button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  margin: 0;
}

h1:not(.vs-title):not(.leading-none),
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li,
label {
  overflow-wrap: break-word;
}

/* Keep every primary text button vertically and horizontally centred. */
.store-button,
.vs-btn,
.catBuy,
.catBtn,
.card-add,
button[class*="bg-gradient-to-"],
a[class*="bg-gradient-to-"],
a[class~="bg-brand-accent"],
button.w-full.bg-brand-accent,
body[data-page="quote"] main a.rounded-full,
body[data-page="quote"] main button.rounded-full {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  text-align: center;
  line-height: 1.15;
  vertical-align: middle;
}

.store-button.w-full,
button.w-full.bg-brand-accent,
button[class*="bg-gradient-to-"].w-full {
  width: 100%;
}

/* Normalise icon placement inside every type of action. */
.store-button > i,
.vs-btn > i,
.catBuy > i,
.catBtn > i,
.card-add > i,
button[class*="bg-gradient-to-"] i,
a[class*="bg-gradient-to-"] i,
a[class~="bg-brand-accent"] > i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

/* Icon-only controls use the exact centre of their fixed box. */
.icon-btn,
.menu-btn,
.dc-menu-btn,
.dc-account-close,
.dc-chatbot-close,
.dc-whatsapp-float,
.wish-button,
.dc-poster-arrow,
.builder-nav,
.catPrev,
.catNext,
.dialog-heading button,
.quantity-control button:not(.remove-item) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.icon-btn > i,
.menu-btn > i,
.dc-menu-btn > i,
.dc-account-close > i,
.dc-chatbot-close > i,
.dc-whatsapp-float > i,
.wish-button > i,
.dc-poster-arrow > i,
.builder-nav > i,
.catPrev > i,
.catNext > i,
.dialog-heading button > i {
  display: block;
  margin: 0;
  line-height: 1;
}

.dialog-heading button {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
}

/* Header logo, wording and controls share one centre line. */
#siteHeader .header-row,
#siteHeader .brand,
#siteHeader .brand-text,
#siteHeader .store-actions {
  align-items: center;
}

#siteHeader .header-row {
  min-height: 62px;
}

#siteHeader .brand-text {
  display: flex;
  min-width: 0;
}

#siteHeader .bt-main {
  display: inline-flex;
  align-items: baseline;
  column-gap: 0.45em;
  line-height: 1.1;
  white-space: nowrap;
}

#siteHeader .bt-sub {
  display: inline-block;
  line-height: inherit;
}

#siteHeader .store-actions {
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* Shop toolbar, filters and product cards. */
.shop-toolbar {
  align-items: center;
}

.shop-toolbar > p {
  flex: 0 0 auto;
  margin: 0;
  line-height: 1.2;
}

.shop-toolbar #viewToggle {
  flex: 0 0 auto;
}

.category-pills {
  align-items: center;
  min-width: 0;
}

.category-pills a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  text-align: center;
  line-height: 1.15;
}

#filterForm > label,
.store-dialog form > label {
  display: block;
  line-height: 1.25;
}

.store-input {
  box-sizing: border-box;
  min-height: 48px;
  line-height: 1.35;
}

textarea.store-input {
  min-height: 120px;
  resize: vertical;
}

.store-product-grid {
  align-items: stretch;
}

.store-product-grid:not(.list) .product-card {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.store-product-grid:not(.list) .product-card > .card-image {
  flex: 0 0 auto;
}

.store-product-grid:not(.list) .product-card > .p-4 {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
}

.store-product-grid:not(.list) .product-card h3 {
  display: flex;
  min-height: 2.55em;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  line-height: 1.275;
  text-wrap: balance;
}

.store-product-grid:not(.list) .product-card h3 a {
  display: block;
  width: 100%;
}

.store-product-grid:not(.list) .product-card .font-bold.text-lg {
  margin-top: auto;
}

.store-product-grid.list .product-card,
.store-product-grid.list .product-card h3 {
  min-height: 0;
}

/* Shop-by-category titles occupy the same height, including two-line names. */
#dcCategoriesGrid {
  align-items: stretch;
}

.dc-categories-section .dc-orbit-category {
  height: 100%;
  justify-content: flex-start;
  text-align: center;
}

.dc-categories-section .dc-orbit-category > div:last-child {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.dc-categories-section .dc-orbit-category h3 {
  display: flex;
  min-height: 2.4em;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

/* Product, cart, tab and dialog action alignment. */
.support-chips,
.detail-tabs,
.quantity-control {
  align-items: center;
}

.support-chips button,
.detail-tabs button,
.quantity-control .remove-item,
.slider-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}

.cart-row > *,
.checkout-grid > *,
.product-details dd {
  min-width: 0;
}

.cart-row .item-total {
  align-self: center;
  text-align: right;
}

.dialog-heading {
  align-items: center;
}

.dialog-heading h2 {
  margin: 0;
  line-height: 1.2;
}

.product-details dt,
.product-details dd {
  align-self: start;
  line-height: 1.4;
}

body[data-page="product"] main h1 {
  line-height: 1.12;
  text-wrap: balance;
}

body[data-page="product"] main .grid.grid-cols-3.gap-3 > span {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.45rem;
  line-height: 1.25;
}

body[data-page="product"] main .grid.grid-cols-3.gap-3 > span > i {
  flex: 0 0 auto;
  margin-top: 0.08em;
}

/* Quote form labels, step markers and CTAs share consistent baselines. */
body[data-page="quote"] main input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body[data-page="quote"] main select {
  box-sizing: border-box;
  min-height: 50px;
  line-height: 1.3;
}

body[data-page="quote"] main h4.flex {
  align-items: center;
}

body[data-page="quote"] main h4.flex > span:first-child {
  flex: 0 0 auto;
}

/* Footer headings, contact rows and newsletter control heights. */
footer h3,
footer h4,
footer h5 {
  line-height: 1.25;
}

footer h4.flex {
  align-items: center;
}

#newsletterForm > .flex {
  align-items: stretch;
}

#newsletterForm input,
#newsletterForm button {
  box-sizing: border-box;
  min-height: 52px;
}

#newsletterForm button {
  justify-content: center;
  white-space: nowrap;
}

footer .space-y-3 > a,
footer .space-y-3 > div {
  align-items: flex-start;
}

footer .space-y-3 > a > div:first-child,
footer .space-y-3 > div > div:first-child {
  flex: 0 0 auto;
}

footer ul a {
  line-height: 1.35;
}

@media (max-width: 700px) {
  #siteHeader .header-row {
    min-height: 56px;
  }

  .shop-toolbar {
    align-items: center;
  }

  .shop-toolbar .category-pills {
    width: 100%;
  }

  .store-product-grid:not(.list) .product-card h3 {
    min-height: 3.75em;
  }

  .dc-categories-section .dc-orbit-category h3 {
    min-height: 2.4em;
  }

  body[data-page="product"] main .flex.gap-3.flex-wrap {
    align-items: stretch;
  }

  body[data-page="product"] main .flex.gap-3.flex-wrap .store-button {
    flex: 1 1 150px;
  }

  .cart-row .item-total {
    text-align: left;
  }
}

@media (max-width: 520px) {
  #newsletterForm > .flex {
    flex-direction: column;
  }

  #newsletterForm button {
    width: 100%;
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 {
    grid-template-columns: 1fr;
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 > span {
    align-items: center;
  }
}

/* ========================================================================== 
   Definitive alignment pass — 2026-09-14
   Uses the exact controls and layout wrappers present in the live Worker pages.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

button,
input,
select,
textarea {
  font: inherit;
}

main :is(h1, h2, h3, h4, h5, h6, p),
footer :is(h3, h4, h5, p) {
  max-width: 100%;
}

main :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

main p,
main li,
main label,
footer p,
footer li,
footer a {
  line-height: 1.55;
}

/* One physical button box and one optical text centre for every main CTA. */
:is(
  .store-button,
  .vs-btn,
  .catBuy,
  .catBtn,
  .card-add,
  #builderAddToCartBtn,
  #submit-btn,
  #newsletterForm button[type="submit"],
  body[data-page="quote"] main > section:first-child a.rounded-full,
  body[data-page="quote"] main > section:first-child button.rounded-full,
  body[data-page="home"] main a[class*="bg-gradient-to-r"]
) {
  display: inline-flex !important;
  min-height: 50px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem;
  border-width: 1px;
  text-align: center !important;
  line-height: 1 !important;
  vertical-align: middle;
  white-space: normal;
}

:is(
  .store-button,
  .vs-btn,
  .catBuy,
  .catBtn,
  #builderAddToCartBtn,
  #newsletterForm button[type="submit"],
  body[data-page="quote"] main > section:first-child a.rounded-full,
  body[data-page="quote"] main > section:first-child button.rounded-full
) {
  padding-right: 1.45rem !important;
  padding-left: 1.45rem !important;
}

#builderAddToCartBtn,
#newsletterForm button[type="submit"] {
  min-height: 52px;
}

#submit-btn {
  min-height: 56px;
}

#submit-btn > span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  line-height: 1;
}

:is(
  .store-button,
  .vs-btn,
  .catBuy,
  .catBtn,
  .card-add,
  #builderAddToCartBtn,
  #submit-btn,
  #newsletterForm button[type="submit"]
) :is(i, svg) {
  flex: 0 0 auto;
  line-height: 1;
}

.store-button.w-full,
#builderAddToCartBtn,
#submit-btn {
  width: 100%;
}

/* Fixed-size controls: remove font baseline drift from their icons. */
:is(
  .icon-btn,
  .menu-btn,
  .dc-menu-btn,
  .dc-account-close,
  .dc-chatbot-close,
  .dc-whatsapp-float,
  .wish-button,
  .dc-poster-arrow,
  .builder-nav,
  .catPrev,
  .catNext,
  .dialog-heading button,
  .quantity-control button:not(.remove-item)
) {
  display: inline-flex !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

:is(
  .icon-btn,
  .menu-btn,
  .dc-menu-btn,
  .dc-account-close,
  .dc-chatbot-close,
  .dc-whatsapp-float,
  .wish-button,
  .dc-poster-arrow,
  .builder-nav,
  .catPrev,
  .catNext,
  .dialog-heading button
) > i {
  display: block;
  margin: 0;
  line-height: 1;
}

.icon-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.builder-nav {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.catPrev,
.catNext {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}

.dialog-heading button {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

/* Header: logo, wordmark, icons and badges share a stable centre line. */
#siteHeader .header-row {
  width: 100%;
  min-height: 78px;
  margin-inline: auto;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  align-items: center !important;
}

#siteHeader :is(.brand, .brand-text, .bt-main, .store-actions) {
  align-items: center;
}

#siteHeader .brand {
  min-width: 0;
}

#siteHeader .brand-text {
  display: flex;
  min-width: 0;
}

#siteHeader .bt-main {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.45em;
  line-height: 1.05;
  white-space: nowrap;
}

#siteHeader .bt-sub {
  line-height: inherit;
}

#siteHeader .store-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
}

.badge-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Home hero and section title alignment. */
.vs-content {
  justify-content: center;
}

.vs-title > span {
  display: block;
}

.vs-btn {
  width: max-content;
  max-width: 100%;
}

/* Keep the three showcase links exactly level with the poster beside them. */
@media (min-width: 1024px) {
  .dc-showcase-layout {
    align-items: stretch !important;
  }

  .dc-showcase-layout #dcPosterSlider {
    height: 100%;
    aspect-ratio: 3 / 2;
  }

  .dc-showcase-layout :is(.dc-poster-track, .dc-poster-slide, .dc-poster-image),
  .dc-promo-column,
  .dc-promo-stack {
    height: 100%;
  }

  .dc-showcase-layout .dc-poster-slide.is-active {
    position: absolute;
  }

  .dc-showcase-layout .dc-poster-image {
    object-fit: cover;
  }

  .dc-promo-stack {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .dc-showcase-section .dc-promo-card,
  .dc-showcase-section .dc-promo-card > .relative.flex {
    height: 100%;
    min-height: 0 !important;
  }
}

.dc-showcase-section .dc-promo-card > .relative.flex {
  min-height: 154px;
  align-items: center;
}

.dc-showcase-section .dc-promo-card .min-w-0.flex-1 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.dc-showcase-section .dc-promo-card h4 {
  display: flex;
  min-height: 1.35em;
  align-items: center;
  margin: 0;
  line-height: 1.25;
}

.dc-showcase-section .dc-promo-card p {
  min-height: 3em;
  margin-bottom: 0;
}

.dc-categories-section > div:first-child {
  align-items: center !important;
}

.dc-categories-section > div:first-child h2,
.catHeroHeadOverlay h2 {
  margin-bottom: 0;
}

#dcCategoriesGrid {
  align-items: stretch;
}

.dc-categories-section .dc-orbit-category {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.dc-categories-section .dc-orbit-category > div:last-child {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
}

.dc-categories-section .dc-orbit-category h3 {
  display: flex;
  min-height: 2.5em;
  margin: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
}

.dc-categories-section .dc-orbit-category h3 + span {
  margin-top: auto;
}

.catHeroHeadOverlay {
  align-items: center !important;
}

.performance-slide > div {
  min-width: 0;
  align-self: center;
}

.performance-slide h3 {
  margin-top: 0.75rem;
  margin-bottom: 1.1rem;
}

.catBtns {
  align-items: center;
}

/* Builder cards and summary rows. */
#builder > .grid {
  align-items: start;
}

#builder .component-category > .flex:first-child {
  min-height: 48px;
  align-items: center !important;
}

#builder .component-category > .flex:first-child h3 {
  display: flex;
  min-width: 0;
  align-items: center;
  margin: 0;
}

#builder .component-category > .flex:first-child h3 > i {
  flex: 0 0 auto;
  line-height: 1;
}

#builder .component-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  text-align: left;
}

#builder .component-card h4 {
  min-height: 1.4em;
  margin-bottom: 0;
  line-height: 1.4;
}

#builder .component-card > .mt-3.flex {
  margin-top: auto;
  align-items: center;
}

#builder #build-list > div,
#builder .flex.justify-between {
  min-width: 0;
}

#builderAddToCartBtn > span,
#builderAddToCartBtn > i {
  line-height: 1;
}

/* Shop toolbar, filter form and equal-height product cards. */
.shop-toolbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center !important;
  gap: 16px;
}

.shop-toolbar > p {
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.shop-toolbar #viewToggle {
  min-width: 112px;
}

.category-pills {
  display: flex;
  min-width: 0;
  align-items: center;
}

.category-pills a {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}

.shop-layout,
.shop-layout > div,
.store-product-grid,
.store-product-grid > * {
  min-width: 0;
}

#filterForm > h2 {
  margin-bottom: 0.25rem;
}

#filterForm > label,
.store-dialog form > label,
#checkoutForm label:not(.flex) {
  display: block;
  text-align: left;
  line-height: 1.3;
}

.store-input {
  width: 100%;
  min-height: 50px;
  line-height: 1.3;
}

textarea.store-input {
  min-height: 120px;
  padding-top: 13px;
  padding-bottom: 13px;
  resize: vertical;
}

.store-product-grid {
  align-items: stretch;
}

.store-product-grid:not(.list) > :is(.product-card, article.glass-panel) {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
}

.store-product-grid:not(.list) .product-card > .p-4 {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  text-align: left;
}

.store-product-grid:not(.list) :is(.product-card, article.glass-panel) h3 {
  display: flex;
  min-height: 2.7em;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.store-product-grid:not(.list) .product-card h3 a {
  display: block;
  width: 100%;
}

.store-product-grid:not(.list) .product-card .font-bold.text-lg {
  margin-top: auto;
}

.store-product-grid:not(.list) article.glass-panel > .flex:last-child {
  margin-top: auto;
  align-items: stretch;
}

.store-product-grid:not(.list) article.glass-panel > .flex:last-child .store-button {
  flex: 1 1 120px;
}

.card-add {
  min-height: 44px;
  padding-inline: 1rem !important;
}

/* Quote page: contact cards, hero actions, FAQs, fields and floating icons. */
body[data-page="quote"] main > section:first-child .flex.flex-wrap.items-center.justify-center {
  align-items: stretch !important;
}

body[data-page="quote"] main > section:first-child :is(a.rounded-full, button.rounded-full) {
  min-width: 156px;
}

#contact-methods .grid > a {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
}

#contact-methods .grid > a > .relative {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

#contact-methods .grid > a h3 {
  min-height: 1.3em;
}

#contact-methods .grid > a p {
  min-height: 1.55em;
}

#contact-methods .grid > a > .relative > .flex:last-child {
  margin-top: auto;
  align-items: center;
}

#contact-methods .font-semibold {
  max-width: 100%;
  overflow-wrap: anywhere;
}

body[data-page="quote"] main button.w-full.px-5.py-4 {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 16px;
  text-align: left !important;
  line-height: 1.3;
}

body[data-page="quote"] main button.w-full.px-5.py-4 > span {
  min-width: 0;
  flex: 1 1 auto;
}

body[data-page="quote"] main button.w-full.px-5.py-4 > i {
  flex: 0 0 auto;
  line-height: 1;
}

#quoteForm > .space-y-4 > h4,
#quoteForm > .space-y-4 > h4 > span {
  align-items: center;
}

#quoteForm > .space-y-4 > h4 > span {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  justify-content: center;
  line-height: 1;
}

#quoteForm input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
#quoteForm select {
  min-height: 52px;
  line-height: 1.25;
}

#quoteForm .relative > i.absolute:not(.bottom-3) {
  top: 26px !important;
  line-height: 1;
  transform: translateY(-50%);
}

#quoteForm .relative.group > label.absolute {
  line-height: 1.25;
}

#quoteForm label[for="file-upload"] {
  min-height: 72px;
  align-items: center;
}

/* Product pages: quantity and actions end on the same line and feature rows match. */
body[data-page="product"] main nav[aria-label="Breadcrumb"] {
  align-items: center;
  line-height: 1.35;
}

body[data-page="product"] main > section > .max-w-7xl > .grid {
  align-items: start;
}

body[data-page="product"] main h1 {
  line-height: 1.1;
}

body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap {
  align-items: flex-end;
}

body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > label {
  display: flex;
  flex: 0 0 96px;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}

body[data-page="product"] #productQty,
body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > .store-button {
  min-height: 50px;
}

body[data-page="product"] main .grid.grid-cols-3.gap-3 > span {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.35;
}

body[data-page="product"] main .grid.grid-cols-3.gap-3 > span > i {
  flex: 0 0 auto;
  margin-top: 0.15em;
  line-height: 1;
}

.detail-tabs {
  display: flex;
  align-items: stretch;
}

.detail-tabs button {
  display: inline-flex;
  min-height: 44px;
  flex: 1 1 160px;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.product-details dl {
  align-items: start;
}

.product-details :is(dt, dd) {
  min-width: 0;
  margin: 0;
  line-height: 1.45;
}

/* Cart, wishlist and checkout generated content. */
.cart-row {
  align-items: center;
}

.cart-row > * {
  min-width: 0;
}

.cart-row > div:nth-child(2) {
  align-self: center;
}

.cart-row .quantity-control {
  flex-wrap: wrap;
  align-items: center;
}

.quantity-control button:not(.remove-item) {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

.quantity-control .remove-item {
  display: inline-flex;
  min-height: 32px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cart-row .item-total {
  align-self: center;
  text-align: right;
}

.cart-totals > div,
#checkoutSummary > div {
  min-width: 0;
  align-items: baseline;
}

.cart-totals > div > :last-child,
#checkoutSummary > div > :last-child {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.checkout-grid {
  align-items: start;
}

#checkoutForm .grid > label {
  min-width: 0;
}

#checkoutForm nav[aria-label="Checkout progress"] {
  align-items: center;
  gap: 12px;
}

#checkoutForm label.flex {
  align-items: center;
  line-height: 1.35;
}

#checkoutForm label.flex > input {
  flex: 0 0 auto;
}

/* Dialog headers, menus, chip controls and forms. */
.dialog-heading {
  display: flex;
  align-items: center !important;
}

.dialog-heading h2 {
  min-width: 0;
  margin: 0;
  line-height: 1.2;
}

.menu-links a {
  display: flex;
  min-height: 38px;
  align-items: center;
  line-height: 1.3;
}

.support-chips {
  align-items: stretch;
}

.support-chips button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}

/* Footer: same heading baselines, stable contact icons and one control height. */
footer .grid > div {
  min-width: 0;
}

footer h4.flex {
  min-height: 22px;
  align-items: center;
}

footer h4.flex > span:first-child {
  flex: 0 0 auto;
}

footer .space-y-3 > :is(a, div) {
  min-width: 0;
  align-items: flex-start;
}

footer .space-y-3 > :is(a, div) > div:first-child {
  flex: 0 0 40px;
}

footer .space-y-3 > :is(a, div) > div:last-child {
  min-width: 0;
}

footer ul a {
  min-height: 24px;
  align-items: center;
}

#newsletterForm > .flex {
  align-items: stretch;
}

#newsletterForm > .flex > .relative {
  min-width: 0;
}

#newsletterForm input,
#newsletterForm button {
  height: 52px;
  min-height: 52px;
}

#newsletterForm input {
  line-height: 1.25;
}

#newsletterForm button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .shop-toolbar {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .shop-toolbar .category-pills {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
}

@media (max-width: 700px) {
  #siteHeader .header-row {
    min-height: 68px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #siteHeader .brand-text {
    display: none !important;
  }

  #siteHeader .store-actions {
    gap: 2px;
  }

  #siteHeader .icon-btn {
    flex-basis: 38px;
    width: 38px;
    height: 42px;
  }

  .vs-content {
    width: 100%;
    max-width: 680px;
  }

  .dc-showcase-section .dc-promo-card p {
    min-height: 0;
  }

  .performance-slide {
    text-align: center;
  }

  .performance-slide .store-button {
    margin-inline: auto;
  }

  .performance-slide img {
    justify-self: center;
  }

  .store-product-grid:not(.list) :is(.product-card, article.glass-panel) h3 {
    min-height: 2.7em;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > .store-button {
    flex: 1 1 150px;
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 {
    align-items: stretch;
  }

  .cart-row .item-total {
    text-align: left;
  }

  footer .grid > div {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .store-product-grid:not(.list) {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .shop-toolbar #viewToggle {
    min-width: 104px;
    padding-inline: 1rem !important;
  }

  body[data-page="quote"] main > section:first-child :is(a.rounded-full, button.rounded-full) {
    width: 100%;
    min-width: 0;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > label {
    flex-basis: 100%;
  }

  body[data-page="product"] #productQty {
    width: 100%;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > .store-button {
    width: 100%;
    flex-basis: 100%;
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 > span {
    align-items: center;
  }

  .detail-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-tabs button {
    width: 100%;
  }

  #checkoutForm nav[aria-label="Checkout progress"] {
    flex-direction: column;
    align-items: flex-start;
  }

  #newsletterForm > .flex {
    flex-direction: column;
  }

  #newsletterForm button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  #siteHeader .icon-btn {
    flex-basis: 34px;
    width: 34px;
  }

  .dc-categories-section .dc-orbit-category {
    padding-inline: 8px;
  }

  .cart-row .quantity-control {
    gap: 8px;
  }
}

/* ==========================================================================
   Explore Performance Zones — precise section-only alignment
   ========================================================================== */
.catHeroWrap.catHeroFull {
  padding: 52px 0 48px !important;
}

#catHero {
  --zone-inline: clamp(24px, 4vw, 56px);
  width: 100%;
}

#catHero .catHeroStage {
  display: flex !important;
  min-height: 500px !important;
  align-items: stretch;
  overflow: hidden;
}

#catHero .catHeroHeadOverlay {
  top: 50px;
  right: auto;
  left: 50%;
  width: min(100%, 1280px);
  max-width: none;
  padding: 0 var(--zone-inline);
  transform: translateX(-50%);
  align-items: center !important;
}

#catHero .catHeroHeadOverlay > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

#catHero .catHeroHeadOverlay > div > span {
  margin: 0 0 6px !important;
  line-height: 1.2;
}

#catHero .catHeroHeadOverlay h2 {
  margin: 0;
  line-height: 1.2;
}

#catHero .catHeroHeadOverlay > a {
  display: inline-flex;
  min-height: 42px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

#catHero .performance-slide {
  display: grid !important;
  width: min(100%, 1280px);
  min-height: 500px;
  margin: 0 auto;
  padding: 100px var(--zone-inline) 82px;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: center !important;
  gap: clamp(28px, 4vw, 56px);
}

#catHero .performance-slide > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: center !important;
  text-align: left;
}

#catHero .performance-slide > div:first-child > p:first-child {
  margin: 0 0 8px;
  line-height: 1.25;
}

#catHero .performance-slide h3 {
  margin: 0 0 13px;
  font: 700 clamp(34px, 4vw, 58px)/1.08 Orbitron, sans-serif;
  text-wrap: balance;
}

#catHero .performance-slide h3 + p {
  max-width: 560px;
  margin: 0 0 20px;
  line-height: 1.65;
}

#catHero .performance-slide .store-button {
  min-width: 168px;
  margin: 0;
  align-self: flex-start;
}

#catHero .performance-slide img {
  display: block;
  width: 100%;
  max-width: 500px;
  height: clamp(250px, 28vw, 330px) !important;
  margin: 0;
  justify-self: end;
  align-self: center;
  object-fit: contain;
  object-position: center;
}

#catHero .catHeroNav {
  left: calc(var(--zone-inline) + 37px);
  bottom: 24px;
  height: 42px;
  align-items: center;
}

#catHero .catHeroDots {
  right: var(--zone-inline);
  bottom: 41px;
  height: 8px;
  align-items: center;
}

#catHero :is(.catPrev, .catNext) {
  display: inline-flex !important;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}

#catHero .catDot {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 900px) {
  .catHeroWrap.catHeroFull {
    padding: 46px 0 44px !important;
  }

  #catHero {
    --zone-inline: 28px;
  }

  #catHero .catHeroStage {
    min-height: 680px !important;
  }

  #catHero .catHeroHeadOverlay {
    top: 26px;
  }

  #catHero .performance-slide {
    min-height: 680px;
    padding: 102px var(--zone-inline) 84px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(210px, 1fr);
    gap: 18px;
  }

  #catHero .performance-slide > div:first-child {
    align-items: center;
    text-align: center;
  }

  #catHero .performance-slide h3 + p {
    margin-right: auto;
    margin-left: auto;
  }

  #catHero .performance-slide .store-button {
    align-self: center;
  }

  #catHero .performance-slide img {
    height: 225px !important;
    justify-self: center;
  }

  #catHero .catHeroNav {
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
  }

  #catHero .catHeroDots {
    right: 28px;
    bottom: 39px;
  }
}

@media (max-width: 640px) {
  .catHeroWrap.catHeroFull {
    padding: 38px 0 38px !important;
  }

  #catHero {
    --zone-inline: 18px;
  }

  #catHero .catHeroStage {
    min-height: 620px !important;
    border-radius: 22px;
  }

  #catHero .catHeroHeadOverlay {
    top: 22px;
  }

  #catHero .catHeroHeadOverlay > a {
    display: none;
  }

  #catHero .catHeroHeadOverlay h2 {
    font-size: 17px;
  }

  #catHero .performance-slide {
    min-height: 620px;
    padding: 88px var(--zone-inline) 78px;
    grid-template-rows: auto minmax(180px, 1fr);
    gap: 14px;
  }

  #catHero .performance-slide h3 {
    font-size: clamp(28px, 9vw, 38px);
    line-height: 1.1;
  }

  #catHero .performance-slide h3 + p {
    margin-bottom: 20px;
    line-height: 1.55;
  }

  #catHero .performance-slide .store-button {
    width: min(100%, 280px);
  }

  #catHero .performance-slide img {
    max-width: 360px;
    height: 195px !important;
  }

  #catHero .catHeroNav {
    left: 50%;
    bottom: 18px;
  }

  #catHero .catHeroDots {
    right: 18px;
    bottom: 35px;
  }
}

@media (max-width: 420px) {
  #catHero .catHeroStage {
    min-height: 595px !important;
  }

  #catHero .performance-slide {
    min-height: 595px;
    padding-top: 82px;
    padding-bottom: 72px;
  }

  #catHero .performance-slide img {
    height: 175px !important;
  }
}

/* ========================================================================== 
   Navigation drawer
   ========================================================================== */
#menuDialog.store-dialog {
  width: min(500px, 100%);
  height: 100dvh;
  max-width: none;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 85% 10%, rgba(0, 240, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #15171d 0%, #0d0f14 100%) !important;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 28px 0 0 28px;
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.55);
}

#menuDialog[open] {
  animation: menu-drawer-in 0.28s cubic-bezier(.2,.8,.2,1);
}

#menuDialog::backdrop {
  background: rgba(2, 4, 8, 0.76);
  backdrop-filter: blur(9px);
}

@keyframes menu-drawer-in {
  from { opacity: 0; transform: translateX(36px); }
  to { opacity: 1; transform: translateX(0); }
}

#menuDialog .dialog-heading {
  min-height: 82px;
  margin: 0;
  padding: 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 12, 16, 0.7);
  backdrop-filter: blur(18px);
}

#menuDialog .dialog-heading h2 {
  font: 700 22px Orbitron, sans-serif;
  letter-spacing: 0.06em;
}

#menuDialog .dialog-heading button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: #fff;
  font-size: 19px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  transition: 0.2s ease;
}

#menuDialog .dialog-heading button:hover {
  color: #050505;
  background: #00f0ff;
  border-color: #00f0ff;
  transform: rotate(6deg);
}

.menu-drawer-body {
  height: calc(100dvh - 82px);
  padding: 26px 28px 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.5) transparent;
}

.menu-intro {
  margin-bottom: 20px;
}

.menu-kicker {
  display: block;
  margin-bottom: 7px;
  color: #00f0ff;
  font: 700 11px Orbitron, sans-serif;
  letter-spacing: 0.18em;
}

.menu-intro p {
  max-width: 390px;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.55;
}

.menu-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin-bottom: 20px;
  padding: 6px 7px 6px 17px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  transition: 0.2s ease;
}

.menu-search:focus-within {
  border-color: rgba(0, 240, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.08);
}

.menu-search > i {
  color: #7f8795;
  font-size: 17px;
}

.menu-search input {
  min-width: 0;
  color: #fff;
  background: transparent;
  border: 0;
  outline: 0;
}

.menu-search input::placeholder {
  color: #747c89;
}

.menu-search button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #030507;
  background: #00f0ff;
  border-radius: 12px;
}

#menuDialog .menu-links {
  gap: 18px;
}

#menuDialog .menu-links a:hover {
  color: inherit !important;
}

.menu-builder-card {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 15px;
  min-height: 92px !important;
  padding: 18px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(110deg, rgba(0, 240, 255, 0.15), rgba(0, 240, 255, 0.02)),
    #171a20;
  border: 1px solid rgba(0, 240, 255, 0.26);
  border-radius: 19px;
  position: relative;
  transition: 0.22s ease;
}

.menu-builder-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -55px;
  bottom: -70px;
  background: #00f0ff;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.18;
}

.menu-builder-card:hover {
  border-color: rgba(0, 240, 255, 0.65);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
}

.menu-builder-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #050505;
  font-size: 24px;
  background: #00f0ff;
  border-radius: 16px;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.23);
}

.menu-builder-card strong,
.menu-builder-card small,
.menu-whatsapp strong,
.menu-whatsapp small {
  display: block;
}

.menu-builder-card strong {
  margin-bottom: 5px;
  font: 700 16px Orbitron, sans-serif;
}

.menu-builder-card small {
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.35;
}

.menu-builder-card > i:last-child {
  color: #00f0ff;
  position: relative;
  z-index: 1;
}

.menu-primary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.menu-primary-grid a {
  display: flex !important;
  min-height: 76px !important;
  padding: 13px 8px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  color: #d9dee7;
  text-align: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 15px;
  transition: 0.2s ease;
}

.menu-primary-grid a i {
  color: #00f0ff;
  font-size: 19px;
}

.menu-primary-grid a span {
  font-size: 13px;
  font-weight: 700;
}

.menu-primary-grid a:hover {
  background: rgba(0, 240, 255, 0.09);
  border-color: rgba(0, 240, 255, 0.35);
  transform: translateY(-2px);
}

.menu-category-section {
  padding-top: 2px;
}

.menu-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 11px;
}

.menu-section-heading h3 {
  margin: 0;
  color: #f5f7fa;
  font: 700 14px Orbitron, sans-serif;
}

.menu-section-heading > a {
  display: inline-flex !important;
  min-height: auto !important;
  align-items: center;
  gap: 6px;
  color: #00f0ff !important;
  font-size: 12px;
  font-weight: 700;
}

.menu-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.menu-category-grid a {
  display: flex !important;
  min-height: 45px !important;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  color: #aeb5c2;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  font-size: 13px;
  transition: 0.2s ease;
}

.menu-category-grid a i {
  color: #626b79;
  font-size: 11px;
  transition: 0.2s ease;
}

.menu-category-grid a:hover {
  color: #fff !important;
  border-color: rgba(0, 240, 255, 0.28);
  transform: translateX(2px);
}

.menu-category-grid a:hover i {
  color: #00f0ff;
}

.menu-whatsapp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 66px;
  margin-top: 20px;
  padding: 13px 16px;
  color: #eafff1;
  background: rgba(37, 211, 102, 0.09);
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: 16px;
  transition: 0.2s ease;
}

.menu-whatsapp > i:first-child {
  color: #25d366;
  font-size: 23px;
}

.menu-whatsapp strong {
  margin-bottom: 2px;
  font-size: 14px;
}

.menu-whatsapp small {
  color: #8fa99a;
  font-size: 12px;
}

.menu-whatsapp:hover {
  background: rgba(37, 211, 102, 0.15);
  border-color: rgba(37, 211, 102, 0.5);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  #menuDialog.store-dialog {
    width: 100%;
    border-left: 0 !important;
    border-radius: 0;
  }

  #menuDialog .dialog-heading {
    min-height: 72px;
    padding: 0 18px;
  }

  .menu-drawer-body {
    height: calc(100dvh - 72px);
    padding: 20px 18px 28px;
  }

  .menu-builder-card strong {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #menuDialog[open] { animation: none; }
}

/* ========================================================================== 
   Shop page presentation
   Layout and hierarchy only; the existing site palette remains unchanged.
   ========================================================================== */
body[data-page="shop"] .shop-hero {
  min-height: 560px;
  padding: 138px 0 70px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.shop-hero-glow {
  position: absolute;
  top: 8%;
  right: 5%;
  width: 360px;
  height: 360px;
  background: rgba(0, 240, 255, 0.08);
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}

.shop-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.75fr);
  align-items: center;
  gap: clamp(45px, 8vw, 110px);
  position: relative;
  z-index: 1;
}

.shop-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
  color: #777f8c;
  font-size: 13px;
}

.shop-breadcrumb a {
  color: #a9b0bb;
}

.shop-breadcrumb a:hover {
  color: #00f0ff;
}

.shop-breadcrumb i {
  font-size: 9px;
}

.shop-hero-copy h1 {
  margin: 0;
  font-size: clamp(45px, 6vw, 76px);
  line-height: 0.98;
  text-wrap: balance;
}

.shop-hero-copy > p {
  max-width: 640px;
  margin-top: 24px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
}

.shop-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.shop-hero-actions .store-button {
  min-height: 50px;
}

.shop-confidence-panel {
  padding: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(15px);
}

.shop-panel-kicker,
.shop-section-kicker,
.shop-filter-heading span {
  color: #00f0ff;
  font: 700 10px Orbitron, sans-serif;
  letter-spacing: 0.18em;
}

.shop-confidence-panel > h2 {
  margin: 8px 0 22px;
  font: 700 clamp(22px, 2.3vw, 30px) Orbitron, sans-serif;
  line-height: 1.2;
}

.shop-benefit-list {
  display: grid;
  gap: 4px;
}

.shop-benefit-list > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.shop-benefit-list i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 13px;
  font-size: 18px;
}

.shop-benefit-list strong,
.shop-benefit-list small {
  display: block;
}

.shop-benefit-list strong {
  margin-bottom: 3px;
  font-size: 14px;
}

.shop-benefit-list small {
  color: #858d9a;
  font-size: 12px;
  line-height: 1.35;
}

.shop-catalog {
  padding-top: 78px;
  padding-bottom: 100px;
}

.shop-catalog-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 34px;
}

.shop-catalog-heading h2 {
  margin: 8px 0 0;
  font: 700 clamp(27px, 3.4vw, 42px) Orbitron, sans-serif;
  line-height: 1.12;
}

.shop-catalog-heading > p {
  max-width: 500px;
  color: #929aa7;
  line-height: 1.65;
}

body[data-page="shop"] .shop-toolbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 18px;
  margin-bottom: 28px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
}

.shop-result-count {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-left: 8px;
}

.shop-result-count strong {
  color: #fff;
  font: 700 22px Orbitron, sans-serif;
}

.shop-result-count span {
  color: #858d9a;
  font-size: 13px;
}

body[data-page="shop"] .category-pills {
  gap: 7px;
  padding: 2px;
  scrollbar-width: none;
}

body[data-page="shop"] .category-pills::-webkit-scrollbar {
  display: none;
}

body[data-page="shop"] .category-pills a {
  min-height: 38px;
  padding: 8px 14px;
  color: #aeb5c0;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
}

body[data-page="shop"] .category-pills a:hover {
  color: #fff;
  border-color: rgba(0, 240, 255, 0.32);
}

body[data-page="shop"] .category-pills a[aria-current] {
  color: #050505;
  background: #00f0ff;
  border-color: #00f0ff;
}

.shop-toolbar-actions {
  display: flex;
  gap: 8px;
}

.shop-toolbar-actions .store-button {
  min-width: 88px;
  min-height: 42px;
  padding: 9px 13px;
  font-size: 13px;
}

.shop-filter-toggle {
  display: none;
}

.shop-filter-toggle span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  color: #050505;
  background: #00f0ff;
  border-radius: 999px;
  font-size: 10px;
}

body[data-page="shop"] .shop-layout {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.shop-filter-panel {
  position: sticky;
  top: 98px;
  padding: 22px;
}

.shop-filter-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 23px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.shop-filter-heading h2 {
  margin: 6px 0 0;
  font: 700 22px Orbitron, sans-serif;
}

.shop-filter-heading > a {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
}

.shop-filter-heading > a:hover {
  color: #00f0ff;
}

.shop-filter-form {
  display: grid;
  gap: 17px;
}

.shop-filter-form label,
.shop-filter-form fieldset {
  min-width: 0;
}

.shop-filter-form label > span,
.shop-filter-form legend {
  display: block;
  margin-bottom: 7px;
  color: #b8bec8;
  font-size: 12px;
  font-weight: 700;
}

.shop-filter-form fieldset {
  padding: 0;
  border: 0;
}

.shop-filter-form .store-input {
  min-height: 45px;
  margin: 0;
  border-radius: 11px;
  font-size: 13px;
}

.shop-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.price-input {
  position: relative;
}

.price-input b {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 1;
  color: #757d89;
  font-size: 9px;
  transform: translateY(-50%);
}

.price-input .store-input {
  padding-left: 38px;
}

body[data-page="shop"] .store-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body[data-page="shop"] .product-card {
  border-radius: 19px;
  transform: none;
}

body[data-page="shop"] .product-card:hover {
  border-color: rgba(0, 240, 255, 0.38);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
  transform: translateY(-4px);
}

body[data-page="shop"] .product-card .card-image {
  min-height: 230px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body[data-page="shop"] .product-card .card-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

body[data-page="shop"] .product-card .card-image img {
  padding: 28px;
}

.product-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2;
}

.product-card-badges span {
  padding: 5px 8px;
  color: #d8dde5;
  background: rgba(7, 10, 18, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

body[data-page="shop"] .wish-button {
  top: 12px;
  right: 12px;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body[data-page="shop"] .card-add {
  bottom: 12px;
  left: 12px;
  right: 12px;
}

body[data-page="shop"] .product-card-content {
  padding: 18px;
}

.product-card-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #00f0ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #858d99;
  letter-spacing: 0;
  text-transform: none;
}

.product-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.product-stock.is-available {
  color: #00f0ff;
}

body[data-page="shop"] .product-card h3 {
  min-height: 2.7em;
  margin: 0 0 9px;
  font-size: 16px;
  line-height: 1.35;
}

.product-card-description {
  display: -webkit-box;
  min-height: 3em;
  margin-bottom: 17px;
  overflow: hidden;
  color: #858d99;
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


.product-card-details-button {
  width: 100%;
  min-height: 44px;
  margin: 4px 0 17px;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.product-card-details-button i {
  font-size: 14px;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.product-card-footer strong {
  font-size: 18px;
  white-space: nowrap;
}

.product-card-footer > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
}

.product-card-footer > a:hover {
  color: #00f0ff;
}

body[data-page="shop"] .store-product-grid.list {
  grid-template-columns: 1fr;
}

body[data-page="shop"] .store-product-grid.list .product-card {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
}

body[data-page="shop"] .store-product-grid.list .card-image {
  min-height: 225px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 0;
}

body[data-page="shop"] .store-product-grid.list .product-card-content {
  padding: 24px;
}

body[data-page="shop"] .empty-state {
  padding: 90px 24px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 20px;
}

.empty-state-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  place-items: center;
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 18px;
  font-size: 24px;
}

@media (max-width: 1100px) {
  body[data-page="shop"] .store-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .shop-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .shop-confidence-panel {
    max-width: 650px;
  }

  body[data-page="shop"] .shop-toolbar {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  body[data-page="shop"] .category-pills {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .shop-filter-toggle {
    display: inline-flex;
  }

  body[data-page="shop"] .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-filter-panel {
    display: none;
    position: static;
  }

  .shop-filter-panel.is-open {
    display: block;
  }

  .shop-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-filter-form > button,
  .shop-filter-form > fieldset {
    align-self: end;
  }
}

@media (max-width: 700px) {
  body[data-page="shop"] .shop-hero {
    min-height: 0;
    padding: 112px 0 55px;
  }

  .shop-hero-copy h1 {
    font-size: clamp(39px, 12vw, 56px);
  }

  .shop-confidence-panel {
    padding: 22px;
  }

  .shop-catalog {
    padding-top: 55px;
    padding-bottom: 70px;
  }

  .shop-catalog-heading {
    display: block;
    margin-bottom: 26px;
  }

  .shop-catalog-heading > p {
    margin-top: 14px;
  }

  .shop-filter-form {
    grid-template-columns: 1fr;
  }

  body[data-page="shop"] .product-card .card-image {
    min-height: 210px;
  }
}

@media (max-width: 560px) {
  .shop-hero-actions .store-button {
    width: 100%;
  }

  body[data-page="shop"] .shop-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px;
  }

  .shop-result-count span {
    display: none;
  }

  .shop-toolbar-actions .store-button {
    min-width: 0;
    padding-inline: 11px;
  }

  body[data-page="shop"] .store-product-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="shop"] .store-product-grid.list .product-card {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  body[data-page="shop"] .store-product-grid.list .card-image {
    min-height: 200px;
  }

  body[data-page="shop"] .store-product-grid.list .product-card-content {
    padding: 16px;
  }

  body[data-page="shop"] .store-product-grid.list .product-card-description,
  body[data-page="shop"] .store-product-grid.list .product-card-footer > a {
    display: none;
  }

  body[data-page="shop"] .store-product-grid.list .product-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ========================================================================== 
   Custom PC Builder — structured workstation with travelling border strokes
   ========================================================================== */
@property --builder-stroke-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes builder-stroke-travel {
  to { --builder-stroke-angle: 360deg; }
}

#builder {
  padding-top: 84px !important;
  padding-bottom: 84px !important;
  isolation: isolate;
}

#builder > .absolute.inset-0 {
  z-index: -1;
}

.builder-heading {
  max-width: 820px;
  margin: 0 auto 36px;
}

.builder-eyebrow {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 7px 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font: 700 10px Orbitron, sans-serif;
  letter-spacing: 0.2em;
}

.builder-heading h2 {
  margin-bottom: 14px !important;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.08;
  text-wrap: balance;
}

.builder-heading > p {
  max-width: 680px;
  line-height: 1.7;
}

.builder-process {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  color: #949ba7;
  font-size: 12px;
  font-weight: 700;
}

.builder-process span {
  display: inline-flex;
  min-height: 35px;
  padding: 6px 11px 6px 7px;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
}

.builder-process b {
  display: inline-grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: #17181a;
  background: #fff;
  border-radius: 50%;
  font-size: 9px;
}

.builder-process > i {
  color: #59606b;
  font-size: 10px;
}

.builder-layout {
  gap: 30px !important;
}

.builder-component-stack {
  display: grid;
  gap: 24px;
}

.builder-summary-column {
  display: flex;
  min-height: 100%;
}

#builder .component-category,
#builder .builder-summary-card {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 20px !important;
}

#builder .component-category {
  margin: 0 !important;
  padding: 16px !important;
}

/* The animated segment sits just outside each panel's regular border. */
#builder .component-category::before,
#builder .builder-summary-card::before,
#builder .component-card.is-selected::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 3;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(
    from var(--builder-stroke-angle),
    transparent 0deg,
    transparent 286deg,
    rgba(255, 255, 255, 0.10) 305deg,
    rgba(255, 255, 255, 0.95) 328deg,
    rgba(255, 255, 255, 0.22) 346deg,
    transparent 360deg
  );
  border-radius: 21px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: builder-stroke-travel 7s linear infinite;
}

#builder .component-category:nth-child(2)::before {
  animation-delay: -2.25s;
}

#builder .component-category:nth-child(3)::before {
  animation-delay: -4.5s;
}

#builder .builder-summary-card::before {
  animation-delay: -1.1s;
}

#builder .component-category > *,
#builder .builder-summary-card > * {
  position: relative;
  z-index: 1;
}

#builder .component-category > .flex:first-child {
  min-height: 50px;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom-color: rgba(255, 255, 255, 0.09) !important;
}

#builder .component-category > .flex:first-child h3 {
  gap: 12px !important;
}

#builder .component-category > .flex:first-child h3 > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-size: 17px;
}

#builder .component-category h3 > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 16px;
  line-height: 1.2;
}

#builder .component-category h3 small {
  color: #858c98;
  font: 700 9px Orbitron, sans-serif;
  letter-spacing: 0.14em;
}

#builder .builder-nav {
  width: 40px;
  height: 40px;
  color: #dfe3e9;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

#builder .builder-nav:hover {
  color: #17181a !important;
  background: #fff !important;
  transform: translateY(-2px);
}

#builder .builder-track {
  gap: 14px !important;
  padding: 2px 2px 7px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

#builder .builder-track::-webkit-scrollbar {
  height: 4px;
}

#builder .builder-track::-webkit-scrollbar-track {
  background: transparent;
}

#builder .builder-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

#builder .component-card {
  min-width: 225px !important;
  padding: 10px !important;
  overflow: visible;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 15px !important;
  box-shadow: none !important;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
}

#builder .component-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
  transform: translateY(-3px);
}

#builder .component-card.is-selected {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
}

#builder .component-card.is-selected::before {
  inset: -2px;
  border-radius: 16px;
  animation-duration: 4.5s;
}

#builder .component-card > div:first-child {
  height: 112px !important;
  margin-bottom: 10px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  border-radius: 11px !important;
}

#builder .component-card img {
  padding: 11px !important;
  opacity: 0.88 !important;
}

#builder .component-card:hover img,
#builder .component-card.is-selected img {
  opacity: 1 !important;
  transform: scale(1.04);
}

#builder .component-card h4 {
  min-height: 2.5em;
  overflow: visible;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: initial;
  white-space: normal;
}

#builder .component-card > p {
  margin-top: 5px !important;
  color: #727986;
}

#builder .component-card > .mt-3.flex {
  margin-top: 9px !important;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#builder .component-card > .mt-3.flex > span {
  color: #fff !important;
  font-size: 15px;
}

#builder .status-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.26) !important;
  border: 2px solid rgba(255, 255, 255, 0.10);
  box-sizing: content-box;
}

#builder .component-card.is-selected .status-dot {
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.09) !important;
}

.builder-summary-card {
  position: relative !important;
  top: auto;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 20px !important;
  flex-direction: column;
  border-top-width: 1px !important;
  border-top-color: rgba(255, 255, 255, 0.11) !important;
}

.builder-summary-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.builder-summary-icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  place-items: center;
  color: #17181a;
  background: #fff;
  border-radius: 13px;
  font-size: 19px;
}

.builder-summary-head small {
  display: block;
  margin-bottom: 3px;
  color: #858c98;
  font: 700 9px Orbitron, sans-serif;
  letter-spacing: 0.16em;
}

.builder-summary-head h3 {
  margin: 0;
  font: 700 20px Orbitron, sans-serif;
  line-height: 1.15;
}

#builder #build-list {
  display: grid;
  min-height: 280px;
  margin-bottom: 13px !important;
  padding: 10px;
  flex: 1 1 auto;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 9px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
}

.builder-summary-slot {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 74px;
  padding: 11px;
  align-items: center;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  gap: 11px;
  color: inherit;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.builder-summary-slot:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(2px);
}

.builder-slot-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: #858c98;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  font-size: 16px;
}

.builder-slot-copy {
  display: block;
  min-width: 0;
}

.builder-slot-copy small,
.builder-slot-copy strong {
  display: block;
}

.builder-slot-copy small {
  margin-bottom: 5px;
  color: #737b87;
  font: 700 8px Orbitron, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.builder-slot-copy strong {
  overflow: hidden;
  color: #a8afb9;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-slot-value {
  color: #747c87;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.builder-slot-value i {
  margin-left: 3px;
  font-size: 9px;
}

.builder-summary-slot.is-filled {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.15);
}

.builder-summary-slot.is-filled .builder-slot-icon {
  color: #17181a;
  background: #fff;
  border-color: #fff;
}

.builder-summary-slot.is-filled .builder-slot-copy strong,
.builder-summary-slot.is-filled .builder-slot-value {
  color: #fff;
}

#builder .builder-summary-card > .mb-6 {
  margin-bottom: 14px !important;
}

#builder .builder-summary-card > .flex.justify-between.items-center {
  min-height: 55px;
  padding: 11px 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px !important;
}

#builder .builder-summary-card > .flex.justify-between.items-end {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.builder-summary-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 13px;
}

.builder-summary-metric {
  min-width: 0;
  padding: 11px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
}

.builder-summary-metric > span,
.builder-summary-metric > strong {
  display: block;
}

.builder-summary-metric > span {
  margin-bottom: 7px;
  overflow: hidden;
  color: #858c98;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-summary-metric > span i {
  margin-right: 4px;
  color: #fff;
}

.builder-summary-metric > strong {
  color: #fff;
  font: 700 14px Orbitron, sans-serif;
  line-height: 1.2;
}

.builder-selection-progress {
  margin-bottom: 13px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

.builder-selection-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.builder-selection-progress span {
  color: #c8cdd5;
  font-size: 11px;
  font-weight: 700;
}

.builder-selection-progress small {
  color: #747c88;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.builder-progress-track {
  height: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.builder-progress-track #perf-bar {
  height: 100%;
  background: #fff;
  border-radius: inherit;
}

.builder-total-panel {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
}

.builder-total-panel > span,
.builder-total-panel > span small {
  display: block;
}

.builder-total-panel > span {
  color: #d3d7de;
  font-size: 12px;
  font-weight: 700;
}

.builder-total-panel > span small {
  margin-top: 3px;
  color: #777f8b;
  font-size: 9px;
  font-weight: 500;
}

.builder-total-panel > strong {
  color: #fff;
  font: 700 clamp(18px, 2vw, 23px) Orbitron, sans-serif;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

#builder #total-price {
  font-variant-numeric: tabular-nums;
}

#builderAddToCartBtn {
  min-height: 54px;
  border-radius: 13px !important;
}

.builder-compatibility-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 15px;
  color: #7f8793;
  font-size: 11px;
  line-height: 1.45;
}

.builder-compatibility-note i {
  flex: 0 0 auto;
  color: #fff;
  font-size: 14px;
}

@media (max-width: 1023px) {
  #builder {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .builder-summary-card {
    position: relative !important;
    top: auto;
  }

  #builder #build-list {
    min-height: 270px;
  }
}

@media (max-width: 700px) {
  #builder {
    padding-top: 60px !important;
    padding-right: 16px !important;
    padding-bottom: 60px !important;
    padding-left: 16px !important;
  }

  .builder-heading {
    margin-bottom: 30px;
  }

  .builder-heading h2 {
    font-size: clamp(32px, 10vw, 43px);
  }

  .builder-process {
    gap: 7px;
  }

  .builder-process > i {
    display: none;
  }

  .builder-process span {
    font-size: 10px;
  }

  #builder .component-category {
    padding: 14px !important;
    border-radius: 17px !important;
  }

  #builder .component-category::before,
  #builder .builder-summary-card::before {
    border-radius: 18px;
  }

  #builder .component-category > .flex:first-child {
    min-height: 50px;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
  }

  #builder .component-category > .flex:first-child h3 > i {
    width: 37px;
    height: 37px;
    border-radius: 11px;
    font-size: 17px;
  }

  #builder .component-category h3 > span {
    font-size: 15px;
  }

  #builder .component-category h3 small {
    font-size: 8px;
  }

  #builder .builder-nav {
    width: 36px;
    height: 36px;
  }

  #builder .component-card {
    min-width: min(225px, calc(100vw - 82px)) !important;
  }

  #builder .component-card > div:first-child {
    height: 105px !important;
  }

  .builder-summary-card {
    padding: 16px !important;
    border-radius: 17px !important;
  }

  #builder #build-list {
    min-height: 0;
    padding: 8px;
    grid-template-rows: repeat(3, minmax(76px, auto));
  }

  .builder-summary-slot {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .builder-slot-icon {
    width: 36px;
    height: 36px;
  }

  .builder-slot-value {
    display: none;
  }
}

/* ========================================================================== 
   Trending hardware — editorial grid with category-colour border strokes
   ========================================================================== */
@property --trend-stroke-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes trend-stroke-travel {
  to { --trend-stroke-angle: 360deg; }
}

.trending-section {
  width: min(calc(100% - 48px), 1280px);
  margin: 0 auto;
  padding: 92px 0;
}

.trending-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr) auto;
  align-items: end;
  gap: 34px;
  margin-bottom: 34px;
}

.trending-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #8d95a1;
  font: 700 10px Orbitron, sans-serif;
  letter-spacing: 0.2em;
}

.trending-heading h2 {
  margin: 0;
  font: 700 clamp(30px, 4vw, 46px)/1.1 Orbitron, sans-serif;
}

.trending-heading > p {
  max-width: 480px;
  color: #929aa7;
  font-size: 14px;
  line-height: 1.65;
}

.trending-heading .store-button {
  min-width: 168px;
  white-space: nowrap;
}

.trending-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 240px);
  gap: 18px;
}

.trend-card {
  position: relative;
  display: block;
  min-width: 0;
  color: #fff;
  border-radius: 22px;
  isolation: isolate;
}

.trend-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 3;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(
    from var(--trend-stroke-angle),
    transparent 0deg,
    transparent 272deg,
    rgba(var(--trend-rgb), 0.10) 292deg,
    rgba(var(--trend-rgb), 0.98) 322deg,
    rgba(var(--trend-rgb), 0.24) 346deg,
    transparent 360deg
  );
  border-radius: 23px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: trend-stroke-travel 7.5s linear infinite;
}

.trend-card:nth-child(2)::before { animation-delay: -1.5s; }
.trend-card:nth-child(3)::before { animation-delay: -3s; }
.trend-card:nth-child(4)::before { animation-delay: -4.5s; }
.trend-card:nth-child(5)::before { animation-delay: -6s; }

.trend-card-surface {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.20);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.trend-card:hover .trend-card-surface,
.trend-card:focus-visible .trend-card-surface {
  border-color: rgba(var(--trend-rgb), 0.54);
  box-shadow: 0 0 32px rgba(var(--trend-rgb), 0.18), 0 25px 55px rgba(0, 0, 0, 0.28);
  transform: translateY(-4px);
}

.trend-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 30px 26px 66px;
  object-fit: contain;
  object-position: center top;
  opacity: 0.78;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.24));
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(.2,.8,.2,1);
}

.trend-card:hover img,
.trend-card:focus-visible img {
  opacity: 1;
  transform: scale(1.06) translateY(-3px);
}

.trend-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 11, 14, 0.98) 0%, rgba(10, 11, 14, 0.67) 34%, transparent 72%);
}

.trend-card-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
}

.trend-card-content small {
  margin-bottom: 5px;
  color: var(--trend-color);
  font: 700 9px Orbitron, sans-serif;
  letter-spacing: 0.15em;
}

.trend-card-content strong {
  font: 700 19px Orbitron, sans-serif;
  line-height: 1.2;
  text-wrap: balance;
}

.trend-card-content > span {
  display: none;
}

.trend-card-content b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: #c8cdd5;
  font-size: 11px;
  transition: color 0.2s ease;
}

.trend-card-content b i {
  color: var(--trend-color);
  transition: transform 0.2s ease;
}

.trend-card:hover .trend-card-content b,
.trend-card:focus-visible .trend-card-content b {
  color: #fff;
}

.trend-card:hover .trend-card-content b i,
.trend-card:focus-visible .trend-card-content b i {
  transform: translateX(3px);
}

.trend-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.trend-featured img {
  padding: 36px 45px 105px;
  object-position: center;
}

.trend-featured .trend-card-shade {
  background: linear-gradient(to top, rgba(10, 11, 14, 0.99) 0%, rgba(10, 11, 14, 0.72) 35%, transparent 70%);
}

.trend-featured .trend-card-content {
  max-width: 590px;
  padding: 32px;
}

.trend-featured .trend-card-content small {
  margin-bottom: 8px;
  font-size: 10px;
}

.trend-featured .trend-card-content strong {
  font-size: clamp(28px, 3.2vw, 40px);
}

.trend-featured .trend-card-content > span {
  display: block;
  max-width: 470px;
  margin-top: 10px;
  color: #b0b6c0;
  font-size: 14px;
  line-height: 1.55;
}

.trend-featured .trend-card-content b {
  margin-top: 17px;
  font-size: 12px;
}

.trend-card-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  padding: 7px 10px;
  align-items: center;
  gap: 7px;
  color: #fff;
  background: rgba(10, 11, 14, 0.72);
  border: 1px solid rgba(var(--trend-rgb), 0.38);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.trend-card-badge i {
  color: var(--trend-color);
}

@media (max-width: 1000px) {
  .trending-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .trending-heading > p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .trending-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 360px repeat(2, 225px);
  }

  .trend-featured {
    grid-column: 1 / -1;
    grid-row: span 1;
  }

  .trend-featured img {
    padding-bottom: 65px;
    object-position: 75% center;
  }

  .trend-featured .trend-card-content {
    max-width: 55%;
  }
}

@media (max-width: 700px) {
  .trending-section {
    width: min(calc(100% - 32px), 1280px);
    padding: 70px 0;
  }

  .trending-heading {
    display: block;
    margin-bottom: 26px;
  }

  .trending-heading > p {
    margin-top: 13px;
  }

  .trending-heading .store-button {
    width: 100%;
    margin-top: 20px;
  }

  .trending-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .trend-card,
  .trend-featured {
    grid-column: auto;
    grid-row: auto;
    min-height: 255px;
  }

  .trend-featured {
    min-height: 390px;
  }

  .trend-featured img {
    padding: 34px 20px 150px;
    object-position: center top;
  }

  .trend-featured .trend-card-content {
    max-width: none;
    padding: 24px;
  }

  .trend-card-content {
    padding: 18px;
  }
}

/* ========================================================================== 
   Mobile responsive and scroll-rendering stability pass — 2026-09-16
   ========================================================================== */
html,
body {
  width: 100%;
  min-width: 0;
  background-color: #202124 !important;
  overscroll-behavior-x: none;
}

html {
  overflow-x: hidden;
}

body {
  min-height: 100svh;
  overflow-x: hidden !important;
}

#main,
main,
footer,
main > section {
  min-width: 0;
  max-width: 100%;
}

#main,
footer {
  background-color: #202124;
}

img,
svg,
canvas,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 78px;
  }

  body {
    min-height: 100svh;
    -webkit-text-size-adjust: 100%;
  }

  /* Keep the fixed header inside narrow screens. Primary links remain in Menu. */
  #siteHeader {
    max-width: 100vw;
  }

  #siteHeader .header-row {
    min-height: 68px;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: 8px !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    gap: 8px;
  }

  #siteHeader .brand {
    flex: 1 1 auto;
    overflow: hidden;
  }

  #siteHeader .brand-logo {
    width: auto;
    height: 44px;
    max-width: 118px;
  }

  #siteHeader .store-actions > a.icon-btn,
  #siteHeader .icon-label {
    display: none !important;
  }

  #siteHeader .store-actions {
    gap: 3px;
  }

  #siteHeader .store-actions .icon-btn {
    width: 40px;
    height: 42px;
    flex: 0 0 40px;
  }

  #siteHeader.scrolled,
  .header-glass {
    background: rgba(32, 33, 36, 0.98) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Stable mobile hero height avoids browser-toolbar resize jumps. */
  .vs-hero {
    height: 100svh;
    min-height: 570px;
    background: #202124;
  }

  .vs-content {
    width: 100%;
    height: 100%;
    max-width: 620px;
    padding: 94px 20px 76px !important;
  }

  .vs-title {
    font-size: clamp(31px, 10vw, 44px) !important;
    line-height: 1.08;
  }

  .vs-text {
    max-width: 37ch;
    margin-right: 0;
    font-size: 15px;
    line-height: 1.55;
  }

  .vs-btn {
    width: min(100%, 280px);
    justify-content: center;
  }

  .vs-bg-video {
    background-color: #202124;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .vs-dots {
    bottom: 14px;
  }

  #vsHero > .slider-pause {
    right: 12px;
    bottom: 12px;
    padding: 6px 9px;
    font-size: 10px;
  }

  /* Showcase and category cards remain fully visible at phone widths. */
  .dc-showcase-section {
    padding-top: 44px !important;
    padding-bottom: 56px !important;
  }

  .dc-showcase-section > .max-w-7xl {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .dc-showcase-layout {
    gap: 16px !important;
    margin-bottom: 52px !important;
  }

  .dc-poster-slider {
    border-radius: 18px !important;
  }

  .dc-poster-arrow {
    width: 40px !important;
    height: 40px !important;
  }

  .dc-poster-arrow.prev {
    left: 10px !important;
  }

  .dc-poster-arrow.next {
    right: 10px !important;
  }

  #dcPosterSlider > .slider-pause {
    right: 10px;
    bottom: 9px;
    max-width: 112px;
    padding: 5px 8px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dc-promo-stack {
    gap: 12px !important;
  }

  .dc-showcase-section .dc-promo-card {
    min-height: 0 !important;
  }

  .dc-showcase-section .dc-promo-card > .relative.flex {
    min-height: 128px;
    padding: 16px !important;
    gap: 13px !important;
  }

  .dc-showcase-section .dc-promo-card > .relative.flex > div:first-of-type {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }

  .dc-showcase-section .dc-promo-card h4 {
    font-size: 17px;
  }

  .dc-showcase-section .dc-promo-card p {
    margin-top: 5px !important;
    font-size: 12px;
    line-height: 1.45 !important;
  }

  .dc-categories-section > div:first-child {
    margin-bottom: 28px !important;
  }

  .dc-categories-section > div:first-child h2 {
    font-size: clamp(29px, 9vw, 40px);
  }

  #dcCategoriesGrid {
    gap: 20px 8px !important;
  }

  .dc-categories-section .dc-orbit-category {
    padding: 8px 2px;
  }

  .dc-categories-section .dc-orbit-category > div:last-child {
    margin-top: 13px !important;
  }

  .dc-categories-section .dc-orbit-category h3 {
    font-size: 15px;
  }

  .dc-showcase-section .mt-16.glass-panel {
    margin-top: 44px !important;
    padding: 18px !important;
    overflow: hidden;
  }

  .dc-showcase-section .mt-16.glass-panel > .grid {
    gap: 18px 12px !important;
  }

  /* Prevent horizontal cards and summaries from widening the page. */
  #builder,
  .trending-section,
  .store-page,
  .shop-catalog {
    min-width: 0;
  }

  #builder .builder-layout,
  #builder .builder-component-stack,
  #builder .component-category,
  #builder .builder-summary-column,
  #builder .builder-summary-card,
  #builder .builder-track {
    min-width: 0;
    max-width: 100%;
  }

  #builder .builder-track {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .trending-section {
    width: calc(100% - 32px);
  }

  .trend-card-surface,
  .trend-card img,
  .trend-card-shade {
    border-radius: 18px;
  }

  /* About and contact heroes no longer crop their copy or buttons. */
  body[data-page="about"] main > section:first-child {
    height: auto !important;
    min-height: 100svh !important;
    padding: 110px 0 130px;
  }

  body[data-page="about"] main > section:first-child h1,
  body[data-page="quote"] main > section:first-child h1 {
    font-size: clamp(37px, 12vw, 54px) !important;
  }

  body[data-page="about"] main > section:first-child p,
  body[data-page="quote"] main > section:first-child p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  body[data-page="about"] main > section:first-child .inline-flex,
  body[data-page="quote"] main > section:first-child .inline-flex {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  body[data-page="about"] main > section:nth-child(2) > .glass-panel {
    margin-right: 16px !important;
    margin-left: 16px !important;
    padding: 20px !important;
  }

  body[data-page="about"] main > section:nth-child(2) .grid {
    gap: 24px 10px !important;
  }

  body[data-page="about"] main > section:nth-child(2) .counter-up {
    font-size: clamp(23px, 7vw, 32px);
  }

  body[data-page="quote"] main > section:first-child {
    height: auto !important;
    min-height: 690px !important;
    padding: 110px 0 120px !important;
  }

  body[data-page="quote"] main > section:first-child .flex.flex-wrap {
    width: 100%;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }

  body[data-page="quote"] main > section:first-child :is(a.rounded-full, button.rounded-full) {
    min-width: 0;
    flex: 1 1 145px;
    justify-content: center;
  }

  #contact-methods {
    margin-top: 0 !important;
    padding-top: 48px !important;
  }

  #quote-section,
  #story,
  body[data-page="about"] main > section,
  body[data-page="quote"] main > section {
    max-width: 100%;
  }

  [class*="-bottom-6"][class*="-left-6"].glass-panel {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: 16px;
  }

  /* Compact shared pages and dialogs without removing any controls. */
  .store-page {
    padding-right: 16px;
    padding-left: 16px;
  }

  .store-dialog:not(#menuDialog) {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px;
  }

  .product-details dl {
    grid-template-columns: minmax(95px, 0.42fr) minmax(0, 1fr);
  }

  .dc-chatbot {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  .dc-chatbot-panel {
    max-height: calc(100dvh - 100px);
  }

  footer .max-w-7xl {
    min-width: 0;
  }
}

@media (max-width: 420px) {
  #siteHeader .brand-logo {
    height: 40px;
    max-width: 102px;
  }

  #siteHeader .store-actions .icon-btn {
    width: 36px;
    flex-basis: 36px;
  }

  .vs-content {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .dc-orbit-circle {
    width: 108px !important;
    height: 108px !important;
  }

  .builder-process span {
    padding-right: 8px;
    font-size: 9px;
  }

  .builder-summary-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-toolbar-actions {
    gap: 5px;
  }

  .shop-toolbar-actions .store-button {
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: 12px;
  }

  .cart-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .cart-row img {
    width: 44px;
    height: 44px;
  }
}

/* Mobile GPU stability: keep costly blur effects off, but preserve the homepage
   travelling border strokes on Custom PC Builder and Trending cards. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .glass-panel,
  .dc-promo-card,
  .shop-confidence-panel,
  .product-card-badges span,
  .trend-card-badge,
  .store-dialog,
  .store-dialog::backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #builder .component-category::before,
  #builder .builder-summary-card::before,
  #builder .component-card.is-selected::before {
    inset: -2px;
    padding: 1px;
    border: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: builder-stroke-travel 6s linear infinite !important;
  }

  .trend-card::before {
    inset: -2px;
    padding: 1px;
    border: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: trend-stroke-travel 6.5s linear infinite !important;
  }

  .component-card,
  .dc-promo-card,
  .dc-orbit-circle,
  .trend-card-surface,
  .trend-card img,
  .parallax-bg,
  .catFloatWrap {
    will-change: auto !important;
    transform-style: flat !important;
  }

  .component-card:hover,
  .dc-promo-card:hover,
  .trend-card:hover .trend-card-surface,
  .trend-card:focus-visible .trend-card-surface {
    transform: none !important;
  }

  .animate-spin-slow,
  footer .animate-pulse {
    animation: none !important;
  }
}

/* Mobile contrast guard: prevent transparent text and sticky hover colours. */
@media (max-width: 767px) {
  main :is(h1, h2, h3, h4, h5, h6),
  footer :is(h3, h4, h5),
  .dialog-heading h2 {
    color: #ffffff !important;
  }

  main :is(h1, h2, h3, h4, h5, h6) .text-transparent,
  footer :is(h1, h2, h3, h4, h5, h6) .text-transparent,
  .vs-title .text-transparent,
  .shop-hero-copy .text-transparent {
    color: #ffffff !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* White primary actions stay white rather than inheriting a dark utility. */
  main :is(a, button)[class~="text-black"][class*="bg-brand-accent"],
  main :is(a, button)[class~="text-black"][class*="bg-gradient-to-r"],
  footer :is(a, button)[class~="text-black"],
  #builderAddToCartBtn,
  #submit-btn {
    color: #17181a !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
    -webkit-text-fill-color: #17181a !important;
  }

  /* Dark, transparent and outlined controls always carry white foregrounds. */
  main :is(a, button)[class*="bg-black/"],
  main :is(a, button)[class*="bg-white/"],
  main :is(a, button)[class*="bg-brand-accent/"] ,
  main :is(a, button)[class*="border-white/"]:not([class~="text-black"]),
  .store-button.secondary,
  .builder-nav,
  .dc-poster-arrow,
  .detail-tabs button:not([aria-selected="true"]),
  .quantity-control button,
  .support-chips button {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .builder-nav i,
  .dc-poster-arrow i,
  .detail-tabs button i,
  .quantity-control button i,
  .support-chips button i {
    color: currentColor !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  /* A swipe must not leave a black-text hover state on a dark button. */
  main :is(a, button)[class*="bg-white/"]:hover,
  main :is(a, button)[class*="bg-black/"]:hover,
  main :is(a, button)[class*="bg-brand-accent/"]:hover,
  .store-button.secondary:hover,
  .builder-nav:hover,
  .dc-poster-arrow:hover,
  .support-chips button:hover,
  .quantity-control button:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Footer polish: organized mobile groups and a clearly active store status. */
.footer-store-dot {
  flex: 0 0 auto;
  filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.95));
}

.footer-store-core {
  background: #22c55e !important;
  box-shadow: 0 0 6px #22c55e, 0 0 13px rgba(34, 197, 94, 0.8);
}

.footer-store-pulse {
  background: #4ade80 !important;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.75);
}

@media (max-width: 767px) {
  .site-footer .footer-newsletter .max-w-7xl {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .site-footer .footer-newsletter .flex.flex-col {
    gap: 22px;
  }

  .site-footer .footer-newsletter h3 {
    font-size: clamp(22px, 7vw, 29px);
    line-height: 1.15;
  }

  .site-footer .footer-newsletter form > .flex {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .site-footer .footer-newsletter button {
    width: 100%;
  }

  .site-footer .footer-main {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .site-footer .footer-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .site-footer .footer-brand-column,
  .site-footer .footer-connect-column {
    grid-column: 1 / -1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    padding: 18px;
  }

  .site-footer .footer-brand-column {
    display: grid;
    gap: 16px;
  }

  .site-footer .footer-brand-column > p {
    margin: 0;
    max-width: none;
  }

  .site-footer .footer-contact-list {
    display: grid;
    gap: 8px;
  }

  .site-footer .footer-contact-list > * {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.18);
    padding: 10px;
  }

  .site-footer .footer-contact-list > * > div:last-child {
    min-width: 0;
  }

  .site-footer .footer-contact-list .text-sm {
    overflow-wrap: anywhere;
  }

  .site-footer .footer-link-column {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    padding: 16px 14px;
  }

  .site-footer .footer-link-column h4,
  .site-footer .footer-connect-column h4 {
    margin-bottom: 14px;
  }

  .site-footer .footer-link-column ul {
    display: grid;
    gap: 10px;
  }

  .site-footer .footer-link-column ul > li + li {
    margin-top: 0;
  }

  .site-footer .footer-link-column a {
    line-height: 1.25;
  }

  .site-footer .footer-social-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 22px;
  }

  .site-footer .footer-social-list > span {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    max-height: 48px;
  }

  .site-footer .footer-payment-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .site-footer .footer-payment-list > div {
    justify-content: center;
    min-width: 0;
    padding: 9px 8px;
  }

  .site-footer .footer-bottom .max-w-7xl {
    padding-top: 22px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }

  .site-footer .footer-bottom-row {
    align-items: stretch;
    gap: 16px;
  }

  .site-footer .footer-legal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 8px;
    text-align: center;
  }

  .site-footer .footer-legal span:first-child {
    grid-column: 1 / -1;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-footer .footer-store-status {
    align-self: center;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 370px) {
  .site-footer .footer-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer .footer-brand-column,
  .site-footer .footer-connect-column {
    grid-column: auto;
  }

  .site-footer .footer-legal {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer .footer-legal span:first-child {
    grid-column: auto;
  }
}

/* Quote page mobile cleanup: keep the FAQ, trust row and form readable as one-column content. */
@media (max-width: 767px) {
  #quote-section {
    padding-top: 64px !important;
    padding-bottom: 72px !important;
  }

  #quote-section > .relative.z-10 {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  #quote-section > .relative.z-10 > .grid {
    gap: 38px !important;
  }

  .quote-info-column {
    min-width: 0;
  }

  .quote-info-column > div:first-child h2 {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }

  .quote-info-column > div:first-child p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .quote-benefits-panel {
    padding: 20px !important;
  }

  /* Give Common Questions a clear break from the Request a Quote card. */
  .quote-faq-list {
    margin-top: 40px !important;
    padding-top: 4px;
  }

  .quote-faq-list > h3 {
    margin: 0 0 18px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .quote-faq-list > .glass-panel {
    margin-top: 12px !important;
  }

  .quote-faq-list > .glass-panel:first-of-type {
    margin-top: 0 !important;
  }

  .quote-faq-list button.w-full.px-5.py-4 {
    min-height: 60px;
    padding: 15px 16px !important;
    gap: 12px;
  }

  .quote-faq-list button > span {
    font-size: 14px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
  }

  .quote-faq-list button + div {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .quote-trust-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    margin-top: 28px !important;
    padding-top: 0 !important;
  }

  .quote-trust-row > div {
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px !important;
    padding: 10px 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
  }

  .quote-trust-row > div > span {
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  /* Build Your Quote: remove desktop assumptions that crowd narrow screens. */
  .quote-form-panel {
    width: 100%;
    min-width: 0;
    padding: 20px 16px 22px !important;
    border-radius: 22px !important;
    overflow: hidden;
  }

  .quote-form-header {
    min-width: 0;
    gap: 12px !important;
    margin-bottom: 24px !important;
    padding-bottom: 18px !important;
  }

  .quote-form-header > div:first-child {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px;
    border-radius: 14px !important;
    font-size: 20px !important;
  }

  .quote-form-header > div:last-child {
    min-width: 0;
  }

  .quote-form-header h3 {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  .quote-form-header p {
    margin-top: 3px;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  #quoteForm,
  #quoteForm > div,
  #quoteForm .grid,
  #quoteForm .relative,
  #quoteForm .relative.group {
    min-width: 0;
    max-width: 100%;
  }

  #quoteForm > .space-y-4 {
    margin-top: 0;
  }

  #quoteForm > .space-y-4 + .space-y-4 {
    margin-top: 28px !important;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  #quoteForm > .space-y-4 > h4 {
    gap: 10px !important;
    margin-bottom: 16px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.08em !important;
  }

  #quoteForm .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #quoteForm input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  #quoteForm select,
  #quoteForm textarea {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  #quoteForm input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  #quoteForm select {
    min-height: 54px;
  }

  #quoteForm input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
    padding-right: 44px !important;
  }

  #quoteForm select {
    padding-right: 44px !important;
  }

  #quoteForm #quote_type {
    padding-left: 48px !important;
    padding-right: 44px !important;
  }

  #quoteForm .relative > i.absolute:not(.bottom-3) {
    top: 27px !important;
  }

  #quoteForm .relative.group > label.absolute {
    max-width: calc(100% - 62px);
    overflow: hidden;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quote-use-cases > .flex {
    gap: 8px !important;
  }

  .quote-use-cases label.cursor-pointer {
    min-width: 0;
    max-width: 100%;
  }

  .quote-use-cases label.cursor-pointer > span {
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #quoteForm textarea {
    min-height: 136px;
    padding-bottom: 34px !important;
    line-height: 1.5;
  }

  #quoteForm .quote-file-upload {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    min-height: 82px;
    gap: 10px !important;
    padding: 14px !important;
  }

  #quoteForm .quote-file-upload > div:nth-child(2) {
    min-width: 0;
  }

  #quoteForm .quote-file-upload .text-sm,
  #quoteForm .quote-file-upload .text-xs {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #quoteForm #submit-btn {
    min-height: 54px;
    margin-top: 4px;
    font-size: 16px !important;
  }

  #quoteForm > p.text-xs {
    padding: 0 4px;
    line-height: 1.55;
  }
}

@media (max-width: 390px) {
  .quote-trust-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-trust-row > div {
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 12px;
    text-align: left;
  }

  .quote-form-panel {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
}

/* Quote mobile spacing follow-up: prevent floating-label collisions and open up key sections. */
@media (max-width: 767px) {
  /* Keep floating labels permanently above the field border on mobile. */
  #quoteForm .relative.group {
    padding-top: 10px;
  }

  #quoteForm .relative.group > label.absolute {
    top: 10px !important;
    left: 12px !important;
    z-index: 2;
    max-width: calc(100% - 64px);
    padding: 0 7px !important;
    background: #0a0a0f !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    transform: translateY(-50%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #quoteForm .relative.group > i.absolute:not(.bottom-3) {
    top: 37px !important;
  }

  #quoteForm #budget ~ span.absolute {
    top: calc(50% + 5px) !important;
  }

  /* Give section headings breathing room before their first fields. */
  #quoteForm > .space-y-4 > h4 {
    margin-bottom: 20px !important;
  }

  #quoteForm > .space-y-4 > h4 + .grid {
    margin-top: 0 !important;
  }

  /* More room inside the Why Request a Quote card. */
  .quote-benefits-panel {
    padding: 26px 20px !important;
  }

  .quote-benefits-panel > h3 {
    margin-bottom: 22px !important;
  }

  /* Separate Primary Use Case from the budget/quote-type row above. */
  .quote-use-cases {
    margin-top: 28px !important;
  }

  .quote-use-cases > label:first-child {
    display: block;
    margin-bottom: 12px !important;
    line-height: 1.4;
  }

  /* Separate the privacy note from the quote button. */
  #quoteForm > p.text-xs {
    margin-top: 34px !important;
  }

  /* Give showroom address and opening-hours blocks clear separation. */
  #showroom .space-y-6.mb-8 {
    display: grid;
    gap: 30px !important;
  }

  #showroom .space-y-6.mb-8 > * {
    margin-top: 0 !important;
  }

  #showroom .space-y-6.mb-8 h4 {
    margin-bottom: 7px !important;
    line-height: 1.3;
  }

  #showroom .space-y-6.mb-8 p {
    line-height: 1.6;
  }
}

/* ==========================================================================
   Custom PC Builder — keep product artwork fully visible
   ========================================================================== */
#builder .component-card > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 176px !important;
  min-height: 176px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

#builder .component-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

#builder .component-card:hover img,
#builder .component-card.is-selected img {
  transform: none !important;
}

@media (max-width: 767px) {
  #builder .component-card > div:first-child {
    height: 158px !important;
    min-height: 158px !important;
    padding: 10px !important;
  }
}

/* ==========================================================================
   Custom PC Builder — bright Add to Cart CTA, matching the quote CTA
   ========================================================================== */
#builderAddToCartBtn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(90deg, #00f0ff 0%, #7000ff 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 12px 30px rgba(0, 240, 255, 0.28),
    0 0 24px rgba(112, 0, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  font-weight: 900 !important;
  letter-spacing: 0.015em;
}

#builderAddToCartBtn > :is(i, svg, span) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#builderAddToCartBtn:not(:disabled):hover,
#builderAddToCartBtn:not(:disabled):focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(90deg, #62f7ff 0%, #9a5cff 100%) !important;
  border-color: #ffffff !important;
  box-shadow:
    0 14px 36px rgba(0, 240, 255, 0.38),
    0 0 30px rgba(112, 0, 255, 0.3) !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#builderAddToCartBtn:disabled {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(90deg, #00f0ff 0%, #7000ff 100%) !important;
  border-color: rgba(255, 255, 255, 0.58) !important;
  opacity: 0.58 !important;
}

#builderAddToCartBtn > i {
  font-size: 1.05em;
}

/* ========================================================================== 
   Custom PC Builder — snow-white Add to Cart label + icon
   ========================================================================== */
#builderAddToCartBtn,
#builderAddToCartBtn * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 1px #ffffff, 0 0 7px rgba(255, 255, 255, 0.34) !important;
}

#builderAddToCartBtn i,
#builderAddToCartBtn i::before,
#builderAddToCartBtn svg,
#builderAddToCartBtn svg *,
#builderAddToCartBtn path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Do not fade the white label/icon when the builder button is disabled. */
#builderAddToCartBtn:disabled {
  opacity: 1 !important;
}

/* Header logo sizing and brand offset tweak */
#siteHeader .brand {
  gap: 16px;
  padding-left: 12px;
}

#siteHeader .brand-logo {
  height: 46px;
  width: auto;
  max-width: none;
}

@media (max-width: 1000px) {
  #siteHeader .brand {
    gap: 14px;
    padding-left: 10px;
  }

  #siteHeader .brand-logo {
    height: 42px;
  }
}

@media (max-width: 700px) {
  #siteHeader .brand {
    gap: 10px;
    padding-left: 6px;
  }

  #siteHeader .brand-logo {
    height: 40px;
  }
}


/* Desktop-only brand alignment with the rotating hero headline. */
@media (min-width: 1001px) {
  #siteHeader .brand {
    padding-left: 46px;
    gap: 16px;
  }
}

/* Product detail mobile breathing room — 2026-09-24 */
@media (max-width: 767px) {
  body[data-page="product"] main > section {
    padding-top: 108px !important;
    padding-bottom: 56px !important;
  }

  body[data-page="product"] main > section > .max-w-7xl {
    padding-inline: 18px !important;
  }

  body[data-page="product"] main nav[aria-label="Breadcrumb"] {
    margin-bottom: 24px !important;
    gap: 7px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
  }

  body[data-page="product"] main > section > .max-w-7xl > .grid {
    gap: 32px !important;
  }

  body[data-page="product"] #main-gallery {
    border-radius: 20px !important;
  }

  body[data-page="product"] #main-gallery img {
    padding: 22px !important;
  }

  body[data-page="product"] #main-gallery > span {
    right: 12px !important;
    bottom: 12px !important;
    padding: 7px 10px !important;
    font-size: 0.75rem !important;
  }

  body[data-page="product"] main .space-y-6 {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
  }

  body[data-page="product"] main .space-y-6 > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body[data-page="product"] main .space-y-6 > div:first-child {
    margin-bottom: 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.12em !important;
  }

  body[data-page="product"] main h1 {
    margin-bottom: 16px !important;
    font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
    line-height: 1.16 !important;
    overflow-wrap: anywhere;
  }

  body[data-page="product"] main h1 + p {
    margin-bottom: 22px !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  body[data-page="product"] main h1 + p + div {
    margin-bottom: 8px !important;
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }

  body[data-page="product"] main h1 + p + div + p {
    margin-bottom: 7px !important;
    color: #9ca3af;
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
  }

  body[data-page="product"] main h1 + p + div + p + p {
    margin-bottom: 24px !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    line-height: 1.5 !important;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    width: 100%;
    margin-bottom: 12px !important;
    align-items: stretch !important;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > label {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    flex-basis: auto !important;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 600;
  }

  body[data-page="product"] #productQty {
    width: 100% !important;
    min-height: 52px !important;
    margin-top: 0 !important;
    font-size: 1rem;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > .store-button {
    width: 100% !important;
    min-height: 52px !important;
    padding: 13px 14px !important;
    line-height: 1.25 !important;
    white-space: normal;
  }

  body[data-page="product"] main .space-y-6 > a.store-button.secondary {
    width: 100%;
    min-height: 52px;
    margin-bottom: 24px !important;
    padding: 13px 18px !important;
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100%;
    margin-bottom: 20px !important;
    padding-top: 18px !important;
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 > span {
    min-height: 44px;
    padding: 10px 0;
    gap: 11px !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    align-items: center !important;
    font-size: 0.92rem;
    line-height: 1.4 !important;
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 > span:last-child {
    border-bottom: 0;
  }

  body[data-page="product"] main .space-y-6 > a.text-brand-accent {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 9px;
    padding: 4px 0;
    line-height: 1.5;
  }

  body[data-page="product"] .product-details {
    margin-top: 38px !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  body[data-page="product"] .detail-tabs {
    gap: 8px !important;
    padding-bottom: 14px !important;
  }

  body[data-page="product"] .detail-tabs button {
    min-height: 48px !important;
    padding: 11px 12px !important;
    font-size: 0.9rem;
    line-height: 1.3 !important;
  }

  body[data-page="product"] .product-details [role="tabpanel"] {
    padding-top: 20px !important;
    line-height: 1.7;
  }

  body[data-page="product"] .product-details dl {
    gap: 12px 14px !important;
  }

  body[data-page="product"] .product-details :is(dt, dd) {
    padding-block: 4px;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }

  body[data-page="product"] .product-details + section {
    margin-top: 48px !important;
  }

  body[data-page="product"] .product-details + section > h2,
  body[data-page="product"] #recentProducts > h2 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
  }

  body[data-page="product"] #recentProducts {
    margin-top: 44px !important;
  }
}

@media (max-width: 480px) {
  body[data-page="product"] main > section > .max-w-7xl {
    padding-inline: 14px !important;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap {
    grid-template-columns: 1fr !important;
  }

  body[data-page="product"] .product-details {
    padding: 15px !important;
  }

  body[data-page="product"] .product-details dl {
    grid-template-columns: minmax(88px, .42fr) minmax(0, 1fr) !important;
  }
}


/* Product detail mobile extra spacing — 2026-09-24 v3 */
@media (max-width: 767px) {
  body[data-page="product"] main > section {
    padding-bottom: 72px !important;
  }

  body[data-page="product"] main > section > .max-w-7xl > .grid {
    gap: 44px !important;
  }

  body[data-page="product"] #main-gallery {
    margin-bottom: 6px !important;
  }

  body[data-page="product"] main .space-y-6 > div:first-child {
    margin-bottom: 18px !important;
  }

  body[data-page="product"] main h1 {
    margin-bottom: 24px !important;
  }

  body[data-page="product"] main h1 + p {
    margin-bottom: 32px !important;
  }

  body[data-page="product"] main h1 + p + div {
    margin-bottom: 14px !important;
  }

  body[data-page="product"] main h1 + p + div + p {
    margin-bottom: 12px !important;
  }

  body[data-page="product"] main h1 + p + div + p + p {
    margin-bottom: 34px !important;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap {
    gap: 16px !important;
    margin-bottom: 20px !important;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > label {
    gap: 10px !important;
    margin-bottom: 2px !important;
  }

  body[data-page="product"] #productQty,
  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > .store-button,
  body[data-page="product"] main .space-y-6 > a.store-button.secondary {
    min-height: 58px !important;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap > .store-button {
    padding: 16px 16px !important;
  }

  body[data-page="product"] main .space-y-6 > a.store-button.secondary {
    margin-top: 4px !important;
    margin-bottom: 36px !important;
    padding: 16px 20px !important;
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 {
    margin-top: 4px !important;
    margin-bottom: 32px !important;
    padding-top: 24px !important;
  }

  body[data-page="product"] main .grid.grid-cols-3.gap-3 > span {
    min-height: 56px !important;
    padding: 14px 0 !important;
    gap: 14px !important;
  }

  body[data-page="product"] main .space-y-6 > a.text-brand-accent {
    margin-top: 2px !important;
    padding: 10px 0 !important;
  }

  body[data-page="product"] .product-details {
    margin-top: 54px !important;
    padding: 24px !important;
  }

  body[data-page="product"] .detail-tabs {
    gap: 12px !important;
    padding-bottom: 20px !important;
    margin-bottom: 4px !important;
  }

  body[data-page="product"] .detail-tabs button {
    min-height: 52px !important;
    padding: 13px 15px !important;
  }

  body[data-page="product"] .product-details [role="tabpanel"] {
    padding-top: 28px !important;
  }

  body[data-page="product"] .product-details dl {
    row-gap: 18px !important;
    column-gap: 16px !important;
  }

  body[data-page="product"] .product-details :is(dt, dd) {
    padding-block: 7px !important;
  }

  body[data-page="product"] .product-details + section {
    margin-top: 64px !important;
  }

  body[data-page="product"] .product-details + section > h2,
  body[data-page="product"] #recentProducts > h2 {
    margin-bottom: 28px !important;
  }

  body[data-page="product"] #recentProducts {
    margin-top: 60px !important;
  }

  body[data-page="product"] #recentProducts .store-product-grid,
  body[data-page="product"] .product-details + section .store-product-grid {
    gap: 26px !important;
  }
}

@media (max-width: 480px) {
  body[data-page="product"] main > section > .max-w-7xl > .grid {
    gap: 38px !important;
  }

  body[data-page="product"] main h1 {
    margin-bottom: 22px !important;
  }

  body[data-page="product"] main h1 + p {
    margin-bottom: 30px !important;
  }

  body[data-page="product"] main .space-y-6 > .flex.gap-3.flex-wrap {
    gap: 18px !important;
  }

  body[data-page="product"] .product-details {
    margin-top: 50px !important;
    padding: 20px !important;
  }

  body[data-page="product"] .detail-tabs {
    gap: 10px !important;
  }
}

/* Product detail redesign — desktop + mobile — 2026-09-24 */
body[data-page="product"] .product-page-shell {
  padding: 136px 0 88px;
}
body[data-page="product"] .product-page-glow {
  background:
    radial-gradient(circle at 12% 14%, rgba(52, 152, 219, .16), transparent 30%),
    radial-gradient(circle at 88% 28%, rgba(25, 118, 210, .12), transparent 28%);
}
body[data-page="product"] .product-page-container {
  width: min(100%, 1280px);
}
body[data-page="product"] .product-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
  color: rgba(255,255,255,.58);
  font-size: .92rem;
  line-height: 1.5;
}
body[data-page="product"] .product-breadcrumb a { color: rgba(255,255,255,.75); }
body[data-page="product"] .product-breadcrumb a:hover { color: var(--brand-accent, #56b7ff); }
body[data-page="product"] .product-breadcrumb strong { color: rgba(255,255,255,.9); font-weight: 600; }
body[data-page="product"] .product-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
body[data-page="product"] .product-gallery-card,
body[data-page="product"] .product-purchase-card {
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  border-radius: 28px;
}
body[data-page="product"] .product-gallery-card { padding: 24px; }
body[data-page="product"] .product-main-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.075), rgba(255,255,255,.018) 65%);
  cursor: zoom-in;
}
body[data-page="product"] .product-main-image img {
  width: 100%; height: 100%; object-fit: contain;
  padding: clamp(28px, 5vw, 58px);
  transition: transform .45s ease;
}
body[data-page="product"] .product-main-image:hover img { transform: scale(1.035); }
body[data-page="product"] .product-zoom-hint {
  position: absolute;
  right: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(5,8,12,.72);
  backdrop-filter: blur(10px);
  font-size: .82rem;
}
body[data-page="product"] .product-gallery-note {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 20px 10px 2px;
  color: rgba(255,255,255,.64);
  font-size: .9rem;
}
body[data-page="product"] .product-gallery-note span { display: inline-flex; align-items: center; gap: 8px; }
body[data-page="product"] .product-purchase-card { padding: clamp(28px, 3.4vw, 46px); }
body[data-page="product"] .product-meta-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-bottom: 18px;
  color: var(--brand-accent, #56b7ff);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 700;
}
body[data-page="product"] .product-condition-badge {
  display: inline-flex; align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(86,183,255,.3);
  border-radius: 999px;
  background: rgba(86,183,255,.1);
}
body[data-page="product"] .product-purchase-card h1 {
  margin: 0;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: clamp(2.15rem, 4vw, 4.35rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  max-width: 13ch;
}
body[data-page="product"] .product-summary {
  margin: 22px 0 0;
  color: rgba(255,255,255,.66);
  font-size: 1.03rem;
  line-height: 1.78;
  max-width: 62ch;
}
body[data-page="product"] .product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-top: 34px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
body[data-page="product"] .product-price-row > div { display: grid; gap: 6px; }
body[data-page="product"] .product-price-label { color: rgba(255,255,255,.52); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
body[data-page="product"] .product-price { font-size: clamp(2rem, 3vw, 3rem); line-height: 1; }
body[data-page="product"] .product-price-row small { color: rgba(255,255,255,.45); }
body[data-page="product"] .product-stock-badge {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
}
body[data-page="product"] .product-stock-badge.is-available { color: #7ce7b3; background: rgba(56,189,132,.11); border: 1px solid rgba(56,189,132,.2); }
body[data-page="product"] .product-stock-badge.is-unavailable { color: #ffaaa9; background: rgba(255,98,95,.1); border: 1px solid rgba(255,98,95,.2); }
body[data-page="product"] .product-buy-controls {
  display: grid;
  grid-template-columns: 105px minmax(180px, 1fr) minmax(150px, .78fr);
  gap: 12px;
  align-items: end;
  margin-top: 28px;
}
body[data-page="product"] .product-qty-field { display: grid; gap: 8px; color: rgba(255,255,255,.7); font-size: .86rem; font-weight: 600; }
body[data-page="product"] .product-qty-field .store-input { width: 100% !important; min-height: 54px; text-align: center; }
body[data-page="product"] .product-buy-controls .store-button,
body[data-page="product"] .product-quote-action { min-height: 54px; justify-content: center; }
body[data-page="product"] .product-quote-action { width: 100%; margin-top: 12px; }
body[data-page="product"] .product-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.09);
}
body[data-page="product"] .product-benefit-grid > div {
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 0;
}
body[data-page="product"] .product-benefit-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 10px;
  background: rgba(86,183,255,.1);
  color: var(--brand-accent, #56b7ff);
}
body[data-page="product"] .product-benefit-grid strong,
body[data-page="product"] .product-benefit-grid small { display: block; }
body[data-page="product"] .product-benefit-grid strong { font-size: .85rem; line-height: 1.25; }
body[data-page="product"] .product-benefit-grid small { margin-top: 4px; color: rgba(255,255,255,.48); font-size: .72rem; line-height: 1.35; }
body[data-page="product"] .product-whatsapp-link {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 24px;
  color: var(--brand-accent, #56b7ff);
  font-weight: 700;
}
body[data-page="product"] .product-details {
  margin-top: 70px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 26px !important;
}
body[data-page="product"] .detail-tabs {
  display: flex !important;
  gap: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.09);
  overflow-x: auto;
}
body[data-page="product"] .detail-tabs button {
  flex: 1 0 auto;
  min-height: 64px !important;
  padding: 18px 24px !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}
body[data-page="product"] .detail-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--brand-accent, #56b7ff) !important; background: rgba(255,255,255,.035); }
body[data-page="product"] .product-tab-panel {
  padding: clamp(28px, 4vw, 48px) !important;
  line-height: 1.8 !important;
}
body[data-page="product"] .product-tab-panel h2 { margin: 0 0 16px; font-size: 1.45rem; }
body[data-page="product"] .product-tab-panel p { margin: 0; color: rgba(255,255,255,.67); max-width: 78ch; }
body[data-page="product"] .product-spec-list {
  display: grid;
  grid-template-columns: minmax(130px, .34fr) minmax(0, 1fr);
  gap: 0 !important;
  margin: 0;
}
body[data-page="product"] .product-spec-list dt,
body[data-page="product"] .product-spec-list dd {
  margin: 0;
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
body[data-page="product"] .product-spec-list dt { color: rgba(255,255,255,.48); font-weight: 600; }
body[data-page="product"] .product-spec-list dd { color: rgba(255,255,255,.9); }
body[data-page="product"] .product-related-section,
body[data-page="product"] .product-recent-section { margin-top: 78px !important; }
body[data-page="product"] .product-section-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  margin-bottom: 26px;
}
body[data-page="product"] .product-section-heading span { display: block; margin-bottom: 6px; color: var(--brand-accent, #56b7ff); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 700; }
body[data-page="product"] .product-section-heading h2 { margin: 0 !important; font-family: var(--font-display, 'Orbitron', sans-serif); font-size: clamp(1.65rem, 2.5vw, 2.45rem) !important; }
body[data-page="product"] .product-section-heading > a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.7); font-weight: 600; }

@media (max-width: 1023px) {
  body[data-page="product"] .product-page-shell { padding-top: 116px; }
  body[data-page="product"] .product-hero-layout { grid-template-columns: 1fr; gap: 32px; }
  body[data-page="product"] .product-gallery-card { max-width: 720px; width: 100%; margin: 0 auto; }
  body[data-page="product"] .product-purchase-card h1 { max-width: 18ch; }
}

@media (max-width: 767px) {
  body[data-page="product"] .product-page-shell { padding: 104px 0 64px !important; }
  body[data-page="product"] .product-page-container { padding-inline: 16px !important; }
  body[data-page="product"] .product-breadcrumb { gap: 7px; margin-bottom: 24px; font-size: .8rem; }
  body[data-page="product"] .product-breadcrumb strong { width: 100%; margin-top: 2px; }
  body[data-page="product"] .product-hero-layout { gap: 26px !important; }
  body[data-page="product"] .product-gallery-card { padding: 14px; border-radius: 22px; }
  body[data-page="product"] .product-main-image { border-radius: 17px; }
  body[data-page="product"] .product-main-image img { padding: 24px; }
  body[data-page="product"] .product-zoom-hint { right: 12px; bottom: 12px; padding: 8px 10px; font-size: .76rem; }
  body[data-page="product"] .product-gallery-note { gap: 10px 18px; padding-top: 16px; font-size: .78rem; }
  body[data-page="product"] .product-purchase-card { padding: 24px 20px; border-radius: 22px; }
  body[data-page="product"] .product-meta-line { margin-bottom: 16px !important; }
  body[data-page="product"] .product-purchase-card h1 { margin: 0 !important; font-size: clamp(2rem, 10vw, 3rem) !important; line-height: 1.08 !important; max-width: none; }
  body[data-page="product"] .product-summary { margin-top: 18px !important; margin-bottom: 0 !important; font-size: .98rem; line-height: 1.7; }
  body[data-page="product"] .product-price-row { align-items: flex-start; margin-top: 26px; padding: 24px 0; }
  body[data-page="product"] .product-price { font-size: 2.25rem; }
  body[data-page="product"] .product-buy-controls { grid-template-columns: 1fr; gap: 12px !important; margin-top: 24px !important; }
  body[data-page="product"] .product-qty-field { gap: 8px !important; margin: 0 !important; }
  body[data-page="product"] .product-qty-field .store-input,
  body[data-page="product"] .product-buy-controls .store-button,
  body[data-page="product"] .product-quote-action { min-height: 56px !important; }
  body[data-page="product"] .product-quote-action { margin: 12px 0 0 !important; }
  body[data-page="product"] .product-benefit-grid { grid-template-columns: 1fr; gap: 16px; margin: 26px 0 0 !important; padding-top: 24px !important; }
  body[data-page="product"] .product-benefit-grid > div { min-height: auto !important; padding: 0 !important; gap: 12px !important; }
  body[data-page="product"] .product-benefit-grid strong { font-size: .92rem; }
  body[data-page="product"] .product-benefit-grid small { font-size: .78rem; }
  body[data-page="product"] .product-whatsapp-link { margin-top: 24px !important; padding: 0 !important; line-height: 1.45; }
  body[data-page="product"] .product-details { margin-top: 42px !important; border-radius: 22px !important; }
  body[data-page="product"] .detail-tabs { margin: 0 !important; padding: 0 !important; gap: 0 !important; }
  body[data-page="product"] .detail-tabs button { min-height: 58px !important; padding: 15px 17px !important; font-size: .86rem; }
  body[data-page="product"] .product-tab-panel { padding: 26px 20px !important; }
  body[data-page="product"] .product-tab-panel h2 { font-size: 1.25rem; }
  body[data-page="product"] .product-spec-list { grid-template-columns: 1fr; }
  body[data-page="product"] .product-spec-list dt { padding: 14px 0 3px !important; border-bottom: 0; }
  body[data-page="product"] .product-spec-list dd { padding: 0 0 14px !important; }
  body[data-page="product"] .product-related-section,
  body[data-page="product"] .product-recent-section { margin-top: 52px !important; }
  body[data-page="product"] .product-section-heading { align-items: flex-start; margin-bottom: 22px; }
  body[data-page="product"] .product-section-heading > a { display: none; }
  body[data-page="product"] .product-section-heading h2 { font-size: 1.65rem !important; }
  body[data-page="product"] .product-related-section .store-product-grid,
  body[data-page="product"] .product-recent-section .store-product-grid { gap: 22px !important; }
}

@media (max-width: 420px) {
  body[data-page="product"] .product-page-container { padding-inline: 13px !important; }
  body[data-page="product"] .product-purchase-card { padding: 22px 17px; }
  body[data-page="product"] .product-price-row { flex-direction: column; gap: 16px; }
  body[data-page="product"] .product-stock-badge { align-self: flex-start; }
  body[data-page="product"] .product-gallery-note { justify-content: flex-start; }
}

/* Product cards: contact-price products use an inline CTA, not the hover Quick Add overlay. */
body[data-page="shop"] .product-card-price-button {
  width: 100%;
  min-height: 44px;
  margin: -7px 0 17px;
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #17181a !important;
  justify-content: center;
  text-align: center;
}

body[data-page="shop"] .product-card-price-button:hover,
body[data-page="shop"] .product-card-price-button:focus-visible {
  background: #e7e7e8 !important;
  border-color: #e7e7e8 !important;
  color: #17181a !important;
}

@media (max-width: 700px) {
  body[data-page="shop"] .product-card-price-button {
    min-height: 46px;
    margin-top: -5px;
  }
}

/* ========================================================================== 
   PC builder — desktop column containment fix
   Keeps the part carousels and Build Summary in separate grid columns.
   Mobile/tablet layout is intentionally unchanged.
   ========================================================================== */
@media (min-width: 1024px) {
  #builder .builder-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) !important;
    align-items: start !important;
    gap: 30px !important;
  }

  #builder .builder-component-stack,
  #builder .builder-summary-column {
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #builder .builder-component-stack {
    overflow: hidden;
  }

  #builder .component-category {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #builder .builder-track {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
  }

  #builder .builder-summary-column {
    align-self: start;
  }

  #builder .builder-summary-card {
    position: relative !important;
    top: auto !important;
    width: 100%;
    height: auto;
    min-width: 0;
    max-width: 360px;
    margin-left: auto;
  }
}


/* SEO landing pages */
.seo-landing{padding-top:8.5rem;padding-bottom:5rem}
.seo-landing .product-breadcrumb{margin-bottom:1.25rem}
.seo-landing-hero{padding:clamp(1.5rem,4vw,3.5rem);border-radius:1.5rem;margin-bottom:1.5rem;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}
.seo-kicker{display:inline-block;color:var(--color-brand-accent,#35e6ff);font-size:.78rem;font-weight:800;letter-spacing:.18em;margin-bottom:.8rem}
.seo-landing-hero h1{font-family:Orbitron,sans-serif;font-size:clamp(2rem,5vw,4rem);line-height:1.06;margin:0 0 1rem;max-width:950px}
.seo-landing-hero p{color:#b8bcc7;font-size:clamp(1rem,2vw,1.18rem);line-height:1.75;max-width:900px;margin:0}
.seo-hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
.seo-copy-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr);gap:1rem;margin-bottom:2.5rem}
.seo-copy-grid>.glass-panel{padding:1.5rem;border-radius:1.25rem}
.seo-copy-grid h2{font-size:1.2rem;font-weight:800;margin:0 0 .8rem}
.seo-copy-grid p{color:#aeb3bf;line-height:1.75;margin:.65rem 0}
.seo-copy-grid a{color:var(--color-brand-accent,#35e6ff)}
.seo-link-grid{display:grid;gap:.45rem}
.seo-link-grid a{display:flex;align-items:center;justify-content:space-between;padding:.7rem .8rem;border-radius:.75rem;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);color:#d8dbe2;text-decoration:none}
.seo-link-grid a:hover{border-color:rgba(53,230,255,.45);color:#fff}
.seo-products{margin-top:1rem}
@media(max-width:900px){.seo-copy-grid{grid-template-columns:1fr}.seo-landing{padding-top:7rem}}