/* ============================================================
   payload-storefront.css
   Template stylesheet for integrating Payload storefront HTML
   into a customer's static site.

   HOW TO USE:
   1. Copy this file into your static site's CSS directory.
   2. Include it on any page that embeds Payload storefront HTML:
        <link rel="stylesheet" href="/css/payload-storefront.css">
   3. Customize the design tokens in the :root block below to
      match the customer's brand. Everything else inherits from
      those tokens — you rarely need to touch individual rules.
   4. Override individual rules below the token block as needed.

   SECTIONS:
     1.  Design Tokens (customize these)
     2.  Utility classes
     3.  Layout
     4.  Buttons
     5.  Badges
     6.  Navigation
     7.  Hero
     8.  Product sections & grid
     9.  Product card
     10. Product detail page
     11. Storefront page extras (store header, category filter, cart)
     12. Checkout page
     13. Order confirmation page
     14. Login / Auth page
     15. Footer
   ============================================================ */


/* ── 1. Design Tokens ───────────────────────────────────────
   Change these to match the customer's brand.
   All other rules reference these variables — very little else
   needs to change for a basic re-brand.
   ──────────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --payload-primary:       #2563eb;   /* main CTA colour — buttons, links, accents */
  --payload-primary-dark:  #1d4ed8;   /* hover state for primary */
  --payload-accent:        #f59e0b;   /* secondary accent (currently unused in templates) */
  --payload-danger:        #dc2626;   /* sale price, out-of-stock, error states */
  --payload-success:       #16a34a;   /* success states (currently unused in templates) */

  /* Surface colours */
  --payload-bg:            #f8fafc;   /* page background */
  --payload-surface:       #ffffff;   /* card / panel background */
  --payload-border:        #e2e8f0;   /* borders and dividers */

  /* Text colours */
  --payload-text:          #0f172a;   /* body text */
  --payload-text-muted:    #64748b;   /* secondary / helper text */

  /* Typography */
  --payload-font:          'Inter', system-ui, sans-serif;
  --payload-font-sm:       0.875rem;
  --payload-font-base:     1rem;
  --payload-font-lg:       1.125rem;
  --payload-font-xl:       1.25rem;
  --payload-font-2xl:      1.5rem;
  --payload-font-4xl:      2.25rem;

  /* Spacing scale */
  --payload-space-1:  0.25rem;
  --payload-space-2:  0.5rem;
  --payload-space-3:  0.75rem;
  --payload-space-4:  1rem;
  --payload-space-6:  1.5rem;
  --payload-space-8:  2rem;
  --payload-space-12: 3rem;
  --payload-space-16: 4rem;

  /* Border radius */
  --payload-radius-sm: 0.25rem;
  --payload-radius-md: 0.5rem;
  --payload-radius-lg: 1rem;

  /* Shadows */
  --payload-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.1);
  --payload-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);

  /* Nav height — used by coming-soon full-screen hero calculation */
  --nav-height: 4rem;

  /* ── Aliases used internally ────────────────────────────────
     These map payload-* tokens to the shorter names used
     throughout the templates. Do not rename them.
     ──────────────────────────────────────────────────────── */
  --color-primary:       var(--payload-primary);
  --color-primary-dark:  var(--payload-primary-dark);
  --color-danger:        var(--payload-danger);
  --color-success:       var(--payload-success);
  --color-bg:            var(--payload-bg);
  --color-surface:       var(--payload-surface);
  --color-border:        var(--payload-border);
  --color-text:          var(--payload-text);
  --color-text-muted:    var(--payload-text-muted);
  --font-size-sm:        var(--payload-font-sm);
  --font-size-base:      var(--payload-font-base);
  --font-size-lg:        var(--payload-font-lg);
  --font-size-xl:        var(--payload-font-xl);
  --font-size-2xl:       var(--payload-font-2xl);
  --font-size-4xl:       var(--payload-font-4xl);
  --space-1:  var(--payload-space-1);
  --space-2:  var(--payload-space-2);
  --space-3:  var(--payload-space-3);
  --space-4:  var(--payload-space-4);
  --space-6:  var(--payload-space-6);
  --space-8:  var(--payload-space-8);
  --space-12: var(--payload-space-12);
  --space-16: var(--payload-space-16);
  --radius-sm: var(--payload-radius-sm);
  --radius-md: var(--payload-radius-md);
  --radius-lg: var(--payload-radius-lg);
  --shadow-sm: var(--payload-shadow-sm);
  --shadow-md: var(--payload-shadow-md);
}


/* ── 2. Utility classes ─────────────────────────────────────
   Small helpers used directly in templates.
   ──────────────────────────────────────────────────────────── */

/* Muted / secondary text. Used on descriptions, empty states,
   helper messages throughout all storefront pages. */
.text-muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}


/* ── 3. Layout ──────────────────────────────────────────────
   Used on every page as a centering wrapper.
   ──────────────────────────────────────────────────────────── */

/* .container — wraps all page content. Max-width kicks in at xl. */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 1280px) {
  .container { max-width: 1200px; }
}

/* .main-content — wraps everything between nav and footer in base.html.
   Ensures the footer stays at the bottom on short pages. */
.main-content {
  min-height: calc(100vh - var(--nav-height) - 4rem);
}


/* ── 4. Buttons ─────────────────────────────────────────────
   REQUIRED — used on every page.
   All <button> and <a class="btn ..."> elements.
   ──────────────────────────────────────────────────────────── */

/* Base button — applied to ALL buttons alongside a variant class */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Filled primary button — "Add to Cart", "Proceed to Checkout", etc. */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

/* Ghost/outline button — "Continue Shopping", "Back to Store", etc. */
.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover:not(:disabled) {
  background: var(--color-border);
}

/* Size modifiers */
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--font-size-lg); }
@media (min-width: 480px) {
  .btn-lg { padding: var(--space-3) var(--space-8); }
}

/* Inline text link button — used in auth "Change email" */
.btn-link {
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  color: var(--color-primary);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 500;
  padding: 0;
  transition: opacity 0.15s;
  touch-action: manipulation;
}
.btn-link:hover { opacity: 0.7; }


/* ── 5. Badges ──────────────────────────────────────────────
   Small pill labels. Used on the cart count in the nav.
   ──────────────────────────────────────────────────────────── */

/* Base badge */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: var(--space-1);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

/* Variants */
.badge-primary { background: var(--color-primary); color: #fff; }
.badge-sale    { background: var(--color-danger);  color: #fff; }
.badge-new     { background: var(--color-success); color: #fff; }


/* ── 6. Navigation ──────────────────────────────────────────
   Sticky top nav rendered by templates/partials/nav.html.
   Set --nav-height in :root if you change the nav height.
   ──────────────────────────────────────────────────────────── */

/* Outer nav bar */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Flex row inside the nav */
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Brand / logo text link */
.nav__brand {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
  flex: 1;                /* Pushes links to the right on mobile */
  text-decoration: none;
}

/* Nav links list — hidden on mobile, shown at ≥480px */
.nav__links {
  display: none;
}
@media (min-width: 480px) {
  .nav__brand  { flex: unset; }
  .nav__links  {
    display: flex;
    gap: var(--space-4);
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .nav__inner  { gap: var(--space-6); }
}
.nav__links a {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.15s;
  text-decoration: none;
}
.nav__links a:hover { color: var(--color-text); }

/* Right-side action area (cart icon + login button) */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Cart icon with badge overlay */
.nav__cart {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  padding: var(--space-1);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav__cart .badge {
  position: absolute;
  top: -4px;
  right: -6px;
}

/* Logged-in user email display — hidden on mobile */
.nav__user {
  display: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 480px) {
  .nav__user { display: block; }
}


/* ── 7. Hero ────────────────────────────────────────────────
   Full-width banner section. Used on the home page and
   coming-soon page.
   ──────────────────────────────────────────────────────────── */

.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding-block: var(--space-8);
}

/* Full-screen variant for the coming-soon page */
.hero--fullscreen {
  min-height: calc(100vh - var(--nav-height) - 4rem);
  display: flex;
  align-items: center;
}

.hero__inner  { text-align: center; }

.hero__heading {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.hero__subheading {
  font-size: var(--font-size-base);
  opacity: 0.85;
  margin-bottom: var(--space-6);
  max-width: 40ch;
  margin-inline: auto;
}

/* CTA button inside hero — inverted colours */
.hero .btn-primary {
  background: #fff;
  color: var(--color-primary);
}
.hero .btn-primary:hover { background: #f0f4ff; }

@media (min-width: 768px) {
  .hero { padding-block: var(--space-16); }
  .hero__heading    { font-size: var(--font-size-4xl); }
  .hero__subheading { font-size: var(--font-size-lg); margin-bottom: var(--space-8); }
}


/* ── 8. Product sections & grid ─────────────────────────────
   Wraps a section heading + product card grid. Used on the
   home page (via product_grid.html) and the storefront page.
   ──────────────────────────────────────────────────────────── */

.product-section {
  padding-block: var(--space-8);
}
.product-section + .product-section {
  padding-top: 0;
}

/* Section heading — "Shop by Category", "New Arrivals", etc. */
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

/* Smaller variant used above the cart summary on the storefront page */
.section-title--sm {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .product-section { padding-block: var(--space-12); }
  .section-title   { font-size: var(--font-size-2xl); margin-bottom: var(--space-6); }
}

/* Responsive product grid — 2 cols on mobile, 3 on tablet, auto-fill on desktop */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px)  { .product-grid { gap: var(--space-4); } }
@media (min-width: 768px)  { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }


/* ── 9. Product card ────────────────────────────────────────
   Individual card inside the product grid.
   REQUIRED — this is the core storefront component.
   ──────────────────────────────────────────────────────────── */

.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (hover: hover) {
  .product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

/* "SALE", "NEW" badge overlaid on the image */
.product-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--color-danger);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
}
@media (min-width: 480px) {
  .product-card__badge { top: var(--space-3); left: var(--space-3); font-size: 0.7rem; }
}

/* Product image — maintains 4:3 ratio */
.product-card__img-link { display: block; }
.product-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--color-border);
}

/* Placeholder shown when no image is uploaded */
.product-card__img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--color-border);
}

/* Card body — stacks name, price, button vertically */
.product-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
@media (min-width: 480px) {
  .product-card__body { padding: var(--space-4); }
}

/* Product name */
.product-card__name-link { color: inherit; text-decoration: none; }
.product-card__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
}
@media (min-width: 480px) {
  .product-card__name { font-size: var(--font-size-base); }
}
@media (hover: hover) {
  .product-card__name-link:hover .product-card__name { color: var(--color-primary); }
}

/* Category label under the name */
.product-card__category {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Price — single price line */
.product-card__price {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-primary);
}
@media (min-width: 480px) {
  .product-card__price { font-size: var(--font-size-lg); }
}

/* Sale price layout — sale price + strikethrough original + % OFF badge */
.product-card__pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.product-card__price--sale    { color: var(--color-danger); }
.product-card__price-original {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.product-card__discount {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-danger);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* "Add to Cart" / "Out of Stock" button — pinned to bottom of card */
.product-card__cta { margin-top: auto; width: 100%; }


/* ── 10. Product detail page ────────────────────────────────
   Full product page at /products/{id}.
   Two-column layout on desktop (gallery + info).
   ──────────────────────────────────────────────────────────── */

.product-detail {
  padding-block: var(--space-8);
}

/* Breadcrumb: Home / Shop / Product name */
.product-detail__breadcrumb {
  margin-bottom: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.product-detail__breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}
.product-detail__breadcrumb a:hover { text-decoration: underline; }
.product-detail__breadcrumb-sep {
  margin-inline: var(--space-1);
  color: var(--color-text-muted);
}

/* Single-column on mobile; two-column on tablet+ */
.product-detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 768px) {
  .product-detail { padding-block: var(--space-12); }
  .product-detail__layout { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

/* Gallery column */
.product-detail__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Main product image — square crop */
.product-detail__main-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.product-detail__img-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

/* Thumbnail strip below main image */
.product-detail__thumbnails {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.product-detail__thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: border-color 0.15s;
}
@media (min-width: 480px) {
  .product-detail__thumb { width: 72px; height: 72px; }
}
.product-detail__thumb:hover,
.product-detail__thumb.active { border-color: var(--color-primary); }

/* Info column */
.product-detail__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Badge ("SALE", "NEW") in info column */
.product-detail__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  background: var(--color-danger);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
}

/* Product name heading */
.product-detail__name {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .product-detail__name { font-size: var(--font-size-4xl); }
}

/* Pricing row */
.product-detail__pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.product-detail__price {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
}
@media (min-width: 480px) {
  .product-detail__price { font-size: var(--font-size-2xl); }
}
.product-detail__compare {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.product-detail__discount {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #fff;
  background: var(--color-danger);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  align-self: center;
}

/* Description paragraph */
.product-detail__description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Bullet-point detail list */
.product-detail__details-list {
  list-style: disc;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Stock status line */
.product-detail__stock      { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.product-detail__stock--low { color: var(--color-danger); font-weight: 600; }
.product-detail__stock--out { color: var(--color-danger); font-weight: 700; }

/* Action buttons row */
.product-detail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.product-detail__actions .btn { width: 100%; justify-content: center; }
@media (min-width: 480px) {
  .product-detail__actions { flex-direction: row; flex-wrap: wrap; }
  .product-detail__actions .btn { flex: 1; min-width: 10rem; width: auto; }
}


/* ── 11. Storefront page extras ─────────────────────────────
   Additional classes used only on the /storefront/ page.
   ──────────────────────────────────────────────────────────── */

/* Header row above the product grid — title + "View All" button */
.store-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.store-header .section-title {
  margin-bottom: var(--space-1);
}

/* Category filter pills */
.category-filter {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* Cart summary section below the grid */
.cart-section { padding-top: 0; }

/* Scrollable wrapper for the cart table on small screens */
.cart-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
}

/* Cart table itself */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}

/* Table header cells */
.cart-th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Table data cells */
.cart-td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

/* Bold total line */
.cart-total {
  margin-top: var(--space-3);
  font-weight: 700;
}

/* "Proceed to Checkout" button row */
.cart-actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}


/* ── 12. Checkout page ──────────────────────────────────────
   Used on /storefront/checkout.
   ──────────────────────────────────────────────────────────── */

/* Constrain checkout layout width */
.checkout-container { max-width: 720px; }

/* Card panel — used for both cart summary and payment form */
.checkout-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Sub-heading inside a checkout box */
.checkout-box__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
}

/* Cart items list inside checkout summary */
.checkout-cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Bold total line in checkout cart summary */
.checkout-total { font-weight: 700; margin: 0; }

/* Form field label */
.form-label {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}

/* <select> element styling */
.form-select {
  width: 100%;
  max-width: 360px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: inherit;
  background: var(--color-surface);
}

/* "Complete Checkout" + "Back to Store" button row */
.checkout-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* "Processing…" / error status message below checkout actions */
.checkout-status {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  min-height: 1.25rem;
}


/* ── 13. Order confirmation page ────────────────────────────
   Used on /storefront/confirmation/{order_number}.
   ──────────────────────────────────────────────────────────── */

/* Card panel wrapping order details */
.confirmation-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Sub-heading inside confirmation box */
.confirmation-box__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
}

/* "Order Number: …" line */
.confirmation-order-number { margin: 0; }

/* List of items in the order */
.order-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Bold order total */
.order-total { font-weight: 700; margin: 0; }

/* "Continue Shopping" button row */
.confirm-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}


/* ── 14. Login / Auth page ──────────────────────────────────
   Passwordless email-code login at /login.
   ──────────────────────────────────────────────────────────── */

/* Full-height centering wrapper for the auth card */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-height));
  padding-block: var(--space-8);
}

/* The login card itself */
.auth-card {
  width: 100%;
  max-width: 22rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

/* Card header — logo initial + title + subtitle */
.auth-card__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

/* Brand initial shown as a large rounded square */
.auth-card__logo {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-xl);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/* "Welcome back" heading */
.auth-card__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

/* Subtitle below the heading */
.auth-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Vertical form layout */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Label + input pair */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Field label */
.auth-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* Email / code input */
.auth-input {
  padding: 0.6875rem 0.875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  -webkit-appearance: none;
}
.auth-input::placeholder { color: var(--color-text-muted); }
.auth-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}

/* 6-digit code input — large centred digits */
.auth-input--code {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-align: center;
  padding-block: 0.875rem;
  background: var(--color-bg);
  font-variant-numeric: tabular-nums;
  border-style: dashed;
}
@media (min-width: 480px) {
  .auth-input--code { font-size: 1.875rem; }
}
.auth-input--code:focus { border-style: solid; }

/* "Send Code" / "Sign In" submit button */
.auth-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .auth-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
  }
}
.auth-btn:active:not(:disabled) { transform: translateY(0); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* "Code sent to email@…" info box shown on step 2 */
.auth-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.auth-hint strong { color: var(--color-text); font-weight: 600; }

/* Inline error message */
.auth-error {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  line-height: 1.5;
}


/* ── 15. Testing mode banner ────────────────────────────────
   Shown on customer pages when setup.json testing.enabled is true.
   ──────────────────────────────────────────────────────────── */

.testing-banner {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.testing-banner__text { margin: 0; }

.testing-banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


/* ── 16. Footer ─────────────────────────────────────────────
   Simple centred copyright footer from partials/footer.html.
   ──────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.footer__inner { display: flex; justify-content: center; }