/* Base styles */
body {
  margin: 0;
  background-color: #f5f3f0;
  background-image: none;
  font-family: 'Georgia', serif;
  color: #111111;
}

:root {
  /* Let the browser theme native UI (scrollbars, form controls, etc.)
     to match the visitor's system light/dark preference. */
  color-scheme: light dark;
  --grid-max-width: 1500px;
  --card-gap: clamp(0.9rem, 0.6rem + 1vw, 1.6rem);
  --grid-padding-horizontal: clamp(0.8rem, 2vw + 0.4rem, 1.5rem);
}

.promo-banner {
  background: #e4efe2;
  box-shadow: 0 2px 8px rgba(12, 40, 7, 0.18);
  color: #175e26;
  text-align: center;
  padding: 0.85rem 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: opacity 0.5s ease;
}

.promo-banner.is-fading {
  opacity: 0;
}

.promo-banner.is-hidden {
  display: none;
}

.promo-banner.success {
  background: #e4efe2;
  box-shadow: 0 2px 8px rgba(12, 40, 7, 0.18);
  color: #175e26;
}

.promo-banner.warning {
  background: #e4efe2;
  box-shadow: 0 2px 8px rgba(12, 40, 7, 0.18);
  color: #175e26;
}
@font-face {
  font-family: 'CleaversJuvenia';
  src: url('assets/fonts/Cleavers_Juvenia.otf') format('opentype');
}
.header-text h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
}


/* White box at the top with text */
.header-top {
  background: #f5f3f0;
  padding: clamp(2.5rem, 7vw, 5.5rem) 1rem clamp(0.25rem, 1vw, 0.5rem);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-bottom: none;
}

.header-text {
  font-family: 'CleaversJuvenia', serif;
  font-size: clamp(1.3rem, 6vw, 2.5rem);
  color: #111111;
  text-align: center;
  line-height: 1.5;
}


/* Mountain image below the white box */
header.image-header {
  height: clamp(95px, 22vw, 175px);
  box-sizing: content-box;
  padding: clamp(0.5rem, 2vw, 1rem) clamp(1.5rem, 7vw, 4rem) clamp(2rem, 6vw, 3.5rem);
  background-image: url("img/ui/logo.png");
  background-repeat: no-repeat;
  background-size: contain; /* Ensures full image is shown */
  background-position: center;
  background-origin: content-box;
  border-bottom: none;
  background-color: #f5f3f0; /* fill unused space to match page background */
  isolation: isolate;
}


/* Navigation */
.site-nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #cdd9bf;
  box-shadow: 0 2px 8px rgba(12, 40, 7, 0.18);
  padding: 0.9rem clamp(1rem, 4vw, 3.2rem);
  gap: 2rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: #175e26;
  font-weight: 600;
}

.nav-links a:hover,
.nav-links a.active {
  text-decoration: underline;
  color: #0f3c1a;
}

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  font-weight: 600;
  color: #175e26;
  margin-left: auto;
}

.cart-link:hover { text-decoration: underline; }

.state-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #3b4734;
  padding: 0;
  border: none;
  background: transparent;
}

.filter-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.state-filter .filter-label {
  font-weight: 600;
  white-space: nowrap;
  /* Match the "Featured Cards" heading color (instead of inheriting the
     muted green from .state-filter). */
  color: #111111;
}

.filter-select {
  padding: 0.45rem 2.6rem 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(90,113,82,0.28);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2354704a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.05rem center / 0.62rem,
    #f5f3f0;
  font-weight: 600;
  color: #2f3d2c;
  cursor: pointer;
  white-space: nowrap;
  min-width: 150px;
  appearance: none;
  box-shadow: 0 6px 16px rgba(55, 76, 50, 0.16);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.filter-select:hover {
  border-color: #536b4b;
  box-shadow: 0 8px 18px rgba(55, 76, 50, 0.22);
}

.filter-select:focus {
  outline: none;
  border-color: #4b6243;
  box-shadow: 0 0 0 3px rgba(83,107,75,0.28);
}

.filter-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.active-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(90,113,82,0.25);
  background: rgba(90,113,82,0.14);
  color: #2f3d2c;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.filter-chip:hover {
  background: rgba(90,113,82,0.24);
  border-color: rgba(90,113,82,0.45);
  color: #22311f;
}

.filter-chip .chip-remove {
  font-size: 1rem;
  line-height: 1;
}

.filter-clear-link {
  color: #3f5a39;
  font-weight: 600;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(90,113,82,0.14);
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.filter-clear-link:hover {
  background: rgba(90,113,82,0.24);
  color: #22311f;
}

.filter-hidden-inputs {
  display: none;
}

/* Postcard gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 320px));
  gap: var(--card-gap);
  padding: 1.6rem var(--grid-padding-horizontal);
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  box-sizing: border-box;
  justify-items: center;
  justify-content: center;
  align-items: stretch;
  position: relative;
}


.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #586454;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}


.cream-box {
  width: 320px;
  max-width: 320px;
  background: transparent;
  border: none;
  box-shadow: 0 8px 16px rgba(96, 102, 92, 0.1);
  border-radius: 6px;
  padding: 1.4rem 1.2rem 1.6rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
  min-height: 420px;
}

.cream-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 0px 28px rgba(37, 52, 32, 0.12);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  height: 100%;
  padding-top: 1rem;
}

.image-holder {
  width: 100%;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-actions {
  margin-top: auto;
  width: 100%;
  display: grid;
  grid-template-rows: minmax(40px, 1fr) auto;
  align-items: center;
  row-gap: 0.35rem;
  min-height: 110px;
}

.card-short-name {
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #175e26;
  text-align: center;
  margin: 0;
  line-height: 1.1;
  opacity: 0.85;
  text-transform: uppercase;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.card-actions form {
  width: 100%;
}

.card-actions .combo-control {
  margin: 0 auto;
}

/* Horizontal cards: lift the caption to the midpoint between image and button.
   card-actions fills the gap below the (fixed) image; its flexible top row
   centers the caption while the button stays pinned at the bottom. */
.cream-box[data-orientation="horizontal"] .card-actions {
  flex: 1 1 auto;
  margin-top: 0;
}

.postcard-img {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.4); /* even shadow on all sides */
}

figcaption {
  font-family: Inter, sans-serif; /* clean and classy */
  font-size: 1.1rem;              /* slightly smaller than before */
  color: #175e26;
  text-align: center;
  margin-bottom: 1.2rem;          /* nice breathing room above image */
  font-weight: 500;
  text-transform: uppercase;
}

/* Footer */
footer {
  text-align: center;
  padding: 1.5rem;
  background: #f5f3f0;
  border-top: none;
  color: #111111;
  font-size: 0.9rem;
}

.filter-featured-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--grid-max-width);
  padding: 0 var(--grid-padding-horizontal);
  margin: 1.4rem auto 1rem;
  box-sizing: border-box;
}

.featured-label {
  font-family: inherit;
  font-weight: 600;
  font-size: 1.45rem;
  color: #111111;
  white-space: nowrap;
  margin-left: 0;
}

.featured-panel {
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto 1rem;
  padding: 0 var(--grid-padding-horizontal);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.featured-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 320px));
  gap: var(--card-gap);
  align-items: stretch;
  justify-items: center;
  justify-content: center;
}

.featured-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.25rem;
}

.view-all-button:disabled,
.view-all-button.activated {
  opacity: 0.7;
  cursor: default;
}

.remaining-gallery.is-collapsed {
  display: none;
}

.remaining-gallery.is-empty {
  display: none;
}

.featured-row .gallery-empty {
  grid-column: 1 / -1;
}

/* About page layout */
.about-section {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
  color: #111111;
}

.about-section h2 {
  margin-top: 2rem;
  font-size: 1.6rem;
  color: #111111;
}

.about-section p {
  line-height: 1.65;
  font-size: 1.05rem;
  margin-top: 0.5rem;
}

.about-photo {
  margin: 1.75rem auto 0;
  max-width: 460px;
  text-align: center;
}
.about-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.about-photo figcaption {
  margin-top: 0.6rem;
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #111111;
  text-transform: none;
  font-weight: 400;
  font-style: italic;
  text-align: center;
}
.about-photo figcaption strong {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.2rem;
  text-transform: none;
}

/* Contact form styles */
.contact-section {
  max-width: 600px;
  margin: 3rem auto;
  padding: 0 1rem;
  color: #1b3a1e;
}
.contact-section form button {
  align-self: center;
  width: min(100%, 320px);
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: #5a7152;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(90, 113, 82, 0.25);
}
.contact-section form button:hover {
  background: #4d6346;
}
.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.header-text-secondary {
  font-family: 'CleaversJuvenia', serif;
  font-size: clamp(1rem, 4.6vw, 1.5rem);
  color: #111111;
  margin: 0;
  top: 2rem;
  bottom: 0rem;
  line-height: 1.5;
}
.header-text-secondary h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
}
.tagline {
  font-size: 1.45rem;
  font-family: 'Georgia', serif;
  font-weight: 600;
  color: #111111;
  margin: 0 0 1rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

form label {
  font-weight: 400;
  font-size: 1.05rem;
  color: #111111;
}

form input,
form textarea {
  padding: 0.65rem;
  border-radius: 8px;
  border: 1px solid #cbbba0;
  font-size: 1rem;
  background: #fffefb;
  font-weight: 400;
}

form textarea {
  resize: vertical;
  min-height: 7rem;
  max-height: 22rem;
}

form button {
  background-color: #6e4f33;
  color: #fffef8;
  border: none;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 400;
  transition: background-color 0.2s;
}

form button:hover {
  background-color: #5a3e2b;

}
.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid #d9c7ae;
  background: #fffaf3;
  color: #111111;
  font-size: 0.95rem;
}
.alert.success {
  border-color: #b3c29c;
  background: #cdd9bf; /* same sage green as the nav bar */
  color: #175e26;
}
.alert.error {
  border-color: #d89b9b;
  background: #fff5f5;
  color: #8a1f1f;
}

/* Button styling for thank-you.html */
a button {
  background-color: #6e4f33;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 2rem;
}

a button:hover {
  background-color: #5a3e2b;
}


.cart-count { font-weight: 600; }

/* Cart page layout */
.cart-page {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #f4f4f4;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem;
}

.cart-container {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 800px;
}

.cart-container h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #175e26; /* Dark green */
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.cart-table th,
.cart-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.cart-table th {
  background-color: #fafafa;
  font-weight: 600;
}

.cart-table tr:hover {
  background-color: #f9f9f9;
}

.empty {
  text-align: center;
  font-style: italic;
  color: #777;
}

.checkout-button,
.back-button {
  background-color: #175e26; /* Dark green */
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.3s ease;
  display: block;
  margin: 1rem auto;
}

.checkout-button:hover,
.back-button:hover {
  background-color: #144d1f;
}
/* Flex layout for back button and heading */
.cart-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cart-header h1 {
  margin: 0 auto; /* keeps it centered even with left-aligned back button */
  font-size: 2rem;
  color: #175e26;
  text-align: center;
  flex-grow: 1;
}

/* Back button updated look */
.back-button {
  background-color: white;
  color: #175e26;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(23, 94, 38, 0.3); /* green shadow */
  transition: all 0.2s ease;
}

.back-button:hover {
  box-shadow: 0 0 12px rgba(23, 94, 38, 0.5);
}
.cancel-message-overlay {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: #175e26;
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(23, 94, 38, 0.25);
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease-out;
}

.quantity-select {
  font-size: 1rem;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid #a4b89f;
  margin-bottom: 0.5rem;
  background-color: #fff;
  color: #111111;
}

.custom-add-button {
  background-color: white;
  color: #175e26;
  border: 2px solid #175e26;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(23, 94, 38, 0.2);
  transition: all 0.2s ease;
}

.custom-add-button:hover {
  box-shadow: 0 0 16px rgba(23, 94, 38, 0.35);
  background-color: #f8fff9;
}
/* Right side: add button */
.combo-control .custom-add-button {
  height: 100%;
  border: none;
  background-color: #175e26;
  color: white;
  font-weight: 500;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  border-radius: 0;
  transition: background-color 0.2s ease;
}

.combo-control .custom-add-button:hover {
  background-color: #144d1f;
}

/* Same solid-green format as the homepage's add-to-cart button */
.contact-submit-button {
  background-color: #175e26;
  color: white;
  border: none;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contact-submit-button:hover {
  background-color: #144d1f;
}

/* Optional: icon inside button */
.custom-add-button .icon {
  height: 12px;
  display: inline-block;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.product-page {
  max-width: 900px;
  align-items: center;
  margin: 3rem auto;
  padding: 0 1rem;
}

.product-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.product-hero img {
  width: 50%;
  align-content: center;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.product-info {
  flex: 1 1 300px;
}
.card-link {
  text-decoration: none;
  color: inherit; /* keeps text colors unchanged */
}

.icon-img {
  height: 1.1rem;
  width: auto;
  display: inline-block;
  margin-right: 0.4rem;
  vertical-align: middle;
}/* Chic spotlight layout */

.product-spotlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
  margin: 4rem auto;
  padding: 1rem;
  background-color: #f8f7f4;
  box-shadow: 0 8px 24px rgba(125, 100, 75, 0.2); /* light brown shadow */
  border-radius: 12px; /* optional: soft corners */
}

.spotlight-img {
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.spotlight-text {
  text-align: center;
  max-width: 600px;
}

.spotlight-text h1 {
  font-family: 'Georgia', serif;
  font-size: 2.25rem;
  color: #111111;
  margin-bottom: 1rem;
}

.spotlight-text p {
  font-size: 1.1rem;
  color: #111111;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.spotlight-form {
  display: flex;
  justify-content: center;
  align-items: center;
}
.spotlight-form .combo-control {
  max-width: 320px;
  width: 100%;
}

.combo-control {
  display: flex;
  align-items: stretch;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  /* Frame is drawn as an outset box-shadow ring rather than a `border`, so the
     inner fill reaches the rounded clip edge with no antialiased sliver of the
     container background showing between border and button at the corners. */
  box-shadow: 0 0 0 2px #5a7152, 0 0 10px rgba(23, 94, 38, 0.12);
  max-width: 320px;
  width: 100%;
  background: #ffffff;
}

.combo-control .quantity-select {
  flex: 1;
  height: 100%;
  min-width: 0;
  border: none;
  border-radius: 0;
  background-color: #ffffff;
  color: #2f592a;
  font-weight: 500;
  font-size: 1rem;
  padding: 0 1.6rem 0 1rem;
  appearance: none;
  line-height: 48px;
  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237f9b79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.75rem;
  background-clip: padding-box;
}

.combo-control .custom-add-button {
  height: 100%;
  padding: 0 1.2rem;
  background-color: #5a7152;
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.combo-control .custom-add-button:hover {
  background-color: #4d6346;
}

.combo-control .custom-add-button.go-cart span {
  white-space: nowrap;
}

.combo-control.existing-cart {
  max-width: 320px;
  width: 100%;
}

.combo-control.existing-cart .quantity-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 95px;
  border-right: 1px solid rgba(90,113,82,0.25);
}

.combo-control.existing-cart .custom-add-button {
  flex: 1 1 auto;
  justify-content: center;
}

.image-holder {
  width: 100%;
  flex: 1 1 auto;
  min-height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  margin-bottom: 0.5rem;
}

.image-holder img.postcard-img {
  max-width: 100%;
  max-height: 280px;
  width: auto;
  height: auto;  object-fit: contain;
  overflow: visible;
}
.image-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
.carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(90, 90, 90, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s ease, background-color 0.2s ease;
  opacity: 0;
  pointer-events: none;
}
.carousel-nav:hover {
  background: rgba(70, 70, 70, 0.6);
}
.carousel-nav.prev {
  left: 6px;
}
.carousel-nav.next {
  right: 6px;
}
.cream-box:hover .carousel-nav {
  opacity: 1;
  pointer-events: auto;
}
.spotlight-carousel {
  position: relative;
  width: 100%;
  /* border-box so the 2.75rem side padding sits INSIDE the width instead of
     adding ~88px of overflow (which pushed the card off the left on mobile).
     max-width bumped to 788px (700 image + 88 padding) so the desktop image
     content area stays the original 700px. */
  box-sizing: border-box;
  max-width: 788px;
  margin: 0 auto 2rem;
  padding: 0 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.spotlight-carousel .carousel-track {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spotlight-carousel .carousel-slide {
  position: relative;
  inset: auto;
  width: 100%;
  display: none;
  opacity: 0;
  pointer-events: none;
}
.spotlight-carousel .carousel-slide.is-active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.spotlight-carousel .carousel-nav {
  opacity: 1;
  pointer-events: auto;
  background: rgba(90, 90, 90, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}
.spotlight-carousel .carousel-nav.prev {
  left: 0;
  transform: translate(-50%, -50%);
}
.spotlight-carousel .carousel-nav.next {
  right: 0;
  transform: translate(50%, -50%);
}
.spotlight-carousel .carousel-slide img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  margin: 0 auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.spotlight-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* ===========================================================================
   Dark mode — automatically follows the visitor's system color preference.
   Hand-tuned "almost-black green" palette that inverts the light theme while
   keeping the brand greens readable. Tweak the variables below to taste.
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Just TWO surface tones, mirroring light mode (white everywhere + one
       pale-green for chrome). Everything lifted — nav, panels, cards-on-hover,
       inputs, filter pills — shares --d-surface; borders do the separating. */
    --d-bg: #1b1c19;          /* page base */
    --d-surface: #1e2922;     /* every lifted surface: nav, panels, inputs, filter */
    --d-surface-2: #1e2922;   /* alias of --d-surface (kept for clarity of intent) */
    --d-border: #2f3e33;      /* soft hairlines / outlines */
    --d-text: #e4e9df;        /* primary text — warm off-white */
    --d-text-muted: #9aa890;  /* secondary text — muted sage-grey */
    /* ONE green, soft & muted (lichen / dried-sage, not neon). Used for every
       accent AND for filled buttons — which carry dark ink so the green can
       stay light. */
    --d-green: #93ab98;
    --d-green-hover: #a8bcab;
    --d-green-strong: #93ab98;        /* filled buttons use the same green */
    --d-green-strong-hover: #a8bcab;
    --d-on-green: #17231b;    /* dark ink for text on the green fill */
    --d-brown: #9b7a55;       /* earthy brand brown for form buttons */
    --d-brown-hover: #836340;
  }

  body {
    background-color: var(--d-bg);
    color: var(--d-text);
  }

  /* Header / chrome */
  .header-top { background-color: var(--d-bg); }

  /* The logo is a pure-black silhouette on a transparent background, so it
     would vanish on the dark page. The header has no text children, so we let
     the dark page show through (transparent) and invert just the logo image
     to a soft off-white. */
  header.image-header {
    background-color: transparent;
    filter: invert(0.9);
  }

  .header-text,
  .header-text-secondary,
  .tagline,
  .featured-label { color: var(--d-text); }

  .promo-banner,
  .promo-banner.success,
  .promo-banner.warning {
    background: var(--d-surface);
    color: var(--d-green);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  }

  /* Navigation */
  .site-nav {
    background: var(--d-surface);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.44);
  }
  .nav-links a,
  .cart-link { color: var(--d-green); }
  .nav-links a:hover,
  .nav-links a.active { color: var(--d-green-hover); }
  .state-filter { color: var(--d-text-muted); }
  /* "Filter:" label matches the "Featured Cards" heading (light), not muted.
     Specificity must match the light-mode .state-filter .filter-label rule so
     this override still wins in dark mode. */
  .state-filter .filter-label { color: var(--d-text); }
  /* Recolor the saturated brand-green cart PNG to the muted theme sage so the
     icon matches the "Cart" text beside it (computed black->#93ab98 chain). */
  .cart-link .icon-img {
    filter: brightness(0) saturate(100%) invert(0.332) sepia(0.092) saturate(4.72) hue-rotate(81deg) brightness(1.910) contrast(0.986);
  }

  /* Filters */
  .filter-select {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23b3c8b7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.05rem center / 0.62rem,
      var(--d-surface-2);
    color: var(--d-text);
    border-color: var(--d-border);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }
  .filter-select:hover { border-color: var(--d-green-strong); }
  .filter-select:focus {
    border-color: var(--d-green);
    box-shadow: 0 0 0 3px rgba(147, 171, 152, 0.3);
  }
  .filter-chip {
    background: rgba(147, 171, 152, 0.14);
    border-color: rgba(147, 171, 152, 0.3);
    color: var(--d-text);
  }
  .filter-chip:hover {
    background: rgba(147, 171, 152, 0.24);
    border-color: rgba(147, 171, 152, 0.5);
    color: #fff;
  }
  .filter-clear-link {
    background: rgba(147, 171, 152, 0.14);
    color: var(--d-green);
  }
  .filter-clear-link:hover {
    background: rgba(147, 171, 152, 0.24);
    color: var(--d-green-hover);
  }

  /* Gallery cards — like light mode, the tile is barely there at rest (just the
     floating postcard) and only emerges as a lifted panel with a strong shadow
     on hover. */
  .gallery-empty { color: var(--d-text-muted); }
  .cream-box {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  }
  .cream-box:hover {
    background: var(--d-surface);
    border-color: var(--d-border);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.82);
  }
  .postcard-img { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55); }
  .card-short-name,
  figcaption { color: var(--d-green); }

  /* Footer */
  footer {
    background: var(--d-bg);
    border-top: none;
    color: var(--d-text);
  }

  /* About / contact / spotlight text */
  .about-section,
  .about-section h2,
  .about-photo figcaption,
  .about-photo figcaption strong,
  .contact-section,
  .spotlight-text h1,
  .spotlight-text p { color: var(--d-text); }

  .product-spotlight {
    background-color: var(--d-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }

  /* Forms */
  form label { color: var(--d-text); }
  form input,
  form textarea {
    background: var(--d-surface-2);
    border-color: var(--d-border);
    color: var(--d-text);
  }
  form input::placeholder,
  form textarea::placeholder { color: var(--d-text-muted); }
  form button,
  a button {
    background-color: var(--d-brown);
    color: #fdf6ee;
  }
  form button:hover,
  a button:hover { background-color: var(--d-brown-hover); }

  /* Alerts */
  .alert {
    background: var(--d-surface-2);
    border-color: var(--d-border);
    color: var(--d-text);
  }
  .alert.success {
    background: var(--d-surface); /* same green-grey as the dark nav bar */
    border-color: var(--d-border);
    color: var(--d-green);
  }
  .alert.error {
    background: #3a1a1a;
    border-color: #7a3535;
    color: #f0a3a3;
  }

  /* Cart page (shared styles.css chrome) */
  .cart-page { background-color: var(--d-bg); color: var(--d-text); }
  .cart-container {
    background: var(--d-surface);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  }
  .cart-container h1,
  .cart-header h1 { color: var(--d-green); }
  .cart-table th,
  .cart-table td { border-bottom-color: var(--d-border); }
  .cart-table th { background-color: var(--d-surface-2); }
  .cart-table tr:hover { background-color: rgba(147, 171, 152, 0.08); }
  .empty { color: var(--d-text-muted); }

  .checkout-button { background-color: var(--d-green-strong); color: var(--d-on-green); }
  .checkout-button:hover { background-color: var(--d-green-strong-hover); }
  .back-button {
    background-color: var(--d-surface);
    color: var(--d-green);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  }
  .back-button:hover { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
  .cancel-message-overlay {
    background: var(--d-surface);
    color: var(--d-green);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  }

  /* Quantity / add-to-cart combo controls */
  .quantity-select {
    background-color: var(--d-surface-2);
    color: var(--d-text);
    border-color: var(--d-border);
  }
  .custom-add-button {
    background-color: var(--d-surface);
    color: var(--d-green);
    border-color: var(--d-green);
  }
  .custom-add-button:hover { background-color: #16291d; }
  .combo-control {
    background: var(--d-surface);
    box-shadow: 0 0 0 2px var(--d-green-strong), 0 0 10px rgba(23, 94, 38, 0.12);
  }
  .combo-control .quantity-select {
    background-color: var(--d-surface);
    color: var(--d-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23d5e6d8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .combo-control .custom-add-button {
    background-color: var(--d-green-strong);
    color: var(--d-on-green);
  }
  .combo-control .custom-add-button:hover { background-color: var(--d-green-strong-hover); }
  .contact-submit-button {
    background-color: var(--d-green-strong);
    color: var(--d-on-green);
  }
  .contact-submit-button:hover { background-color: var(--d-green-strong-hover); }
  /* The cart icons ship in different tones (shop.png black, shopping.png white).
     Recolor both to the dark ink so the icon always matches the button's dark
     text (computed white/black -> #17231b). */
  .combo-control .custom-add-button .icon-img {
    filter: brightness(0) saturate(100%) invert(0.537) sepia(0.425) saturate(8.70) hue-rotate(87deg) brightness(0.078) contrast(0.825);
  }
  .combo-control.existing-cart .quantity-select {
    border-right-color: var(--d-border);
  }
}

/* ===========================================================================
   Mobile / touch — comfortable tap targets on phones.
   The site previously had no small-screen breakpoint, so every control
   rendered at desktop size (too small to tap). Aim for ~44px minimum targets.
   =========================================================================== */
@media (max-width: 600px) {
  /* Primary nav + cart link */
  .nav-links { gap: 1.25rem; }
  .nav-links a,
  .cart-link {
    font-size: 1.05rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.2rem;
  }

  /* Quantity selector + Add / View-cart button */
  .combo-control { height: 54px; }
  .combo-control .quantity-select { font-size: 1.05rem; line-height: 54px; }
  .combo-control .custom-add-button { font-size: 1.05rem; padding: 0 1.4rem; }
  .quantity-select { font-size: 1.05rem; padding: 0.6rem; }
  .custom-add-button { font-size: 1.05rem; padding: 0.7rem 1.4rem; }

  /* Filter controls */
  .filter-select { font-size: 1.05rem; padding: 0.6rem 0.9rem; min-height: 44px; }
  .filter-clear-link,
  .filter-chip { font-size: 1rem; min-height: 44px; padding: 0.5rem 0.9rem; }

  /* Carousel arrows: larger, and always visible (phones can't hover) */
  .carousel-nav {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    opacity: 1;
    pointer-events: auto;
  }

  /* Spotlight arrows: keep them tucked fully inside the carousel's side
     padding so they don't overhang the viewport edge (drop the -50% X
     translate that straddled the edge on desktop). */
  .spotlight-carousel .carousel-nav.prev { left: 0; transform: translateY(-50%); }
  .spotlight-carousel .carousel-nav.next { right: 0; transform: translateY(-50%); }
}

/* Touch devices have no hover, so keep the gallery carousel arrows visible. */
@media (hover: none) {
  .cream-box .carousel-nav {
    opacity: 1;
    pointer-events: auto;
  }
}