.elementor-1992 .elementor-element.elementor-element-eb34874{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1992 .elementor-element.elementor-element-eb34874:not(.elementor-motion-effects-element-type-background), .elementor-1992 .elementor-element.elementor-element-eb34874 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1992 .elementor-element.elementor-element-0a194ef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:-90px;--margin-right:0px;}.elementor-1992 .elementor-element.elementor-element-0a194ef.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1992 .elementor-element.elementor-element-b747f16{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:6px;--margin-bottom:0px;--margin-left:290px;--margin-right:0px;}@media(min-width:690px){.elementor-1992 .elementor-element.elementor-element-eb34874{--content-width:1300px;}.elementor-1992 .elementor-element.elementor-element-0a194ef{--width:20%;}.elementor-1992 .elementor-element.elementor-element-b747f16{--width:63%;}}/* Start custom CSS for html, class: .elementor-element-0b5d97d *//* ---------- Base & palette ---------- */
:root {
  --bg: #0b0b0d;
  --panel: #121217;
  --border: #23232b;
  --text: #d9d9e0;
  --muted: #9a9aac;
  --gold: #bfa14a;
  --gold-strong: #d4b35a;
  --accent: #34ff8f; /* neon green nod to goggles */
  --shadow: rgba(0,0,0,0.45);
}

/* ---------- Layout ---------- */
.container {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  background: var(--bg);
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow);
}

.left-panel,
.right-panel {
  background: linear-gradient(180deg, #14141b 0%, #101018 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.left-panel { flex: 1; min-width: 420px; }
.right-panel { flex: 1; }

/* ---------- Titles ---------- */
.category-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  letter-spacing: 0.4px;
  color: var(--text);
  margin: 0 0 18px;
  position: relative;
}

.category-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-top: 10px;
  opacity: 0.6;
}

/* ---------- Category blocks ---------- */
.category-section {
  margin-bottom: 26px;
  padding: 18px 18px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

.category-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--text);
  margin: 0 0 12px;
}

.category-section h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  margin: 14px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ---------- “Table-like” product list ---------- */
.product-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #0f0f15;
}

.product-list li {
  display: grid;
  grid-template-columns: 1fr auto; /* name | hint/pack (optional) */
  gap: 12px;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--text);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.product-list li:last-child {
  border-bottom: none;
}

.product-list li:hover {
  background: rgba(52, 255, 143, 0.06);          /* subtle neon glow */
  box-shadow: inset 0 0 0 1px rgba(52, 255, 143, 0.18);
  color: var(--text);
}

.product-list li .hint {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

/* ---------- Right panel gallery ---------- */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.image-gallery img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  filter: saturate(0.9) contrast(1.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.image-gallery img:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 20px var(--shadow), 0 0 0 1px rgba(191,161,74,0.18);
}

/* ---------- Accents & small details ---------- */
p strong {
  color: var(--gold-strong);
  font-weight: 700;
}

a {
  color: var(--gold);
  text-decoration: none;
}

a:hover {
  color: var(--gold-strong);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .container { flex-direction: column; }
  .left-panel, .right-panel { min-width: 100%; }
  .image-gallery { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .image-gallery { grid-template-columns: 1fr; }
  .product-list li { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ea7ba6a *//* Right side: 4-image grid */
.image-grid {
  flex: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.image-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.image-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.image-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.image-card:hover img {
  transform: scale(1.08);
}

/* Remove caption styles completely */
.caption {
  display: none;
}
.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px; /* Optional: adds a soft corner */
}
.image-card {
  aspect-ratio: 4 / 3; /* Keeps all cards same shape */
  overflow: hidden;
  background: #f9f9f9; /* Optional: fallback background */
  border: 1px solid #eee; /* Optional: subtle border */
}/* End custom CSS */