/* Light theme overrides (keeps existing layout, only lightens the look) */

:root{
  --bg: #EEF3F8;
  --surface: #E6EDF6;
  --surface-2: #DCE6F2;
  --text: #0B1220;
  --muted: #2B3A52;
  --border: #C1CEE0;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
}




html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Common containers / dark sections -> light surfaces */
header, .navbar, .topbar, nav{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

main, section{
  background: transparent !important;
}

/* Hero / banners (generic selectors) */
.hero, .banner, .jumbotron, .section-dark{
  background: transparent !important;
}
.hero .inner, .banner .inner, .hero-content, .content-wrap, .container .panel{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

/* Cards / tiles */
.card, .product-card, .category-card, .item, .tile{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
}

.card:hover, .product-card:hover, .category-card:hover, .item:hover, .tile:hover{
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10) !important;
  transform: translateY(-2px);
  transition: 180ms ease;
}

/* Typography */
h1,h2,h3,h4,h5,h6{ color: var(--text) !important; }
p, small, .muted, .subtext{ color: var(--muted) !important; }

/* Links */
a{ color: var(--primary) !important; }
a:hover{ color: var(--primary-hover) !important; }

/* Buttons */
button, .btn, .button, input[type="submit"]{
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  border-radius: 10px !important;
}
button:hover, .btn:hover, .button:hover, input[type="submit"]:hover{
  background: var(--primary-hover) !important;
}

/* Dividers */
hr, .divider{ border-color: var(--border) !important; }

/* Optional: reduce “pure black” overlays */
*{
  text-shadow: none !important;
}

/* Detail page: force any stubborn dark panel to light */
#product, #product-detail, #detail, .detail, .product-detail, .product,
.product-page, .page-product, .product-view,
.detail-wrap, .detail-main, .detail-grid, .detail-layout,
.detail-panel, .info, .info-panel, .meta, .summary, .right, .aside,
.actions, .cta, .sidebar, .panel {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* If the dark color is coming from children, flatten them too */
#product * , #product-detail * , #detail * , .product-detail * , .product-page * {
  border-color: var(--border) !important;
}

/* Make small tags/badges readable on light bg */
.badge, .tag, .chip {
  background: #E8F0FF !important;
  color: #1E3A8A !important;
  border: 1px solid #C7D2FE !important;
}

/* If there are “dark text” rules inside the panel */
.product-detail a, .product-page a, #product-detail a {
  color: var(--primary) !important;
}


/* === Neutral panels (not too bright) === */
.panel,
main.wrap .panel,
#detail .panel{
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
}

/* Remove debug outline if it exists */
#detail .panel{ outline: none !important; }


/* === Detail images: override inline dark background/border with neutral tones === */
#detail img[style*="background:#0b1626"],
#detail img[style*="background: #0b1626"],
#detail img[style*="border:1px solid #1f2937"],
#detail img[style*="border: 1px solid #1f2937"]{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}


/* =========================
   Forms: writing-friendly UI
   ========================= */
main.wrap:has(form),
body:has(form) {
  /* 页面背景保持中性，不刺眼 */
  background: var(--bg) !important;
}

/* 让表单所在 panel 更适合阅读 */
main.wrap:has(form) .panel,
main.wrap:has(#quote-form) .panel,
main.wrap:has(#repair-form) .panel,
main.wrap:has(#buyback-form) .panel{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10) !important;
}

/* 核心：输入框/文本域改成“写作模式” */
main.wrap:has(form) input[type="text"],
main.wrap:has(form) input[type="email"],
main.wrap:has(form) input[type="number"],
main.wrap:has(form) input[type="tel"],
main.wrap:has(form) input[type="url"],
main.wrap:has(form) select,
main.wrap:has(form) textarea{
  background: #F7FAFF !important;          /* 写作区用白底最清晰 */
  color: #0F172A !important;               /* 深色字，长文本不累 */
  border: 1px solid #CBD5E1 !important;    /* 比 var(--border) 稍清晰一点 */
  border-radius: 10px !important;
  padding: 10px 12px !important;
  line-height: 1.5 !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

/* 文本域：更像“邮件编辑框” */
main.wrap:has(form) textarea{
  min-height: 140px !important;
  resize: vertical !important;
}

/* placeholder 要可见但不抢戏 */
main.wrap:has(form) input::placeholder,
main.wrap:has(form) textarea::placeholder{
  color: #64748B !important;
  opacity: 1 !important;
}

/* 聚焦态：明确告诉用户正在输入哪里 */
main.wrap:has(form) input:focus,
main.wrap:has(form) select:focus,
main.wrap:has(form) textarea:focus{
  outline: none !important;
  border-color: #2563EB !important;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.18),
    inset 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

/* 禁用/只读：仍保持干净，但提示不可编辑 */
main.wrap:has(form) input:disabled,
main.wrap:has(form) textarea:disabled,
main.wrap:has(form) select:disabled,
main.wrap:has(form) input[readonly],
main.wrap:has(form) textarea[readonly]{
  background: #F1F5F9 !important;
  color: #475569 !important;
  cursor: not-allowed !important;
}

/* label/说明文字更易读 */
main.wrap:has(form) label,
main.wrap:has(form) .muted{
  color: #334155 !important;
}


/* =========================
   Product detail: compact layout
   ========================= */

/* 标题更紧凑 */
#detail h1{
  margin: 10px 0 10px !important;
  line-height: 1.15 !important;
}

/* panel 内边距缩小一点 */
#detail .panel{
  padding: 10px !important;
}

/* 你 detail.html 是 JS 拼 innerHTML，外层用了 style="display:flex;gap:16px..."
   这里用更具体选择器把 gap 压小，并尽量垂直对齐 */
#detail .panel > div[style*="display:flex"]{
  gap: 10px !important;
  align-items: flex-start !important;
}

/* 主图：减少内边距、降低高度占用（不裁切，保持 contain） */
#detail img[alt][style*="width:520px"]{
  padding: 6px !important;
  border-radius: 10px !important;
  max-height: 520px !important;   /* 让首屏更紧凑 */
  object-fit: contain !important;
}

/* 右侧信息区域段落间距变小 */
#detail .panel p{
  margin: 6px 0 !important;
}

/* Status badge/小标签更紧凑（如果有） */
#detail .badge, #detail .tag, #detail .chip{
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* 缩略图网格：从 4 列保持不变，但缩小间距与尺寸 */
#detail .grid[style*="grid-template-columns"]{
  gap: 6px !important;
  margin-top: 6px !important;
}

#detail .grid[style*="grid-template-columns"] img{
  height: 64px !important;        /* 原来 80px，收紧 */
  border-radius: 8px !important;
}

/* CTA 按钮：高度更紧凑一点 */
#detail .cta{
  margin-top: 10px !important;
  gap: 8px !important;
}

#detail .cta .btn{
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* 移动端进一步紧凑 */
@media (max-width: 720px){
  #detail img[alt][style*="width:520px"]{
    max-height: 420px !important;
  }
  #detail .grid[style*="grid-template-columns"] img{
    height: 58px !important;
  }
}


/* =========================
   Contact page: compact layout
   ========================= */

/* 只在 contact 页面生效（根据 URL 兜底匹配） */
body:has(main) a[href*="company/contact.html"] {}

/* 标题区收紧 */
body:has(a[href*="company/contact.html"]) h1,
body:has(a[href*="company/contact.html"]) .page-title{
  margin: 10px 0 8px !important;
  line-height: 1.15 !important;
}

body:has(a[href*="company/contact.html"]) p{
  margin: 6px 0 !important;
}

/* 顶部三张卡：更紧凑、更像信息条 */
body:has(a[href*="company/contact.html"]) .card{
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

body:has(a[href*="company/contact.html"]) .grid{
  gap: 10px !important;
}

/* 让卡片标题/内容更紧凑 */
body:has(a[href*="company/contact.html"]) .card h3,
body:has(a[href*="company/contact.html"]) .card h4{
  margin: 0 0 6px !important;
}

body:has(a[href*="company/contact.html"]) .card .muted{
  margin-top: 4px !important;
}

/* Quote 表单面板：padding 收紧 */
body:has(a[href*="company/contact.html"]) .panel{
  padding: 12px !important;
  border-radius: 14px !important;
}

/* 表单控件：高度略收紧，仍然适合“写邮件” */
body:has(a[href*="company/contact.html"]) input[type="text"],
body:has(a[href*="company/contact.html"]) input[type="email"],
body:has(a[href*="company/contact.html"]) input[type="number"],
body:has(a[href*="company/contact.html"]) textarea,
body:has(a[href*="company/contact.html"]) select{
  padding: 9px 10px !important;
  border-radius: 10px !important;
}

body:has(a[href*="company/contact.html"]) textarea{
  min-height: 120px !important;
}

/* 表单里的栅格间距变小（Product/Qty/Email 那一行） */
body:has(a[href*="company/contact.html"]) form .grid,
body:has(a[href*="company/contact.html"]) .panel .grid{
  gap: 10px !important;
}

/* 按钮更紧凑 */
body:has(a[href*="company/contact.html"]) .btn{
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* 小提示文字别占空间（底部那行 Configure endpoint...） */
body:has(a[href*="company/contact.html"]) .panel .muted{
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* 移动端：进一步压缩上下边距 */
@media (max-width: 720px){
  body:has(a[href*="company/contact.html"]) .grid{ gap: 8px !important; }
  body:has(a[href*="company/contact.html"]) .panel{ padding: 10px !important; }
}


/* =========================
   Product list: compact layout
   Target: /products/list.html
   ========================= */

/* 仅在列表页生效：通过导航/链接结构做页面限定（你的站点导航含 Products） */
body:has(a[href*="/telecom-shop/products/list.html"]) .wrap{
  padding-top: 10px !important;
}

/* 标题更紧凑 */
body:has(a[href*="/telecom-shop/products/list.html"]) h1{
  margin: 10px 0 10px !important;
  line-height: 1.15 !important;
}

/* 筛选条整体收紧：输入框更矮、间距更小 */
body:has(a[href*="/telecom-shop/products/list.html"]) .filters,
body:has(a[href*="/telecom-shop/products/list.html"]) form[role="search"],
body:has(a[href*="/telecom-shop/products/list.html"]) .panel:has(input[placeholder*="Search"]),
body:has(a[href*="/telecom-shop/products/list.html"]) .panel:has(select){
  padding: 10px !important;
}

body:has(a[href*="/telecom-shop/products/list.html"]) input[type="text"],
body:has(a[href*="/telecom-shop/products/list.html"]) select{
  padding: 8px 10px !important;
  border-radius: 10px !important;
  height: 36px !important;
}

/* Stock 小标签（All/New/Refurbished/Used/EOL）更紧凑 */
body:has(a[href*="/telecom-shop/products/list.html"]) .chips,
body:has(a[href*="/telecom-shop/products/list.html"]) .tabs{
  gap: 6px !important;
  margin-top: 6px !important;
}

body:has(a[href*="/telecom-shop/products/list.html"]) .chip,
body:has(a[href*="/telecom-shop/products/list.html"]) .tab{
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* 卡片网格：缩小卡片间距 */
body:has(a[href*="/telecom-shop/products/list.html"]) .grid{
  gap: 10px !important; /* 原来更大，收紧 */
}

/* 单个产品卡：内边距收紧、阴影更克制（更“紧凑专业”） */
body:has(a[href*="/telecom-shop/products/list.html"]) .card,
body:has(a[href*="/telecom-shop/products/list.html"]) .product-card{
  padding: 10px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

/* 图片：降低高度占用（列表页最关键的紧凑点） */
body:has(a[href*="/telecom-shop/products/list.html"]) .card img,
body:has(a[href*="/telecom-shop/products/list.html"]) .product-card img{
  height: 140px !important;   /* 你现在看起来接近 170-200+，这里收紧 */
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* 标题/描述行距更紧凑 */
body:has(a[href*="/telecom-shop/products/list.html"]) .card h3,
body:has(a[href*="/telecom-shop/products/list.html"]) .product-card h3{
  margin: 8px 0 4px !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
}

body:has(a[href*="/telecom-shop/products/list.html"]) .card p,
body:has(a[href*="/telecom-shop/products/list.html"]) .product-card p{
  margin: 4px 0 !important;
  line-height: 1.25 !important;
  font-size: 12.5px !important;
}

/* Ready badge 更小一点 */
body:has(a[href*="/telecom-shop/products/list.html"]) .badge,
body:has(a[href*="/telecom-shop/products/list.html"]) .tag{
  padding: 2px 8px !important;
  font-size: 11.5px !important;
  border-radius: 999px !important;
}

/* 小屏：间距再压一档 */
@media (max-width: 900px){
  body:has(a[href*="/telecom-shop/products/list.html"]) .grid{ gap: 8px !important; }
  body:has(a[href*="/telecom-shop/products/list.html"]) .card img{ height: 128px !important; }
}


/* =========================
   Lightbox / Modal: match site theme
   ========================= */

/* 1) 遮罩层：从“黑夜”改成浅灰蓝半透明 */
.modal-backdrop,
.lightbox-backdrop,
.overlay,
#overlay,
[class*="backdrop"],
[class*="overlay"]{
  background: rgba(230, 236, 243, 0.86) !important; /* 与 --bg 接近 */
  backdrop-filter: blur(2px);
}

/* 2) 弹窗容器：统一成 panel 风格 */
.modal,
.lightbox,
.dialog,
#lightbox,
#modal,
[class*="modal"],
[class*="lightbox"]{
  border-radius: 16px !important;
}

/* 常见：弹窗内容区域 */
.modal-content,
.lightbox-content,
.dialog-content,
#lightbox .content,
#modal .content,
[class*="content"]{
  background: var(--surface) !important;         /* 你现在的浅灰蓝面板 */
  border: 1px solid var(--border) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16) !important;
  border-radius: 16px !important;
}

/* 3) 图片区域：不要黑底，保持干净 */
.modal-content img,
.lightbox-content img,
#lightbox img,
#modal img{
  background: #FFFFFF !important;
  border-radius: 12px !important;
}

/* 4) 关闭按钮：跟全站 primary 一致 */
.modal .close,
.lightbox .close,
button[aria-label="Close"],
button[title="Close"],
#lightbox button,
#modal button{
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.25) !important;
}

.modal .close:hover,
.lightbox .close:hover,
button[aria-label="Close"]:hover,
button[title="Close"]:hover{
  background: var(--primary-hover) !important;
}

/* 5) 弹窗底部标题/说明文字（如果有） */
.modal .caption,
.lightbox .caption,
#lightbox .caption{
  color: var(--muted) !important;
}


/* =========================
   Darker panels only (keep borders & spacing unchanged)
   ========================= */

/* 产品卡片/面板：只改 background，不碰 border/padding/margin/gap */
.card,
.panel,
.product-card{
  background: #DDE7F3 !important; /* 比你当前 surface 再深一档 */
}

/* 如果有“图片弹窗/详情弹窗”的内容区，也保持一致 */
.modal-content,
.lightbox-content{
  background: #DDE7F3 !important;
}


/* =========================
   Typography: slightly larger + brighter text
   ========================= */

/* 颜色更亮（更高对比度） */
:root{
  --text: #050B16;   /* 更接近纯黑，但仍柔和 */
  --muted: #1F2E45;  /* 次要文字也更清晰 */
}

/* 全站基础字号上调一点点（尽量不影响布局） */
html{ font-size: 16.5px; } /* 原来多半是 16px */

/* 卡片/面板内文字再稳一点（标题/描述都受益） */
.card, .panel, .product-card{
  color: var(--text);
}

.card p, .panel p, .product-card p,
.card li, .panel li, .product-card li{
  font-size: 0.98rem;
  line-height: 1.35;
}

.card h3, .product-card h3, .panel h3{
  font-size: 1.02rem;
  line-height: 1.25;
}


/* =========================
   Dark Top Navigation (override)
   ========================= */
:root{
  --nav-bg: #0B1220;
  --nav-text: #E5E7EB;
  --nav-muted: #A7B0BF;
  --nav-border: rgba(255,255,255,.10);
  --nav-hover-bg: rgba(255,255,255,.08);
  --nav-active-bg: rgba(255,255,255,.12);
  --nav-accent: var(--primary);
}

/* Common containers (best effort) */
header, .header, .topbar, .top-bar, .navbar, nav {
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  border-color: var(--nav-border) !important;
}

/* Links in header/nav */
header a, .header a, .topbar a, .top-bar a, .navbar a, nav a{
  color: var(--nav-text) !important;
  text-decoration: none;
}

header a:hover, .header a:hover, .topbar a:hover, .top-bar a:hover, .navbar a:hover, nav a:hover{
  color: #FFFFFF !important;
  background: var(--nav-hover-bg) !important;
}

/* Active/current (best effort) */
header a[aria-current="page"],
header a.active,
header .active a,
.navbar a.active,
nav a.active{
  color: #FFFFFF !important;
  background: var(--nav-active-bg) !important;
}

/* Brand/logo text */
header .brand, header .logo, .navbar-brand, .site-title{
  color: #FFFFFF !important;
}

/* Small/muted text in header */
header small, header .muted, header .subtext,
.topbar small, .navbar small{
  color: var(--nav-muted) !important;
}

/* Dropdown/menu panels (if any) */
header .dropdown-menu, header .menu, header .submenu,
.navbar .dropdown-menu, nav .dropdown-menu{
  background: #0F172A !important;
  color: var(--nav-text) !important;
  border-color: var(--nav-border) !important;
}

header .dropdown-menu a, header .menu a, header .submenu a,
.navbar .dropdown-menu a, nav .dropdown-menu a{
  color: var(--nav-text) !important;
}


/* =========================
   Dark header nav (#nav)
   ========================= */
:root{
  --nav-bg: #0B1220;
  --nav-text: #E5E7EB;
  --nav-muted: #A7B0BF;
  --nav-border: rgba(255,255,255,.12);
  --nav-hover-bg: rgba(255,255,255,.08);
  --nav-active-bg: rgba(255,255,255,.12);
  --nav-accent: var(--primary);
}

header#nav{
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  border-bottom: 1px solid var(--nav-border) !important;
}

/* Make sure the injected nav markup inherits the dark theme */
header#nav *{
  color: inherit;
}

header#nav a{
  color: var(--nav-text) !important;
  text-decoration: none;
}

header#nav a:hover{
  color: #FFFFFF !important;
  background: var(--nav-hover-bg) !important;
}

/* Common active markers */
header#nav a.active,
header#nav a[aria-current="page"]{
  color: #FFFFFF !important;
  background: var(--nav-active-bg) !important;
}

/* If there are pills/buttons in the nav */
header#nav button,
header#nav .btn{
  background: transparent !important;
  color: var(--nav-text) !important;
  border-color: var(--nav-border) !important;
}

header#nav button:hover,
header#nav .btn:hover{
  background: var(--nav-hover-bg) !important;
}

/* Optional: small text inside nav */
header#nav small,
header#nav .muted,
header#nav .subtext{
  color: var(--nav-muted) !important;
}


/* =========================
   Dark topnav (精准命中 renderNav 输出)
   ========================= */
header#nav,
header#nav .topnav{
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  border-bottom: 1px solid var(--nav-border) !important;
}

/* 确保内部容器别再“自己变浅色” */
header#nav .topnav.wrap,
header#nav .nav-menu,
header#nav .nav-links,
header#nav .nav-contact{
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
}

/* 链接（nav.js 里是 .nav-link） */
header#nav a,
header#nav .nav-link{
  color: var(--nav-text) !important;
}

header#nav a:hover,
header#nav .nav-link:hover{
  color: #FFFFFF !important;
  background: var(--nav-hover-bg) !important;
}

/* 当前页高亮（两种常见写法都兜住） */
header#nav .nav-link.active,
header#nav .nav-link[aria-current="page"]{
  color: #FFFFFF !important;
  background: var(--nav-active-bg) !important;
}

/* 折叠菜单按钮 */
header#nav .nav-toggle{
  background: transparent !important;
  color: var(--nav-text) !important;
  border: 1px solid var(--nav-border) !important;
}

header#nav .nav-toggle:hover{
  background: var(--nav-hover-bg) !important;
}


/* =========================
   Remove light translucent patches from site.css
   ========================= */

/* Ensure the bar itself is dark */
header#nav,
header#nav .topnav,
header#nav .topnav.wrap,
header#nav .nav-menu{
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
}

/* site.css adds rgba(255,255,255,.06) backgrounds here */
header#nav .brand,
header#nav .topnav .brand,
header#nav .nav-toggle{
  background: transparent !important;
  background-color: transparent !important;
}

/* Keep links readable */
header#nav a,
header#nav .nav-link,
header#nav .nav-menu a{
  color: var(--nav-text) !important;
}


/* Fix: site.css gives .nav-toggle a light translucent background */
#nav .nav-toggle{
  background: rgba(255,255,255,.10) !important; /* subtle light on dark */
  border-color: rgba(255,255,255,.22) !important;
  color: #FFFFFF !important;
}

#nav .nav-toggle:hover{
  background: rgba(255,255,255,.16) !important;
}


/* =========================
   Dark-theme CTA buttons tuning
   ========================= */
:root{
  --cta-bg: #1f3a8a;        /* deep indigo */
  --cta-bg-hover: #1d4ed8;  /* slightly brighter on hover */
  --cta-text: #ffffff;
  --cta-border: rgba(255,255,255,.16);
  --cta-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* Generic buttons + common link-buttons */
button,
.btn,
a.btn,
a.button,
.button{
  border-radius: 10px;
}

/* Primary-looking buttons: cover most "blue pill" styles */
button[type="submit"],
a[href*="quote"],
a[href*="repair"],
a[href*="sell"],
a.btn-primary,
button.btn-primary,
.button.primary,
.btn.primary{
  background: var(--cta-bg) !important;
  color: var(--cta-text) !important;
  border: 1px solid var(--cta-border) !important;
  box-shadow: var(--cta-shadow);
}

button[type="submit"]:hover,
a[href*="quote"]:hover,
a[href*="repair"]:hover,
a[href*="sell"]:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.button.primary:hover,
.btn.primary:hover{
  background: var(--cta-bg-hover) !important;
}

/* Secondary buttons (e.g., Back) */
button[type="button"],
button.back,
a.back,
.btn-secondary,
button.btn-secondary{
  background: rgba(255,255,255,.08) !important;
  color: #eaf0ff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

button[type="button"]:hover,
button.back:hover,
a.back:hover,
.btn-secondary:hover,
button.btn-secondary:hover{
  background: rgba(255,255,255,.12) !important;
}


/* Home hero buttons: make CTA match dark top nav */
a{
  -webkit-tap-highlight-color: transparent;
}

/* Target "button-like" links (common in hero sections) */
main a,
.hero a,
.actions a,
.cta a{
  text-decoration: none;
}

/* This selector hits links that look like pills/buttons */
main a.btn,
main a.button,
main a[class*="btn"],
main a[class*="button"],
.hero a,
.actions a{
  background: #1f3a8a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 10px !important;
}

main a.btn:hover,
main a.button:hover,
main a[class*="btn"]:hover,
main a[class*="button"]:hover,
.hero a:hover,
.actions a:hover{
  background: #1d4ed8 !important;
}


/* Detail page CTA group: force consistent theme */
.products-detail .actions a,
.products-detail .actions button,
.product-detail .actions a,
.product-detail .actions button,
#productDetail .actions a,
#productDetail .actions button,
a.cta,
button.cta{
  background: #1f3a8a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 10px !important;
}

.products-detail .actions a:hover,
.products-detail .actions button:hover,
.product-detail .actions a:hover,
.product-detail .actions button:hover,
#productDetail .actions a:hover,
#productDetail .actions button:hover,
a.cta:hover,
button.cta:hover{
  background: #1d4ed8 !important;
}