/* Bakery Storefront Stylesheet (bakery-design-system handle) */

/* FIX (v1.0.1): the original file only defined :root tokens, .bakery-card,
   .bakery-btn-primary, status badges, and the responsive-table wrapper —
   dozens of other classes referenced throughout class-bakery-storefront-
   shortcodes.php (hero, navbar, trust strip, category tiles, product grid,
   steps, testimonials, footer, cart/checkout layout, forms) had no rules at
   all, so the page rendered as plain stacked text. This is the complete
   stylesheet covering every class actually used in the templates. */

/* FIX: this file previously defined its own separate :root color block
   (different secondary/accent/border/bg values than bakery-core's real
   design-system.css) which, because this stylesheet loads AFTER the design
   system as a dependency, silently won the CSS cascade and overrode it —
   including overriding the new admin-configurable brand color system.
   Colors are no longer redeclared here; bakery-core's design-system.css
   (plus its dynamic brand-color inline override) is the single source of
   truth. Only the radius override is kept, since a more rounded look here
   is an intentional storefront-specific design choice, not a color conflict. */
:root {
  --bakery-radius: 12px;
}

/* ---------- Base / Reset ---------- */
.bakery-storefront-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--bakery-text);
  background: var(--bakery-primary-soft);
  min-width: 0;
}
.bakery-storefront-wrap *,
.bakery-storefront-wrap *::before,
.bakery-storefront-wrap *::after {
  box-sizing: border-box;
}
.bakery-page-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.bakery-section {
  padding: 48px 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.bakery-section-header {
  text-align: center;
  margin-bottom: 32px;
}
.bakery-section-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--bakery-text);
  margin: 0 0 8px;
}
.bakery-section-desc {
  color: var(--bakery-muted);
  margin: 0;
}
.bakery-page-header {
  padding: 32px 20px 8px;
  max-width: 1180px;
  margin: 0 auto;
}
.bakery-page-title {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--bakery-text);
}
.bakery-page-subtitle {
  color: var(--bakery-muted);
  margin: 0;
}

/* ---------- Buttons ---------- */
.bakery-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.bakery-btn:hover {
  transform: translateY(-1px);
}
.bakery-btn-primary {
  background-color: var(--bakery-primary) !important;
  color: var(--bakery-surface) !important;
}
.bakery-btn-primary:hover {
  background-color: var(--bakery-primary-hover) !important;
}
.bakery-btn-secondary {
  background-color: var(--bakery-secondary-soft) !important;
  color: var(--bakery-primary) !important;
  border: 1px solid var(--bakery-primary-soft) !important;
}
.bakery-btn-cta {
  background-color: var(--bakery-accent) !important;
  color: var(--bakery-surface) !important;
}

/* ---------- Navbar ---------- */
.bakery-navbar {
  background: var(--bakery-surface);
  border-bottom: 1px solid var(--bakery-primary-soft);
  position: sticky;
  top: 0;
  z-index: 20;
}
.bakery-navbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}
.bakery-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--bakery-text);
  font-weight: 800;
  font-size: 18px;
}
.bakery-brand-icon {
  font-size: 22px;
}
.bakery-brand-name em {
  font-style: normal;
  color: var(--bakery-primary);
}
.bakery-nav-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.bakery-nav-link {
  text-decoration: none;
  color: #57534e;
  font-weight: 600;
  font-size: 14px;
}
.bakery-nav-link.is-active,
.bakery-nav-link:hover {
  color: var(--bakery-primary);
}
.bakery-nav-actions {
  display: flex;
  align-items: center;
}
.bakery-cart-button {
  position: relative;
  text-decoration: none;
  font-size: 20px;
  padding: 6px 10px;
}
.bakery-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--bakery-accent);
  color: var(--bakery-surface);
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ---------- Hero ---------- */
.bakery-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 20px;
}
.bakery-hero-content {
  flex: 1 1 420px;
  min-width: 0;
}
.bakery-hero-eyebrow-pill {
  display: inline-block;
  background: var(--bakery-secondary-soft);
  color: var(--bakery-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 9999px;
  margin-bottom: 16px;
}
.bakery-hero-title {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--bakery-text);
}
.bakery-hero-lead {
  color: #57534e;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 520px;
}
.bakery-hero-cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.bakery-hero-graphic {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.bakery-hero-image {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(41, 37, 36, 0.15);
}
.bakery-hero-badge-card {
  background: var(--bakery-text);
  color: var(--bakery-surface);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  min-width: 220px;
}
.bakery-hero-badge-stat {
  font-size: 34px;
  font-weight: 800;
  color: #fbbf24;
}
.bakery-hero-badge-label {
  font-size: 13px;
  color: #d6d3d1;
  margin-top: 6px;
}

/* ---------- Trust Strip ---------- */
.bakery-trust-strip {
  background: var(--bakery-primary-soft);
  border-top: 1px solid var(--bakery-primary-soft);
  border-bottom: 1px solid var(--bakery-primary-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px;
}
.bakery-trust-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.bakery-trust-icon {
  font-size: 22px;
}
.bakery-trust-text strong {
  display: block;
  font-size: 14px;
  color: var(--bakery-text);
}
.bakery-trust-text p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--bakery-muted);
}

/* ---------- Category Tiles ---------- */
.bakery-category-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.bakery-cat-tile {
  background: var(--bakery-surface);
  border: 1px solid var(--bakery-primary-soft);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  text-decoration: none;
  color: var(--bakery-text);
  min-width: 0;
  transition: box-shadow 0.15s ease;
}
.bakery-cat-tile:hover {
  box-shadow: 0 6px 18px rgba(120, 53, 15, 0.12);
}
.bakery-cat-tile-icon {
  font-size: 30px;
  margin-bottom: 10px;
}
.bakery-cat-tile-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}
.bakery-cat-tile-link {
  font-size: 13px;
  color: var(--bakery-primary);
  font-weight: 600;
}

/* ---------- Product Grid ---------- */
.bakery-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  min-width: 0;
}

/* ---------- Custom Cake CTA Banner ---------- */
.bakery-custom-cake-cta-banner {
  background: var(--bakery-secondary-soft);
  margin: 0 20px 48px;
  border-radius: 16px;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.bakery-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 40px;
}
.bakery-cta-text {
  flex: 1 1 360px;
  min-width: 0;
}
.bakery-cta-tag {
  display: inline-block;
  color: var(--bakery-accent);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.bakery-cta-title {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px;
}
.bakery-cta-desc {
  color: #57534e;
  margin: 0 0 18px;
  max-width: 480px;
}
.bakery-cta-graphic {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.bakery-cake-preview-badge {
  background: var(--bakery-surface);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  min-width: 220px;
}
.bakery-cake-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}
.bakery-cake-preview-badge span:last-child {
  display: block;
  font-size: 12px;
  color: var(--bakery-muted);
  margin-top: 4px;
}

/* ---------- How It Works Steps ---------- */
.bakery-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.bakery-step-card {
  min-width: 0;
}
.bakery-step-number {
  font-size: 22px;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 8px;
}
.bakery-step-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}
.bakery-step-desc {
  font-size: 13px;
  color: var(--bakery-muted);
  margin: 0;
}

/* ---------- Loyalty Tile ---------- */
.bakery-loyalty-tile {
  background: var(--bakery-primary-soft);
  border: 1px dashed var(--bakery-primary-soft);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.bakery-loyalty-icon {
  font-size: 32px;
}
.bakery-loyalty-content {
  flex: 1 1 320px;
  min-width: 0;
}
.bakery-loyalty-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--bakery-accent);
  text-transform: uppercase;
}
.bakery-loyalty-title {
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0 6px;
}
.bakery-loyalty-desc {
  font-size: 13px;
  color: var(--bakery-muted);
  margin: 0;
}
.bakery-loyalty-action {
  flex-shrink: 0;
}

/* ---------- Testimonials ---------- */
.bakery-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bakery-testimonial-card {
  background: var(--bakery-surface);
  border: 1px solid var(--bakery-primary-soft);
  border-radius: 12px;
  padding: 24px;
  min-width: 0;
}
.bakery-testimonial-stars {
  color: #fbbf24;
  margin-bottom: 10px;
}
.bakery-testimonial-quote {
  margin: 0 0 14px;
  font-style: italic;
  color: #44403c;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.bakery-testimonial-author strong {
  display: block;
  font-size: 14px;
}
.bakery-testimonial-author span {
  font-size: 12px;
  color: var(--bakery-muted);
}

/* ---------- Footer ---------- */
.bakery-footer {
  background: #1c1917;
  color: #d6d3d1;
  padding: 48px 20px 20px;
}
.bakery-footer-top {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #44403c;
}
.bakery-footer-col {
  min-width: 0;
}
.bakery-footer-col h4 {
  color: var(--bakery-surface);
  font-size: 14px;
  margin: 0 0 12px;
}
.bakery-footer-about {
  font-size: 13px;
  line-height: 1.6;
  color: #a8a29e;
}
.bakery-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bakery-footer-nav li {
  margin-bottom: 8px;
}
.bakery-footer-nav a {
  color: #d6d3d1;
  text-decoration: none;
  font-size: 13px;
}
.bakery-footer-nav a:hover {
  color: var(--bakery-surface);
}
.bakery-footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  font-size: 12px;
}

/* FIX: .bakery-brand is reused in the footer, but its explicit dark text
   color (correct for the light navbar) otherwise wins over the footer's
   lighter inherited color, since an explicit rule on the element itself
   always beats an inherited one regardless of ancestor specificity. */
.bakery-footer .bakery-brand {
  color: var(--bakery-surface);
}
.bakery-payment-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bakery-pay-badge {
  background: var(--bakery-text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}

/* ---------- Forms (shared) ---------- */
.bakery-form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--bakery-border);
  border-radius: 8px;
  font-size: 14px;
  min-width: 0;
}
.bakery-form-group {
  margin-bottom: 14px;
}
.bakery-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #44403c;
}
.bakery-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bakery-radio-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--bakery-border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  min-width: 0;
}
.bakery-radio-card.is-selected {
  border-color: var(--bakery-primary);
  background: var(--bakery-primary-soft);
}
.bakery-radio-card p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--bakery-muted);
}

/* ---------- Shop Page ---------- */
.bakery-shop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.bakery-shop-search-bar {
  min-width: 220px;
}
.bakery-filter-pills-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 4px;
}
.bakery-filter-pill {
  border: 1px solid var(--bakery-border);
  background: var(--bakery-surface);
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #57534e;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.bakery-filter-pill.is-active {
  background: var(--bakery-primary) !important;
  color: var(--bakery-surface) !important;
  border-color: var(--bakery-primary) !important;
}

/* ---------- Cart Page ---------- */
.bakery-cart-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  padding: 0 20px 48px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
.bakery-summary-card {
  position: sticky;
  top: 90px;
}
.bakery-summary-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.bakery-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #57534e;
}
.bakery-summary-divider {
  border-top: 1px dashed var(--bakery-border);
  margin: 10px 0;
}
.bakery-summary-total {
  font-weight: 700;
  color: var(--bakery-text);
}

/* ---------- Checkout Page ---------- */
.bakery-checkout-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  padding: 0 20px 48px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
.bakery-checkout-grid h3 {
  font-size: 15px;
  margin: 20px 0 12px;
}
.bakery-checkout-grid h3:first-child {
  margin-top: 0;
}

/* ---------- Account Page ---------- */
.bakery-account-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 48px; /* v1.0.16: top gap so the cards do not sit against the header */
}
.bakery-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.bakery-orders-table th,
.bakery-orders-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bakery-primary-soft);
}
.bakery-orders-table th {
  color: var(--bakery-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

/* ---------- Cake Inquiry Page ---------- */
.bakery-cake-inquiry-page {
  padding-bottom: 48px;
}

/* ---------- Cards (base) ---------- */
.bakery-card {
  background: var(--bakery-surface);
  border: 1px solid var(--bakery-primary-soft);
  border-radius: 12px;
  padding: 24px;
  min-width: 0; /* Habit #12 */
}

/* ---------- Habit #13: Hardcoded Literal Colors for Status Badges ---------- */
.bakery-badge-status-pending,
.bakery-badge-status-new {
  background-color: var(--bakery-secondary-soft) !important;
  color: var(--bakery-secondary) !important;
  border: 1px solid #fcd34d !important;
}

.bakery-badge-status-processing,
.bakery-badge-status-contacted {
  background-color: #dbeafe !important;
  color: #2563eb !important;
  border: 1px solid #93c5fd !important;
}

.bakery-badge-status-completed,
.bakery-badge-status-converted {
  background-color: #dcfce7 !important;
  color: #16a34a !important;
  border: 1px solid #86efac !important;
}

.bakery-badge-status-cancelled,
.bakery-badge-status-closed {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid #fca5a5 !important;
}

/* ---------- Habit #11: Responsive Tables ---------- */
.bakery-responsive-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ---------- Habit #11: Mobile breakpoints (below 768px) ---------- */
@media (max-width: 768px) {
  .bakery-trust-strip,
  .bakery-category-tiles,
  .bakery-steps-grid,
  .bakery-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bakery-cart-layout,
  .bakery-checkout-grid,
  .bakery-footer-top {
    grid-template-columns: 1fr;
  }
  .bakery-form-row {
    grid-template-columns: 1fr;
  }
  .bakery-hero-title {
    font-size: 30px;
  }
  .bakery-summary-card {
    position: static;
  }
}

@media (max-width: 480px) {
  .bakery-trust-strip,
  .bakery-category-tiles,
  .bakery-steps-grid,
  .bakery-testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* v1.0.16: tighter side gutters and card padding on phones, so content is not squeezed. */
@media (max-width: 480px) {
  .bakery-page-container,
  .bakery-page-header,
  .bakery-account-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .bakery-section {
    padding-left: 12px;
    padding-right: 12px;
  }
  .bakery-card {
    padding: 16px;
  }
}