:root {
  --text-color: rgb(87, 75, 55);
  --page-bg: rgb(247, 246, 242);
  --accent-bg: #d2b88a;
  --cart-count-translate-y: -50%;
  --cart-count-font-size: 0.85rem;
  /* Nudge the cart icon vertically (positive = down, negative = up) */
  --cart-icon-translate-y: -4px;
}

[x-cloak] {
  display: none !important;
}

/* Local fonts */
@font-face {
  font-family: 'ZenKaku';
  src: url('fonts/ZenKakuGothicAntique-Black.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Alegreya was previously a local variable font. Replaced by Google Newsreader (light 300) - see HTML head for font import */

body {
  font-family: 'Work Sans', sans-serif;
  color: var(--text-color);
  margin: 0;
  background: var(--page-bg);
}

a,
button,
input,
textarea,
select {
  color: var(--text-color);
}

.site-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
}

/* Ensure navbar container is positioned so we can center the brand */
.site-navbar {
  position: relative;
}

/* Make the header's container a flex row so left items, centered brand, and right actions align */
.site-navbar>.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  /* keep for absolute centering of .site-brand */
}

/* Circular menu button (mobile) */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

/* Center the brand/logo in the navbar and allow it to hang */
.site-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -35%);
  margin: 0 auto;
  padding: 0;
  z-index: 1400;
}

/* Mobile overlay (slide out from left) */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  /* Fallback */
  height: 100dvh;
  width: 86vw;
  max-width: 420px;
  background: #f7f3ee;
  transform: translateX(-100%);
  transition: transform 350ms cubic-bezier(.2, .9, .3, 1);
  /* no shadow when closed so there's no visible edge on the page */
  box-shadow: none;
  z-index: 9999;
  overflow-y: auto;
}

.mobile-overlay.is-open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.overlay-inner {
  padding: 1.25rem 1rem 2rem 1rem;
  /* Ensure bottom padding accounts for iOS Home Bar */
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  height: 100%;
  /* Fill the overlay container */
}

/* Cart Overlay (Right Slide-out) */
.cart-overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  /* Fallback */
  height: 100dvh;
  width: 90vw;
  max-width: 480px;
  background: #f7f3ee;
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(.2, .9, .3, 1);
  box-shadow: none;
  z-index: 9999;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.cart-overlay.is-open {
  transform: translateX(0);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

.hover-underline:hover {
  text-decoration: underline !important;
}

.overlay-close {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-weight: 600;
  padding: 0.5rem 0.25rem;
}

.close-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(107, 90, 74, 0.15);
  font-size: 1.1rem;
}

.close-text {
  letter-spacing: 0.12em;
}

.mobile-nav {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
}

.mobile-nav a {
  display: block;
  padding: 2.25rem 0.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--text-color);
  font-size: 1.05rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(91, 75, 63, 0.08);
  font-family: 'ZenKaku', 'Work Sans', sans-serif;
}

/* Ensure mobile menu button and cart sit above other elements */
.menu-btn,
.cart-link {
  z-index: 1300;
}

@media (min-width: 769px) {
  .menu-btn {
    display: none;
  }

  .mobile-overlay {
    display: none;
  }

  .cart-link.d-md-none {
    display: none !important;
  }
}

.site-brand {
  padding: 0;
}

.site-brand img {
  display: block;
  height: 74px;
  width: auto;
}

/* Footer logo - keep smaller so it doesn't dominate the footer */
.site-footer .navbar-brand img,
.site-footer .site-brand img {
  height: 48px;
  max-width: 240px;
  width: auto;
  display: block;
}

/* Left / right groups for header */
.site-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-action {
  color: var(--text-color);
  text-decoration: none;
}

.page-about .site-header {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.page-about .site-nav .site-nav-link,
.page-about .site-action,
.page-about .cart-link {
  color: #fff !important;
}

.page-about .site-nav-link::after,
.page-about .site-action::after,
.page-about .cart-link::after {
  background-color: rgba(255, 255, 255, 0.55);
}

.page-about .site-nav .site-nav-link:hover,
.page-about .site-nav .site-nav-link:focus,
.page-about .site-action:hover,
.page-about .cart-link:hover {
  color: #fff;
}

.page-about .menu-btn {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.site-nav-wrap {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1200;
}

@media (max-width: 767px) {
  .site-nav-wrap {
    display: none;
  }

  /* --- Mobile Alignment Fix --- */

  /* 1. Push mobile menu (left) and cart (right) to the edges */
  .site-navbar>.container {
    justify-content: space-between;
  }

  /* 2. Absolute center the logo so it isn't pushed by the different widths of the menu btn vs cart icon */
  .site-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -35%);
    margin: 0;
  }

  .site-brand img {
    height: 83px;
  }

  /* --- About Page Content Updates (from updates01.png) --- */

  /* Fix invisible text: Change lead paragraph from white to dark since it now sits on the page background */
  .about-hero__panel .lead-paragraph {
    color: var(--text-color);
    text-shadow: none;
  }

  /* Adjust photo rotation to be less aggressive on mobile */
  .about-photos .placeholder-photo:nth-child(1) {
    transform: rotate(-3deg) translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
}

/* Custom Hover Effect for Header/Footer Links */
.site-nav-link,
.site-action,
.cart-link,
.site-footer a:not(.navbar-brand) {
  text-decoration: none;
  position: relative;
}

.site-nav-link::after,
.site-action::after,
.cart-link::after,
.site-footer a:not(.navbar-brand)::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #d7d4ce;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.site-nav-link:hover::after,
.site-action:hover::after,
.cart-link:hover::after,
.site-footer a:not(.navbar-brand):hover::after {
  opacity: 1;
}

/* Ensure navbar-brand (logo) doesn't get valid link styles if targeting generic a */
.site-brand {
  text-decoration: none;
}

/* Standardize Header Links */
.site-nav .site-nav-link,
.site-action,
.cart-link {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color);
}

.site-nav .site-nav-link:hover,
.site-nav .site-nav-link:focus {
  color: var(--text-color);
}

/* Make the site-nav behave like the old .navbar-nav (flex horizontal list) */
.site-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1.25rem;
  align-items: center;
}

.site-nav-item {
  list-style: none;
}

.site-nav-link {
  display: inline-block;
}

.tracking-wide {
  letter-spacing: 0.12em;
}

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

/* Cart icon count (small number overlaid on cart graphic) */
.cart-icon {
  position: relative;
  display: inline-block;
}

.cart-count {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, var(--cart-count-translate-y));
  background: transparent;
  color: #fff;
  padding: 0;
  font-size: var(--cart-count-font-size);
  line-height: 1;
  text-align: center;
  min-width: 16px;
}

.cart-icon {
  position: relative;
  display: inline-block;
  transform: translateY(var(--cart-icon-translate-y));
}

.cart-count--corner {
  left: auto;
  right: -6px;
  top: -6px;
  transform: none;
  font-size: 0.65rem;
}

.page-about .cart-count {
  color: var(--text-color);
}

.hero {
  background: #f7f7f7;
}

.hero .lead {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 300;
}

/* Headlines: use Newsreader for H1-style headings and tighten letter-spacing slightly */
h1,
.display-5,
.display-6 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.btn-custom {
  background: var(--accent-bg);
  color: var(--text-color);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  padding: 1rem 2.25rem;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.btn-custom:hover,
.btn-custom:focus {
  color: var(--text-color);
  background: #c6a973;
}

.btn-custom:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* About page specific styles and placeholders */
.about-hero {
  position: relative;
  /* allow hero to bleed under the header */
  overflow: visible;
  margin-top: -110px;
  z-index: 0;
}

.about-hero__img {
  display: block;
  width: 100%;
  height: clamp(750px, 75vh, 1200px);
  object-fit: cover;
  object-position: center top;
  transform: none;
}

.about-hero__copy {
  position: absolute;
  top: auto;
  bottom: clamp(18px, 7vw, 140px);
  left: 0;
  width: 100%;
  z-index: 2;
}

.about-hero__panel {
  background: transparent;
  padding: 0;
  max-width: 460px;
}

.about-hero__logo {
  margin-bottom: 1.5rem;
}

/* Actual HTML uses .about-hero__badge and .about-hero__intro
   Add rules to position the badge (icon) above the white intro text
   and align the left edge of the white intro with the left column copy.
*/
/* New shared overlay wrapper for badge + intro */
.about-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* let clicks pass through to image if needed */
  z-index: 3;
  /* Use flex to align the container to the bottom */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(18px, 4vw, 140px);
  /* 7 */
}

.about-hero__intro {
  margin-top: 2rem;
  padding: 0;
  color: #fff;
  text-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  pointer-events: auto;
  /* restore clicking on text if selected */
  max-width: 460px;
}

.about-hero__badge {
  /* relative to flex flow within overlay */
  width: 75px;
  height: auto;
  display: block;
  pointer-events: auto;
}

.about-hero__badge img {
  display: block;
  width: 100%;
  height: auto;
}

.about-inner {
  padding: 0 0 6rem;
  position: relative;
  z-index: 2;
  margin-top: 0;
}

.about-content {
  margin-top: 4rem;
}

.about-content .lead-paragraph,
.about-hero__panel .lead-paragraph {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  color: rgba(87, 75, 55, 0.95);
  margin-bottom: 1.25rem;
}

.about-content p {
  font-size: 1rem;
  line-height: 1.75;
}

.about-hero__panel .lead-paragraph {
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
  font-size: 1rem;
  line-height: 1.75;
}

.about-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 0;
  position: relative;
  z-index: 3;
}

.placeholder-photo,
.placeholder-logo {
  background: #efeae2;
  border: 1px solid #e6ddd2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(87, 75, 55, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.placeholder-photo {
  height: 180px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.placeholder-photo--large {
  height: 260px;
}

.placeholder-logo {
  height: 64px;
  width: 220px;
  margin: 0 auto;
  overflow: hidden;
}

.about-photo-img,
.placeholder-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* playful rotations for overlapping photos */
.about-photos .placeholder-photo:nth-child(1) {
  transform: rotate(-4deg);
}

.about-photos .placeholder-photo:nth-child(2) {
  transform: rotate(3deg);
}

@media (min-width: 768px) {
  .about-photos {
    grid-template-columns: 1fr;
  }

  .placeholder-photo {
    height: 220px;
  }

  .about-inner {
    padding: 0 0 7rem;
  }
}

/* Mobile adjustments: place copy inside hero and photos under copy */
@media (max-width: 767px) {

  /* pull the content up so copy sits inside the hero */
  .about-hero__copy {
    position: static;
    padding: 1.25rem 1rem 0;
  }

  .about-hero__panel {
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  .about-inner {
    margin-top: 0;
    padding-top: 0;
  }

  .about-content p {
    color: var(--text-color);
    text-shadow: none;
  }

  .about-photos {
    margin-top: 1.5rem;
  }

  .about-photos .placeholder-photo:nth-child(1) {
    transform: rotate(-6deg) translateY(-36px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  }

  .about-photos .placeholder-photo:nth-child(2) {
    transform: rotate(2deg) translateY(0) scale(0.98);
  }

  .placeholder-logo {
    margin-bottom: 0.75rem;
  }
}

@media (min-width: 992px) {
  .about-inner {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 8rem;
  }

  .about-photos {
    margin-top: -3.5rem;
    /* lift photos more so they overlap the hero */
  }

  /* increase overlap and pull the photos slightly inward; make them larger to
     match the design reference */
  .about-photos .placeholder-photo:nth-child(1) {
    /* keep rotation but reduce the vertical offset so the stack looks balanced */
    transform: rotate(-6deg) translateY(-60px);
  }

  .about-photos .placeholder-photo:nth-child(2) {
    transform: rotate(6deg);
    margin-top: -140px;
    margin-left: 28px;
    /* keep some horizontal offset but smaller to avoid overlap */
  }

  .about-photos {
    grid-template-columns: 1fr;
  }

  .placeholder-photo {
    height: 300px;
  }

  /* force square on desktop */

  /* ensure the photos column sits to the right of the copy */
  .about-photos-col {
    /* push the photos column further right so it sits clearly beside the copy */
    padding-left: 6rem;
    display: flex;
    justify-content: flex-end;
  }

  /* dark copy width expands to fill the container */
  .about-content {
    max-width: 100%;
  }

  /* Position the photo stack absolutely within the right column so it sits to the
     right of the dark copy and cannot flow underneath it. This keeps the photos
     visually aligned to the right side of the content area and overlapping the
     hero as intended. */
  .about-photos-col {
    position: relative;
  }

  .about-photos {
    position: absolute;
    right: 0;
    top: -4.5rem;
    /* lift so photos overlap hero slightly more */
    /* fixed width for square photos */
    width: 300px;
    max-width: 46%;
    z-index: 3;
  }

  /* Ensure the actual .photo elements are square on desktop and overlap */
  .about-photos .photo {
    width: 300px;
    height: 300px;
    /* square: width === height */
    overflow: hidden;
    display: block;
    border-radius: 2px;
    position: relative;
  }

  .about-photos .photo--1 {
    height: 300px;
    transform: rotate(-6deg);
    z-index: 4;
    margin-bottom: -140px;
    /* overlap the second photo */
  }

  .about-photos .photo--2 {
    height: 300px;
    transform: rotate(6deg);
    z-index: 2;
    position: relative;
    top: 0;
  }

  .about-photos .photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
}

.product-card {
  text-align: center;
  padding: 1rem 0 2rem;
}

.product-box {
  background: #efeae2;
  /* background box extends 25px out from the artwork */
  padding: 25px;
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Match product image aspect ratio: 890w x 840h */
  aspect-ratio: 890 / 840;
}

.product-box::after {
  content: '';
  position: absolute;
  /* place the inline stroke 7px from the artwork: inset = padding - 7px => 25 - 7 = 18 */
  inset: 18px;
  border: 1px solid #d9d0c1;
  border-radius: 4px;
  pointer-events: none;
}

.product-box img {
  /* Ensure product thumbnails adopt the site-wide product image aspect ratio (890w x 840h)
     and crop consistently across listings. Use object-fit to preserve focus while
     allowing the image to scale responsively. */
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 890 / 840;
  object-fit: cover;
}

.product-name {
  margin: 1.1rem 0 0.25rem;
  font-family: 'Newsreader', serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-color);
}

/* Slightly tighter letter-spacing for Newsreader-set elements */
.product-name,
.product-card .desc,
.hero .lead {
  letter-spacing: -0.03em;
}

.product-card .desc {
  margin: 0 0 0.6rem;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 300;
  opacity: 0.9;
}

.product-card .price {
  font-family: 'ZenKaku', 'Work Sans', sans-serif;
  font-weight: 800;
}

.price-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.price-link::after {
  content: '→';
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translate(-8px, -50%);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
  color: var(--text-color);
  font-weight: 700;
}

.price-link:hover::after,
.price-link:focus::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.product-detail-box {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.product-detail-box img {
  /* Product detail images should use the same 890x840 aspect ratio and fill their
     container while preserving visual framing. Use object-fit:cover for consistent
     presentation; keep max-width to avoid overflow. */
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 890 / 840;
  object-fit: cover;
  display: block;
}

.purchase-row .qty-box {
  background: #f3ece3;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  min-width: 130px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

.qty-btn {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.qty-value {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
}

.add-to-cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--accent-bg);
  border: none;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.product-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.product-tabs button {
  background: transparent;
  border: none;
  padding: 0.35rem 0;
  font-family: 'ZenKaku', 'Work Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-color);
  opacity: 0.6;
  cursor: pointer;
}

.product-tabs button.active {
  opacity: 1;
  border-bottom: 2px solid rgba(87, 75, 55, 0.12);
  padding-bottom: 0.25rem;
}

.tab-panel {
  color: var(--text-color);
  line-height: 1.7;
  border-top: 1px solid rgba(87, 75, 55, 0.08);
  padding-top: 1rem;
}

.site-footer {
  background: #EFEAE2;
  color: var(--text-color);
}

.site-footer .small {
  letter-spacing: 0.14em;
}

/* Processing/Checkout Loader Overlay */
.processing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: rgba(247, 246, 242, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Safari support */
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.processing-box {
  background: #E2E2E2;
  /* Light gray box per screenshot */
  width: 100%;
  max-width: 400px;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.processing-title {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 1.75rem;
  color: #000;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.progress-track {
  width: 100%;
  height: 16px;
  background: #AFAFAF;
  /* Darker gray for track */
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-fill {
  height: 100%;
  background-color: #348E00;
  /* Green fill */
  width: 0%;
  transition: width 100ms linear;
  border-radius: 100px;
}

.processing-text {
  font-family: 'Newsreader', serif;
  font-size: 0.9rem;
  color: #000;
  line-height: 1.5;
  min-height: 3em;
  /* Reserve space for 2 lines to prevents jumps */
  opacity: 0.8;
}

.subscribe-form .form-control {
  min-width: 220px;
  background: transparent;
  border: 1px solid rgba(87, 75, 55, 0.2);
}

.subscribe-form .btn {
  letter-spacing: 0.12em;
}

.tiny {
  font-size: 0.85rem;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .hero {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .product-box {
    /* match desktop spacing so the visual gap remains consistent on small screens */
    padding: 25px;
  }

  .purchase-row .qty-box {
    margin: 0 auto;
  }

  /* Add small page insets on mobile so content doesn't touch the edges */
  body {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Hero already gets internal padding; disable its extra padding to avoid double insets */
  .hero {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 576px) {
  .subscribe-form .form-control {
    min-width: 160px;
  }
}

/* =========================================================
   ABOUT — DESKTOP (min-width: 768px)
========================================================= */
@media (min-width: 768px) {

  /* show desktop grid */
  .about-inner {
    display: block;
  }

  .about-photos-mobile {
    display: none !important;
  }

  /* Remove confusing styles from previous layout */
  /* The .about-hero__overlay now handles positioning for badge and intro */
  .about-hero__overlay {
    /* The padding-bottom on the main rule handles the vertical positioning */
    /* The inner container will handle horizontal alignment */
    z-index: 10;
  }

  .about-hero__intro p {
    line-height: 1.6;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  }

  /* Desktop photos (right column) */
  .about-photos-col .photo--1 {
    position: relative;
    top: -70px;
    /* slightly overlaps hero */
    transform: rotate(-4deg);
    z-index: 2;
  }

  .about-photos-col .photo--2 {
    margin-top: -20px;
    transform: rotate(3deg);
    z-index: 1;
  }

  /* dark body copy expands to full width on desktop */
  .about-content {
    max-width: 100%;
  }
}

/* Align the white intro/badge wrapper to the Bootstrap `.container` left edge
   at common desktop breakpoints. Because we put badge+intro in a wrapper,
   we only need to positioning correct on .about-hero__overlay. */
/* NOTE: Now that we use a real .container inside .about-hero__overlay,
   we DO NOT need manual left calculations. The browser grid handles it. */


/* =========================================================
   ABOUT — MOBILE (max-width: 767px)
========================================================= */
@media (max-width: 767px) {

  .about-photos-col {
    display: none !important;
    /* hide desktop photos */
  }

  .about-inner {
    padding-top: 0;
  }

  /* hero image */
  .about-hero__img {
    width: 100%;
    height: 750px;
    object-fit: cover;
  }

  /* Badge */
  .about-hero__badge img {
    width: 48px;
  }

  /* Overlay spans full hero, container handles alignment.
     We just need to ensure the bottom padding gives the requested buffer. */
  .about-hero__overlay {
    padding-bottom: 30px;
    /* Simple buffer from bottom */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: flex-start;
    /* reset from desktop center/etc if needed */
  }

  .about-hero__intro {
    margin-top: 1.5rem;
    max-width: none;
    /* Let text fill the container width on mobile */
  }

  .about-hero__intro p {
    color: #fff;
    font-size: 0.85rem;
    /* 1.05 */
    line-height: 1.55;
    text-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  }

  /* Restore standard container alignment for dark text */
  /* .about-content padding logic removed to match default bootstrap behavior
     so it aligns with the overlay container above. */

  /* MOBILE PHOTO STACK */
  .about-photos-mobile {
    margin-top: -110px;
    /* lift photos up so they noticeably overlap the hero image */
    margin-bottom: 1rem;
    /* small gap between photos and following dark text */
  }

  /* Make mobile photos square, larger, and better filling the space. Remove small max-width so
     they scale with the viewport, and use object-fit to preserve framing. */
  .about-photos-mobile .photo img {
    /* slightly smaller (≈15% smaller than previous) so stack feels more compact */
    width: 73%;
    max-width: none;
    margin: 0 auto;
    display: block;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  /* stronger overlap and tighter stacking for the two photos */
  .about-photos-mobile .photo--1 {
    transform: rotate(-4deg) translateY(-28px);
    position: relative;
    top: 0;
  }

  .about-photos-mobile .photo--2 {
    transform: rotate(3deg);
    margin-top: -70px;
    /* overlap the first photo more */
  }
}

/* Pagination Styles */
.pagination-btn {
  background: transparent;
  border: 1px solid rgba(87, 75, 55, 0.15);
  padding: 0.5rem 1.25rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-color);
  transition: all 0.3s ease;
  border-radius: 4px;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--text-color);
  color: #fff;
}

.pagination-num {
  background: transparent;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Newsreader', serif;
  font-size: 1.1rem;
  color: var(--text-color);
  transition: all 0.2s ease;
  border-radius: 50%;
  cursor: pointer;
}

.pagination-num:hover {
  background: rgba(87, 75, 55, 0.05);
}

.pagination-num.active {
  background: var(--text-color);
  color: #fff;
}

.pagination-btn:disabled {
  cursor: not-allowed;
}

/* Variant Selector */
.variant-dropdown {
  background: #f3ece3;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
}

.variant-dropdown:focus {
  background: #eee7dc;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: none;
  outline: none;
}

.variant-selector label {
  color: var(--text-color);
  font-weight: 600;
}

/* Inquiry Mode Styles */
.inquiry-box {
  background: #d5c2a1;
  color: #574b37;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.5;
  cursor: default;
}

.product-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  opacity: 1;
}

.inquiry-description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-color);
}

.inquiry-description p {
  margin-bottom: 1.5rem;
}