/* ============================================================
   eVoucher.gift — public merchant storefronts (/{slug})
   Built on the brand design system tokens (--ev-*, app.css) so every
   storefront feels like part of the family; merchants override the
   accent palette and fonts via --evs-* custom properties set inline
   by the theme from their Storefront record.
   All classes are evs- prefixed (eVoucher storefront) to stay clear
   of Bootstrap and the marketing pages' ev- classes.
   ============================================================ */

.evs-root {
  /* Merchant-overridable knobs, defaulting to the house palette */
  --evs-primary: var(--ev-claret);
  --evs-primary-deep: var(--ev-claret-deep);
  --evs-accent: var(--ev-brass);
  --evs-font-serif: var(--ev-font-serif);
  --evs-font-sans: var(--ev-font-sans);

  background: var(--ev-paper);
  color: var(--ev-ink);
  font-family: var(--evs-font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background-image: radial-gradient(rgba(26,20,17,.025) 1px, transparent 1px);
  background-size: 3px 3px;
}
.evs-root p { margin: 0 0 1em; }
.evs-root a { color: inherit; }
.evs-root h1, .evs-root h2, .evs-root h3, .evs-root h4 {
  margin: 0;
  font-family: var(--evs-font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ev-ink);
}
.evs-root h1 { font-size: clamp(40px, 6vw, 80px); line-height: 0.98; font-variation-settings: "opsz" 120, "SOFT" 30; }
.evs-root h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; font-variation-settings: "opsz" 72, "SOFT" 40; }
.evs-root h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.12; font-variation-settings: "opsz" 48, "SOFT" 50; }

.evs-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 36px; }
@media (max-width: 720px) { .evs-wrap { padding: 0 20px; } }

.evs-eyebrow {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--evs-primary);
}

/* ===== Header ===== */
.evs-header { border-bottom: 1px solid var(--ev-rule); background: var(--ev-paper); position: sticky; top: 0; z-index: 40; }
.evs-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; }
.evs-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.evs-brand img { height: 44px; width: auto; border-radius: 6px; }
.evs-brand-name {
  font-family: var(--evs-font-serif);
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ev-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evs-header-nav { display: flex; gap: 22px; align-items: center; }
.evs-header-nav a { font-size: 14px; text-decoration: none; opacity: .78; }
.evs-header-nav a:hover { opacity: 1; color: var(--evs-primary); }
@media (max-width: 560px) { .evs-header-nav { gap: 14px; } }

/* ===== Hero ===== */
.evs-hero { padding: 64px 0 56px; border-bottom: 1px solid var(--ev-rule); position: relative; }
.evs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
@media (max-width: 880px) { .evs-hero-grid { grid-template-columns: 1fr; } }
.evs-hero .evs-lede { font-size: 20px; font-weight: 300; color: var(--ev-ink-soft); max-width: 52ch; margin-top: 18px; }
.evs-hero-img { width: 100%; border-radius: 14px; box-shadow: 0 24px 60px -28px rgba(26,20,17,.45); }
.evs-hero-card {
  background: var(--ev-paper-light);
  border: 1px solid var(--ev-rule);
  border-radius: 14px;
  padding: 30px 32px;
  box-shadow: 0 24px 60px -34px rgba(26,20,17,.4);
}
.evs-hero-card .evs-eyebrow { color: var(--evs-accent); }
.evs-hero-card-rows { margin-top: 14px; display: grid; gap: 10px; font-size: 15px; color: var(--ev-ink-soft); }
.evs-hero-card-rows span strong { color: var(--ev-ink); font-weight: 600; }

/* ===== Notices ===== */
.evs-notice {
  border: 1px solid var(--ev-rule-strong);
  border-left: 4px solid var(--evs-accent);
  background: var(--ev-paper-light);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 22px 0;
  font-size: 15px;
}
.evs-notice.evs-notice-error { border-left-color: #8C2F1B; }
.evs-notice.evs-notice-ok { border-left-color: #3F6B3A; }

/* ===== Catalogue ===== */
.evs-section { padding: 56px 0; }
.evs-section + .evs-section { border-top: 1px solid var(--ev-rule); }
.evs-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.evs-section-sub { color: var(--ev-ink-soft); font-size: 16px; max-width: 60ch; margin: 8px 0 26px; }

.evs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }

.evs-card {
  display: flex;
  flex-direction: column;
  background: var(--ev-paper-light);
  border: 1px solid var(--ev-rule);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.evs-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -26px rgba(26,20,17,.45); border-color: var(--ev-rule-strong); }
/* The card is 16/9 but a voucher design is not, so cover always crops. Anchor to
   the top edge: the design's headline/logo sits there, so only the bottom is lost. */
.evs-card-media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; object-position: top center; display: block; }
.evs-card-motif {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--evs-primary) 92%, black 0%) 0%, var(--evs-primary-deep) 100%);
  color: var(--ev-paper-light);
  position: relative;
}
.evs-card-motif::after {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(251,246,236,.35);
  border-radius: 8px;
  pointer-events: none;
}
.evs-card-motif span {
  font-family: var(--evs-font-serif);
  font-style: italic;
  font-size: 24px;
  letter-spacing: .01em;
  padding: 0 24px;
  text-align: center;
  font-variation-settings: "opsz" 60, "SOFT" 70, "WONK" 1;
}
.evs-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.evs-card-body h3 { font-size: 21px; }
.evs-card-desc {
  color: var(--ev-ink-soft);
  font-size: 14.5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.evs-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.evs-price { font-family: var(--evs-font-serif); font-size: 19px; color: var(--ev-ink); }
.evs-price small { font-family: var(--evs-font-sans); font-size: 12.5px; color: var(--ev-ink-soft); margin-right: 5px; }
.evs-card-cta { font-size: 13.5px; font-weight: 600; color: var(--evs-primary); white-space: nowrap; }
.evs-card:hover .evs-card-cta { text-decoration: underline; }

/* ===== Buttons ===== */
.evs-btn {
  font-family: var(--evs-font-sans);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
.evs-btn-primary { background: var(--evs-primary); color: var(--ev-paper-light); }
.evs-btn-primary:hover { background: var(--evs-primary-deep); transform: translateY(-1px); }
.evs-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.evs-btn-ghost { background: transparent; border-color: var(--ev-rule-strong); color: var(--ev-ink); }
.evs-btn-ghost:hover { background: rgba(26,20,17,.05); }
.evs-btn-block { width: 100%; justify-content: center; }

/* ===== Product detail ===== */
.evs-product { padding: 56px 0 72px; }
.evs-product-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 52px; align-items: start; }
@media (max-width: 880px) { .evs-product-grid { grid-template-columns: 1fr; gap: 32px; } }
.evs-product-media { position: sticky; top: 96px; }
@media (max-width: 880px) { .evs-product-media { position: static; } }
.evs-product-media img { width: 100%; border-radius: 14px; border: 1px solid var(--ev-rule); box-shadow: 0 24px 60px -30px rgba(26,20,17,.5); }
.evs-product-motif {
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--evs-primary) 0%, var(--evs-primary-deep) 100%);
  color: var(--ev-paper-light);
  position: relative;
  box-shadow: 0 24px 60px -30px rgba(26,20,17,.5);
}
.evs-product-motif::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(251,246,236,.35); border-radius: 9px; }
.evs-product-motif span {
  font-family: var(--evs-font-serif);
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 38px);
  text-align: center;
  padding: 0 36px;
  font-variation-settings: "opsz" 72, "SOFT" 70, "WONK" 1;
}
.evs-crumbs { font-size: 13.5px; margin-bottom: 18px; color: var(--ev-ink-soft); }
.evs-crumbs a { text-decoration: none; }
.evs-crumbs a:hover { color: var(--evs-primary); text-decoration: underline; }
.evs-product h1 { font-size: clamp(32px, 4.4vw, 56px); }
.evs-product-desc { color: var(--ev-ink-soft); margin-top: 16px; max-width: 60ch; }

/* ===== Buy form ===== */
.evs-form { margin-top: 28px; display: grid; gap: 22px; }
.evs-fieldset { border: 1px solid var(--ev-rule); border-radius: 14px; padding: 22px 24px 24px; background: var(--ev-paper-light); margin: 0; }
.evs-fieldset legend {
  font-family: var(--evs-font-serif);
  font-size: 19px;
  padding: 0 10px;
  margin-left: -10px;
}
.evs-field { display: grid; gap: 6px; margin-bottom: 14px; }
.evs-field:last-child { margin-bottom: 0; }
.evs-field label { font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.evs-field label small { font-weight: 400; color: var(--ev-ink-soft); }
/* Blazor's InputText renders no type attribute, so match all inputs except
   the radio/checkbox controls rather than listing text-like types. */
.evs-input, .evs-field input:not([type="checkbox"]):not([type="radio"]),
.evs-field textarea, .evs-field select {
  font-family: var(--evs-font-sans);
  font-size: 16px;
  padding: 11px 14px;
  border: 1px solid var(--ev-rule-strong);
  border-radius: 9px;
  background: var(--ev-paper);
  color: var(--ev-ink);
  width: 100%;
}
.evs-field input:focus, .evs-field textarea:focus, .evs-field select:focus {
  outline: 2px solid color-mix(in srgb, var(--evs-primary) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--evs-primary);
}
.evs-field textarea { min-height: 96px; resize: vertical; }
.evs-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .evs-2col { grid-template-columns: 1fr; } }

/* Amount chips (fixed-value denominations) */
.evs-amounts { display: flex; flex-wrap: wrap; gap: 10px; }
.evs-amount { position: relative; }
.evs-amount input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.evs-amount span {
  display: inline-block;
  font-family: var(--evs-font-serif);
  font-size: 19px;
  padding: 12px 24px;
  border: 1px solid var(--ev-rule-strong);
  border-radius: 999px;
  background: var(--ev-paper);
  transition: all .15s ease;
}
.evs-amount input:checked + span {
  background: var(--evs-primary);
  border-color: var(--evs-primary);
  color: var(--ev-paper-light);
}
.evs-amount input:focus-visible + span { outline: 2px solid var(--evs-primary); outline-offset: 2px; }

/* Gift toggle: pure CSS reveal so the form works without a circuit */
.evs-gift-check { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 600; font-size: 15px; }
.evs-gift-check input { width: 19px; height: 19px; accent-color: var(--evs-primary); }
.evs-gift-fields { display: none; margin-top: 16px; }
.evs-gift-check:has(input:checked) ~ .evs-gift-fields,
.evs-fieldset:has(.evs-gift-check input:checked) .evs-gift-fields { display: block; }
/* The hint only explains the unticked default, so it goes away once ticked. */
.evs-gift-hint { font-size: 13.5px; color: var(--ev-ink-soft); margin: 8px 0 0 29px; }
.evs-gift-check:has(input:checked) ~ .evs-gift-hint,
.evs-fieldset:has(.evs-gift-check input:checked) .evs-gift-hint { display: none; }

.evs-validation { color: #8C2F1B; font-size: 13.5px; margin-top: 4px; }
.evs-form .validation-message { color: #8C2F1B; font-size: 13.5px; }

.evs-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 0; }
.evs-total-row .evs-price { font-size: 24px; }
.evs-secure-note { font-size: 13px; color: var(--ev-ink-soft); display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* ===== About / hours / contact ===== */
.evs-about-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; }
@media (max-width: 820px) { .evs-about-grid { grid-template-columns: 1fr; } }
.evs-about-text { color: var(--ev-ink-soft); max-width: 62ch; }
.evs-info-card { border: 1px solid var(--ev-rule); border-radius: 14px; background: var(--ev-paper-light); padding: 24px 26px; }
.evs-info-card + .evs-info-card { margin-top: 18px; }
.evs-info-card h3 { font-size: 20px; margin-bottom: 12px; }
.evs-hours { width: 100%; font-size: 14.5px; border-collapse: collapse; }
.evs-hours td { padding: 5px 0; border-bottom: 1px dashed var(--ev-rule); }
.evs-hours tr:last-child td { border-bottom: none; }
.evs-hours td:last-child { text-align: right; color: var(--ev-ink-soft); }
.evs-contact-rows { display: grid; gap: 8px; font-size: 14.5px; }
.evs-contact-rows a { text-decoration: none; }
.evs-contact-rows a:hover { color: var(--evs-primary); text-decoration: underline; }
.evs-social { display: flex; gap: 14px; margin-top: 12px; }
.evs-social a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--evs-primary); }
.evs-social a:hover { text-decoration: underline; }

/* ===== Terms / prose pages ===== */
.evs-prose { max-width: 70ch; color: var(--ev-ink-soft); }
.evs-prose p { margin-bottom: .9em; }

/* ===== Order status ===== */
.evs-order { max-width: 720px; margin: 0 auto; padding: 64px 0 80px; }
.evs-order-card { background: var(--ev-paper-light); border: 1px solid var(--ev-rule); border-radius: 16px; padding: 38px 40px; box-shadow: 0 24px 60px -34px rgba(26,20,17,.4); }
@media (max-width: 560px) { .evs-order-card { padding: 26px 22px; } }
.evs-order-state { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.evs-order-state .evs-state-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--evs-accent); flex: none; }
.evs-order-state.paid .evs-state-dot { background: #3F6B3A; }
.evs-order-state.failed .evs-state-dot { background: #8C2F1B; }
.evs-order-lines { margin: 22px 0; border-top: 1px solid var(--ev-rule); }
.evs-order-line { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--ev-rule); font-size: 15px; }
.evs-order-line .evs-muted { color: var(--ev-ink-soft); font-size: 13.5px; }
.evs-voucher-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px;
  letter-spacing: .06em;
  background: var(--ev-paper);
  border: 1px dashed var(--ev-rule-strong);
  border-radius: 8px;
  padding: 6px 12px;
  display: inline-block;
}
.evs-spinner {
  width: 22px; height: 22px; flex: none;
  border: 2.5px solid var(--ev-rule);
  border-top-color: var(--evs-primary);
  border-radius: 50%;
  animation: evs-spin 0.9s linear infinite;
}
@keyframes evs-spin { to { transform: rotate(360deg); } }

/* ===== Footer ===== */
.evs-foot { margin-top: auto; border-top: 1px solid var(--ev-rule); padding: 26px 0 30px; }
.evs-foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--ev-ink-soft); }
.evs-foot a { text-decoration: none; }
.evs-foot a:hover { color: var(--evs-primary); text-decoration: underline; }
.evs-powered { display: inline-flex; gap: 6px; align-items: baseline; }
.evs-powered .evs-powered-mark { font-family: var(--ev-font-serif); font-size: 15px; color: var(--ev-ink); }
.evs-powered .evs-powered-mark i { color: var(--ev-claret); font-style: italic; }