/* =====================================================================
   Homepage redesign — hero slider, section blocks, refined cards.

   Kept in its own file rather than bolted onto app.css: the internal module
   loads app.css too, and nothing here should ever land on an internal page.
   ===================================================================== */

:root {
  --electric: #1b3b6f;
  --hero-h: 480px;
}

/* theme:fixed แถบฮีโร่หน้าแรก — ภาพ/ไล่สีเข้มเต็มจอ เป็นเอกลักษณ์แบรนด์ เข้มทั้งสองโหมด ตัวอักษรที่วางทับจึงสว่างเสมอ */
/* ---------- buttons ---------- */
.btn-lg { padding: 13px 26px; font-size: 15px; border-radius: 9px; }
.btn-outline {
  background: transparent;
  color: var(--on-dark);
  border: 1.5px solid rgba(255, 255, 255, .55);
}
.btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: var(--on-dark); }

/* ---------- hero slider ---------- */
.hero {
  position: relative;
  height: var(--hero-h);
  background: var(--navy);
  overflow: hidden;
}
.hero-track { position: absolute; inset: 0; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease;
}
.slide.is-active { opacity: 1; visibility: visible; }

/* .slide-inner also carries .wrap, whose `margin: 0 auto` centres it inside the flex slide.
   Left it at max-width, the whole copy block drifts to the middle of the hero and lands on
   top of the product photo. So the wrap keeps its full 1200px, and the copy is constrained
   by its children instead. */
.slide-inner { position: relative; z-index: 2; width: 100%; }
.slide-inner > * { max-width: 560px; }

.slide .kicker {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(232, 89, 12, .14);
  border: 1px solid rgba(232, 89, 12, .35);
  padding: 5px 12px;
  border-radius: 999px;
  margin: 0 0 16px;
}
.slide h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.18;
  color: var(--on-dark);
  margin: 0 0 14px;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.slide .lede {
  color: #c2d1e0;
  font-size: 16px;
  max-width: 46ch;
  margin: 0 0 26px;
}
.slide-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* The banner had the company's slogan baked into the pixels. That text was cropped away and
   the headline is now real HTML: it scales with the viewport, it is readable by search
   engines, and it cannot end up ghosting behind an overlay of itself. What is left of the
   image is the product photography, anchored right, fading into the ground on the left. */
.slide-photo { background: linear-gradient(115deg, #0b1728 0%, #10294a 100%); }
.slide-photo::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  background: var(--slide-img) center right / cover no-repeat;
  z-index: 0;
}
.slide-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(94deg,
    rgba(11, 23, 40, 1) 0%,
    rgba(11, 23, 40, 1) 44%,
    rgba(11, 23, 40, .58) 56%,
    rgba(11, 23, 40, .1) 74%,
    rgba(11, 23, 40, 0) 100%);
  z-index: 1;
}

.slide-brands { background: radial-gradient(120% 130% at 12% 20%, #1d3557 0%, #0d1b2a 62%); }
.slide-search { background: radial-gradient(110% 120% at 85% 15%, #24486f 0%, #0d1b2a 60%); }

/* Texture made from the real brand logos we carry -- not a stock photo of "industry". */
.logo-wall {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 20px;
  align-content: center;
  opacity: .16;
  mask-image: linear-gradient(90deg, transparent 0%, #000 32%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%, #000 100%);
  z-index: 1;
  pointer-events: none;
}
.logo-wall span {
  background: var(--on-dark);
  border-radius: 6px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.logo-wall img { max-width: 100%; max-height: 100%; object-fit: contain; }

.query-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.query-chips a {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #dbe6f1;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13.5px;
  transition: background .15s, border-color .15s;
}
.query-chips a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(10, 20, 32, .45);
  color: var(--on-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.hero-nav:hover { background: var(--accent); border-color: var(--accent); }
.hero-nav.prev { left: 18px; }
.hero-nav.next { right: 18px; }

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.hero-dots button.is-active { width: 26px; border-radius: 5px; background: var(--accent); }

/* theme:end */

/* ---------- search bar, overlapping the hero ---------- */
.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 9px 9px 16px;
  box-shadow: 0 18px 44px -20px rgba(13, 27, 42, .45);
  margin-top: -32px;
  position: relative;
  z-index: 6;
}
.hero-search .hs-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}
.hero-search input {
  flex: 1;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15.5px;
  padding: 8px 0;
  min-width: 0;
  background: transparent;
}
.hero-search input::placeholder { color: var(--faint); }

.trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  padding: 22px 4px 0;
}
.trust-row b { display: block; font-size: 20px; letter-spacing: -.01em; }
.trust-row span { font-size: 12.5px; color: var(--muted); }

/* ---------- section blocks ---------- */
.block { margin-top: 52px; }
.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.block-head h2 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
.block-head .more { font-size: 14px; font-weight: 600; color: var(--accent); }
.block-head .more:hover { text-decoration: underline; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.cat-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cat-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.cat-tile svg {
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cat-tile strong { font-size: 14.5px; }
.cat-tile span { font-size: 12.5px; color: var(--muted); }

.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.why {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.why svg {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why h3 { margin: 0 0 6px; font-size: 15.5px; }
.why p { margin: 0; color: var(--muted); font-size: 13.5px; }

.cta-band {
  margin-top: 52px;
  background: linear-gradient(115deg, var(--navy) 0%, var(--electric) 100%);
  border-radius: 14px;
  padding: 34px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--on-dark); margin: 0 0 5px; font-size: 22px; }
.cta-band p { color: var(--on-dark-soft); margin: 0; font-size: 14.5px; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- product card refresh ---------- */
.product-card .thumb { height: 150px; background: var(--surface-2); }
.product-card .thumb img { transition: transform .25s ease; }
.product-card:hover .thumb img { transform: scale(1.05); }
.product-card:hover { border-color: var(--line); }

@media (max-width: 900px) {
  :root { --hero-h: 430px; }
  .logo-wall { display: none; }
  /* theme:fixed ฮีโร่เวอร์ชันมือถือ — ส่วนเดียวกับแถบฮีโร่ด้านบน เข้มทั้งสองโหมด */
  .slide-photo::after {
    background: linear-gradient(180deg, rgba(8, 17, 28, .72) 0%, rgba(8, 17, 28, .93) 100%);
  }
  /* theme:end */
  .hero-nav { display: none; }
}
@media (max-width: 640px) {
  :root { --hero-h: 400px; }
  .hero-search { flex-wrap: wrap; padding: 10px 14px; }
  /* The icon would otherwise be pushed onto a line of its own by the full-width input. */
  .hero-search .hs-icon { display: none; }
  .hero-search input { flex: 1 1 100%; font-size: 15px; }
  /* SEARCHBTN: ค้นหา and ล้าง share the row under the box */
  .hero-search .btn { flex: 1 1 0; justify-content: center; }
  .cta-band { padding: 26px 22px; }
  .slide .lede { font-size: 15px; }

  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}