/* ============================================================
   Wet 'n Dry — Global Stylesheet
   Bootstrap 5.3.8 base; extend here, never duplicate Bootstrap.
   ============================================================ */

:root {
  --wnd-teal:        #2a9d8f;
  --wnd-teal-dark:   #1f7a6e;
  --wnd-sand:        #f4f1eb;
  --wnd-charcoal:    #2d2d2d;
  --wnd-muted:       #6c757d;
  --wnd-success:     #38b000;
  --wnd-danger:      #e63946;
  --wnd-border:      #dee2e6;
  --wnd-card-radius: 0.75rem;
  --wnd-shadow-sm:   0 2px 8px rgba(0,0,0,.07);
  --wnd-shadow:      0 4px 16px rgba(0,0,0,.10);
}

/* ---- Typography ---- */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--wnd-charcoal);
  background-color: #fff;
}

/* ---- Navbar ---- */
.navbar-brand img { height: 40px; }
.navbar { box-shadow: var(--wnd-shadow-sm); }

/* ---- Buttons ---- */
.btn-wnd {
  background-color: var(--wnd-teal);
  border-color: var(--wnd-teal);
  color: #fff;
}
.btn-wnd:hover, .btn-wnd:focus {
  background-color: var(--wnd-teal-dark);
  border-color: var(--wnd-teal-dark);
  color: #fff;
}

/* ---- Product cards ---- */
.product-card {
  border-radius: var(--wnd-card-radius);
  box-shadow: var(--wnd-shadow-sm);
  transition: box-shadow .2s, transform .2s;
  border: 1px solid var(--wnd-border);
  overflow: hidden;
}
.product-card:hover {
  box-shadow: var(--wnd-shadow);
  transform: translateY(-2px);
}
.product-card .card-img-top {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--wnd-sand);
}
.product-card .card-img-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wnd-sand);
  color: var(--wnd-muted);
  font-size: 2.5rem;
}
.product-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wnd-teal);
}
.price-from { font-size: .85rem; color: var(--wnd-muted); }

/* ---- Cart badge ---- */
.cart-count-badge {
  font-size: .65rem;
  min-width: 1.2em;
  padding: .15em .4em;
}

/* ---- Alerts (inline form messages) ---- */
.alert-form { border-left: 4px solid; border-radius: .375rem; }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: .875rem; }

/* ---- Section headings ---- */
.section-title {
  font-weight: 700;
  color: var(--wnd-charcoal);
  position: relative;
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 3rem; height: 3px;
  background: var(--wnd-teal);
  border-radius: 2px;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--wnd-charcoal);
  color: rgba(255,255,255,.8);
  font-size: .875rem;
  padding: 3rem 0 1.5rem;
}
.site-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-brand { font-size: 1.2rem; font-weight: 700; color: #fff; }

/* ---- Order status badges ---- */
.badge-status-pending  { background: #ffc107; color: #000; }
.badge-status-paid     { background: #0d6efd; color: #fff; }
.badge-status-packed   { background: #6f42c1; color: #fff; }
.badge-status-shipped  { background: #0dcaf0; color: #000; }
.badge-status-delivered{ background: var(--wnd-success); color: #fff; }

/* ---- Utility ---- */
.text-teal    { color: var(--wnd-teal) !important; }
.bg-sand      { background-color: var(--wnd-sand) !important; }
.rounded-wnd  { border-radius: var(--wnd-card-radius) !important; }
.out-of-stock { opacity: .5; pointer-events: none; }

/* ---- Markdown Content Styling ---- */
.product-desc-content p {
  margin-bottom: 1rem;
}
.product-desc-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.product-desc-content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.product-desc-content h1 { font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 0.75rem; font-weight: 600; color: var(--wnd-charcoal); }
.product-desc-content h2 { font-size: 1.3rem; margin-top: 1.5rem; margin-bottom: 0.75rem; font-weight: 600; color: var(--wnd-charcoal); }
.product-desc-content h3 { font-size: 1.15rem; margin-top: 1.25rem; margin-bottom: 0.5rem; font-weight: 600; color: var(--wnd-charcoal); }
.product-desc-content h4 { font-size: 1rem; margin-top: 1.25rem; margin-bottom: 0.5rem; font-weight: 600; color: var(--wnd-charcoal); }
.product-desc-content blockquote {
  border-left: 4px solid var(--wnd-teal);
  padding-left: 1rem;
  margin-left: 0;
  color: var(--wnd-muted);
  font-style: italic;
  margin-bottom: 1rem;
}