/* =========================================================================
   sale-extra.css — sale mode: discount flag, "call for price" treatment
   and the call / WhatsApp / email contact buttons.
   Loaded after sale.css so it can lean on the same custom properties.
   ========================================================================= */

/* ---------- discount ribbon in the hero ---------- */
.saleflag{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:20px 0 0;padding:14px 16px;
  background:rgba(217,142,43,.13);
  border:1.5px solid var(--ochre);
  border-left:5px solid var(--ochre-br);
  border-radius:var(--r);
  max-width:74ch;
}
.saleflag .pct{
  flex:none;font-size:13px;font-weight:600;letter-spacing:.09em;
  background:var(--ochre-br);color:var(--deep);
  padding:6px 11px;border-radius:3px;white-space:nowrap;
}
.saleflag .txt{font-size:14.5px;color:var(--deep-ink);line-height:1.5}

/* ---------- contact strip ---------- */
.cbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.cbtn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:13px;letter-spacing:.04em;font-weight:500;
  padding:11px 16px;border-radius:var(--r);
  border:1.5px solid var(--cyan-br);
  background:rgba(255,255,255,.07);color:#fff;
  transition:.15s;cursor:pointer;
}
.cbtn svg{width:17px;height:17px;flex:none}
.cbtn:hover{background:#fff;color:var(--deep);border-color:#fff}
.cbtn.call{background:var(--ochre-br);border-color:var(--ochre-br);color:var(--deep);font-weight:600}
.cbtn.call:hover{background:#fff;border-color:#fff}
.cbtn.wa{border-color:#4bbf72;color:#bff2d1}
.cbtn.wa:hover{background:#4bbf72;color:#06301a;border-color:#4bbf72}

/* ---------- card: OFF tag ---------- */
.offtag{
  margin-left:auto;flex:none;
  font-size:10px;letter-spacing:.09em;font-weight:500;
  background:var(--ochre-soft);color:var(--ochre-dk);
  border:1px solid var(--ochre);
  padding:3px 7px;border-radius:3px;white-space:nowrap;
}
.card .price{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card .price .ask{color:var(--steel-dk);font-weight:500}

/* ---------- modal: price + sale note ---------- */
.bigprice{color:var(--steel-dk)}
.salenote{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  margin:10px 0 18px;padding:13px 15px;
  background:var(--ochre-soft);
  border:1.5px solid var(--ochre);
  border-left:5px solid var(--ochre);
  border-radius:var(--r);
  font-size:14px;color:var(--ochre-dk);line-height:1.5;
}
.salenote .pct{
  flex:none;font-size:12px;font-weight:600;letter-spacing:.08em;
  background:var(--ochre);color:#fff;padding:5px 9px;border-radius:3px;white-space:nowrap;
}

/* ---------- modal: contact buttons ---------- */
.mcontact{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 4px}
.mcontact .cbtn{
  border-color:var(--line-2);background:var(--page);color:var(--ink);
}
.mcontact .cbtn:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.mcontact .cbtn.call{background:var(--steel);border-color:var(--steel);color:#fff;font-weight:600}
.mcontact .cbtn.call:hover{background:var(--steel-dk);border-color:var(--steel-dk)}
.mcontact .cbtn.wa{background:#e6f7ec;border-color:#4bbf72;color:#1d6b2d}
.mcontact .cbtn.wa:hover{background:#4bbf72;color:#fff}

/* ---------- footer contact ---------- */
footer .mono a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:620px){
  .cbar .cbtn,.mcontact .cbtn{flex:1 1 100%;justify-content:center}
  .saleflag{flex-direction:column;align-items:flex-start;gap:9px}
}

/* =========================================================================
   GX Parts Curaçao — brand overrides (green accents on a dark base)
   Appended 2026-09-07 during the gxpartscuracao.com migration.
   Loaded after sale.css, so these win. Remove this block to revert.
   ========================================================================= */
:root{
  /* dark ground: neutral green-black instead of steel blue */
  --deep:#0d1f18; --deep-2:#142b21; --deep-3:#102419;
  --deep-line:rgba(180,228,190,.16); --deep-ink:#eef6ec; --deep-ink-2:#a6bcaa;

  /* accents pulled from the logo */
  --steel:#39901c; --steel-br:#57bb2c; --steel-dk:#27690f; --steel-soft:#e6f5da;
  --cyan:#4aa626; --cyan-br:#8ede4e;
  --ochre:#e3a11d; --ochre-br:#f5b731; --ochre-dk:#8a5f08; --ochre-soft:#fdf0d5;
  --good:#2f8f43; --aqua:#2b8f5e;

  /* header/footer rule: logo green -> gold */
  --band:linear-gradient(90deg,#8ede4e 0 34%,#39901c 34% 67%,#f5b731 67% 100%);
}

/* ---- header logo: white badge so the logo's dark-green X stays legible ---- */
.brand{gap:0}
.brand .mark{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:7px;padding:7px 11px;
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.brand .mark img{height:30px;width:auto;display:block}

@media (max-width:640px){
  .brand .mark{padding:5px 8px;border-radius:6px}
  .brand .mark img{height:24px}
}