/* ============================================================
   ECOLAST — shared styles for contact.html and order.html
   (loads after styles.css and reuses its design tokens)
   ============================================================ */
body{ background:var(--bg); }
[hidden]{ display:none !important; }

/* -------- page header -------- */
.page-hero{ position:relative; overflow:hidden; padding:150px 0 60px; }
.page-hero .hex-field{ opacity:0.7; }
.page-hero-in{ position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(38px,5.2vw,64px); line-height:1.02; }
.page-hero h1 .hl{
  background:linear-gradient(135deg,var(--accent),var(--accent-2,var(--accent)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-hero p.lede{ margin:22px 0 0; color:var(--muted); font-size:17px; max-width:520px; }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:0.08em;
  color:var(--accent); margin-bottom:24px;
}
.chip .d{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

.page-body{ padding:8px 0 110px; }
.card{ border-radius:24px; padding:clamp(22px,3vw,36px); }

/* -------- focus -------- */
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* -------- buttons (button elements need their own border) -------- */
button.btn{ border:1px solid var(--glass-brd); }
button.btn.solid{ border-color:transparent; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* -------- form fields -------- */
.form-grid{ display:grid; gap:18px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field label{ font-size:14px; font-weight:500; color:var(--ink); }
.field label .opt{ color:var(--muted-2); font-weight:400; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:14px;
  background:rgba(242,244,243,0.04);
  border:1px solid var(--glass-brd);
  color:var(--ink);
  font:inherit; font-size:16px; line-height:1.4;
  transition:border-color .25s var(--ease-soft), background .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(242,244,243,0.28); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none; border-color:var(--accent); background:rgba(242,244,243,0.06);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid{ border-color:#ff6b6b; }
.field select{
  appearance:none; -webkit-appearance:none; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field select option{ background:#14181d; color:var(--ink); }
.form-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
.form-foot .fine{ color:var(--muted-2); font-size:13px; max-width:38ch; margin:0; }

/* hidden spam trap: people never see it, simple bots fill it in */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error{ margin:0; color:#ff8a8a; font-size:14px; }

/* -------- "ready to send" result panel -------- */
.result[hidden]{ display:none; }
.result h2{ font-size:clamp(24px,3vw,34px); }
.result p{ color:var(--muted); max-width:56ch; margin:14px 0 0; }
.result pre{
  margin:22px 0 0; padding:18px 20px; border-radius:16px;
  background:rgba(0,0,0,0.28); border:1px solid var(--hair);
  color:var(--ink); font:13.5px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap; overflow:auto; max-height:360px;
}
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.tick{
  width:52px; height:52px; border-radius:50%; margin-bottom:20px;
  display:grid; place-items:center; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--glass-brd);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:28px; align-items:start;
}
.info-list{ display:grid; gap:14px; }
.info{
  display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:center;
  padding:18px 22px; border-radius:20px; border:1px solid var(--hair);
  transition:border-color .3s var(--ease-soft), transform .3s var(--ease-soft);
}
a.info:hover{ border-color:var(--accent); transform:translateY(-2px); }
.info .ico{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--glass-brd); background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center;
}
.info .ico svg{ width:22px; height:22px; }
.info small{ display:block; color:var(--muted-2); font-size:13px; line-height:1.3; }
.info b{ display:block; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.info-title{ font-size:clamp(22px,2.4vw,28px); margin:0 0 18px; }

/* ============================================================
   ORDER PAGE
   ============================================================ */
.order-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 380px;
  gap:32px; align-items:start;
}
.step-title{ display:flex; align-items:baseline; gap:14px; margin:0 0 20px; }
.step-title h2{ font-size:clamp(22px,2.6vw,30px); }
.step-title .n{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:20px; color:var(--accent); }

.products{ display:grid; gap:16px; margin-bottom:48px; }
.product{
  --pcol:var(--accent);
  display:grid; grid-template-columns:128px minmax(0,1fr) auto; gap:22px; align-items:center;
  padding:16px 24px 16px 16px; border-radius:22px;
  border:1px solid var(--hair); background:var(--glass-bg);
  transition:border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.product.on{
  border-color:var(--pcol);
  background:color-mix(in srgb, var(--pcol) 9%, transparent);
}
.p-img{
  width:128px; height:128px; border-radius:16px; overflow:hidden;
  background:rgba(242,244,243,0.04); display:grid; place-items:center;
}
.p-img img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.p-body h3{ font-size:22px; display:flex; align-items:center; gap:10px; }
.p-body h3::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--pcol); flex-shrink:0; }
.p-body p{ margin:8px 0 0; color:var(--muted); font-size:14.5px; }
.p-link{ display:inline-block; margin-top:10px; font-size:14px; color:var(--pcol); }
.p-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.p-buy{ display:grid; gap:12px; justify-items:end; }
.p-price{ font-family:'Rajdhani',sans-serif; font-weight:600; font-size:19px; }
.p-price.ask{ font-family:'Inter',sans-serif; font-weight:400; font-size:14px; color:var(--muted); }

.qty{
  display:inline-flex; align-items:center;
  border:1px solid var(--glass-brd); border-radius:999px; background:var(--glass-bg);
}
.qty button{
  width:44px; height:44px; border:0; border-radius:50%; background:transparent;
  color:var(--ink); font-size:20px; line-height:1;
  transition:background .25s var(--ease-soft), color .25s var(--ease-soft);
}
.qty button:hover:not(:disabled){ background:var(--glass-bg-2); color:var(--pcol); }
.qty button:disabled{ opacity:.3; cursor:not-allowed; }
.qty input{
  width:44px; text-align:center; padding:0; border:0; background:transparent;
  color:var(--ink); font:inherit; font-size:16px; font-weight:600; -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty input:focus-visible{ outline:2px solid var(--pcol); outline-offset:2px; border-radius:8px; }

.summary{ position:sticky; top:92px; border-radius:24px; padding:28px; }
.summary h2{ font-size:24px; }
.sum-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.sum-list li{ display:flex; justify-content:space-between; gap:14px; font-size:15px; }
.sum-list li span:last-child{ color:var(--muted); white-space:nowrap; }
.sum-empty{ margin:18px 0 0; color:var(--muted); font-size:14.5px; }
.sum-total{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:22px;
}
.sum-count{ margin:16px 0 0; font-size:13.5px; color:var(--muted); }
.summary .btn{ width:100%; justify-content:center; margin-top:22px; }
.sum-note{ margin:16px 0 0; font-size:13px; color:var(--muted-2); }

/* -------- responsive -------- */
@media (max-width:980px){
  .contact-grid, .order-grid{ grid-template-columns:1fr; }
  .summary{ position:static; }
}
@media (max-width:720px){
  .page-hero{ padding:120px 0 40px; }
  .row{ grid-template-columns:1fr; }
  .product{ grid-template-columns:96px minmax(0,1fr); gap:16px; padding:14px; }
  .p-img{ width:96px; height:96px; }
  .p-buy{ grid-column:1 / -1; grid-auto-flow:column; justify-content:space-between; align-items:center; justify-items:start; }
}

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

/* ---- offers / discounts (prices managed in admin.html → Shop) ---- */
.p-price.has-offer{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.p-price .p-old{ font-family:'Inter',sans-serif; font-weight:400; font-size:14px; color:var(--muted); text-decoration:line-through; }
.p-price .p-now{ color:var(--accent); }
.p-price .p-badge{ font:700 12px/1 'Inter',sans-serif; padding:4px 7px; border-radius:999px; background:#ff4d4d; color:#fff; align-self:center; }
.p-price .p-offer{ flex-basis:100%; font:500 12px 'Inter',sans-serif; color:var(--muted); }