/* Hero */
.hero{ padding: 40px 0 18px 0; }
.hero-card{
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(248,248,245,.75), rgba(248,248,245,.55));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 28px;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  overflow:hidden;
}
.hero h1{
  font-size: clamp(1.85rem, 2.6vw, 2.65rem);
  letter-spacing: .01em;
}
.hero p{ max-width: 56ch; }
.hero-badges{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px; }
.badge{
  border: 1px solid var(--line);
  background: rgba(248,248,245,.75);
  padding: 10px 12px;
  border-radius: 999px;
  font-size:.9rem;
  color: rgba(26,26,26,.80);
}
.hero-visual{
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: radial-gradient(500px 260px at 30% 20%, rgba(95,99,104,.18), transparent 60%),
              radial-gradient(520px 280px at 80% 35%, rgba(214,194,165,.24), transparent 55%),
              rgba(248,248,245,.65);
  box-shadow: var(--shadow-soft);
  display:grid;
  place-items:center;
  padding: 22px;
}
.hero-visual svg{ width: 100%; max-width: 420px; opacity:.9; }
@media (max-width: 900px){ .hero-card{ grid-template-columns: 1fr; } }

/* Section header */
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap: 14px;
  margin: 22px 0 14px 0;
}
.section-head h2{ font-size: 1.4rem; }
.section-actions{ display:flex; gap: 10px; flex-wrap:wrap; }
.input, .select{
  border: 1px solid var(--line);
  background: rgba(248,248,245,.75);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 200px;
}
.select{ min-width: 160px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(248,248,245,.78);
  color: var(--text);
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(95,99,104,.10); }
.btn.primary{
  background: rgba(95,99,104,.14);
  border-color: rgba(95,99,104,.25);
}
.btn.primary:hover{ background: rgba(95,99,104,.18); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* Product grid */
.grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px){ .grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 820px){ .grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .grid{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid var(--line);
  background: rgba(248,248,245,.70);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.card-media{
  position:relative;
  aspect-ratio: 4 / 3;
  background: rgba(248,248,245,.90);
  border-bottom: 1px solid var(--line);
  display:grid;
  place-items:center;
  padding: 14px;
}
.tag{
  position:absolute; top: 12px; left: 12px;
  border: 1px solid var(--line);
  background: rgba(248,248,245,.85);
  padding: 8px 10px;
  border-radius: 999px;
  font-size:.8rem;
  color: rgba(26,26,26,.80);
}
.oos{
  position:absolute; top: 12px; right: 12px;
  border: 1px solid rgba(180,35,24,.25);
  background: rgba(180,35,24,.10);
  color: var(--danger);
  padding: 8px 10px;
  border-radius: 999px;
  font-size:.8rem;
}
.card-body{ padding: 14px; display:flex; flex-direction:column; gap: 8px; flex: 1; }
.card-title{ font-weight: 650; letter-spacing: .01em; }
.meta{ display:flex; gap: 8px; flex-wrap:wrap; color: var(--muted); font-size:.9rem; }
.price{ display:flex; align-items:baseline; gap: 10px; margin-top: 6px; }
.old{ color: var(--muted); text-decoration: line-through; font-size:.95rem; }
.new{ font-weight: 700; color: rgba(26,26,26,.92); font-size: 1.05rem; }
.stock{ display:flex; align-items:center; gap: 8px; color: rgba(26,26,26,.75); font-size:.9rem; }
.dot{ width: 10px; height: 10px; border-radius: 50%; background: rgba(6,118,71,.75); }
.dot.low{ background: rgba(95,99,104,.85); }
.dot.none{ background: rgba(180,35,24,.75); }
.card-actions{ padding: 0 14px 14px 14px; }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(26,26,26,.42);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 100;
}
.modal-backdrop.open{ display:flex; }
.modal{
  width: min(720px, 100%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(248,248,245,.97);
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-head strong{ letter-spacing:.01em; }
.modal-body{ padding: 16px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 680px){ .form-grid{ grid-template-columns: 1fr; } }
.field label{ display:block; font-size:.9rem; color: rgba(26,26,26,.82); margin-bottom: 6px; }
.field input, .field textarea{
  width:100%;
  border: 1px solid var(--line);
  background: rgba(248,248,245,.85);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
}
.field textarea{ min-height: 92px; resize: vertical; }
.helper{ font-size:.86rem; color: var(--muted); margin-top: 10px; }
.modal-actions{
  display:flex; gap: 10px; justify-content:flex-end;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
.notice{
  border: 1px solid rgba(95,99,104,.25);
  background: rgba(95,99,104,.08);
  padding: 12px 14px;
  border-radius: 14px;
  color: rgba(26,26,26,.80);
}

/* Floating WhatsApp */
.fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display:flex;
  align-items:center;
  gap: 10px;
}
.fab a{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--line);
  background: rgba(248,248,245,.90);
  padding: 12px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.fab svg{ width: 18px; height: 18px; }
.card-media{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
}

.card-media img{
  width: 100%;
  height: 280px;
  object-fit: contain;
  display: block;
  opacity: 1;
  visibility: visible;
  filter: none;
  background: transparent;
}
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.card-body,
.card-title,
.card .meta,
.card .stock,
.card .price{
  color: var(--text);
}

.card .meta,
.card .stock{
  color: var(--muted);
}

.card-media{
  background: var(--surface-2);
}

.tag{
  background: rgba(197,164,109,.14);
  color: var(--accent);
  border: 1px solid rgba(197,164,109,.25);
}

.oos{
  background: rgba(212,106,106,.12);
  color: #f0b5b5;
  border: 1px solid rgba(212,106,106,.2);
}

.btn{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}

.btn:hover{
  border-color: var(--accent);
  color: var(--accent);
}

.btn.primary{
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}

.btn.primary:hover{
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #111;
}

.input,
.select,
.field input,
.field textarea,
.field select{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}

.input::placeholder,
.field input::placeholder,
.field textarea::placeholder{
  color: var(--muted);
}

.notice{
  background: rgba(197,164,109,.08);
  border: 1px solid rgba(197,164,109,.18);
  color: var(--text);
}

.old{
  color: var(--muted);
  text-decoration: line-through;
}

.new{
  color: var(--accent);
  font-weight: 700;
}

.kicker{
  color: var(--accent);
}

h1, h2, h3, h4, h5, h6, p, li, span, strong{
  color: inherit;
}
.card-media{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
}

.card-media img{
  width: 100%;
  height: 280px;
  object-fit: contain;
  display: block;
  opacity: 1;
  visibility: visible;
  filter: none;
  background: transparent;
}
/* Floating WhatsApp button */
.fab a,
#waFab {
  background: #1a1a1d !important;
  color: #f4f1ea !important;
  border: 1px solid rgba(197,164,109,.28) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
}

.fab a:hover,
#waFab:hover {
  background: #222327 !important;
  color: #c5a46d !important;
  border-color: #c5a46d !important;
}

/* Make faded text fully visible */
.card-title,
.card .meta,
.card .stock,
.card .price,
p,
.helper,
.notice,
label,
input,
textarea,
select,
h1, h2, h3, h4, h5, h6,
strong,
span {
  opacity: 1 !important;
}

/* Improve general readable text colors */
.card-title,
h1, h2, h3,
strong {
  color: #f4f1ea !important;
}

.card .meta,
.card .stock,
.helper,
p,
label {
  color: #d2ccc2 !important;
}

/* Product image container */
.card-media {
  background: #151515 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 320px !important;
  padding: 18px !important;
  overflow: hidden !important;
}

/* Product images fully visible */
.card-media img {
  width: 100% !important;
  height: 280px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

/* Modal readability */
.modal,
.modal-body {
  color: #f4f1ea !important;
}

.modal input,
.modal textarea,
.modal select {
  background: #17181c !important;
  color: #f4f1ea !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.modal input::placeholder,
.modal textarea::placeholder {
  color: #a7a29a !important;
}