/* =========================================
   1. Design tokens (from Elementor site)
   ========================================= */

:root {
  /* Colors from Bread Bakery Business */
  --color-primary: #29292A;        /* dark text / header */
  --color-secondary: #DB6437;      /* accent orange */
  --color-text: #000000;
  --color-muted: #848484;
  --color-bg: #F7F8FA;             /* light gray background (Elementor footer band) */
  --color-card: #FFFFFF;
  --color-border-soft: #D3D3D9;
  --color-overlay: #D3D3D975;

  /* Brand extras */
  --color-light-orange: #FAB89F;

  /* Typography */
  --font-heading: "Prata", serif;
  --font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Radii & shadow */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-pill: 999px;

  --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.08);

  /* Layout */
  --container-width: 1120px;
  --section-padding-y: 4rem;
}

/* =========================================
   2. Basic reset & global elements
   ========================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: #ffffff;   /* PURE WHITE BACKGROUND */
  line-height: 1.6;
  font-size: 16px;
}

/* =========================================
   2b. Global page wrapper
   ========================================= */

.page-main {
  /* Keep things clean and consistent on all main content areas */
  background: #ffffff;
  padding-bottom: 3.5rem;   /* breathing room above the footer */
}

/* Make images / media responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: var(--color-primary);
}

/* --- Typography tuned to Elementor kit --- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 0.75rem 0;
}

/* H1: big Prata with slight tracking, capitalized */
h1 {
  font-size: 3.4rem;           /* ~54px on large screens */
  letter-spacing: 0.125rem;    /* ~2px */
  text-transform: capitalize;
  line-height: 1.2;
}

/* H2: secondary heading (about page sections, etc.) */
h2 {
  font-size: 2rem;             /* ~32px */
  letter-spacing: 0;
  text-transform: capitalize;
  line-height: 1.4;
}

/* H3: widget titles / smaller section headings */
h3 {
  font-size: 1.15rem;          /* ~18px */
  letter-spacing: 0.07rem;     /* ~1.1px */
  line-height: 1.2;
}

/* H4: small titles / card subtitles */
h4 {
  font-size: 0.95rem;          /* ~15–16px */
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Subtitle / eyebrow text (use like <p class="eyebrow">New arrivals</p>) */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.9rem;           /* 14–16px */
  text-transform: uppercase;
  letter-spacing: 0.35em;      /* similar to 6px tracking look */
  line-height: 1.2;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

/* Optional: utility for “soft subtitle” under H1s */
.subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Body text */
p {
  margin: 0 0 1rem 0;
  font-weight: 300;
  color: var(--color-muted);
}

/* Consistent heading + paragraph spacing inside main content */
.page-main h1,
.page-main h2,
.page-main h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.page-main p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Container helper (centers content like Elementor’s content width) */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ================================
   Sticky top ribbon & nav
   ================================ */

/* =========================================
   Header & top bar
   ========================================= */

/* Full-width sticky header bar */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: var(--color-secondary, #DB6437);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
}

/* Inner container – full page width but content centered */
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  width: 100%;
  max-width: 2400px;         /* matches your hero width */
  margin: 0 auto;

  /* ~0.5" left/right padding */
  padding: 0.7rem 3rem;
}

/* LEFT: Logo */
.top-bar-logo img {
  display: block;
  height: 32px;
}

/* CENTER: Navigation (text-based, no pills) */
.top-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;
}

/* Base nav link styles */
.top-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.375em;       /* ≈ 6px at 16px */
  color: #ffffff;

  padding-bottom: 0.2rem;
  text-decoration: none;

  transition:
    transform 0.15s ease,
    text-shadow 0.15s ease,
    color 0.15s ease;
}

/* Underline animation using ::after */
.top-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 0;
  height: 2px;
  background: #ffffff;
  opacity: 0.9;
  transition: width 0.22s ease, background 0.22s ease;
}

/* Hover: slight lift + soft glow + underline */
.top-nav-link:hover {
  transform: translateY(-1px);
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

.top-nav-link:hover::after {
  width: 100%;
}

/* Active page: keep underline visible */
.top-nav-link.is-active::after {
  width: 100%;
  background: #ffffff;
}

/* RIGHT: Cart icon with item count badge */
.top-cart {
  display: flex;
  align-items: center;
}

.top-cart-link {
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.top-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

/* Bag SVG */
.top-cart-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Cart count badge */
.top-cart-count {
  position: absolute;
  top: -4px;
  right: -6px;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-secondary, #DB6437);

  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Cart hover – match link hover behavior */
.top-cart-link:hover {
  transform: translateY(-1px);
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
}

/* Remove any old phone / announcement styles if present */
.top-bar-right,
.top-bar-text,
.top-bar-phone {
  display: none;
}

/* -----------------------------------------
   Responsive header stacking
   
@media (max-width: 768px) {
  .top-bar-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.5rem;
  }

  .top-nav {
    justify-content: center;
    flex-wrap: wrap;
  }

  .top-cart {
    align-self: flex-end;
  }
}
----------------------------------------- */


/* =========================================
   3. Header / Navigation
   ========================================= */

.site-header {
  /* no longer sticky; it now scrolls with the page */
  position: relative;
  z-index: 20;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.site-header-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.main-nav a {
  margin-left: 1.5rem;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--color-primary);
  position: relative;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width 0.25s ease;
}

.main-nav a:hover::after {
  width: 100%;
}

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

/* =========================================
   4. Hero section (Bread Bakery style)
   ========================================= */

.hero {
  background: #ffffff;
  padding: 4.5rem 0;
  border-bottom: none;
}

.hero-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.hero-copy {
  position: relative;
}

/* Thin accent bar above heading */
.hero-copy::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 0;
  width: 80px;
  height: 4px;
  background: var(--color-secondary);
}

.hero-eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.hero h1 {
  margin-bottom: 0.75rem;
}

.hero p {
  max-width: 460px;
  margin-bottom: 1.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-actions > * {
  flex-shrink: 0;
}

/* Hero image block with soft rounded corner */
.hero-visual {
  background: var(--color-light-orange);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* You can replace this placeholder style once you add a real hero image */
.hero-visual-placeholder {
  width: 100%;
  border-radius: calc(var(--radius-lg) - 6px);
  border: 1px dashed rgba(0, 0, 0, 0.12);
  min-height: 260px;
}

@media (max-width: 900px) {
  .hero {
    padding: 3rem 0 3rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-visual {
    margin-top: 1.25rem;
  }
}

/* =========================================
   5. Buttons
   ========================================= */

.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;         /* slightly smaller, closer to kit */
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-secondary);
  color: #ffffff;
  border-color: var(--color-secondary);
}

.btn-primary:hover {
  background: #c85730;
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: #ffffff;
}

/* =========================================
   6. Sections, categories & product grid
   ========================================= */

.section {
  padding: var(--section-padding-y) 0;
}

/* White background for mid-page content sections */
.section-white {
  background: #ffffff;
}

/* Make the last section share the footer background
   so there is no visible "line" at the transition */
main > section:last-of-type {
  padding-bottom: calc(var(--section-padding-y) * 1.15);
}

.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-header p {
  max-width: 480px;
  margin: 0.75rem auto 0;
}

/* Category chips */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.category-card {
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  border: 1px solid var(--color-border-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--color-primary);
  transition: 0.2s ease;
}

.category-card:hover {
  background: var(--color-secondary);
  color: #ffffff;
  border-color: var(--color-secondary);
}

/* Product grid + cards (base styling) */
.product-grid {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
}

/* Product cards (boutique redesign + animation) */

.product-card {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  position: relative;

  /* subtle entrance animation */
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.7s ease forwards;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.product-card:nth-child(2) {
  animation-delay: 0.08s;
}

.product-card:nth-child(3) {
  animation-delay: 0.16s;
}

.product-card:nth-child(4) {
  animation-delay: 0.24s;
}

/* Lift + glow on hover */
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
}

/* Image area */
.product-card__image {
  position: relative;
  overflow: hidden;
  background: #fdf3ea; /* soft peach frame around images */
}

.product-card__image img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

/* Slight zoom on hover */
.product-card:hover .product-card__image img {
  transform: scale(1.06);
}

/* Body area */
.product-card__body {
  padding: 1.1rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Title */
.product-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  margin: 0 0 0.15rem;
  color: var(--color-primary);
}

/* Price */
.product-card__price {
  font-weight: 600;
  font-size: 0.98rem;
  margin: 0 0 0.35rem;
  color: var(--color-primary);
}

/* Small descriptive note */
.product-card__note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 0.6rem;
}

/* Button row pinned to bottom of card */
.product-card__btn {
  margin-top: auto;
}

.product-card__btn .btn-primary {
  width: 100%;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
}

.price {
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

/* =========================================
   Footer (Elementor-style)
   ========================================= */

/* Overall footer wrapper uses the same light gray as Elementor theme */
.site-footer {
  margin-top: 0;
  padding: 0;
  background: var(--color-bg);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06); /* INCREASED subtlety */
  position: relative;
  z-index: 10;
}

/* Top footer band – light gray, no border line */
.footer-main {
  background: var(--color-bg);       /* same as site-footer to avoid seam */
  padding: 3rem 0 2.5rem;
}

/* 4-column layout: IG + 3 info columns */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 4rem;
  align-items: flex-start;
}

/* Column headings (Our Address / Opening Hours / Contact Info) */
footer.site-footer .footer-col h4 {
  font-family: var(--font-body) !important;   /* Roboto */
  font-size: 1rem !important;                 /* 16px */
  font-weight: 400 !important;                /* normal */
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  letter-spacing: 6px !important;             /* matches Elementor token d097826 */
  margin: 0 0 1rem 0 !important;
  color: #29292A !important;
}

/* Column body text */
.footer-col p {
  margin: 0.2rem 0;
  font-size: 0.95rem;
  line-height: 1.75;
  font-weight: 300;
  color: #29292A;
}

.footer-col a {
  color: #29292A;
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
}

.footer-col a:focus-visible {
  outline: none;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(219, 100, 55, 0.45); /* ARB orange ring */
  border-radius: 4px;
  background: rgba(219, 100, 55, 0.04);
}

/* Instagram badge */
.footer-col-icon {
  display: flex;
  align-items: center;
}

.footer-instagram-link {
  display: inline-block;
}

.footer-instagram-badge {
  width: 124px;                     /* match large Elementor social icon size */
  height: 124px;
  border-radius: 24px;
  background: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.footer-instagram-badge .ig-icon {
  width: 56px;
  height: 56px;
  fill: #ffffff;
}

/* Hover: darken tile, keep icon white */
.footer-instagram-badge:hover {
  background: #444444;
  transform: translateY(-2px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.18);
}


/* Bottom orange stripe (copyright bar) */
.footer-bottom-bar {
  background: #000000;
  color: #fdf5ee;
  text-align: center;
  padding: 0.75rem 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-bottom-bar p {
  margin: 0;
}

/* Responsive footer layout */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
}

@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-col-icon {
    justify-content: center;
    margin-bottom: 0.75rem;
  }
}


/* =========================================
   8. Forms (for contact page, later)
   ========================================= */

form {
  max-width: 520px;
  margin: 0 auto;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  font-family: var(--font-body);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #ffffff;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(219, 100, 55, 0.16);
}

textarea {
  resize: vertical;
  min-height: 140px;
}

/* =========================================
   9. Responsive tweaks for layout
   ========================================= */

/* (You can keep these simple; typography scaling is handled below) */

/* ================================
   Shop page
   ================================ */

.shop-hero {
  padding:48px 20px 32px;
  background: #fdf3ea;
}

.shop-hero__title {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.75rem;
}

.shop-hero__subtitle {
  text-align: center;
  max-width: 40rem;
  margin: 0.5rem auto 0;
  color: var(--color-muted, #666666);
  font-size: 1rem;
}

/* Category filters */

.shop-filters {
  padding: 1.5rem 0 0.75rem;
  background: #ffffff;
}

.shop-filters__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.shop-filter {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  padding: 0.4rem 1.4rem;
  background: #ffffff;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.shop-filter.is-active,
.shop-filter:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #ffffff;
}

/* Product grid wrapper */

.shop-grid {
  padding: 3rem 0 4rem;
  background: transparent; /* was #f7f7f7 – let page background show through */
}

/* ================================
   Shop floating layout panel
   ================================ */

.shop-layout {
    max-width: 1100px;
    margin: 24px auto 64px;
    padding: 24px 24px 40px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.06);
}

/* Mobile adjustments */
@media (max-width: 700px) {
    .shop-layout {
        margin: 20px 16px 40px;
        padding: 16px 16px 28px;
        border-radius: 20px;
        box-shadow: 0 14px 40px rgba(0,0,0,0.06);
    }
}

/* Product grid (used on home + shop) */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1.75rem;
}

@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Simple fade-up animation for product cards */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Product cards (shop refinements + animation) */

.product-card {
  background: #fdf1e7;           /* subtle light orange card background */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;

  /* animation */
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.7s ease forwards;
}

.product-card:nth-child(2) {
  animation-delay: 0.1s;
}

.product-card:nth-child(3) {
  animation-delay: 0.2s;
}

.product-card:nth-child(4) {
  animation-delay: 0.3s;
}

.product-card__image img {
  display: block;
  width: 100%;
  height: auto;
}

.product-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.product-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.product-card__price {
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.product-card__note {
  font-size: 0.85rem;
  color: var(--color-muted, #777777);
  margin: 0 0 0.75rem;
}

.product-card__btn {
  width: 100%;
  display: inline-block;
}

/* Card-specific button styling (does NOT affect hero buttons) */

.product-card__btn .btn-primary {
  width: 100%;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--color-primary, #000000);
  background: #ffffff;
  color: var(--color-primary, #000000);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.product-card__btn .btn-primary:hover {
  background: var(--color-primary, #000000);
  color: #ffffff;
}

/* (Other product/cart/checkout/event styles continue below unchanged)
   ... */

/* ================================
   Product detail page (product.php)
   ================================ */

.product-detail {
  padding: 4rem 1.5rem 5rem;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: flex-start;
}

/* Stack image + info on smaller screens */
@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr;
  }
}

/* Image column */
.product-detail_image {
  display: flex;
  justify-content: center;
}

.product-detail_image img {
  display: block;
  width: 100%;
  max-width: 480px;
  border-radius: 18px;
  object-fit: cover;
}

/* Text column */
.product-detail_info h1 {
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
}

.product-detail_price {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.product-detail_description {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

/* Add-to-bag area */
.product-detail_add {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}

.product-detail_add .btn,
.product-detail_add .btn-primary {
  min-width: 9rem;
}

/* Quantity control next to button */
.product-detail_qty {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.product-qty-input {
  width: 3rem;
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
}

/* Back link under the detail */
.back-link {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.back-link a {
  text-decoration: none;
  color: var(--color-primary);
}

.back-link a:hover {
  opacity: 0.7;
}


/* =========================================
   Checkout page elements
   ========================================= */

/* Header band at top of checkout */
.checkout-header { 
  padding: 48px 20px 32px;
  background: #fdf3ea;
  text-align: center;
}

.checkout {
  padding-bottom: 4rem;
}

.checkout .container {
  padding-top: 2.5rem;   /* space between header and layout */
}

/* Two-column layout: form (left) + summary (right) */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 2.5rem;
}

/* Stack on smaller screens and center the summary */
@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .checkout-summary {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Left column: customer details “card” */
.checkout-form-section {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.9rem 2rem 2.2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.02);
}

/* Override global form width for checkout */
.checkout-form {
  max-width: none;
  margin: 0;
}

/* Form fields + labels */
.checkout-form-group {
  margin-bottom: 1rem;
}

.checkout-form-group label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
  color: #8b5b33;
}

/* Rows for address / city / state / zip */
.checkout-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.checkout-form-row .checkout-form-group {
  flex: 1 1 160px;
  margin-bottom: 0;
}

/* Error panel at top of form */
.checkout-errors {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: #fff3f0;
  border: 1px solid #f0b4a0;
  color: #8a2e1e;
}

.checkout-errors h2 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.checkout-errors ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

/* Right column: order summary “card” */
.checkout-summary {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.9rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.02);
}

/* “Order Summary” heading row */
.checkout-section-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Override typography for ORDER SUMMARY header & EDIT CART link */
.checkout-section-title {
  font-family: var(--font-body) !important;   /* Roboto */
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.checkout-section-title .checkout-edit-cart-link {
  font-family: var(--font-body) !important;   /* Roboto */
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a76a45;
}

/* “Edit cart” link */
.checkout-edit-cart-link {
  font-size: 0.85rem;
  text-decoration: underline;
  color: #a76a45;
}

/* Items list under summary */
.checkout-items {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkout-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: #fdf1e7;
  border-radius: 18px;
  padding: 0.85rem 1rem;
}

.checkout-item-info {
  flex: 1 1 auto;
}

.checkout-item-name {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.checkout-item-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.checkout-item-total {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Totals area at bottom of summary */
.checkout-totals {
  margin-top: 1.25rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.checkout-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  margin: 4px 0;
  font-size: 0.9rem;
}

/* Grand total row */
.checkout-totals-row--grand {
  margin-top: 8px;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Button wrapper under totals */
.checkout-summary-actions {
  margin-top: 1.4rem;
  text-align: center;
}

.checkout-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================
   Boutique Events page (arb-events.php)
   moved from inline <style> to global CSS
   ========================================= */

/* ----- Page hero ----- */
.events-hero {
    background:#fdf3ea;
    padding:48px 20px 32px;
}
.events-hero-inner {
    max-width:1100px;
    margin:0 auto;
}
.events-hero-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 0.75rem;
}
.events-hero-subtitle {
    text-align: center;
    max-width: 40rem;
    margin: 0.5rem auto 0;
    color: var(--color-muted, #666666);
    font-size: 1rem;
}

.events-layout {
    max-width: 1100px;
    margin: 24px auto 64px;         /* space below hero + more bottom air */
    padding: 24px 24px 40px;
    background: #ffffff;            /* white card on peach/white background */
    border-radius: 24px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.06);
}

/* ----- Filters row (reusing shop-filter styling) ----- */
.events-filters {
    padding:24px 0 8px;
}
.events-filters-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.events-filters-inner .shop-filter {
    font-size:0.78rem;
}

/* ----- Empty state ----- */
.event-empty {
    font-size:0.95rem;
    color:#7a604c;
    padding:24px 0 8px;
}

/* ----- Grid wrappers (reuse product-grid) ----- */
.product-grid--events {
    width: 100%;
    margin-top: 1.5rem;   /* space between filters and cards */
}

/* Make product cards behave nicely for events */
.product-card.event-card {
    display:flex;
    flex-direction:column;
    height:100%;
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 14px 32px rgba(0,0,0,0.06);
    transition: opacity 0.25s ease, filter 0.25s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* Subtle lift + shadow on hover (not for sold-out cards) */
.product-card.event-card:not(.event-card--soldout):hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.10);
}

/* FADED style for sold-out cards */
/* MUCH STRONGER fade for sold-out cards */
.product-card.event-card.event-card--soldout {
    opacity: 0.28;
    filter: grayscale(0.9) brightness(0.85);
    box-shadow: 0 4px 14px rgba(0,0,0,0.03);
    transform: none !important;
    pointer-events: none;
}

.product-card.event-card.event-card--soldout:hover {
    transform: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03) !important;
}

/* Event card image using background-image */
.event-card-image {
    width:100%;
    padding-top:62%;
    border-radius:18px 18px 0 0;
    background-size:cover;
    background-position:center;
    background-color:#f4ece5;
    overflow:hidden;
}
.event-card-image--placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
    color:#8c7764;
}

.product-card__body {
    display:flex;
    flex-direction:column;
    padding:14px 16px 16px;
}

/* Slightly refined padding inside event cards only */
.product-card.event-card .product-card__body {
    padding: 1.1rem 1.35rem 1.35rem;
    gap: 0.3rem;
}

/* Boutique eyebrow styling for event categories */
.event-card-eyebrow {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #b37b52;
    margin-bottom: 6px;
}

/* Polished meta text (date/time/location/capacity) */
.event-card-meta {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.55;
    color: #7a604c;
    margin: 0.25rem 0 0.75rem;
}

.event-card-meta span {
    display: block;
}

/* price row + capacity status */
.event-card-price-row {
    display:flex;
    align-items:center;
    gap:0.4rem;
    margin-bottom:12px;
}
/* Price styling inside event cards */
.event-card-price {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    color: #1b7a3c;
}

/* CTA button inside card */
.event-card-actions {
    margin-top:auto;
}

.event-card-actions .btn-primary {
    width: 100%;
    border-radius: 999px;
    padding: 0.6rem 1.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Event card title refinement */
.event-card .product-card__body h3,
.event-card-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0 0 0.4rem;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

@media (max-width: 700px) {
    .events-hero {
        padding: 36px 16px 24px;
    }

    .events-layout {
        margin: 20px 16px 40px;
        padding: 16px 16px 28px;
        border-radius: 20px;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
    }
}

/* ================================
   Single Event page (event.php)
   ================================ */

/* Page wrapper */
.event-page {
  /* no bottom padding here – avoids extra space below footer */
}

/* Hero band at the top of the event page */
.event-hero {
  background: #fdf3ea;           /* match shop/cart hero background */
  padding: 48px 20px 32px;
}

.event-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
  gap: 2rem;
  align-items: center;
}

/* Left side of hero: text content */
.event-hero-text .event-tagline {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  color: #86512a;
}

.event-title {
  font-size: 2.1rem;
  margin: 0 0 0.5rem;
}

.event-subtitle {
  margin: 0 0 1rem;
  color: #444;
}

.event-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.event-hero-meta span {
  background: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  border: 1px solid #f2d2a9;
}

/* Right side of hero: image */
.event-hero-image img {
  width: 100%;
  border-radius: 1.2rem;
  object-fit: cover;
}

/* Main two-column content section */
.event-main {
  padding: 2.5rem 1.5rem 3rem;
}

.event-main-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: 2.5rem;
}

/* Text content in main column */
.event-content h2,
.event-content h3 {
  margin-top: 1.5rem;
}

.event-included-list,
.event-policies {
  padding-left: 1.25rem;
}

/* Sidebar cards (details + reservation) */
.event-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.event-details-card,
.event-reservation-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3e0cf;
}

.event-details-card dl {
  margin: 0;
}

.event-details-card dt {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b5b33;
}

.event-details-card dd {
  margin: 0 0 0.8rem;
}

/* Reservation card specifics */
.event-reservation-card label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.event-quantity-row {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #e3c4a5;
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.event-quantity-row input[type="number"] {
  width: 3rem;
  text-align: center;
  border: none;
  outline: none;
  padding: 0.4rem 0;
}

.event-quantity-row .qty-btn {
  background: #f6e0c8;
  border: none;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 1rem;
}

.event-quantity-row .qty-btn:hover {
  background: #edc79b;
}

.event-total {
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.event-cta-button {
  display: block;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-weight: 600;
  cursor: pointer;
  background: #e5742a; /* ARB orange */
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.event-cta-button:hover {
  filter: brightness(0.95);
}

.event-small-print {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.6rem;
}

/* Responsive tweaks for single event page */
@media (max-width: 768px) {
  .event-hero-inner,
  .event-main-inner {
    grid-template-columns: 1fr;
  }

  .event-hero {
    padding: 2rem 1.25rem;
  }

  .event-main {
    padding: 2rem 1.25rem 0;
  }
}

/* ================================
   Related Events section (event.php)
   ================================ */

.event-related {
  padding: 3rem 1.5rem 3rem;
  background: #ffffff;
}

.event-related h2 {
  text-align: center;
  margin: 0 0 1.75rem;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-related-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Card styling */
.event-related-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem 1.4rem;
  border: 1px solid #f1e1d1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
}

.event-related-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-family: var(--font-heading);
}

.event-related-card p {
  margin: 0.1rem 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.event-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  text-decoration: underline;
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .event-related {
    padding: 2.5rem 1.25rem 2.75rem;
  }
}

/* ================================
   Cart page
   ================================ */

.page--cart {
  background: #ffffff;
}

.cart {

}

/* Header */

.cart-header {
  padding: 48px 20px 32px;
  background: #fdf3ea;
  text-align: center;   /* ensure perfect alignment */
}

/* Space between cart header and container */
.cart .container {
  padding-top: 2.5rem;
}

.cart-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.cart-header-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.cart-subtitle {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.98rem;
}

/* Top continue-shopping link */
.cart-continue-top {
  font-size: 0.9rem;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: 0.03em;
}

.cart-continue-top:hover {
  opacity: 0.7;
}

/* Empty state */

.cart-empty {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 20px;
}

.cart-empty p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

/* Layout: items + summary */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 2.5rem;
}

/* On smaller screens, stack vertically */

@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cart-summary {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ================================
   Cart Summary Typography
   ================================ */

/* ORDER SUMMARY heading */
.cart-summary_title {
  font-family: var(--font-body) !important;   /* Roboto */
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  color: var(--color-primary);
}

/* Subtotal row labels + amounts */
.cart-summary_row {
  font-family: var(--font-body) !important;   /* Roboto */
  font-size: 0.95rem;
  color: var(--color-primary);
}

/* Small informational note (Taxes and shipping...) */
.cart-summary_note {
  font-family: var(--font-body) !important;   /* Roboto */
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 1.25rem 0 1.5rem;
}

/* Continue Shopping link under summary */
.cart-summary_back {
  font-family: var(--font-body) !important;   /* Roboto */
}

.cart-summary_row {
  font-family: var(--font-body);   /* Roboto */
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.cart-summary_note {
  font-family: var(--font-body);
  color: var(--color-muted);
}

/* Cart items */

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cart-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  background: #fdf1e7;
  border-radius: 24px;
  padding: 1.35rem 1.7rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cart-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.06);
}

@media (max-width: 700px) {
  .cart-item {
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding: 1.1rem 1.25rem;
  }

  .cart-item_meta {
    grid-column: 1 / -1;
    text-align: right;
    margin-top: 0.75rem;
  }
}

.cart-item_image img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.cart-item_info {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cart-item_name {
  font-size: 1rem;
  margin: 0 0 0.3rem;
}

.cart-item_name a {
  text-decoration: none;
}

.cart-item_name a:hover {
  text-decoration: underline;
}

.cart-item_price {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Quantity controls on cart items */

.cart-item_qty {
  margin-top: 0.45rem;
}

.cart-qty-form {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.08s ease;
}

.qty-btn:hover {
  border-color: var(--color-primary);
  background: #fff6f0;
}

.qty-btn:active {
  transform: scale(0.95);
}

.qty-value {
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
}

/* Right-hand side (line total + remove) */

.cart-item_meta {
  text-align: right;
}

.cart-item_total {
  font-weight: 600;
  margin: 0 0 0.35rem;
}

/* Remove button styling */

.cart-item_remove {
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.cart-item_remove:hover {
  color: var(--color-primary);
}

/* Summary card */

.cart-summary {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.9rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.cart-summary_title {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 1.25rem;
}

.cart-summary_row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.cart-summary_note {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 1.25rem 0 1.5rem;
}

.cart-summary_btn {
  width: 100%;
}

.cart-summary_back {
  margin-top: 1rem;
  font-size: 0.9rem;
  text-align: center;
}

/* =========================================
   Global responsive typography (match Elementor kit)
   ========================================= */

@media (max-width: 1024px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 2.625rem; /* 42px */
  }

  h2 {
    font-size: 1.375rem; /* 22px */
  }
}

@media (max-width: 1024px) {
  body { font-size: 15px; }
  h1 { font-size: 2.625rem; }
  h2 { font-size: 1.375rem; }
}

@media (max-width: 767px) {
  body { font-size: 14px; }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.125rem; }

  .eyebrow { font-size: 0.75rem; }
  .top-nav-link { font-size: 1.5rem; }
}

@media (max-width: 600px) {
  .page-main { padding-bottom: 2.5rem; }
}


/* Stronger styling for the orange footer ribbon text */
.footer-bottom-bar p {
  color: #fdf5ee !important;               /* light cream on orange */
  font-family: var(--font-body);           /* Roboto */
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Contact / booking page */

.contact-page {
    padding-bottom: 3rem;
}

.contact-hero {
    padding: 3rem 0 1.5rem;
    background: #fdf7f2; /* soft neutral backdrop */
}

.contact-hero-inner {
    max-width: 960px;
    margin: 0 auto;
}

.contact-hero-copy h1 {
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
    color: #7a4a2c;
}

.contact-hero-copy p {
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.6;
    color: #5c4c40;
}

.contact-experiences {
    padding: 1.5rem 0 1rem;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #7a4a2c;
}

.section-intro {
    margin-bottom: 1rem;
    color: #6b5a4c;
    font-size: 0.98rem;
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.experience-card {
    text-align: left;
    border-radius: 16px;
    border: 1px solid #f0e1d2;
    padding: 1rem 1.1rem;
    background: #ffffff;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.experience-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    color: #7a4a2c;
}

.experience-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6b5a4c;
    margin-bottom: 0.4rem;
}

.experience-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #fff4ea;
    color: #c96920;
}

.experience-card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.05);
    transform: translateY(-2px);
    border-color: #f4b17a;
}

/* Request form */
.contact-request {
    padding: 1.5rem 0 2.5rem;
}

.contact-alert {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.contact-alert--success {
    background: #e7f5ea;
    border: 1px solid #a3d6aa;
    color: #276738;
}

.contact-alert--error {
    background: #fde8e8;
    border: 1px solid #f4a7a7;
    color: #8c2b2b;
}

.appointment-form {
    margin-top: 0.75rem;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border: 1px solid #f0e1d2;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #7a4a2c;
    margin-bottom: 0.25rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    border-radius: 10px;
    border: 1px solid #ddcbb9;
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #e68a3a;
    box-shadow: 0 0 0 2px rgba(230,138,58,0.16);
}

.form-field textarea {
    resize: vertical;
}

.required {
    color: #c43c3c;
    margin-left: 0.2rem;
    font-size: 0.85em;
}

.form-actions {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.btn-primary:hover {
    background: #c96920;
    box-shadow: 0 5px 12px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.form-footnote {
    font-size: 0.8rem;
    color: #7a604c;
}

/* Honeypot field hidden from humans */
.hp-field {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

/* ================================================
   Contact page – align with global ARB styling
   ================================================ */

/* Hero should feel like Shop hero: centered, elegant */
.page-contact .contact-hero {
    background: #FFF3EA; /* match soft peach hero tone */
    padding: 3rem 0 2.5rem;
}

.page-contact .contact-hero-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    text-align: center;
}

.page-contact .contact-hero-copy h1 {
    font-family: var(--font-heading, 'Prata', serif);
    font-size: 2.4rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-heading, #29292A);
    margin-bottom: 0.75rem;
}

.page-contact .contact-hero-copy p {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-muted, #848484);
}

/* Section headings + intro centered under hero, like Shop layout */
.page-contact .contact-experiences,
.page-contact .contact-request {
    padding-left: 0;
    padding-right: 0;
}

.page-contact .contact-experiences .container,
.page-contact .contact-request .container {
    max-width: var(--container-width);
    margin: 0 auto;
}

.page-contact .section-title {
    text-align: center;
    font-family: var(--font-heading, 'Prata', serif);
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-heading, #29292A);
    margin-top: 0.5rem;
    margin-bottom: 0.35rem;
}

.page-contact .section-intro {
    text-align: center;
    font-size: 0.95rem;
    color: var(--color-muted, #848484);
    max-width: 530px;
    margin: 0 auto 1.25rem;
}

/* Experience cards: soften text & spacing to match chip/cards vibe */
.page-contact .experience-grid {
    margin-top: 1rem;
}

.page-contact .experience-card {
    border-radius: 20px;
    border-color: #F1DED0;
    padding: 1.1rem 1.2rem;
    background: #FFFDFC;
}

.page-contact .experience-card h3 {
    font-family: var(--font-heading, 'Prata', serif);
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    color: var(--color-heading, #29292A);
}

.page-contact .experience-card p {
    font-size: 0.9rem;
    color: var(--color-muted, #848484);
}

.page-contact .experience-tag {
    background: #FFEAD3;
    color: var(--color-secondary, #DB6437);
}

/* Form card sits nicely in center column */
.page-contact .appointment-form {
    max-width: 640px;
    margin: 1.25rem auto 0;
    border-radius: 20px;
}

/* Align label color with global body text */
.page-contact .form-field label {
    color: var(--color-text, #000000);
}

/* Button matches primary CTA style */
.page-contact .btn-primary {
    background: var(--color-secondary, #DB6437);
}

.page-contact .btn-primary:hover {
    background: #c45329;
}

/* ================================================
   Match Contact Page Section Titles to Shop Titles
   ================================================ */

.page-contact .section-title {
    text-align: center;
    font-family: var(--font-heading, 'Prata', serif);
    font-size: 2rem;                /* Matches Shop page */
    font-weight: 400;               /* Shop titles are not bold */
    color: var(--color-primary);    /* Same charcoal used on Shop */
    text-transform: uppercase;      /* MATCH shop hero + section style */
    letter-spacing: 0.03em;         /* subtle like Shop */
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* ================================================
   Contact page gallery + subtle animations
   ================================================ */

/* Simple fade-up animation */
@keyframes arb-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    opacity: 0;
    transform: translateY(16px);
    animation: arb-fade-up 0.7s ease-out forwards;
}

.animate-delay-1 { animation-delay: 0.12s; }
.animate-delay-2 { animation-delay: 0.22s; }
.animate-delay-3 { animation-delay: 0.32s; }

/* Gallery strip just under the hero */
.page-contact .contact-gallery {
    background: #FFF3EA;
    padding: 1.5rem 0 2rem;
}

.page-contact .contact-gallery-inner {
    max-width: var(--container-width);
    margin: 0 auto;
}

.page-contact .contact-gallery-title {
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted, #848484);
    margin-bottom: 0.75rem;
    text-align: left;
}

.page-contact .contact-gallery-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.page-contact .gallery-photo-card {
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transform-origin: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-contact .gallery-photo-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gentle hover lift, same vibe as product cards */
.page-contact .gallery-photo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* Slightly reduce top margins on sections now that gallery exists */
.page-contact .contact-experiences {
    padding-top: 1.75rem;
}

.page-contact .contact-request {
    padding-top: 1.75rem;
}

/* ================================================
   Image Overlay (Contact Page)
   ================================================ */

.overlay-card {
    position: relative;
    overflow: hidden;
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    padding: 1.4rem 1.2rem;
    color: #ffffff;

    /* Stronger gradient for more contrast */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.15) 70%,
        rgba(0, 0, 0, 0.00) 100%
    );

    opacity: 0;
    transform: translateY(15px);
    animation: arb-fade-up 0.8s ease-out forwards;
    animation-delay: 0.4s;
}

.gallery-overlay h3,
.gallery-overlay p {
    color: #FFE7D6; /* soft warm peach */
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}



/* Hover effect for overlay card */
.overlay-card:hover .gallery-overlay {
    transform: translateY(0);
    opacity: 1;
}

/* ================================================
   Contact hero: image left, text right, soft fade
   ================================================ */

.page-contact .contact-hero {
    /* Soft left-to-right gradient like a studio wash */
    background: linear-gradient(
        to right,
        #FFF3EA 0%,
        #FFF7F0 50%,
        #FFFFFF 100%
    );
    padding: 3rem 0 2.5rem;
}

.page-contact .contact-hero-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

/* Left image column */
.page-contact .contact-hero-media {
    flex: 0 0 42%;
}

.page-contact .contact-hero-media-inner {
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
    position: relative;
}

/* Optional very subtle gradient overlay on the image itself */
.page-contact .contact-hero-media-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top left,
        rgba(255, 243, 234, 0.18),
        transparent 60%
    );
    pointer-events: none;
}

.page-contact .contact-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right text column */
.page-contact .contact-hero-copy {
    flex: 1;
    text-align: left;
}

.page-contact .contact-hero-copy h1 {
    font-family: var(--font-heading, 'Prata', serif);
    font-size: 2.4rem;
    letter-spacing: 0.04em;
    color: var(--color-heading, #29292A);
    margin-bottom: 0.75rem;
}

.page-contact .contact-hero-copy p {
    max-width: 540px;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-muted, #848484);
}

/* Slide-in-from-right animation for the copy */
@keyframes arb-slide-right-fade {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    opacity: 0;
    animation: arb-slide-right-fade 0.9s ease-out forwards;
    animation-delay: 0.15s;
}

/* Responsive behavior: stack on narrow screens */
@media (max-width: 768px) {
    .page-contact .contact-hero-inner {
        flex-direction: column;
        gap: 1.75rem;
        text-align: center;
    }

    .page-contact .contact-hero-media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .page-contact .contact-hero-copy {
        text-align: center;
    }

    .page-contact .contact-hero-copy p {
        margin: 0 auto;
    }
}

/* ==========================================================
   Contact hero: full-width image, blurred right quarter
   ========================================================== */

.page-contact .contact-hero {
    position: relative;
    overflow: hidden;

    /* ARB warm background behind image & blur */
    background-color: #fdf3ea;

    background-image: none;
    background-size: cover;
    background-position: center center;

    min-height: 260px;
}

/* Blurred overlay with soft fade-out */
.page-contact .contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: none;
    background-size: cover;
    background-position: center center;

    /* blur entire layer */
    filter: blur(18px);
    transform: scale(1.05);

    /* Fade the blur from full to transparent smoothly */
    mask-image: linear-gradient(
        to left,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.50) 30%,
        rgba(0,0,0,0.25) 55%,
        rgba(0,0,0,0) 85%
    );

    /* For Safari */
    -webkit-mask-image: linear-gradient(
        to left,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.50) 30%,
        rgba(0,0,0,0.25) 55%,
        rgba(0,0,0,0) 85%
    );

    opacity: 1;
    pointer-events: none;
}



/* Overlay gradient for readability on the blurred zone */
.page-contact .contact-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    /* Wider, softer fade so there is no visible line */
    background: linear-gradient(
        to left,
        rgba(253, 243, 234, 0.96) 10%,
        rgba(253, 243, 234, 0.82) 30%,
        rgba(253, 243, 234, 0.40) 55%,
        rgba(253, 243, 234, 0.00) 80%
    );

    pointer-events: none;
}

/* Inner content aligned to the right side */
.page-contact .contact-hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: 3.2rem 1.5rem 3.4rem;
}

/* Text block sits in the blurred/glowy area */
.page-contact .hero-on-image {
    max-width: 480px;
    text-align: left;
}

.page-contact .hero-on-image h1 {
    font-family: var(--font-heading, 'Prata', serif);
    font-size: 2.4rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-heading, #29292A);
    margin-bottom: 0.75rem;
}

.page-contact .hero-on-image p {
    font-size: 1rem;
    line-height: 1.8;
    color: #4a3d34;      /* darker, warmer, more readable */
}


/* Slide-in-from-right animation (reuse the class we made earlier) */
@keyframes arb-slide-right-fade {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    opacity: 0;
    animation: arb-slide-right-fade 0.9s ease-out forwards;
    animation-delay: 0.15s;
}

/* Responsive: stack & soften effect on mobile */
@media (max-width: 768px) {
    .page-contact .contact-hero {
        background-position: center top;
    }

    .page-contact .contact-hero::before {
        /* Blur the top-right more subtly on mobile */
        clip-path: inset(0 0 40% 0);
        filter: blur(10px);
    }

    .page-contact .contact-hero::after {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.8) 35%,
            rgba(255, 255, 255, 0.0) 100%
        );
    }

    .page-contact .contact-hero-inner {
        justify-content: center;
        padding: 2.5rem 1.25rem 2.8rem;
    }

    .page-contact .hero-on-image {
        max-width: 100%;
        text-align: center;
    }

    .page-contact .hero-on-image p {
        margin: 0 auto;
    }
}

/* Hide the boutique gallery strip */
.page-contact .contact-gallery {
    display: none !important;
}

/* ================================================
   HOME PAGE LAYOUT (Hero + Welcome + Story + Vision + CTA)
   ================================================ */

.page-home-main {
  padding-bottom: 3rem;
}

/* ---------- HERO (below welcome) ---------- */

.home-hero {
  background-color: #ffffff;
  padding: 3.5rem 0 3rem;
}

.home-hero-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  text-align: center;
}

.home-hero-copy h1 {
  font-family: var(--font-heading, 'Prata', serif);
  font-size: 3.5rem;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  color: var(--color-primary, #29292A);
  margin-bottom: 0.5rem;
}

.home-hero-subtitle {
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-muted, #848484);
  margin-top: 0.25rem;
}

.home-hero-image {
  margin-top: 2rem;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.home-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================
   HOME WELCOME – Clean two-column hero with ghost word (CONSOLIDATED)
   Thinner banner (-25%) + logo smaller (-30%)
   ========================================================== */

.page-home .home-welcome {
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    to right,
    #B45A21 0%,
    #B45A21 5%,
    #D88A57 35%,
    #fdf3ea 90%,
    #fdf3ea 100%
  );

  /* ↓↓↓ THIS IS WHAT CONTROLS THE HEIGHT ↓↓↓ */
  min-height: 405px;   /* was 540px */
  padding: 3.75rem 0;  /* was 5rem 0 */

  z-index: 0;
}


/* Left accent bar */
.page-home .home-welcome::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 56px;
  background-color: #f6b08b;
  z-index: 0;
}

/* Ghosted background image on the right side */
.page-home .home-welcome::after {
  content: "";
  position: absolute;
  inset: 0;

  /* CHANGE THIS PATH TO UPDATE THE BACKGROUND IMAGE */
  background-image: url('/images/imagery/storefront1.jpg');
  background-repeat: no-repeat;
  background-size: 120%;
  background-position: 85% center;


  opacity: 0.22;

  mask-image: linear-gradient(
    to left,
    rgba(0,0,0,1)   0%,
    rgba(0,0,0,0.85) 10%,
    rgba(0,0,0,0.6) 20%,
    rgba(0,0,0,0.3) 35%,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0)   60%
  );
  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0,0,0,1)   0%,
    rgba(0,0,0,0.85) 10%,
    rgba(0,0,0,0.6) 20%,
    rgba(0,0,0,0.3) 35%,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0)   60%
  );

  pointer-events: none;
  z-index: 0;
}

/* Inner layout: logo left, text right (centered content inside full-width banner) */
.page-home .home-welcome-inner {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 2400px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;

  /* Thinner feel: reduce gap */
  gap: 2.25rem;          /* was ~3rem */
  padding: 0 4rem;
}

/* LEFT COLUMN – logo image */
.page-home .home-welcome-media {
  display: flex;
  justify-content: center;
  align-items: center;

  /* bring logo a touch closer to the text */
  padding-right: 2rem;
}


/* RIGHT COLUMN – text */
.page-home .home-welcome-copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding-right: 3vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Ghost word "Aubrey" behind the text */
.page-home .home-welcome-copy::before {
  content: "Aubrey";
  position: absolute;
  top: -2.6rem;
  right: 2.5rem;
  font-family: var(--font-heading, "Prata", serif);
  font-size: 5.2rem;
  letter-spacing: 0.08em;
  color: rgba(41, 41, 42, 0.08);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* Label + title */
.page-home .home-welcome-label {
  font-family: var(--font-body, "Roboto", sans-serif);
  font-size: 1rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.9;
  margin-bottom: 0.45rem;
}

.page-home .home-welcome-title {
  font-family: var(--font-heading, "Prata", serif);
  font-size: 3.3rem;        /* balanced for thinner banner */
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--color-primary, #29292A);
  margin-bottom: 0.85rem;
  max-width: 900px;
}

/* Prevent horizontal scrollbars caused by wide layouts */
.page-home {
  overflow-x: hidden;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1280px) {
  .page-home .home-welcome-inner {
    max-width: 1200px;
    padding: 0 3rem;
    grid-template-columns: 1fr 1fr;
  }

  .page-home .home-welcome-title {
    font-size: 2.9rem;
  }

  .page-home .home-welcome-copy::before {
    font-size: 4.4rem;
    top: -2.2rem;
    right: 2rem;
  }
}

@media (max-width: 1024px) {
  .page-home .home-welcome-inner {
    max-width: 960px;
    padding: 0 2.5rem;
    grid-template-columns: 1fr 1fr;
  }

  .page-home .home-welcome-title {
    font-size: 2.6rem;
  }

  .page-home .home-welcome-copy::before {
    font-size: 3.8rem;
    top: -1.9rem;
    right: 1.5rem;
  }
}

@media (max-width: 768px) {
  .page-home .home-welcome {
    padding: 3rem 0 3.25rem;
    min-height: auto;
  }

  .page-home .home-welcome-inner {
    max-width: 100%;
    padding: 0 1.5rem;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .page-home .home-welcome-media {
    justify-content: center;
    padding-right: 0;
  }

  .page-home .home-welcome-media img {
    max-width: 300px;
  }

  .page-home .home-welcome-copy {
    max-width: 100%;
    text-align: center;
    align-items: center;
    padding-right: 0;
  }

  .page-home .home-welcome-copy::before {
    display: none;
  }

  .page-home .home-welcome-title {
    font-size: 2.1rem;
  }
}
/* ================================================
   HOME: TEMPLATE SECTIONS (below home-welcome)
   ================================================ */

.page-home .home-section-label{
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: 0.78rem;
  opacity: 0.85;
  margin-bottom: 0.65rem;
}

.page-home .home-section-title{
  font-family: "Prata", serif;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.85rem;
}

.page-home .home-section-intro{
  max-width: 760px;
  margin: 0 0 1.75rem;
  line-height: 1.7;
  opacity: 0.9;
}

/* Store Highlights */
.page-home .home-highlights{
  padding: 4rem 0 4.25rem;
}

.page-home .home-highlights-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.page-home .home-highlight-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 22px;
  padding: 1.5rem 1.4rem 1.35rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.page-home .home-highlight-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 56px rgba(0,0,0,0.10);
}

.page-home .home-highlight-icon{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;

  /* Uses current text color via SVG currentColor */
  color: #2a2a2a;

  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.page-home .home-highlight-title{
  margin: 0 0 0.55rem;
  font-size: 1.08rem;
}

.page-home .home-highlight-text{
  margin: 0 0 1.05rem;
  line-height: 1.7;
  opacity: 0.9;
}

/* Ready To Visit stays white, but feels “designed” */
.page-home .home-cta--white{
  background: #fff;
  padding: 4.25rem 0 4.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Responsive */
@media (max-width: 950px){
  .page-home .home-highlights-grid{
    grid-template-columns: 1fr;
  }
}

/* ================================================
   Float-in animation for logo (from the left)
   ================================================ */

@keyframes arb-slide-left-fade {
    from {
        opacity: 0;
        transform: translateX(-26px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-left {
    opacity: 0;
    animation: arb-slide-left-fade 1s ease-out forwards;
    animation-delay: 0.25s;  /* matches text timing */
}

/* ==========================================================
   HEADER REFINEMENTS
   ========================================================== */

/* 1. New header color */
.top-bar {
  background-color: #EAA221 !important;
}

/* 2. Header inner layout */
.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 2400px;
  padding: 0.75rem 3rem; /* ~0.5 inch padding visually */
  margin: 0 auto;
  width: 100%;
}

/* 3. White leaf logo (left) */
.top-bar-logo img {
  height: 26px;
  width: auto;
  display: block;
}

/* 4. Cart icon wrapper (right) */
.top-cart-link {
  color: #ffffff;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
}

.top-cart-icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outline bag icon */
.top-cart-icon svg {
  width: 26px;
  height: 26px;
}

/* Count badge inside icon */
.top-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ffffff;
  color: #EAA221;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

/* Hover lift (matches nav behavior) */
.top-cart-link:hover {
  transform: translateY(-1px);
  text-shadow: 0 3px 7px rgba(0,0,0,0.25);
}

/* Increase nav link font size by 2 steps */
.top-nav-link {
    font-size: 1.05rem !important;   /* previously 0.8rem */
    letter-spacing: 0.375em;      /* keep your existing spacing */
}

/* Slightly larger leaf logo + subtle shadow for pop */
.top-bar-logo img {
    height: 32px !important;   /* was 26px — increased one size level */
    width: auto;
    display: block;

    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.28));  /* soft boutique shadow */
}

/* Hover effect for white leaf logo (match link + cart hover behavior) */
.top-bar-logo a img {
    transition:
        filter 0.2s ease,
        transform 0.2s ease,
        text-shadow 0.2s ease;
}

/* On hover: lift + recolor to charcoal */
.top-bar-logo a:hover img {
    transform: translateY(-1px);
    filter: brightness(0) invert(0) !important; /* turns logo charcoal/black */
    text-shadow: 0 3px 7px rgba(0,0,0,0.25);
}

/* =========================================
   Mobile header: leaf left, menu center, cart right
   ========================================= */

/* Base hamburger styles (hidden on desktop) */
.top-nav-toggle {
  display: none;
  width: 28px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.top-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* X-animation when menu is open */
.top-nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.top-nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.top-nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile layout: single ribbon */
@media (max-width: 900px) {
  .top-bar-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
  }

  /* Show hamburger and center it in the ribbon */
  .top-nav-toggle {
    display: inline-flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  /* Leaf on the LEFT */
  .top-bar-logo {
    margin: 0;
  }

  .top-bar-logo img {
    max-height: 26px;
  }

  /* Cart on the RIGHT */
  .top-cart {
    margin-left: auto;
  }

  /* Nav becomes dropdown below the ribbon */
  .top-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background-color: #EAA221;
    padding: 0.75rem 1.25rem 1rem;

    display: none;             /* hidden until toggled */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .top-nav.is-open {
    display: flex;
  }

  .top-nav-link {
    margin: 0;
  }
}


/* =========================================
   Mobile hamburger navigation
   ========================================= */

/* Hidden on desktop by default */
.top-nav-toggle {
  display: none;
  margin-left: 0.75rem;
  width: 28px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.top-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Mobile layout */
@media (max-width: 900px) {
  .top-bar-inner {
    position: relative;
    padding: 0.7rem 1.25rem;
    justify-content: space-between;
    gap: 0.75rem;
  }

  /* Show the hamburger on mobile */
  .top-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  /* Cart stays on the right */
  .top-cart {
    margin-left: auto;
  }

  /* Turn the center nav into a dropdown panel */
  .top-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background-color: var(--color-secondary, #DB6437);
    padding: 0.75rem 1.25rem 1rem;

    display: none;               /* hidden by default */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* When open */
  .top-nav.is-open {
    display: flex;
  }

  .top-nav-link {
    margin: 0;
  }
}

/* X-animation when menu is open */
.top-nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.top-nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.top-nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* =========================================
   Mobile hamburger navigation + layout
   ========================================= */

/* Base hamburger styles (hidden on desktop) */
.top-nav-toggle {
  display: none; /* we only show it in the media query below */
  width: 28px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.top-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* X-animation when menu is open */
.top-nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.top-nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.top-nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ------- Mobile layout: single ribbon ------- */
@media (max-width: 900px) {
  .top-bar-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
  }

  /* Show hamburger on mobile, keep it on the LEFT */
  .top-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    order: 1;
  }

  /* Logo in the CENTER */
  .top-bar-logo {
    order: 2;
    margin: 0 auto;
  }

  .top-bar-logo img {
    max-height: 26px; /* keep it small and tidy in the ribbon */
  }

  /* Cart on the RIGHT */
  .top-cart {
    order: 3;
    margin-left: 0;
  }

  /* Nav becomes a dropdown below the ribbon */
  .top-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background-color: #EAA221;
    padding: 0.75rem 1.25rem 1rem;

    display: none; /* hidden until toggled */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .top-nav.is-open {
    display: flex;
  }

  .top-nav-link {
    margin: 0;
  }
}
/* =========================================
   FINAL mobile header override:
   Leaf LEFT, menu CENTER, cart RIGHT
   ========================================= */
@media (max-width: 900px) {
  .top-bar-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
  }

  /* Leaf stays on the LEFT */
  .top-bar-logo {
    order: 0;
    margin: 0;
  }

  .top-bar-logo img {
    max-height: 26px;
  }

  /* Cart stays on the RIGHT */
  .top-cart {
    order: 0;
    margin-left: auto;
  }

  /* Hamburger is centered in the ribbon */
  .top-nav-toggle {
    order: 0;
    display: inline-flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  /* Nav becomes dropdown below ribbon */
  .top-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background-color: #EAA221;
    padding: 0.75rem 1.25rem 1rem;

    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .top-nav.is-open {
    display: flex;
  }

  .top-nav-link {
    margin: 0;
  }

  /* Hide big home hero leaf image on small screens */
  .page-home .home-welcome-media {
    display: none;
  }
}
/* Center hero text on mobile */
@media (max-width: 900px) {
  
  /* Make the hero inner wrapper a single column centered */
  .page-home .home-welcome-inner {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem;
  }

  /* Center the welcome text block */
  .page-home .home-welcome-copy {
    text-align: center !important;
    align-items: center !important;
    margin: 0 auto;
    max-width: 90%;
  }

  .page-home .home-welcome-label {
    text-align: center !important;
    width: 100%;
  }

  .page-home .home-welcome-title {
    text-align: center !important;
    width: 100%;
  }

  .page-home .home-text-link {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }
}
/* =========================================
   Final mobile hero override
   Center welcome text and hide extras
   ========================================= */
@media (max-width: 900px) {

  /* Turn hero into a single centered column */
  .page-home .home-welcome-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 1.875rem 1.125rem !important;
    gap: 0.75rem !important;
  }

  /* Hide the big color leaf inside the hero */
  .page-home .home-welcome-media {
    display: none !important;
  }

  /* Center all the text under the hamburger */
  .page-home .home-welcome-copy {
    text-align: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    max-width: 90%;
  }

  .page-home .home-welcome-label,
  .page-home .home-welcome-title {
    text-align: center !important;
    width: 100%;
  }

  .page-home .home-text-link {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hide the ghost “Aubrey” word behind the title */
  .page-home .home-welcome-copy::before {
    display: none !important;
  }

  /* Hide the left accent bar in hero on mobile */
  .page-home .home-welcome::before {
    display: none !important;
  }
}

/* ================================================
   ABOUT PAGE – SOLID PEACH BACKGROUND
   ================================================ */

.page-about-main {
  padding-bottom: 3rem;
}

/* Peach background band */
.page-about .about-feature {
  padding: 5rem 0 5.5rem;
  background-color: #FADCC7;

}

/* Centered polaroid-style card */
.page-about .about-feature-card {
  margin: 0 auto;
  max-width: 980px;
  background: #ffffff;

  border-radius: 28px; /* card stays rounded */
  overflow: visible;   /* allow square image corners */

  /* Clean depth */
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.20),
    0 8px 18px rgba(0, 0, 0, 0.10);


  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Image fills card */
.page-about .about-feature-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile tuning */
@media (max-width: 700px) {
  .page-about .about-feature {
    padding: 3.25rem 0 3.5rem;
  }

  .page-about .about-feature-card {
    border-radius: 20px;
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.14),
      0 1px 0 rgba(0, 0, 0, 0.04);
  }
}

.home-highlight-icon img {
  width: 32px;
  height: 32px;
  opacity: 0.9;
}
/* ================================================
   HOME HERO — Carousel (fade) styles only
   Scoped so it won't affect other pages/components
   ================================================ */

/* Base carousel container */
.home-hero .carousel-container{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Dots overlay (same look as index2) */
.home-hero .carousel-dots{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.home-hero .carousel-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.75);
  cursor: pointer;
  padding: 0;
}

.home-hero .carousel-dot.is-active{
  background: #fff;
  border-color: #fff;
}

/* ----------------------------
   Fade mode (data-carousel="fade")
   ---------------------------- */
.home-hero .carousel-container[data-carousel="fade"] .carousel-track{
  position: relative;
  height: 100%;
  transition: none; /* no sliding */
}

.home-hero .carousel-container[data-carousel="fade"] .carousel-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 3000ms ease; /* slow fade */
}

.home-hero .carousel-container[data-carousel="fade"] .carousel-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Row 2 thinner (about 25%) — image height control */
.home-hero .carousel-container[data-carousel="fade"] .carousel-slide img{
  width: 100%;
  height: 390px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Responsive heights */
@media (max-width: 1024px){
  .home-hero .carousel-container[data-carousel="fade"] .carousel-slide img{
    height: 315px;
  }
}

@media (max-width: 640px){
  .home-hero .carousel-container[data-carousel="fade"] .carousel-slide img{
    height: 240px;
  }
}
/* =========================================
   HOME HERO — Full-Width Override
   Removes container constraint ONLY here
========================================= */

.home-hero > .container.home-hero-inner {
  max-width: none;     /* remove global container limit */
  width: 100%;
  padding-left: 0;     /* remove container padding */
  padding-right: 0;
}

/* Optional: keep content from touching edges on large screens */
.home-hero .home-hero-copy {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 24px 34px;
}
/* FULL BLEED hero — override existing .home-hero-inner constraint */
.home-hero .home-hero-inner{
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: center; /* keep your alignment */
}
.home-hero .home-hero-copy{
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 56px 24px 34px;
}
.home-hero .home-hero-bottom{
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 0;
  align-items: stretch;
  width: 100%;
}

@media (max-width: 1024px){
  .home-hero .home-hero-bottom{
    grid-template-columns: 1fr;
  }
}
.home-hero .home-hero-carousel{
  min-height: 390px;
}

/* Right column: keep centered vertically, align text LEFT */
.home-hero .home-hero-vibe{
  display: grid;
  place-items: center;
  padding: 40px 32px;
}

.home-hero .home-hero-vibe .vibe-card{
  text-align: left;        /* <-- key change */
  max-width: 560px;
  width: 100%;             /* makes left-alignment consistent */
  padding: 0;
}
/* Match the subtitle style under the main headline */
.home-hero .vibe-text{
  font-family: "Roboto", sans-serif;
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  font-weight: 500;
  color: #8b7355;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.8;
  margin-top: 18px;
}

.home-hero .vibe-title{
  font-family: var(--font-heading, "Prata", serif);
  font-size: 3.5rem;     /* <-- CHANGE THIS */
  line-height: 1.05;
  margin: 0;
}
/* ==========================================================
   HOME WELCOME — FINAL REFINEMENT
   Thinner banner + scaled logo (approved)
   ========================================================== */

/* 1) Make the welcome band thinner overall */
.page-home .home-welcome{
  min-height: 405px;     /* reduced from 540px (~25% thinner) */
  padding: 3.75rem 0;    /* reduced from 5rem */
}

/* 2) Tighten the inner container vertically */
.page-home .home-welcome-inner{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 1.7rem !important;  /* ~25% reduction from 2.25rem */
}

/* 3) Reduce leaf logo size by ~30% */
.page-home .home-welcome-media img{
  max-width: 475px !important; /* reduced from ~680px */
  height: auto;
}

/* Bring logo slightly closer to text */
.page-home .home-welcome-media{
  padding-right: 2rem !important;
}

/* 4) Slightly reduce title size to match thinner band */
.page-home .home-welcome-title{
  font-size: 3.3rem; /* balanced for new height */
}

/* Mobile refinements stay proportional */
@media (max-width: 768px){
  .page-home .home-welcome{
    min-height: auto;
    padding: 3rem 0 3.25rem;
  }

  .page-home .home-welcome-title{
    font-size: 2.1rem;
  }

  .page-home .home-welcome-media img{
    max-width: 300px;
  }
}
/* FORCE DESKTOP: Home Welcome thinner (additional ~15%) */
@media (min-width: 769px){
  body.page-home section.home-welcome{
    min-height: 320px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* ALSO reduce logo slightly so content fits the thinner banner */
  body.page-home section.home-welcome .home-welcome-media img{
    max-width: 405px !important; /* ~15% down from 475px */
    height: auto !important;
  }
}
/* Remove gap between Home Welcome and Home Hero */
@media (min-width: 769px){
  .page-home .home-hero{
    padding-top: 0 !important;
  }
}
@media (min-width: 769px){
  body.page-home section.home-welcome{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.page-home section.home-hero{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}