/* Shop pages, forms and account area. Uses the same tokens and type system as landing.css. */

.page {
  max-width: 1440px;
  margin: auto;
  padding: 70px 6% 90px;
}

.page-narrow {
  max-width: 560px;
}

.page h1 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  font-weight: 700;
  font-size: clamp(54px, 6vw, 84px);
  letter-spacing: -1px;
  line-height: .98;
  margin: 18px 0 26px;
}

.page h1 em {
  font-family: Georgia, serif;
  font-weight: normal;
  font-style: italic;
  color: var(--red);
  letter-spacing: -3px;
}

.page .lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 560px;
}

.page h2.section-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  font-size: 40px;
  margin: 0 0 18px;
  line-height: 1;
}

.muted {
  color: var(--muted);
}

/* Auth pages (Devise: login, register, password reset, resend confirmation, plus the
   post-signup "check your inbox" page): a short form is the whole point of the page, so the
   hero-sized heading and generous padding the rest of the site uses elsewhere is wasted
   height here, especially on a phone. */
.auth-page {
  padding-top: 36px;
  padding-bottom: 56px;
}

.auth-page .eyebrow {
  margin: 0;
}

.auth-page h1 {
  font-size: clamp(34px, 7vw, 50px);
  margin: 8px 0 12px;
}

.auth-page .lede {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
}

.auth-page .panel {
  padding: 32px;
}

.auth-page .form {
  margin-top: 0;
  gap: 18px;
}

.auth-page .actions .button,
.auth-page .actions input[type="submit"] {
  width: 100%;
  text-align: center;
  padding-top: 18px;
  padding-bottom: 18px;
}

@media (max-width: 520px) {
  .page {
    padding-left: 20px;
    padding-right: 20px;
  }

  .auth-page .panel {
    padding: 24px 20px;
  }
}

/* A little life on page load: the copy rises in, the panel settles with a slight tilt (the
   same "stickered" motif the homepage uses on its rotated images), and the eyebrow's red dot
   breathes gently. All disabled under prefers-reduced-motion below. */
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes auth-settle {
  from { opacity: 0; transform: translateY(18px) rotate(-1.1deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes eyebrow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.auth-page .eyebrow,
.auth-page h1,
.auth-page .lede,
.auth-page > p.muted {
  animation: auth-rise .6s cubic-bezier(.16, .8, .3, 1) both;
}

.auth-page .eyebrow { animation-delay: .02s; }
.auth-page h1 { animation-delay: .08s; }
.auth-page .lede { animation-delay: .16s; }
.auth-page > p.muted { animation-delay: .36s; }

.auth-page .panel {
  animation: auth-settle .55s cubic-bezier(.16, .8, .3, 1) both;
  animation-delay: .24s;
}

.auth-page .eyebrow span {
  animation: eyebrow-pulse 2.4s ease-in-out infinite;
}

/* 404 page: centered, a little playful, same rise-in as the auth pages. */
.error-page {
  text-align: center;
  padding-top: 90px;
  padding-bottom: 100px;
}

.error-logo {
  width: 110px;
  height: auto;
  display: block;
  margin: 0 auto 36px;
  filter: brightness(1.18) contrast(1.12);
  mix-blend-mode: multiply;
  animation: auth-settle .55s cubic-bezier(.16, .8, .3, 1) both;
}

.error-page .eyebrow,
.error-page h1,
.error-page .lede,
.error-page .button {
  animation: auth-rise .6s cubic-bezier(.16, .8, .3, 1) both;
}

.error-page .eyebrow { animation-delay: .1s; }
.error-page h1 { animation-delay: .16s; }
.error-page .lede { animation-delay: .24s; margin-left: auto; margin-right: auto; }
.error-page .button { animation-delay: .34s; }

/* Flash messages */
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.flash {
  border: 1px solid var(--ink);
  background: #f3ecdb;
  padding: 16px 20px;
  margin: 0 6% 0;
  max-width: 1440px;
  margin-inline: auto;
  font-size: 14px;
  line-height: 1.6;
  animation: flash-in .35s ease both;
}

.flash-alert {
  border-color: var(--red);
  color: #6e2619;
}

.flash-wrap {
  padding-top: 24px;
}

/* Buttons */
.button-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  display: inline-block;
  padding: 15px 25px;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s, color .2s, transform .15s ease;
}

.button-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

button.button,
input[type="submit"].button {
  font: inherit;
}

/* A small press on click, everywhere a button already exists on the site. */
.button,
.button-ghost,
.button-link {
  transition: background .2s, border-color .2s, color .2s, transform .15s ease;
}

.button:active,
.button-ghost:active,
.button-link:active {
  transform: scale(.97);
}

.button[disabled],
button[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.button-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
}

/* Forms */
.form {
  display: grid;
  gap: 22px;
  margin-top: 28px;
}

.field label,
.field .label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 8px;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="number"],
.field input[type="url"],
.field input[type="search"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #f6f1e3;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 13px 14px;
  transition: border-color .2s, box-shadow .2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(172, 63, 44, .15);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.field .hint {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}

.field .errors {
  display: block;
  font-size: 13px;
  color: var(--red);
  margin-top: 6px;
  font-weight: 700;
}

.field-error input,
.field-error select,
.field-error textarea {
  border-color: var(--red);
}

.checkbox {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.checkbox input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--red);
}

.checkbox small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.form-error-summary {
  border: 1px solid var(--red);
  color: #6e2619;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  animation: flash-in .35s ease both;
}

/* Panels and product page */
.panel {
  border: 1px solid var(--line);
  background: #f3ecdb;
  padding: 28px;
}

.product-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: start;
  margin-top: 40px;
}

.product-gallery {
  display: grid;
  gap: 20px;
}

.product-gallery img {
  width: 100%;
  height: auto;
  display: block;
  background: #d1c7ac;
  box-shadow: 12px 12px 0 #cec5ad;
}

.product-gallery figure {
  margin: 0;
}

.product-gallery figcaption {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--muted);
  margin-top: 10px;
}

.product-buy {
  position: sticky;
  top: 24px;
  background: var(--ink);
  color: var(--paper);
  padding: 34px 32px;
  border: 7px double #6c6757;
  box-shadow: 12px 12px 0 #cec5ad;
}

.product-buy .eyebrow {
  color: #b7ac94;
}

.product-buy h2 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 58px;
  line-height: .95;
  margin: 14px 0 10px;
}

.product-buy .price {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 44px;
  line-height: 1;
  margin: 18px 0 6px;
  color: #ead3b8;
}

.product-buy .price-note {
  font-size: 12px;
  color: #b4ad9c;
  line-height: 1.6;
  margin: 0;
}

.product-buy .trust-line {
  font-size: 11px;
  color: #9e9888;
  margin: 16px 0 0;
  line-height: 1.7;
}

.product-buy .trust-line a {
  color: #d8cbb0;
  text-decoration: underline;
}

.product-buy .trust-line a:hover {
  color: var(--paper);
}

/* Sticky mobile buy bar: a compact restatement of the main CTA, so a visitor scrolled
   past the buy box on a phone is never more than a thumb's reach from checkout. */
.sticky-buy {
  display: none;
}

@media (max-width: 760px) {
  .sticky-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background: var(--ink);
    color: var(--paper);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px #0003;
  }

  .sticky-buy-price {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: 24px;
    flex-shrink: 0;
  }

  .sticky-buy form {
    flex: 1;
  }

  .sticky-buy .button {
    width: 100%;
    text-align: center;
    padding: 13px 16px;
    font-size: 13px;
  }

  /* .sticky-buy renders inside .product-buy's enclosing .page, fixed to the viewport -
     it overlays whatever is scrolled to the bottom, so the footer that follows .page
     needs clearance or it would end up hidden behind the bar at the true end of the page. */
  body:has(.sticky-buy) footer {
    padding-bottom: 90px;
  }
}

.platform-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 0;
  font-size: 14px;
}

.platform-table th,
.platform-table td {
  text-align: left;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-weight: 400;
}

.platform-table tr:last-child th,
.platform-table tr:last-child td {
  border-bottom: 1px solid var(--line);
}

.platform-table td {
  text-align: right;
}

.platform-icon {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
  flex-shrink: 0;
}

.tags .platform-icon {
  margin-right: 4px;
  vertical-align: -1px;
}

.product-buy .button {
  width: 100%;
  text-align: center;
  margin-top: 26px;
}

.product-buy .button-ghost {
  width: 100%;
  text-align: center;
  color: var(--paper);
  border-color: var(--paper);
  margin-top: 14px;
}

.product-buy .button-ghost:hover {
  background: var(--paper);
  color: var(--ink);
}

.product-buy .status-line {
  font-size: 14px;
  line-height: 1.7;
  color: #d8d1bf;
  margin: 20px 0 0;
}

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.spec-list li {
  border-top: 1px solid var(--line);
  padding: 14px 0;
  line-height: 1.7;
  font-size: 15px;
}

.spec-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.feature-list {
  padding-left: 21px;
  line-height: 1.9;
  font-size: 15px;
}

.product-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 70px;
}

.product-faq {
  margin-top: 70px;
  max-width: 720px;
}

.product-faq details {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}

.product-faq details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.product-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
}

.product-faq summary::-webkit-details-marker {
  display: none;
}

.product-faq summary::after {
  content: "+";
  float: right;
  color: var(--red);
  font-weight: 700;
}

.product-faq details[open] summary::after {
  content: "–";
}

.product-faq details p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.tag-row li {
  border: 1px solid var(--line);
  padding: 5px 8px;
  font-size: 10px;
  letter-spacing: .6px;
  font-weight: 700;
}

/* Status badges: coming soon, pending, paid, failed */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  padding: 6px 10px;
  border: 1px solid currentColor;
  text-transform: uppercase;
}

.badge-soon { color: var(--muted); }
.badge-pending { color: #7a5a14; }
.badge-paid { color: #2f5a2b; }
.badge-failed { color: var(--red); }

.badge-sale {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
  vertical-align: middle;
  margin-left: 8px;
}

.product-buy .price-was {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #b4ad9c;
  margin-right: 6px;
}

/* Account area */
.account-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 50px;
  margin-top: 40px;
  align-items: start;
}

.account-nav {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink);
}

.account-nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 15px;
}

.account-nav a[aria-current="page"],
.account-nav a:hover {
  color: var(--red);
}

.plugin-list {
  display: grid;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.plugin-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  background: #f3ecdb;
  padding: 24px 26px;
}

.plugin-card h3 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 36px;
  margin: 0 0 6px;
  line-height: 1;
}

.plugin-card .release-meta {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}

.download-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.license-block {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 4px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 22px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.data-table th {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.table-scroll {
  overflow-x: auto;
}

.beta-grant-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.beta-grant-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.beta-grant-list li:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.beta-grant-list li.revoked {
  color: var(--muted);
}

.badge-revoked {
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Newsletter module: discreet, under the closing section */
.promo {
  max-width: 1440px;
  margin: auto;
  padding: 50px 6%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.promo h2 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 40px;
  line-height: 1;
  margin: 12px 0 0;
}

.promo form {
  display: grid;
  gap: 16px;
}

.promo .inline {
  display: flex;
  gap: 10px;
}

.promo .inline input[type="email"] {
  flex: 1;
  font: inherit;
  font-size: 15px;
  padding: 13px 14px;
  border: 1px solid var(--ink);
  background: #f6f1e3;
  color: var(--ink);
  border-radius: 0;
  min-width: 0;
}

.promo .inline .button {
  white-space: nowrap;
}

.promo .checkbox {
  font-size: 13px;
}

/* Legal pages */
.legal {
  max-width: 760px;
  line-height: 1.8;
  font-size: 16px;
}

.legal h2 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 34px;
  margin: 44px 0 10px;
  line-height: 1;
}

.legal .draft-banner {
  border: 1px dashed var(--red);
  color: #6e2619;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 30px;
}

.inline-form {
  display: inline;
}

/* Responsive */
@media (max-width: 1000px) {
  .product-layout,
  .product-sections {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .product-buy {
    position: static;
  }

  .promo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page {
    padding: 44px 16px 70px;
  }

  .flash-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .flash {
    margin-inline: 16px;
  }

  .account-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .account-nav {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
  }

  .plugin-card {
    grid-template-columns: 1fr;
  }

  .promo {
    padding: 40px 16px;
  }

  .promo .inline {
    flex-direction: column;
  }

  .product-buy {
    padding: 26px 22px;
  }

  .product-buy h2 {
    font-size: 46px;
  }
}

/* Share row on plugin pages */
.share {
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.share-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.share-link {
  display: inline-block;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 10px 14px;
  cursor: pointer;
}

.share-link:hover,
.share-link:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.share-status {
  font-size: 13px;
  color: var(--muted);
  min-height: 1.4em;
  margin: 10px 0 0;
}

/* Utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Honeypot field: present for bots, invisible for people. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mobile fit: the header carries four links, and the hero columns must not push the page wider than the screen. */
@media (max-width: 760px) {
  header {
    padding: 0 16px;
  }

  nav {
    gap: 12px;
  }

  nav a {
    font-size: 11px;
    white-space: nowrap;
  }

  .cart-toggle {
    font-size: 11px;
  }

  .hero,
  .hero > * {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 520px) {
  /* "Our approach" stays one scroll away on small phones, so the header keeps the plugins and login links. */
  .nav-optional {
    display: none;
  }
}

@media (max-width: 400px) {
  .hero h1 {
    font-size: 60px;
  }
}

/* Newsletter: the form and the confirmation share one fixed-height area, so the layout never jumps. */
.newsletter-frame {
  min-height: 176px;
  display: block;
}

.newsletter-form {
  display: grid;
  gap: 16px;
}

.newsletter-sent {
  border: 1px solid var(--line);
  background: #f3ecdb;
  padding: 22px 24px;
  min-height: 152px;
  box-sizing: border-box;
}

.newsletter-sent .newsletter-message {
  font-size: 16px;
  line-height: 1.6;
  margin: 8px 0 10px;
}

.newsletter-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.newsletter-error {
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

/* Newsletter pop-up */
.newsletter-dialog {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 36px 36px 28px;
  width: calc(100% - 32px);
  max-width: 480px;
}

.newsletter-dialog h2 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 46px;
  line-height: 1;
  margin: 12px 0 14px;
}

.newsletter-dialog-body {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 22px;
}

.newsletter-dialog .newsletter-frame {
  min-height: 150px;
}

.newsletter-dismiss {
  margin: 18px 0 0;
  text-align: center;
}

@media (max-width: 760px) {
  .newsletter-dialog {
    padding: 28px 22px 22px;
  }
}

/* Newsletter form: the same look in the homepage section and in the pop-up. */
.newsletter-form input[type="email"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #f6f1e3;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 14px 16px;
}

.newsletter-form .inline {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.newsletter-form .inline input {
  flex: 1;
}

.newsletter-form .inline .button {
  white-space: nowrap;
  padding-left: 22px;
  padding-right: 22px;
}

.newsletter-form .checkbox {
  font-size: 13px;
}

/* Inside the pop-up the field and the button stack, so each one is easy to tap. */
.newsletter-dialog .newsletter-form .inline {
  flex-direction: column;
}

.newsletter-dialog .newsletter-form .inline .button {
  width: 100%;
  text-align: center;
  padding-top: 16px;
  padding-bottom: 16px;
}

@media (max-width: 520px) {
  .newsletter-form .inline {
    flex-direction: column;
  }

  .newsletter-form .inline .button {
    width: 100%;
    text-align: center;
  }
}

.demo {
  margin-top: 32px;
}

.demo-audio {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-top: 12px;
}

.video-tutorials {
  margin-top: 32px;
}

.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 12px;
}

.video-item {
  margin: 0;
}

.tutorial-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #d1c7ac;
  box-shadow: 12px 12px 0 #cec5ad;
}

.video-item figcaption {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--muted);
  margin-top: 10px;
}

.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 6%;
  background: var(--ink);
  border-top: 1px solid var(--line);
}

/* Same specificity as the class rule above, so source order alone would leave the browser's
   default [hidden] { display: none } losing to our display: flex. Make hidden win explicitly. */
.cookie-consent[hidden] {
  display: none;
}

.cookie-consent p {
  margin: 0;
  max-width: 640px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper);
}

.cookie-consent-actions {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

.cookie-consent .button-ghost {
  border-color: var(--paper);
  color: var(--paper);
}

.cookie-consent .button-ghost:hover {
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 760px) {
  .cookie-consent {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cookie-consent-actions {
    justify-content: center;
  }
}

.direct-upload {
  margin-top: 10px;
}

.direct-upload-progress {
  height: 6px;
  margin-top: 10px;
  background: var(--line);
  overflow: hidden;
}

.direct-upload-bar {
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width .2s linear;
}

.direct-upload-status {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.direct-upload-status.direct-upload-error {
  color: var(--red);
}

/* Hero typewriter: reserves two lines of height so a shorter phrase never collapses the
   layout, and gives the typed line a blinking caret in the brand red. */
.hero-headline {
  min-height: 1.96em;
}

.hero-headline [data-typewriter-target] {
  display: inline-block;
  border-right: 3px solid var(--red);
  padding-right: 4px;
  animation: hero-caret-blink 1s steps(1) infinite;
}

@keyframes hero-caret-blink {
  50% {
    border-right-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline [data-typewriter-target] {
    animation: none;
    border-right: 0;
  }
}

/* Promo banner: thin bar above the header, admin-editable. */
.promo-banner {
  background: var(--red);
  color: var(--paper);
  text-align: center;
  padding: 10px 16px;
}

.promo-banner p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
}

.promo-banner-link {
  text-decoration: underline;
  margin-left: 8px;
  white-space: nowrap;
}

/* Cart: header badge + drawer. */
.cart-widget {
  display: flex;
  align-items: center;
}

.cart-toggle {
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.cart-toggle:hover {
  color: var(--red);
}

.nav-admin {
  color: var(--red);
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--red);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  margin: 0;
  height: 100vh;
  max-height: 100vh;
  width: min(380px, 100vw);
  max-width: none;
  border: 0;
  border-left: 1px solid var(--ink);
  padding: 32px 28px;
  box-sizing: border-box;
  overflow-y: auto;
}

.cart-drawer::backdrop {
  background: #151611cc;
  backdrop-filter: blur(4px);
}

.cart-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.cart-line:first-child {
  border-top: 0;
}

.cart-item-name {
  flex: 1;
  font-weight: 600;
}

.cart-item-price {
  color: var(--muted);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  margin: 6px 0 20px;
}

.cart-empty {
  padding: 20px 0;
}

.cart-error {
  background: #f3ecdb;
  border: 1px solid var(--red);
  color: #6e2619;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

@media (max-width: 760px) {
  .cart-drawer {
    width: 100vw;
    padding: 26px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page .eyebrow,
  .auth-page h1,
  .auth-page .lede,
  .auth-page > p.muted,
  .auth-page .panel,
  .auth-page .eyebrow span,
  .flash,
  .form-error-summary,
  .error-page .eyebrow,
  .error-page h1,
  .error-page .lede,
  .error-page .button,
  .error-logo {
    animation: none;
  }

  .button,
  .button-ghost,
  .button-link,
  .field input,
  .field select,
  .field textarea {
    transition: none;
  }
}