/* Green Commerce — shares Antaram's visual language (see antaram-site/public/styles.css) */
:root {
  --green: #2f7a34;
  --green-dark: #245c28;
  --green-tint: #eef5ee;
  --ink: #21251f;
  --muted: #6b7266;
  --line: #e4e8e1;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: #fff; line-height: 1.6; font-size: 17px; }
img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar { display: flex; align-items: center; gap: 18px; padding: 14px 20px; max-width: 1080px; margin: 0 auto; }
.brand { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .tag { font-family: var(--sans); font-size: .8rem; color: var(--muted); display: block; letter-spacing: .04em; }

.langs { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px; margin-left: auto; }
.langs button {
  border: 0; background: none; font: inherit; font-size: .82rem;
  padding: 3px 10px; border-radius: 999px; cursor: pointer; color: var(--muted);
}
.langs button.active { background: var(--green); color: #fff; }

.hero { padding: 56px 0 36px; text-align: center; }
.hero .kicker { color: var(--green); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.hero h1 { font-size: 2.4rem; margin: 10px 0 14px; }
.hero p { color: var(--muted); max-width: 560px; margin: 0 auto; }

/* One brand lookup at the top, applied to every collection below — not a
   per-card modal. See toorm-horeca's "upload once, preview everywhere". */
.brand-bar { display: flex; gap: 10px; max-width: 480px; margin: 26px auto 0; }
.brand-bar input {
  flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 14px 22px;
  font: inherit; font-size: 1rem;
}
.brand-preview { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 0; padding: 10px 16px; background: var(--green-tint); border-radius: 8px; font-size: .88rem; max-width: 480px; display: none; }
.brand-preview.show { display: flex; }
.brand-preview img { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; background: #fff; }
.brand-preview .swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line); flex-shrink: 0; }

/* Keeps the visitor entertained for the ~1 minute it takes to render every
   box — shown from the moment personalization starts until every card's
   image has actually finished loading in the browser, not just responded. */
.brand-progress { display: none; flex-direction: column; align-items: center; gap: 10px; max-width: 420px; margin: 22px auto 0; }
.brand-progress.show { display: flex; }
.brand-progress-icon { font-size: 2rem; animation: gc-bounce 1.1s ease-in-out infinite; }
@keyframes gc-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.08); } }
.brand-progress-bar { width: 100%; height: 8px; border-radius: 999px; background: var(--green-tint); overflow: hidden; }
.brand-progress-fill { height: 100%; width: 0%; background: var(--green); border-radius: 999px; transition: width .5s ease; }
.brand-progress-text { font-size: .88rem; font-weight: 500; color: var(--ink); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; padding: 20px 0 30px; }
.card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.card .ph { aspect-ratio: 4/5; background: var(--green-tint); overflow: hidden; position: relative; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 16px 18px 18px; }
.card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.card p { color: var(--muted); font-size: .92rem; }
.card .qty-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.card .qty-row label { font-size: .82rem; color: var(--muted); }
.card .qty-row input {
  width: 80px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px;
  font: inherit; font-size: .92rem;
}

.quotebar { position: sticky; bottom: 16px; text-align: center; padding: 10px 0 40px; z-index: 10; }
.quotebar .count { display: block; font-size: .82rem; color: var(--muted); margin-top: 8px; }

.btn-big { padding: 18px 44px; font-size: 1.1rem; font-weight: 600; box-shadow: 0 10px 28px rgba(47,122,52,.3); }

.quote-summary { list-style: none; margin: 4px 0 18px; padding: 0; font-size: .92rem; color: var(--muted); }
.quote-summary li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); }
.quote-summary li b { color: var(--ink); font-weight: 500; }

.footer { border-top: 1px solid var(--line); padding: 30px 0; text-align: center; color: var(--muted); font-size: .9rem; }

/* Quotation modal — contact details only; the collection previews and
   quantities live on the page itself, not behind a per-item modal. */
.sheet { position: fixed; inset: 0; background: rgba(20,22,18,.5); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 100; }
.sheet.open { display: flex; }
.sheet .panel { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 28px; position: relative; }
.sheet .close { position: absolute; top: 16px; right: 18px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }
.sheet .sub { color: var(--muted); font-size: .92rem; margin: 4px 0 16px; }

.ph-loading {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  text-align: center; padding: 8px; font-size: .78rem; color: #fff; background: rgba(20,22,18,.55);
}
.ph-loading.show { display: flex; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 500; margin-bottom: 6px; font-size: .92rem; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font: inherit; font-size: .95rem;
}
.field textarea { resize: vertical; min-height: 70px; }

.btn {
  display: inline-block; background: var(--green); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 24px; font: inherit; font-weight: 500; cursor: pointer; font-size: .95rem;
}
.btn:hover { background: var(--green-dark); text-decoration: none; }
.btn.secondary { background: transparent; color: var(--green); border: 1px solid var(--green); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.msg { margin-top: 14px; font-size: .9rem; }
.msg.ok { color: var(--green-dark); }
.msg.err { color: #a83246; }

.upload-row {display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px auto;color:var(--muted);font-size:.85rem;}
#logoFile {position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.upload-row:focus-within label {outline:2px solid var(--green);outline-offset:4px;}
.brand-controls {max-width:640px;margin:20px auto;padding:20px;border:1px solid var(--line);border-radius:14px;background:#fafcf9;}
.brand-controls[hidden] {display:none;}
.brand-controls p {font-size:.92rem;margin-bottom:16px;}
.color-controls {display:flex;flex-wrap:wrap;justify-content:center;gap:18px;align-items:center;}
.color-controls label {display:flex;align-items:center;gap:8px;font-size:.88rem;}
.color-controls input[type=color] {width:42px;height:34px;border:1px solid var(--line);border-radius:6px;padding:2px;background:#fff;cursor:pointer;}
.color-controls select {max-width:180px;padding:8px;border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink);}
.palette {display:flex;gap:8px;justify-content:center;margin:16px 0;}
.palette-chip {width:26px;height:26px;border:2px solid white;box-shadow:0 0 0 1px #ccc;border-radius:50%;cursor:pointer;}
.preview-error {color:#a83246;font-size:.82rem;padding:0 14px;}
.preview-error:not(:empty) {padding-top:12px;}
.card .ph {aspect-ratio:2/3;}
.card .ph img {object-fit:contain;}
@media(max-width:600px){.brand-bar{flex-direction:column;}.brand-bar input{width:100%;min-width:0;}.hero{padding-top:30px;}.hero h1{font-size:2rem;}.color-controls{flex-direction:column;align-items:stretch;}.color-controls label{justify-content:space-between;}}
@media(prefers-reduced-motion:reduce){.brand-progress-icon{animation:none;}.brand-progress-fill{transition:none;}}