@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* ===== CSS Variables ===== */
:root {
  --red: #ed1c24;
  --red-dark: #c81019;
  --red-soft: #fff1f2;
  --ink: #15171c;
  --muted: #69707d;
  --line: #e8ebef;
  --soft: #f7f8fa;
  --green: #178a52;
  --orange: #df7b13;
  --shadow: 0 4px 20px rgba(24,32,45,.10);
  --shadow-card: 0 2px 12px rgba(24,32,45,.08);
  --radius: 16px;
  /* The desktop footer renders at about 95px with its current content and padding. */
  --site-footer-height: 96px;
}

/* ===== Reset ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
html{scrollbar-gutter:stable}
html,body{min-height:100%}
body{font-family:Cairo,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55;overflow-x:clip;padding-bottom:0;display:flex;flex-direction:column}
main{flex:1}
body.overlay-open{position:fixed;inset-inline:0;width:100%;overflow:hidden;padding-inline-end:var(--scrollbar-width,0px)}
button,input,select,textarea{font:inherit}
button{border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.hidden{display:none!important}
.section-pad{width:min(1440px,100%);max-width: 1400px;margin:auto;padding:28px clamp(14px,3vw,48px)}

/* ===== HEADER ===== */
.site-header{
  position:sticky;top:0;z-index:80;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.header-shell{width:min(1440px,100%);margin:auto;padding:0 clamp(14px,3vw,48px)}
.header-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 0;direction:rtl;
}

/* Brand side — name and original logo stay together in the first row. */
.brand-side{display:flex;align-items:center;gap:6px;direction:rtl}
.brand-lockup{display:flex;align-items:center;gap:6px;direction:rtl}
.brand-lockup img{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.brand-copy{display:flex;flex-direction:column;line-height:1.1;text-align:right}
.brand-copy strong{color:var(--red);font-size:clamp(18px,2vw,24px);font-weight:900;white-space:nowrap}
.brand-copy small{font-size:9px;color:#333;font-weight:700;margin-top:1px;white-space:nowrap;letter-spacing:.3px}
.hero-title-strip{padding-top:20px;padding-bottom:8px}
.hero-title-strip h1{font-size:clamp(24px,3vw,38px);line-height:1.35;color:var(--ink);font-weight:900;text-align:right}

/* Header Actions — left side */
.header-actions{display:flex;align-items:center;gap:4px;direction:rtl}

.icon-btn{
  width:36px;height:36px;border-radius:10px;
  color:#333;display:grid;place-items:center;
  font-size:15px;position:relative;transition:.15s;
}
.icon-btn:hover{background:var(--red-soft);color:var(--red)}

/* Badges */
.cart-badge,.fav-badge{
  position:absolute;top:-3px;right:-4px;
  min-width:16px;height:16px;padding:0 3px;
  border-radius:99px;background:var(--red);color:#fff;
  font-size:9px;line-height:16px;text-align:center;font-weight:700;
}

/* Menu button */
.menu-btn{color:#333}
.header-menu-row{display:flex;justify-content:flex-start;direction:rtl;height:34px;align-items:center;margin-top:-5px}
.header-menu-row .menu-btn{width:34px;height:34px;border-radius:9px}

/* Search Bar */
.search-wrap{position:relative;padding:8px 0 10px}
.search-wrap>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#aaa;pointer-events:none;font-size:14px}
.search-wrap input{
  width:100%;height:40px;
  border:1px solid #e0e0e0;border-radius:10px;
  background:#f7f8fa;
  padding:0 14px 0 40px;
  color:var(--ink);outline:none;font-size:13px;
  direction:rtl;
}
.search-wrap input::placeholder{color:#aaa}
.search-wrap input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.search-suggestions{
  position:absolute;top:calc(100% - 2px);right:0;left:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);z-index:100;overflow:hidden;
}
.suggestion{display:flex;align-items:center;gap:10px;padding:9px 13px;text-align:right;border-bottom:1px solid var(--line);cursor:pointer;direction:rtl}
.suggestion:last-child{border:0}
.suggestion:hover{background:var(--red-soft)}
.suggestion img{width:38px;height:38px;object-fit:contain;border-radius:8px;background:var(--soft)}
.suggestion div{flex:1}
.suggestion strong{display:block;font-size:12px}
.suggestion small{color:var(--muted);font-size:11px}
.suggestion b{color:var(--red);font-size:11px;white-space:nowrap}

/* ===== SIDEBAR ===== */
.sidebar-overlay,.drawer-overlay,.modal-overlay{
  position:fixed;inset:0;background:rgba(13,16,22,.52);
  opacity:0;pointer-events:none;transition:.22s;z-index:120;
}
.sidebar-overlay.open,.drawer-overlay.open,.modal-overlay.open{opacity:1;pointer-events:auto}

.sidebar{
  position:fixed;z-index:130;top:0;bottom:0;right:0;
  width:min(300px,82vw);
  background:#1a1c22;
  transform:translateX(105%);
  transition:.25s cubic-bezier(.4,0,.2,1);
  box-shadow:-12px 0 40px rgba(0,0,0,.3);
  display:flex;flex-direction:column;
}
.sidebar.open{transform:translateX(0)}

/* Sidebar Header */
.sidebar-head{
  height:60px;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;
  background:#ed1c24;
}
.sidebar-head>span{color:#fff;font-weight:900;font-size:15px}
.sidebar-head .icon-btn{color:#fff}
.sidebar-head .icon-btn:hover{background:rgba(255,255,255,.15);color:#fff}

/* Sidebar Content */
.sidebar-content{flex:1;overflow-y:auto;padding:6px 0}
.sidebar-content::-webkit-scrollbar{width:3px}
.sidebar-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:99px}

/* All Products Button */
.sidebar-all{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:14px 18px;
  color:#fff;font-weight:900;font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.1);
  text-align:right;direction:rtl;
  background:rgba(237,28,36,.15);
}
.sidebar-all:hover{background:rgba(237,28,36,.25)}
.sidebar-all i{font-size:12px;opacity:.8}

/* Sidebar Nav */
.sidebar-nav{list-style:none;padding:0;margin:0}
.sidebar-nav li{border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-nav li:last-child{border-bottom:none}

.sidebar-nav>li>button{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:15px 18px;
  color:#e8e9ed;font-weight:700;font-size:14px;
  text-align:right;direction:rtl;transition:.15s;
}
.sidebar-nav>li>button:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar-nav>li>button i.chevron{font-size:11px;opacity:.5;transition:.2s;flex-shrink:0}
.sidebar-nav>li>button[aria-expanded="true"] i.chevron{transform:rotate(180deg);opacity:.9}
.sidebar-nav>li>button .cat-icon{width:26px;height:26px;border-radius:7px;object-fit:cover;flex-shrink:0}

/* Subcategory list */
.sidebar-sub{list-style:none;padding:0;background:rgba(0,0,0,.25);display:none}
.sidebar-sub.open{display:block}
.sidebar-sub li{border-top:1px solid rgba(255,255,255,.05)}
.sidebar-sub li button{
  display:block;width:100%;padding:11px 18px 11px 30px;
  color:#aaa;font-size:13px;font-weight:600;
  text-align:right;direction:rtl;transition:.15s;
}
.sidebar-sub li button:hover{background:rgba(255,255,255,.05);color:#fff}

/* ===== HERO / FULL-WIDTH VIDEO BANNER ===== */
.hero{width:100%;margin:0;overflow:hidden;background:#0b0d12}
.hero-media{position:relative;isolation:isolate;width:100%;height:clamp(420px,52vw,720px);min-height:360px;overflow:hidden;background:#0b0d12}
.hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;background:#0b0d12}
.hero-overlay{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.28);pointer-events:none}
.hero-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,18px);padding:24px;text-align:center;color:#fff;pointer-events:none}
.hero-kicker{color:#fff;font-weight:900;font-size:clamp(30px,5vw,72px);line-height:1.2;text-shadow:0 3px 18px rgba(0,0,0,.6);margin:0}
.hero-copy>p:not(.hero-kicker){color:#fff;font-size:clamp(16px,2vw,28px);font-weight:700;line-height:1.6;text-shadow:0 2px 12px rgba(0,0,0,.7);margin:0}

/* ===== BUTTONS ===== */
.btn{
  min-height:40px;border-radius:10px;
  padding:8px 16px;font-weight:800;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:.18s;
}
.btn-primary{color:#fff;background:var(--red);box-shadow:0 4px 14px rgba(237,28,36,.22)}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-outline{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--red);color:var(--red)}
.btn-google{border:1px solid #dfe3e8;background:#fff;color:#1b1d21;width:100%;margin-top:10px}
.btn-google i{color:#ea4335}
.text-btn{color:var(--red);font-size:12px;font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}

/* Hero CTA */
.hero-cta{
  background:var(--red);color:#fff;
  font-size:clamp(14px,1.5vw,20px);font-weight:900;
  padding:13px 28px;border-radius:12px;
  box-shadow:0 6px 18px rgba(237,28,36,.3);
  margin-top:6px;pointer-events:auto;
}
.hero-cta:hover{background:var(--red-dark);transform:translateY(-1px)}

/* ===== UPGRADE ENTRY ===== */
.upgrade-promo-section{padding-top:clamp(18px,3vw,34px);padding-bottom:clamp(8px,1vw,16px)}
.upgrade-promo{display:flex;align-items:center;justify-content:center;gap:20px;min-height:128px;padding:22px 28px;border:1px solid #d9e4f3;border-radius:18px;background:linear-gradient(110deg,#f8fbff,#fff 52%,#fff7f7);box-shadow:0 8px 24px rgba(24,32,45,.08);text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.upgrade-promo:hover,.upgrade-promo:focus-visible{transform:translateY(-2px);border-color:#9bc8f4;box-shadow:0 12px 28px rgba(24,32,45,.12)}
.upgrade-promo-copy{display:flex;flex-direction:column;align-items:center;gap:5px}
.upgrade-promo-copy strong{font-size:clamp(24px,3vw,38px);font-weight:900;color:var(--ink);line-height:1.35}
.upgrade-promo-copy span{font-size:clamp(13px,1.4vw,17px);color:var(--muted);line-height:1.6}
.upgrade-promo-icon{color:#168ff0;font-size:clamp(22px,3vw,34px);transition:transform .18s ease}
.upgrade-promo:hover .upgrade-promo-icon{transform:translateX(-5px)}

/* ===== SECTION COMMON ===== */
.section-heading{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px;
}
.section-heading-left{display:flex;align-items:center;gap:10px}
.section-title-bar{
  display:flex;align-items:center;gap:8px;
}
.section-title-bar::before{
  content:'';display:block;
  width:4px;height:22px;border-radius:3px;
  background:var(--red);flex-shrink:0;
}
.section-heading h2{font-size:clamp(16px,2vw,22px);font-weight:900;color:var(--ink)}
.section-heading p{color:var(--muted);font-size:12px;margin-top:3px}
.eyebrow{color:var(--red);display:block;font-size:11px;font-weight:800;margin-bottom:4px}
.loading-state,.empty-state{
  grid-column:1/-1;color:var(--muted);text-align:center;
  padding:24px 16px;border:1px dashed var(--line);
  border-radius:12px;font-size:13px;
}
.active-filter{
  background:var(--red-soft);color:var(--red);
  padding:6px 10px;border-radius:8px;
  font-size:12px;font-weight:700;margin:-2px 0 12px;
}

/* ===== CATEGORIES — Circular Row ===== */
/* No toggle button — always visible */
.categories-section{padding-top:20px;padding-bottom:8px}
.categories-row{
  display:flex;flex-direction:row;gap:14px;
  overflow-x:auto;padding:12px 7px 12px;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-inline:contain;
}
.categories-row::-webkit-scrollbar{display:none}
.categories-row.is-collapsed{display:none}

.cat-circle-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;cursor:pointer;min-width:72px;
}
.cat-circle-item.active .cat-circle{
  border-color:var(--red);
  box-shadow:0 0 0 2px rgba(237,28,36,.13),0 3px 12px rgba(237,28,36,.22);
  background:#fff7f7;
}
.cat-circle-item:hover .cat-circle{border-color:#f04a50;box-shadow:0 0 0 2px rgba(237,28,36,.12),0 4px 15px rgba(237,28,36,.25)}

.cat-circle{
  width:72px;height:72px;border-radius:50%;
  border:1.5px solid rgba(237,28,36,.62);overflow:hidden;
  background:#fff;display:flex;
  align-items:center;justify-content:center;transition:box-shadow .2s,border-color .2s,transform .2s;flex-shrink:0;
  box-shadow:0 2px 10px rgba(237,28,36,.18);
}
.cat-circle-item:hover .cat-circle{transform:translateY(-1px)}
.cat-circle img{width:100%;height:100%;object-fit:cover;padding:7px}
.cat-circle i{font-size:26px;color:var(--red)}

.cat-name{
  font-size:11px;font-weight:700;text-align:center;
  color:var(--ink);line-height:1.25;max-width:72px;
  word-break:break-word;
}

/* View all categories button */
.section-toggle{
  width:100%;border:1px solid var(--line);background:#fff;
  border-radius:12px;display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;color:var(--ink);font-weight:900;font-size:14px;transition:.15s;
}
.section-toggle:hover{border-color:#ffc3c6}
.section-toggle i{color:var(--red);transition:.2s;font-size:13px}
.section-toggle[aria-expanded="true"] i{transform:rotate(180deg)}

/* ===== PRODUCTS ===== */
.products-section{padding-top:12px}
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}

/* Product Card */
.product-card{
  position:relative;
  border:1px solid #eee;border-radius:14px;
  background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
  min-width:0;transition:.2s;
  box-shadow:var(--shadow-card);
}
.product-card:hover{box-shadow:0 6px 24px rgba(237,28,36,.12);transform:translateY(-2px);border-color:#ffc3c6}
.product-image{
  height:160px;padding:14px;
  background:#f9f9f9;
  display:grid;place-items:center;cursor:pointer;
  position:relative;overflow:hidden;
}
.product-image img{width:100%;height:100%;object-fit:contain}
.product-body{padding:10px;display:flex;flex-direction:column;gap:4px;flex:1}
.product-brand{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}
.product-title{
  font-size:13px;line-height:1.4;font-weight:800;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-title:hover{color:var(--red)}
.product-model{font-size:11px;color:var(--muted)}
.stock{font-size:10px;padding:3px 7px;border-radius:99px;width:max-content;font-weight:800}
.stock.in{background:#e9f8ef;color:var(--green)}
.stock.limited{background:#fff2df;color:var(--orange)}
.stock.out{background:#ffe8e9;color:var(--red-dark)}
.price-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:4px;margin-top:auto;padding-top:6px;
}
.product-price{color:var(--red);font-weight:900;font-size:16px}
.old-price{color:#aaa;text-decoration:line-through;font-size:11px}
.product-actions{display:flex;gap:6px;margin-top:8px}
.product-actions .btn{flex:1;min-height:36px;font-size:11px;padding:6px 6px;border-radius:8px}
.heart-btn{
  position:absolute;top:8px;left:8px;
  width:28px;height:28px;border-radius:50%;
  background:#fff;border:1px solid #eee;z-index:2;
  color:#888;transition:.15s;
  display:grid;place-items:center;font-size:12px;
}
.heart-btn.active{color:var(--red);border-color:#ffb9bd}
.stock-btn{color:var(--red);border:1px solid #ffc3c6;background:#fff7f7}
.product-card.is-out{opacity:.82}

/* ===== BRANDS SECTION ===== */
.brands-section{padding-top:8px}
.brands-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.brands-grid.is-collapsed{display:none}
.brand-item{
  display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);background:#fff;
  border-radius:11px;padding:14px 8px;
  font-weight:900;font-size:13px;transition:.15s;cursor:pointer;
}
.brand-item:hover,.brand-item.active{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.brand-mark{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#17191d;color:#fff;font-size:9px}
.brand-logo{width:50px;height:26px;object-fit:contain}

/* ===== COMPARE SECTION ===== */
.compare-section{background:#fff;padding-top:20px}

.compare-filters{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;
}
.compare-filters label{
  display:flex;flex-direction:column;gap:4px;
  font-size:11px;font-weight:800;color:#666;
}
.compare-filters select{
  border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:9px 10px;min-height:40px;outline:none;color:var(--ink);font-size:12px;
}
.compare-filters select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}

/* Compare Pickers — always two side by side */
.compare-pickers{
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);
  align-items:start;gap:8px;margin-bottom:12px;
}

.compare-picker{
  border:1px solid #eee;border-radius:12px;
  padding:10px;background:#fff;
  display:flex;flex-direction:column;gap:8px;
}
.picker-label{font-weight:900;font-size:12px;color:var(--ink);text-align:center}

/* Product card inside picker */
.compare-picker-card{
  border:1px solid #eee;border-radius:10px;
  padding:8px;background:var(--soft);text-align:center;position:relative;
}
.compare-picker-card img{width:100%;height:80px;object-fit:contain;margin-bottom:5px}
.compare-picker-card .cpc-name{
  font-size:11px;font-weight:800;line-height:1.3;margin-bottom:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.compare-picker-card .cpc-brand{font-size:10px;color:var(--muted);margin-bottom:2px}
.compare-picker-card .cpc-price{color:var(--red);font-weight:900;font-size:13px;margin-bottom:6px}
.compare-picker-card .cpc-actions{display:flex;gap:4px}
.compare-picker-card .cpc-actions .btn{flex:1;font-size:9px;min-height:28px;padding:3px 4px}

/* Empty picker state */
.picker-empty{
  height:100px;border-radius:10px;background:var(--soft);
  border:2px dashed #ddd;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  color:var(--muted);font-size:10px;cursor:pointer;transition:.15s;
}
.picker-empty:hover{border-color:#ffc3c6;color:var(--red)}
.picker-empty i{font-size:20px}
.compare-picker-option{border:1px solid #eee;border-radius:12px;background:#fff;padding:10px;text-align:right;display:flex;flex-direction:column;gap:4px;min-width:0;transition:.15s}
.compare-picker-option:hover{border-color:#ed1c24;box-shadow:0 4px 16px rgba(237,28,36,.12);transform:translateY(-1px)}
.compare-picker-option.is-disabled{opacity:.45;cursor:not-allowed}
.compare-picker-option img{width:100%;height:120px;object-fit:contain;background:var(--soft);border-radius:9px}
.compare-picker-option strong{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.compare-picker-option span{font-size:11px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.compare-picker-option b{font-size:14px;color:var(--red);margin-top:auto}
.compare-picker-option small{width:max-content}
.cpc-stock{font-size:10px;margin-bottom:5px}.cpc-stock.in{color:var(--green)}.cpc-stock.limited{color:var(--orange)}.cpc-stock.out{color:var(--red-dark)}
.compare-picker-modal-content{width:min(760px,calc(100vw - 24px));max-height:min(90vh,760px)}
.compare-picker-tools{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.compare-picker-tools input,.compare-picker-tools select{min-height:42px;border:1px solid var(--line);border-radius:9px;padding:0 10px;background:#fff;color:var(--ink);outline:none;font-size:12px;min-width:0}
.compare-picker-tools input:focus,.compare-picker-tools select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.compare-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 16px;overflow:auto;min-height:0}
.builder-page-main{background:linear-gradient(180deg,#fff 0,#fff8f8 100%);min-height:calc(100vh - 88px)}
.builder-page-head{padding-top:34px;padding-bottom:4px}.builder-page-head h1{font-size:clamp(28px,4vw,44px);line-height:1.3;margin:4px 0;color:var(--ink)}.builder-page-head>p:last-child{color:var(--muted);font-size:15px;line-height:1.8}.back-to-store{color:var(--red);font-weight:800;font-size:13px;display:inline-flex;gap:6px;align-items:center;margin-bottom:18px}
.builder-page .builder-section{padding-top:18px}.builder-page .builder-banner{margin-bottom:18px}

.picker-select-row{display:block}
.picker-select-row select{
  width:100%;border:1px solid var(--line);border-radius:9px;
  background:#fff;padding:8px 9px;min-height:38px;outline:none;
  color:var(--ink);font-size:11px;
}
.picker-select-row select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}

.compare-vs{
  border-radius:50%;width:36px;height:36px;
  display:grid;place-items:center;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:900;flex-shrink:0;
  align-self:center;margin-top:50px;
}

.compare-submit{
  display:block;width:min(240px,100%);
  margin:0 auto 12px;font-size:14px;min-height:44px;
}

/* Compare Results */
.compare-results{margin-top:14px}
.compare-result-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.compare-card{
  border:1px solid #eee;border-radius:12px;
  padding:12px;text-align:center;background:#fff;
  box-shadow:var(--shadow-card);
}
.compare-card img{height:90px;width:100%;object-fit:contain;margin-bottom:7px}
.compare-card h3{font-size:12px;line-height:1.4;margin-bottom:3px;font-weight:800}
.compare-card strong{color:var(--red);font-size:14px;display:block;margin-bottom:7px}
.compare-card .compare-result-actions{display:grid;gap:4px}
.compare-result-actions .btn{font-size:10px;padding:5px 6px;min-height:30px;width:100%}

.spec-table{border:1px solid #eee;border-radius:12px;overflow:hidden}
.spec-row{display:grid;grid-template-columns:1fr 80px 1fr;border-bottom:1px solid #eee;font-size:11px}
.spec-row:last-child{border:0}
.spec-row>*{padding:8px 7px}
.spec-row>:first-child{text-align:right;border-inline-end:1px solid #eee}
.spec-row .spec-key{text-align:center;color:var(--muted);font-weight:800;background:var(--soft);border-inline-start:1px solid #eee;border-inline-end:1px solid #eee}
.spec-row>:last-child{text-align:left}

/* ===== BUILDER SECTION ===== */
.builder-section{padding-top:20px}

/* Builder banner strip at top */
.builder-banner{
  background:linear-gradient(135deg,#fff6f6,#fff);
  border:1px solid #ffd8da;border-radius:var(--radius);
  padding:16px 20px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.builder-banner-copy{flex:1}
.builder-banner-copy h2{font-size:clamp(16px,2vw,22px);font-weight:900;color:var(--ink)}
.builder-banner-copy p{font-size:12px;color:var(--muted);margin-top:3px}
.builder-banner-img{width:90px;height:90px;object-fit:contain;flex-shrink:0}

.builder-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:18px;align-items:start}

/* Builder part cards grid */
.builder-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* Builder Part Card */
.builder-part{border:1px solid #eee;border-radius:12px;background:#fff;overflow:hidden;transition:.18s;box-shadow:var(--shadow-card)}
.builder-part:hover{border-color:#ffc3c6;box-shadow:0 4px 16px rgba(237,28,36,.08)}

/* Empty part */
.builder-part-empty{
  padding:14px;display:flex;flex-direction:column;
  align-items:center;gap:8px;text-align:center;
  min-height:120px;justify-content:center;cursor:pointer;
}
.part-icon-wrap{width:40px;height:40px;border-radius:10px;background:var(--red-soft);display:grid;place-items:center;flex-shrink:0}
.part-icon-wrap i{color:var(--red);font-size:18px}
.part-label{font-size:13px;font-weight:800;color:var(--ink)}
.part-add-btn{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:14px;transition:.15s;flex-shrink:0}
.builder-part-empty .part-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}
.no-products-note{font-size:11px;color:var(--muted)}
.builder-empty-choose{width:100%;min-height:42px;border:1px solid #ffc3c6;border-radius:9px;background:var(--red-soft);color:var(--red);font-size:13px;font-weight:800;padding:8px;display:flex;align-items:center;justify-content:center;gap:7px}
.builder-empty-choose:hover{background:#ffe2e4}

/* Filled part card — image-based like reference */
.builder-part-filled{padding:0}
.builder-part-filled-inner{padding:10px}
.part-filled-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.part-filled-img{
  width:56px;height:56px;object-fit:contain;
  border-radius:8px;background:var(--soft);
  flex-shrink:0;border:1px solid #eee;
}
.part-filled-info{flex:1;min-width:0}
.part-filled-category{font-size:10px;color:var(--red);font-weight:800;margin-bottom:1px}
.part-filled-name{font-size:12px;font-weight:800;line-height:1.3;margin-bottom:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.part-filled-model{font-size:10px;color:var(--muted)}
.part-filled-price{
  color:var(--red);font-size:14px;font-weight:900;
  padding:7px 10px;background:var(--red-soft);
  border-top:1px solid #ffd8da;
  display:flex;align-items:center;justify-content:space-between;
}
.part-filled-price span{font-size:10px;color:var(--muted);font-weight:600}
.part-filled-specs{
  padding:6px 10px;border-top:1px solid #eee;
  font-size:10px;color:#666;display:flex;flex-wrap:wrap;gap:4px;
}
.part-spec-chip{background:var(--soft);border-radius:5px;padding:2px 6px}
.part-filled-actions{
  display:flex;gap:5px;padding:8px 10px;
  border-top:1px solid #eee;background:#fafbfc;
}
.part-filled-actions .btn{flex:1;font-size:11px;min-height:30px;padding:4px 6px}

/* Builder Summary */
.builder-summary{
  position:sticky;top:120px;
  border:1px solid #ffd9db;border-radius:14px;
  padding:16px;background:linear-gradient(150deg,#fff,#fff6f6);
}
.summary-label{font-size:11px;color:var(--muted);margin-bottom:3px}
.builder-summary>strong{display:block;color:var(--red);font-size:26px;font-weight:900;margin:2px 0 12px}
.builder-status{color:var(--red);font-size:11px;font-weight:800}
.compatibility-box{
  display:flex;gap:7px;align-items:flex-start;
  background:#fff;border-radius:9px;padding:9px;
  font-size:11px;color:#5b6470;margin-bottom:12px;line-height:1.5;
}
.compatibility-box i{color:var(--red);margin-top:2px;flex-shrink:0}
.compatibility-box.ok{color:var(--green)}
.compatibility-box.ok i{color:var(--green)}
.compatibility-box.bad{color:var(--red-dark)}
.compatibility-box.bad i{color:var(--red-dark)}
.summary-actions{display:grid;gap:7px}
.summary-actions .btn{width:100%;font-size:12px}

/* View full build button */
.view-full-build{
  display:block;width:100%;text-align:center;
  color:var(--red);font-size:12px;font-weight:800;
  padding:10px;border-top:1px solid #ffd8da;margin-top:4px;
}
.view-full-build i{margin-inline-start:4px}

/* ===== UPGRADE SECTION ===== */
.upgrade-section{padding-top:8px}
.upgrade-form{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.upgrade-field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;color:#666;min-width:0}
.upgrade-field label{color:var(--ink);line-height:1.4}
.upgrade-field select{border:1px solid #eee;border-radius:9px;background:#fff;padding:9px 10px;min-height:38px;outline:none;color:var(--ink);font-size:12px}
.upgrade-field select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.upgrade-selection-preview{min-height:104px;border:1px solid #f0dfe0;border-radius:11px;background:linear-gradient(145deg,#fff,#fff8f8);padding:7px;display:flex;align-items:center;overflow:hidden}
.upgrade-preview-empty{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;color:var(--muted);font-size:10px;line-height:1.45;font-weight:600}
.upgrade-preview-empty button{border:0;background:transparent;color:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;width:100%;font:inherit;padding:0}
.upgrade-preview-empty img{width:52px;height:52px;object-fit:contain;border-radius:50%;background:var(--red-soft);border:1px solid #ffd8da;padding:3px}
.upgrade-preview-empty strong{color:var(--ink);font-size:11px;line-height:1.35}
.upgrade-preview-empty span{font-size:9px}
.upgrade-preview-card{display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto;gap:5px 8px;width:100%;min-width:0;align-items:center}
.upgrade-preview-card img{grid-row:1 / span 2;width:54px;height:54px;object-fit:contain;border-radius:8px;background:var(--soft);border:1px solid #eee}
.upgrade-preview-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.upgrade-preview-copy strong{font-size:11px;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.upgrade-preview-copy span{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upgrade-preview-copy small{font-size:9px;font-weight:600;color:#69727e;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.upgrade-preview-card>b{grid-column:2;color:var(--red);font-size:12px;font-weight:900;direction:rtl;white-space:nowrap}
.upgrade-preview-actions{grid-column:1 / -1;display:flex;gap:5px}.upgrade-preview-actions .btn{font-size:10px;min-height:28px;padding:3px 8px}.upgrade-picker-choice{display:block;background:var(--red);color:#fff;border-radius:7px;padding:5px 8px;font-size:11px;font-weight:800;margin-top:2px}
.upgrade-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:12px}
.upgrade-note{grid-column:1/-1;color:var(--muted);font-size:11px}

/* ===== BUILDER PRODUCT CATALOG ===== */
.builder-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px);gap:22px;align-items:start}
.builder-catalog-area{min-width:0}
.builder-toolbar{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(150px,1fr));gap:10px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);margin-bottom:12px}
.builder-toolbar label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:12px;font-weight:800;min-width:0}
.builder-toolbar input,.builder-toolbar select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:0 12px;font:inherit;font-size:13px;outline:none}
.builder-toolbar input:focus,.builder-toolbar select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.09)}
.builder-search{position:relative;justify-content:flex-end}.builder-search i{position:absolute;inset-inline-start:12px;bottom:14px;color:var(--red)}.builder-search input{padding-inline-start:36px}
.builder-part-tabs{display:flex;gap:8px;overflow:auto;padding:2px 1px 10px;scrollbar-width:thin}
.builder-part-tab{display:inline-flex;align-items:center;gap:7px;min-height:38px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);padding:6px 12px;white-space:nowrap;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:.15s}
.builder-part-tab:hover,.builder-part-tab.active{border-color:var(--red);background:var(--red);color:#fff}
.builder-catalog-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px}.builder-catalog-meta strong{font-size:19px}.builder-catalog-meta span{color:var(--muted);font-size:12px;font-weight:800}
.builder-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.builder-product-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #eee;border-radius:14px;background:#fff;box-shadow:var(--shadow-card);transition:.18s}.builder-product-card:hover{border-color:#ffc3c6;box-shadow:0 8px 22px rgba(237,28,36,.11);transform:translateY(-2px)}.builder-product-card.is-selected{border-color:var(--red);box-shadow:0 0 0 2px rgba(237,28,36,.12)}
.builder-product-image{height:178px;background:var(--soft);padding:14px;display:grid;place-items:center}.builder-product-image img{width:100%;height:100%;object-fit:contain}.builder-product-body{display:flex;flex-direction:column;gap:6px;padding:12px;min-width:0}.builder-product-body h3{font-size:15px;line-height:1.45;margin:0;color:var(--ink);overflow-wrap:anywhere}.builder-product-model{font-size:12px;color:var(--muted);min-height:18px;overflow-wrap:anywhere}.builder-card-specs{display:flex;flex-wrap:wrap;gap:4px}.builder-card-specs span{font-size:10px;background:var(--soft);border-radius:5px;padding:3px 6px;color:#65707e;overflow-wrap:anywhere}.builder-product-meta{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;margin-top:3px}.builder-product-meta strong{color:var(--red);font-size:16px;direction:rtl;white-space:nowrap}.builder-product-meta .stock{font-size:11px}.builder-select-product{width:100%;min-height:42px;font-size:13px;margin-top:3px}.builder-empty-state{grid-column:1/-1;min-height:180px;display:grid;place-items:center}
.builder-summary{min-width:0}.summary-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid #ffd9db;padding-bottom:12px;margin-bottom:10px}.summary-heading #builderSummaryHint{font-size:12px;color:var(--muted)}.summary-heading>strong{margin:0;font-size:24px}.builder-selected-list{display:grid;gap:8px;max-height:54vh;overflow:auto;padding-inline-end:2px;margin-bottom:12px}.builder-selected-empty{border:1px dashed #ffc3c6;border-radius:10px;padding:22px 12px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}.builder-selected-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid #f0dfe0;border-radius:10px;padding:7px;background:#fff8f8}.builder-selected-card img{width:58px;height:58px;object-fit:contain;background:#fff;border-radius:8px}.builder-selected-copy{min-width:0}.builder-selected-copy small{display:block;color:var(--red);font-weight:800;font-size:10px;margin-bottom:2px}.builder-selected-copy strong{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.builder-selected-copy span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.builder-selected-card>b{color:var(--red);font-size:12px;white-space:nowrap}.builder-selected-actions{grid-column:2/-1;display:flex;gap:5px}.builder-selected-actions button{font-size:11px;min-height:30px;padding:4px 8px}

/* ===== FOOTER ===== */
.site-footer{position:static;z-index:90;width:100%;background:#1F2A44;color:#f4f7fb;border-top:1px solid #405071;box-shadow:0 -5px 18px rgba(13,22,40,.24);margin-top:auto;padding-bottom:env(safe-area-inset-bottom)}
.footer-inner{
  width:min(1440px,100%);margin:auto;
  min-height:calc(var(--site-footer-height) - 1px);padding:12px 70px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.footer-brand .brand-lockup{direction:rtl}
.footer-brand .brand-copy small{color:#c9d2e2}
.footer-brand .brand-copy strong{color:#fff}
.footer-brand p{color:#ff8d92;font-weight:800;font-size:12px;margin-top:10px}
.footer-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a{
  width:40px;height:40px;border:1px solid #71809e;border-radius:10px;
  padding:0;color:#f4f7fb;font-size:18px;justify-content:center;
  display:flex;align-items:center;gap:6px;transition:.15s;
}
.footer-links a:hover{border-color:var(--red);color:var(--red)}

/* ===== FLOATING CART & CHATBOT ===== */
.floating-cart{
  position:fixed;z-index:95;
  left:max(16px,env(safe-area-inset-left));
  bottom:max(16px,env(safe-area-inset-bottom));
  width:52px;height:52px;border-radius:50%;
  background:var(--red);color:#fff;
  box-shadow:0 8px 22px rgba(237,28,36,.35);
  font-size:18px;transition:.2s;
}
.floating-cart:hover{transform:scale(1.08)}
.floating-cart span{
  position:absolute;top:-3px;right:-4px;
  background:#17191d;border:2px solid #fff;
  border-radius:99px;min-width:18px;height:18px;
  font-size:9px;line-height:15px;text-align:center;font-weight:700;
}

.chatbot-fab{
  position:fixed;z-index:96;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:50%;
  padding:2px;background:var(--red);
  border:3px solid #fff;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  transition:.2s;
}
.chatbot-fab:hover{transform:scale(1.08)}
.chatbot-fab img{width:100%;height:100%;object-fit:cover;border-radius:50%}

body:has(.cart-drawer.open) .chatbot-fab{opacity:0;pointer-events:none}
body:has(.chatbot-window:not(.hidden)) .chatbot-fab{opacity:0;pointer-events:none}
body:has(.chatbot-window:not(.hidden)) .floating-cart{opacity:0;pointer-events:none}

/* ===== CART DRAWER ===== */
.cart-drawer{
  position:fixed;z-index:140;top:0;bottom:0;left:0;
  width:min(400px,90vw);background:#fff;
  transform:translateX(-105%);
  transition:.25s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  box-shadow:12px 0 40px rgba(0,0,0,.16);
}
.cart-drawer.open{transform:translateX(0)}
.drawer-head{
  height:60px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);font-weight:800;
}
.drawer-head h2{font-size:15px;display:flex;align-items:center;gap:7px}
.cart-items{overflow:auto;flex:1;padding:12px}
.cart-item{display:grid;grid-template-columns:60px 1fr;gap:9px;border-bottom:1px solid var(--line);padding:10px 0}
.cart-item img{width:60px;height:60px;object-fit:contain;border-radius:9px;background:var(--soft)}
.cart-item-title{font-size:12px;font-weight:800;line-height:1.4}
.cart-item-price{font-size:13px;color:var(--red);font-weight:900;margin:3px 0}
.cart-item-actions{display:flex;align-items:center;gap:5px}
.qty-btn,.remove-btn{width:24px;height:24px;border-radius:6px;background:var(--soft);font-size:11px;transition:.15s}
.qty-btn:hover{background:var(--line)}
.remove-btn{color:var(--red);margin-inline-start:auto}
.remove-btn:hover{background:#ffe8e9}
.cart-footer{border-top:1px solid var(--line);padding:13px}
.cart-footer>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:12px}
.cart-footer strong{color:var(--red);font-size:18px}
.cart-footer .btn{width:100%;min-height:44px;font-size:13px}
.cart-footer .cart-clear-btn{margin-bottom:8px;min-height:38px;font-size:12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.modal-actions .btn{min-width:110px}

/* ===== MODALS ===== */
.modal-overlay{display:flex;align-items:center;justify-content:center}
.modal-content{
  width:min(600px,92vw);max-height:min(88vh,780px);
  overflow:auto;background:#fff;border-radius:16px;
  position:relative;z-index:121;
  transform:translateY(10px);transition:.2s;
  box-shadow:0 16px 50px rgba(0,0,0,.2);
}
.modal-overlay.open .modal-content{transform:translateY(0)}
.modal-head{
  height:60px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);font-weight:800;
}
.modal-head h2{font-size:16px}
.modal-body{padding:16px;display:grid;gap:9px}
.modal-body input,.modal-body select,.modal-body textarea{
  border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:9px 10px;min-height:38px;outline:none;color:var(--ink);font-size:12px;
}
.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.modal-body textarea{min-height:75px;resize:vertical}
.form-note,.modal-body small{font-size:10px;color:var(--muted);line-height:1.5}
.order-summary{background:var(--soft);border-radius:10px;padding:10px;display:grid;gap:5px;font-size:11px}
.order-summary span,.order-summary strong{display:flex;justify-content:space-between}
.order-summary b{color:var(--red)}
.order-summary strong{font-size:14px;padding-top:4px;border-top:1px solid var(--line)}
.product-modal{width:min(720px,94vw)}
.product-detail{display:grid;grid-template-columns:minmax(200px,.85fr) minmax(0,1.15fr);gap:16px}
.product-detail>img{width:100%;height:260px;object-fit:contain;background:var(--soft);border-radius:12px}
.product-detail h3{font-size:18px;line-height:1.35}
.detail-meta{color:var(--muted);font-size:11px;margin:4px 0}
.detail-price{color:var(--red);font-size:22px;font-weight:900;margin:7px 0}
.spec-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:8px 0}
.spec-list div{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-bottom:1px solid var(--line);font-size:11px}
.spec-list div:last-child{border:0}
.spec-list strong{color:var(--muted)}
.detail-actions{display:flex;gap:7px}
.detail-actions .btn{flex:1}
.account-body{display:block}
.account-body>div:first-child{text-align:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.account-body p{font-size:12px;color:var(--muted)}
.account-body small{display:block;margin-top:8px}
.favorites-list{display:grid;gap:7px;margin-top:12px}
.favorite-row{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:7px}
.favorite-row img{width:40px;height:40px;object-fit:contain}
.favorite-row div{flex:1;font-size:11px;font-weight:800}
.favorite-row strong{color:var(--red);display:block}
.quote-line{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:11px}
.quote-line img{width:40px;height:40px;object-fit:contain}
.quote-line div{flex:1}
.quote-line strong{color:var(--red);display:block}
.quote-total{display:flex;justify-content:space-between;font-weight:900;color:var(--red);padding:10px 0}
.quote-actions{display:flex;gap:7px}
.quote-actions .btn{flex:1}

/* ===== CHATBOT ===== */
.chatbot-window{
  position:fixed;z-index:150;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  width:min(360px,calc(100vw - 32px));
  height:min(580px,calc(100dvh - 32px));
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.2);
  display:flex;flex-direction:column;overflow:hidden;
}
.chat-head{height:54px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:var(--red);color:#fff}
.chat-head .icon-btn{color:#fff}
.chat-messages{flex:1;overflow:auto;padding:12px;background:#fbfbfc}
.message{max-width:86%;padding:10px 12px;border-radius:11px;margin-bottom:8px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-line}
.bot-message{font-size:var(--chat-bot-size,16px)}
.user-message{font-size:var(--chat-user-size,16px)}
.bot-message{background:#fff;border:1px solid var(--line);margin-left:auto}
.user-message{background:var(--red);color:#fff;margin-right:auto}
.chat-product{display:flex;gap:7px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px;margin-top:6px;cursor:pointer}
.chat-product img{width:34px;height:34px;object-fit:contain}
.chat-product strong{font-size:clamp(14px,1.2vw,16px);display:block;overflow-wrap:anywhere}.chat-product span{font-size:clamp(13px,1.1vw,15px);color:var(--red);font-weight:800}.chat-product small{display:block;font-size:clamp(12px,1vw,14px);color:var(--muted);margin-top:2px;overflow-wrap:anywhere}.chat-product-actions{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}.chat-product-actions button{font-size:13px;border:1px solid #ffc3c6;border-radius:5px;padding:4px 7px;color:var(--red);background:transparent;cursor:pointer}
.chat-quick-replies{display:flex;gap:5px;padding:7px;overflow:auto;border-top:1px solid var(--line);scrollbar-width:none}
.chat-quick-replies button{white-space:nowrap;border:1px solid #ffc3c6;border-radius:99px;padding:7px 10px;color:var(--red);font-size:var(--chat-suggestion-size,15px);transition:.15s}
.chat-quick-replies button:hover{background:var(--red-soft)}
.chat-input{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.chat-input input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:var(--chat-input-size,16px);outline:none}
.chat-input input:focus{border-color:var(--red)}
.chat-input button{width:34px;border-radius:8px;background:var(--red);color:#fff}

/* ===== TOAST ===== */
.toast{
  position:fixed;z-index:200;left:50%;bottom:max(16px,env(safe-area-inset-bottom));
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  background:#17191d;color:#fff;border-radius:9px;
  padding:9px 14px;font-size:12px;transition:.2s;
  box-shadow:var(--shadow);white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== RESPONSIVE ===== */
@media (max-width:900px) {
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);min-height:210px}
  .hero-copy{padding:22px 18px}
  .hero-media{min-height:210px}
  .builder-layout{grid-template-columns:1fr}
  .builder-summary{position:static}
  .upgrade-form{grid-template-columns:repeat(2,1fr)}
  .compare-filters{grid-template-columns:1fr 1fr}
}

@media (max-width:600px) {
  .section-pad{padding:20px 14px}
  .header-shell{padding:0 13px}
  .header-actions{gap:2px}
  .icon-btn{width:34px;height:34px;font-size:14px}
  .brand-lockup img{width:48px;height:48px}
  .brand-copy strong{font-size:23px}
  .brand-copy small{font-size:9px}
  .header-menu-row{height:31px;margin-top:-6px}
  .header-menu-row .menu-btn{width:31px;height:31px}

  /* Full-width video hero */
  .hero-media{height:clamp(300px,92vw,520px);min-height:300px}
  .hero-video{object-position:center center}
  .hero-copy{padding:20px 16px;gap:10px}
  .hero-kicker{font-size:clamp(27px,8vw,42px)}
  .hero-copy>p:not(.hero-kicker){font-size:clamp(14px,4.2vw,20px);line-height:1.55}
  .hero-cta{font-size:15px;padding:10px 18px}
  .upgrade-promo-section{padding-top:16px;padding-bottom:6px}
  .upgrade-promo{min-height:112px;padding:18px 14px;gap:10px}
  .upgrade-promo-copy strong{font-size:24px}
  .upgrade-promo-copy span{font-size:13px}
  .upgrade-promo-icon{font-size:22px}

  /* Categories */
  .cat-circle{width:64px;height:64px}
  .cat-name{font-size:10px;max-width:64px}
  .categories-row{gap:10px;padding-inline:6px}
  .categories-section{padding-top:16px}

  /* Products grid: 2 columns */
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .product-image{height:130px;padding:10px}
  .product-body{padding:9px;gap:3px}
  .product-title{font-size:12px}
  .product-price{font-size:14px}
  .product-model{font-size:10px}
  .product-actions{display:grid;gap:5px}
  .product-actions .btn{width:100%;font-size:11px;min-height:34px}
  .heart-btn{width:26px;height:26px}

  /* Brands */
  .brands-grid{grid-template-columns:repeat(3,1fr)}
  .brand-item{font-size:10px;padding:11px 4px}

  /* Compare — always side by side even on 320px */
  .compare-pickers{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:5px}
  .compare-vs{width:30px;height:30px;font-size:8px;margin-top:46px}
  .compare-picker{padding:7px}
  .picker-label{font-size:10px}
  .picker-empty{height:85px;font-size:9px}
  .picker-empty i{font-size:17px}
  .compare-picker-card img{height:68px}
  .compare-picker-card .cpc-name{font-size:10px}
  .compare-picker-card .cpc-price{font-size:12px}
  .compare-picker-card .cpc-actions .btn{font-size:8px;min-height:24px;padding:2px 3px}
  .picker-select-row select{font-size:10px;padding:7px 5px}
  .compare-result-cards{gap:7px}
  .compare-card img{height:72px}
  .compare-card h3{font-size:10px}
  .compare-card strong{font-size:12px}
  .spec-row{grid-template-columns:1fr 66px 1fr;font-size:10px}
  .spec-row>*{padding:6px 4px}

  /* Builder */
  .builder-parts{grid-template-columns:1fr}
  .part-filled-name{font-size:11px}
  .part-filled-price{font-size:13px}
  .builder-summary>strong{font-size:22px}
  .builder-banner{padding:12px 14px}
  .builder-banner-img{width:70px;height:70px}

  /* Upgrade */
  .upgrade-form{grid-template-columns:1fr 1fr}

  /* Footer */
  .footer-inner{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}
  .footer-brand{width:100%;display:flex;flex-direction:column;align-items:center}
  .footer-brand .brand-lockup{justify-content:center}
  .footer-links{justify-content:center;margin-top:0;width:100%}

  /* Modals */
  .product-detail{grid-template-columns:1fr}
  .product-detail>img{height:190px}
  .modal-content{max-height:91vh}
  /* Floating buttons use the footer clearance defined above. */
  .floating-cart{left:max(14px,env(safe-area-inset-left))}
  .chatbot-fab{right:max(14px,env(safe-area-inset-right))}

  /* Section heading */
  .section-heading h2{font-size:16px}
  .hero-title-strip{padding-top:16px;padding-bottom:4px}
  .hero-title-strip h1{font-size:24px;line-height:1.45}
  .compare-picker-tools{grid-template-columns:1fr 1fr;gap:7px;padding:10px 12px}
  .compare-picker-tools input{grid-column:1/-1}
  .compare-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px}
  .compare-picker-option{padding:8px}.compare-picker-option img{height:90px}.compare-picker-option strong{font-size:12px}.compare-picker-option b{font-size:13px}
  .builder-page-head{padding-top:24px}.builder-page-head h1{font-size:30px}.builder-page-head>p:last-child{font-size:14px}
}

@media (max-width:380px) {
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .upgrade-form{grid-template-columns:1fr}
  .brand-copy strong{font-size:15px}
  .cat-circle{width:58px;height:58px}
  .cat-name{font-size:9px;max-width:58px}
}

@media (min-width:1200px) {
  .products-grid{grid-template-columns:repeat(5,1fr)}
  .builder-parts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .compare-filters{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
}

/* ===== BUILD LAB: vertical reference-style part cards ===== */
.builder-workspace{grid-template-columns:minmax(0,1fr) minmax(280px,330px);gap:24px;align-items:start}
.builder-cards-column{min-width:0}
.builder-cards-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding-inline:4px;color:var(--muted);font-size:12px}
.builder-page-head .hero-kicker{color:var(--red);text-shadow:none}
.builder-cards-intro strong{color:var(--ink);font-size:18px}
.builder-cards-intro span{color:var(--red);font-weight:900;letter-spacing:.08em;direction:ltr}
.builder-part-cards{display:grid;gap:14px}
.builder-part-card{background:#fff;border:1px solid #edf0f3;border-radius:22px;padding:16px;box-shadow:0 8px 24px rgba(31,38,49,.07);transition:border-color .18s,box-shadow .18s,transform .18s}
.builder-part-card:hover{border-color:#ffc4c7;box-shadow:0 12px 30px rgba(237,28,36,.1);transform:translateY(-1px)}
.builder-part-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.builder-part-heading{display:flex;align-items:center;gap:11px;min-width:0}
.builder-part-heading>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.builder-part-heading strong{font-size:17px;line-height:1.35;color:var(--ink)}
.builder-part-heading small{font-size:12px;color:var(--muted)}
.builder-part-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--red-soft);color:var(--red);font-size:19px;flex:0 0 auto}
.builder-part-number{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--red-soft);color:var(--red);font-size:17px;direction:ltr}
.builder-empty-choose{min-height:84px;border:1.5px dashed #ff9ea3;border-radius:16px;background:linear-gradient(135deg,#fffafa,#fff);color:var(--red);display:flex;align-items:center;justify-content:center;gap:12px;width:100%;font:inherit;font-size:15px;font-weight:900;cursor:pointer;transition:.18s}
.builder-empty-choose:hover{background:#fff1f2;border-color:var(--red)}
.builder-empty-choose img{width:38px;height:38px;object-fit:contain;opacity:.9}
.builder-empty-choose i{font-size:21px}
.builder-part-product{display:grid;grid-template-columns:96px minmax(0,1fr) auto 34px;gap:13px;align-items:center;padding:10px;border-radius:16px;background:linear-gradient(110deg,#fafbfc,#fff);border:1px solid #f1f3f5;min-width:0}
.builder-part-product>img{width:96px;height:76px;object-fit:contain;border-radius:11px;background:#fff}
.builder-part-product-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.builder-part-product-copy strong{font-size:15px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.builder-part-product-copy span,.builder-part-product-copy small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.builder-part-product>b{color:var(--red);font-size:18px;white-space:nowrap;direction:ltr}
.builder-remove{width:32px;height:32px;display:grid;place-items:center;border:1px solid #e0e5ea;border-radius:50%;background:transparent;color:#7d8792;cursor:pointer}
.builder-remove:hover{border-color:var(--red);color:var(--red)}
.builder-part-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.builder-part-actions .btn{min-height:34px;padding:5px 12px;font-size:12px}
.builder-summary{z-index:2}
html[data-theme="dark"] .builder-part-card{background:#263653;border-color:#405071;box-shadow:0 8px 24px rgba(9,16,30,.2)}
html[data-theme="dark"] .builder-empty-choose{background:linear-gradient(135deg,#4b2938,#2d4163);border-color:#9f4a50}
html[data-theme="dark"] .builder-part-product{background:#2d4163;border-color:#405071}
html[data-theme="dark"] .builder-part-product>img{background:#385075}

@media (max-width:900px){
  .builder-workspace{grid-template-columns:1fr}
  .builder-summary{position:sticky;bottom:10px;top:auto;order:2;padding:12px 14px;border-radius:18px;box-shadow:0 8px 28px rgba(20,25,32,.18)}
  .builder-summary .summary-heading{align-items:center;padding-bottom:8px;margin-bottom:8px}
  .builder-summary>strong{font-size:22px;margin:0}
  .builder-summary .compatibility-box{margin-bottom:8px}
  .builder-summary .summary-actions{grid-template-columns:1fr 1fr;gap:8px}
  .builder-summary .summary-actions .btn{min-height:40px;font-size:12px}
  .builder-part-cards{padding-bottom:8px}
}
@media (max-width:600px){
  .builder-page-main{padding-bottom:8px}
  .builder-cards-intro strong{font-size:16px}
  .builder-part-card{padding:12px;border-radius:18px}
  .builder-part-card-head{margin-bottom:10px}
  .builder-part-heading strong{font-size:15px}
  .builder-part-heading small{font-size:11px}
  .builder-part-icon{width:36px;height:36px;font-size:16px;border-radius:10px}
  .builder-part-number{width:40px;height:40px;font-size:14px}
  .builder-empty-choose{min-height:72px;font-size:13px;gap:8px}
  .builder-empty-choose img{width:32px;height:32px}
  .builder-part-product{grid-template-columns:66px minmax(0,1fr) 30px;gap:9px;padding:8px}
  .builder-part-product>img{width:66px;height:62px}
  .builder-part-product-copy strong{font-size:13px}
  .builder-part-product-copy span,.builder-part-product-copy small{font-size:10px}
  .builder-part-product>b{grid-column:2;font-size:15px;justify-self:start}
  .builder-remove{grid-column:3;grid-row:1;width:28px;height:28px}
  .builder-part-actions{margin-top:8px}
  .builder-part-actions .btn{font-size:11px;min-height:32px}
  .builder-summary{bottom:6px}
  .builder-summary .summary-label{font-size:10px}
  .builder-summary .compatibility-box{font-size:11px;line-height:1.4}
}

/* ===== Theme and bilingual UI ===== */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f4f6f8;
  --muted:#b2bac6;
  --line:#343a45;
  --soft:#273653;
  --red-soft:#512b38;
  --shadow:0 4px 20px rgba(9,16,30,.30);
  --shadow-card:0 2px 12px rgba(9,16,30,.25);
}
html[data-theme="dark"] body{background:#1F2A44;color:var(--ink)}
html[data-theme="dark"] .site-footer{background:#1F2A44;color:#f4f7fb;border-color:#405071}
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .compare-section,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .brand-item,
html[data-theme="dark"] .compare-picker,
html[data-theme="dark"] .compare-card,
html[data-theme="dark"] .builder-part,
html[data-theme="dark"] .builder-summary,
html[data-theme="dark"] .builder-page-main{background:#263653;color:var(--ink)}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .builder-banner{border-color:#405071;background:#263653}
html[data-theme="dark"] .hero-copy>p:not(.hero-kicker),
html[data-theme="dark"] .brand-copy small{color:#c2c8d1}
html[data-theme="dark"] .search-wrap input,
html[data-theme="dark"] .upgrade-field select,
html[data-theme="dark"] .compare-filters select,
html[data-theme="dark"] .compare-picker-tools input,
html[data-theme="dark"] .compare-picker-tools select,
html[data-theme="dark"] .modal-body input,
html[data-theme="dark"] .modal-body select,
html[data-theme="dark"] .modal-body textarea,
html[data-theme="dark"] .chat-input input{background:#2d4163;color:var(--ink);border-color:#58709a}
html[data-theme="dark"] .search-suggestions,
html[data-theme="dark"] .cart-drawer,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .chatbot-window{background:#263653;color:var(--ink);border-color:#405071}
html[data-theme="dark"] .suggestion,
html[data-theme="dark"] .chat-messages{background:#2d4163}
html[data-theme="dark"] .suggestion:hover,
html[data-theme="dark"] .chat-product,
html[data-theme="dark"] .bot-message{background:#385075}
html[data-theme="dark"] .chat-product{border-color:#58709a}
html[data-theme="dark"] .product-image,
html[data-theme="dark"] .compare-picker-option img,
html[data-theme="dark"] .product-detail>img,
html[data-theme="dark"] .cart-item img{background:#385075}
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .compare-picker-option{border-color:#3b424e}
html[data-theme="dark"] .compare-picker-option:hover{border-color:var(--red)}
html[data-theme="dark"] .stock.out{background:#41252a}
html[data-theme="dark"] .order-summary{background:#385075}
html[data-theme="dark"] .active-filter{background:#2d2225}
html[data-theme="dark"] .footer-links a{border-color:#4a515d;color:#e9edf2}
html[data-theme="dark"] .chat-quick-replies button{background:#2d4163}
html[data-theme="dark"] .toast{background:#f4f6f8;color:#1F2A44}
html[data-theme="dark"] .header-actions .icon-btn{color:#f4f6f8}
html[data-theme="dark"] .header-actions .icon-btn:hover{color:var(--red)}
html[data-theme="dark"] .btn-outline{background:#2d4163;color:#f4f6f8;border-color:#71809e}
html[data-theme="dark"] .btn-outline:disabled{background:#2d4163;color:#9eabc0;border-color:#58709a}
html[data-theme="dark"] .compatibility-box{background:#2d4163;color:#e8edf3}
html[data-theme="dark"] .upgrade-selection-preview{background:linear-gradient(145deg,#2d4163,#4b2938);border-color:#71809e}
html[data-theme="dark"] .upgrade-promo{background:#2d4163;border-color:#71809e;color:#f4f6f8;box-shadow:0 8px 24px rgba(9,16,30,.28)}
html[data-theme="dark"] .upgrade-promo:hover,html[data-theme="dark"] .upgrade-promo:focus-visible{background:#385075;border-color:#93a3c0}
html[data-theme="dark"] .upgrade-promo-copy strong{color:#fff}
html[data-theme="dark"] .upgrade-promo-copy span{color:#c2c8d1}
html[data-theme="dark"] .upgrade-promo-icon{color:var(--red)}
html[data-theme="dark"] .builder-empty-choose{background:#4b2938;border-color:#9f4a50}
html[data-theme="dark"] .builder-empty-choose:hover{background:#5d3042}
html[data-theme="dark"] .site-footer .footer-brand p{color:#ff8d92}
html[data-theme="dark"] .site-footer .footer-links a{color:#f4f7fb;border-color:#71809e}

@media (max-width:600px){
  :root{--site-footer-height:140px}
  .footer-inner{
    min-height:calc(var(--site-footer-height) - 1px);
    padding:12px 16px;
    gap:10px;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
  }
  .footer-brand{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
  }
  .footer-brand .brand-lockup{justify-content:center}
  .footer-brand .brand-lockup img{width:36px;height:36px}
  .footer-brand .brand-copy strong{font-size:16px}
  .footer-brand .brand-copy small{font-size:8px}
  .footer-brand p{display:block;margin-top:5px}
  .footer-links{
    width:100%;
    gap:12px;
    flex-wrap:nowrap;
    justify-content:center;
    margin-top:0;
  }
  .footer-links a{width:40px;height:40px;font-size:18px;flex:0 0 40px}
}
html[dir="ltr"] .header-row,
html[dir="ltr"] .brand-side,
html[dir="ltr"] .brand-lockup,
html[dir="ltr"] .header-actions{direction:ltr}
html[dir="ltr"] .brand-copy{text-align:left}
html[dir="ltr"] .search-wrap>i{left:auto;right:14px}
html[dir="ltr"] .search-wrap input{padding-left:12px;padding-right:40px}
html[dir="ltr"] .suggestion,
html[dir="ltr"] .sidebar-nav>li>button,
html[dir="ltr"] .sidebar-all{direction:ltr;text-align:left}
html[dir="ltr"] .hero-copy{align-items:flex-start}
html[dir="ltr"] .hero-title-strip h1{text-align:left}
html[dir="ltr"] .sidebar{right:auto;left:0;transform:translateX(-105%)}
html[dir="ltr"] .sidebar.open{transform:translateX(0)}
html[dir="ltr"] .cart-drawer{left:auto;right:0;transform:translateX(105%)}
html[dir="ltr"] .cart-drawer.open{transform:translateX(0)}
html[dir="ltr"] .floating-cart{left:auto;right:max(16px,env(safe-area-inset-right))}
html[dir="ltr"] .chatbot-fab{right:auto;left:max(16px,env(safe-area-inset-left))}

/* ===== Readability and no-clipping pass ===== */
/* Text is allowed to wrap everywhere; image containers keep their intentional crop. */
.section-heading h2,
.section-heading p,
.eyebrow,
.hero h1,
.hero-copy>p,
.btn,
.hero-cta,
.text-btn,
.product-brand,
.product-title,
.product-model,
.product-price,
.old-price,
.stock,
.cat-name,
.brand-item,
.picker-label,
.compare-picker-card .cpc-name,
.compare-picker-card .cpc-brand,
.compare-card h3,
.spec-row,
.builder-banner-copy h2,
.builder-banner-copy p,
.part-label,
.part-filled-category,
.part-filled-name,
.part-filled-model,
.part-filled-price,
.part-filled-specs,
.summary-label,
.compatibility-box,
.view-full-build,
.upgrade-field,
.upgrade-note,
.cart-item-title,
.cart-item-price,
.drawer-head h2,
.modal-head h2,
.modal-body,
.detail-meta,
.detail-price,
.favorite-row div,
.quote-line,
.message,
.chat-quick-replies button,
.chat-input input,
.footer-brand p,
.footer-links a {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

.product-title,
.compare-picker-card .cpc-name,
.part-filled-name {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.product-card,
.builder-part,
.compare-card,
.compare-picker,
.compare-picker-card,
.builder-banner,
.cart-item,
.favorite-row,
.quote-line {
  min-width: 0;
}

.builder-banner { position: relative; }

.product-actions .btn,
.part-filled-actions .btn,
.compare-result-actions .btn,
.detail-actions .btn,
.quote-actions .btn,
.summary-actions .btn {
  height: auto;
  min-width: 0;
  white-space: normal;
  line-height: 1.45;
}

.product-title { line-height: 1.5; }
.compare-picker-card .cpc-name { line-height: 1.45; }
.part-filled-name { line-height: 1.45; }
.spec-row>* { min-width: 0; overflow-wrap: anywhere; }
.toast { white-space: normal; text-align: center; max-width: min(92vw, 480px); line-height: 1.5; }
.brand-copy strong,
.brand-copy small,
.suggestion b { white-space: normal; }

@media (max-width:600px) {
  body { font-size: 16px; }
  .section-pad { padding-inline: 14px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 20px 16px; gap: 10px; }
  .hero h1 { font-size: 22px; line-height: 1.35; }
  .hero-copy>p:not(.hero-kicker) { font-size: 15px; line-height: 1.65; }
  .hero-cta { font-size: 15px; line-height: 1.45; padding: 10px 14px; }
  .hero-media { min-height: 180px; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .section-heading h2 { font-size: 20px; line-height: 1.45; }
  .section-heading p { font-size: 14px; }
  .text-btn { font-size: 14px; line-height: 1.45; }
  .cat-name { font-size: 13px; line-height: 1.4; max-width: 76px; }
  .product-title { font-size: 15px; line-height: 1.5; }
  .product-brand { font-size: 12px; }
  .product-model { font-size: 13px; line-height: 1.45; }
  .product-price { font-size: 17px; }
  .old-price { font-size: 12px; }
  .stock { font-size: 12px; line-height: 1.35; }
  .product-actions .btn { font-size: 14px; min-height: 40px; padding: 7px 6px; }
  .brand-item { font-size: 13px; line-height: 1.4; }
  .compare-filters label,
  .compare-filters select,
  .picker-label,
  .picker-select-row select { font-size: 13px; line-height: 1.45; }
  .compare-picker-card .cpc-name { font-size: 13px; }
  .compare-picker-card .cpc-brand { font-size: 12px; }
  .compare-picker-card .cpc-price { font-size: 15px; }
  .compare-picker-card .cpc-actions .btn { font-size: 12px; min-height: 32px; }
  .compare-card h3 { font-size: 14px; }
  .compare-card strong { font-size: 16px; }
  .spec-row { font-size: 12px; line-height: 1.5; }
  .spec-row>* { padding: 8px 5px; }
  .builder-banner { align-items: flex-start; padding: 16px 14px; }
  .builder-banner-copy h2 { font-size: 20px; line-height: 1.45; }
  .builder-banner-copy p { font-size: 14px; line-height: 1.6; }
  .builder-status { font-size: 12px !important; line-height: 1.4; }
  .part-label { font-size: 15px; }
  .part-filled-name { font-size: 14px; }
  .part-filled-model { font-size: 12px; }
  .part-filled-price { font-size: 16px; line-height: 1.45; }
  .part-filled-price span { font-size: 12px; }
  .part-filled-specs { font-size: 12px; line-height: 1.5; }
  .part-filled-actions .btn,
  .summary-actions .btn,
  .view-full-build { font-size: 14px; min-height: 40px; }
  .summary-label { font-size: 13px; }
  .builder-summary>strong { font-size: 26px; }
  .compatibility-box { font-size: 13px; line-height: 1.6; }
  .upgrade-field { font-size: 14px; line-height: 1.45; }
  .upgrade-field select { font-size: 14px; min-height: 44px; }
  .upgrade-note { font-size: 13px; line-height: 1.6; }
  .builder-workspace{grid-template-columns:1fr;gap:14px}.builder-summary{position:static;order:2}.builder-toolbar{grid-template-columns:1fr;gap:8px;padding:12px}.builder-toolbar input,.builder-toolbar select{min-height:46px;font-size:14px}.builder-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.builder-product-image{height:128px;padding:9px}.builder-product-body{padding:9px;gap:5px}.builder-product-body h3{font-size:13px;line-height:1.45}.builder-product-model{font-size:11px}.builder-product-meta{align-items:flex-start;flex-direction:column;gap:3px}.builder-product-meta strong{font-size:15px}.builder-select-product{min-height:42px;font-size:12px;padding:6px 4px}.builder-card-specs{display:none}.builder-catalog-meta strong{font-size:18px}.builder-selected-list{max-height:none}.builder-selected-card{grid-template-columns:52px minmax(0,1fr) auto}.builder-selected-card img{width:52px;height:52px}.builder-summary>strong{font-size:24px}
  .cart-item-title { font-size: 14px; line-height: 1.5; }
  .cart-item-price { font-size: 15px; }
  .cart-footer>div { font-size: 14px; }
  .cart-footer strong { font-size: 20px; }
  .cart-footer .btn { font-size: 15px; }
  .drawer-head h2, .modal-head h2 { font-size: 18px; line-height: 1.45; }
  .modal-body input, .modal-body select, .modal-body textarea { font-size: 14px; min-height: 44px; }
  .detail-meta, .form-note, .modal-body small { font-size: 12px; line-height: 1.6; }
  .detail-price { font-size: 24px; }
  .message { line-height: 1.6; }
  .chat-quick-replies button { padding: 7px 9px; }
  .chat-input input { min-height: 42px; }
  .footer-brand p { font-size: 13px; line-height: 1.5; }
  .footer-links a { font-size: 18px; line-height: 1; }
}

/* Final hero overrides keep the video full-width across the legacy responsive rules. */
.hero{display:block;grid-template-columns:none;max-width:none;width:100%;margin:0;border:0;border-radius:0;min-height:0}
.hero-media{height:clamp(420px,52vw,720px);min-height:360px}
.hero-copy{align-items:center;background:transparent;padding:24px;gap:clamp(10px,1.4vw,18px)}
html[dir="ltr"] .hero-copy{align-items:center}
html[data-theme="dark"] .hero-copy{background:transparent;color:#fff}
html[data-theme="dark"] .hero-copy>p:not(.hero-kicker){color:#fff}
@media (max-width:600px){
  .hero-media{height:clamp(300px,92vw,520px);min-height:300px}
  .hero-copy{padding:20px 16px;gap:10px}
  .hero-kicker{font-size:clamp(27px,8vw,42px)}
  .hero-copy>p:not(.hero-kicker){font-size:clamp(14px,4.2vw,20px);line-height:1.55}
  .hero-cta{font-size:15px;padding:10px 18px}
}