body {
  font-family: 'Inter', sans-serif;
}

.brand {
  font-family: 'Playfair Script', serif;
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
}

.brand span {
  display: block;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 4px;
}

body {
  font-family: 'Inter', sans-serif;
}

.brand {
  font-family: 'Playfair Script', serif;
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
}

.brand span {
  display: block;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 4px;
}

.hero {
  position: relative;
  height: 100vh;
  background-image: url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.hero .content {
  position: relative;
  z-index: 3;
}

.section-title {
  font-family: 'Playfair Script', serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;
}

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 160px; /* tighter, smaller parallax */
  position: relative;
}

.parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  pointer-events: none;
  z-index: 0;
}

/* leave parallax decorative — no headings inside */
.parallax .parallax-content {
  /* kept intentionally empty for decorative parallax backgrounds */
  position: relative;
  z-index: 2; /* keep any future content above the parallax overlay and shadow */
}

/* Top shadow: makes elements above the parallax appear to cast a shadow onto it */
.parallax::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 75px;
  pointer-events: none;
  z-index: 1; /* above the overlay (z=0), below content (z=2) */
  /* slightly darker top shadow to better sell depth */
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
}

/* Make parallax headings pop */
.parallax .parallax-content h2 {
  font-size: 1.7rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

/* About headshot */
.about-headshot {
  max-width: 240px;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Product cards */
.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Honeypot fields: visually hide but keep in DOM */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Ensure Order button sits at the bottom-left of the card */
.product-card {
  position: relative;
}

.product-card .card-body {
  padding-bottom: 3.5rem; /* leave space for the anchored button */
}

.product-card .order-btn {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
}


@media (min-width: 992px) {
  .parallax { height: 180px; }
  .parallax .parallax-content h2 { font-size: 2.1rem; }
}

#parallax-1 {
  background-image: url('../img/parralax.jpg');
}

#parallax-2 {
  background-image: url('../img/parralax.jpg');
}

#parallax-3 {
  background-image: url('../img/parralax.jpg');
}


/* Brand main (Humble) — cursive with a strong right slant */
.brand-main {
  font-family: 'Satisfy', cursive;
  display: inline-block;
  font-size: 9rem; /* increased ~300% for a much larger 'Humble' */
  transform: skewX(-12deg);
  font-weight: 400;
  margin-right: 0.5rem;
  line-height: 1;
}
/* removed hero-break and hero shadow per request */
#parallax-2 {
  background-image: url('../img/parralax.jpg');
}

#parallax-3 {
  background-image: url('../img/parralax.jpg');
}

/* Add space above the contact (Get in Touch) header */
#contact .section-title {
  margin-top: 32px;
}

@media (max-width: 768px) {
  .brand-main { font-size: 3.4rem; }
}

/* Admin Styles */
.product-item .accordion-body {
  border-top: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.1);
}

.upload-status-card .progress-bar {
  transition: width 0.3s ease-in-out;
}