/* ============================================================
   LEMAR SunTech — premium.css  (iOS 27 Liquid Glass skin)
   Loaded AFTER style.css / lemar-shared.css on every page.
   Upgrades navigation, cards, buttons and imagery to a frosted
   liquid-glass look in both light and dark themes.
   ============================================================ */

/* ---------- Glass navigation ---------- */
nav#mainNav {
  background: rgba(16, 4, 0, 0.55) !important;
  backdrop-filter: blur(26px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.7) !important;
  border-bottom: 1px solid rgba(255, 185, 110, 0.16) !important;
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] nav#mainNav {
  background: rgba(255, 250, 242, 0.62) !important;
  border-bottom: 1px solid rgba(140, 70, 0, 0.10) !important;
}

/* ---------- Liquid-glass cards, sitewide ---------- */
.hp-card, .pc, .project-card, .info-card, .feature, .mission-card,
.vision-card, .value-card, .why-strip-card, .contact-card,
.form-container, .product-card, .why-item, .stat-item {
  border-radius: 24px !important;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--g-border, rgba(255, 255, 255, 0.4)) !important;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0.28, 1),
              box-shadow 0.35s cubic-bezier(0.32, 0.72, 0.28, 1) !important;
}
.hp-card:hover, .pc:hover, .project-card:hover, .info-card:hover,
.feature:hover, .value-card:hover {
  transform: translateY(-5px) scale(1.012);
}
.hp-card:active, .pc:active, .project-card:active { transform: scale(0.985); }

/* ---------- Pill buttons ---------- */
.btn, .hp-btn, .pc-btn, .product-btn, .submit-btn, .mm-wa-btn {
  border-radius: 100px !important;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0.28, 1),
              box-shadow 0.25s ease, filter 0.25s ease !important;
  box-shadow: 0 10px 26px -8px rgba(232, 85, 0, 0.55),
              inset 0 1px 1.5px rgba(255, 255, 255, 0.55) !important;
}
.btn:active, .hp-btn:active, .pc-btn:active, .product-btn:active,
.submit-btn:active { transform: scale(0.94) !important; }
.wa-btn, .lang-btn, .theme-btn, .mm-lang-btn {
  border-radius: 100px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- Brand pills / filter chips ---------- */
.br-pill, .filter-btn {
  border-radius: 100px !important;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transition: all 0.25s cubic-bezier(0.32, 0.72, 0.28, 1) !important;
}
.br-pill:active, .filter-btn:active { transform: scale(0.92); }

/* ---------- Product / project imagery ---------- */
.pc-img img.logo-photo, .hp-img img.logo-photo {
  object-fit: contain !important;
  background: #fff !important;
  padding: 14% !important;
}
.hp-img img { border-radius: 0 0 0 0; }
.hp-brand {
  display: inline-block;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber, #f5a800);
  background: rgba(245, 168, 0, 0.12);
  border: 1px solid rgba(245, 168, 0, 0.28);
  padding: 3px 10px; border-radius: 100px; margin-bottom: 8px;
}

/* projects (media page) */
.prj-img { position: relative; height: 210px; overflow: hidden; }
.prj-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover .prj-img img { transform: scale(1.08); }
.prj-size {
  position: absolute; top: 12px; inset-inline-end: 12px;
  font-size: 0.68rem; font-weight: 800; color: #fff;
  background: rgba(232, 85, 0, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 12px; border-radius: 100px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -4px rgba(232, 85, 0, 0.6);
}
.prj-loc { font-size: 0.82rem; opacity: 0.75; margin: 4px 0 8px; }
.prj-desc { font-size: 0.85rem; line-height: 1.65; }

/* ---------- Mobile menu glass ---------- */
.mobile-menu {
  backdrop-filter: blur(30px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.8) !important;
}

/* ---------- Footer ---------- */
footer {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 185, 110, 0.14) !important;
}

/* ---------- Softer section transitions ---------- */
.section-divider { border-radius: 100px; }
img { -webkit-user-drag: none; }

/* ---------- Calculator-page friendliness on small phones ---------- */
@media (max-width: 380px) {
  .wrap { padding: 14px 12px 40px !important; }
  .card { padding: 16px !important; border-radius: 20px !important; }
  .results { gap: 8px !important; }
  .fact .f-val { font-size: 14px !important; }
}

/* ---------- Catalog card styles (shared with brand pages) ----------
   Copied from products.html so brand-*.html render the same cards. */
.prod-grid-wrap{max-width:1100px;margin:0 auto;padding:22px 24px 80px;}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* PREMIUM PRODUCT CARD */
.pc{position:relative;display:flex;flex-direction:column;background:var(--g-bg);border:1px solid var(--g-border);border-radius:24px;overflow:hidden;box-shadow:var(--g-shadow);transition:transform .42s var(--spring),box-shadow .42s var(--eout),border-color .22s;will-change:transform;}
[data-theme="dark"] .pc{background:rgba(20,5,0,.78);}
.pc::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,0.82) 50%,transparent 95%);z-index:3;pointer-events:none;}
.pc::after{content:'';position:absolute;top:-40%;left:-20%;width:80%;height:60%;background:radial-gradient(ellipse,rgba(232,85,0,0.08),transparent 70%);pointer-events:none;opacity:0;transition:opacity .34s var(--eout);}
.pc:hover::after{opacity:1;}
.pc:hover{transform:translateY(-14px) scale(1.016);border-color:rgba(232,85,0,0.36);box-shadow:0 2px 4px rgba(0,0,0,0.06),0 20px 52px rgba(0,0,0,0.18),0 0 0 1px rgba(232,85,0,0.22),0 1px 0 rgba(255,255,255,0.82) inset;}
[data-theme="dark"] .pc:hover{background:rgba(38,12,0,.88);}

/* Card image */
.pc-img{width:100%;height:200px;overflow:hidden;position:relative;background:linear-gradient(135deg,#160200,#2a0800);flex-shrink:0;}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .52s cubic-bezier(.22,1,.36,1);}
.pc:hover .pc-img img{transform:scale(1.10);}
.pc-img::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,2,0,0.50) 0%,transparent 55%);pointer-events:none;}

/* Badges */
.pc-badge-cat,.pc-badge-brand{position:absolute;z-index:2;font-size:.55rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--rF);border:1px solid transparent;}
.pc-badge-cat{top:10px;left:10px;background:rgba(0,0,0,0.56);border-color:rgba(255,255,255,0.16);color:#ffd166;}
.pc-badge-brand{top:10px;right:10px;background:rgba(232,85,0,0.86);border-color:rgba(255,255,255,0.20);color:#fff;box-shadow:0 2px 8px rgba(232,85,0,0.30);}

/* Card body */
.pc-body{padding:20px 18px 18px;display:flex;flex-direction:column;flex:1;position:relative;z-index:2;}
.pc-body h3{font-size:.94rem;font-weight:800;color:var(--t1);line-height:1.26;letter-spacing:-.016em;margin-bottom:10px;}
.pc-specs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:11px;}
.pc-spec{font-size:.57rem;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:var(--rF);background:rgba(232,85,0,0.08);border:1px solid rgba(232,85,0,0.18);color:var(--sun);transition:background .18s;}
.pc:hover .pc-spec{background:rgba(232,85,0,0.14);}
[data-theme="dark"] .pc-spec{background:rgba(232,85,0,0.13);color:#ffd166;}
.pc-body p{font-size:.76rem;color:var(--t2);line-height:1.60;flex:1;margin-bottom:16px;}
.pc-btn{width:100%;padding:12px;border:none;border-radius:var(--rF);cursor:pointer;font-size:.79rem;font-weight:800;color:#fff;font-family:var(--font);background:linear-gradient(135deg,var(--fire),var(--sun) 50%,var(--amber));position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(196,51,0,0.32),0 1px 0 rgba(255,255,255,0.22) inset;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .26s var(--spring);}
.pc-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.14),transparent 55%);pointer-events:none;}
.pc-btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(196,51,0,0.46);filter:brightness(1.08);}
.pc-btn:active{transform:scale(0.97);}

.pc-img img.real-photo{object-fit:contain;background:#fff;padding:10px;}

/* Responsive */

.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:860px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media(max-width:560px){.prod-grid{grid-template-columns:1fr;}}

/* ---------- Variable fallbacks for brand pages (zero specificity:
   style.css definitions always win on pages that load it) ---------- */
:where(:root) {
  --sun:#e85500; --fire:#c43300; --amber:#f5a800; --gold:#ffd166; --cream:#fff8ee;
  --g-bg:rgba(255,255,255,0.88); --g-border:rgba(255,255,255,0.60);
  --g-shadow:0 1px 2px rgba(58,20,0,0.05), 0 10px 34px rgba(58,20,0,0.10), 0 1px 0 rgba(255,255,255,0.95) inset;
  --g-shadow-h:0 6px 12px rgba(58,20,0,0.08), 0 34px 80px rgba(58,20,0,0.22), 0 0 0 1px rgba(232,85,0,0.30);
  --t1:#170500; --t2:#43220a; --t3:#744020; --tm:#96522e;
  --b1:rgba(140,70,0,0.12); --b2:rgba(190,100,20,0.20);
  --rF:100px; --spring:cubic-bezier(0.34,1.56,0.64,1); --eout:cubic-bezier(0,0,0.2,1);
  --font:'Inter',-apple-system,'SF Pro Display',system-ui,sans-serif;
}
:where([data-theme="dark"]) {
  --g-bg:rgba(22,7,0,0.92); --g-border:rgba(255,165,50,0.11);
  --g-shadow:0 1px 2px rgba(0,0,0,0.30), 0 12px 34px rgba(0,0,0,0.50), 0 1px 0 rgba(255,190,80,0.06) inset;
  --g-shadow-h:0 8px 12px rgba(0,0,0,0.34), 0 34px 80px rgba(0,0,0,0.66), 0 0 0 1px rgba(232,113,10,0.36);
  --t1:#fff4ec; --t2:#e6bd85; --t3:#bc6e30; --tm:#9c5528;
  --b1:rgba(232,113,10,0.12); --b2:rgba(232,113,10,0.24);
}

/* ============================================================
   CLEAN PRODUCT CARDS v2 — simpler, calmer layout
   (overrides the copied products.html card styles above)
   ============================================================ */
.pc-img {
  height: 185px !important;
  background: #fff !important;
}
.pc-img::after { content: none !important; }          /* no dark overlay */
.pc-img img {
  object-fit: contain !important;                      /* full product visible */
  padding: 14px !important;
  background: #fff;
}
.pc-img img.logo-photo { padding: 20% !important; }
.pc:hover .pc-img img { transform: scale(1.04) !important; }
.pc-badge-cat, .pc-badge-brand { display: none !important; }

.pc:hover { transform: translateY(-6px) !important; }

.pc-body { padding: 16px 16px 16px !important; }
.pc-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 9px;
}
.pc-brand {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber, #f5a800);
  background: rgba(245, 168, 0, 0.12);
  border: 1px solid rgba(245, 168, 0, 0.3);
  padding: 3px 10px; border-radius: 100px;
}
.pc-cat { font-size: 0.62rem; font-weight: 600; color: var(--t3); }
.pc-body h3 {
  font-size: 0.95rem !important;
  margin-bottom: 7px !important;
  min-height: 2.5em;
}
.pc-desc {
  font-size: 0.79rem !important; color: var(--t3) !important;
  line-height: 1.62 !important; margin-bottom: 12px !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-specs { gap: 5px !important; margin-bottom: 14px !important; }
.pc-btn { width: 100%; justify-content: center; }