/* ================================================================
   LITTLEMAKER CAMBODIA — style.css v3.0
   Premium industrial aesthetic with smooth animations
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Barlow+Condensed:wght@500;600;700;800;900&display=swap');

/* ── CSS Variables ── */
:root {
  --blue:      #004d99;
  --blue-l:    #0066cc;
  --blue-ll:   #e8f0fa;
  --orange:    #f90;
  --orange-d:  #e68a00;
  --red:       #cc0000;
  --dark:      #0f1923;
  --dark-2:    #1a2535;
  --dark-3:    #243040;
  --light:     #f3f6fa;
  --light-2:   #e8edf5;
  --card:      #fff;
  --text:      #1e2a38;
  --muted:     #5a6a7e;
  --border:    #dde4ef;
  --white:     #fff;

  --sh1: 0 1px 8px rgba(0,0,0,.06);
  --sh2: 0 6px 28px rgba(0,77,153,.11);
  --sh3: 0 18px 56px rgba(0,0,0,.14);

  --r:    14px;
  --r-sm:  7px;
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --t: all .28s var(--ease);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'Barlow',sans-serif;
  font-size:16px; line-height:1.65;
  color:var(--text);
  background:#fff;
  overflow-x:hidden;
}
ul { list-style:none }
a  { text-decoration:none; color:inherit }
img { max-width:100%; display:block }

/* diagonal grid texture */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(0,77,153,.018) 40px,
      rgba(0,77,153,.018) 41px
    );
  pointer-events:none; z-index:0;
}

/* ── Utilities ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px }
.section-padding { padding:100px 0 }
.pt-20    { padding-top:20px }
.bg-light { background:var(--light) }
.bg-dark  { background:var(--dark); color:var(--white) }
.text-white  { color:var(--white) }
.text-grey   { color:#888 }
.text-center { text-align:center }

/* Eyebrow label */
.sub-heading {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.78rem; font-weight:700;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--orange);
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.sub-heading::before,
.sub-heading::after {
  content:'';
  width:24px; height:2px;
  background:var(--orange);
  border-radius:2px;
}

.section-header { text-align:center; margin-bottom:64px }
.section-header h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.2rem,4vw,3rem);
  font-weight:900;
  color:var(--blue);
  letter-spacing:-1px;
  line-height:1.05;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 34px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.05rem; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
  border-radius:var(--r-sm);
  border:2px solid transparent;
  cursor:pointer; transition:var(--t);
  position:relative; overflow:hidden;
  white-space:nowrap;
}
/* shine sweep */
.btn::after {
  content:'';
  position:absolute; top:0; left:-110%;
  width:65%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
}
.btn:hover::after { left:130% }
.btn:active { transform:scale(.97) }

.btn-primary {
  background:linear-gradient(135deg,var(--orange),var(--orange-d));
  color:#fff;
  box-shadow:0 4px 20px rgba(255,153,0,.38);
}
.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(255,153,0,.5);
}

.btn-outline {
  border-color:rgba(255,255,255,.7);
  color:#fff;
  backdrop-filter:blur(8px);
}
.btn-outline:hover {
  background:rgba(255,255,255,.16);
  border-color:#fff;
  transform:translateY(-3px);
}

.btn-link {
  color:#fff; font-family:'Barlow Condensed',sans-serif;
  font-size:1rem; font-weight:700; letter-spacing:.5px;
  margin-top:18px;
  display:inline-flex; align-items:center; gap:9px;
  border-bottom:2px solid var(--orange);
  padding-bottom:3px; transition:gap .3s;
}
.btn-link:hover { gap:15px }

/* ── Navbar ── */
.navbar {
  position:sticky; top:0; z-index:1000;
  height:70px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--sh1);
  display:flex; align-items:center;
  transition:height .3s var(--ease), box-shadow .3s;
}
.navbar.scrolled { height:62px; box-shadow:var(--sh2) }

.navbar .container {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; max-width:100%; padding:0 36px;
}

/* Logo */
.logo {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.6rem; font-weight:900;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--red);
  display:flex; align-items:center; gap:10px;
  transition:var(--t);
}
.logo i {
  color:var(--blue);
  animation:gearSpin 12s linear infinite;
  transform-origin:center;
}
@keyframes gearSpin { to { transform:rotate(360deg) } }
.logo:hover { opacity:.8; transform:scale(1.02) }

/* Nav menu */
.nav-menu { display:flex; align-items:center; gap:28px }
.nav-link {
  font-family:'Barlow',sans-serif;
  font-weight:600; font-size:.92rem;
  color:var(--text);
  display:flex; align-items:center; gap:7px;
  padding:4px 0; position:relative;
  transition:color .22s;
}
.nav-link i { font-size:.9em; opacity:.7; transition:transform .25s }
.nav-link:hover i { transform:translateY(-2px); opacity:1 }
.nav-link::after {
  content:''; position:absolute;
  bottom:-2px; left:0;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--orange),var(--blue));
  border-radius:2px;
  transition:width .3s var(--ease);
}
.nav-link:hover, .nav-link.active { color:var(--blue) }
.nav-link:hover::after, .nav-link.active::after { width:100% }

.mobile-only { display:none }
.mobile-bottom-bar { display:none }

/* Cart icon */
.cart-wrapper {
  position:relative; font-size:1.2rem; cursor:pointer;
  padding:8px; border-radius:50%;
  color:var(--text); transition:var(--t);
  display:flex; align-items:center;
}
.cart-wrapper:hover { background:var(--light); color:var(--blue) }
.cart-badge {
  position:absolute; top:0; right:0;
  background:var(--red); color:#fff;
  font-size:.62rem; font-weight:800;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
  transition:transform .22s var(--spring);
}
.cart-badge.bump { transform:scale(1.7) }

.nav-controls { display:flex; align-items:center; gap:8px }
.menu-toggle  { display:none; cursor:pointer }
.bar {
  display:block; width:24px; height:2.5px;
  margin:5px; background:var(--text);
  border-radius:2px; transition:var(--t);
}

/* ── Page Header ── */
.page-header {
  height:300px;
  background:
    linear-gradient(140deg, rgba(0,18,50,.82) 0%, rgba(0,60,140,.6) 100%),
    url('../images/R2.png') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
/* animated diagonal scan line */
.page-header::after {
  content:'';
  position:absolute; top:0; left:-120%;
  width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:scanLine 5s ease-in-out infinite;
}
@keyframes scanLine { to { left:150% } }
.page-header .container { position:relative; z-index:1 }
.page-header h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.2rem,5vw,3.2rem);
  font-weight:900; letter-spacing:-1px;
  margin-bottom:10px;
  text-shadow:0 4px 28px rgba(0,0,0,.45);
  animation:headIn .65s var(--ease) both;
}
.page-header p {
  font-size:1.1rem; opacity:.88;
  animation:headIn .65s .12s var(--ease) both;
}
@keyframes headIn {
  from { opacity:0; transform:translateY(-20px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ── Hero ── */
.hero {
  min-height:90vh;
  background-image:url('../images/backgroud_1.png');
  background-size:cover; background-position:center;
  background-attachment:fixed;
  position:relative; display:flex; align-items:center;
  overflow:hidden;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    130deg,
    rgba(0,14,45,.88) 0%,
    rgba(0,50,120,.6) 50%,
    rgba(0,30,80,.2) 100%
  );
}
/* animated bokeh dots */
.hero-overlay::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle 3px at 18% 28%, rgba(255,153,0,.8) 0%, transparent 0%),
    radial-gradient(circle 2px at 72% 58%, rgba(255,255,255,.6) 0%, transparent 0%),
    radial-gradient(circle 3px at 85% 25%, rgba(255,153,0,.6) 0%, transparent 0%),
    radial-gradient(circle 2px at 42% 75%, rgba(255,255,255,.5) 0%, transparent 0%),
    radial-gradient(circle 2px at 58% 38%, rgba(255,200,80,.55) 0%, transparent 0%),
    radial-gradient(circle 1px at 28% 62%, rgba(255,255,255,.4) 0%, transparent 0%);
  background-size:320px 320px;
  animation:bokeh 10s ease-in-out infinite alternate;
}
@keyframes bokeh {
  from { transform:translate(0,0) scale(1) }
  to   { transform:translate(18px,-22px) scale(1.04) }
}

.hero-content { position:relative; z-index:1; color:#fff; max-width:800px }
.hero h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.6rem,6vw,4.6rem);
  font-weight:900; line-height:1.05;
  letter-spacing:-2px; margin-bottom:22px;
}
.hero p {
  font-size:1.12rem; margin-bottom:40px;
  opacity:.9; max-width:560px; line-height:1.75;
  font-weight:400;
}
.highlight {
  color:var(--orange);
  position:relative; white-space:nowrap;
}
.highlight::after {
  content:'';
  position:absolute; bottom:6px; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--orange),transparent);
  border-radius:2px;
}
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap }

/* ── Grid / Cols ── */
.row      { display:flex; flex-wrap:wrap; margin:0 -16px }
.col-half { width:50%; padding:0 16px }

/* ── Feature Boxes ── */
.feature-box {
  height:310px;
  background-size:cover; background-position:center;
  border-radius:var(--r);
  position:relative; overflow:hidden;
  margin-bottom:20px;
  box-shadow:var(--sh2);
  cursor:pointer;
  transition:transform .45s var(--ease), box-shadow .45s;
}
.feature-box::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,77,153,.15),transparent);
  opacity:0; transition:opacity .4s; z-index:1;
}
.feature-box:hover { transform:translateY(-8px) scale(1.01); box-shadow:var(--sh3) }
.feature-box:hover::before { opacity:1 }

.box-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.16) 55%, transparent 100%);
  display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-start;
  color:#fff; padding:30px;
  transition:background .4s;
}
.box-overlay h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.5rem; font-weight:800;
  letter-spacing:.3px; margin-bottom:6px;
}
.box-overlay p { font-size:.92rem; opacity:.85; margin-bottom:12px }
.feature-box:hover .box-overlay {
  background:linear-gradient(0deg,rgba(0,55,140,.84) 0%,rgba(0,0,0,.1) 65%,transparent 100%);
}

/* About */
.about-img {
  width:100%; border-radius:var(--r);
  box-shadow:var(--sh3);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.about-img:hover { transform:translateY(-8px) rotate(.4deg); box-shadow:0 32px 72px rgba(0,0,0,.22) }

.content-center { display:flex; flex-direction:column; justify-content:center }
.content-center h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.4rem; font-weight:900;
  color:var(--blue); margin-bottom:18px;
  letter-spacing:-1px; line-height:1.1;
}
.content-center p { color:var(--muted); margin-bottom:14px; line-height:1.8 }

.feature-list { margin-top:22px }
.feature-list li {
  margin-bottom:10px;
  display:flex; align-items:center; gap:12px;
  font-weight:500; padding:10px 14px;
  border-radius:var(--r-sm);
  border-left:3px solid transparent;
  transition:background .22s, border-color .22s;
}
.feature-list li:hover { background:rgba(0,77,153,.06); border-left-color:var(--orange) }
.feature-list i { color:var(--orange); font-size:1.1rem; flex-shrink:0 }

/* ── CTA ── */
.cta-section {
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 100%);
  position:relative; overflow:hidden;
}
/* decorative circle */
.cta-section::before {
  content:'';
  position:absolute; top:-160px; right:-160px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,153,0,.1) 0%,transparent 70%);
  animation:pulse 6s ease-in-out infinite;
}
.cta-section::after {
  content:'';
  position:absolute; bottom:-80px; left:-80px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,77,153,.12) 0%,transparent 70%);
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.cta-section h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.8rem; font-weight:900; letter-spacing:-1px;
}

/* ── Services ── */
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:24px;
}
.service-card {
  background:var(--card);
  padding:44px 32px;
  border-radius:var(--r);
  box-shadow:var(--sh1);
  border:1px solid var(--border);
  position:relative; overflow:hidden;
  text-align:center;
  transition:transform .32s var(--ease), box-shadow .32s, border-color .32s;
}
/* animated top bar */
.service-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--orange),var(--red));
  background-size:200%;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.service-card:hover::before { transform:scaleX(1) }
.service-card:hover {
  transform:translateY(-10px);
  box-shadow:var(--sh2); border-color:rgba(0,77,153,.2);
}

.icon-box {
  font-size:2.8rem; color:var(--blue);
  margin-bottom:22px; display:inline-block;
  transition:transform .35s var(--spring), color .3s;
}
.service-card:hover .icon-box { transform:scale(1.22) rotate(-8deg); color:var(--orange) }
.service-card h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.25rem; font-weight:800;
  letter-spacing:.2px; margin-bottom:12px; color:var(--dark);
}
.service-card p { color:var(--muted); font-size:.9rem; line-height:1.7 }

/* ── Shop / Products ── */
.filter-section { display:flex; flex-direction:column; align-items:center; gap:22px; margin-bottom:52px }

.search-wrapper { position:relative; width:100%; max-width:520px }
.search-wrapper input {
  width:100%; padding:14px 28px; padding-right:60px;
  border:2px solid var(--border); border-radius:50px;
  font-family:'Barlow',sans-serif; font-size:.95rem;
  background:var(--card); color:var(--text);
  transition:var(--t); box-shadow:var(--sh1); outline:none;
}
.search-wrapper input:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,77,153,.1);
}
.search-wrapper button {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:none; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  color:#fff; cursor:pointer; transition:var(--t);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.search-wrapper button:hover { transform:translateY(-50%) scale(1.1); box-shadow:0 4px 16px rgba(0,77,153,.3) }

.filter-container { display:flex; justify-content:center; flex-wrap:wrap; gap:10px }
.filter-btn {
  font-family:'Barlow Condensed',sans-serif;
  padding:9px 28px; background:transparent;
  border:2px solid var(--border); border-radius:50px;
  cursor:pointer; font-weight:700; font-size:.95rem;
  letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); transition:var(--t);
}
.filter-btn:hover, .filter-btn.active {
  border-color:var(--blue); background:var(--blue);
  color:#fff; box-shadow:0 4px 16px rgba(0,77,153,.28);
  transform:translateY(-2px);
}

.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:28px }

.product-card {
  background:var(--card); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh1);
  border:1px solid var(--border);
  transition:transform .35s var(--ease), box-shadow .35s;
  position:relative;
}
.product-card:hover { transform:translateY(-8px); box-shadow:var(--sh2) }

.product-img { height:240px; position:relative; overflow:hidden; background:var(--light) }
.product-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease);
}
.product-card:hover .product-img img { transform:scale(1.08) }

/* hover overlay */
.product-img::after {
  content:'\f06e  View';
  font-family:'Font Awesome 6 Free', 'Barlow', sans-serif;
  font-weight:900;
  position:absolute; inset:0;
  background:rgba(0,60,140,.55);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1rem; gap:8px;
  opacity:0; transition:opacity .3s;
  letter-spacing:.5px;
}
.product-card:hover .product-img::after { opacity:1 }

.badge-new, .badge-sale {
  position:absolute; top:12px; left:12px;
  font-family:'Barlow Condensed',sans-serif;
  padding:4px 13px; border-radius:50px;
  color:#fff; font-size:.75rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.8px;
  z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.badge-new  { background:linear-gradient(135deg,var(--blue),#0080ff) }
.badge-sale { background:linear-gradient(135deg,var(--red),#ff3333) }

.product-details { padding:18px 20px }
.product-cat {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem; color:var(--blue);
  text-transform:uppercase; letter-spacing:2px;
  display:block; margin-bottom:7px; font-weight:700;
}
.product-details h4 {
  font-family:'Barlow',sans-serif;
  font-size:1rem; font-weight:700;
  margin-bottom:6px; color:var(--dark); line-height:1.35;
  transition:color .22s;
}
.product-card:hover .product-details h4 { color:var(--blue) }
.product-desc {
  font-size:.85rem; color:var(--muted);
  margin-bottom:14px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.product-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:13px; border-top:1px solid var(--border);
}
.price {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.4rem; font-weight:900;
  color:var(--red); letter-spacing:-.3px;
}
.old-price { font-size:.88rem; text-decoration:line-through; color:#bbb; margin-right:4px }

.btn-cart {
  background:var(--light); border:1.5px solid var(--border);
  padding:8px 16px; border-radius:var(--r-sm);
  cursor:pointer; font-family:'Barlow',sans-serif;
  font-weight:700; font-size:.82rem;
  color:var(--text); transition:var(--t);
  display:flex; align-items:center; gap:6px;
}
.btn-cart:hover {
  background:var(--orange); border-color:var(--orange);
  color:#fff; transform:scale(1.06);
  box-shadow:0 4px 14px rgba(255,153,0,.4);
}

/* ── Product Detail ── */
.breadcrumb { padding:18px 0; color:var(--muted); font-size:.88rem }
.breadcrumb a { color:var(--blue); transition:color .2s }
.breadcrumb a:hover { text-decoration:underline }

.product-detail-wrapper {
  display:grid; grid-template-columns:1fr 1fr; gap:44px;
  background:var(--card); border-radius:var(--r);
  padding:32px; box-shadow:var(--sh2); border:1px solid var(--border);
}
.product-gallery { display:flex; flex-direction:column; gap:14px }

.main-image-container {
  position:relative; width:100%; border-radius:var(--r);
  overflow:hidden; border:1px solid var(--border);
  background:var(--light);
}
.main-image img { width:100%; height:auto; display:block; transition:transform .4s }
.main-image-container:hover .main-image img { transform:scale(1.03) }

.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.95); color:var(--dark);
  border:none; width:42px; height:42px; border-radius:50%;
  cursor:pointer; transition:var(--t); z-index:2;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh1);
}
.slider-btn:hover { background:var(--blue); color:#fff; transform:translateY(-50%) scale(1.1) }
.slider-btn.prev { left:12px }
.slider-btn.next { right:12px }

.thumb-list { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px }
.thumb-item {
  width:76px; height:76px; border:2px solid transparent;
  border-radius:var(--r-sm); cursor:pointer; opacity:.6;
  flex-shrink:0; overflow:hidden; transition:var(--t);
}
.thumb-item.active, .thumb-item:hover { border-color:var(--blue); opacity:1 }
.thumb-item img { width:100%; height:100%; object-fit:cover }

.product-info h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2rem; font-weight:900; letter-spacing:-.5px;
  margin-bottom:14px; color:var(--dark); line-height:1.2;
}
.price-tag {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.2rem; color:var(--red); font-weight:900;
  margin-bottom:14px; letter-spacing:-.5px;
  background:rgba(204,0,0,.06);
  display:inline-block; padding:6px 18px;
  border-radius:var(--r-sm); border-left:3px solid var(--red);
}
.stock-status { color:#22a746; font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:7px; font-size:.92rem }
.short-desc { color:var(--muted); margin-bottom:26px; border-bottom:1px solid var(--border); padding-bottom:20px; line-height:1.8 }

.quantity-selector { margin-bottom:26px; display:flex; align-items:center; gap:18px; font-weight:600 }
.qty-input { width:54px; text-align:center; border:1.5px solid var(--border); border-radius:var(--r-sm); height:38px; font-size:1rem; font-weight:700; font-family:'Barlow',sans-serif }

.action-buttons { display:flex; gap:14px; margin-bottom:18px }
.btn-action {
  flex:1; padding:14px; border:none; border-radius:var(--r-sm);
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.05rem; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; cursor:pointer; transition:var(--t); text-align:center;
}
.btn-action.add-cart {
  background:linear-gradient(135deg,#ffd700,#ffa500); color:#1a1a1a;
  box-shadow:0 4px 14px rgba(255,165,0,.3);
}
.btn-action.add-cart:hover  { transform:translateY(-3px); box-shadow:0 8px 24px rgba(255,165,0,.45) }
.btn-action.buy-now {
  background:linear-gradient(135deg,var(--red),#ff2020); color:#fff;
  box-shadow:0 4px 14px rgba(204,0,0,.3);
}
.btn-action.buy-now:hover  { transform:translateY(-3px); box-shadow:0 8px 24px rgba(204,0,0,.45) }

.chat-seller-btn {
  display:inline-flex; align-items:center; gap:9px;
  color:#229ED9; font-weight:700; margin-top:10px;
  padding:9px 18px; border-radius:var(--r-sm);
  border:1.5px solid rgba(34,158,217,.3);
  transition:var(--t); font-size:.95rem;
}
.chat-seller-btn:hover { background:rgba(34,158,217,.08); transform:translateY(-2px) }

.product-tabs { margin-top:36px; background:var(--card); padding:26px; border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--sh1) }
.tab-headers  { display:flex; border-bottom:2px solid var(--border); margin-bottom:22px }
.tab-btn {
  font-family:'Barlow Condensed',sans-serif;
  padding:10px 24px; background:none; border:none;
  font-size:1rem; cursor:pointer; color:var(--muted);
  border-bottom:3px solid transparent; margin-bottom:-2px;
  font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  transition:var(--t);
}
.tab-btn.active { color:var(--blue); border-bottom-color:var(--blue) }
.tab-btn:hover:not(.active) { color:var(--blue) }
.tab-content { display:none; color:var(--muted); line-height:1.8 }

.specs-table { width:100%; border-collapse:collapse; margin-top:10px }
.specs-table th, .specs-table td { padding:12px 16px; border:1px solid var(--border); text-align:left }
.specs-table th { background:var(--light); font-weight:700; width:32%; color:var(--dark); font-size:.88rem }
.specs-table tr:hover td { background:rgba(0,77,153,.025) }

.mobile-action-bar {
  display:none; position:fixed; bottom:0; left:0;
  width:100%; height:60px; background:#fff;
  box-shadow:0 -3px 20px rgba(0,0,0,.12); z-index:10000;
}
@media(max-width:768px) {
  .mobile-action-bar {
    bottom:64px; /* sit above the bottom tab nav bar */
  }
}
.mobile-action-bar .action-btn { display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:800; cursor:pointer }
.mobile-action-bar .chat    { width:20%; flex-direction:column; font-size:.68rem; color:var(--muted); gap:3px; border-right:1px solid var(--border) }
.mobile-action-bar .chat i  { font-size:1.2rem; color:#229ED9 }
.mobile-action-bar .add-cart { width:40%; background:linear-gradient(135deg,#ffd700,#ffa500); color:#1a1a1a }
.mobile-action-bar .buy-now  { width:40%; background:linear-gradient(135deg,var(--red),#ff2020); color:#fff }

/* ── Contact ── */
.contact-form { background:var(--card); padding:40px; border-radius:var(--r); box-shadow:var(--sh2); border:1px solid var(--border) }
.form-group { margin-bottom:18px }
.form-group input, .form-group textarea {
  width:100%; padding:14px 18px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-family:'Barlow',sans-serif; font-size:.95rem;
  background:var(--card); color:var(--text); transition:var(--t);
}
.form-group input:focus, .form-group textarea:focus {
  border-color:var(--blue); outline:none;
  box-shadow:0 0 0 4px rgba(0,77,153,.09);
}
.full-width { width:100% }

.contact-buttons-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:14px; margin-top:28px }
.contact-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 10px; background:var(--card);
  border:1.5px solid var(--border); border-radius:var(--r);
  transition:var(--t); text-align:center;
  box-shadow:var(--sh1); color:var(--dark);
}
.contact-btn:hover { transform:translateY(-5px); box-shadow:var(--sh2) }
.contact-btn .icon-wrapper {
  width:46px; height:46px; border-radius:50%;
  background:var(--light); display:flex; align-items:center; justify-content:center;
  margin-bottom:10px; font-size:1.25rem; transition:var(--t);
}
.contact-btn:hover .icon-wrapper    { color:#fff; transform:scale(1.12) }
.contact-btn.email:hover    .icon-wrapper { background:#EA4335 }
.contact-btn.facebook:hover .icon-wrapper { background:#1877F2 }
.contact-btn.telegram:hover .icon-wrapper { background:#229ED9 }
.contact-btn.phone:hover    .icon-wrapper { background:#28a745 }
.contact-btn.location:hover .icon-wrapper { background:var(--orange) }
.contact-btn span { font-size:.82rem; font-weight:700; font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px; text-transform:uppercase }

/* ── Footer ── */
footer {
  background:linear-gradient(160deg,#071520 0%,#0d263b 100%);
  color:#c8d4e0; padding-top:72px; position:relative;
}
/* colored top strip */
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--blue),var(--orange),var(--red));
}
.footer-content {
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px;
  padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-col h3 {
  font-family:'Barlow Condensed',sans-serif;
  color:#fff; margin-bottom:22px;
  font-size:1.1rem; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
}
.footer-col p  { line-height:1.8; font-size:.9rem; color:rgba(200,212,224,.78) }
.footer-col ul li { margin-bottom:11px }
.footer-col ul li a {
  color:rgba(200,212,224,.65); font-size:.9rem;
  display:inline-flex; align-items:center; gap:7px;
  transition:var(--t);
}
.footer-col ul li a::before { content:'›'; color:var(--orange); font-weight:700 }
.footer-col ul li a:hover    { color:var(--orange); padding-left:4px }

.social-links { display:flex; gap:12px; margin-top:10px }
.nav-icon-btn {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:var(--t);
}
.nav-icon-btn:hover { transform:translateY(-4px) scale(1.12); box-shadow:0 8px 20px rgba(0,0,0,.3) }
.nav-icon-btn.telegram { background:#229ED9 }
.nav-icon-btn.facebook { background:#1877F2 }
.nav-icon-btn.phone    { background:#28a745 }

.footer-bottom { text-align:center; padding:20px 0; font-size:.84rem; color:rgba(200,212,224,.4) }

/* ── Toast ── */
.toast {
  visibility:hidden; min-width:280px;
  background:linear-gradient(135deg,var(--dark),var(--dark-2));
  color:#fff; text-align:center;
  border-radius:50px; padding:14px 26px;
  position:fixed; z-index:10000;
  left:50%; bottom:30px; transform:translateX(-50%);
  font-family:'Barlow',sans-serif; font-size:.95rem;
  box-shadow:0 10px 36px rgba(0,0,0,.3);
  border-left:4px solid var(--orange);
}
.toast.show { visibility:visible; animation:toastIn .4s var(--ease), toastOut .4s 2.6s var(--ease) forwards }
@keyframes toastIn  { from{bottom:0;opacity:0;transform:translateX(-50%) scale(.88)} to{bottom:30px;opacity:1;transform:translateX(-50%) scale(1)} }
@keyframes toastOut { from{opacity:1;bottom:30px} to{opacity:0;bottom:8px} }

/* ── Cart Modal ── */
.cart-modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  z-index:100001; display:none; justify-content:flex-end;
}
.cart-modal-overlay.open { display:flex }

.cart-modal {
  background:var(--card); width:420px; max-width:100%; height:100%;
  display:flex; flex-direction:column;
  box-shadow:-12px 0 50px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .38s var(--ease);
}
.cart-modal-overlay.open .cart-modal { transform:translateX(0) }

.cart-header {
  padding:20px 24px;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  color:#fff; display:flex; justify-content:space-between; align-items:center;
}
.cart-header h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.2rem; font-weight:800; letter-spacing:.5px; margin:0;
}
.close-cart {
  cursor:pointer; font-size:1.4rem;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .2s;
}
.close-cart:hover { background:rgba(255,255,255,.22) }

.cart-body { flex:1; overflow-y:auto; padding:20px 24px }
.cart-item {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; border-bottom:1px solid var(--border);
  padding-bottom:14px;
  animation:slideIn .3s var(--ease) both;
}
@keyframes slideIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
.cart-item-info h5 { margin:0 0 4px; color:var(--dark); font-size:.95rem; font-weight:600 }
.cart-item-price   { color:var(--red); font-weight:800; font-size:.95rem; font-family:'Barlow Condensed',sans-serif }
.remove-item { color:#ccc; cursor:pointer; background:none; border:none; padding:6px; border-radius:50%; transition:var(--t) }
.remove-item:hover { color:var(--red); background:rgba(204,0,0,.08) }

.cart-footer { padding:20px 24px; border-top:1px solid var(--border); background:var(--light) }
.cart-total {
  display:flex; justify-content:space-between;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.3rem; font-weight:900; margin-bottom:16px; color:var(--dark);
}
.cart-actions { display:flex; flex-direction:column; gap:10px; margin-top:10px }

.social-checkout-btn {
  width:100%; padding:13px; border:none; border-radius:var(--r-sm);
  font-family:'Barlow Condensed',sans-serif;
  color:#fff; font-size:1rem; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px;
  transition:var(--t);
}
.social-checkout-btn:hover { transform:translateY(-2px); box-shadow:0 7px 18px rgba(0,0,0,.22); color:#fff }
.btn-telegram { background:linear-gradient(135deg,#229ED9,#1a8ec0) }
.btn-facebook { background:linear-gradient(135deg,#1877F2,#1460c0) }
.btn-phone    { background:linear-gradient(135deg,#28a745,#1e8035) }
.dual-btns    { display:flex; gap:10px }
.dual-btns .social-checkout-btn { flex:1 }

.qty-controls { display:flex; align-items:center; gap:8px; margin-right:10px }
.qty-btn {
  width:28px; height:28px;
  background:var(--light); border:1.5px solid var(--border);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.1rem; font-weight:700; transition:var(--t);
}
.qty-btn:hover { background:var(--orange); color:#fff; border-color:var(--orange) }
.qty-val { font-weight:800; min-width:22px; text-align:center; font-family:'Barlow Condensed',sans-serif }

/* ── Invoice ── */
.invoice-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(5px); z-index:100001; display:none }
.invoice-backdrop.open { display:block }
.invoice-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--card); width:90%; max-width:680px;
  padding:40px; border-radius:var(--r); box-shadow:var(--sh3);
  z-index:100002; display:none; max-height:90vh; overflow-y:auto;
}
.invoice-modal.open { display:block; animation:popIn .35s var(--ease) }
@keyframes popIn { from{opacity:0;transform:translate(-50%,-50%) scale(.9)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
.invoice-header { display:flex; justify-content:space-between; border-bottom:2px solid var(--dark); padding-bottom:20px; margin-bottom:24px }
.inv-logo  { font-family:'Barlow Condensed',sans-serif; font-size:1.8rem; font-weight:900; color:var(--red); letter-spacing:1px }
.inv-title { font-family:'Barlow Condensed',sans-serif; font-size:2rem; color:#333; text-transform:uppercase; letter-spacing:3px }
.invoice-body table { width:100%; border-collapse:collapse; margin-bottom:20px }
.invoice-body th, .invoice-body td { border-bottom:1px solid var(--border); padding:12px 8px; text-align:left }
.invoice-body th { font-weight:700; color:#555; font-size:.82rem; text-transform:uppercase; font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px }
.text-right { text-align:right!important }
.invoice-summary { text-align:right; margin-top:20px; font-family:'Barlow Condensed',sans-serif; font-size:1.3rem; font-weight:900 }
.invoice-actions { margin-top:30px; display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; }
.invoice-actions-right { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

/* ── Language Dropdown ── */
.lang-dropdown { position:relative }
.lang-btn {
  background:none; border:1.5px solid var(--border); border-radius:50px;
  padding:6px 14px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  font-family:'Barlow',sans-serif; font-size:.88rem; font-weight:700;
  color:var(--text); transition:var(--t);
}
.lang-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-ll) }
.lang-menu {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--card); box-shadow:var(--sh2);
  border-radius:var(--r); width:148px;
  display:none; flex-direction:column; overflow:hidden;
  z-index:1100; border:1px solid var(--border);
}
.lang-menu.show { display:flex; animation:dropDown .2s var(--ease) }
@keyframes dropDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.lang-menu a {
  padding:11px 16px; font-size:.9rem; font-weight:600;
  color:var(--text); border-bottom:1px solid rgba(0,0,0,.04);
  transition:background .18s;
}
.lang-menu a:last-child { border-bottom:none }
.lang-menu a:hover { background:var(--light); color:var(--blue) }

/* ── Theme Toggle ── */
.theme-toggle {
  cursor:pointer; font-size:1.1rem;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid var(--border);
  color:var(--text); transition:var(--t);
}
.theme-toggle:hover { background:var(--light); border-color:var(--blue); color:var(--blue) }

/* ── Dark Mode ── */
body.dark-mode {
  --blue:    #4da6ff;
  --blue-ll: rgba(77,166,255,.1);
  --dark:    #f0f0f0;
  --light:   #181c24;
  --light-2: #1f2430;
  --text:    #dce4ef;
  --muted:   #8a96a6;
  --card:    #1c2230;
  --border:  #2a3345;
  background:#12161e; color:var(--text);
}
body.dark-mode .navbar     { background:rgba(18,22,30,.97); border-bottom-color:#1e2535 }
body.dark-mode .theme-toggle { color:#ffb84d; border-color:#2a3345 }
body.dark-mode .theme-toggle:hover { background:#1f2430 }
body.dark-mode .bg-dark    { background:#0a0d12; color:#f0f0f0 }
body.dark-mode .product-detail-wrapper,
body.dark-mode .product-tabs,
body.dark-mode .contact-form { background:#1c2230; border-color:#2a3345 }
body.dark-mode .cart-modal { background:#1c2230 }
body.dark-mode .cart-footer { background:#181c24 }
body.dark-mode .cart-item  { border-bottom-color:#2a3345 }
body.dark-mode .qty-btn    { background:#1f2430; border-color:#2a3345; color:#dce4ef }
body.dark-mode input,
body.dark-mode textarea    { background:#1f2430; border-color:#2a3345; color:#dce4ef }
body.dark-mode .lang-menu  { background:#1c2230; border-color:#2a3345 }
body.dark-mode .lang-menu a { color:#dce4ef; border-bottom-color:#2a3345 }
body.dark-mode .lang-menu a:hover { background:#1f2430 }
body.dark-mode .specs-table th { background:#1f2430; color:#fff; border-color:#2a3345 }
body.dark-mode .specs-table td { border-color:#2a3345 }
body.dark-mode .mobile-action-bar { background:#1c2230; border-top:1px solid #2a3345 }
body.dark-mode .filter-btn { border-color:#2a3345; color:#8a96a6 }
body.dark-mode .navbar .nav-menu { background:#1c2230; border-top-color:#2a3345 }
body.dark-mode .mobile-bottom-bar { background:#1c2230 !important; border-top-color:#2a3345 !important }
body.dark-mode .feature-box .box-overlay {
  background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.2) 60%,transparent 100%);
}
body.dark-mode .service-card,
body.dark-mode .product-card  { border-color:#2a3345 }

/* ── Scroll Fade-In ── */
.fade-in {
  opacity:0; transform:translateY(32px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.fade-in.visible { opacity:1; transform:translateY(0) }

/* stagger */
.services-grid .service-card:nth-child(1) { transition-delay:.00s }
.services-grid .service-card:nth-child(2) { transition-delay:.08s }
.services-grid .service-card:nth-child(3) { transition-delay:.16s }
.services-grid .service-card:nth-child(4) { transition-delay:.24s }
.services-grid .service-card:nth-child(5) { transition-delay:.32s }
.services-grid .service-card:nth-child(6) { transition-delay:.40s }
.products-grid .product-card:nth-child(1) { transition-delay:.00s }
.products-grid .product-card:nth-child(2) { transition-delay:.06s }
.products-grid .product-card:nth-child(3) { transition-delay:.12s }
.products-grid .product-card:nth-child(4) { transition-delay:.18s }
.products-grid .product-card:nth-child(5) { transition-delay:.24s }
.products-grid .product-card:nth-child(6) { transition-delay:.30s }

/* ── Tablet ── */
@media(min-width:769px) and (max-width:1024px) {
  .navbar .container { padding:0 24px }
  .products-grid     { grid-template-columns:repeat(3,1fr); gap:18px }
  .product-img       { height:185px }
  .product-detail-wrapper { gap:24px }
}

/* ── Mobile ── */
@media(max-width:768px) {
  .navbar .container { padding:0 14px }
  .navbar .menu-toggle { display:none!important }

  /* ── Mobile Top Bar: keep navbar at top, show controls ── */
  .navbar {
    position:sticky; top:0; bottom:auto;
    height:58px; z-index:1000;
  }
  .navbar .nav-controls {
    display:flex !important;
    gap:4px;
  }

  /* Bottom Tab Bar */
  .mobile-bottom-bar {
    display:flex;
    position:fixed; left:0; bottom:0; right:0;
    flex-direction:row;
    background:var(--card);
    width:100%; height:62px;
    justify-content:space-around; align-items:center;
    padding:0 4px;
    box-shadow:0 -2px 20px rgba(0,0,0,.12);
    z-index:9999; border-top:1px solid var(--border);
  }
  .mobile-bottom-bar li { flex:1; display:flex; justify-content:center }
  .mobile-bottom-bar .nav-link {
    flex-direction:column; font-size:.6rem; gap:2px;
    padding:6px 0; width:100%; justify-content:center; text-align:center;
    font-weight:700; letter-spacing:.3px; text-transform:uppercase;
    color:var(--muted);
  }
  .mobile-bottom-bar .nav-link i { margin-right:0; font-size:1.15rem; opacity:1 }
  .mobile-bottom-bar .nav-link::after { display:none }
  .mobile-bottom-bar .nav-link.active { color:var(--blue) }
  .mobile-bottom-bar .nav-link.active i { color:var(--blue) }

  /* Hide original nav-menu on mobile */
  .navbar .nav-menu { display:none !important }

  .mobile-only { display:block }
  body { padding-bottom:70px; padding-top:0 }
  body.has-action-bar { padding-bottom:132px }

  .col-half { width:100%; margin-bottom:28px }
  .hero h1, .page-header h1 { font-size:2.2rem; letter-spacing:-.5px }
  .hero { min-height:74vh; background-attachment:scroll }
  .footer-content { grid-template-columns:1fr; gap:28px }
  .product-detail-wrapper { grid-template-columns:1fr; padding:16px; gap:20px }
  .mobile-action-bar { display:flex }
  .action-buttons { display:none }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:12px }
  .product-img   { height:155px }
  .product-details { padding:10px 12px }
  .product-details h4 { font-size:.86rem }
  .price { font-size:1rem }
  .btn-cart { padding:6px 10px; font-size:.76rem }
  .section-padding { padding:64px 0 }
  .contact-form { padding:24px }
  .lang-btn span { display:none }
  .lang-btn { padding:5px; border:none; font-size:1.15rem; background:none }

  /* dark mode bottom bar */
  body.dark-mode .mobile-bottom-bar { background:#1c2230; border-top-color:#2a3345 }
  body.dark-mode .mobile-bottom-bar .nav-link { color:#5a6a7e }
  body.dark-mode .mobile-bottom-bar .nav-link.active { color:#4da6ff }
}

/* ── Print Styles ── */
@media print {
  body * { visibility: hidden; }
  .invoice-modal, .invoice-modal * { visibility: visible; }
  .invoice-modal {
    position: absolute; left: 0; top: 0; transform: none;
    width: 100%; max-width: 100%; box-shadow: none; padding: 20px;
    background: #fff !important; color: #000 !important; border: none;
    max-height: none !important; overflow: visible !important;
  }
  .invoice-actions { display: none !important; }
}