/* assets/css/bulk.css */

/* =========================================================
   Bulk & corporate orders (/bulk-orders): the navy header band, what
   can be ordered, the features, how it works and the enquiry form.
   The dots and button row shared with the Home band are in style.css.
   ========================================================= */

/* Header band: the text, then one photo per model (beside it from 960px). Positioned to paint
   above the blobs, without a z-index (a stacking context would stop the photos' multiply blend). */
.bulk-hero { padding: clamp(40px, 6vw, 80px) 0; }
.bulk-hero-inner { position: relative; display: grid; gap: var(--space-6); align-items: center; }
.bulk-hero .eyebrow { margin-bottom: var(--space-2); color: var(--sigma-yellow); }
.bulk-hero h1 { margin: 0 0 var(--space-4); }
.bulk-hero p { max-width: 60ch; }
.bulk-hero .bulk-lead { font-size: 1.1rem; color: var(--sigma-white); }
.bulk-hero .bulk-dots { margin: 0 0 var(--space-5); }
.bulk-hero-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bulk-hero-media li { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; padding: var(--space-3); border-radius: var(--radius-lg); }
.bulk-hero-media img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 960px) {
  .bulk-hero-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); }
}

/* What you can order: two cards side by side from 768px. */
.bulk-offers { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .bulk-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bulk-offer {
  min-width: 0;
  padding: var(--space-5);
  background: var(--sigma-white);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.bulk-offer h3 { margin: 0 0 var(--space-4); }
.bulk-offer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 14px;
  background: var(--sigma-primary);
  color: var(--sigma-white);
}
.bulk-offer:nth-child(2) .bulk-offer-icon { background: var(--sigma-blue); }
.bulk-offer-sub { margin: var(--space-4) 0 var(--space-3); font-family: var(--font-ui); font-weight: 500; color: var(--sigma-text-dark); }
.bulk-models { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.bulk-model { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.bulk-model-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: var(--space-2); border-radius: var(--radius-md); overflow: hidden; }
.bulk-model-media img { width: 100%; height: 100%; object-fit: contain; }
.bulk-model-text { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
.bulk-model-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; color: var(--sigma-text-dark); overflow-wrap: anywhere; }
.bulk-model-sizes { font-family: var(--font-ui); font-size: 0.9rem; color: var(--sigma-text-medium); }
.bulk-model .section-link { display: inline-flex; align-items: center; min-height: var(--touch); }
.bulk-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bulk-chips li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--sigma-border);
  border-radius: 999px;
  background: var(--sigma-bg-light);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--sigma-text-dark);
}

/* Every suitcase comes with: the verified features. */
.bulk-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bulk-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--sigma-white);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--sigma-text-dark);
}
.bulk-feature-icon { display: inline-flex; color: var(--sigma-primary); }

/* How it works: three numbered steps. */
.bulk-steps { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: bulk-step; }
@media (min-width: 768px) {
  .bulk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bulk-steps li {
  padding: var(--space-5);
  background: var(--sigma-white);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-lg);
  counter-increment: bulk-step;
}
/* The number; the <ol> already gives screen readers the order. */
.bulk-steps li::before {
  content: counter(bulk-step);
  content: counter(bulk-step) / "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--sigma-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--sigma-white);
}
.bulk-steps h3 { font-size: 1.2rem; margin-bottom: var(--space-2); }
.bulk-steps p { margin: 0; }

/* The enquiry: the form, and beside it from 960px the way to buy online. */
.bulk-enquiry-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) {
  .bulk-enquiry-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.bulk-enquiry-main { min-width: 0; }
.bulk-enquiry-main > h2 { margin-bottom: var(--space-5); }
.bulk-form .error-summary { margin-bottom: var(--space-5); }
.bulk-form [hidden] { display: none; }
.bulk-fieldset { min-width: 0; margin: 0 0 var(--space-5); padding: 0; border: 0; }
.bulk-fieldset legend { margin-bottom: var(--space-2); padding: 0; font-family: var(--font-ui); font-weight: 500; font-size: 1rem; color: var(--sigma-text-dark); }
.bulk-fieldset > .field-hint { margin: 0 0 var(--space-3); }
.bulk-for { font-weight: 400; color: var(--sigma-text-medium); }
.bulk-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-2); }
.bulk-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  background: var(--sigma-white);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  color: var(--sigma-text-dark);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.bulk-choice input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--sigma-primary); }
.bulk-choice:has(input:checked) { border-color: var(--sigma-primary); box-shadow: 0 0 0 1px var(--sigma-primary); }
.bulk-choice .dot { flex-shrink: 0; width: 16px; height: 16px; }
.bulk-form textarea { min-height: 130px; resize: vertical; }
.bulk-form .form-actions { margin-top: var(--space-2); }
.bulk-privacy { margin: var(--space-3) 0 0; font-size: 0.85rem; }
.bulk-notice-box .bulk-actions { margin-top: var(--space-3); }
.bulk-notice-box .btn { min-height: var(--touch); }
.bulk-sent h2 { margin-bottom: var(--space-3); }
.bulk-sent h2:focus { outline: none; }
.bulk-sent .bulk-actions + .bulk-actions { margin-top: var(--space-4); }
.bulk-sent p { color: var(--sigma-text-dark); }
.bulk-aside {
  padding: var(--space-5);
  background: var(--sigma-white);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-lg);
}
.bulk-aside p { margin: 0 0 var(--space-3); }
.bulk-aside .bulk-aside-title { margin-bottom: var(--space-1); font-family: var(--font-heading); font-weight: 600; color: var(--sigma-text-dark); }
.bulk-aside .btn { min-height: var(--touch); }