:root {
  /* Modern classic: warm paper, deep ink, restrained gold. The palette is
     unchanged in character - this is the same shop - but the greys are warmer,
     the ink is deeper and the gold is less brassy, which is most of what makes
     a page read as current rather than dated. */
  --shop-bg: #faf8f4;
  --shop-bg-deep: #f2eee6;
  --shop-card: #ffffff;
  --shop-text: #14181f;
  --shop-muted: #6c7480;
  --shop-faint: #9aa1ab;
  --shop-border: #e7e1d6;
  --shop-border-soft: #f0ebe2;
  --shop-dark: #11151b;
  --shop-dark-soft: #1d242e;
  --shop-gold: #a8823f;
  --shop-gold-bright: #c9a661;
  --shop-gold-soft: #f7efdf;
  --shop-danger: #b3413a;
  --shop-success: #1f7a4a;

  /* Type. A classic serif for anything that speaks, a clean sans for anything
     that works. The stacks fall back to system faces, so a blocked webfont
     changes the texture and nothing else. */
  --shop-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --shop-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shadows in two parts - a hairline for the edge, a soft spread for the lift.
     One big blurry shadow is the clearest sign of an old stylesheet. */
  --shop-shadow-sm: 0 1px 2px rgba(17, 21, 27, .05), 0 2px 8px rgba(17, 21, 27, .04);
  --shop-shadow: 0 1px 2px rgba(17, 21, 27, .06), 0 10px 28px rgba(17, 21, 27, .07);
  --shop-shadow-lift: 0 1px 2px rgba(17, 21, 27, .07), 0 22px 48px rgba(17, 21, 27, .12);
  --shop-ring: 0 0 0 3px rgba(168, 130, 63, .18);

  --shop-radius: 18px;
  --shop-radius-sm: 12px;
  --shop-radius-lg: 26px;
}

* { box-sizing: border-box; }

.shop-body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at top left, #fdfbf6, var(--shop-bg) 55%);
  color: var(--shop-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */
.shop-header {
  /* Deliberately NOT sticky. The department bar below is the thing that stays
     with you; two sticky bars at top:0 meant this one covered that one and ate
     its clicks. Layout is done by .shop-header-inner, not here. */
  position: relative;
  z-index: 80;
  display: block;
  padding: 16px 32px;
  background: rgba(22, 27, 34, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.shop-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  text-decoration: none;
}

.shop-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--shop-gold), #8f6d2e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--shop-dark);
}

.shop-brand-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.shop-cart-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-weight: 700;
  position: relative;
  transition: transform 0.15s ease, background 0.15s ease;
}

.shop-cart-link:hover { background: rgba(255,255,255,0.16); }
.shop-cart-bump { animation: shopBump 0.4s ease; }

@keyframes shopBump {
  0% { transform: scale(1); }
  30% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.shop-cart-icon { font-size: 18px; }

.shop-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--shop-gold);
  color: var(--shop-dark);
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ---------- Main / footer ---------- */
.shop-main {
  flex: 1;
  padding: 36px 32px 64px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.shop-footer {
  text-align: center;
  padding: 22px;
  color: var(--shop-muted);
  font-size: 13px;
  border-top: 1px solid var(--shop-border);
  background: var(--shop-card);
}

/* ---------- Hero / auth ---------- */
.shop-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  min-height: 60vh;
}

.shop-hero-narrow {
  grid-template-columns: 1fr;
  justify-items: center;
}

.shop-hero-text h1 {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 18px;
  font-weight: 800;
  color: var(--shop-dark);
}

.shop-hero-text p {
  font-size: 17px;
  color: var(--shop-muted);
  max-width: 480px;
  line-height: 1.6;
}

.shop-auth-card {
  background: var(--shop-card);
  border-radius: var(--shop-radius);
  padding: 40px;
  box-shadow: var(--shop-shadow-lift);
  border: 1px solid var(--shop-border);
  max-width: 440px;
  width: 100%;
}

.shop-register-card { max-width: 560px; }

.shop-auth-icon { font-size: 34px; margin-bottom: 10px; }

.shop-auth-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
  color: var(--shop-dark);
}

.shop-auth-subtitle {
  color: var(--shop-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

.shop-auth-form label, .shop-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--shop-dark);
  margin-bottom: 6px;
}

/* "(optional)" beside a label: quieter than the label itself, so the required
   fields still read as the ones that matter. */
.shop-field-optional {
  font-weight: 500;
  opacity: .6;
}

.shop-auth-form input,
.shop-auth-form textarea,
.shop-field input,
.shop-field textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--shop-radius-sm);
  border: 1.5px solid var(--shop-border);
  font-size: 15px;
  margin-bottom: 16px;
  background: #fcfbf8;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.shop-auth-form input:focus,
.shop-auth-form textarea:focus,
.shop-field input:focus,
.shop-field textarea:focus {
  outline: none;
  border-color: var(--shop-gold);
  box-shadow: 0 0 0 3px var(--shop-gold-soft);
}

.shop-field input:disabled {
  background: #f1efe9;
  color: var(--shop-muted);
}

.shop-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.shop-field-small { max-width: 120px; }

.shop-btn-primary {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--shop-gold), #8f6d2e);
  color: var(--shop-dark);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(184, 145, 74, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.shop-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(184, 145, 74, 0.45); }
.shop-btn-primary:active { transform: translateY(0); }
.shop-btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }

.shop-btn-secondary {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  background: white;
  font-weight: 700;
  cursor: pointer;
  color: var(--shop-dark);
}

.shop-auth-note {
  text-align: center;
  font-size: 13px;
  color: var(--shop-muted);
  margin-top: 18px;
}

.shop-back-link, .shop-clear-link, .shop-switch-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--shop-dark);
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
}

.shop-back-link:hover, .shop-clear-link:hover, .shop-switch-link:hover { text-decoration: underline; }

.shop-error {
  background: #fdecea;
  color: var(--shop-danger);
  padding: 12px 14px;
  border-radius: var(--shop-radius-sm);
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Welcome bar / search ---------- */
.shop-welcome-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--shop-gold-soft);
  padding: 12px 20px;
  border-radius: var(--shop-radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
}

.shop-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  align-items: center;
}

.shop-search-bar input {
  flex: 1;
  min-width: 240px;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  font-size: 15px;
  background: white;
}

.shop-search-bar input:focus {
  outline: none;
  border-color: var(--shop-gold);
  box-shadow: 0 0 0 3px var(--shop-gold-soft);
}

.shop-search-btn { width: auto; padding: 12px 26px; }

/* Admin-configurable opt-in filter dropdowns above the public shop's product
   grid - see views/shop-catalog.ejs and shopFilterConfig.service.js's
   PUBLIC_SHOP surface. Reuses .shop-select (built for the per-card variant
   pickers, width:100%), so it needs its own width here rather than
   stretching to fill this flex row like .shop-search-bar's text input does. */
.shop-filter-bar select.shop-select {
  width: auto;
  min-width: 150px;
  flex: 0 1 auto;
}

/* ---------- Category grid ---------- */
.shop-section-intro { margin-bottom: 24px; }
.shop-section-intro h1 { font-size: 30px; margin: 0 0 6px; color: var(--shop-dark); }
.shop-section-intro p { color: var(--shop-muted); margin: 0; }

.shop-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.shop-category-card {
  background: var(--shop-card);
  border-radius: var(--shop-radius);
  padding: 28px 22px;
  text-decoration: none;
  color: var(--shop-dark);
  box-shadow: var(--shop-shadow);
  border: 1px solid var(--shop-border);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
}

.shop-category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--shop-gold-soft), transparent 60%);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.shop-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shop-shadow-lift);
  border-color: var(--shop-gold);
}

.shop-category-card:hover::before { opacity: 1; }

.shop-category-name {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
  position: relative;
}

.shop-category-count {
  font-size: 13px;
  color: var(--shop-muted);
  position: relative;
}

/* ---------- Product grid ---------- */
.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}

.shop-product-card {
  background: var(--shop-card);
  border-radius: var(--shop-radius);
  overflow: hidden;
  box-shadow: var(--shop-shadow);
  border: 1px solid var(--shop-border);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}

.shop-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shop-shadow-lift);
}

.shop-product-image-wrap {
  aspect-ratio: 1 / 1;
  background: #f1efe9;
  overflow: hidden;
}

.shop-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.shop-product-card:hover .shop-product-image { transform: scale(1.04); }

.shop-product-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.shop-product-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  color: var(--shop-dark);
  min-height: 40px;
}

.shop-product-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--shop-gold);
  min-height: 22px;
}

.shop-variant-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Visual order only (Size, WIL, Color) - the color/size/wil cascade filtering
   logic in shop-catalog.ejs queries these by class, not DOM position, so
   reordering here doesn't touch how the picker actually works. */
.js-size-step { order: 1; }
.js-wil-step { order: 2; }
.js-color-step { order: 3; }
.shop-variant-message { order: 4; }

.shop-hidden { display: none !important; }

.shop-select {
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--shop-border);
  font-size: 13px;
  background: #fcfbf8;
}

/* Size/WIL pill picker - rounded option buttons instead of a <select>, one
   pill per available value, with the chosen one shown via a bolder border
   (see fillPillGroup() below, which drives a .shop-pill-active class). */
.shop-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shop-pill-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  background: #fcfbf8;
  color: var(--shop-text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.shop-pill-btn:hover { border-color: var(--shop-gold); }

.shop-pill-btn.shop-pill-active {
  border: 2px solid var(--shop-gold);
  background: var(--shop-gold-soft);
  font-weight: 800;
  padding: 5px 11px;
}

.shop-variant-message {
  font-size: 12px;
  color: var(--shop-muted);
  font-style: italic;
}

.shop-stock-row { font-size: 12px; }

.js-stock-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}

.shop-stock-good { background: #e5f6ec; color: var(--shop-success); }
.shop-stock-low { background: #fdecea; color: var(--shop-danger); }
/* Made to order: neither in stock nor out of it. Gold, so it reads as a
   property of the product rather than a warning. */
.shop-stock-made { background: var(--shop-gold-soft); color: #8a6a2c; }

.shop-add-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.shop-qty-input {
  width: 60px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--shop-border);
  text-align: center;
  font-size: 14px;
}

.shop-add-btn { flex: 1; padding: 10px; font-size: 13px; }

.shop-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--shop-muted);
  font-size: 15px;
}

.shop-empty a { color: var(--shop-gold); font-weight: 700; }

/* ---------- Pagination ---------- */
.shop-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}

.shop-page-btn {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--shop-dark);
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.shop-page-center { color: var(--shop-muted); font-size: 14px; }

/* ---------- Toast ---------- */
.shop-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--shop-dark);
  color: white;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200;
}

.shop-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Cart ---------- */
.shop-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}

.shop-cart-header h1 { font-size: 30px; margin: 0; color: var(--shop-dark); }

.shop-cart-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.shop-cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  background: var(--shop-card);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-sm);
  padding: 16px 18px;
  box-shadow: var(--shop-shadow);
}

.shop-cart-item-name { font-weight: 700; color: var(--shop-dark); }
.shop-cart-item-variant { font-size: 12px; color: var(--shop-muted); margin-top: 2px; }
.shop-cart-item-price { font-size: 13px; color: var(--shop-muted); margin-top: 4px; }

.shop-cart-qty-form { display: flex; gap: 8px; align-items: center; }

.shop-cart-item-total { font-weight: 800; color: var(--shop-dark); min-width: 70px; text-align: right; }

.shop-remove-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--shop-danger);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

.shop-cart-summary {
  background: var(--shop-card);
  border-radius: var(--shop-radius);
  padding: 26px;
  border: 1px solid var(--shop-border);
  box-shadow: var(--shop-shadow);
  max-width: 460px;
  margin-left: auto;
}

.shop-cart-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 18px;
  color: var(--shop-dark);
}

.shop-checkout-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--shop-dark);
}

.shop-checkout-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--shop-radius-sm);
  border: 1.5px solid var(--shop-border);
  font-size: 14px;
  margin-bottom: 14px;
  resize: vertical;
  font-family: inherit;
}

.shop-checkout-btn { width: 100%; }

/* ---------- Success ---------- */
.shop-success-card {
  max-width: 460px;
  margin: 40px auto;
  text-align: center;
  background: var(--shop-card);
  padding: 44px 32px;
  border-radius: var(--shop-radius);
  box-shadow: var(--shop-shadow-lift);
  border: 1px solid var(--shop-border);
}

.shop-success-icon { font-size: 46px; margin-bottom: 12px; }
.shop-success-card h2 { margin: 0 0 10px; color: var(--shop-dark); }
.shop-success-card p { color: var(--shop-muted); line-height: 1.5; }
.shop-success-note { font-size: 13px; }
.shop-success-btn { margin-top: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .shop-hero { grid-template-columns: 1fr; text-align: center; }
  .shop-hero-text p { margin: 0 auto; }
  .shop-auth-card { margin: 0 auto; }
}

@media (max-width: 640px) {
  .shop-header { padding: 14px 18px; }
  .shop-main { padding: 22px 16px 48px; }
  .shop-hero-text h1 { font-size: 32px; }
  .shop-form-row { grid-template-columns: 1fr; }
  .shop-field-small { max-width: none; }
  .shop-cart-item { grid-template-columns: 1fr; text-align: left; }
  .shop-cart-item-total { text-align: left; }
  .shop-cart-summary { margin-left: 0; }
}

/* ---------- Header account links ---------- */
.shop-header-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shop-header-link {
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  opacity: 0.9;
}

.shop-header-link:hover { opacity: 1; text-decoration: underline; }

.shop-staff-banner {
  background: #fef3c7;
  color: #78350f;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

.shop-staff-banner a {
  color: #78350f;
  text-decoration: underline;
  font-weight: 700;
}

.shop-welcome-links {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ---------- Method tabs (OTP login) ---------- */
.shop-method-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.shop-method-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  color: var(--shop-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.shop-method-tab.active {
  background: var(--shop-dark);
  color: white;
  border-color: var(--shop-dark);
}

/* ---------- OTP verify ---------- */
.shop-otp-input {
  letter-spacing: 6px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
}

.shop-resend-form {
  text-align: center;
  margin-top: 14px;
}

.shop-link-btn {
  background: none;
  border: none;
  color: var(--shop-gold);
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
}

.shop-success-inline {
  background: #e5f6ec;
  color: var(--shop-success);
  padding: 12px 14px;
  border-radius: var(--shop-radius-sm);
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ---------- Complete profile ---------- */
.shop-field-missing label {
  color: var(--shop-danger);
}

.shop-field-missing input {
  border-color: var(--shop-danger);
  background: #fdf3f2;
}

/* ---------- Account page ---------- */
.shop-account-header { margin-bottom: 18px; }
.shop-account-header h1 { font-size: 30px; margin: 0 0 4px; color: var(--shop-dark); }
.shop-account-subtitle { color: var(--shop-muted); margin: 0; }

.shop-profile-nudge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--shop-gold-soft);
  border: 1px solid var(--shop-gold);
  border-radius: var(--shop-radius-sm);
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 14px;
}

.shop-profile-nudge .shop-btn-secondary {
  width: auto;
  white-space: nowrap;
}

.shop-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.shop-stat-card {
  background: var(--shop-card);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius);
  padding: 20px 22px;
  box-shadow: var(--shop-shadow);
}

.shop-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--shop-muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.shop-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--shop-dark);
}

.shop-stat-warning .shop-stat-value { color: var(--shop-danger); }
.shop-stat-positive .shop-stat-value { color: var(--shop-success); }

.shop-profile-card {
  background: var(--shop-card);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius);
  padding: 22px;
  box-shadow: var(--shop-shadow);
  margin-bottom: 26px;
}

.shop-profile-card h3 { margin: 0 0 14px; font-size: 16px; color: var(--shop-dark); }

.shop-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
  font-size: 14px;
}

.shop-profile-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--shop-muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.shop-account-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.shop-account-action-btn {
  width: auto;
  padding: 13px 28px;
}

.shop-history-title {
  font-size: 22px;
  color: var(--shop-dark);
  margin-bottom: 14px;
}

/* ---------- Pending orders (account page) ---------- */
.shop-pending-subtitle {
  margin: -10px 0 16px;
  font-size: 13px;
}

.shop-pending-orders {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.shop-pending-card {
  background: var(--shop-card);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-sm);
  box-shadow: var(--shop-shadow);
  padding: 4px 18px;
}

.shop-pending-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}

.shop-pending-summary::-webkit-details-marker { display: none; }

.shop-pending-order-no {
  font-weight: 800;
  color: var(--shop-dark);
  margin-right: 10px;
}

.shop-pending-date {
  color: var(--shop-muted);
  font-size: 13px;
}

.shop-pending-summary-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-pending-status {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.shop-pending-status-open {
  background: var(--shop-gold-soft);
  color: var(--shop-dark);
}

.shop-pending-status-completed {
  background: #e5f6ec;
  color: var(--shop-success);
}

.shop-pending-total {
  font-weight: 800;
  color: var(--shop-dark);
}

.shop-pending-items {
  border-top: 1px solid var(--shop-border);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-pending-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  font-size: 13px;
  color: var(--shop-text);
}

/* ---------- Quote PDF / email actions ---------- */
.shop-quote-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.shop-quote-action-btn,
.shop-pending-action-btn {
  width: auto;
  padding: 10px 18px;
  font-size: 13px;
  white-space: nowrap;
}

.shop-quote-email-form {
  display: inline-flex;
}

.shop-appointment-cancel-form {
  display: inline-flex;
  margin: 0;
}

.shop-quote-email-inline {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.shop-quote-email-input {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  font-size: 13px;
  width: 200px;
}

.shop-quote-email-input:focus {
  outline: none;
  border-color: var(--shop-gold);
  box-shadow: 0 0 0 3px var(--shop-gold-soft);
}

.shop-quote-email-save-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--shop-muted, #666);
  white-space: nowrap;
}

.shop-pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 14px;
}

.portal-receipt-pdf-actions {
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 0;
  border-top: 1px solid var(--border, #e7e2d8);
}

/* ---------- Edit-order mode on the catalog page ---------- */
.shop-edit-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--shop-dark);
  color: white;
  padding: 14px 20px;
  border-radius: var(--shop-radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
}

.shop-edit-banner b { color: var(--shop-gold); }

.shop-edit-banner-btn {
  width: auto;
  padding: 9px 18px;
  font-size: 13px;
}

/* ---------- Order edit page ---------- */
.shop-order-edit-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop-add-more-btn {
  width: auto;
  align-self: flex-start;
  padding: 12px 24px;
}

.shop-cancel-order-form {
  align-self: flex-start;
}

.shop-cancel-order-btn {
  background: none;
  border: 1px solid var(--shop-danger);
  color: var(--shop-danger);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}

.shop-cancel-order-btn:hover {
  background: var(--shop-danger);
  color: white;
}

/* ---- Chussen (groom) order-form picker (views/shop-chussen.ejs) ---- */

.chussen-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, var(--shop-gold-soft), var(--shop-card) 70%);
  border: 1.5px solid var(--shop-gold);
  border-radius: var(--shop-radius);
  padding: 20px 24px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}

.chussen-banner-title { font-size: 19px; font-weight: 800; color: var(--shop-dark); }
.chussen-banner-subtitle { margin: 4px 0 0; color: var(--shop-muted); font-size: 14px; }
.chussen-banner-btn { white-space: nowrap; }

.chussen-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.chussen-main { flex: 1; min-width: 0; }

/* Chussen search (idea #123) */
.chussen-search-bar {
  position: relative;
  margin: 4px 0 14px;
}

.chussen-search-input {
  width: 100%;
  height: 48px;
  padding: 10px 40px 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  background: var(--shop-card);
  font-size: 15px;
  font-family: inherit;
  color: inherit;
}

.chussen-search-input:focus {
  outline: none;
  border-color: var(--shop-accent, #2563eb);
}

.chussen-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--shop-muted);
  padding: 0 4px;
}

/* Search results sit above the category list, so they need a clear edge
   between them and the categories that continue below. */
.chussen-search-results:not([hidden]) {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--shop-border);
}

.chussen-oos-tag {
  font-size: 12px;
  font-weight: 800;
  color: var(--shop-muted);
  background: var(--shop-bg, #f4f4f5);
  border-radius: 8px;
  padding: 5px 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.chussen-search-heading {
  font-size: 14px;
  font-weight: 800;
  color: var(--shop-muted);
  margin-bottom: 12px;
}

.chussen-view-toggle {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.chussen-view-btn {
  background: var(--shop-card);
  border: 1.5px solid var(--shop-border);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 13px;
  color: var(--shop-muted);
  cursor: pointer;
}

.chussen-view-btn:hover { border-color: var(--shop-gold); }

.chussen-view-btn-active {
  border-color: var(--shop-gold);
  color: var(--shop-dark);
  background: var(--shop-gold-soft);
}

.chussen-grid {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.chussen-grid.chussen-view-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.chussen-grid.chussen-view-list { grid-template-columns: 1fr; }

.chussen-card {
  background: var(--shop-card);
  border-radius: var(--shop-radius);
  border: 1px solid var(--shop-border);
  box-shadow: var(--shop-shadow);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chussen-card-open {
  grid-column: 1 / -1;
  box-shadow: var(--shop-shadow-lift);
}

.chussen-card-has-items { border-color: var(--shop-success); }
.chussen-card-has-items .chussen-card-icon { background: #e5f6ec; }

.chussen-card-face {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.chussen-card-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--shop-gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  overflow: hidden;
}

.chussen-card-icon img { width: 100%; height: 100%; object-fit: cover; }

.chussen-card-info { flex: 1; min-width: 0; }
.chussen-card-title { font-weight: 800; color: var(--shop-dark); font-size: 15px; }
.chussen-card-meta { color: var(--shop-muted); font-size: 12px; margin-top: 2px; }

.chussen-card-cart-badge {
  flex: none;
  background: #e5f6ec;
  color: var(--shop-success);
  font-weight: 800;
  font-size: 12px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.chussen-card-cart-badge-active {
  background: var(--shop-success);
  color: white;
}

.chussen-card-panel {
  border-top: 1px solid var(--shop-border);
  padding: 16px;
  background: #fbfaf7;
}

.chussen-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  flex-wrap: wrap;
}

.chussen-crumb {
  background: none;
  border: none;
  color: var(--shop-gold);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  font-size: 13px;
}

.chussen-crumb:hover { text-decoration: underline; }
.chussen-crumb-sep { color: var(--shop-muted); }

.chussen-loading, .chussen-empty-inline {
  color: var(--shop-muted);
  font-size: 14px;
  padding: 10px 0;
}

.chussen-step-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chussen-step-list[hidden] { display: none; }

.chussen-brand-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--shop-card);
  border: 1.5px solid var(--shop-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  color: var(--shop-dark);
  cursor: pointer;
  font-size: 14px;
}

.chussen-brand-chip:hover { border-color: var(--shop-gold); box-shadow: 0 0 0 3px var(--shop-gold-soft); }

/* Brand/UD2 chip already has cart items under it - lets a customer see at a
   glance, while drilling down, which brands/styles they've already shopped
   without needing to reopen the sidebar. */
.chussen-brand-chip-has-items {
  border-color: var(--shop-success);
  background: #e5f6ec;
}

.chussen-brand-chip-count {
  background: var(--shop-gold-soft);
  color: var(--shop-dark);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
}

.chussen-product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  align-items: start;
}

.chussen-product-list[hidden] { display: none; }

/* Compact item tile - deliberately its own small layout (not a reuse of the
   full-size .shop-product-card grid tile) so it stays close in size to the
   .chussen-card category tiles instead of the large catalog-page card. */
.chussen-item-card {
  position: relative;
  background: var(--shop-card);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Already has cart items (any variant of this exact product) - persists
   across revisits to the same product list, not just within one page
   session, since it's driven by cartIndex rebuilt from the real cart. */
.chussen-item-card-has-items { border-color: var(--shop-success); }
.chussen-item-card-has-items::before {
  content: "\2713 In cart";
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--shop-success);
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 1;
}

.chussen-item-top { display: flex; align-items: center; gap: 10px; }
.chussen-item-top[hidden] { display: none; }

.chussen-item-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: #f1efe9;
}

.chussen-item-thumb .shop-product-image { width: 100%; height: 100%; object-fit: cover; display: block; }

.chussen-item-info { flex: 1; min-width: 0; }

.chussen-item-productid {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--shop-muted);
  margin-bottom: 2px;
}

.chussen-item-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--shop-dark);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chussen-item-price-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.chussen-item-price { font-weight: 800; color: var(--shop-gold); font-size: 12.5px; }
.chussen-item-stock { font-size: 10px; padding: 2px 8px; }

.chussen-item-card .shop-variant-box { display: flex; flex-direction: column; gap: 6px; }
.chussen-item-card .shop-variant-box[hidden] { display: none; }
.chussen-item-card .shop-variant-step label { font-size: 10.5px; color: var(--shop-muted); font-weight: 700; }
.chussen-item-card .shop-select { padding: 5px 8px; font-size: 12px; border-radius: 8px; }
.chussen-item-card .shop-pill-btn { padding: 4px 9px; font-size: 11px; }
.chussen-item-card .shop-pill-btn.shop-pill-active { padding: 3px 8px; }
.chussen-item-card .shop-variant-message { font-size: 11px; }

/* The base .js-color-step/.js-size-step/.js-wil-step rules further up this
   file visually reorder those steps to Size, WIL, Color for the main catalog
   page - here the selection order genuinely is Color -> Size -> WIL, so keep
   the visual order matching that instead (color select must not shift once
   the size step appears below it). */
.chussen-item-card .js-color-step { order: 1; }
.chussen-item-card .js-size-step { order: 2; }
.chussen-item-card .js-wil-step { order: 3; }
.chussen-item-card .shop-variant-message { order: 4; }

.chussen-item-footer { display: flex; align-items: center; gap: 6px; }
.chussen-item-footer[hidden] { display: none; }
.chussen-item-qty { width: 42px; padding: 5px 4px; font-size: 12px; }
.chussen-item-add { flex: 1; padding: 6px 8px; font-size: 12px; }

.chussen-added-banner {
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: #f2faf5;
  border-radius: var(--shop-radius-sm);
}

.chussen-added-banner[hidden] { display: none; }

.chussen-added-check { color: var(--shop-success); font-weight: 800; font-size: 13px; }
.chussen-added-desc { color: var(--shop-dark); font-size: 12px; }
.chussen-edit-added {
  margin-top: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--shop-dark);
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
}

/* ---- Sidebar: the picker's own running list, separate from the site cart ---- */

.chussen-sidebar {
  flex: none;
  width: 300px;
  position: sticky;
  top: 20px;
  background: var(--shop-card);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius);
  box-shadow: var(--shop-shadow);
  padding: 16px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.chussen-sidebar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.chussen-sidebar-header h2 { font-size: 16px; margin: 0; color: var(--shop-dark); }
.chussen-sidebar-count { font-size: 12px; color: var(--shop-muted); font-weight: 700; white-space: nowrap; }

.chussen-sidebar-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}

.chussen-sidebar-empty { color: var(--shop-muted); font-size: 13px; padding: 12px 0; }

.chussen-sidebar-row {
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-sm);
  padding: 8px 10px;
}

.chussen-sidebar-row-title { font-weight: 700; font-size: 12.5px; color: var(--shop-dark); }
.chussen-sidebar-row-variant { font-size: 11px; color: var(--shop-muted); margin-top: 1px; }

.chussen-sidebar-row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.chussen-sidebar-qty {
  width: 44px;
  padding: 3px 4px;
  font-size: 12px;
  border-radius: 6px;
  border: 1.5px solid var(--shop-border);
}

.chussen-sidebar-row-price { font-weight: 800; font-size: 12.5px; color: var(--shop-dark); flex: 1; text-align: right; }

.chussen-sidebar-remove {
  background: none;
  border: none;
  color: var(--shop-danger);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.chussen-sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--shop-border);
  margin-top: 12px;
  padding-top: 12px;
  font-weight: 800;
  color: var(--shop-dark);
}

@media (max-width: 900px) {
  .chussen-layout { flex-direction: column; }
  .chussen-sidebar { width: 100%; position: static; max-height: none; }
}

/* Category "shopping list" checklist panel - separate from the cart
   sidebar. Categories marked "needed" here get pulled to the top of the
   main grid; once the customer adds a cart item from a needed category,
   its tab flips to "fulfilled". */
.checklist-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--shop-card);
  border: 1.5px solid var(--shop-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  color: var(--shop-dark);
  cursor: pointer;
  margin-bottom: 14px;
}

.checklist-toggle-btn:hover { border-color: var(--shop-gold); }

.checklist-toggle-count {
  background: var(--shop-success);
  color: white;
  font-weight: 800;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.checklist-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 33, 0.4);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.checklist-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.checklist-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 320px;
  max-width: 88vw;
  background: var(--shop-card);
  box-shadow: var(--shop-shadow-lift);
  z-index: 901;
  padding: 20px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0.25s ease;
}

.checklist-panel.open {
  transform: translateX(0);
  visibility: visible;
}

.checklist-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.checklist-panel-header h2 { font-size: 17px; margin: 0; color: var(--shop-dark); }

.checklist-close-btn {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--shop-muted);
  cursor: pointer;
  padding: 4px;
}

.checklist-panel-hint {
  font-size: 12.5px;
  color: var(--shop-muted);
  margin: 0 0 16px;
}

.checklist-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checklist-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--shop-bg);
  border: 1.5px solid var(--shop-border);
  border-radius: 999px;
  padding: 7px 12px 7px 8px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--shop-dark);
  cursor: pointer;
}

.checklist-tab-icon { font-size: 15px; line-height: 1; }
.checklist-tab-icon img { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; }

.checklist-tab-check {
  display: none;
  font-weight: 900;
}

.checklist-tab-needed {
  border-color: var(--shop-success);
  background: #e5f6ec;
}

.checklist-tab-fulfilled {
  border-color: var(--shop-success);
  background: var(--shop-success);
  color: white;
}

.checklist-tab-fulfilled .checklist-tab-check { display: inline; }

/* Main category grid: needed-but-unfulfilled categories get a visible
   marker even outside the panel, since the grid itself is what actually
   gets reordered - the checklist panel is where you manage the list, not
   the only place you see it. */
.chussen-card-needed { border-color: var(--shop-success); }
.chussen-card-checklist-flag {
  display: none;
  flex: none;
  color: var(--shop-success);
  font-size: 16px;
  font-weight: 900;
}
.chussen-card-needed .chussen-card-checklist-flag { display: inline; }

/* Remove-from-list confirmation - asks whether an item leaving the chussen
   sidebar should also leave the cart, or just stop being tracked here. */
.chussen-remove-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 33, 0.4);
  z-index: 950;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.chussen-remove-modal.open { display: flex; }

.chussen-remove-modal-card {
  background: var(--shop-card);
  border-radius: var(--shop-radius);
  box-shadow: var(--shop-shadow-lift);
  padding: 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}

.chussen-remove-modal-card h3 { margin: 0 0 8px; color: var(--shop-dark); font-size: 17px; }
.chussen-remove-modal-card p { color: var(--shop-muted); font-size: 13.5px; margin: 0 0 20px; }

.chussen-remove-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.chussen-remove-danger-btn {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-danger);
  background: white;
  color: var(--shop-danger);
  font-weight: 700;
  cursor: pointer;
}

.chussen-remove-danger-btn:hover { background: var(--shop-danger); color: white; }

/* "Running late" (idea #127) - floating corner button on staff-assisted
   order forms started from a calendar appointment (see
   admin-chussen-calendar.routes.js's /:id/arrived), to text whoever is
   booked next that they should arrive a bit later. */
.chussen-late-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 800;
  background: var(--shop-dark);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: var(--shop-shadow-lift);
  cursor: pointer;
}

.chussen-late-btn:hover { opacity: 0.9; }

.chussen-late-minutes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.chussen-late-minute-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  background: var(--shop-bg);
  color: var(--shop-dark);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}

.chussen-late-minute-chip:hover { border-color: var(--shop-gold); }

.chussen-late-minutes-input {
  width: 100%;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.chussen-late-note-input {
  width: 100%;
  margin-bottom: 16px;
  box-sizing: border-box;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

/* Quantity inputs were too narrow to read once the number changed - the
   spinner arrows sat on top of the digits. Wider, larger type (16px also
   stops iOS zooming the page when the field is focused), and spinners that
   stay visible so up/down is obvious. */
.shop-qty-input {
  width: 96px;
  padding: 11px 6px;
  font-size: 16px;
  font-weight: 700;
}

.shop-qty-input::-webkit-inner-spin-button,
.shop-qty-input::-webkit-outer-spin-button {
  opacity: 1;
  height: 26px;
}

.chussen-sidebar-qty {
  width: 64px;
  padding: 6px 4px;
  font-size: 14px;
  font-weight: 700;
}

.chussen-sidebar-qty::-webkit-inner-spin-button,
.chussen-sidebar-qty::-webkit-outer-spin-button { opacity: 1; }

/* The add button carries the amount, so what is about to happen is readable
   from the button itself rather than only from the little number box. */
.shop-add-btn { font-weight: 700; }
.shop-add-btn .shop-add-qty {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-right: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

/* Cart lines show the sum, not only the answer: "$12.50 x 3" above the total. */
.shop-cart-item-calc,
.chussen-sidebar-calc {
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.65;
  white-space: nowrap;
}

.chussen-sidebar-calc { font-size: 11px; }

/* ===== Catalog structure (shopx-*) ===== */
/* The catalog used to be one vertical stack: welcome bar, search, filters as a
   row of dropdowns, then the grid. Filters pushed the products off the screen
   and had nowhere to grow. It is now a shop: departments and refinements in a
   sticky rail, products in the content column. */

/* ---- landing: the shop front ---- */
.shopx-opening {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  padding: clamp(18px, 3vw, 40px) 0 clamp(22px, 3vw, 38px);
  border-bottom: 1px solid var(--shop-border);
  margin-bottom: clamp(22px, 3vw, 36px);
}

.shopx-kicker {
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--shop-gold);
}

.shopx-opening h1 {
  margin: 0 0 10px;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.shopx-opening p {
  margin: 0 0 22px;
  max-width: 46ch;
  color: var(--shop-muted);
  font-size: clamp(15px, 1.2vw, 16.5px);
}

.shopx-hero-search { display: flex; gap: 10px; max-width: 540px; }

.shopx-hero-search input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  background: #fff;
  font: inherit;
  font-size: 15px;
  box-shadow: var(--shop-shadow-sm);
}

.shopx-hero-search input:focus {
  outline: 0;
  border-color: var(--shop-gold);
  box-shadow: var(--shop-ring);
}

.shopx-hero-search button {
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(170deg, var(--shop-dark-soft), var(--shop-dark));
  box-shadow: 0 8px 20px rgba(17,21,27,.18);
}

.shopx-opening-aside { display: grid; gap: 10px; }

.shopx-quick {
  display: block;
  padding: 15px 17px;
  border-radius: var(--shop-radius-sm);
  border: 1px solid var(--shop-border);
  background: #fff;
  text-decoration: none;
  box-shadow: var(--shop-shadow-sm);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.shopx-quick:hover { border-color: var(--shop-gold); transform: translateY(-1px); box-shadow: var(--shop-shadow); }
.shopx-quick-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--shop-gold); }
.shopx-quick-value { display: block; margin-top: 3px; font-weight: 600; color: var(--shop-text); }

.shopx-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.shopx-section-head h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); }
.shopx-section-head span {
  font-size: 12px; font-weight: 600; color: var(--shop-muted);
  padding: 2px 9px; border-radius: 999px; background: var(--shop-bg-deep);
}

.shopx-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 12px;
}

.shopx-dept {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 46px 20px 20px;
  min-height: 108px;
  justify-content: flex-end;
  border-radius: var(--shop-radius);
  border: 1px solid var(--shop-border);
  background: linear-gradient(160deg, #fff 0%, #fdfbf6 100%);
  text-decoration: none;
  box-shadow: var(--shop-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.shopx-dept:hover { transform: translateY(-2px); border-color: var(--shop-gold); box-shadow: var(--shop-shadow); }

.shopx-dept-name {
  font-family: var(--shop-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--shop-dark);
}

.shopx-dept-count { font-size: 12.5px; color: var(--shop-muted); }

.shopx-dept-go {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: var(--shop-gold);
  font-size: 17px;
  transition: transform .18s ease;
}

.shopx-dept:hover .shopx-dept-go { transform: translateX(4px); }

/* ---- browsing: rail + content ---- */
.shopx {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

.shopx-rail { position: sticky; top: 64px; display: grid; gap: 14px; }

.shopx-rail-block {
  padding: 15px 15px 16px;
  border-radius: var(--shop-radius);
  border: 1px solid var(--shop-border);
  background: #fff;
  box-shadow: var(--shop-shadow-sm);
}

.shopx-rail-title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--shop-gold);
}

.shopx-rail-nav { display: grid; gap: 1px; max-height: 46vh; overflow-y: auto; }

.shopx-rail-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--shop-text);
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}

.shopx-rail-link em { font-style: normal; font-size: 11.5px; color: var(--shop-faint); }
.shopx-rail-link:hover { background: var(--shop-bg-deep); }
.shopx-rail-link.is-on { background: var(--shop-dark); color: #fff; font-weight: 600; }
.shopx-rail-link.is-on em { color: rgba(255,255,255,.6); }

.shopx-filters { display: grid; gap: 11px; }
.shopx-filter { display: grid; gap: 5px; }
.shopx-filter span { font-size: 11.5px; font-weight: 600; color: var(--shop-muted); }
.shopx-filter .shop-select { width: 100%; }
.shopx-clear { font-size: 12.5px; color: var(--shop-gold); text-decoration: none; }
.shopx-clear:hover { text-decoration: underline; }

/* ---- toolbar ---- */
.shopx-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "crumbs search" "heading search" "count search";
  gap: 2px 18px;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--shop-border);
}

.shopx-crumbs { grid-area: crumbs; font-size: 12px; color: var(--shop-muted); }
.shopx-crumbs a { color: var(--shop-muted); text-decoration: none; }
.shopx-crumbs a:hover { color: var(--shop-gold); }
.shopx-crumbs span { margin: 0 6px; color: var(--shop-faint); }
.shopx-crumbs b { color: var(--shop-text); font-weight: 600; }

.shopx-heading { grid-area: heading; margin: 2px 0 0; font-size: clamp(24px, 2.8vw, 34px); }
.shopx-count { grid-area: count; margin: 2px 0 0; font-size: 13px; color: var(--shop-muted); }

.shopx-toolbar-search { grid-area: search; display: flex; gap: 8px; }

.shopx-toolbar-search input {
  width: clamp(150px, 22vw, 240px);
  padding: 10px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  background: #fff;
  font: inherit;
  font-size: 14px;
}

.shopx-toolbar-search input:focus { outline: 0; border-color: var(--shop-gold); box-shadow: var(--shop-ring); }

.shopx-toolbar-search button {
  padding: 0 16px;
  border: 1px solid var(--shop-border);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease;
}

.shopx-toolbar-search button:hover { border-color: var(--shop-gold); }

/* ---- empty + pager ---- */
.shopx-empty {
  padding: 56px 20px;
  text-align: center;
  border: 1px dashed var(--shop-border);
  border-radius: var(--shop-radius);
  background: #fff;
}

.shopx-empty-mark { font-size: 26px; color: var(--shop-gold); }
.shopx-empty h2 { margin: 10px 0 4px; font-size: 21px; }
.shopx-empty p { margin: 0 0 18px; color: var(--shop-muted); }

.shopx-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--shop-border);
}

.shopx-pager-at { text-align: center; font-size: 13px; color: var(--shop-muted); }
.shopx-pager a:last-child { justify-self: end; }

@media (max-width: 980px) {
  .shopx { grid-template-columns: 1fr; }
  .shopx-rail { position: static; grid-template-columns: 1fr; }
  .shopx-rail-nav { max-height: 180px; }
  .shopx-opening { grid-template-columns: 1fr; align-items: start; }
  .shopx-opening-aside { grid-template-columns: 1fr 1fr; }
  .shopx-toolbar { grid-template-columns: 1fr; grid-template-areas: "crumbs" "heading" "count" "search"; gap: 4px; }
  .shopx-toolbar-search { margin-top: 10px; }
  .shopx-toolbar-search input { width: 100%; }
}


/* ===== Shop front (shop-front-*) ===== */
/* /shop used to be one hero with a sign-in form in it. It is now the shop's
   front door: welcome, what you can do here, simchas, and how to visit. Each
   band is full width and separated by a rule, so the page reads as a sequence
   rather than a single panel with things stacked inside it. */
.shop-front { margin: -36px calc(50% - 50vw) -64px; }

.shop-front > section {
  max-width: 1340px;
  margin: 0 auto;
  padding-left: max(20px, calc(50vw - 670px));
  padding-right: max(20px, calc(50vw - 670px));
}

/* ---- band 1: welcome ---- */
.shop-front-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(34px, 5vw, 72px);
  padding-bottom: clamp(34px, 5vw, 66px);
  background:
    radial-gradient(900px 480px at 82% -12%, #ffffff 0%, transparent 58%),
    linear-gradient(168deg, #fffdf8 0%, #faf6ec 46%, #f3ecdc 100%);
  border-bottom: 1px solid var(--shop-border);
}

.shop-front-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.shop-front-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-front-video-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 14, 17, .84), rgba(12, 14, 17, .57) 52%, rgba(12, 14, 17, .36));
}

.shop-front-hero.has-video { background: #15171a; }
.shop-front-hero.has-video .shop-front-intro h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.shop-front-hero.has-video .shop-front-lede { color: rgba(255,255,255,.83); }
.shop-front-hero.has-video .shop-front-tags span { color: rgba(255,255,255,.9); background: rgba(8,10,12,.42); border-color: rgba(255,255,255,.25); backdrop-filter: blur(8px); }
.shop-front-hero.has-video .shop-front-eyebrow { color: #f3d899; background: rgba(8,10,12,.5); border-color: rgba(243,216,153,.38); backdrop-filter: blur(8px); }

.shopx-orb { position: absolute; border-radius: 50%; filter: blur(78px); opacity: .55; }
.shopx-orb-a {
  width: 42vw; min-width: 320px; aspect-ratio: 1; top: -22%; left: -8%;
  background: radial-gradient(circle, rgba(168,130,63,.32), transparent 68%);
  animation: shopFrontDriftA 24s ease-in-out infinite alternate;
}
.shopx-orb-b {
  width: 36vw; min-width: 280px; aspect-ratio: 1; right: -10%; bottom: -30%;
  background: radial-gradient(circle, rgba(201,166,97,.26), transparent 70%);
  animation: shopFrontDriftB 28s ease-in-out infinite alternate;
}
@keyframes shopFrontDriftA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(5vw,4vh,0) scale(1.1); } }
@keyframes shopFrontDriftB { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-4vw,-4vh,0) scale(1); } }

.shop-front-hero-inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.shop-front-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 20px; padding: 7px 15px 7px 11px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #8a6a2c; background: rgba(255,255,255,.85);
  border: 1px solid rgba(168,130,63,.32);
  box-shadow: 0 2px 10px rgba(168,130,63,.1);
}
.shop-front-eyebrow.is-shut { color: #6b6358; border-color: rgba(20,24,31,.16); }

.shop-front-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--shop-success);
  box-shadow: 0 0 0 0 rgba(31,122,74,.5);
  animation: shopFrontPulse 2.4s ease-out infinite;
}
.shop-front-eyebrow.is-shut .shop-front-dot { background: #9aa1ab; box-shadow: none; animation: none; }
@keyframes shopFrontPulse { 70% { box-shadow: 0 0 0 7px rgba(31,122,74,0); } 100% { box-shadow: 0 0 0 0 rgba(31,122,74,0); } }

.shop-front-intro h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.028em;
}

.shop-front-accent {
  background: linear-gradient(100deg, #c9a661, var(--shop-gold) 50%, #8a6a2c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.shop-front-lede {
  margin: 0 auto 26px; max-width: 52ch;
  font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.65; color: var(--shop-muted);
}

.shop-front-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.shop-front-tags span {
  padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--shop-muted); background: rgba(255,255,255,.72);
  border: 1px solid var(--shop-border);
}

/* Admin-managed promotion carousel */
.shop-home-banners { position: relative; padding-top: clamp(22px, 3vw, 38px); padding-bottom: clamp(22px, 3vw, 38px); }
.shop-home-banner-track { position: relative; min-height: clamp(240px, 35vw, 470px); overflow: hidden; border-radius: 24px; background: #e9e3d6; box-shadow: 0 18px 48px rgba(20,24,31,.16); }
.shop-home-banner { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .5s ease, visibility .5s; }
.shop-home-banner.is-active { visibility: visible; opacity: 1; z-index: 1; }
.shop-home-banner > img { width: 100%; height: 100%; object-fit: cover; }
.shop-home-banner-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,15,.78), rgba(10,12,15,.38) 58%, transparent 88%); }
.shop-home-banner-copy { position: absolute; z-index: 2; left: clamp(22px, 5vw, 68px); top: 50%; width: min(560px, calc(100% - 44px)); transform: translateY(-50%); color: white; }
.shop-home-banner-copy h2 { margin: 0 0 10px; color: white; font-size: clamp(29px, 4vw, 54px); line-height: 1.03; text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.shop-home-banner-copy p { margin: 0 0 20px; max-width: 48ch; color: rgba(255,255,255,.88); font-size: clamp(14px, 1.5vw, 18px); line-height: 1.55; }
.shop-home-banner-copy a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: #fff; color: #17191d; text-decoration: none; font-size: 14px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.shop-home-banner-arrow { position: absolute; z-index: 4; top: 50%; width: 43px; height: 43px; margin-top: -22px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(10,12,15,.5); color: white; font-size: 29px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); }
.shop-home-banner-arrow.is-prev { left: max(28px, calc(50vw - 650px)); }
.shop-home-banner-arrow.is-next { right: max(28px, calc(50vw - 650px)); }
.shop-home-banner-dots { position: absolute; z-index: 4; left: 50%; bottom: clamp(32px, 4vw, 52px); display: flex; gap: 8px; transform: translateX(-50%); }
.shop-home-banner-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; }
.shop-home-banner-dots button.is-active { width: 27px; border-radius: 999px; background: white; }

/* the sign-in card */
.shop-front-card {
  justify-self: end; width: 100%; max-width: 430px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--shop-radius-lg);
  background: #fff; border: 1px solid rgba(168,130,63,.2);
  box-shadow: var(--shop-shadow-lift);
}
.shop-front-badge {
  display: grid; place-items: center; width: 46px; height: 46px;
  margin-bottom: 14px; border-radius: 15px; font-size: 21px;
  background: var(--shop-gold-soft); border: 1px solid rgba(168,130,63,.3);
}
.shop-front-card-head h2 { margin: 0 0 6px; font-size: 25px; }
.shop-front-card-head p { margin: 0 0 20px; font-size: 14px; color: var(--shop-muted); }

.shop-front-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  margin-bottom: 18px; border-radius: 999px;
  background: #f5f1e7; border: 1px solid var(--shop-border);
}
.shop-front-seg-item {
  padding: 9px 10px; border-radius: 999px; text-align: center; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--shop-muted);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.shop-front-seg-item.is-on { background: #fff; color: var(--shop-dark); box-shadow: 0 2px 8px rgba(20,24,33,.12); }

.shop-front-error {
  margin-bottom: 15px; padding: 11px 14px; border-radius: 13px;
  font-size: 13.5px; font-weight: 600;
  color: #8c2b20; background: #fdecea; border: 1px solid #f3c6c0;
}

.shop-front-form label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; }
.shop-front-input {
  display: flex; align-items: center; padding: 0 14px;
  border-radius: 14px; background: #fbfaf7; border: 1.5px solid var(--shop-border);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.shop-front-input:focus-within { background: #fff; border-color: var(--shop-gold); box-shadow: var(--shop-ring); }
.shop-front-input-mark { flex: none; padding-right: 9px; font-size: 14px; font-weight: 700; color: var(--shop-muted); }
.shop-front-input input {
  flex: 1; width: 100%; border: 0; outline: 0; background: transparent;
  padding: 14px 0; font-size: 16px; font-family: inherit; color: var(--shop-text);
}

.shop-front-go {
  width: 100%; margin-top: 16px; padding: 15px 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 700; color: var(--shop-dark);
  background: linear-gradient(135deg, #e0bd79, var(--shop-gold) 55%, #9d7833);
  box-shadow: 0 10px 24px rgba(168,130,63,.36);
  transition: transform .15s ease, box-shadow .15s ease;
}
.shop-front-go:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(168,130,63,.46); }

.shop-front-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--shop-muted); text-align: center; }
.shop-front-secure {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--shop-border);
  font-size: 11.5px; color: var(--shop-muted);
}

/* ---- band 2: what you can do ---- */
.shop-front-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px, 3vw, 44px);
  padding-top: clamp(28px, 3.5vw, 48px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
  border-bottom: 1px solid var(--shop-border);
}
.shop-front-band article { padding-left: 16px; border-left: 2px solid var(--shop-gold-soft); }
.shop-front-num { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--shop-gold); }
.shop-front-band h3 { margin: 6px 0 6px; font-size: 19px; }
.shop-front-band p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--shop-muted); }

/* ---- band 3 is the simcha panel, which brings its own styles ---- */
.shop-front .shopx-simcha-onlight { margin-top: clamp(28px, 3.5vw, 48px); margin-bottom: clamp(28px, 3.5vw, 48px); }

/* ---- band 4: visiting ---- */
.shop-front-visit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(18px, 3vw, 40px);
  padding-top: clamp(26px, 3vw, 40px);
  padding-bottom: clamp(34px, 4vw, 60px);
  border-top: 1px solid var(--shop-border);
}
.shop-front-visit h2 { margin: 8px 0 8px; font-size: 21px; }
.shop-front-visit p { margin: 0 0 6px; font-size: 14.5px; color: var(--shop-muted); line-height: 1.6; }
.shop-front-address { max-width: 24ch; }
.shop-front-hours { font-weight: 600; color: var(--shop-text); }
.shop-front-hours-now { font-size: 13px; }
.shop-front-link { color: var(--shop-gold); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.shop-front-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .shop-front { margin: -22px calc(50% - 50vw) -48px; }
  .shop-front-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .shop-front-card { order: -1; justify-self: stretch; max-width: none; }
  .shopx-orb { filter: blur(58px); opacity: .45; }
}

@media (max-width: 620px) {
  .shop-home-banners { padding-left: 14px !important; padding-right: 14px !important; }
  .shop-home-banner-track { min-height: 330px; border-radius: 18px; }
  .shop-home-banner-shade { background: linear-gradient(0deg, rgba(10,12,15,.82), rgba(10,12,15,.16) 85%); }
  .shop-home-banner-copy { left: 22px; top: auto; bottom: 34px; transform: none; }
  .shop-home-banner-arrow { width: 38px; height: 38px; margin-top: -19px; }
  .shop-home-banner-arrow.is-prev { left: 24px; }
  .shop-home-banner-arrow.is-next { right: 24px; }
  .shop-home-banner-dots { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .shopx-orb, .shop-front-dot { animation: none; }
  .shop-front-go, .shop-front-seg-item, .shop-front-input { transition: none; }
  .shop-front-go:hover { transform: none; }
  .shop-front-video { display: none; }
  .shop-home-banner { transition: none; }
}


/* ===== Simcha feature (shopx-simcha-*) ===== */
.shopx-simcha {
  margin: 0 0 clamp(26px, 3.5vw, 44px);
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--shop-radius-lg);
  border: 1px solid rgba(168, 130, 63, .3);
  background:
    radial-gradient(640px 300px at 88% -25%, rgba(201, 166, 97, .18), transparent 62%),
    linear-gradient(165deg, #fffdf8 0%, #fdf7ea 55%, #f8f0dd 100%);
  box-shadow: var(--shop-shadow);
  color: var(--shop-text);
}

.shopx-simcha-head { max-width: 58ch; margin-bottom: clamp(18px, 2.2vw, 26px); }

.shopx-simcha-head h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.02em;
  color: var(--shop-dark);
}

.shopx-simcha-head p {
  margin: 0;
  color: var(--shop-muted);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.6;
}

.shopx-simcha-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

.shopx-simcha-card {
  position: relative;
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 22px 22px 20px;
  border-radius: var(--shop-radius);
  border: 1px solid var(--shop-border);
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--shop-shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.shopx-simcha-card:hover {
  transform: translateY(-2px);
  border-color: var(--shop-gold);
  box-shadow: var(--shop-shadow);
}

/* A hairline of gold down the leading edge, so the two read as a pair without
   needing a picture each. */
.shopx-simcha-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--shop-gold-bright), transparent 78%);
}

.shopx-simcha-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 16px;
  color: var(--shop-gold);
  background: var(--shop-gold-soft);
  border: 1px solid rgba(168, 130, 63, .3);
}

.shopx-simcha-title {
  font-family: var(--shop-font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--shop-dark);
}

.shopx-simcha-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--shop-muted);
}

.shopx-simcha-go {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--shop-gold);
}

.shopx-simcha-go em { font-style: normal; display: inline-block; transition: transform .18s ease; }
.shopx-simcha-card:hover .shopx-simcha-go em { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .shopx-simcha-card, .shopx-simcha-go em { transition: none; }
  .shopx-simcha-card:hover { transform: none; }
  .shopx-simcha-card:hover .shopx-simcha-go em { transform: none; }
}

/* Contact: four ways to reach the shop, each opening the right app. Buttons
   rather than links, because on a phone these are the actions people want. */
.shop-front-contact { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }

.shop-front-contact-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:999px;
  font-size:13.5px; font-weight:600; text-decoration:none;
  color:var(--shop-text); background:#fff;
  border:1px solid var(--shop-border); box-shadow:var(--shop-shadow-sm);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.shop-front-contact-btn:hover {
  transform:translateY(-1px);
  border-color:var(--shop-gold);
  box-shadow:var(--shop-shadow);
}

.shop-front-contact-btn.is-whatsapp { border-color:rgba(37,211,102,.45); }
.shop-front-contact-btn.is-whatsapp:hover { border-color:#25d366; }

.shop-front-contact-number { font-weight:600; color:var(--shop-text) !important; }

@media (prefers-reduced-motion: reduce) {
  .shop-front-contact-btn { transition:none; }
  .shop-front-contact-btn:hover { transform:none; }
}


/* ===== Sign in: header button, landing CTA, own page ===== */
/* The way in, where every site keeps it. Gold so it reads as the action on a
   dark header where the other links are quiet. */
.shop-header-signin {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.003em;
  text-decoration: none;
  color: #11151b;
  background: linear-gradient(135deg, #e0bd79, var(--shop-gold) 58%, #9d7833);
  box-shadow: 0 6px 16px rgba(168, 130, 63, .34);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.shop-header-signin:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(168, 130, 63, .42);
}


/* The sign-in page: one card, centred, nothing else competing with it. */
.shop-signin-page {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(20px, 5vh, 56px) 0;
}

.shop-signin-back {
  justify-self: start;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--shop-muted);
  text-decoration: none;
}

.shop-signin-back:hover { color: var(--shop-gold); }

.shop-signin-standalone { width: 100%; max-width: 440px; justify-self: center; }

@media (max-width: 900px) {
  .shop-header-signin { padding: 8px 16px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-header-signin { transition: none; }
  .shop-header-signin:hover { transform: none; }
}


/* ===== Sign-in page (signin-*) ===== */
.signin {
  position: relative;
  isolation: isolate;
  margin: -36px calc(50% - 50vw) -64px;
  padding: clamp(28px, 7vh, 72px) 20px clamp(40px, 8vh, 88px);
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 50% -10%, #ffffff 0%, transparent 62%),
    linear-gradient(175deg, #fffdf8 0%, #faf6ec 52%, #f4eee1 100%);
}

/* One soft wash of gold behind the card, so it sits on something rather than
   floating on a flat colour. */
.signin-glow {
  position: absolute;
  z-index: -1;
  top: -12%;
  left: 50%;
  width: min(760px, 92vw);
  aspect-ratio: 1.4;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(168, 130, 63, .18), transparent 62%);
  filter: blur(42px);
}

.signin-inner {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.signin-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--shop-muted);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--shop-border);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.signin-back:hover { color: var(--shop-dark); background: #fff; border-color: var(--shop-gold); }

/* ---- the card ---- */
.signin-card {
  width: 100%;
  padding: clamp(26px, 4vw, 38px) clamp(22px, 4vw, 36px) clamp(20px, 3vw, 28px);
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(168, 130, 63, .18);
  box-shadow:
    0 1px 2px rgba(17, 21, 27, .05),
    0 28px 60px rgba(94, 73, 33, .16);
}

.signin-head { text-align: center; margin-bottom: 22px; }

.signin-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 17px;
  font-family: var(--shop-font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(145deg, #c9a661, var(--shop-gold) 58%, #8a6a2c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px rgba(168,130,63,.32);
}

.signin-head h1 {
  margin: 0 0 8px;
  font-size: clamp(25px, 3.4vw, 31px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.signin-head p {
  margin: 0 auto;
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--shop-muted);
}

/* ---- phone / email ---- */
.signin-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: #f4f0e7;
  border: 1px solid var(--shop-border);
}

.signin-seg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--shop-muted);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.signin-seg-item span { font-size: 13px; opacity: .85; }

.signin-seg-item.is-on {
  background: #fff;
  color: var(--shop-dark);
  box-shadow: 0 1px 2px rgba(17,21,27,.1), 0 4px 10px rgba(17,21,27,.08);
}

.signin-seg-item:hover:not(.is-on) { color: var(--shop-text); }

/* ---- error ---- */
.signin-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #8c2b20;
  background: #fdecea;
  border: 1px solid #f3c6c0;
}

.signin-error > span:first-child {
  flex: none;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  background: #c0564c;
}

/* ---- field ---- */
.signin-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--shop-text);
}

.signin-field {
  display: flex;
  align-items: stretch;
  border-radius: 15px;
  background: #fbfaf7;
  border: 1.5px solid var(--shop-border);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.signin-field:focus-within {
  background: #fff;
  border-color: var(--shop-gold);
  box-shadow: 0 0 0 4px rgba(168, 130, 63, .16);
}

.signin-prefix {
  display: grid;
  place-items: center;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--shop-muted);
  background: rgba(168, 130, 63, .07);
  border-right: 1px solid var(--shop-border);
}

.signin-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 15px 15px;
  font-family: inherit;
  font-size: 16px;   /* 16px stops iOS zooming when the field is tapped */
  color: var(--shop-text);
}

.signin-field input::placeholder { color: var(--shop-faint); }

/* ---- action ---- */
.signin-go {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 18px;
  padding: 16px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #2a2113;
  background: linear-gradient(135deg, #e5c489, var(--shop-gold) 55%, #9d7833);
  box-shadow: 0 10px 24px rgba(168, 130, 63, .36);
  transition: transform .15s ease, box-shadow .15s ease;
}

.signin-go::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transition: left .55s ease;
}

.signin-go:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(168, 130, 63, .46);
}

.signin-go:hover::after { left: 130%; }
.signin-go:active { transform: translateY(0); }

.signin-go-arrow { transition: transform .18s ease; }
.signin-go:hover .signin-go-arrow { transform: translateX(3px); }

/* ---- footnotes ---- */
.signin-new {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  color: var(--shop-muted);
}

.signin-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--shop-border-soft);
  font-size: 11.5px;
  color: var(--shop-faint);
}

.signin-help {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--shop-muted);
  text-align: center;
}

.signin-help a { color: var(--shop-gold); font-weight: 600; text-decoration: none; }
.signin-help a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .signin { margin: -22px calc(50% - 50vw) -48px; }
}

@media (prefers-reduced-motion: reduce) {
  .signin-go, .signin-go::after, .signin-go-arrow,
  .signin-seg-item, .signin-field, .signin-back { transition: none; }
  .signin-go:hover { transform: none; }
  .signin-go:hover::after { left: -130%; }
  .signin-go:hover .signin-go-arrow { transform: none; }
}


/* ===== Sign-in: spam note and header guard ===== */
/* style.css styles the bare element - "header { background: dark; display:
   flex; position: sticky }" - for the page banner. Any <header> or <footer>
   written inside a card inherits it, which turned the sign-in card's head into
   a dark sticky bar. The markup now uses divs, and this undoes the damage for
   any that are written inside a card later. */
.signin-card header,
.signin-card footer,
.shop-auth-card header,
.shop-auth-card footer {
  all: unset;
  display: block;
}

/* "Check your spam" - said where it is needed, not shouted. */
.signin-spam {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #7a6327;
  background: var(--shop-gold-soft);
  border: 1px solid rgba(168, 130, 63, .28);
  text-align: left;
}

.signin-spam b { color: #5d4a1b; font-weight: 700; }
.signin-spam > span:first-child { flex: none; font-size: 14px; line-height: 1.3; }


/* ===== Departments (tiles, everything-else) ===== */
/* Department tiles carry a line of explanation now, because "Men" and "Boys"
   need one where "BOYS CLEAR RAINCOAT" did not. */
.shopx-dept { min-height: 132px; }
.shopx-dept-blurb {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--shop-muted);
  margin-bottom: 2px;
}
.shopx-dept-count {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--shop-gold);
}

/* Everything that is not in a department is still reachable, folded away so it
   does not compete with the nine that matter. */
.shopx-everything {
  margin-top: clamp(20px, 3vw, 32px);
  padding: 14px 18px;
  border-radius: var(--shop-radius);
  border: 1px solid var(--shop-border);
  background: #fff;
}

.shopx-everything summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--shop-muted);
  list-style: none;
}

.shopx-everything summary::-webkit-details-marker { display: none; }
.shopx-everything summary::before { content: "+ "; color: var(--shop-gold); font-weight: 700; }
.shopx-everything[open] summary::before { content: "- "; }
.shopx-everything[open] summary { margin-bottom: 12px; color: var(--shop-text); }

.shopx-everything-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}

.shopx-everything-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  text-decoration: none;
  color: var(--shop-text);
  background: var(--shop-bg-deep);
  border: 1px solid transparent;
  transition: border-color .14s ease, background .14s ease;
}

.shopx-everything-list a:hover { background: #fff; border-color: var(--shop-gold); }
.shopx-everything-list em { font-style: normal; font-size: 11px; color: var(--shop-faint); }


/* ===== Shop header: utility strip, search, department nav ===== */
/* A shop site's header is three rows, not one: a thin strip for contact and
   opening hours, the brand with the search, then the departments. The old
   single row had the brand on the left and a few links on the right, which
   left the catalog with no navigation at all. */

/* ---- row 1: utility ---- */
.shop-utility {
  background: #0c1016;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
}

.shop-utility-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 7px clamp(14px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.shop-utility-hours { display: inline-flex; align-items: center; gap: 7px; }

.shop-utility-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9aa1ab;
}
.shop-utility-dot.is-open { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .16); }

.shop-utility-links { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.shop-utility-links a { color: rgba(255,255,255,.62); text-decoration: none; white-space: nowrap; }
.shop-utility-links a:hover { color: #fff; }

/* ---- row 2: brand and search ---- */
.shop-header { padding: 0; }

.shop-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 13px clamp(14px, 3vw, 32px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
}

.shop-header-search { display: flex; gap: 0; max-width: 560px; width: 100%; }

.shop-header-search input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 14px;
  transition: background .16s ease, border-color .16s ease;
}

.shop-header-search input::placeholder { color: rgba(255, 255, 255, .45); }

.shop-header-search input:focus {
  outline: 0;
  background: rgba(255, 255, 255, .14);
  border-color: var(--shop-gold);
}

.shop-header-search button {
  padding: 0 20px;
  border: 0;
  border-radius: 0 999px 999px 0;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #11151b;
  background: linear-gradient(135deg, #e0bd79, var(--shop-gold) 58%, #9d7833);
}

/* ---- row 3: departments ---- */
.shop-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(27, 34, 43, .97);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 2px solid var(--shop-gold);
}

.shop-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(10px, 3vw, 32px);
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.shop-nav-inner::-webkit-scrollbar { display: none; }

.shop-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 15px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.003em;
  text-decoration: none;
  color: rgba(255, 255, 255, .8);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}

.shop-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border-bottom-color: var(--shop-gold-bright);
}

.shop-nav-count {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .1);
}

.shop-nav-all { color: var(--shop-gold-bright); }

@media (max-width: 860px) {
  .shop-header-inner { grid-template-columns: auto auto; grid-template-areas: "brand links" "search search"; row-gap: 11px; }
  .shop-brand { grid-area: brand; }
  .shop-header-links { grid-area: links; }
  .shop-header-search { grid-area: search; max-width: none; }
  .shop-utility-hours { font-size: 11.5px; }
  .shop-utility-links { gap: 12px; }
  .shop-nav-link { padding: 11px 12px; font-size: 13px; }
}

@media (max-width: 560px) {
  .shop-utility-links a:not(:first-child) { display: none; }
}


/* ===== Labels order form (labels-*) ===== */
.labels-page { max-width: 1060px; margin: 0 auto; padding-bottom: 40px; }

.labels-head { margin-bottom: 18px; }
.labels-head h1 { margin: 8px 0 6px; font-size: clamp(26px, 3.4vw, 38px); }
.labels-head p { margin: 0; color: var(--shop-muted); font-size: 15px; }

/* The one thing people get wrong: what they type is what gets made. */
.labels-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: var(--shop-radius-sm);
  font-size: 14px;
  line-height: 1.55;
  color: #8c2b20;
  background: #fdecea;
  border: 1px solid #f3c6c0;
}

.labels-note > span:first-child {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  color: #fff; background: #c0564c;
}

.labels-customizer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
  gap: 18px;
  margin-bottom: 22px;
  padding: 18px;
  border-radius: var(--shop-radius);
  background: #fff;
  border: 1px solid var(--shop-border);
  box-shadow: var(--shop-shadow-sm);
}

.labels-lines { display: grid; align-content: start; gap: 14px; }

.labels-lines label { display: grid; gap: 6px; }
.labels-lines label[hidden] { display: none; }
.labels-lines span { font-size: 12.5px; font-weight: 600; color: var(--shop-text); }
.labels-lines em { font-style: normal; font-weight: 500; color: var(--shop-faint); }

.labels-lines input {
  padding: 12px 14px;
  border-radius: var(--shop-radius-sm);
  border: 1.5px solid var(--shop-border);
  background: #fbfaf7;
  font-family: inherit;
  font-size: 15px;
  color: var(--shop-text);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.labels-lines input:focus {
  outline: 0; background: #fff;
  border-color: var(--shop-gold);
  box-shadow: var(--shop-ring);
}

/* The preview intentionally uses only CSS and the customer's text: it stays
   sharp at every screen size and never sends their name to a third party. */
.labels-preview-card {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border-radius: var(--shop-radius-sm);
  border: 1px solid var(--shop-border-soft);
  background: #f7f5f0;
}

.labels-preview-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.labels-preview-card figcaption > span { font-size: 13px; font-weight: 800; color: var(--shop-text); }
.labels-preview-card figcaption small { text-align: right; font-size: 11.5px; color: var(--shop-muted); }
.labels-preview-card > p { margin: 9px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--shop-muted); }

.labels-preview-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.labels-preview-expand {
  flex: none;
  padding: 6px 9px;
  border: 1px solid rgba(168, 130, 63, .34);
  border-radius: 8px;
  color: #75591f;
  background: var(--shop-gold-soft);
  font: inherit;
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
}

.labels-preview-expand:hover { background: #f0e2c4; }
.labels-preview-expand:focus-visible { outline: 2px solid var(--shop-gold); outline-offset: 2px; }

.labels-preview-zoom {
  display: none;
  align-items: center;
  gap: 7px;
  color: var(--shop-muted);
  font-size: 11.5px;
  font-weight: 700;
}

.labels-preview-zoom input { width: clamp(90px, 16vw, 180px); accent-color: var(--shop-gold); }
.labels-preview-zoom output { min-width: 36px; color: var(--shop-text); font-variant-numeric: tabular-nums; }
.labels-preview-card.is-expanded .labels-preview-zoom { display: flex; }

body.labels-preview-open { overflow: hidden; }

.labels-preview-card.is-expanded {
  position: fixed;
  inset: 12px;
  z-index: 1200;
  overflow: auto;
  padding: clamp(16px, 2.5vw, 30px);
  border-color: #d8cfbd;
  border-radius: 18px;
  background: #f7f5f0;
  box-shadow: 0 0 0 100vmax rgba(17, 21, 27, .72), 0 24px 70px rgba(0, 0, 0, .35);
}

.labels-preview-card.is-expanded figcaption {
  position: sticky;
  top: -1px;
  z-index: 3;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(247, 245, 240, .94);
  backdrop-filter: blur(8px);
}

.labels-preview-card.is-expanded .labels-preview-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 410px), 1fr));
  align-items: start;
}

.labels-preview-card.is-expanded .labels-stick-on-sheet { width: min(100%, 620px); }

.labels-preview-card.is-expanded .labels-preview-stage { overflow: auto; }
.labels-preview-card.is-expanded .labels-stick-on-sheet,
.labels-preview-card.is-expanded .labels-preview-piece {
  zoom: var(--label-preview-zoom, 1);
}

.labels-preview-list { display: grid; gap: 12px; }
.labels-preview-option { min-width: 0; }

.labels-preview-option-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  padding: 0 2px 7px;
  font-size: 12px;
  color: var(--shop-text);
}

.labels-preview-option-meta strong { min-width: 0; line-height: 1.35; }
.labels-preview-qty {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  color: #75591f;
  background: var(--shop-gold-soft);
  border: 1px solid rgba(168, 130, 63, .24);
  font-weight: 800;
}

.labels-preview-wording {
  margin-top: 7px;
  border: 1px solid var(--shop-border-soft);
  border-radius: 9px;
  background: rgba(255, 255, 255, .7);
}

.labels-preview-wording summary {
  padding: 9px 11px;
  cursor: pointer;
  color: #75591f;
  font-size: 13px;
  font-weight: 700;
}

.labels-preview-wording-fields {
  display: grid;
  gap: 7px;
  padding: 0 9px 9px;
}

.labels-preview-wording-fields input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--shop-border);
  border-radius: 8px;
  background: #fff;
  color: var(--shop-text);
  font: inherit;
  font-size: 14px;
}

.labels-preview-wording-fields input:focus {
  outline: 0;
  border-color: var(--shop-gold);
  box-shadow: var(--shop-ring);
}

.labels-preview-add-set,
.labels-preview-remove-set {
  width: 100%;
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.labels-preview-add-set {
  color: #75591f;
  background: var(--shop-gold-soft);
  border: 1px solid rgba(168, 130, 63, .32);
}

.labels-preview-add-set:hover { background: #f0e2c4; }
.labels-preview-add-set:disabled {
  opacity: .52;
  cursor: not-allowed;
  background: #f4f1eb;
}

.labels-preview-extra-controls {
  display: flex;
  align-items: end;
  gap: 9px;
  margin-top: 8px;
}

.labels-preview-extra-controls label {
  flex: 1;
  display: grid;
  gap: 4px;
  color: var(--shop-muted);
  font-size: 12px;
  font-weight: 700;
}

.labels-preview-extra-controls input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--shop-border);
  border-radius: 8px;
  background: #fff;
  color: var(--shop-text);
  font: inherit;
  font-size: 14px;
}

.labels-preview-remove-set {
  width: auto;
  flex: none;
  color: var(--shop-danger);
  background: #fff;
  border: 1px solid #efc9c5;
}

.labels-preview-remove-set:hover { background: #fdecea; }

.labels-preview-stage {
  min-height: 145px;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.06)),
    repeating-linear-gradient(90deg, #526a78 0 2px, #597381 2px 4px);
  box-shadow: inset 0 0 0 1px rgba(20, 24, 31, .09);
}

.labels-preview-option:only-child .labels-preview-stage { min-height: 190px; }

.labels-preview-piece {
  --label-ink: #14181f;
  width: min(100%, 300px);
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 13px 20px;
  overflow: hidden;
  color: var(--label-ink);
  background: #fff;
  border: 1px solid #e0e0dc;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(16, 24, 32, .2);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
}

.labels-preview-piece > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

/* Three printed rows stay together as one compact block. The type shrinks as
   needed in script, without creating large spaces between the three lines. */
.labels-preview-piece.has-third-line {
  justify-content: center;
  gap: 0;
  padding-block: 8px;
}

.labels-preview-piece .is-placeholder { opacity: .22; font-size: .72em; letter-spacing: .06em; }

/* The stick-on preview mirrors the supplied production sheet: 50 landscape
   stickers, five across and ten down in one tight grid. The production sheet
   has no gutters between stickers, and the grid fills the page above its
   footer rather than leaving unused space at the bottom. */
.labels-preview-stage.labels-sheet-stage {
  min-height: 0;
  padding: 14px;
  background: #d8d4ca;
}

.labels-preview-option:only-child .labels-preview-stage.labels-sheet-stage { min-height: 0; }

.labels-sheet-stack {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.labels-preview-card.is-expanded .labels-sheet-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 365px), 1fr));
  align-items: start;
}

.labels-stick-on-sheet {
  --label-ink: #111827;
  position: relative;
  width: min(100%, 365px);
  aspect-ratio: 5 / 6;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr)) 28px;
  align-content: stretch;
  gap: 0;
  padding: 12px 10px 8px;
  overflow: hidden;
  color: var(--label-ink);
  background: #fff;
  border: 1px solid #dedbd3;
  border-radius: 2px;
  box-shadow: 0 9px 20px rgba(16, 24, 32, .22);
  font-family: Arial, Helvetica, sans-serif;
}

.labels-sheet-label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e2dc;
  border-radius: 3px;
  font-size: clamp(3.5px, 1vw, 7px);
  font-weight: 700;
  line-height: .92;
  text-align: center;
}

.labels-sheet-label > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: pre;
}

.labels-sheet-label > span[hidden],
.labels-preview-piece > span[hidden] { display: none; }

.labels-sheet-label.has-third-line {
  font-size: clamp(3px, .82vw, 5.75px);
  line-height: .82;
  justify-content: center;
  gap: 0;
  padding-block: 1px;
}

.labels-sheet-label .is-placeholder { opacity: .2; font-size: .7em; letter-spacing: .02em; }

.labels-sheet-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 2px 0;
  color: #5f5b52;
  font-size: 7px;
  line-height: 1.2;
}

.labels-sheet-footer b { color: #2f2d29; font-size: 8px; }

.labels-stick-on-sheet[data-colour="black"] { --label-ink: #111827; }
.labels-stick-on-sheet[data-colour="red"] { --label-ink: #c62828; }
.labels-stick-on-sheet[data-colour="blue"] { --label-ink: #175eb8; }
.labels-stick-on-sheet[data-colour="purple"] { --label-ink: #7536a8; }
.labels-stick-on-sheet[data-colour="green"] { --label-ink: #147a43; }
.labels-stick-on-sheet[data-colour="pink"] { --label-ink: #d32f86; }
.labels-stick-on-sheet[data-colour="gold"] { --label-ink: #b38322; }
.labels-stick-on-sheet[data-colour="white"] { --label-ink: #8a8a8a; }

/* Starlight's printed iron-on is 1.75 x .5 in.; the sew-on is 2.25 x .5 in.
   The preview keeps those proportions without claiming to be actual size. */
.labels-preview-stage[data-type="iron-on"] .labels-preview-piece { width: min(100%, 280px); min-height: 80px; }
.labels-preview-stage[data-type="stick-on"] .labels-preview-piece {
  width: min(100%, 300px);
  min-height: 0;
  aspect-ratio: 3 / 1;
  border-radius: 10px;
}
.labels-preview-stage[data-type="sew-on"] .labels-preview-piece {
  width: min(100%, 330px);
  min-height: 74px;
  border-radius: 0;
  border-left: 3px solid color-mix(in srgb, var(--label-ink) 55%, #fff);
  border-right: 3px solid color-mix(in srgb, var(--label-ink) 55%, #fff);
}

.labels-preview-stage[data-type="stamp"] .labels-preview-piece {
  width: min(100%, 240px);
  min-height: 90px;
  color: #171717;
  background: rgba(244, 246, 248, .76);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: contrast(1.12);
  text-shadow: .35px 0 currentColor, -.25px 0 currentColor;
}

.labels-preview-stage[data-type="embroidery"] .labels-preview-piece {
  width: min(100%, 315px);
  min-height: 100px;
  color: var(--label-ink);
  background: #26394a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(16, 24, 32, .25), inset 0 0 20px rgba(255,255,255,.04);
  text-shadow: .4px .4px 0 rgba(255,255,255,.28), -.4px -.4px 0 rgba(0,0,0,.3);
}

.labels-preview-stage[data-type="embroidery"][data-script="ktav-yad"] .labels-preview-piece,
.labels-preview-stage[data-type="embroidery"][data-script="ktavyad"] .labels-preview-piece {
  font-family: "Gveret Levin", "Segoe Print", "Bradley Hand", cursive;
  font-weight: 400;
  letter-spacing: .015em;
}

/* The photographed Ktav Yad patch is the plate beneath the live text. Its
   original sample wording was removed so the customer's wording is the only
   lettering shown. */
.labels-preview-stage[data-photo-preview="embroidery-ktav-yad-black"],
.labels-preview-stage[data-photo-preview="embroidery-regular-black"] {
  width: min(100%, 315px);
  min-height: 0;
  margin-inline: auto;
  aspect-ratio: 3 / 1;
  padding: 4% 7%;
}

.labels-preview-stage[data-photo-preview="embroidery-ktav-yad-black"] {
  background: #f7f1e8 url("/images/label-previews/embroidery-ktav-yad-black-live.jpg") center / cover no-repeat;
}

.labels-preview-stage[data-photo-preview="embroidery-regular-black"] {
  background: #fff url("/images/label-previews/embroidery-regular-black-live.jpg") center / cover no-repeat;
}

.labels-preview-option:only-child .labels-preview-stage[data-photo-preview="embroidery-ktav-yad-black"],
.labels-preview-option:only-child .labels-preview-stage[data-photo-preview="embroidery-regular-black"] {
  min-height: 0;
}

.labels-preview-stage[data-photo-preview="embroidery-ktav-yad-black"] .labels-preview-piece,
.labels-preview-stage[data-photo-preview="embroidery-regular-black"] .labels-preview-piece {
  width: 100%;
  min-height: 100%;
  gap: 0;
  padding: 1% 3%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(10px, 1.4vw, 14px);
  line-height: .98;
}

.labels-preview-stage[data-photo-preview="embroidery-ktav-yad-black"] .labels-preview-piece {
  color: #c9ccd1;
  -webkit-text-stroke: .32px currentColor;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .2), 1px 1px 1px rgba(0, 0, 0, .9);
}

.labels-preview-stage[data-photo-preview="embroidery-regular-black"] .labels-preview-piece {
  color: #caa45d;
  font-family: "Noto Sans Hebrew", "Arial Hebrew", Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  -webkit-text-stroke: .22px #e2c47b;
  text-shadow: 0 1px 0 #775923, 0 0 2px rgba(243, 211, 137, .45);
}

.labels-preview-stage[data-photo-preview="embroidery-ktav-yad-black"] .labels-preview-piece > span:first-child.is-placeholder,
.labels-preview-stage[data-photo-preview="embroidery-regular-black"] .labels-preview-piece > span:first-child.is-placeholder {
  opacity: .9;
  font-size: 1em;
  letter-spacing: inherit;
}

.labels-preview-stage[data-photo-preview="embroidery-ktav-yad-black"] .labels-preview-piece > span:first-child {
  transform: rotate(-.35deg);
}

.labels-preview-stage[data-photo-preview="embroidery-ktav-yad-black"] .labels-preview-piece > span:nth-child(2) {
  transform: rotate(.25deg);
}

.labels-preview-piece[data-colour="black"] { --label-ink: #111827; }
.labels-preview-piece[data-colour="red"] { --label-ink: #c62828; }
.labels-preview-piece[data-colour="blue"] { --label-ink: #175eb8; }
.labels-preview-piece[data-colour="purple"] { --label-ink: #7536a8; }
.labels-preview-piece[data-colour="green"] { --label-ink: #147a43; }
.labels-preview-piece[data-colour="pink"] { --label-ink: #d32f86; }
.labels-preview-piece[data-colour="gold"] { --label-ink: #b38322; }
.labels-preview-piece[data-colour="white"] { --label-ink: #fff; }

.labels-error {
  margin-bottom: 18px; padding: 12px 15px;
  border-radius: var(--shop-radius-sm);
  font-size: 14px; font-weight: 600;
  color: #8c2b20; background: #fdecea; border: 1px solid #f3c6c0;
}

/* ---- the grid: one column per kind ---- */
.labels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 14px;
}

.labels-kind {
  padding: 18px;
  border-radius: var(--shop-radius);
  background: #fff;
  border: 1px solid var(--shop-border);
  box-shadow: var(--shop-shadow-sm);
}

.labels-kind-head { text-align: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--shop-border-soft); }
.labels-kind-head h2 { margin: 0 0 3px; font-size: 17px; letter-spacing: .01em; text-transform: uppercase; }
.labels-kind-head p { margin: 0; font-size: 12px; color: var(--shop-muted); }

.labels-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--shop-border-soft);
}

.labels-row:last-child { border-bottom: 0; }
.labels-row.is-on { background: #fcfaf4; }

.labels-colour { font-size: 14px; font-weight: 700; }

/* The colour of the word is the colour of the thread, which is how the shop's
   own order pad reads. */
.labels-colour[data-colour="black"] { color: #14181f; }
.labels-colour[data-colour="red"] { color: #c0392b; }
.labels-colour[data-colour="blue"] { color: #2563c9; }
.labels-colour[data-colour="purple"] { color: #7c3aed; }
.labels-colour[data-colour="green"] { color: #1f8a4c; }
.labels-colour[data-colour="pink"] { color: #d946a6; }
.labels-colour[data-colour="gold"] { color: #a8823f; }
.labels-colour[data-colour="white"] { color: #6c7480; }

.labels-stepper {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  border: 1.5px solid var(--shop-border);
  background: #fff;
  overflow: hidden;
}

.labels-step {
  width: 34px;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--shop-dark);
  background: var(--shop-gold-soft);
  transition: background .14s ease;
}

.labels-step:hover { background: #f0e2c4; }

.labels-stepper input {
  width: 62px;
  border: 0;
  outline: 0;
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--shop-text);
  background: transparent;
  -moz-appearance: textfield;
}

.labels-stepper input::-webkit-outer-spin-button,
.labels-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.labels-price {
  grid-column: 1 / -1;
  justify-self: end;
  font-size: 12px;
  color: var(--shop-muted);
}

.labels-row.is-on .labels-price { color: var(--shop-gold); font-weight: 700; }

/* ---- footer ---- */
.labels-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--shop-radius);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--shop-border);
  box-shadow: var(--shop-shadow);
}

.labels-total-block { display: grid; gap: 4px; min-width: min(100%, 310px); }
.labels-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.labels-total span { font-size: 13px; color: var(--shop-muted); }
.labels-total b { font-family: var(--shop-font-display); font-size: 24px; }
.labels-total-breakdown { display: grid; gap: 3px; }
.labels-breakdown-row { display: flex; justify-content: space-between; gap: 18px; font-size: 12px; color: var(--shop-muted); }
.labels-breakdown-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.labels-breakdown-row b { flex: 0 0 auto; color: var(--shop-text); }
.labels-add { width: auto; min-width: 220px; }

@media (max-width: 560px) {
  .labels-customizer { grid-template-columns: 1fr; padding: 14px; }
  .labels-preview-stage { min-height: 160px; padding: 18px; }
  .labels-preview-card figcaption { align-items: flex-start; flex-direction: column; gap: 2px; }
  .labels-preview-card figcaption small { text-align: left; }
  .labels-preview-head-actions { width: 100%; justify-content: space-between; }
  .labels-preview-card.is-expanded .labels-preview-head-actions { flex-wrap: wrap; }
  .labels-preview-card.is-expanded .labels-preview-head-actions small { display: none; }
  .labels-preview-zoom input { width: min(38vw, 145px); }
  .labels-preview-card.is-expanded { inset: 6px; padding: 12px; }
  .labels-footer { flex-direction: column; align-items: stretch; }
  .labels-add { width: 100%; }
}

/* The name is made in capitals, so it is typed in capitals - the customer sees
   exactly what will be stitched. The value is upper-cased on the server too;
   this is only what the eye sees. */
.labels-lines input[name="line1"] { text-transform: uppercase; }

/* ===== Checkout: how it is fulfilled, and how it is paid ===== */
.checkout-block {
  margin:0 0 16px;
  min-width:0;
  padding:20px;
  border:1px solid var(--shop-border);
  border-radius:16px;
  background:linear-gradient(180deg, #fff 0%, #fdfbf7 100%);
  box-shadow:0 1px 2px rgba(17, 21, 27, .03);
}
.checkout-block legend {
  padding:0 9px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--shop-gold);
}

.checkout-choice {
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:4px 0;
  padding:12px;
  border:1px solid transparent;
  border-radius:11px;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.checkout-choice:hover { background:#faf7f1; border-color:var(--shop-border-soft); }
.checkout-choice + .checkout-choice { border-top-color:var(--shop-border-soft); }
.checkout-choice input { margin-top:3px; width:17px; height:17px; accent-color:var(--shop-gold); flex:none; }
.checkout-choice b { display:block; font-size:14.5px; line-height:1.35; color:var(--shop-text); }
.checkout-choice em { display:block; font-style:normal; font-size:12.5px; line-height:1.5; color:var(--shop-muted); margin-top:3px; }

.checkout-address { display:grid; gap:10px; margin-top:10px; padding-top:12px;
  border-top:1px dashed var(--shop-border); }
.checkout-address[hidden] { display:none; }
.checkout-pickup { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;
  margin:4px 0 12px; padding:14px; border:1px solid var(--shop-border-soft); border-radius:11px; background:#fff; }
.checkout-pickup[hidden] { display:none; }
.checkout-pickup label { display:grid; gap:5px; min-width:0; }
.checkout-pickup span { color:var(--shop-text); font-size:12px; font-weight:600; }
.checkout-pickup input { width:100%; min-width:0; padding:10px 12px; border:1.5px solid var(--shop-border);
  border-radius:10px; background:#fff; font:inherit; box-sizing:border-box; }
.checkout-pickup input:focus { outline:0; border-color:var(--shop-gold); box-shadow:var(--shop-ring); }
.checkout-address label { display:grid; gap:5px; }
.checkout-address span { font-size:12px; font-weight:600; color:var(--shop-text); }
.checkout-address input { padding:10px 12px; border-radius:10px; border:1.5px solid var(--shop-border);
  background:#fff; font-family:inherit; font-size:15px; }
.checkout-address input:focus { outline:0; border-color:var(--shop-gold); box-shadow:var(--shop-ring); }
.checkout-address-row { display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; }
.checkout-hint { margin:2px 0 0; font-size:12px; color:var(--shop-muted); }
.checkout-paynow { background:var(--shop-gold-soft); border:1px solid rgba(168,130,63,.3);
  border-radius:12px; padding:11px 14px; }

@media (max-width: 520px) { .checkout-address-row { grid-template-columns:1fr; } }

.shop-cart-subtotal { font-size:14px; color:var(--shop-muted); }
.shop-cart-subtotal .shop-cart-total-amount { font-weight:600; }
.shop-cart-tax-note { font-style:normal; font-size:12px; color:var(--shop-success); }

.checkout-paid { background:#e5f6ec; border:1px solid #bfe3cd; border-radius:12px; padding:11px 14px; color:#1f7a4a; }

/* ===== Cart page ===== */
/* The cart is where an order is decided, so the money reads clearly and the
   lines stay quiet. */
.shop-cart-header { margin-bottom:22px; }
.shop-cart-header h1 { font-size:clamp(30px, 3vw, 42px); letter-spacing:-.035em; }
.shop-cart-item {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(86px, auto) auto;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  margin-bottom:10px;
  border-radius:15px;
  background:#fff;
  border:1px solid var(--shop-border);
  box-shadow:var(--shop-shadow-sm);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.shop-cart-item:hover { border-color:#dcd2c0; box-shadow:var(--shop-shadow); transform:translateY(-1px); }
.shop-cart-item-info { flex:1; min-width:0; }
.shop-cart-item-name { font-family:var(--shop-font-display); font-size:18px; font-weight:600;
  color:var(--shop-dark); line-height:1.25; }
.shop-cart-item-variant { margin-top:2px; font-size:12.5px; color:var(--shop-muted); }
.shop-cart-item-price { margin-top:3px; font-size:13.5px; font-weight:600; color:var(--shop-text); }
.shop-cart-qty-form { gap:9px; }
.shop-cart-qty-form .shop-qty-input { width:78px; padding:10px 8px; border-radius:9px; }
.shop-cart-qty-form .shop-btn-secondary { min-height:40px; padding:9px 14px; }
.shop-cart-item-total strong { display:block; font-size:15px; }
.shop-remove-btn {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  transition:background .16s ease, color .16s ease;
}
.shop-remove-btn:hover { background:#fff0ef; color:#922f2a; }

/* The money block: subtotal and tax quiet, the total unmistakable. */
.shop-cart-total-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; }
.shop-cart-total-row + .shop-cart-total-row { border-top:1px solid var(--shop-border-soft); }
.shop-cart-total-row:last-of-type { margin-top:2px; padding-top:13px; border-top:2px solid var(--shop-dark); }
.shop-cart-total-amount { font-family:var(--shop-font-display); font-size:25px; font-weight:600;
  letter-spacing:-0.02em; color:var(--shop-dark); }

.shop-checkout-form { margin-top:20px; }
.shop-checkout-form > label { display:block; margin:4px 0 7px; font-size:12.5px; font-weight:600; }
.shop-checkout-form textarea { width:100%; padding:12px 14px; border-radius:var(--shop-radius-sm);
  border:1.5px solid var(--shop-border); background:#fdfcfa; font-family:inherit; font-size:15px;
  resize:vertical; }
.shop-checkout-form textarea:focus { outline:0; background:#fff; border-color:var(--shop-gold);
  box-shadow:var(--shop-ring); }
.shop-checkout-btn { width:100%; margin-top:16px; padding:16px; font-size:16px; }

/* Keep every checkout control inside the summary card. Fieldsets have an
   intrinsic min-width in browsers, and the three address columns used to push
   the form beyond the card at desktop widths. */
.shop-cart-summary {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 340px);
  align-items:start;
  gap:26px;
  width:100%;
  max-width:none;
  margin-inline:0;
  padding:26px;
  box-sizing:border-box;
  direction:ltr;
  background:rgba(255, 255, 255, .82);
  border-color:#ded7cb;
}
[dir=rtl] .shop-cart-summary > .shop-cart-totals,
[dir=rtl] .shop-cart-summary > .shop-checkout-form,
[dir=rtl] .shop-cart-summary > #shopPay { direction:rtl; }
.shop-cart-totals {
  min-width:0;
  padding:20px;
  border:1px solid var(--shop-border);
  border-radius:14px;
  background:linear-gradient(145deg, #fbf8f1, #fff);
  box-shadow:var(--shop-shadow-sm);
  position:sticky;
  top:78px;
}
.shop-checkout-form,
.shop-checkout-form fieldset,
.checkout-address,
.checkout-address-row,
.checkout-address-row > label { min-width:0; }
.shop-checkout-form fieldset { width:100%; box-sizing:border-box; }
.shop-checkout-form .checkout-choice { display:flex; margin:0; }
.shop-checkout-form .checkout-choice input[type="radio"] { width:17px; }
.checkout-address input,
.shop-checkout-form textarea { width:100%; min-width:0; box-sizing:border-box; }
.shop-cart-summary .shop-checkout-form {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  margin-top:0;
}
.shop-cart-summary .shop-checkout-form { grid-column:1; grid-row:1; }
.shop-cart-summary .shop-cart-totals { grid-column:2; grid-row:1; }
.shop-cart-summary .shop-checkout-form > .checkout-block { margin:0; }
.shop-cart-summary .shop-checkout-form > label,
.shop-cart-summary .shop-checkout-form > textarea,
.shop-cart-summary .shop-checkout-form > .shop-checkout-btn { grid-column:1 / -1; }
.shop-cart-summary > #shopPay { grid-column:1 / -1; width:100%; box-sizing:border-box; }

/* Checkout uses the same saved-card language and controls as My Account's
   purchase-history area, with a radio added so the chosen card is charged. */
.checkout-payment-title { margin:4px 0 12px; font-size:1rem; color:var(--shop-dark); }
.checkout-no-cards { margin:0 0 12px; color:var(--shop-muted); font-size:.88rem; }
.checkout-saved-cards { display:grid; gap:10px; margin-bottom:14px; }
.shop-saved-card {
  min-width:0;
  padding:14px;
  border:1px solid var(--shop-border);
  border-radius:11px;
  background:var(--shop-card);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.shop-checkout-form .shop-card-select {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  cursor:pointer;
}
.shop-card-select > input[type="radio"] { flex:0 0 auto; width:17px; height:17px; margin-top:3px; accent-color:var(--shop-gold); }
.shop-card-select > span { min-width:0; }
.shop-card-brand { display:block; font-weight:700; color:var(--shop-dark); }
.shop-card-expiry { display:block; margin-top:2px; font-size:.86rem; color:var(--shop-muted); }
.shop-card-expiry.is-expired { color:var(--shop-danger); font-weight:700; }
.shop-card-expiry.is-soon { color:#9a6517; font-weight:700; }
.shop-card-lastused { display:inline-block; margin-top:8px; padding:4px 10px; border-radius:999px;
  background:#e8f0fe; color:#14407a; font-weight:700; font-size:.76rem; }
.shop-card-lastused.is-unused { background:#f1f3f5; color:#6b7280; font-weight:600; }
.shop-card-actions { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px; }
.shop-card-link { border:0; padding:0; background:none; color:#2f6fed; font:inherit; font-size:.78rem;
  text-decoration:underline; cursor:pointer; }
.shop-card-link.is-danger { color:var(--shop-danger); }
.shop-card-panel { margin-top:10px; padding-top:10px; border-top:1px solid var(--shop-border-soft); }
.shop-card-panel[hidden] { display:none; }
.shop-card-panel > label { display:block; margin-bottom:6px; font-size:.78rem; font-weight:700; }
.shop-card-expiry-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.shop-card-expiry-row input { width:72px; min-width:0; padding:7px 8px; border:1px solid var(--shop-border);
  border-radius:7px; font:inherit; box-sizing:border-box; }
.shop-card-hint { margin:8px 0 0; color:var(--shop-muted); font-size:.75rem; }
.shop-card-confirm { margin:0 0 8px; font-size:.84rem; font-weight:600; }
.shop-card-danger-btn { padding:7px 12px; border:0; border-radius:8px; background:var(--shop-danger);
  color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.shop-card-msg { margin:8px 0 0; font-size:.82rem; font-weight:700; }
.shop-card-msg.is-bad { color:var(--shop-danger); }
.shop-card-msg.is-good { color:var(--shop-success); }
.checkout-payment-card:has(input[name="payment"]:checked) { border-color:var(--shop-gold);
  background:var(--shop-gold-soft); box-shadow:inset 4px 0 0 var(--shop-gold), var(--shop-shadow-sm); }
.checkout-payment-card.is-expired { background:#f6f6f6; opacity:.75; }
.shop-add-card { padding:14px; border:1px solid var(--shop-border); border-radius:10px; background:var(--shop-card); }
.shop-add-card > label { display:block; margin-bottom:8px; font-weight:700; }
.shop-add-card-note { margin:10px 0 0; color:var(--shop-muted); font-size:.78rem; line-height:1.45; }
.checkout-new-card-choice { margin-top:10px !important; }

/* A chosen payment card or delivery option should look chosen. */
.checkout-choice:has(input:checked) { background:var(--shop-gold-soft); border-color:rgba(168,130,63,.38);
  box-shadow:inset 4px 0 0 var(--shop-gold), var(--shop-shadow-sm); padding-left:12px; }

@media (max-width: 980px) {
  .shop-cart-summary { grid-template-columns:1fr; gap:22px; }
  .shop-cart-summary .shop-checkout-form { grid-column:1; grid-row:1; }
  .shop-cart-summary .shop-cart-totals { grid-column:1; grid-row:2; position:static; }
}

@media (max-width: 640px) {
  .shop-cart-header { align-items:flex-start; gap:12px; }
  .shop-cart-header h1 { font-size:26px; }
  .shop-cart-item { grid-template-columns:1fr auto; align-items:center; gap:14px 12px; padding:16px; }
  .shop-cart-item-info { grid-column:1 / -1; }
  .shop-cart-qty-form { grid-column:1; }
  .shop-cart-item-total { margin-left:auto; text-align:right; }
  .shop-cart-item > form:last-child { grid-column:2; grid-row:2; justify-self:end; }
  .shop-cart-summary { margin-inline:0; padding:18px 14px; border-radius:14px; }
  .shop-cart-summary .shop-checkout-form { grid-template-columns:1fr; gap:14px; }
  .shop-cart-summary .shop-checkout-form > * { grid-column:1; }
  .checkout-block { padding:15px; }
  .checkout-address-row { grid-template-columns:1fr; }
  .checkout-pickup { grid-template-columns:1fr; }
}

/* Carts left sitting for over a month, on the staff list. */
.cart-stale td { background:#fffaf0; }
.cart-custom { color:var(--shop-gold); }

/* ---------- Product detail ----------
   The catalog remains fast to scan; the detail page gives a product the same
   clear gallery-and-buy-box hierarchy shoppers expect from modern storefronts. */
.shop-product-card-link,
.shop-product-title-link { color:inherit; text-decoration:none; }
.shop-product-card-link { display:block; }
.shop-product-title-link:hover { text-decoration:underline; text-underline-offset:3px; }

.shop-product-breadcrumbs {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 28px;
  color:var(--shop-muted);
  font-size:13px;
}
.shop-product-breadcrumbs a { color:var(--shop-dark); text-decoration:none; }
.shop-product-breadcrumbs a:hover { text-decoration:underline; }

.shop-product-detail {
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(380px, .92fr);
  gap:clamp(38px, 6vw, 86px);
  align-items:start;
  max-width:1240px;
  margin:0 auto;
}
.shop-product-gallery { min-width:0; }
.shop-product-stage {
  position:relative;
  display:grid;
  place-items:center;
  min-height:560px;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:1px solid var(--shop-border);
  border-radius:18px;
  background:#fff;
}
.shop-product-stage > img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:clamp(22px, 5vw, 62px);
  box-sizing:border-box;
}
.shop-product-zoom {
  position:absolute;
  top:18px;
  right:18px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--shop-border);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--shop-dark);
  font-size:27px;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--shop-shadow-sm);
}
.shop-product-zoom:hover { border-color:var(--shop-dark); }
.shop-product-thumbnails {
  display:flex;
  gap:12px;
  margin-top:14px;
  overflow-x:auto;
  padding:2px 2px 7px;
}
.shop-product-thumb {
  flex:0 0 78px;
  width:78px;
  height:78px;
  padding:6px;
  overflow:hidden;
  border:1.5px solid var(--shop-border);
  border-radius:11px;
  background:#fff;
  cursor:pointer;
}
.shop-product-thumb.is-active { border-color:var(--shop-dark); box-shadow:0 0 0 1px var(--shop-dark); }
.shop-product-thumb img { width:100%; height:100%; object-fit:contain; }

.shop-product-buybox {
  position:sticky;
  top:94px;
  min-width:0;
  padding:10px 0 0;
}
.shop-product-vendor {
  margin-bottom:10px;
  color:var(--shop-muted);
  font-size:14px;
  letter-spacing:.02em;
}
.shop-product-buybox h1 {
  margin:0;
  color:var(--shop-dark);
  font-family:var(--shop-font-display);
  font-size:clamp(34px, 3.1vw, 48px);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.025em;
}
.shop-product-code { margin-top:12px; color:var(--shop-muted); font-size:12px; }
.shop-product-options { display:grid; gap:24px; margin-top:30px; }
.shop-product-option { min-width:0; margin:0; padding:0; border:0; }
.shop-product-option legend {
  margin-bottom:11px;
  color:var(--shop-dark);
  font-size:15px;
  font-weight:800;
}
.shop-product-choice-list { display:flex; flex-wrap:wrap; gap:10px; }
.shop-product-choice {
  min-width:56px;
  min-height:48px;
  padding:10px 18px;
  border:1.5px solid #cfc9c0;
  border-radius:999px;
  background:#fff;
  color:var(--shop-dark);
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease;
}
.shop-product-choice:hover { border-color:var(--shop-dark); transform:translateY(-1px); }
.shop-product-choice.is-selected { border-color:var(--shop-dark); background:var(--shop-dark); color:#fff; }
.shop-product-price-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
  padding:25px 0 20px;
  border-top:1px solid var(--shop-border);
  border-bottom:1px solid var(--shop-border);
}
.shop-product-detail-price {
  color:var(--shop-dark);
  font-family:var(--shop-font-display);
  font-size:39px;
  font-weight:600;
  letter-spacing:-.02em;
}
.shop-product-custom { display:grid; gap:8px; margin-top:22px; }
.shop-product-custom h2 { margin:0 0 6px; font-size:17px; }
.shop-product-custom label { margin-top:7px; font-size:13px; font-weight:700; }
.shop-product-custom input,
.shop-product-custom select {
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border:1.5px solid var(--shop-border);
  border-radius:9px;
  background:#fff;
  box-sizing:border-box;
  font:inherit;
}
.shop-product-purchase { display:flex; gap:12px; margin-top:24px; }
.shop-product-quantity {
  flex:0 0 132px;
  display:grid;
  grid-template-columns:40px 1fr 40px;
  height:54px;
  overflow:hidden;
  border:1.5px solid var(--shop-dark);
  border-radius:999px;
  background:#fff;
}
.shop-product-quantity button,
.shop-product-quantity input {
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--shop-dark);
  text-align:center;
  font:inherit;
  font-size:18px;
}
.shop-product-quantity button { cursor:pointer; }
.shop-product-quantity input { appearance:textfield; font-size:15px; font-weight:800; }
.shop-product-quantity input::-webkit-inner-spin-button { appearance:none; }
.shop-product-add {
  flex:1;
  min-height:54px;
  padding:12px 24px;
  border:0;
  border-radius:999px;
  background:var(--shop-dark);
  color:#fff;
  font:inherit;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  transition:transform .14s ease, opacity .14s ease, box-shadow .14s ease;
}
.shop-product-add:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(28,27,25,.22); }
.shop-product-add:disabled { cursor:default; opacity:.65; transform:none; }
.shop-product-message { min-height:20px; margin:10px 4px 0; color:var(--shop-success); font-size:13px; font-weight:700; }
.shop-product-service-notes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:22px;
}
.shop-product-service-notes > div {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:15px;
  border-radius:12px;
  background:#f3f0e9;
  font-size:12px;
  line-height:1.45;
}
.shop-product-service-notes span { color:var(--shop-muted); }
.shop-product-lightbox {
  position:fixed;
  z-index:3000;
  inset:0;
  display:grid;
  place-items:center;
  padding:45px;
  background:rgba(16,15,14,.84);
}
.shop-product-lightbox[hidden] { display:none; }
.shop-product-lightbox img { max-width:min(90vw, 1100px); max-height:88vh; object-fit:contain; border-radius:8px; background:#fff; }
.shop-product-lightbox button {
  position:absolute;
  top:20px;
  right:24px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:40px;
  cursor:pointer;
}

@media (max-width: 900px) {
  .shop-product-detail { grid-template-columns:1fr; gap:30px; max-width:680px; }
  .shop-product-stage { min-height:0; }
  .shop-product-buybox { position:static; padding-top:0; }
  .shop-product-buybox h1 { font-size:clamp(31px, 7vw, 42px); }
}

@media (max-width: 520px) {
  .shop-product-breadcrumbs { margin-bottom:18px; }
  .shop-product-stage { border-radius:13px; }
  .shop-product-stage > img { padding:22px; }
  .shop-product-zoom { top:12px; right:12px; width:40px; height:40px; }
  .shop-product-purchase { flex-direction:column; }
  .shop-product-quantity { flex-basis:52px; width:132px; }
  .shop-product-add { flex:none; width:100%; }
  .shop-product-service-notes { grid-template-columns:1fr; }
  .shop-product-lightbox { padding:20px; }
}

/* ---------- Touch screens: never zoom in on a tapped field ---------- */
/* Android and iOS zoom the page whenever you tap a field whose text is smaller
   than 16px. Chrome on Android deliberately ignores "user-scalable=no", so the
   viewport tag cannot prevent it - 16px text is the only reliable fix.

   This is one override rather than ~50 edits across the component styles,
   because it is a platform rule, not a design choice: every text field in the
   app has to clear 16px on a touch screen or the page jumps when staff tap it.
   !important is here for the same reason - component rules like
   ".weborder-input { font-size: 13px }" are more specific and would win
   otherwise. Desktop is untouched: this only applies to coarse pointers.

   Opt out on a genuinely non-editable control with class="allow-small-text". */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.allow-small-text),
  select:not(.allow-small-text),
  textarea:not(.allow-small-text) {
    font-size: 16px !important;
  }

  /* Boxes sized in pixels for 12-14px text clip their contents at 16px, so the
     narrow ones used on order, stock and appointment screens get room back. */
  .weborder-fill { width: 64px; }
  .weborder-qty-input { width: 66px; }
  .weborder-price-input { width: 88px; }
  .inv-mgr-order-input { min-width: 62px; }
  .inv-mgr-color-input { min-width: 90px; }
  .chussen-slot-time-input,
  .chussen-slot-minute-input { min-width: 58px; }
  .shop-qty-input { width: 90px; min-width: 90px; font-size: 16px; }
  .shop-qty-input::-webkit-inner-spin-button { opacity: 1; }

  /* The OTHER zoom: a quick second tap anywhere is treated as "double-tap to
     zoom", so tapping two rows in a row - an order, then the next one - magnifies
     the page instead. Naming these elements as single-tap targets stops that and
     removes the ~300ms delay the browser otherwise waits to see if a second tap
     is coming. Pinch-to-zoom is unaffected: this covers controls only, not the
     page, so anyone who wants to magnify something still can. */
  a,
  button,
  summary,
  label,
  [role="button"],
  [role="tab"],
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  /* Stops the grey flash Android paints over a tapped link; the app's own
     hover and active styles already show what was pressed. */
  a, button, [role="button"] { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06); }
}